feat: wip support i18n

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,14 @@ export default function RoleSelectMenu({
   onChange,
   disabled,
 }: RoleMenuProps) {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "role",
+  });
+
   return (
     <Menu withArrow>
       <Menu.Target>
-        <RoleButton name={roleName} disabled={disabled} />
+        <RoleButton name={t(roleName)} disabled={disabled} />
       </Menu.Target>
 
       <Menu.Dropdown>
@@ -50,9 +55,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} />}

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,9 @@ export function MultiGroupSelect({
   description,
   mt,
 }: MultiGroupSelectProps) {
+  const { t } = useTranslation("settings", {
+    keyPrefix: "workspace.group",
+  });
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
   const { data: groups, isLoading } = useGetGroupsQuery({
@@ -64,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}
@@ -73,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/space/types/space-role-data.ts

@@ -9,7 +9,7 @@ export const spaceRoleData: IRoleData[] = [
   {
     label: "Can edit",
     value: SpaceRole.WRITER,
-    description: "Can create and edit pages in space.",
+    description: "Can create and edit pages in space",
   },
   {
     label: "Can view",

apps/client/src/features/workspace/components/members/components/workspace-invite-form.tsx

@@ -11,9 +11,7 @@ interface Props {
   onClose: () => void;
 }
 export function WorkspaceInviteForm({ onClose }: Props) {
-  const { t } = useTranslation("settings", {
-    keyPrefix: "workspace.member",
-  });
+  const { t } = useTranslation(["settings", "translation"]);
   const [emails, setEmails] = useState<string[]>([]);
   const [role, setRole] = useState<string | null>(UserRole.MEMBER);
   const [groupIds, setGroupIds] = useState<string[]>([]);
@@ -49,10 +47,10 @@ export function WorkspaceInviteForm({ onClose }: Props) {
         <TagsInput
           mt="sm"
           description={t(
-            "Enter valid email addresses separated by comma or space max_50",
+            "workspace.member.Enter valid email addresses separated by comma or space max_50",
           )}
-          label={t("Invite by email")}
-          placeholder={t("enter valid emails addresses")}
+          label={t("workspace.member.Invite by email")}
+          placeholder={t("workspace.member.enter valid emails addresses")}
           variant="filled"
           splitChars={[",", " "]}
           maxDropdownHeight={200}
@@ -62,11 +60,19 @@ export function WorkspaceInviteForm({ onClose }: Props) {
 
         <Select
           mt="sm"
-          description={t("Select role to assign to all invited members")}
-          label={t("Select role")}
-          placeholder={t("Choose a role")}
+          description={t(
+            "workspace.member.Select role to assign to all invited members",
+          )}
+          label={t("workspace.member.Select role")}
+          placeholder={t("workspace.member.Choose a role")}
           variant="filled"
-          data={userRoleData.filter((role) => role.value !== UserRole.OWNER)}
+          data={userRoleData
+            .filter((role) => role.value !== UserRole.OWNER)
+            .map((role) => ({
+              ...role,
+              label: t(`role.${role.label}`, { ns: "translation" }),
+              description: t(`role.${role.description}`, { ns: "translation" }),
+            }))}
           defaultValue={UserRole.MEMBER}
           allowDeselect={false}
           checkIconPosition="right"
@@ -76,9 +82,9 @@ export function WorkspaceInviteForm({ onClose }: Props) {
         <MultiGroupSelect
           mt="sm"
           description={t(
-            "Invited members will be granted access to spaces the groups can access",
+            "workspace.member.Invited members will be granted access to spaces the groups can access",
           )}
-          label={t("Add to groups")}
+          label={t("workspace.member.Add to groups")}
           onChange={handleGroupSelect}
         />
 
@@ -87,7 +93,7 @@ export function WorkspaceInviteForm({ onClose }: Props) {
             onClick={handleSubmit}
             loading={createInvitationMutation.isPending}
           >
-            {t("Send invitation")}
+            {t("workspace.member.Send invitation")}
           </Button>
         </Group>
       </Box>

apps/client/src/features/workspace/types/user-role-data.ts

@@ -14,7 +14,7 @@ export const userRoleData: IRoleData[] = [
   {
     label: "Member",
     value: UserRole.MEMBER,
-    description: "Can become members of groups and spaces in workspace.",
+    description: "Can become members of groups and spaces in workspace",
   },
 ];