1 files changed, 26 insertions, 2 deletions

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>) => {