feat: add new languages to selection (#626)

* Add new languages to selection

* more translations

apps/client/src/features/space/components/delete-space-modal.tsx

@@ -1,27 +1,29 @@
-import { Button, Divider, Group, Modal, Text, TextInput } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { useDeleteSpaceMutation } from '../queries/space-query';
-import { useField } from '@mantine/form';
-import { ISpace } from '../types/space.types';
-import { useNavigate } from 'react-router-dom';
-import APP_ROUTE from '@/lib/app-route';
+import { Button, Divider, Group, Modal, Text, TextInput } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useDeleteSpaceMutation } from "../queries/space-query";
+import { useField } from "@mantine/form";
+import { ISpace } from "../types/space.types";
+import { useNavigate } from "react-router-dom";
+import APP_ROUTE from "@/lib/app-route";
+import { Trans, useTranslation } from "react-i18next";
 
 interface DeleteSpaceModalProps {
   space: ISpace;
 }
 
 export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
+  const { t } = useTranslation();
   const [opened, { open, close }] = useDisclosure(false);
   const deleteSpaceMutation = useDeleteSpaceMutation();
   const navigate = useNavigate();
 
   const confirmNameField = useField({
-    initialValue: '',
+    initialValue: "",
     validateOnChange: true,
     validate: (value) =>
       value.trim().toLowerCase() === space.name.trim().toLocaleLowerCase()
         ? null
-        : 'Names do not match',
+        : t("Names do not match"),
   });
 
   const handleDelete = async () => {
@@ -38,46 +40,47 @@ export default function DeleteSpaceModal({ space }: DeleteSpaceModalProps) {
       await deleteSpaceMutation.mutateAsync({ id: space.id, slug: space.slug });
       navigate(APP_ROUTE.HOME);
     } catch (error) {
-      console.error('Failed to delete space', error);
+      console.error("Failed to delete space", error);
     }
   };
 
   return (
     <>
       <Button onClick={open} variant="light" color="red">
-        Delete
+        {t("Delete")}
       </Button>
 
       <Modal
         opened={opened}
         onClose={close}
-        title="Are you sure you want to delete this space?"
+        title={t("Are you sure you want to delete this space?")}
       >
         <Divider size="xs" mb="xs" />
         <Text>
-          All pages, comments, attachments and permissions in this space will be
-          deleted irreversibly.
+          {t(
+            "All pages, comments, attachments and permissions in this space will be deleted irreversibly.",
+          )}
         </Text>
         <Text mt="sm">
-          Type the space name{' '}
-          <Text span fw={500}>
-            '{space.name}'
-          </Text>{' '}
-          to confirm your action.
+          <Trans
+            defaults="Type the space name <b>{{spaceName}}</b> to confirm your action."
+            values={{ spaceName: space.name }}
+            components={{ b: <Text span fw={500} /> }}
+          />
         </Text>
         <TextInput
           {...confirmNameField.getInputProps()}
           variant="filled"
-          placeholder="Confirm space name"
+          placeholder={t("Confirm space name")}
           py="sm"
           data-autofocus
         />
         <Group justify="flex-end" mt="md">
           <Button onClick={close} variant="default">
-            Cancel
+            {t("Cancel")}
           </Button>
           <Button onClick={handleDelete} color="red">
-            Confirm
+            {t("Confirm")}
           </Button>
         </Group>
       </Modal>

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

@@ -82,7 +82,7 @@ export function SpaceSidebar() {
                 classes.menu,
                 location.pathname.toLowerCase() === getSpaceUrl(spaceSlug)
                   ? classes.activeButton
-                  : ""
+                  : "",
               )}
             >
               <div className={classes.menuItemInner}>
@@ -119,7 +119,7 @@ export function SpaceSidebar() {
 
             {spaceAbility.can(
               SpaceCaslAction.Manage,
-              SpaceCaslSubject.Page
+              SpaceCaslSubject.Page,
             ) && (
               <UnstyledButton
                 className={classes.menu}
@@ -146,7 +146,7 @@ export function SpaceSidebar() {
 
             {spaceAbility.can(
               SpaceCaslAction.Manage,
-              SpaceCaslSubject.Page
+              SpaceCaslSubject.Page,
             ) && (
               <Group gap="xs">
                 <SpaceMenu spaceId={space.id} onSpaceSettings={openSettings} />
@@ -170,7 +170,7 @@ export function SpaceSidebar() {
               spaceId={space.id}
               readOnly={spaceAbility.cannot(
                 SpaceCaslAction.Manage,
-                SpaceCaslSubject.Page
+                SpaceCaslSubject.Page,
               )}
             />
           </div>
@@ -230,7 +230,7 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
             onClick={openExportModal}
             leftSection={<IconFileExport size={16} />}
           >
-            Export space
+            {t("Export space")}
           </Menu.Item>
 
           <Menu.Divider />

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

@@ -33,7 +33,7 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
 
               <Group justify="space-between" wrap="nowrap" gap="xl">
                 <div>
-                  <Text size="md">Export space</Text>
+                  <Text size="md">{t("Export space")}</Text>
                   <Text size="sm" c="dimmed">
                     {t("Export all pages and attachments in this space.")}
                   </Text>