feat: support i18n

apps/client/src/components/common/recent-changes.tsx

@@ -13,11 +13,14 @@ import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
 import { IconFileDescription } from "@tabler/icons-react";
 import { getSpaceUrl } from "@/lib/config.ts";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   spaceId?: string;
 }
 export default function RecentChanges({ spaceId }: Props) {
+  const { t } = useTranslation("translation", { keyPrefix: "common" });
+
   const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
 
   if (isLoading) {
@@ -25,7 +28,7 @@ export default function RecentChanges({ spaceId }: Props) {
   }
 
   if (isError) {
-    return <Text>Failed to fetch recent pages</Text>;
+    return <Text>{t("Failed to fetch recent pages")}</Text>;
   }
 
   return pages && pages.items.length > 0 ? (
@@ -43,7 +46,7 @@ export default function RecentChanges({ spaceId }: Props) {
                     {page.icon || <IconFileDescription size={18} />}
 
                     <Text fw={500} size="md" lineClamp={1}>
-                      {page.title || "Untitled"}
+                      {page.title || t("Untitled")}
                     </Text>
                   </Group>
                 </UnstyledButton>
@@ -73,7 +76,7 @@ export default function RecentChanges({ spaceId }: Props) {
     </ScrollArea>
   ) : (
     <Text size="md" ta="center">
-      No pages yet
+      {t("No pages yet")}
     </Text>
   );
 }

apps/client/src/components/layouts/global/app-header.tsx

@@ -11,10 +11,14 @@ import {
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
+import { useTranslation } from "react-i18next";
 
 const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
 
 export function AppHeader() {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "layout",
+  });
   const [mobileOpened] = useAtom(mobileSidebarAtom);
   const toggleMobile = useToggleSidebar(mobileSidebarAtom);
 
@@ -25,7 +29,7 @@ export function AppHeader() {
 
   const items = links.map((link) => (
     <Link key={link.label} to={link.link} className={classes.link}>
-      {link.label}
+      {t(link.label)}
     </Link>
   ));
 

apps/client/src/components/layouts/global/top-menu.tsx

@@ -13,8 +13,12 @@ import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
 import useAuth from "@/features/auth/hooks/use-auth.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { useTranslation } from "react-i18next";
 
 export default function TopMenu() {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "layout",
+  });
   const [currentUser] = useAtom(currentUserAtom);
   const { logout } = useAuth();
 
@@ -44,14 +48,14 @@ export default function TopMenu() {
         </UnstyledButton>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Label>Workspace</Menu.Label>
+        <Menu.Label>{t("Workspace")}</Menu.Label>
 
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.WORKSPACE.GENERAL}
           leftSection={<IconSettings size={16} />}
         >
-          Workspace settings
+          {t("Workspace settings")}
         </Menu.Item>
 
         <Menu.Item
@@ -59,12 +63,12 @@ export default function TopMenu() {
           to={APP_ROUTE.SETTINGS.WORKSPACE.MEMBERS}
           leftSection={<IconUsers size={16} />}
         >
-          Manage members
+          {t("Manage members")}
         </Menu.Item>
 
         <Menu.Divider />
 
-        <Menu.Label>Account</Menu.Label>
+        <Menu.Label>{t("Account")}</Menu.Label>
         <Menu.Item component={Link} to={APP_ROUTE.SETTINGS.ACCOUNT.PROFILE}>
           <Group wrap={"nowrap"}>
             <CustomAvatar
@@ -88,7 +92,7 @@ export default function TopMenu() {
           to={APP_ROUTE.SETTINGS.ACCOUNT.PROFILE}
           leftSection={<IconUserCircle size={16} />}
         >
-          My profile
+          {t("My profile")}
         </Menu.Item>
 
         <Menu.Item
@@ -96,13 +100,13 @@ export default function TopMenu() {
           to={APP_ROUTE.SETTINGS.ACCOUNT.PREFERENCES}
           leftSection={<IconBrush size={16} />}
         >
-          My preferences
+          {t("My preferences")}
         </Menu.Item>
 
         <Menu.Divider />
 
         <Menu.Item onClick={logout} leftSection={<IconLogout size={16} />}>
-          Logout
+          {t("Logout")}
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>

apps/client/src/components/settings/settings-sidebar.tsx

@@ -11,6 +11,7 @@ import {
 } from "@tabler/icons-react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import classes from "./settings.module.css";
+import { useTranslation } from "react-i18next";
 
 interface DataItem {
   label: string;
@@ -51,6 +52,9 @@ const groupedData: DataGroup[] = [
 ];
 
 export default function SettingsSidebar() {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "layout",
+  });
   const location = useLocation();
   const [active, setActive] = useState(location.pathname);
   const navigate = useNavigate();
@@ -62,7 +66,7 @@ export default function SettingsSidebar() {
   const menuItems = groupedData.map((group) => (
     <div key={group.heading}>
       <Text c="dimmed" className={classes.linkHeader}>
-        {group.heading}
+        {t(group.heading)}
       </Text>
       {group.items.map((item) => (
         <Link
@@ -72,7 +76,7 @@ export default function SettingsSidebar() {
           to={item.path}
         >
           <item.icon className={classes.linkIcon} stroke={2} />
-          <span>{item.label}</span>
+          <span>{t(item.label)}</span>
         </Link>
       ))}
     </div>
@@ -89,7 +93,7 @@ export default function SettingsSidebar() {
         >
           <IconArrowLeft stroke={2} />
         </ActionIcon>
-        <Text fw={500}>Settings</Text>
+        <Text fw={500}>{t("Settings")}</Text>
       </Group>
 
       <ScrollArea w="100%">{menuItems}</ScrollArea>