Translate components

cinnyapp · May 3, 2024 · b485118 · b485118
1 parent 2ea38db
commit b485118
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 20 deletions.
diff --git a/public/locales/de.json b/public/locales/de.json
@@ -1,7 +1,41 @@
 {
+  "common": {
+    "options": "Optionen"
+  },
   "Organisms": {
     "RoomCommon": {
       "changed_room_name": " hat den Raum Name geändert"
+    },
+    "DrawerBreadcrumb": {
+      "home": "Home"
+    },
+    "DrawerHeader": {
+      "add_rooms_or_spaces": "Raum oder Space hinzufügen",
+      "create_new_space": "Neuen Space erstellen",
+      "create_new_room": "Neuen Raum erstellen",
+      "explore_public_room": "Öffentliche Räume erkunden",
+      "join_with_address": "Mit Adresse beitreten",
+      "add_existing": "Bestehendem beitreten",
+      "manage_rooms": "Manage rooms",
+      "home": "Home",
+      "direct_messages": "Direktnachrichten",
+      "start_dm_tooltip": "Direktnachricht schreiben",
+      "add_rooms_spaces_tooltip": "Räume/Spaces hinzufügen"
+    },
+    "SideBar": {
+      "settings_tooltip": "Einstellungen",
+      "unverified_sessions_one": "{{count}} nicht verifizierte Sitzung",
+      "unverified_sessions_other": "{{count}} nicht verifizierte Sitzungen",
+      "home_tooltip": "Home",
+      "direct_messages_tooltip": "Personen",
+      "pin_spaces_tooltip": "Spaces anheften",
+      "search_tooltip": "Suche",
+      "invites_tooltip": "Einladungen"
+    }
+  },
+  "Molecules": {
+    "ConfirmDialog": {
+      "cancel": "Abbrechen"
     }
   }
 }
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -1,7 +1,41 @@
 {
+  "common": {
+    "options": "Options"
+  },
   "Organisms": {
     "RoomCommon": {
       "changed_room_name": " changed room name"
+    },
+    "DrawerBreadcrumb": {
+      "home": "Home"
+    },
+    "DrawerHeader": {
+      "add_rooms_or_spaces": "Add rooms or spaces",
+      "create_new_space": "Create new space",
+      "create_new_room": "Create new room",
+      "explore_public_room": "Explore public room",
+      "join_with_address": "Join with address",
+      "add_existing": "Add existing",
+      "manage_rooms": "Manage rooms",
+      "home": "Home",
+      "direct_messages": "Direct messages",
+      "start_dm_tooltip": "Start DM",
+      "add_rooms_spaces_tooltip": "Add rooms/spaces"
+    },
+    "SideBar": {
+      "settings_tooltip": "Settings",
+      "unverified_sessions_one": "{{count}} unverified session",
+      "unverified_sessions_other": "{{count}} unverified sessions",
+      "home_tooltip": "Home",
+      "direct_messages_tooltip": "People",
+      "pin_spaces_tooltip": "Pin spaces",
+      "search_tooltip": "Search",
+      "invites_tooltip": "Invites"
+    }
+  },
+  "Molecules": {
+    "ConfirmDialog": {
+      "cancel": "Cancel"
     }
   }
 }
diff --git a/src/app/molecules/confirm-dialog/ConfirmDialog.jsx b/src/app/molecules/confirm-dialog/ConfirmDialog.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './ConfirmDialog.scss';
+import { useTranslation } from 'react-i18next';
 
 import { openReusableDialog } from '../../../client/action/navigation';
 
