Translate components

cinnyapp · Dec 18, 2023 · 23d25cb · 23d25cb
1 parent 40562fb
commit 23d25cb
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 127 deletions.
diff --git a/public/locales/de.json b/public/locales/de.json
@@ -1,7 +1,14 @@
 {
   "common": {
+    "close": "Schließen",
     "options": "Optionen",
-    "or": "oder"
+    "or": "oder",
+    "search": "Suche",
+    "invite": "Einladen",
+    "message_prompt": "Nachricht"
+  },
+  "errors": {
+    "generic": "Etwas ist schiefgegangen!"
   },
   "Components": {
     "PDF": {
@@ -11,6 +18,24 @@
       "previous": "Vorherige",
       "jump_to_page": "Spring zu Seite",
       "next": "Nächste"
+    },
+    "UploadBoard": {
+      "files": "Dateien",
+      "send": "Senden",
+      "upload_failed": "Hochladen fehlgeschlagen"
+    },
+    "MemberEvent": {
+      "invited": " hat <user_invited /> eingeladen",
+      "reject_invite": " hat die Einladung abgelehnt ",
+      "requested_join": " hat angefragt dem Raum bei zu tretten ",
+      "joined": " ist dem Raum beigetreten"
+    },
+    "RoomIntro": {
+      "created_by_on": "Erstellt von <user /> am {{time}}",
+      "beginning": "Das ist der Start der Unterhaltung.",
+      "invite_member": "Nutzer einladen",
+      "open_old_room": "Alten Raum öffnen",
+      "join_old_room": "Altem Raum beitreten"
     }
   },
   "Organisms": {
@@ -24,6 +49,25 @@
       "pin_sidebar": "An Seitenleiste anheften",
       "unpin_sidebar": "Von Seitenleiste lösen"
     },
+    "MembersDrawer": {
+      "members": "Nutzer",
+      "invite_member": "Nutzer einladen",
+      "type_name": "Schreibe Name...",
+      "Filter": {
+        "no_members": "Keine \"{{membershipFilter}}\" Nutzer",
+        "joined": "Beigetreten",
+        "invited": "Eingeladen",
+        "left": "Verlassen",
+        "kicked": "Entfernt",
+        "banned": "Verbant"
+      },
+      "Sort": {
+        "aToZ": "A bis Z",
+        "tToA": "Z bis A",
+        "newest": "Neueste",
+        "oldest": "Älteste"
+      }
+    },
     "Settings": {
       "theme": {
         "follow_system": {
@@ -56,6 +100,26 @@
         "about": "Über"
       }
     },
+    "RoomCommon": {
+      "user_joined": "<bold><user/></bold> ist dem Raum beigetreten",
+      "user_left": "<bold><user/></bold> hat den Raum verlassen",
+      "user_left_reason": "<bold><user/></bold> hat den Raum verlassen: <reason/>",
+      "user_invited": "<bold><inviter/></bold> hat <bold><user/></bold> eingeladen",
+      "invite_cancelled": "<bold><inviter_name/></bold> hat <bold><user_name/>'s</bold> Einladung widerrufen",
+      "invite_rejected": "<bold><user_name/></bold> hat die Einladung abgelehnt",
+      "user_kicked": "<bold><actor/></bold> hat <bold><user_name/></bold> entfernt",
+      "user_kicked_reason": "<bold><actor/></bold> hat <bold><user/></bold> entfernt: <reason/>",
+      "user_banned": "<bold><actor/></bold> hat <bold><user_name/></bold> gebannt",
+      "user_banned_reason": "<bold><actor/></bold> banned <bold><user/></bold>: <reason/>",
+      "user_unbanned": "<bold><actor/> hat <bold><user_name/></bold> entbannt",
+      "avatar_set": "<bold><user_name/></bold> hat einen Avatar festgelegt",
+      "avatar_changed": "<bold><user_name/></bold> hat den Avatar geändert",
+      "avatar_removed": "<bold><user_name/></bold> hat den Avatar entfernt",
+      "name_set": "<bold><user_name/></bold> hat den Anzeigenamen <bold><new_name/></bold> gewählt",
+      "name_changed": "<bold><user_name/></bold> hat den Anzeigenamen in <bold><new_name/></bold> geändert",
+      "name_removed": "<bold><user_name/></bold> hat den Anzeigenamen <bold><new_name/></bold> entfernt",
+      "changed_room_name": " hat den Raum Name geändert"
+    },
     "DrawerBreadcrumb": {
       "home": "Home"
     },
@@ -81,6 +145,21 @@
       "pin_spaces_tooltip": "Spaces anheften",
       "search_tooltip": "Suche",
       "invites_tooltip": "Einladungen"
+    },
+    "InviteUser": {
+      "user_not_found": "{{user_name}} nicht gefunden!",
+      "no_matches_found": "Keine Treffer für {{user_name}} gefunden",
+      "invite_result": {
+        "invited": "Eingeladen",
+        "already_joined": "Bereits beigetreten",
+        "already_invited": "Bereits eingeladen",
+        "banned": "Gebannt"
+      },
+      "search_label": "Name oder Benutzer-ID",
+      "search_result_title": "Suchergebnis für Benutzer {{user_name}}",
+      "searching_for_user": "Suche nach Benutzer {{user_name}}...",
+      "invite_to_room": "In {{room}} einladen",
+      "invite_to_dm": "Direktnachricht"
     }
   },
   "Molecules": {

diff --git a/public/locales/en.json b/public/locales/en.json
@@ -1,7 +1,14 @@
 {
   "common": {
+    "close": "Close",
     "options": "Options",
-    "or": "Or"
+    "or": "Or",
+    "search": "Search",
+    "invite": "Invite",
+    "message_prompt": "Message"
+  },
+  "errors": {
+    "generic": "Something went wrong!"
   },
   "Components": {
     "PDF": {
@@ -11,6 +18,24 @@
       "previous": "Previous",
       "jump_to_page": "Jump To Page",
       "next": "Next"
+    },
+    "UploadBoard": {
+      "files": "Files",
+      "send": "Send",
+      "upload_failed": "Upload Failed"
+    },
+    "MemberEvent": {
+      "invited": " invited <user_invited />",
+      "reject_invite": " rejected the invitation ",
+      "requested_join": " request to join room ",
+      "joined": " joined the room"
+    },
+    "RoomIntro": {
+      "created_by_on": "Created by <user /> on {{time}}",
+      "beginning": "This is the beginning of conversation.",
+      "invite_member": "Invite Member",
+      "open_old_room": "Open Old Room",
+      "join_old_room": "Join Old Room"
     }
   },
   "Organisms": {
@@ -24,6 +49,25 @@
       "pin_sidebar": "Pin to sidebar",
       "unpin_sidebar": "Unpin from sidebar"
     },
+    "MembersDrawer": {
+      "members": "Members",
+      "invite_member": "Invite Member",
+      "type_name": "Type name...",
+      "Filter": {
+        "no_members": "No \"{{membershipFilter}}\" Members",
+        "joined": "Joined",
+        "invited": "Invited",
+        "left": "Left",
+        "kicked": "Kicked",
+        "banned": "Banned"
+      },
+      "Sort": {
+        "aToZ": "A to Z",
+        "tToA": "Z to A",
+        "newest": "Newest",
+        "oldest": "Oldest"
+      }
+    },
     "Settings": {
       "theme": {
         "follow_system": {
@@ -56,6 +100,26 @@
         "about": "About"
       }
     },
+    "RoomCommon": {
+      "user_joined": "<bold><user/></bold> joined the room",
+      "user_left": "<bold><user/></bold> left the room",
+      "user_left_reason": "<bold><user/></bold> left the room: <reason/>",
+      "user_invited": "<bold><inviter/></bold> invited <bold><user/></bold>",
+      "invite_cancelled": "<bold><inviter/></bold> cancelled <bold><user/>'s</bold> invite",
+      "invite_rejected": "<bold><user/></bold> rejected the invitation",
+      "user_kicked": "<bold><actor/></bold> kicked <bold><user/></bold>",
+      "user_kicked_reason": "<bold><actor/></bold> kicked <bold><user/></bold>: <reason/>",
+      "user_banned": "<bold><actor/></bold> banned <bold><user/></bold>",
+      "user_banned_reason": "<bold><actor/></bold> banned <bold><user/></bold>: <reason/>",
+      "user_unbanned": "<bold><actor/> unbanned <bold><user/></bold>",
+      "avatar_set": "<bold><user/></bold> set an avatar",
+      "avatar_changed": "<bold><user/></bold> changed their avatar",
+      "avatar_removed": "<bold><user/></bold> removed their avatar",
+      "name_set": "<bold><user/></bold> set their display name to <bold><new_name/></bold>",
+      "name_changed": "<bold><user/></bold> changed their display name to <bold><new_name/></bold>",
+      "name_removed": "<bold><user/></bold> removed their display name <bold><last_name/></bold>",
+      "changed_room_name": " changed room name"
+    },
     "DrawerBreadcrumb": {
       "home": "Home"
     },
@@ -81,6 +145,21 @@
       "pin_spaces_tooltip": "Pin spaces",
       "search_tooltip": "Search",
       "invites_tooltip": "Invites"
+    },
+    "InviteUser": {
+      "user_not_found": "{{user_name}} not found!",
+      "no_matches_found": "No matches found for {{user_name}}",
+      "invite_result": {
+        "invited": "Invited",
+        "already_joined": "Already joined",
+        "already_invited": "Already invited",
+        "banned": "Banned"
+      },
+      "search_label": "Name or User ID",
+      "search_result_title": "Search result for user {{user_name}}",
+      "searching_for_user": "Searching for user {{user_name}}...",
+      "invite_to_room": "Invite to {{room}}",
+      "invite_to_dm": "Direct Message"
     }
   },
   "Molecules": {

diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Avatar, AvatarFallback, AvatarImage, Box, Button, Spinner, Text, as, color } from 'folds';
 import { Room } from 'matrix-js-sdk';
+import { useTranslation, Trans } from 'react-i18next';
 import { openInviteUser, selectRoom } from '../../../client/action/navigation';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
@@ -35,6 +36,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
   const [prevRoomState, joinPrevRoom] = useAsyncCallback(
     useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
   );
+  const { t } = useTranslation();
 
   return (
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
@@ -60,13 +62,15 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             {name}
           </Text>
           <Text size="T400" priority="400">
-            {typeof topic === 'string' ? topic : 'This is the beginning of conversation.'}
+            {typeof topic === 'string' ? topic : t('Components.RoomIntro.beginning')}
           </Text>
           {creatorName && ts && (
             <Text size="T200" priority="300">
-              {'Created by '}
-              <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
+              <Trans
+                i18nKey="Components.RoomIntro.created_by_on"
+                components={{ user: <b>@{creatorName}</b> }}
+                values={{ time: `${timeDayMonthYear(ts)} ${timeHourMinute(ts)}` }}
+              />
             </Text>
           )}
         </Box>
@@ -77,7 +81,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             size="300"
             radii="300"
           >
-            <Text size="B300">Invite Member</Text>
+            <Text size="B300">{t('Components.RoomIntro.invite_member')}</Text>
           </Button>
           {typeof prevRoomId === 'string' &&
             (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
@@ -88,7 +92,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
                 fill="Soft"
                 radii="300"
               >
-                <Text size="B300">Open Old Room</Text>
+                <Text size="B300">{t('Components.RoomIntro.open_old_room')}</Text>
               </Button>
             ) : (
               <Button
@@ -104,7 +108,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
                   ) : undefined
                 }
               >
-                <Text size="B300">Join Old Room</Text>
+                <Text size="B300">{t('Components.RoomIntro.join_old_room')}</Text>
               </Button>
             ))}
         </Box>

