feat: wip support i18n

apps/client/public/locales/en/settings.json

@@ -98,7 +98,10 @@
       "Active": "Active",
       "Add members": "Add members",
       "Search for users": "Search for users",
-      "No user found": "No user found"
+      "No user found": "No user found",
+      "Add groups": "Add groups",
+      "Search for groups": "Search for groups",
+      "No group found": "No group found"
     },
     "space": {
       "Spaces": "Spaces",

apps/client/public/locales/en/translation.json

@@ -5,6 +5,20 @@
     "No pages yet": "No pages yet",
     "Failed to load page. An error occurred.": "Failed to load page. An error occurred."
   },
+  "role": {
+    "Full access": "Full access",
+    "Has full access to space settings and pages.": "Has full access to space settings and pages.",
+    "Can edit": "Can edit",
+    "Can create and edit pages in space.": "Can create and edit pages in space.",
+    "Can view": "Can view",
+    "Can view pages in space but not edit.": "Can view pages in space but not edit.",
+    "Owner": "Owner",
+    "Can manage workspace": "Can manage workspace",
+    "Admin": "Admin",
+    "Can manage workspace but cannot delete it": "Can manage workspace but cannot delete it",
+    "Member": "Member",
+    "Can become members of groups and spaces in workspace": "Can become members of groups and spaces in workspace"
+  },
   "layout": {
     "Home": "Home",
     "Workspace": "Workspace",

apps/client/public/locales/zh/settings.json

@@ -98,7 +98,10 @@
       "Active": "活跃",
       "Add members": "添加成员",
       "Search for users": "搜索用户",
-      "No user found": "未找到用户"
+      "No user found": "未找到用户",
+      "Add groups": "添加群组",
+      "Search for groups": "搜索群组",
+      "No group found": "未找到群组"
     },
     "space": {
       "Spaces": "空间",

apps/client/public/locales/zh/translation.json

@@ -5,6 +5,20 @@
     "No pages yet": "暂无页面",
     "Failed to load page. An error occurred.": "加载页面失败。发生错误。"
   },
+  "role": {
+    "Full access": "完全访问",
+    "Has full access to space settings and pages": "具有对空间设置和页面的完全访问权限",
+    "Can edit": "可以编辑",
+    "Can create and edit pages in space": "可以在空间中创建和编辑页面",
+    "Can view": "可以查看",
+    "Can view pages in space but not edit": "可以查看空间中的页面但不能编辑",
+    "Owner": "所有者",
+    "Can manage workspace": "可以管理工作区",
+    "Admin": "管理员",
+    "Can manage workspace but cannot delete it": "可以管理工作区但不能删除它",
+    "Member": "成员",
+    "Can become members of groups and spaces in workspace": "可以成为工作区中群组和空间的成员"
+  },
   "layout": {
     "Home": "首页",
     "Workspace": "工作区",

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"}
+      label={label || t("Add groups")}
-      placeholder="Search for 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", {
+  const { t } = useTranslation(["settings", "translation"]);
-    keyPrefix: "workspace.member",
-  });
   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")}
+          label={t("workspace.member.Invite by email")}
-          placeholder={t("enter valid emails addresses")}
+          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")}
+          description={t(
-          label={t("Select role")}
+            "workspace.member.Select role to assign to all invited members",
-          placeholder={t("Choose a role")}
+          )}
+          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",
   },
 ];