Translate components

cinnyapp · May 3, 2024 · 0ac2c52 · 0ac2c52
1 parent 021ca20
commit 0ac2c52
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 46 deletions.
diff --git a/public/locales/de.json b/public/locales/de.json
@@ -2,6 +2,8 @@
   "common": {
     "close": "Schließen",
     "options": "Optionen",
+    "source_code": "Quellcode",
+    "sponsor": "Unterstützen",
     "delete": "Löschen",
     "continue": "Weiter",
     "view_more": "Mehr ansehen",
@@ -36,14 +38,24 @@
       "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"
+      "joined": " ist dem Raum beigetreten",
+      "left_room": " hat den Raum verlassen "
     },
     "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"
+    },
+    "MessageContentFallback": {
+      "message_deleted": "Diese Nachricht wurde gelöscht",
+      "unsupported_message": "Nicht unterstützte Nachricht",
+      "failed_to_load_message": "Meldung konnte nicht geladen werden",
+      "unable_to_decrypt": "Nachricht kann nicht entschlüsselt werden",
+      "not_decrypted_yet": "Diese Nachricht ist noch nicht entschlüsselt",
+      "broken_message": "Kaputte Nachricht",
+      "empty_message": "Leere Nachricht"
     }
   },
   "Organisms": {
@@ -106,6 +118,45 @@
         "emoji": "Emoji",
         "security": "Sicherheit",
         "about": "Über"
+      },
+      "notifications_and_sound": {
+        "title": "Benachrichtungen & Töne",
+        "desktop": {
+          "title": "Desktop-Benachrichtigungen",
+          "description": "Bei Eintreffen neuer Nachrichten Desktop-Benachrichtigung anzeigen."
+        },
+        "sound": {
+          "title": "Benachrichtigungstöne",
+          "description": "Bei Eintreffen neuer Nachrichten Ton abspielen."
+        }
+      },
+      "security": {
+        "cross_signing": {
+          "title": "Quersignaturen und Sicherung"
+        },
+        "export_import_encryption_keys": {
+          "title": "Schlüssel exportieren/importieren"
+        },
+        "export_encryption_keys": {
+          "title": "Raumschlüssel exportieren",
+          "description": "Raumschlüssel für die Entschlüsselung alter Nachrichten einer anderen Sitzung exportieren. Um Raumschlüssel zu verschlüsseln muss ein Kennwort vergeben werden, das während des Importierens verwendet wird."
+        },
+        "import_encryption_keys": {
+          "title": "Raumschlüssel importieren",
+          "description": "Raumschlüssel für die Entschlüsselung alter Nachrichten einer anderen Sitzung importieren. Um Raumschlüssel zu entschlüsseln muss das Kennwort eingegeben werden, das während des Exportierens verwendet wurde."
+        }
+      },
+      "logout": {
+        "title": "Abmelden",
+        "dialog": {
+          "title": "Abmelden",
+          "description": "Bist du sicher, dass du dich von dieser Sitzung abmelden möchtest?",
+          "confirm": "Abmelden"
+        }
+      },
+      "about": {
+        "application": "Anwendung",
+        "credits": "Credits"
       }
     },
     "SecretStorageAccess": {
@@ -195,7 +246,8 @@
       "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"
+      "changed_room_name": " hat den Raum Name geändert",
+      "new_messages": "Neue Nachrichten"
     },
     "DrawerBreadcrumb": {
       "home": "Home"
@@ -444,5 +496,10 @@
       "logout_prompt": "Abmeldung",
       "clear_cache": "Zwischenspeicher löschen & neuladen"
     }
+  },
+  "Time": {
+    "today": "Heute",
+    "yesterday": "Gestern",
+    "timeHourMinute": "HH:mm"
   }
 }
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -2,6 +2,8 @@
   "common": {
     "close": "Close",
     "options": "Options",
+    "source_code": "Source code",
+    "sponsor": "Support",
     "delete": "Delete",
     "continue": "Continue",
     "view_more": "View more",
@@ -36,14 +38,24 @@
       "invited": " invited <user_invited />",
       "reject_invite": " rejected the invitation ",
       "requested_join": " request to join room ",
-      "joined": " joined the room"
+      "joined": " joined the room",
+      "left_room": " left 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"
+    },
+    "MessageContentFallback": {
+      "message_deleted": "This message has been deleted",
+      "unsupported_message": "Unsupported message",
+      "failed_to_load_message": "Failed to load message",
+      "unable_to_decrypt": "Unable to decrypt message",
+      "not_decrypted_yet": "This message is not decrypted yet",
+      "broken_message": "Broken message",
+      "empty_message": "Empty message"
     }
   },
   "Organisms": {
@@ -106,6 +118,45 @@
         "emoji": "Emoji",
         "security": "Security",
         "about": "About"
+      },
+      "notifications_and_sound": {
+        "title": "Notifications & Sound",
+        "desktop": {
+          "title": "Desktop notifications",
+          "description": "Show desktop notifications when new messages arrive."
+        },
+        "sound": {
+          "title": "Notification sound",
+          "description": "Play a sound when new messages arrive."
+        }
+      },
+      "security": {
+        "cross_signing": {
+          "title": "Cross signing and backup"
+        },
+        "export_import_encryption_keys": {
+          "title": "Export / Import encryption keys"
+        },
+        "export_encryption_keys": {
+          "title": "Export E2E room keys",
+          "description": "Export end-to-end encryption room keys to decrypt old messages in other session. In order to encrypt keys you need to set a password, which will be used while importing."
+        },
+        "import_encryption_keys": {
+          "title": "Import E2E room keys",
+          "description": "To decrypt older messages, Export E2EE room keys from Element (Settings > Security & Privacy > Encryption > Cryptography) and import them here. Imported keys are encrypted so you\\'ll have to enter the password you set in order to decrypt it."
+        }
+      },
+      "logout": {
+        "title": "Logout",
+        "dialog": {
+          "title": "Logout",
+          "description": "Are you sure that you want to logout your session?",
+          "confirm": "Logout"
+        }
+      },
+      "about": {
+        "application": "Application",
+        "credits": "Credits"
       }
     },
     "SecretStorageAccess": {
@@ -195,7 +246,8 @@
       "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"
+      "changed_room_name": " changed room name",
+      "new_messages": "New Messages"
     },
     "DrawerBreadcrumb": {
       "home": "Home"
@@ -444,5 +496,10 @@
       "logout_prompt": "Logout",
       "clear_cache": "Clear cache & reload"
     }
