From 94d784255b6e039cdb09238c6a4916c566fdf03b Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 10 Apr 2022 17:17:57 +0200
Subject: feat(renderer): Localize window title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Kristóf Marussy <kristof@marussy.com>
---
 packages/renderer/src/components/App.tsx | 28 ++++++++++++++++++++++++++--
 packages/renderer/src/index.tsx          | 11 +----------
 2 files changed, 27 insertions(+), 12 deletions(-)

(limited to 'packages/renderer')

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>
-- 
cgit v1.2.3-54-g00ecf