feat: Add localized link component and replace across app

src/app/[lang]/about/page.tsx

@@ -1,7 +1,7 @@
 import { BookOpenCheckIcon, StarIcon } from "lucide-react";
 import { Metadata } from "next";
 import Image from "next/image";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import { PageTitle } from "~/components/layout/PageTitle";
 
 export const metadata: Metadata = {

src/components/features/Link.tsx

@@ -0,0 +1,19 @@
+"use client";
+import NextLink from "next/link";
+import { useMemo } from "react";
+import { useLocale } from "~/hooks/use-locale";
+import { localizePath } from "~/lib/utils";
+
+type LinkProps = React.ComponentProps<typeof NextLink>;
+
+export default function Link(props: LinkProps) {
+  const { locale } = useLocale();
+  const href = useMemo(() => {
+    if (!(typeof props.href === "string")) {
+      return props.href.href ?? "/";
+    }
+    return props.href;
+  }, [props]);
+
+  return <NextLink {...props} href={localizePath(locale, href)} />;
+}

src/components/features/committees/CommitteeDirectory.tsx

@@ -2,7 +2,10 @@
 import React from "react";
 import { TableCell, TableRow } from "~/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
-import { DirectorySearchParams, TableDirectory } from "~/components/layout/Directory";
+import {
+  DirectorySearchParams,
+  TableDirectory,
+} from "~/components/layout/Directory";
 import {
   GlobeIcon,
   LinkedinIcon,
@@ -11,7 +14,7 @@ import {
   XSquareIcon,
 } from "lucide-react";
 import { Badge } from "~/components/ui/badge";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import clsx from "clsx";
 
 export interface CommitteeMember {

src/components/features/governance/GovernanceActionCard.tsx

@@ -14,8 +14,7 @@ import {
 } from "lucide-react";
 import { GovernanceAction } from "~/lib/governance-actions";
 import { GovernanceActionMetadata } from "~/lib/metadata";
-import Link from "next/link";
-import { useLocalizedPath } from "~/hooks/use-localized-path";
+import Link from "~/components/features/Link";
 import { useTranslation } from "~/hooks/use-translation/use-translation";
 
 const getTypeLabel = (type: GovernanceAction["type"]) => {
@@ -29,7 +28,7 @@ const getTypeLabel = (type: GovernanceAction["type"]) => {
 
 const getStatusBadge = (
   status: "Pending" | "In Progress" | "Completed",
-  className?: string,
+  className?: string
 ) => {
   const variants = {
     Pending: "bg-yellow-100 text-yellow-800",
@@ -77,7 +76,6 @@ export const GovernanceActionCard = ({
   const standard = "CIP-129"; // TODO
   const governanceActionId =
     "gov_action1pvv5wmjqhwa4u85vu9f4ydmzu2mgt8n7et967ph2urhx53r70xusqnmm525"; // TODO
-  const { getLocalizedPath } = useLocalizedPath();
   const { dictionary } = useTranslation();
 
   return (
@@ -140,7 +138,7 @@ export const GovernanceActionCard = ({
 
         <div className="flex justify-center">
           <Link
-            href={getLocalizedPath(`/governance/${action.id}`)}
+            href={`/governance/${action.id}`}
             className={` ${buttonVariants()} `}
           >
             {dictionary.general["view-details-and-vote"]}

src/components/features/profile/ProfileInfo.tsx

@@ -17,7 +17,7 @@ import {
   VoteIcon,
 } from "lucide-react";
 import { Badge } from "~/components/ui/badge";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import {
   Tooltip,
   TooltipContent,

src/components/features/proposals/ProposalCard.tsx

@@ -5,7 +5,7 @@ import { Eye, MessageSquare, Calendar } from "lucide-react";
 import { buttonVariants } from "~/components/ui/button";
 import { Proposal } from "~/lib/proposals";
 import clsx from "clsx";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 
 export type ProposalCardProps = {
   proposal: Proposal;

src/components/features/proposals/ProposalContent.tsx

@@ -1,5 +1,5 @@
 import { Link as LinkIcon } from "lucide-react";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import { Proposal } from "~/lib/proposals";
 
 interface ProposalContentProps {

src/components/icons/Logo.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 
 export default function Logo() {
   return (

src/components/layout/AppSidebar.tsx

@@ -9,7 +9,7 @@ import {
   SidebarMenuItem,
 } from "~/components/ui/sidebar";
 import { headerNavLinks } from "./Header";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
 import { Input } from "../ui/input";

src/components/layout/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import { usePathname } from "next/navigation";
 import { ChevronRight } from "lucide-react";
 

src/components/layout/Footer.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import { Twitter } from "lucide-react";
 
 import CardanoLogo from "../../../public/cardano-logo.svg";

src/components/layout/Header.tsx

@@ -11,7 +11,7 @@ import { Button, buttonVariants } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import Logo from "../icons/Logo";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 import { SidebarTrigger } from "../ui/sidebar";
 import { Separator } from "../ui/separator";
 import { usePathname } from "next/navigation";

src/components/ui/pagination.tsx

@@ -3,7 +3,7 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
 import { cn } from "~/lib/utils";
 import { ButtonProps, buttonVariants } from "~/components/ui/button";
-import Link from "next/link";
+import Link from "~/components/features/Link";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav

src/hooks/use-locale.ts

@@ -0,0 +1,9 @@
+"use client";
+import { useParams } from "next/navigation";
+import { Locale } from "~/config/i18n";
+
+export function useLocale() {
+  const params = useParams();
+  const locale = params?.lang as Locale;
+  return { locale };
+}

src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { i18n, Locale } from "~/config/i18n";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -24,3 +25,22 @@ export const truncateMiddle = (input: string, maxLength: number): string => {
   const end = input.slice(-half);
   return `${start}...${end}`;
 };
+
+export function localizePath(locale: Locale, path: string) {
+  const urlParts = path.slice(1).split("/");
+  const locales = i18n.locales.map((l) => l.key);
+
+  // Absolute path, don't modify
+  if (!path.startsWith("/")) {
+    return path;
+  }
+
+  // Replace locale if present
+  if (urlParts.length && locales.includes(urlParts[0] as Locale)) {
+    return `/${locale}/` + urlParts.slice(1).join("/");
+  }
+
+  const normalizedPath = path.startsWith("/") ? path.slice(1) : path;
+
+  return `/${locale}/${normalizedPath}`;
+}