Translate components

cinnyapp · Dec 18, 2023 · b4a0e00 · b4a0e00
1 parent 4f99ce2
commit b4a0e00
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 40 deletions.
diff --git a/public/locales/de.json b/public/locales/de.json
@@ -3,12 +3,46 @@
     "options": "Optionen"
   },
   "Organisms": {
+    "Welcome": {
+      "heading": "Willkommen in Cinny!",
+      "subheading": "Noch ein weiterer Matrix Client"
+    },
+    "SpaceSettings": {
+      "categorize_subspaces": "Unter-Spaces kategorisieren",
+      "uncategorize_subspaces": "Unter-Spaces nicht kategorisieren",
+      "pin_sidebar": "An Seitenleiste anheften",
+      "unpin_sidebar": "Von Seitenleiste lösen"
+    },
     "Settings": {
       "theme": {
         "follow_system": {
           "title": "System-Theme verwenden",
           "description": "Verwende den hellen oder dunklen Modus basierend auf den Systemeinstellungen."
-        }
+        },
+        "title": "Theme",
+        "theme_light": "Hell",
+        "theme_silver": "Silber",
+        "theme_dark": "Dunkel",
+        "theme_butter": "Butter"
+      },
+      "markdown": {
+        "title": "Markdown-Formatierung",
+        "description": "Nachrichten vor dem Senden mit Markdown formatieren"
+      },
+      "hide_membership_events": {
+        "title": "Mitgliedschaftsereignisse ausblenden",
+        "description": "Nachrichten zu Änderungen von Mitgliedschaften in der Zeitleiste ausblenden (Beitreten, Verlassen, Einladen, Entfernen und Bannen)"
+      },
+      "hide_nickname_avatar_events": {
+        "title": "Spitzname/Avatar Ereignisse ausblenden",
+        "description": "Nachrichten zu Änderungen von Spitznamen und Avataren in der Zeitleiste ausblenden."
+      },
+      "tabs": {
+        "appearance": "Auftretten",
+        "notifications": "Benachrichtungen",
+        "emoji": "Emoji",
+        "security": "Sicherheit",
+        "about": "Über"
       }
     },
     "DrawerBreadcrumb": {
@@ -41,6 +75,27 @@
   "Molecules": {
     "ConfirmDialog": {
       "cancel": "Abbrechen"
+    },
+    "RoomOptions": {
+      "title": "Optionen für {{room_name}}",
+      "leave": {
+        "title": "Raum verlassen",
+        "subtitle": "Bist du sicher, dass du den Raum {{room_name}} verlassen möchtest?",
+        "button_text": "Verlassen"
+      },
+      "mark_as_read": "Als gelesen markieren",
+      "notifications_heading": "Benachrichtigungen",
+      "invite": "Einladen"
+    },
+    "SpaceOptions": {
+      "leave_space": "Space verlassen",
+      "leave_space_confirmation": "Bist du sicher, dass du den Space {{space}} verlassen möchtest?",
+      "leave_space_confirm": "Verlassen",
+      "mark_as_read": "Als gelesen markieren",
+      "invite": "Einladen",
+      "manage_rooms": "Räume verwalten",
+      "settings": "Einstellungen",
+      "leave": "Verlassen"
     }
   }
 }
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -3,12 +3,46 @@
     "options": "Options"
   },
   "Organisms": {
+    "Welcome": {
+      "heading": "Welcome to Cinny!",
+      "subheading": "Yet another Matrix client"
+    },
+    "SpaceSettings": {
+      "categorize_subspaces": "Categorize subspaces",
+      "uncategorize_subspaces": "Uncategorize subspaces",
+      "pin_sidebar": "Pin to sidebar",
+      "unpin_sidebar": "Unpin from sidebar"
+    },
     "Settings": {
       "theme": {
         "follow_system": {
           "title": "Follow system theme",
           "description": "Use light or dark mode based on the system settings."
-        }
+        },
+        "title": "Theme",
+        "theme_light": "Light",
+        "theme_silver": "Silver",
+        "theme_dark": "Dark",
+        "theme_butter": "Butter"
+      },
+      "markdown": {
+        "title": "Markdown formatting",
+        "description": "Format messages with markdown before sending"
+      },
+      "hide_membership_events": {
+        "title": "Hide membership events",
+        "description": "Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)"
+      },
+      "hide_nickname_avatar_events": {
+        "title": "Hide nick/avatar events",
+        "description": "Hide nickname and avatar change messages from the room timeline."
+      },
+      "tabs": {
+        "appearance": "Appearance",
+        "notifications": "Notifications",
+        "emoji": "Emoji",
+        "security": "Security",
+        "about": "About"
       }
     },
     "DrawerBreadcrumb": {
@@ -41,6 +75,27 @@
   "Molecules": {
     "ConfirmDialog": {
       "cancel": "Cancel"
+    },
+    "RoomOptions": {
+      "title": "Options for {{room_name}}",
+      "leave": {
+        "title": "Leave room",
+        "subtitle": "Are you sure you want to leave the {{room_name}} room?",
+        "button_text": "Leave"
+      },
+      "mark_as_read": "Mark as read",
+      "notifications_heading": "Notifications",
+      "invite": "Invite"
+    },
+    "SpaceOptions": {
+      "leave_space": "Leave Space",
+      "leave_space_confirmation": "Are you sure that you want to leave the {{space}} space?",
+      "leave_space_confirm": "Leave",
+      "mark_as_read": "Mark as read",
+      "invite": "Invite",
+      "manage_rooms": "Manage rooms",
+      "settings": "Settings",
+      "leave": "Leave"
     }
   }
 }
