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/auth/components/login-form.tsx

@@ -9,13 +9,13 @@ import {
   Button,
   PasswordInput,
   Box,
-
   Anchor,
 } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { Link, useNavigate } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
+import { useTranslation } from "react-i18next";
 
 const formSchema = z.object({
   email: z
@@ -26,6 +26,7 @@ const formSchema = z.object({
 });
 
 export function LoginForm() {
+  const { t } = useTranslation();
   const { signIn, isLoading } = useAuth();
   useRedirectIfAuthenticated();
 
@@ -45,29 +46,29 @@ export function LoginForm() {
     <Container size={420} my={40} className={classes.container}>
       <Box p="xl" mt={200}>
         <Title order={2} ta="center" fw={500} mb="md">
-          Login
+          {t("Login")}
         </Title>
 
         <form onSubmit={form.onSubmit(onSubmit)}>
           <TextInput
             id="email"
             type="email"
-            label="Email"
+            label={t("Email")}
             placeholder="email@example.com"
             variant="filled"
             {...form.getInputProps("email")}
           />
 
           <PasswordInput
-            label="Password"
-            placeholder="Your password"
+            label={t("Password")}
+            placeholder={t("Your password")}
             variant="filled"
             mt="md"
             {...form.getInputProps("password")}
           />
 
           <Button type="submit" fullWidth mt="xl" loading={isLoading}>
-            Sign In
+            {t("Sign In")}
           </Button>
         </form>
 
@@ -77,7 +78,7 @@ export function LoginForm() {
           underline="never"
           size="sm"
         >
-          Forgot your password?
+          {t("Forgot your password?")}
         </Anchor>
       </Box>
     </Container>