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>

3 files changed, 23 insertions, 9 deletions

diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index 4eaee29..1755495 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -23,6 +23,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
@@ -31,6 +32,10 @@ function ExtraButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'toolbar',
+  });
+
   return (
     <Box
       sx={{
@@ -39,7 +44,7 @@ function ExtraButtons({
       }}
     >
       <IconButton
-        aria-label="Open in browser"
+        aria-label={t('openInBrowser')}
         disabled={service?.currentUrl === undefined}
         onClick={() => service?.openCurrentURLInExternalBrowser()}
       >
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 9995a21..219ed90 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -28,6 +28,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
@@ -36,6 +37,9 @@ function NavigationButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'toolbar',
+  });
   const { direction } = useTheme();
 
   return (
@@ -46,26 +50,26 @@ function NavigationButtons({
       }}
     >
       <IconButton
-        aria-label="Back"
+        aria-label={t('back')}
         disabled={service === undefined || !service.canGoBack}
         onClick={() => service?.goBack()}
       >
         {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
-        aria-label="Forward"
+        aria-label={t('forward')}
         disabled={service === undefined || !service.canGoForward}
         onClick={() => service?.goForward()}
       >
         {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
       {service?.loading ?? false ? (
-        <IconButton aria-label="Stop" onClick={() => service?.stop()}>
+        <IconButton aria-label={t('stop')} onClick={() => service?.stop()}>
           <IconStop />
         </IconButton>
       ) : (
         <IconButton
-          aria-label="Refresh"
+          aria-label={t('reload')}
           disabled={service === undefined}
           onClick={(event) => service?.reload(event.shiftKey)}
         >
@@ -73,7 +77,7 @@ function NavigationButtons({
         </IconButton>
       )}
       <IconButton
-        aria-label="Home"
+        aria-label={t('home')}
         disabled={service === undefined}
         onClick={() => service?.goHome()}
       >
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index 6e27e6b..d9dff86 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -24,6 +24,7 @@ import IconGlobe from '@mui/icons-material/Public';
 import IconWarning from '@mui/icons-material/Warning';
 import { styled } from '@mui/material/styles';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import LocationInputAdornment from './LocationInputAdornment';
 import getAlertColor from './getAlertColor';
@@ -60,6 +61,10 @@ export default function SecurityLabel({
   changed: boolean;
   position: 'start' | 'end';
 }): JSX.Element {
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'securityLabel',
+  });
+
   const { type } = splitResult;
   if (changed || type === 'empty') {
     return (
@@ -75,14 +80,14 @@ export default function SecurityLabel({
         <SecurityLabelRoot
           alert={false}
           position={position}
-          aria-label="Secure connection"
+          aria-label={t('secureConnection')}
         >
           <IconHttps fontSize="small" />
         </SecurityLabelRoot>
       ) : (
         <SecurityLabelRoot alert position={position}>
           <IconHttp fontSize="small" />
-          <SecurityLabelText>Not secure</SecurityLabelText>
+          <SecurityLabelText>{t('notSecureConnection')}</SecurityLabelText>
         </SecurityLabelRoot>
       );
     }
@@ -90,7 +95,7 @@ export default function SecurityLabel({
       return (
         <SecurityLabelRoot alert position={position}>
           <IconWarning fontSize="small" />
-          <SecurityLabelText>Unknown site</SecurityLabelText>
+          <SecurityLabelText>{t('unknownSite')}</SecurityLabelText>
         </SecurityLabelRoot>
       );
     default: