diff options
Diffstat (limited to 'packages/renderer/src/components/App.tsx')
-rw-r--r-- | packages/renderer/src/components/App.tsx | 28 |
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 @@ | |||
21 | import Box from '@mui/material/Box'; | 21 | import Box from '@mui/material/Box'; |
22 | import Button from '@mui/material/Button'; | 22 | import Button from '@mui/material/Button'; |
23 | import { observer } from 'mobx-react-lite'; | 23 | import { observer } from 'mobx-react-lite'; |
24 | import React, { useCallback } from 'react'; | 24 | import React, { useCallback, useEffect } from 'react'; |
25 | import { useTranslation } from 'react-i18next'; | ||
25 | 26 | ||
26 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; | 27 | import BrowserViewPlaceholder from './BrowserViewPlaceholder'; |
27 | import NewWindowBanner from './NewWindowBanner'; | 28 | import NewWindowBanner from './NewWindowBanner'; |
@@ -29,10 +30,33 @@ import { useStore } from './StoreProvider'; | |||
29 | import LocationBar from './locationBar/LocationBar'; | 30 | import LocationBar from './locationBar/LocationBar'; |
30 | import Sidebar from './sidebar/Sidebar'; | 31 | import Sidebar from './sidebar/Sidebar'; |
31 | 32 | ||
32 | function App(): JSX.Element { | 33 | function App({ devMode }: { devMode: boolean }): JSX.Element { |
34 | const { ready, t } = useTranslation(undefined, { | ||
35 | useSuspense: false, | ||
36 | }); | ||
33 | const { | 37 | const { |
34 | settings: { selectedService }, | 38 | settings: { selectedService }, |
35 | } = useStore(); | 39 | } = useStore(); |
40 | const { | ||
41 | settings: { name: serviceName }, | ||
42 | title: serviceTitle, | ||
43 | } = selectedService ?? { settings: { name: undefined }, title: undefined }; | ||
44 | |||
45 | useEffect(() => { | ||
46 | if (!ready) { | ||
47 | // Only set title once the translations have been loaded. | ||
48 | return; | ||
49 | } | ||
50 | let title: string; | ||
51 | if (serviceName === undefined) { | ||
52 | title = t('title.noServiceName'); | ||
53 | } else if (serviceTitle === undefined) { | ||
54 | title = t('title.withServiceName', { serviceName }); | ||
55 | } else { | ||
56 | title = t('title.withServiceNameAndTitle', { serviceName, serviceTitle }); | ||
57 | } | ||
58 | document.title = devMode ? t('title.devMode', { title }) : title; | ||
59 | }, [devMode, ready, serviceName, serviceTitle, t]); | ||
36 | 60 | ||
37 | const handleBackForwardMouseButtons = useCallback( | 61 | const handleBackForwardMouseButtons = useCallback( |
38 | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { | 62 | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { |