Update checker

web/src/components/App.jsx

@@ -1,6 +1,18 @@
 import * as React from "react";
-import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react";
-import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery, ThemeProvider, createTheme } from "@mui/material";
+import { createContext, Suspense, useContext, useEffect, useState, useMemo, useCallback } from "react";
+import {
+  Box,
+  Toolbar,
+  CssBaseline,
+  Backdrop,
+  CircularProgress,
+  useMediaQuery,
+  ThemeProvider,
+  createTheme,
+  Snackbar,
+  Button,
+  Alert,
+} from "@mui/material";
 import { useLiveQuery } from "dexie-react-hooks";
 import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
@@ -14,7 +26,13 @@ import userManager from "../app/UserManager";
 import { expandUrl, getKebabCaseLangStr } from "../app/utils";
 import ErrorBoundary from "./ErrorBoundary";
 import routes from "./routes";
-import { useAccountListener, useBackgroundProcesses, useConnectionListeners, useWebPushTopics } from "./hooks";
+import {
+  useAccountListener,
+  useBackgroundProcesses,
+  useConnectionListeners,
+  useWebPushTopics,
+  useVersionChangeListener,
+} from "./hooks";
 import PublishDialog from "./PublishDialog";
 import Messaging from "./Messaging";
 import Login from "./Login";
@@ -100,10 +118,12 @@ const updateTitle = (newNotificationsCount) => {
 };
 
 const Layout = () => {
+  const { t } = useTranslation();
   const params = useParams();
   const { account, setAccount } = useContext(AccountContext);
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
   const [sendDialogOpenMode, setSendDialogOpenMode] = useState("");
+  const [versionChanged, setVersionChanged] = useState(false);
   const users = useLiveQuery(() => userManager.all());
   const subscriptions = useLiveQuery(() => subscriptionManager.all());
   const webPushTopics = useWebPushTopics();
@@ -115,9 +135,18 @@ const Layout = () => {
       (config.base_url === s.baseUrl && params.topic === s.topic)
   );
 
+  const handleVersionChange = useCallback(() => {
+    setVersionChanged(true);
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    window.location.reload();
+  }, []);
+
   useConnectionListeners(account, subscriptions, users, webPushTopics);
   useAccountListener(setAccount);
   useBackgroundProcesses();
+  useVersionChangeListener(handleVersionChange);
   useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]);
 
   return (
@@ -140,6 +169,23 @@ const Layout = () => {
         />
       </Main>
       <Messaging selected={selected} dialogOpenMode={sendDialogOpenMode} onDialogOpenModeChange={setSendDialogOpenMode} />
+      <Snackbar
+        open={versionChanged}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        sx={{ bottom: { xs: 70, md: 24 } }}
+      >
+        <Alert
+          severity="info"
+          variant="filled"
+          action={
+            <Button color="inherit" size="small" onClick={handleRefresh}>
+              {t("common_refresh")}
+            </Button>
+          }
+        >
+          {t("version_update_available")}
+        </Alert>
+      </Snackbar>
     </Box>
   );
 };

web/src/components/hooks.js

@@ -9,6 +9,7 @@ import poller from "../app/Poller";
 import pruner from "../app/Pruner";
 import session from "../app/Session";
 import accountApi from "../app/AccountApi";
+import versionChecker from "../app/VersionChecker";
 import { UnauthorizedError } from "../app/errors";
 import notifier from "../app/Notifier";
 import prefs from "../app/Prefs";
@@ -292,12 +293,14 @@ const startWorkers = () => {
   poller.startWorker();
   pruner.startWorker();
   accountApi.startWorker();
+  versionChecker.startWorker();
 };
 
 const stopWorkers = () => {
   poller.stopWorker();
   pruner.stopWorker();
   accountApi.stopWorker();
+  versionChecker.stopWorker();
 };
 
 export const useBackgroundProcesses = () => {
@@ -323,3 +326,15 @@ export const useAccountListener = (setAccount) => {
     };
   }, []);
 };
+
+/**
+ * Hook to detect version/config changes and call the provided callback when a change is detected.
+ */
+export const useVersionChangeListener = (onVersionChange) => {
+  useEffect(() => {
+    versionChecker.registerListener(onVersionChange);
+    return () => {
+      versionChecker.resetListener();
+    };
+  }, [onVersionChange]);
+};