Working language switcher

web/public/static/langs/de.json

@@ -0,0 +1,3 @@
+{
+  "nav_button_subscribe": "Thema abonnieren"
+}

web/src/components/App.js

@@ -22,6 +22,7 @@ import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "
 import SendDialog from "./SendDialog";
 import Messaging from "./Messaging";
 import "./i18n"; // Translations!
+import {Backdrop, CircularProgress} from "@mui/material";
 
 // TODO races when two tabs are open
 // TODO investigate service workers
@@ -48,12 +49,6 @@ const App = () => {
     );
 }
 
-const Loader = () => (
-    <div>
-        <div>loading...</div>
-    </div>
-);
-
 const AllSubscriptions = () => {
     const { subscriptions } = useOutletContext();
     return <Notifications mode="all" subscriptions={subscriptions}/>;
@@ -132,6 +127,18 @@ const Main = (props) => {
     );
 };
 
+const Loader = () => (
+    <Backdrop
+        open={true}
+        sx={{
+            zIndex: 100000,
+            backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
+        }}
+    >
+        <CircularProgress color="success" disableShrink />
+    </Backdrop>
+);
+
 const updateTitle = (newNotificationsCount) => {
     document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
 }

web/src/components/Preferences.js

@@ -33,6 +33,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import userManager from "../app/UserManager";
 import {playSound} from "../app/utils";
+import {useTranslation} from "react-i18next";
 
 const Preferences = () => {
     return (
@@ -40,6 +41,7 @@ const Preferences = () => {
             <Stack spacing={3}>
                 <Notifications/>
                 <Users/>
+                <Appearance/>
             </Stack>
         </Container>
     );
@@ -60,7 +62,6 @@ const Notifications = () => {
     );
 };
 
-
 const Sound = () => {
     const sound = useLiveQuery(async () => prefs.sound());
     const handleChange = async (ev) => {
@@ -362,4 +363,31 @@ const UserDialog = (props) => {
     );
 };
 
+const Appearance = () => {
+    return (
+        <Card sx={{p: 3}}>
+            <Typography variant="h5">
+                Appearance
+            </Typography>
+            <PrefGroup>
+                <Language/>
+            </PrefGroup>
+        </Card>
+    );
+};
+
+const Language = () => {
+    const { t, i18n } = useTranslation();
+    return (
+        <Pref title="Language">
+            <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
+                <Select value={i18n.language} onChange={(ev) => i18n.changeLanguage(ev.target.value)}>
+                    <MenuItem value="en">English</MenuItem>
+                    <MenuItem value="de">Deutsch</MenuItem>
+                </Select>
+            </FormControl>
+        </Pref>
+    )
+};
+
 export default Preferences;

web/src/components/i18n.js

@@ -3,10 +3,13 @@ import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
-// init i18next
+// Translations using i18next
-// for all options read: https://www.i18next.com/overview/configuration-options
+// - Options: https://www.i18next.com/overview/configuration-options
-// learn more: https://github.com/i18next/i18next-browser-languageDetector
+// - Browser Language Detector: https://github.com/i18next/i18next-browser-languageDetector
-// learn more: https://github.com/i18next/i18next-http-backend
+// - HTTP Backend (load files via fetch): https://github.com/i18next/i18next-http-backend
+//
+// See example project here:
+// https://github.com/i18next/react-i18next/tree/master/example/react
 
 i18n
     .use(Backend)

web/src/index.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './components/App';
 
-ReactDOM.render(
+const root = createRoot(document.querySelector('#root'));
-    <App />,
+root.render(<App />);
-    document.querySelector('#root')
-);