feat(renderer): Renderer translations

Add react-i18n to make us able to use i18next translations in the
renderer process just like we do in the main process.

Translations are hot-reloaded automatically.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

1 files changed, 16 insertions, 9 deletions

diff --git a/packages/renderer/src/components/NewWindowBanner.tsx b/packages/renderer/src/components/NewWindowBanner.tsx
index a49b4b1..9aa6121 100644
--- a/packages/renderer/src/components/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/NewWindowBanner.tsx
@@ -23,6 +23,7 @@ import IconOpenInNew from '@mui/icons-material/OpenInNew';
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import type Service from '../stores/Service';
 
@@ -33,6 +34,10 @@ function NewWindowBanner({
 }: {
   service: Service | undefined;
 }): JSX.Element | null {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'banner.newWindow',
+  });
+
   if (service === undefined) {
     // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
     return null;
@@ -63,7 +68,7 @@ function NewWindowBanner({
             color="inherit"
             size="small"
           >
-            Follow link in this window
+            {t('followLink')}
           </Button>
           <Button
             onClick={() => service.openPopupInExternalBrowser(url)}
@@ -71,7 +76,7 @@ function NewWindowBanner({
             size="small"
             startIcon={<IconOpenInBrowser />}
           >
-            Open in browser
+            {t('openInExternalBrowser')}
           </Button>
           {count > 1 && (
             <>
@@ -81,27 +86,29 @@ function NewWindowBanner({
                 size="small"
                 startIcon={<IconOpenInBrowser />}
               >
-                Open all
+                {t('openAllInExternalBrowser')}
               </Button>
               <Button
                 onClick={() => service.dismissPopup(url)}
                 color="inherit"
                 size="small"
               >
-                Ignore
+                {t('dismiss')}
               </Button>
             </>
           )}
         </>
       }
     >
-      {name} wants to open <b>{url}</b>{' '}
       {count === 1 ? (
-        <>in a new window</>
+        <Trans i18nKey="messageSingleLink" t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> in a new window
+        </Trans>
       ) : (
-        <>
-          and <b>{count}</b> other links in new windows
-        </>
+        <Trans i18nKey="messageMultipleLinks" count={count - 1} t={t}>
+          {{ name }} wants to open <strong>{{ url }}</strong> and{' '}
+          <strong>{{ count: count - 1 }}</strong> other links in new windows
+        </Trans>
       )}
     </NotificationBanner>
   );