WIP: Internationalization

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["webpro.vscode-knip", "oxc.oxc-vscode"]
+  "recommendations": ["webpro.vscode-knip", "oxc.oxc-vscode", "lokalise.i18n-ally"]
 }

.vscode/settings.json

@@ -15,6 +15,16 @@
   },
   "nixEnvSelector.nixFile": "${workspaceFolder}/flake.nix",
   "nixEnvSelector.useFlakes": true,
+  "i18n-ally.localesPaths": ["public/locales"],
+  "i18n-ally.dirStructure": "auto",
+  "i18n-ally.enabledFrameworks": ["react", "react-i18next"],
+  "i18n-ally.extract.keyMaxLength": 75,
+  "i18n-ally.extract.targetPickingStrategy": "most-similar",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.extract.keygenStyle": "snake_case",
+  "i18n-ally.extract.ignoredByFiles": {
+    "src/app/components/DeviceVerificationSetup.tsx": ["Column"]
+  },
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "package.json": "pnpm-*.yaml, yarn.lock, package-lock.json, .npmrc, .nvmrc, .node-version",

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /public/locales/en.json
+    translation: /public/locales/%two_letters_code%.json

i18next.config.ts

@@ -0,0 +1,7 @@
+export default {
+  locales: ['en', 'ro'],
+  extract: {
+    input: 'src/**/*.tsx',
+    output: 'public/locales/{{language}}/{{namespace}}.json',
+  },
+};

src/app/components/AccountDataEditor.tsx

@@ -23,6 +23,7 @@ import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor';
 import { Page, PageHeader } from './page';
 import { SequenceCard } from './sequence-card';
 import { TextViewerContent } from './text-viewer';