diff --git a/src/app/atoms/tabs/Tabs.jsx b/src/app/atoms/tabs/Tabs.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './Tabs.scss';
+import { useTranslation } from 'react-i18next';
 
 import Button from '../button/Button';
 import ScrollView from '../scroll/ScrollView';
@@ -41,6 +42,8 @@ TabItem.propTypes = {
 function Tabs({ items, defaultSelected, onSelect }) {
   const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
 
+  const { t } = useTranslation();
+
   const handleTabSelection = (item, index) => {
     if (selectedItem === item) return;
     setSelectedItem(item);
@@ -59,7 +62,7 @@ function Tabs({ items, defaultSelected, onSelect }) {
               disabled={item.disabled}
               onClick={() => handleTabSelection(item, index)}
             >
-              {item.text}
+              {t(item.text)}
             </TabItem>
           ))}
         </div>

diff --git a/src/app/molecules/room-options/RoomOptions.jsx b/src/app/molecules/room-options/RoomOptions.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useTranslation } from 'react-i18next';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
@@ -22,6 +23,8 @@ function RoomOptions({ roomId, afterOptionSelect }) {
   const room = mx.getRoom(roomId);
   const canInvite = room?.canInvite(mx.getUserId());
 
+  const { t } = useTranslation();
+
   const handleMarkAsRead = () => {
     markAsRead(roomId);
     afterOptionSelect();
@@ -34,9 +37,9 @@ function RoomOptions({ roomId, afterOptionSelect }) {
   const handleLeaveClick = async () => {
     afterOptionSelect();
     const isConfirmed = await confirmDialog(
-      'Leave room',
-      `Are you sure that you want to leave "${room.name}" room?`,
-      'Leave',
+      t('Molecules.RoomOptions.leave.title'),
+      t('Molecules.RoomOptions.leave.subtitle', { room_name: room.name }),
+      t('Molecules.RoomOptions.leave.button_text'),
       'danger',
     );
     if (!isConfirmed) return;
@@ -45,17 +48,17 @@ function RoomOptions({ roomId, afterOptionSelect }) {
 
   return (
     <div style={{ maxWidth: '256px' }}>
-      <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
-      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
+      <MenuHeader>{twemojify(t('Molecules.RoomOptions.title', { room_name: initMatrix.matrixClient.getRoom(roomId)?.name }))}</MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>{t('Molecules.RoomOptions.mark_as_read')}</MenuItem>
       <MenuItem
         iconSrc={AddUserIC}
         onClick={handleInviteClick}
         disabled={!canInvite}
       >
-        Invite
+        {t('Molecules.RoomOptions.invite')}
       </MenuItem>
-      <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
-      <MenuHeader>Notification</MenuHeader>
+      <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>{t('Molecules.RoomOptions.leave.button_text')}</MenuItem>
+      <MenuHeader>{t('Molecules.RoomOptions.notifications_heading')}</MenuHeader>
       <RoomNotification roomId={roomId} />
     </div>
   );

diff --git a/src/app/molecules/space-options/SpaceOptions.jsx b/src/app/molecules/space-options/SpaceOptions.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useTranslation } from 'react-i18next';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
@@ -36,6 +37,8 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
   const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
 
+  const { t } = useTranslation();
+
   const handleMarkAsRead = () => {
     const spaceChildren = roomList.getCategorizedSpaces([roomId]);
     spaceChildren?.forEach((childIds) => {
@@ -71,9 +74,9 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   const handleLeaveClick = async () => {
     afterOptionSelect();
     const isConfirmed = await confirmDialog(
-      'Leave space',
-      `Are you sure that you want to leave "${room.name}" space?`,
-      'Leave',
+      t('Molecules.SpaceOptions.leave_space'),
+      t('Molecules.SpaceOptions.leave_space_confirmation', { space: room.name }),
+      t('Molecules.SpaceOptions.leave_space_confirmation'),
       'danger',
     );
     if (!isConfirmed) return;
@@ -82,35 +85,35 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
 
   return (
     <div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
-      <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
-      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
+      <MenuHeader>{twemojify(t('Molecules.RoomOptions.title', { room_name: initMatrix.matrixClient.getRoom(roomId)?.name }))}</MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>{t('Molecules.SpaceOptions.mark_as_read')}</MenuItem>
       <MenuItem
         onClick={handleCategorizeClick}
         iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}
       >
-        {isCategorized ? 'Uncategorize subspaces' : 'Categorize subspaces'}
+        {isCategorized ? t('Organisms.SpaceSettings.uncategorize_subspaces') : t('Organisms.SpaceSettings.categorize_subspaces')}
       </MenuItem>
       <MenuItem
         onClick={handlePinClick}
         iconSrc={isPinned ? PinFilledIC : PinIC}
       >
-        {isPinned ? 'Unpin from sidebar' : 'Pin to sidebar'}
+        {isPinned ? t('Organisms.SpaceSettings.unpin_sidebar') : t('Organisms.SpaceSettings.pin_sidebar')}
       </MenuItem>
       <MenuItem
         iconSrc={AddUserIC}
         onClick={handleInviteClick}
         disabled={!canInvite}
       >
-        Invite
+        {t('Molecules.SpaceOptions.invite')}
       </MenuItem>
-      <MenuItem onClick={handleManageRoom} iconSrc={HashSearchIC}>Manage rooms</MenuItem>
-      <MenuItem onClick={handleSettingsClick} iconSrc={SettingsIC}>Settings</MenuItem>
+      <MenuItem onClick={handleManageRoom} iconSrc={HashSearchIC}>{t('Molecules.SpaceOptions.manage_rooms')}</MenuItem>
+      <MenuItem onClick={handleSettingsClick} iconSrc={SettingsIC}>{t('Molecules.SpaceOptions.settings')}</MenuItem>
       <MenuItem
         variant="danger"
         onClick={handleLeaveClick}
         iconSrc={LeaveArrowIC}
       >
-        Leave
+        {t('Molecules.SpaceOptions.leave')}
       </MenuItem>
     </div>
   );

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
@@ -82,15 +82,15 @@ function AppearanceSection() {
           content={<Text variant="b3">{t('Organisms.Settings.theme.follow_system.description')}</Text>}
         />
         <SettingTile
-          title="Theme"
+          title={t('Organisms.Settings.theme.title')}
           content={(
             <SegmentedControls
               selected={settings.useSystemTheme ? -1 : settings.getThemeIndex()}
               segments={[
-                { text: 'Light' },
-                { text: 'Silver' },
-                { text: 'Dark' },
-                { text: 'Butter' },
+                { text: t('Organisms.Settings.theme.theme_light') },
+                { text: t('Organisms.Settings.theme.theme_silver') },
+                { text: t('Organisms.Settings.theme.theme_dark') },
+                { text: t('Organisms.Settings.theme.theme_butter') },
               ]}
               onSelect={(index) => {
                 if (settings.useSystemTheme) toggleSystemTheme();
@@ -157,34 +157,34 @@ function AppearanceSection() {
           content={<Text variant="b3">{`Use ${isMacOS() ? KeySymbol.Command : 'Ctrl'} + ENTER to send message and ENTER for newline.`}</Text>}
         />
         <SettingTile
-          title="Markdown formatting"
+          title={t('Organisms.Settings.markdown.title')}
           options={(
             <Toggle
               isActive={isMarkdown}
               onToggle={() => setIsMarkdown(!isMarkdown) }
             />
           )}
-          content={<Text variant="b3">Format messages with markdown syntax before sending.</Text>}
+          content={<Text variant="b3">{t('Organisms.Settings.markdown.description')}</Text>}
         />
         <SettingTile
-          title="Hide membership events"
+          title={t('Organisms.Settings.hide_membership_events.title')}
           options={(
             <Toggle
               isActive={hideMembershipEvents}
               onToggle={() => setHideMembershipEvents(!hideMembershipEvents)}
             />
           )}
-          content={<Text variant="b3">Hide membership change messages from room timeline. (Join, Leave, Invite, Kick and Ban)</Text>}
+          content={<Text variant="b3">{t('Organisms.Settings.hide_membership_events.description')}</Text>}
         />
         <SettingTile
-          title="Hide nick/avatar events"
+          title={t('Organisms.Settings.hide_nickname_avatar_events.title')}
           options={(
             <Toggle
               isActive={hideNickAvatarEvents}
               onToggle={() => setHideNickAvatarEvents(!hideNickAvatarEvents)}
             />
           )}
-          content={<Text variant="b3">Hide nick and avatar change messages from room timeline.</Text>}
+          content={<Text variant="b3">{t('Organisms.Settings.hide_nickname_avatar_events.description')}</Text>}
         />
         <SettingTile
           title="Disable media auto load"
@@ -384,11 +384,11 @@ function AboutSection() {
 }
 
 export const tabText = {
-  APPEARANCE: 'Appearance',
-  NOTIFICATIONS: 'Notifications',
-  EMOJI: 'Emoji',
-  SECURITY: 'Security',
-  ABOUT: 'About',
+  APPEARANCE: 'Organisms.Settings.tabs.appearance',
+  NOTIFICATIONS: 'Organisms.Settings.tabs.notifications',
+  EMOJI: 'Organisms.Settings.tabs.emoji',
+  SECURITY: 'Organisms.Settings.tabs.security',
+  ABOUT: 'Organisms.Settings.tabs.about',
 };
 const tabItems = [{
   text: tabText.APPEARANCE,