feat(renderer): Localize window title

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

3 files changed, 34 insertions, 12 deletions

diff --git a/locales/en/translation.json b/locales/en/translation.json
index e215adc..9764719 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -45,6 +45,13 @@
       "directAndIndirectMessageCount": "$t(service.title.directMessageCount, { \"count\": {{directMessageCount}} }) and $t(service.title.indirectMessageCount, { \"count\": {{indirectMessageCount}} })"
     }
   },
+  "title": {
+    "devMode": "[dev] {{title}}",
+    "noServiceName": "Sophie",
+    "separator": " - ",
+    "withServiceName": "{{serviceName}}$t(title.separator)$t(title.noServiceName)",
+    "withServiceNameAndTitle": "{{serviceTitle}}$t(title.separator)$t(title.noServiceName)"
+  },
   "toolbar": {
     "back": "Back",
     "forward": "Forward",
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 49c50af..c3f83ee 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -21,7 +21,8 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
 import NewWindowBanner from './NewWindowBanner';
@@ -29,10 +30,33 @@ import { useStore } from './StoreProvider';
 import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
 
-function App(): JSX.Element {
+function App({ devMode }: { devMode: boolean }): JSX.Element {
+  const { ready, t } = useTranslation(undefined, {
+    useSuspense: false,
+  });
   const {
     settings: { selectedService },
   } = useStore();
+  const {
+    settings: { name: serviceName },
+    title: serviceTitle,
+  } = selectedService ?? { settings: { name: undefined }, title: undefined };
+
+  useEffect(() => {
+    if (!ready) {
+      // Only set title once the translations have been loaded.
+      return;
+    }
+    let title: string;
+    if (serviceName === undefined) {
+      title = t('title.noServiceName');
+    } else if (serviceTitle === undefined) {
+      title = t('title.withServiceName', { serviceName });
+    } else {
+      title = t('title.withServiceNameAndTitle', { serviceName, serviceTitle });
+    }
+    document.title = devMode ? t('title.devMode', { title }) : title;
+  }, [devMode, ready, serviceName, serviceTitle, t]);
 
   const handleBackForwardMouseButtons = useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index a408c4d..ff1ffc4 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -65,15 +65,6 @@ const disposeSetHtmlLang = autorun(() => {
 });
 addDisposer(store, disposeSetHtmlLang);
 
-const disposeSetTitle = autorun(() => {
-  const titlePrefix = isDevelopment ? '[dev] ' : '';
-  const serviceTitle = store.settings.selectedService?.title;
-  const formattedServiceTitle =
-    serviceTitle === undefined ? '' : `${serviceTitle} - `;
-  document.title = `${titlePrefix}${formattedServiceTitle}Sophie`;
-});
-addDisposer(store, disposeSetTitle);
-
 const App = lazy(() => import('./components/App'));
 
 function Root(): JSX.Element {
@@ -83,7 +74,7 @@ function Root(): JSX.Element {
         <ThemeProvider>
           <CssBaseline enableColorScheme />
           <Suspense fallback={<Loading />}>
-            <App />
+            <App devMode={isDevelopment} />
           </Suspense>
         </ThemeProvider>
       </StoreProvider>