diff options
-rw-r--r-- | locales/en/translation.json | 7 | ||||
-rw-r--r-- | packages/renderer/src/components/App.tsx | 28 | ||||
-rw-r--r-- | packages/renderer/src/index.tsx | 11 |
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 @@ | |||
45 | "directAndIndirectMessageCount": "$t(service.title.directMessageCount, { \"count\": {{directMessageCount}} }) and $t(service.title.indirectMessageCount, { \"count\": {{indirectMessageCount}} })" | 45 | "directAndIndirectMessageCount": "$t(service.title.directMessageCount, { \"count\": {{directMessageCount}} }) and $t(service.title.indirectMessageCount, { \"count\": {{indirectMessageCount}} })" |
46 | } | 46 | } |
47 | }, | 47 | }, |
48 | "title": { | ||
49 | "devMode": "[dev] {{title}}", | ||
50 | "noServiceName": "Sophie", | ||
51 | "separator": " - ", | ||
52 | "withServiceName": "{{serviceName}}$t(title.separator)$t(title.noServiceName)", | ||
53 | "withServiceNameAndTitle": "{{serviceTitle}}$t(title.separator)$t(title.noServiceName)" | ||
54 | }, | ||
48 | "toolbar": { | 55 | "toolbar": { |
49 | "back": "Back", | 56 | "back": "Back", |
50 | "forward": "Forward", | 57 | "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 @@ | |||
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>) => { |
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(() => { | |||
65 | }); | 65 | }); |
66 | addDisposer(store, disposeSetHtmlLang); | 66 | addDisposer(store, disposeSetHtmlLang); |
67 | 67 | ||
68 | const disposeSetTitle = autorun(() => { | ||
69 | const titlePrefix = isDevelopment ? '[dev] ' : ''; | ||
70 | const serviceTitle = store.settings.selectedService?.title; | ||
71 | const formattedServiceTitle = | ||
72 | serviceTitle === undefined ? '' : `${serviceTitle} - `; | ||
73 | document.title = `${titlePrefix}${formattedServiceTitle}Sophie`; | ||
74 | }); | ||
75 | addDisposer(store, disposeSetTitle); | ||
76 | |||
77 | const App = lazy(() => import('./components/App')); | 68 | const App = lazy(() => import('./components/App')); |
78 | 69 | ||
79 | function Root(): JSX.Element { | 70 | function Root(): JSX.Element { |
@@ -83,7 +74,7 @@ function Root(): JSX.Element { | |||
83 | <ThemeProvider> | 74 | <ThemeProvider> |
84 | <CssBaseline enableColorScheme /> | 75 | <CssBaseline enableColorScheme /> |
85 | <Suspense fallback={<Loading />}> | 76 | <Suspense fallback={<Loading />}> |
86 | <App /> | 77 | <App devMode={isDevelopment} /> |
87 | </Suspense> | 78 | </Suspense> |
88 | </ThemeProvider> | 79 | </ThemeProvider> |
89 | </StoreProvider> | 80 | </StoreProvider> |