feat(i18n): localize space settings nav, titles and the full permission tree into Russian

public/locales/en.json

@@ -910,7 +910,15 @@
     "power_moderator": "Moderator",
     "power_member": "Member",
     "power_muted": "Muted",
-    "power_team": "Team"
+    "power_team": "Team",
+    "perm_manage": "Manage",
+    "perm_manage_space_rooms": "Manage space rooms",
+    "perm_space_overview": "Space Overview",
+    "perm_space_avatar": "Space Avatar",
+    "perm_space_name": "Space Name",
+    "perm_space_topic": "Space Topic",
+    "perm_change_space_access": "Change Space Access",
+    "perm_upgrade_space": "Upgrade Space"
   },
   "Push": {
     "new_message": "New message",

public/locales/ru.json

@@ -928,7 +928,15 @@
     "power_moderator": "Модератор",
     "power_member": "Участник",
     "power_muted": "Без голоса",
-    "power_team": "Команда"
+    "power_team": "Команда",
+    "perm_manage": "Управление",
+    "perm_manage_space_rooms": "Управление комнатами пространства",
+    "perm_space_overview": "Обзор пространства",
+    "perm_space_avatar": "Аватар пространства",
+    "perm_space_name": "Название пространства",
+    "perm_space_topic": "Тема пространства",
+    "perm_change_space_access": "Изменение доступа к пространству",
+    "perm_upgrade_space": "Обновить пространство"
   },
   "Push": {
     "new_message": "Новое сообщение",

src/app/features/space-settings/SpaceSettings.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds';
 import { JoinRule } from 'matrix-js-sdk';
+import { useTranslation } from 'react-i18next';
 import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -23,37 +24,39 @@ type SpaceSettingsMenuItem = {
   icon: IconSrc;
 };
 
-const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
+const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] => {
-  useMemo(
+  const { t } = useTranslation();
+  return useMemo(
     () => [
       {
         page: SpaceSettingsPage.GeneralPage,
-        name: 'General',
+        name: t('RoomSettings.general'),
         icon: Icons.Setting,
       },
       {
         page: SpaceSettingsPage.MembersPage,
-        name: 'Members',
+        name: t('RoomSettings.members'),
         icon: Icons.User,
       },
       {
         page: SpaceSettingsPage.PermissionsPage,
-        name: 'Permissions',
+        name: t('RoomSettings.permissions'),
         icon: Icons.Lock,
       },
       {
         page: SpaceSettingsPage.EmojisStickersPage,
-        name: 'Emojis & Stickers',
+        name: t('RoomSettings.emojis_stickers'),
         icon: Icons.Smile,
       },
       {
         page: SpaceSettingsPage.DeveloperToolsPage,
-        name: 'Developer Tools',
+        name: t('RoomSettings.developer_tools'),
         icon: Icons.Terminal,
       },
     ],
-    []
+    [t]
   );
+};
 
 type SpaceSettingsProps = {
   initialPage?: SpaceSettingsPage;

src/app/features/space-settings/general/General.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { useTranslation } from 'react-i18next';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
@@ -22,6 +23,7 @@ export function General({ requestClose }: GeneralProps) {
   const powerLevels = usePowerLevels(room);
   const creators = useRoomCreators(room);
   const permissions = useRoomPermissions(creators, powerLevels);
+  const { t } = useTranslation();
 
   return (
     <Page>
@@ -29,7 +31,7 @@ export function General({ requestClose }: GeneralProps) {
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
-              General
+              {t('RoomSettings.general')}
             </Text>
           </Box>
           <Box shrink="No">
@@ -45,17 +47,17 @@ export function General({ requestClose }: GeneralProps) {
             <Box direction="Column" gap="700">
               <RoomProfile permissions={permissions} />
               <Box direction="Column" gap="100">
-                <Text size="L400">Options</Text>
+                <Text size="L400">{t('RoomSettings.options')}</Text>
                 <RoomJoinRules permissions={permissions} />
                 <RoomPublish permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
-                <Text size="L400">Addresses</Text>
+                <Text size="L400">{t('RoomSettings.addresses')}</Text>
                 <RoomPublishedAddresses permissions={permissions} />
                 <RoomLocalAddresses permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
-                <Text size="L400">Advanced Options</Text>
+                <Text size="L400">{t('RoomSettings.advanced_options')}</Text>
                 <RoomUpgrade permissions={permissions} requestClose={requestClose} />
               </Box>
             </Box>

src/app/features/space-settings/permissions/Permissions.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { useTranslation } from 'react-i18next';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
@@ -14,6 +15,7 @@ type PermissionsProps = {
   requestClose: () => void;
 };
 export function Permissions({ requestClose }: PermissionsProps) {
+  const { t } = useTranslation();
   const mx = useMatrixClient();
   const room = useRoom();
   const powerLevels = usePowerLevels(room);
@@ -41,7 +43,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
-              Permissions
+              {t('RoomSettings.permissions')}
             </Text>
           </Box>
           <Box shrink="No">

src/app/features/space-settings/permissions/usePermissionItems.ts

@@ -1,143 +1,145 @@
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { StateEvent } from '../../../../types/matrix/room';
 import { PermissionGroup } from '../../common-settings/permissions';
 
 export const usePermissionGroups = (): PermissionGroup[] => {
+  const { t } = useTranslation();
   const groups: PermissionGroup[] = useMemo(() => {
     const messagesGroup: PermissionGroup = {
-      name: 'Manage',
+      name: t('RoomSettings.perm_manage'),
       items: [
         {
           location: {
             state: true,
             key: StateEvent.SpaceChild,
           },
-          name: 'Manage space rooms',
+          name: t('RoomSettings.perm_manage_space_rooms'),
         },
         {
           location: {},
-          name: 'Message Events',
+          name: t('RoomSettings.perm_other_message_events'),
         },
       ],
     };
 
     const moderationGroup: PermissionGroup = {
-      name: 'Moderation',
+      name: t('RoomSettings.perm_moderation'),
       items: [
         {
           location: {
             action: true,
             key: 'invite',
           },
-          name: 'Invite',
+          name: t('RoomSettings.perm_invite'),
         },
         {
           location: {
             action: true,
             key: 'kick',
           },
-          name: 'Kick',
+          name: t('RoomSettings.perm_kick'),
         },
         {
           location: {
             action: true,
             key: 'ban',
           },
-          name: 'Ban',
+          name: t('RoomSettings.perm_ban'),
         },
       ],
     };
 
     const roomOverviewGroup: PermissionGroup = {
-      name: 'Space Overview',
+      name: t('RoomSettings.perm_space_overview'),
       items: [
         {
           location: {
             state: true,
             key: StateEvent.RoomAvatar,
           },
-          name: 'Space Avatar',
+          name: t('RoomSettings.perm_space_avatar'),
         },
         {
           location: {
             state: true,
             key: StateEvent.RoomName,
           },
-          name: 'Space Name',
+          name: t('RoomSettings.perm_space_name'),
         },
         {
           location: {
             state: true,
             key: StateEvent.RoomTopic,
           },
-          name: 'Space Topic',
+          name: t('RoomSettings.perm_space_topic'),
         },
       ],
     };
 
     const roomSettingsGroup: PermissionGroup = {
-      name: 'Settings',
+      name: t('RoomSettings.perm_settings'),
       items: [
         {
           location: {
             state: true,
             key: StateEvent.RoomJoinRules,
           },
-          name: 'Change Space Access',
+          name: t('RoomSettings.perm_change_space_access'),
         },
         {
           location: {
             state: true,
             key: StateEvent.RoomCanonicalAlias,
           },
-          name: 'Publish Address',
+          name: t('RoomSettings.perm_publish_address'),
         },
         {
           location: {
             state: true,
             key: StateEvent.RoomPowerLevels,
           },
-          name: 'Change All Permission',
+          name: t('RoomSettings.perm_change_all_permission'),
         },
         {
           location: {
             state: true,
             key: StateEvent.PowerLevelTags,
           },
-          name: 'Edit Power Levels',
+          name: t('RoomSettings.perm_edit_power_levels'),
         },
         {
           location: {
             state: true,
             key: StateEvent.RoomTombstone,
           },
-          name: 'Upgrade Space',
+          name: t('RoomSettings.perm_upgrade_space'),
         },
         {
           location: {
             state: true,
           },
-          name: 'Other Settings',
+          name: t('RoomSettings.perm_other_settings'),
         },
       ],
     };
 
     const otherSettingsGroup: PermissionGroup = {
-      name: 'Other',
+      name: t('RoomSettings.perm_other'),
       items: [
         {
           location: {
             state: true,
             key: StateEvent.PoniesRoomEmotes,
           },
-          name: 'Manage Emojis & Stickers',
+          name: t('RoomSettings.perm_manage_emojis_stickers'),
         },
         {
           location: {
             state: true,
             key: StateEvent.RoomServerAcl,
           },
-          name: 'Change Server ACLs',
+          name: t('RoomSettings.perm_change_server_acls'),
         },
       ],
     };
@@ -149,7 +151,7 @@ export const usePermissionGroups = (): PermissionGroup[] => {
       roomSettingsGroup,
       otherSettingsGroup,
     ];
-  }, []);
+  }, [t]);
 
   return groups;
 };