Support I18n (#243)

* feat: support i18n

* feat: wip support i18n

* feat: complete space translation

* feat: complete page translation

* feat: update space translation

* feat: update workspace translation

* feat: update group translation

* feat: update workspace translation

* feat: update page translation

* feat: update user translation

* chore: update pnpm-lock

* feat: add query translation

* refactor: merge to single file

* chore: remove necessary code

* feat: save language to BE

* fix: only load current language

* feat: save language to locale column

* fix: cleanups

* add language menu to preferences page

* new translations

* translate editor

* Translate editor placeholders

* translate space selection component

---------

Co-authored-by: Philip Okugbe <phil@docmost.com>
Co-authored-by: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>

apps/client/src/components/common/export-modal.tsx

@@ -12,6 +12,7 @@ import { useState } from "react";
 import { ExportFormat } from "@/features/page/types/page.types.ts";
 import { notifications } from "@mantine/notifications";
 import { exportSpace } from "@/features/space/services/space-service";
+import { useTranslation } from "react-i18next";
 
 interface ExportModalProps {
   id: string;
@@ -29,6 +30,7 @@ export default function ExportModal({
   const [format, setFormat] = useState<ExportFormat>(ExportFormat.Markdown);
   const [includeChildren, setIncludeChildren] = useState<boolean>(false);
   const [includeAttachments, setIncludeAttachments] = useState<boolean>(true);
+  const { t } = useTranslation();
 
   const handleExport = async () => {
     try {
@@ -73,7 +75,7 @@ export default function ExportModal({
         <Modal.Body>
           <Group justify="space-between" wrap="nowrap">
             <div>
-              <Text size="md">Format</Text>
+              <Text size="md">{t("Format")}</Text>
             </div>
             <ExportFormatSelection format={format} onChange={handleChange} />
           </Group>
@@ -84,7 +86,7 @@ export default function ExportModal({
 
               <Group justify="space-between" wrap="nowrap">
                 <div>
-                  <Text size="md">Include subpages</Text>
+                  <Text size="md">{t("Include subpages")}</Text>
                 </div>
                 <Switch
                   onChange={(event) =>
@@ -102,7 +104,7 @@ export default function ExportModal({
 
               <Group justify="space-between" wrap="nowrap">
                 <div>
-                  <Text size="md">Include attachments</Text>
+                  <Text size="md">{t("Include attachments")}</Text>
                 </div>
                 <Switch
                   onChange={(event) =>
@@ -116,9 +118,9 @@ export default function ExportModal({
 
           <Group justify="center" mt="md">
             <Button onClick={onClose} variant="default">
-              Cancel
+              {t("Cancel")}
             </Button>
-            <Button onClick={handleExport}>Export</Button>
+            <Button onClick={handleExport}>{t("Export")}</Button>
           </Group>
         </Modal.Body>
       </Modal.Content>
@@ -131,6 +133,8 @@ interface ExportFormatSelection {
   onChange: (value: string) => void;
 }
 function ExportFormatSelection({ format, onChange }: ExportFormatSelection) {
+  const { t } = useTranslation();
+
   return (
     <Select
       data={[
@@ -143,7 +147,7 @@ function ExportFormatSelection({ format, onChange }: ExportFormatSelection) {
       comboboxProps={{ width: "120" }}
       allowDeselect={false}
       withCheckIcon={false}
-      aria-label="Select export format"
+      aria-label={t("Select export format")}
     />
   );
 }

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

@@ -8,17 +8,19 @@ import {
 } from '@mantine/core';
 import {Link} from 'react-router-dom';
 import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
-import {buildPageUrl} from '@/features/page/page.utils.ts';
-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 { buildPageUrl } from '@/features/page/page.utils.ts';
+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();
   const {data: pages, isLoading, isError} = useRecentChangesQuery(spaceId);
 
   if (isLoading) {
@@ -26,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 ? (
@@ -48,7 +50,7 @@ export default function RecentChanges({spaceId}: Props) {
                     )}
 
                     <Text fw={500} size="md" lineClamp={1}>
-                      {page.title || 'Untitled'}
+                      {page.title || t("Untitled")}
                     </Text>
                   </Group>
                 </UnstyledButton>
@@ -78,7 +80,7 @@ export default function RecentChanges({spaceId}: Props) {
     </Table.ScrollContainer>
   ) : (
     <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,12 @@ 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();
   const [mobileOpened] = useAtom(mobileSidebarAtom);
   const toggleMobile = useToggleSidebar(mobileSidebarAtom);
 
@@ -25,7 +27,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>
   ));
 
@@ -35,10 +37,10 @@ export function AppHeader() {
         <Group wrap="nowrap">
           {!isHomeRoute && (
             <>
-              <Tooltip label="Sidebar toggle">
+              <Tooltip label={t("Sidebar toggle")}>
 
                 <SidebarToggle
-                  aria-label="Sidebar toggle"
+                  aria-label={t("Sidebar toggle")}
                   opened={mobileOpened}
                   onClick={toggleMobile}
                   hiddenFrom="sm"
@@ -46,9 +48,9 @@ export function AppHeader() {
                 />
               </Tooltip>
 
-              <Tooltip label="Sidebar toggle">
+              <Tooltip label={t("Sidebar toggle")}>
                 <SidebarToggle
-                  aria-label="Sidebar toggle"
+                  aria-label={t("Sidebar toggle")}
                   opened={desktopOpened}
                   onClick={toggleDesktop}
                   visibleFrom="sm"

apps/client/src/components/layouts/global/aside.tsx

@@ -3,9 +3,11 @@ import CommentList from "@/features/comment/components/comment-list.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import React, { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function Aside() {
   const [{ tab }] = useAtom(asideStateAtom);
+  const { t } = useTranslation();
 
   let title: string;
   let component: ReactNode;
@@ -25,7 +27,7 @@ export default function Aside() {
       {component && (
         <>
           <Text mb="md" fw={500}>
-            {title}
+            {t(title)}
           </Text>
 
           <ScrollArea

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

@@ -13,8 +13,10 @@ 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();
   const [currentUser] = useAtom(currentUserAtom);
   const { logout } = useAuth();
 
@@ -44,14 +46,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 +61,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 +90,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 +98,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,7 @@ const groupedData: DataGroup[] = [
 ];
 
 export default function SettingsSidebar() {
+  const { t } = useTranslation();
   const location = useLocation();
   const [active, setActive] = useState(location.pathname);
   const navigate = useNavigate();
@@ -62,7 +64,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 +74,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 +91,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>

apps/client/src/components/ui/error-404.tsx

@@ -2,21 +2,24 @@ import { Title, Text, Button, Container, Group } from "@mantine/core";
 import classes from "./error-404.module.css";
 import { Link } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
 
 export function Error404() {
+  const { t } = useTranslation();
+
   return (
     <>
       <Helmet>
-        <title>404 page not found - Docmost</title>
+        <title>{t("404 page not found")} - Docmost</title>
       </Helmet>
       <Container className={classes.root}>
-        <Title className={classes.title}>404 Page Not Found</Title>
+        <Title className={classes.title}>{t("404 page not found")}</Title>
         <Text c="dimmed" size="lg" ta="center" className={classes.description}>
-          Sorry, we can't find the page you are looking for.
+          {t("Sorry, we can't find the page you are looking for.")}
         </Text>
         <Group justify="center">
           <Button component={Link} to={"/home"} variant="subtle" size="md">
-            Take me back to homepage
+            {t("Take me back to homepage")}
           </Button>
         </Group>
       </Container>

apps/client/src/components/ui/role-select-menu.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import { IconCheck, IconChevronDown } from "@tabler/icons-react";
 import { Group, Text, Menu, Button } from "@mantine/core";
 import { IRoleData } from "@/lib/types.ts";
+import { useTranslation } from "react-i18next";
 
 interface RoleButtonProps extends React.ComponentPropsWithoutRef<"button"> {
   name: string;
@@ -36,10 +37,12 @@ export default function RoleSelectMenu({
   onChange,
   disabled,
 }: RoleMenuProps) {
+  const { t } = useTranslation();
+
   return (
     <Menu withArrow>
       <Menu.Target>
-        <RoleButton name={roleName} disabled={disabled} />
+        <RoleButton name={t(roleName)} disabled={disabled} />
       </Menu.Target>
 
       <Menu.Dropdown>
@@ -50,9 +53,9 @@ export default function RoleSelectMenu({
           >
             <Group flex="1" gap="xs">
               <div>
-                <Text size="sm">{item.label}</Text>
+                <Text size="sm">{t(item.label)}</Text>
                 <Text size="xs" opacity={0.65}>
-                  {item.description}
+                  {t(item.description)}
                 </Text>
               </div>
               {item.label === roleName && <IconCheck size={20} />}