+  },
+  "Time": {
+    "today": "Today",
+    "yesterday": "Yesterday",
+    "timeHourMinute": "hh:mm A"
   }
 }
diff --git a/src/app/components/message/MessageContentFallback.tsx b/src/app/components/message/MessageContentFallback.tsx
@@ -1,5 +1,6 @@
 import { Box, Icon, Icons, Text, as, color, config } from 'folds';
 import React from 'react';
+import { Trans } from 'react-i18next';
 
 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
 const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
@@ -9,9 +10,9 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
     <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
       <Icon size="50" src={Icons.Delete} />
       {reason ? (
-        <i>This message has been deleted. {reason}</i>
+        <i><Trans i18nKey="Components.MessageContentFallback.message_deleted" />. {reason}</i>
       ) : (
-        <i>This message has been deleted</i>
+        <i><Trans i18nKey="Components.MessageContentFallback.message_deleted" /></i>
       )}
     </Box>
   )
@@ -20,42 +21,42 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
 export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
-    <i>Unsupported message</i>
+    <i><Trans i18nKey="Components.MessageContentFallback.unsupported_message" /></i>
   </Box>
 ));
 
 export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
-    <i>Failed to load message</i>
+    <i><Trans i18nKey="Components.MessageContentFallback.failed_to_load_message" /></i>
   </Box>
 ));
 
 export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Lock} />
-    <i>Unable to decrypt message</i>
+    <i><Trans i18nKey="Components.MessageContentFallback.unable_to_decrypt" /></i>
   </Box>
 ));
 
 export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Lock} />
-    <i>This message is not decrypted yet</i>
+    <i><Trans i18nKey="Components.MessageContentFallback.not_decrypted_yet" /></i>
   </Box>
 ));
 
 export const MessageBrokenContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
-    <i>Broken message</i>
+    <i><Trans i18nKey="Components.MessageContentFallback.broken_message" /></i>
   </Box>
 ));
 
 export const MessageEmptyContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
-    <i>Empty message</i>
+    <i><Trans i18nKey="Components.MessageContentFallback.empty_message" /></i>
   </Box>
 ));
 

diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
@@ -1,22 +1,26 @@
 import React from 'react';
 import { Text, as } from 'folds';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import { timeDayMonYear, today, yesterday } from '../../utils/time';
 
 export type TimeProps = {
   compact?: boolean;
   ts: number;
 };
 
 export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => {
+  const { t } = useTranslation();
+
+  const timeHourMinute = dayjs(ts).format(t('Time.timeHourMinute'));
+
   let time = '';
-  if (compact) {
-    time = timeHourMinute(ts);
-  } else if (today(ts)) {
-    time = timeHourMinute(ts);
+  if (compact || today(ts)) {
+    time = timeHourMinute;
   } else if (yesterday(ts)) {
-    time = `Yesterday ${timeHourMinute(ts)}`;
+    time = `${t('Time.yesterday')} ${timeHourMinute}`;
   } else {
-    time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
+    time = `${timeDayMonYear(ts)} ${timeHourMinute}`;
   }
 
   return (

diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
@@ -2,14 +2,15 @@ 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 dayjs from 'dayjs';
 import { openInviteUser, selectRoom } from '../../../client/action/navigation';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
 import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
+import { timeDayMonthYear } from '../../utils/time';
 
 export type RoomIntroProps = {
   room: Room;
@@ -69,7 +70,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
               <Trans
                 i18nKey="Components.RoomIntro.created_by_on"
                 components={{ user: <b>@{creatorName}</b> }}
-                values={{ time: `${timeDayMonthYear(ts)} ${timeHourMinute(ts)}` }}
+                values={{ time: `${timeDayMonthYear(ts)} ${dayjs(ts).format(t('Time.timeHourMinute'))}` }}
               />
             </Text>
           )}

diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx
@@ -152,7 +152,7 @@ export const useMemberEventParser = (): MemberEventParser => {
             senderId === userId ? (
               <>
                 <b>{userName}</b>
-                {' left the room '}
+                {t('Components.MemberEvent.left_room')}
                 {content.reason}
               </>
             ) : (

diff --git a/src/app/organisms/room/RoomTimeline.tsx b/src/app/organisms/room/RoomTimeline.tsx
@@ -1693,7 +1693,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         <MessageBase space={messageSpacing}>
           <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
             <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
-              <Text size="L400">New Messages</Text>
+              <Text size="L400">{t('Organisms.RoomCommon.new_messages')}</Text>
             </Badge>
           </TimelineDivider>
         </MessageBase>
@@ -1706,8 +1706,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
               <Text size="L400">
                 {(() => {
-                  if (today(mEvent.getTs())) return 'Today';
-                  if (yesterday(mEvent.getTs())) return 'Yesterday';
+                  if (today(mEvent.getTs())) return t('Time.today');
+                  if (yesterday(mEvent.getTs())) return t('Time.yesterday');
                   return timeDayMonthYear(mEvent.getTs());
                 })()}
               </Text>