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/editor/components/link/link-editor-panel.tsx

@@ -3,11 +3,13 @@ import { Button, Group, TextInput } from "@mantine/core";
 import { IconLink } from "@tabler/icons-react";
 import { useLinkEditorState } from "@/features/editor/components/link/use-link-editor-state.tsx";
 import { LinkEditorPanelProps } from "@/features/editor/components/link/types.ts";
+import { useTranslation } from "react-i18next";
 
 export const LinkEditorPanel = ({
   onSetLink,
   initialUrl,
 }: LinkEditorPanelProps) => {
+  const { t } = useTranslation();
   const state = useLinkEditorState({
     onSetLink,
     initialUrl,
@@ -20,12 +22,12 @@ export const LinkEditorPanel = ({
           <TextInput
             leftSection={<IconLink size={16} />}
             variant="filled"
-            placeholder="Paste link"
+            placeholder={t("Paste link")}
             value={state.url}
             onChange={state.onChange}
           />
           <Button p={"xs"} type="submit" disabled={!state.isValidUrl}>
-            Save
+            {t("Save")}
           </Button>
         </Group>
       </form>

apps/client/src/features/editor/components/link/link-preview.tsx

@@ -7,6 +7,7 @@ import {
   Flex,
 } from "@mantine/core";
 import { IconLinkOff, IconPencil } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
 
 export type LinkPreviewPanelProps = {
   url: string;
@@ -19,6 +20,8 @@ export const LinkPreviewPanel = ({
   onEdit,
   url,
 }: LinkPreviewPanelProps) => {
+  const { t } = useTranslation();
+
   return (
     <>
       <Card withBorder radius="md" padding="xs" bg="var(--mantine-color-body)">
@@ -42,13 +45,13 @@ export const LinkPreviewPanel = ({
           <Flex align="center">
             <Divider mx={4} orientation="vertical" />
 
-            <Tooltip label="Edit link">
+            <Tooltip label={t("Edit link")}>
               <ActionIcon onClick={onEdit} variant="subtle" color="gray">
                 <IconPencil size={16} />
               </ActionIcon>
             </Tooltip>
 
-            <Tooltip label="Remove link">
+            <Tooltip label={t("Remove link")}>
               <ActionIcon onClick={onClear} variant="subtle" color="red">
                 <IconLinkOff size={16} />
               </ActionIcon>