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/features/space/components/sidebar/space-select.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react';
-import { useDebouncedValue } from '@mantine/hooks';
-import { Avatar, Group, Select, SelectProps, Text } from '@mantine/core';
-import { useGetSpacesQuery } from '@/features/space/queries/space-query.ts';
-import { ISpace } from '../../types/space.types';
+import { useEffect, useState } from "react";
+import { useDebouncedValue } from "@mantine/hooks";
+import { Avatar, Group, Select, SelectProps, Text } from "@mantine/core";
+import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
+import { ISpace } from "../../types/space.types";
+import { useTranslation } from "react-i18next";
 
 interface SpaceSelectProps {
   onChange: (value: string) => void;
@@ -10,7 +11,7 @@ interface SpaceSelectProps {
   label?: string;
 }
 
-const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
+const renderSelectOption: SelectProps["renderOption"] = ({ option }) => (
   <Group gap="sm">
     <Avatar color="initials" variant="filled" name={option.label} size={20} />
     <div>
@@ -20,7 +21,8 @@ const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
 );
 
 export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
-  const [searchValue, setSearchValue] = useState('');
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
   const { data: spaces, isLoading } = useGetSpacesQuery({
     query: debouncedQuery,
@@ -41,7 +43,7 @@ export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
 
       const filteredSpaceData = spaceData.filter(
         (user) =>
-          !data.find((existingUser) => existingUser.value === user.value)
+          !data.find((existingUser) => existingUser.value === user.value),
       );
       setData((prevData) => [...prevData, ...filteredSpaceData]);
     }
@@ -53,14 +55,14 @@ export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
       renderOption={renderSelectOption}
       maxDropdownHeight={300}
       //label={label || 'Select space'}
-      placeholder="Search for spaces"
+      placeholder={t("Search for spaces")}
       searchable
       searchValue={searchValue}
       onSearchChange={setSearchValue}
       clearable
       variant="filled"
       onChange={onChange}
-      nothingFoundMessage="No space found"
+      nothingFoundMessage={t("No space found")}
       limit={50}
       checkIconPosition="right"
       comboboxProps={{ width: 300, withinPortal: false }}

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -35,10 +35,12 @@ import {
   SpaceCaslSubject,
 } from "@/features/space/permissions/permissions.type.ts";
 import PageImportModal from "@/features/page/components/page-import-modal.tsx";
+import { useTranslation } from "react-i18next";
 import { SwitchSpace } from "./switch-space";
 import ExportModal from "@/components/common/export-modal";
 
 export function SpaceSidebar() {
+  const { t } = useTranslation();
   const [tree] = useAtom(treeApiAtom);
   const location = useLocation();
   const [opened, { open: openSettings, close: closeSettings }] =
@@ -89,7 +91,7 @@ export function SpaceSidebar() {
                   className={classes.menuItemIcon}
                   stroke={2}
                 />
-                <span>Overview</span>
+                <span>{t("Overview")}</span>
               </div>
             </UnstyledButton>
 
@@ -100,7 +102,7 @@ export function SpaceSidebar() {
                   className={classes.menuItemIcon}
                   stroke={2}
                 />
-                <span>Search</span>
+                <span>{t("Search")}</span>
               </div>
             </UnstyledButton>
 
@@ -111,7 +113,7 @@ export function SpaceSidebar() {
                   className={classes.menuItemIcon}
                   stroke={2}
                 />
-                <span>Space settings</span>
+                <span>{t("Space settings")}</span>
               </div>
             </UnstyledButton>
 
@@ -129,7 +131,7 @@ export function SpaceSidebar() {
                     className={classes.menuItemIcon}
                     stroke={2}
                   />
-                  <span>New page</span>
+                  <span>{t("New page")}</span>
                 </div>
               </UnstyledButton>
             )}
@@ -139,7 +141,7 @@ export function SpaceSidebar() {
         <div className={clsx(classes.section, classes.sectionPages)}>
           <Group className={classes.pagesHeader} justify="space-between">
             <Text size="xs" fw={500} c="dimmed">
-              Pages
+              {t("Pages")}
             </Text>
 
             {spaceAbility.can(
@@ -149,12 +151,12 @@ export function SpaceSidebar() {
               <Group gap="xs">
                 <SpaceMenu spaceId={space.id} onSpaceSettings={openSettings} />
 
-                <Tooltip label="Create page" withArrow position="right">
+                <Tooltip label={t("Create page")} withArrow position="right">
                   <ActionIcon
                     variant="default"
                     size={18}
                     onClick={handleCreatePage}
-                    aria-label="Create page"
+                    aria-label={t("Create page")}
                   >
                     <IconPlus />
                   </ActionIcon>
@@ -191,6 +193,7 @@ interface SpaceMenuProps {
   onSpaceSettings: () => void;
 }
 function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
+  const { t } = useTranslation();
   const [importOpened, { open: openImportModal, close: closeImportModal }] =
     useDisclosure(false);
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
@@ -201,11 +204,15 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
       <Menu width={200} shadow="md" withArrow>
         <Menu.Target>
           <Tooltip
-            label="Import pages & space settings"
+            label={t("Import pages & space settings")}
             withArrow
             position="top"
           >
-            <ActionIcon variant="default" size={18} aria-label="Space menu">
+            <ActionIcon
+              variant="default"
+              size={18}
+              aria-label={t("Space menu")}
+            >
               <IconDots />
             </ActionIcon>
           </Tooltip>
@@ -216,7 +223,7 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
             onClick={openImportModal}
             leftSection={<IconArrowDown size={16} />}
           >
-            Import pages
+            {t("Import pages")}
           </Menu.Item>
 
           <Menu.Item
@@ -232,7 +239,7 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
             onClick={onSpaceSettings}
             leftSection={<IconSettings size={16} />}
           >
-            Space settings
+            {t("Space settings")}
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>