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/page/components/header/page-header-menu.tsx

@@ -24,6 +24,7 @@ import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
 import PageExportModal from "@/features/page/components/page-export-modal.tsx";
+import { useTranslation } from "react-i18next";
 import ExportModal from "@/components/common/export-modal";
 
 interface PageHeaderMenuProps {
@@ -53,6 +54,7 @@ interface PageActionMenuProps {
   readOnly?: boolean;
 }
 function PageActionMenu({ readOnly }: PageActionMenuProps) {
+  const { t } = useTranslation();
   const [, setHistoryModalOpen] = useAtom(historyAtoms);
   const clipboard = useClipboard({ timeout: 500 });
   const { pageSlug, spaceSlug } = useParams();
@@ -69,7 +71,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
       getAppUrl() + buildPageUrl(spaceSlug, page.slugId, page.title);
 
     clipboard.copy(pageUrl);
-    notifications.show({ message: "Link copied" });
+    notifications.show({ message: t("Link copied") });
   };
 
   const handlePrint = () => {
@@ -107,13 +109,13 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             leftSection={<IconLink size={16} />}
             onClick={handleCopyLink}
           >
-            Copy link
+            {t("Copy link")}
           </Menu.Item>
           <Menu.Divider />
 
           <Menu.Item leftSection={<IconArrowsHorizontal size={16} />}>
             <Group wrap="nowrap">
-              <PageWidthToggle label="Full width" />
+              <PageWidthToggle label={t("Full width")} />
             </Group>
           </Menu.Item>
 
@@ -121,7 +123,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             leftSection={<IconHistory size={16} />}
             onClick={openHistoryModal}
           >
-            Page history
+            {t("Page history")}
           </Menu.Item>
 
           <Menu.Divider />
@@ -130,14 +132,14 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             leftSection={<IconFileExport size={16} />}
             onClick={openExportModal}
           >
-            Export
+            {t("Export")}
           </Menu.Item>
 
           <Menu.Item
             leftSection={<IconPrinter size={16} />}
             onClick={handlePrint}
           >
-            Print PDF
+            {t("Print PDF")}
           </Menu.Item>
 
           {!readOnly && (
@@ -148,7 +150,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
                 leftSection={<IconTrash size={16} />}
                 onClick={handleDeletePage}
               >
-                Delete
+                {t("Delete")}
               </Menu.Item>
             </>
           )}