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/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} />}