@@ -10,12 +11,13 @@ import Button from '../../atoms/button/Button';
 function ConfirmDialog({
   desc, actionTitle, actionType, onComplete,
 }) {
+  const { t } = useTranslation();
   return (
     <div className="confirm-dialog">
       <Text>{desc}</Text>
       <div className="confirm-dialog__btn">
         <Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
-        <Button onClick={() => onComplete(false)}>Cancel</Button>
+        <Button onClick={() => onComplete(false)}>{t('Molecules.ConfirmDialog.cancel')}</Button>
       </div>
     </div>
   );

diff --git a/src/app/organisms/navigation/DrawerBreadcrumb.jsx b/src/app/organisms/navigation/DrawerBreadcrumb.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './DrawerBreadcrumb.scss';
+import { useTranslation } from 'react-i18next';
 
 import { twemojify } from '../../../util/twemojify';
 
@@ -66,6 +67,8 @@ function DrawerBreadcrumb({ spaceId }) {
     return noti;
   }
 
+  const { t } = useTranslation();
+
   function getNotiExcept(roomId, childId) {
     if (!notifications.hasNoti(roomId)) return null;
 
@@ -112,7 +115,7 @@ function DrawerBreadcrumb({ spaceId }) {
                       else selectSpace(id);
                     }}
                   >
-                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
+                    <Text variant="b2">{id === cons.tabs.HOME ? t('Organisms.DrawerBreadcrumb.home') : twemojify(mx.getRoom(id).name)}</Text>
                     { noti !== null && (
                       <NotificationBadge
                         alert={noti.highlight !== 0}

diff --git a/src/app/organisms/navigation/DrawerHeader.jsx b/src/app/organisms/navigation/DrawerHeader.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './DrawerHeader.scss';
+import { useTranslation } from 'react-i18next';
 
 import { twemojify } from '../../../util/twemojify';
 
@@ -35,37 +36,39 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
     ? room.currentState.maySendStateEvent('m.space.child', mx.getUserId())
     : true;
 
+  const { t } = useTranslation();
+
   return (
     <>
-      <MenuHeader>Add rooms or spaces</MenuHeader>
+      <MenuHeader>{t('Organisms.DrawerHeader.add_rooms_or_spaces')}</MenuHeader>
       <MenuItem
         iconSrc={SpacePlusIC}
         onClick={() => { afterOptionSelect(); openCreateRoom(true, spaceId); }}
         disabled={!canManage}
       >
-        Create new space
+        {t('Organisms.DrawerHeader.create_new_space')}
       </MenuItem>
       <MenuItem
         iconSrc={HashPlusIC}
         onClick={() => { afterOptionSelect(); openCreateRoom(false, spaceId); }}
         disabled={!canManage}
       >
-        Create new room
+        {t('Organisms.DrawerHeader.create_new_room')}
       </MenuItem>
       { !spaceId && (
         <MenuItem
           iconSrc={HashGlobeIC}
           onClick={() => { afterOptionSelect(); openPublicRooms(); }}
         >
-          Explore public rooms
+          {t('Organisms.DrawerHeader.explore_public_room')}
         </MenuItem>
       )}
       { !spaceId && (
         <MenuItem
           iconSrc={PlusIC}
           onClick={() => { afterOptionSelect(); openJoinAlias(); }}
         >
-          Join with address
+          {t('Organisms.DrawerHeader.join_with_address')}
         </MenuItem>
       )}
       { spaceId && (
@@ -74,15 +77,15 @@ export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
           onClick={() => { afterOptionSelect(); openSpaceAddExisting(spaceId); }}
           disabled={!canManage}
         >
-          Add existing
+          {t('Organisms.DrawerHeader.add_existing')}
         </MenuItem>
       )}
       { spaceId && (
         <MenuItem
           onClick={() => { afterOptionSelect(); openSpaceManage(spaceId); }}
           iconSrc={HashSearchIC}
         >
-          Manage rooms
+          {t('Organisms.DrawerHeader.manage_rooms')}
         </MenuItem>
       )}
     </>
@@ -98,7 +101,8 @@ HomeSpaceOptions.propTypes = {
 
 function DrawerHeader({ selectedTab, spaceId }) {
   const mx = initMatrix.matrixClient;
-  const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
+  const { t } = useTranslation();
+  const tabName = selectedTab !== cons.tabs.DIRECTS ? t('Organisms.DrawerHeader.home') : t('Organisms.DrawerHeader.direct_messages');
 
   const isDMTab = selectedTab === cons.tabs.DIRECTS;
   const room = mx.getRoom(spaceId);
@@ -142,8 +146,8 @@ function DrawerHeader({ selectedTab, spaceId }) {
         </TitleWrapper>
       )}
 
-      { isDMTab && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="small" /> }
-      { !isDMTab && <IconButton onClick={openHomeSpaceOptions} tooltip="Add rooms/spaces" src={PlusIC} size="small" /> }
+      { isDMTab && <IconButton onClick={() => openInviteUser()} tooltip={t('Organisms.DrawerHeader.start_dm_tooltip')} src={PlusIC} size="small" /> }
+      { !isDMTab && <IconButton onClick={openHomeSpaceOptions} tooltip={t('Organisms.DrawerHeader.add_rooms_spaces_tooltip')} src={PlusIC} size="small" /> }
     </Header>
   );
 }

diff --git a/src/app/organisms/navigation/Selector.jsx b/src/app/organisms/navigation/Selector.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -30,6 +31,8 @@ function Selector({
 
   const isMuted = noti.getNotiType(roomId) === cons.notifs.MUTE;
 
+  const { t } = useTranslation();
+
   const [, forceUpdate] = useForceUpdate();
 
   useEffect(() => {
@@ -69,7 +72,7 @@ function Selector({
       options={(
         <IconButton
           size="extra-small"
-          tooltip="Options"
+          tooltip={t('common.options')}
           tooltipPlacement="right"
           src={VerticalMenuIC}
           onClick={openOptions}

diff --git a/src/app/organisms/navigation/SideBar.jsx b/src/app/organisms/navigation/SideBar.jsx
@@ -4,6 +4,7 @@ import './SideBar.scss';
 
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useTranslation } from 'react-i18next';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -50,6 +51,8 @@ function useNotificationUpdate() {
 }
 
 function ProfileAvatarMenu() {
+  const { t } = useTranslation();
+
   const mx = initMatrix.matrixClient;
   const [profile, setProfile] = useState({
     avatarUrl: null,
@@ -77,7 +80,7 @@ function ProfileAvatarMenu() {
   return (
     <SidebarAvatar
       onClick={openSettings}
-      tooltip="Settings"
+      tooltip={t('Organisms.SideBar.settings_tooltip')}
       avatar={(
         <Avatar
           text={profile.displayName}
@@ -91,6 +94,8 @@ function ProfileAvatarMenu() {
 }
 
 function CrossSigninAlert() {
+  const { t } = useTranslation();
+
   const deviceList = useDeviceList();
   const unverified = deviceList?.filter((device) => isCrossVerified(device.device_id) === false);
 
@@ -99,7 +104,7 @@ function CrossSigninAlert() {
   return (
     <SidebarAvatar
       className="sidebar__cross-signin-alert"
-      tooltip={`${unverified.length} unverified sessions`}
+      tooltip={t('Organisms.SideBar.unverified_sessions', { count: unverified.length })}
       onClick={() => openSettings(settingTabText.SECURITY)}
       avatar={<Avatar iconSrc={ShieldUserIC} iconColor="var(--ic-danger-normal)" size="normal" />}
     />
@@ -109,6 +114,7 @@ function CrossSigninAlert() {
 function FeaturedTab() {
   const { roomList, accountData, notifications } = initMatrix;
   const [selectedTab] = useSelectedTab();
+  const { t } = useTranslation();
   useNotificationUpdate();
 
   function getHomeNoti() {
@@ -147,7 +153,7 @@ function FeaturedTab() {
   return (
     <>
       <SidebarAvatar
-        tooltip="Home"
+        tooltip={t('Organisms.SideBar.home_tooltip')}
         active={selectedTab === cons.tabs.HOME}
         onClick={() => selectTab(cons.tabs.HOME)}
         avatar={<Avatar iconSrc={HomeIC} size="normal" />}
@@ -159,7 +165,7 @@ function FeaturedTab() {
         ) : null}
       />
       <SidebarAvatar
-        tooltip="People"
+        tooltip={t('Organisms.SideBar.direct_messages_tooltip')}
         active={selectedTab === cons.tabs.DIRECTS}
         onClick={() => selectTab(cons.tabs.DIRECTS)}
         avatar={<Avatar iconSrc={UserIC} size="normal" />}
@@ -342,6 +348,7 @@ function useTotalInvites() {
 
 function SideBar() {
   const [totalInvites] = useTotalInvites();
+  const { t } = useTranslation();
 
   return (
     <div className="sidebar">
@@ -355,7 +362,7 @@ function SideBar() {
             <div className="space-container">
               <SpaceShortcut />
               <SidebarAvatar
-                tooltip="Pin spaces"
+                tooltip={t('Organisms.SideBar.pin_spaces_tooltip')}
                 onClick={() => openShortcutSpaces()}
                 avatar={<Avatar iconSrc={AddPinIC} size="normal" />}
               />
@@ -367,13 +374,13 @@ function SideBar() {
         <div className="sidebar-divider" />
         <div className="sticky-container">
           <SidebarAvatar
-            tooltip="Search"
+            tooltip={t('Organisms.SideBar.search_tooltip')}
             onClick={() => openSearch()}
             avatar={<Avatar iconSrc={SearchIC} size="normal" />}
           />
           { totalInvites !== 0 && (
             <SidebarAvatar
-              tooltip="Invites"
+              tooltip={t('Organisms.SideBar.invites_tooltip')}
               onClick={() => openInviteList()}
               avatar={<Avatar iconSrc={InviteIC} size="normal" />}
               notificationBadge={<NotificationBadge alert content={totalInvites} />}