diff --git a/src/app/components/upload-board/UploadBoard.tsx b/src/app/components/upload-board/UploadBoard.tsx
@@ -2,6 +2,7 @@ import React, { MutableRefObject, ReactNode, useImperativeHandle, useRef } from
 import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 import * as css from './UploadBoard.css';
 import { TUploadFamilyObserverAtom, Upload, UploadStatus, UploadSuccess } from '../../state/upload';
@@ -75,6 +76,7 @@ export function UploadBoardHeader({
     handleSend,
   }));
   const handleCancel = () => onCancel(uploads);
+  const { t } = useTranslation();
 
   return (
     <Header size="400">
@@ -88,7 +90,7 @@ export function UploadBoardHeader({
         gap="100"
       >
         <Icon src={open ? Icons.ChevronTop : Icons.ChevronRight} size="50" />
-        <Text size="H6">Files</Text>
+        <Text size="H6">{t('Components.UploadBoard.files')}</Text>
       </Box>
       <Box className={css.UploadBoardHeaderContent} alignItems="Center" gap="100">
         {isSuccess && (
@@ -100,12 +102,12 @@ export function UploadBoardHeader({
             outlined
             after={<Icon src={Icons.Send} size="50" filled />}
           >
-            <Text size="B300">Send</Text>
+            <Text size="B300">{t('Components.UploadBoard.send')}</Text>
           </Chip>
         )}
         {isError && !open && (
           <Badge variant="Critical" fill="Solid" radii="300">
-            <Text size="L400">Upload Failed</Text>
+            <Text size="L400">{t('Components.UploadBoard.upload_failed')}</Text>
           </Badge>
         )}
         {!isSuccess && !isError && !open && (

diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { IconSrc, Icons } from 'folds';
 import { MatrixEvent } from 'matrix-js-sdk';
+import { useTranslation, Trans } from 'react-i18next';
 import { IMemberContent, Membership } from '../../types/matrix/room';
 import { getMxIdLocalPart } from '../utils/matrix';
 import { isMembershipChanged } from '../utils/room';
@@ -13,6 +14,8 @@ export type ParsedResult = {
 export type MemberEventParser = (mEvent: MatrixEvent) => ParsedResult;
 
 export const useMemberEventParser = (): MemberEventParser => {
+  const { t } = useTranslation();
+
   const parseMemberEvent: MemberEventParser = (mEvent) => {
     const content = mEvent.getContent<IMemberContent>();
     const prevContent = mEvent.getPrevContent() as IMemberContent;
@@ -50,8 +53,11 @@ export const useMemberEventParser = (): MemberEventParser => {
           body: (
             <>
               <b>{senderName}</b>
-              {' invited '}
-              <b>{userName}</b> {content.reason}
+              <Trans
+                i18nKey="Components.MemberEvent.invited"
+                components={{ user_invited: <b>{userName}</b> }}
+              />
+              {content.reason}
             </>
           ),
         };
@@ -63,7 +69,7 @@ export const useMemberEventParser = (): MemberEventParser => {
           body: (
             <>
               <b>{userName}</b>
-              {' request to join room '}
+              {t('Components.MemberEvent.requested_join')}
               {content.reason}
             </>
           ),
@@ -76,7 +82,7 @@ export const useMemberEventParser = (): MemberEventParser => {
           body: (
             <>
               <b>{userName}</b>
-              {' joined the room'}
+              {t('Components.MemberEvent.joined')}
             </>
           ),
         };
@@ -90,7 +96,7 @@ export const useMemberEventParser = (): MemberEventParser => {
               senderId === userId ? (
                 <>
                   <b>{userName}</b>
-                  {' rejected the invitation '}
+                  {t('Components.MemberEvent.reject_invite')}
                   {content.reason}
                 </>
               ) : (