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/group/components/add-group-member-modal.tsx

@@ -4,8 +4,10 @@ import React, { useState } from "react";
 import { MultiUserSelect } from "@/features/group/components/multi-user-select.tsx";
 import { useParams } from "react-router-dom";
 import { useAddGroupMemberMutation } from "@/features/group/queries/group-query.ts";
+import { useTranslation } from "react-i18next";
 
 export default function AddGroupMemberModal() {
+  const { t } = useTranslation();
   const { groupId } = useParams();
   const [opened, { open, close }] = useDisclosure(false);
   const [userIds, setUserIds] = useState<string[]>([]);
@@ -27,19 +29,19 @@ export default function AddGroupMemberModal() {
 
   return (
     <>
-      <Button onClick={open}>Add group members</Button>
+      <Button onClick={open}>{t("Add group members")}</Button>
 
-      <Modal opened={opened} onClose={close} title="Add group members">
+      <Modal opened={opened} onClose={close} title={t("Add group members")}>
         <Divider size="xs" mb="xs" />
 
         <MultiUserSelect
-          label={"Add group members"}
+          label={t("Add group members")}
           onChange={handleMultiSelectChange}
         />
 
         <Group justify="flex-end" mt="md">
           <Button onClick={handleSubmit} type="submit">
-            Add
+            {t("Add")}
           </Button>
         </Group>
       </Modal>

apps/client/src/features/group/components/create-group-form.tsx

@@ -5,6 +5,7 @@ import { useForm, zodResolver } from "@mantine/form";
 import * as z from "zod";
 import { useNavigate } from "react-router-dom";
 import { MultiUserSelect } from "@/features/group/components/multi-user-select.tsx";
+import { useTranslation } from "react-i18next";
 
 const formSchema = z.object({
   name: z.string().trim().min(2).max(50),
@@ -14,6 +15,7 @@ const formSchema = z.object({
 type FormValues = z.infer<typeof formSchema>;
 
 export function CreateGroupForm() {
+  const { t } = useTranslation();
   const createGroupMutation = useCreateGroupMutation();
   const [userIds, setUserIds] = useState<string[]>([]);
   const navigate = useNavigate();
@@ -52,16 +54,16 @@ export function CreateGroupForm() {
             <TextInput
               withAsterisk
               id="name"
-              label="Group name"
-              placeholder="e.g Developers"
+              label={t("Group name")}
+              placeholder={t("e.g Developers")}
               variant="filled"
               {...form.getInputProps("name")}
             />
 
             <Textarea
               id="description"
-              label="Group description"
-              placeholder="e.g Group for developers"
+              label={t("Group description")}
+              placeholder={t("e.g Group for developers")}
               variant="filled"
               autosize
               minRows={2}
@@ -70,13 +72,13 @@ export function CreateGroupForm() {
             />
 
             <MultiUserSelect
-              label={"Add group members"}
+              label={t("Add group members")}
               onChange={handleMultiSelectChange}
             />
           </Stack>
 
           <Group justify="flex-end" mt="md">
-            <Button type="submit">Create</Button>
+            <Button type="submit">{t("Create")}</Button>
           </Group>
         </form>
       </Box>

apps/client/src/features/group/components/create-group-modal.tsx

@@ -1,15 +1,17 @@
 import { Button, Divider, Modal } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { CreateGroupForm } from "@/features/group/components/create-group-form.tsx";
+import { useTranslation } from "react-i18next";
 
 export default function CreateGroupModal() {
+  const { t } = useTranslation();
   const [opened, { open, close }] = useDisclosure(false);
 
   return (
     <>
-      <Button onClick={open}>Create group</Button>
+      <Button onClick={open}>{t("Create group")}</Button>
 
-      <Modal opened={opened} onClose={close} title="Create group">
+      <Modal opened={opened} onClose={close} title={t("Create group")}>
         <Divider size="xs" mb="xs" />
         <CreateGroupForm />
       </Modal>

apps/client/src/features/group/components/edit-group-form.tsx

@@ -7,6 +7,7 @@ import {
 import { useForm, zodResolver } from "@mantine/form";
 import * as z from "zod";
 import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 const formSchema = z.object({
   name: z.string().min(2).max(50),
@@ -18,6 +19,7 @@ interface EditGroupFormProps {
   onClose?: () => void;
 }
 export function EditGroupForm({ onClose }: EditGroupFormProps) {
+  const { t } = useTranslation();
   const updateGroupMutation = useUpdateGroupMutation();
   const { isSuccess } = updateGroupMutation;
   const { groupId } = useParams();
@@ -60,16 +62,16 @@ export function EditGroupForm({ onClose }: EditGroupFormProps) {
             <TextInput
               withAsterisk
               id="name"
-              label="Group name"
-              placeholder="e.g Developers"
+              label={t("Group name")}
+              placeholder={t("e.g Developers")}
               variant="filled"
               {...form.getInputProps("name")}
             />
 
             <Textarea
               id="description"
-              label="Group description"
-              placeholder="e.g Group for developers"
+              label={t("Group description")}
+              placeholder={t("e.g Group for developers")}
               variant="filled"
               autosize
               minRows={2}
@@ -79,7 +81,7 @@ export function EditGroupForm({ onClose }: EditGroupFormProps) {
           </Stack>
 
           <Group justify="flex-end" mt="md">
-            <Button type="submit">Save</Button>
+            <Button type="submit">{t("Save")}</Button>
           </Group>
         </form>
       </Box>

apps/client/src/features/group/components/edit-group-modal.tsx

@@ -1,5 +1,6 @@
 import { Divider, Modal } from "@mantine/core";
 import { EditGroupForm } from "@/features/group/components/edit-group-form.tsx";
+import { useTranslation } from "react-i18next";
 
 interface EditGroupModalProps {
   opened: boolean;
@@ -10,9 +11,11 @@ export default function EditGroupModal({
   opened,
   onClose,
 }: EditGroupModalProps) {
+  const { t } = useTranslation();
+
   return (
     <>
-      <Modal opened={opened} onClose={onClose} title="Edit group">
+      <Modal opened={opened} onClose={onClose} title={t("Edit group")}>
         <Divider size="xs" mb="xs" />
         <EditGroupForm onClose={onClose} />
       </Modal>

apps/client/src/features/group/components/group-action-menu.tsx

@@ -9,8 +9,10 @@ import { IconDots, IconTrash } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 import EditGroupModal from "@/features/group/components/edit-group-modal.tsx";
 import { modals } from "@mantine/modals";
+import { useTranslation } from "react-i18next";
 
 export default function GroupActionMenu() {
+  const { t } = useTranslation();
   const { groupId } = useParams();
   const { data: group, isLoading } = useGroupQuery(groupId);
   const deleteGroupMutation = useDeleteGroupMutation();
@@ -24,15 +26,16 @@ export default function GroupActionMenu() {
 
   const openDeleteModal = () =>
     modals.openConfirmModal({
-      title: "Delete group",
+      title: t("Delete group"),
       children: (
         <Text size="sm">
-          Are you sure you want to delete this group? Members will lose access
-          to resources this group has access to.
+          {t(
+            "Are you sure you want to delete this group? Members will lose access to resources this group has access to.",
+          )}
         </Text>
       ),
       centered: true,
-      labels: { confirm: "Delete", cancel: "Cancel" },
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
       confirmProps: { color: "red" },
       onConfirm: onDelete,
     });
@@ -57,7 +60,7 @@ export default function GroupActionMenu() {
 
             <Menu.Dropdown>
               <Menu.Item onClick={open} disabled={group.isDefault}>
-                Edit group
+                {t("Edit group")}
               </Menu.Item>
               <Menu.Divider />
               <Menu.Item
@@ -66,7 +69,7 @@ export default function GroupActionMenu() {
                 disabled={group.isDefault}
                 leftSection={<IconTrash size={16} stroke={2} />}
               >
-                Delete group
+                {t("Delete group")}
               </Menu.Item>
             </Menu.Dropdown>
           </Menu>

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

@@ -7,6 +7,7 @@ import { useDisclosure } from "@mantine/hooks";
 import EditGroupModal from "@/features/group/components/edit-group-modal.tsx";
 import GroupActionMenu from "@/features/group/components/group-action-menu.tsx";
 import useUserRole from "@/hooks/use-user-role.tsx";
+import { useTranslation } from "react-i18next";
 
 export default function GroupDetails() {
   const { groupId } = useParams();

apps/client/src/features/group/components/group-list.tsx

@@ -1,11 +1,15 @@
-import {Table, Group, Text, Anchor} from "@mantine/core";
-import {useGetGroupsQuery} from "@/features/group/queries/group-query";
+import { Table, Group, Text, Anchor } from "@mantine/core";
+import { useGetGroupsQuery } from "@/features/group/queries/group-query";
 import React from "react";
-import {Link} from "react-router-dom";
-import {IconGroupCircle} from "@/components/icons/icon-people-circle.tsx";
+import { Link } from "react-router-dom";
+import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
+import { useTranslation } from "react-i18next";
+import { formatMemberCount } from "@/lib";
+import { IGroup } from "@/features/group/types/group.types.ts";
 
 export default function GroupList() {
-  const {data, isLoading} = useGetGroupsQuery();
+  const { t } = useTranslation();
+  const { data, isLoading } = useGetGroupsQuery();
 
   return (
     <>
@@ -14,13 +18,13 @@ export default function GroupList() {
           <Table highlightOnHover verticalSpacing="sm">
             <Table.Thead>
               <Table.Tr>
-                <Table.Th>Group</Table.Th>
-                <Table.Th>Members</Table.Th>
+                <Table.Th>{t("Group")}</Table.Th>
+                <Table.Th>{t("Members")}</Table.Th>
               </Table.Tr>
             </Table.Thead>
 
             <Table.Tbody>
-              {data?.items.map((group, index) => (
+              {data?.items.map((group: IGroup, index: number) => (
                 <Table.Tr key={index}>
                   <Table.Td>
                     <Anchor
@@ -34,7 +38,7 @@ export default function GroupList() {
                       to={`/settings/groups/${group.id}`}
                     >
                       <Group gap="sm" wrap="nowrap">
-                        <IconGroupCircle/>
+                        <IconGroupCircle />
                         <div>
                           <Text fz="sm" fw={500} lineClamp={1}>
                             {group.name}
@@ -46,7 +50,6 @@ export default function GroupList() {
                       </Group>
                     </Anchor>
                   </Table.Td>
-
                   <Table.Td>
                     <Anchor
                       size="sm"
@@ -54,12 +57,12 @@ export default function GroupList() {
                       style={{
                         cursor: "pointer",
                         color: "var(--mantine-color-text)",
-                        whiteSpace: "nowrap"
+                        whiteSpace: "nowrap",
                       }}
                       component={Link}
                       to={`/settings/groups/${group.id}`}
                     >
-                      {group.memberCount} members
+                      {formatMemberCount(group.memberCount, t)}
                     </Anchor>
                   </Table.Td>
                 </Table.Tr>

apps/client/src/features/group/components/group-members.tsx

@@ -1,20 +1,23 @@
-import {Group, Table, Text, Badge, Menu, ActionIcon} from "@mantine/core";
+import { Group, Table, Text, Badge, Menu, ActionIcon } from "@mantine/core";
 import {
   useGroupMembersQuery,
   useRemoveGroupMemberMutation,
 } from "@/features/group/queries/group-query";
-import {useParams} from "react-router-dom";
+import { useParams } from "react-router-dom";
 import React from "react";
-import {IconDots} from "@tabler/icons-react";
-import {modals} from "@mantine/modals";
-import {CustomAvatar} from "@/components/ui/custom-avatar.tsx";
+import { IconDots } from "@tabler/icons-react";
+import { modals } from "@mantine/modals";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import useUserRole from "@/hooks/use-user-role.tsx";
+import { useTranslation } from "react-i18next";
+import { IUser } from "@/features/user/types/user.types.ts";
 
 export default function GroupMembersList() {
-  const {groupId} = useParams();
-  const {data, isLoading} = useGroupMembersQuery(groupId);
+  const { t } = useTranslation();
+  const { groupId } = useParams();
+  const { data, isLoading } = useGroupMembersQuery(groupId);
   const removeGroupMember = useRemoveGroupMemberMutation();
-  const {isAdmin} = useUserRole();
+  const { isAdmin } = useUserRole();
 
   const onRemove = async (userId: string) => {
     const memberToRemove = {
@@ -26,16 +29,17 @@ export default function GroupMembersList() {
 
   const openRemoveModal = (userId: string) =>
     modals.openConfirmModal({
-      title: "Remove group member",
+      title: t("Remove group member"),
       children: (
         <Text size="sm">
-          Are you sure you want to remove this user from the group? The user
-          will lose access to resources this group has access to.
+          {t(
+            "Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.",
+          )}
         </Text>
       ),
       centered: true,
-      labels: {confirm: "Delete", cancel: "Cancel"},
-      confirmProps: {color: "red"},
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
       onConfirm: () => onRemove(userId),
     });
 
@@ -46,18 +50,21 @@ export default function GroupMembersList() {
           <Table verticalSpacing="sm">
             <Table.Thead>
               <Table.Tr>
-                <Table.Th>User</Table.Th>
-                <Table.Th>Status</Table.Th>
+                <Table.Th>{t("User")}</Table.Th>
+                <Table.Th>{t("Status")}</Table.Th>
                 <Table.Th></Table.Th>
               </Table.Tr>
             </Table.Thead>
 
             <Table.Tbody>
-              {data?.items.map((user, index) => (
+              {data?.items.map((user: IUser, index: number) => (
                 <Table.Tr key={index}>
                   <Table.Td>
                     <Group gap="sm">
-                      <CustomAvatar avatarUrl={user.avatarUrl} name={user.name}/>
+                      <CustomAvatar
+                        avatarUrl={user.avatarUrl}
+                        name={user.name}
+                      />
                       <div>
                         <Text fz="sm" fw={500}>
                           {user.name}
@@ -68,11 +75,9 @@ export default function GroupMembersList() {
                       </div>
                     </Group>
                   </Table.Td>
-
                   <Table.Td>
-                    <Badge variant="light">Active</Badge>
+                    <Badge variant="light">{t("Active")}</Badge>
                   </Table.Td>
-
                   <Table.Td>
                     {isAdmin && (
                       <Menu
@@ -85,13 +90,12 @@ export default function GroupMembersList() {
                       >
                         <Menu.Target>
                           <ActionIcon variant="subtle" c="gray">
-                            <IconDots size={20} stroke={2}/>
+                            <IconDots size={20} stroke={2} />
                           </ActionIcon>
                         </Menu.Target>
-
                         <Menu.Dropdown>
                           <Menu.Item onClick={() => openRemoveModal(user.id)}>
-                            Remove group member
+                            {t("Remove group member")}
                           </Menu.Item>
                         </Menu.Dropdown>
                       </Menu>

apps/client/src/features/group/components/multi-group-select.tsx

@@ -4,6 +4,7 @@ import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
 import { useGetGroupsQuery } from "@/features/group/queries/group-query.ts";
 import { IGroup } from "@/features/group/types/group.types.ts";
 import { IconUsersGroup } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
 
 interface MultiGroupSelectProps {
   onChange: (value: string[]) => void;
@@ -29,6 +30,7 @@ export function MultiGroupSelect({
   description,
   mt,
 }: MultiGroupSelectProps) {
+  const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
   const { data: groups, isLoading } = useGetGroupsQuery({
@@ -66,8 +68,8 @@ export function MultiGroupSelect({
       hidePickedOptions
       maxDropdownHeight={300}
       description={description}
-      label={label || "Add groups"}
-      placeholder="Search for groups"
+      label={label || t("Add groups")}
+      placeholder={t("Search for groups")}
       mt={mt}
       searchable
       searchValue={searchValue}
@@ -75,7 +77,7 @@ export function MultiGroupSelect({
       clearable
       variant="filled"
       onChange={onChange}
-      nothingFoundMessage="No group found"
+      nothingFoundMessage={t("No group found")}
       maxValues={50}
     />
   );

apps/client/src/features/group/components/multi-user-select.tsx

@@ -4,6 +4,7 @@ import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace
 import { IUser } from "@/features/user/types/user.types.ts";
 import { Group, MultiSelect, MultiSelectProps, Text } from "@mantine/core";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import { useTranslation } from "react-i18next";
 
 interface MultiUserSelectProps {
   onChange: (value: string[]) => void;
@@ -29,6 +30,7 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
 );
 
 export function MultiUserSelect({ onChange, label }: MultiUserSelectProps) {
+  const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
   const { data: users, isLoading } = useWorkspaceMembersQuery({
@@ -65,15 +67,15 @@ export function MultiUserSelect({ onChange, label }: MultiUserSelectProps) {
       renderOption={renderMultiSelectOption}
       hidePickedOptions
       maxDropdownHeight={300}
-      label={label || "Add members"}
-      placeholder="Search for users"
+      label={label || t("Add members")}
+      placeholder={t("Search for users")}
       searchable
       searchValue={searchValue}
       onSearchChange={setSearchValue}
       clearable
       variant="filled"
       onChange={onChange}
-      nothingFoundMessage="No user found"
+      nothingFoundMessage={t("No user found")}
       maxValues={50}
     />
   );