+import { t } from 'i18next';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -121,7 +122,7 @@ function AccountDataEdit({
       aria-disabled={submitting}
     >
       <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Account Data</Text>
+        <Text size="L400">{t('DevTools.account_data')}</Text>
         <Box gap="300">
           <Box grow="Yes" direction="Column">
             <Input
@@ -142,7 +143,7 @@ function AccountDataEdit({
             disabled={submitting}
             before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
           >
-            <Text size="B400">Save</Text>
+            <Text size="B400">{t('General.save')}</Text>
           </Button>
           <Button
             variant="Secondary"
@@ -153,7 +154,7 @@ function AccountDataEdit({
             onClick={onCancel}
             disabled={submitting}
           >
-            <Text size="B400">Cancel</Text>
+            <Text size="B400">{t('General.cancel')}</Text>
           </Button>
         </Box>
 
@@ -165,7 +166,7 @@ function AccountDataEdit({
       </Box>
       <Box grow="Yes" direction="Column" gap="100">
         <Box shrink="No">
-          <Text size="L400">JSON Content</Text>
+          <Text size="L400">{t('DevTools.json_content')}</Text>
         </Box>
         <TextAreaComponent
           ref={textAreaRef}
@@ -208,7 +209,7 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
     >
       <Box shrink="No" gap="300" alignItems="End">
         <Box grow="Yes" direction="Column" gap="100">
-          <Text size="L400">Account Data</Text>
+          <Text size="L400">{t('DevTools.account_data')}</Text>
           <Input
             variant="SurfaceVariant"
             size="400"
@@ -219,11 +220,11 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
           />
         </Box>
         <Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
-          <Text size="B400">Edit</Text>
+          <Text size="B400">{t('General.edit')}</Text>
         </Button>
       </Box>
       <Box grow="Yes" direction="Column" gap="100">
-        <Text size="L400">JSON Content</Text>
+        <Text size="L400">{t('DevTools.json_content')}</Text>
         <SequenceCard variant="SurfaceVariant">
           <Scroll visibility="Always" size="300" hideTrack>
             <TextViewerContent
@@ -290,7 +291,7 @@ export function AccountDataEditor({
               onClick={requestClose}
               before={sizedIcon(ArrowLeft, '100')}
             >
-              <Text size="T300">Developer Tools</Text>
+              <Text size="T300">{t('DevTools.developer_tools')}</Text>
             </Chip>
           </Box>
           <Box shrink="No">

src/app/components/DeviceVerification.tsx

@@ -26,6 +26,7 @@ import {
 } from '$hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { ContainerColor } from '$styles/ContainerColor.css';
+import { t } from 'i18next';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -50,7 +51,7 @@ function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProp
     <Box direction="Column" gap="400">
       <Text>{message}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
+        <Text size="B400">{t('General.close')}</Text>
       </Button>
     </Box>
   );
@@ -59,8 +60,10 @@ function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProp
 function VerificationWaitAccept() {
   return (
     <Box direction="Column" gap="400">
-      <Text>Please accept the request from other device.</Text>
-      <WaitingMessage message="Waiting for request to be accepted..." />
+      <Text>{t('Settings.device_verification.please_accept_the_request_from_other_device')}</Text>
+      <WaitingMessage
+        message={t('Settings.device_verification.waiting_for_request_to_be_accepted')}
+      />
     </Box>
   );
 }
@@ -74,15 +77,17 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
   const accepting = acceptState.status === AsyncStatus.Loading;
   return (
     <Box direction="Column" gap="400">
-      <Text>Click accept to start the verification process.</Text>
+      <Text>
+        {t('Settings.device_verification.click_accept_to_start_the_verification_process')}
+      </Text>
       <Button
         variant="Primary"
         fill="Solid"
         onClick={accept}
         before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
         disabled={accepting}
       >
-        <Text size="B400">Accept</Text>
+        <Text size="B400">{t('General.accept')}</Text>
       </Button>
     </Box>
   );
@@ -91,8 +96,10 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
 function VerificationWaitStart() {
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification request has been accepted.</Text>
-      <WaitingMessage message="Waiting for the response from other device..." />
+      <Text>{t('Settings.device_verification.verification_request_has_been_accepted')}</Text>
+      <WaitingMessage
+        message={t('Settings.device_verification.waiting_for_the_response_from_other_device')}
+      />
     </Box>
   );
 }
@@ -107,7 +114,9 @@ function AutoVerificationStart({ onStart }: VerificationStartProps) {
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage
+        message={t('Settings.device_verification.starting_verification_using_emoji_comparison')}
+      />
     </Box>
   );
 }
@@ -129,7 +138,11 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
 
   return (
     <Box direction="Column" gap="400">
-      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+      <Text>
+        {t(
+          'Settings.device_verification.confirm_the_emoji_below_are_displayed_on_both_devices_in_the_same_order'
+        )}
+      </Text>
       <Box
         className={ContainerColor({ variant: 'SurfaceVariant' })}
         style={{
@@ -155,15 +168,15 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           disabled={confirming}
           before={confirming && <Spinner size="100" variant="Primary" />}
         >
-          <Text size="B400">They Match</Text>
+          <Text size="B400">{t('Settings.device_verification.they_match')}</Text>
         </Button>
         <Button
           variant="Primary"
           fill="Soft"
           onClick={() => sasData.mismatch()}
           disabled={confirming}
         >
-          <Text size="B400">Do not Match</Text>
+          <Text size="B400">{t('Settings.device_verification.do_not_match')}</Text>
         </Button>
       </Box>
     </Box>
@@ -190,7 +203,9 @@ function SasVerification({ verifier, onCancel }: SasVerificationProps) {
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage
+        message={t('Settings.device_verification.starting_verification_using_emoji_comparison')}
+      />
     </Box>
   );
 }
@@ -202,10 +217,10 @@ function VerificationDone({ onExit }: VerificationDoneProps) {
   return (
     <Box direction="Column" gap="400">
       <div>
-        <Text>Your device is verified.</Text>
+        <Text>{t('Settings.device_verification.your_device_is_verified')}</Text>
       </div>
       <Button variant="Primary" fill="Solid" onClick={onExit}>
-        <Text size="B400">Okay</Text>
+        <Text size="B400">{t('General.okay')}</Text>
       </Button>
     </Box>
   );
@@ -217,9 +232,9 @@ type VerificationCanceledProps = {
 function VerificationCanceled({ onClose }: VerificationCanceledProps) {
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification has been canceled.</Text>
+      <Text>{t('Settings.device_verification.verification_has_been_canceled')}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
+        <Text size="B400">{t('General.close')}</Text>
       </Button>
     </Box>
   );
@@ -269,7 +284,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
           <Dialog variant="Surface">
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
-                <Text size="H4">Device Verification</Text>
+                <Text size="H4">{t('Settings.device_verification.device_verification')}</Text>
               </Box>
               <IconButton size="300" radii="300" onClick={handleCancel}>
                 {composerIcon(X)}
@@ -293,7 +308,9 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
                   <SasVerification verifier={request.verifier} onCancel={handleCancel} />
                 ) : (
                   <VerificationUnexpected
-                    message="Unexpected Error! Verification is started but verifier is missing."
+                    message={t(
+                      'Settings.device_verification.unexpected_error_verification_is_started_but_verifier_is_missing'
+                    )}
                     onClose={handleCancel}
                   />
                 ))}