frontend: add Maintenance Banner

Author: ffreddow

frontend/src/components/Banner.tsx

@@ -0,0 +1,50 @@
+/* esp32-remote-access
+ * Copyright (C) 2025 Frederic Henrichs <[email protected]>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the
+ * Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+ * Boston, MA 02111-1307, USA.
+ */
+
+import { useState, useEffect } from 'preact/hooks';
+import { useTranslation } from 'react-i18next';
+import Alert from 'react-bootstrap/Alert';
+
+const BANNER_DISMISSED_KEY = 'bannerDismissed';
+
+export function Banner() {
+    const { t } = useTranslation("", { useSuspense: false });
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        const dismissed = sessionStorage.getItem(BANNER_DISMISSED_KEY);
+        setShow(!dismissed);
+    }, []);
+
+    const handleClose = () => {
+        setShow(false);
+        sessionStorage.setItem(BANNER_DISMISSED_KEY, 'true');
+    };
+
+    if (!show) {
+        return null;
+    }
+
+    return (
+        <Alert variant="warning" dismissible onClose={handleClose} className="m-0 rounded-0 text-center p-0 py-1">
+                    <Alert.Heading>{t('banner.title')}</Alert.Heading>
+                    <p class="m-0">{t('banner.message')}</p>
+        </Alert>
+    );
+}

frontend/src/index.tsx

@@ -39,6 +39,7 @@ import { Recovery } from './pages/Recovery.js';
 import { Trans, useTranslation } from "react-i18next";
 import Median from "median-js-bridge";
 import { Footer } from "./components/Footer";
+import { Banner } from "./components/Banner";
 import favicon from "favicon";
 import logo from "logo";
 import { Message, MessageType } from './types';
@@ -219,6 +220,7 @@ export function App() {
                 Median.sidebar.setItems({items: [], enabled: false, persist: false});
             }
             return <>
+                <Banner />
                 <nav hidden={Median.isNativeApp()} id="logo-nav" class="navbar navbar-expand-md navbar-dark sticky-top flex-md-nowrap p-0 pb-2 pt-2 ps-2">
                     <a href="/"><img class="pt-2 pb-2 ps-2" src={logo} style="max-width: calc(100vw - 72px);" alt="logo" /></a>
                 </nav>
@@ -248,6 +250,7 @@ export function App() {
         case AppState.LoggedIn:
             return (
                 <>
+                    <Banner />
                     <ErrorAlert />
                     <Col>
                         <LocationProvider>
@@ -274,6 +277,7 @@ export function App() {
         // we need an extra recovery state, otherwise we would show the login/register page.
         case AppState.Recovery:
             return (<>
+                <Banner />
                 <ErrorAlert />
                 <LocationProvider>
                     <Row className="align-items-center justify-content-center flex-grow-1 gap-3 m-0 my-3">

frontend/src/locales/de.ts

@@ -6,6 +6,10 @@ export const de ={
     "alert_default_success": "Erfolg!",
     description,
     "no_service_worker": "Dein Browser benötigt Unterstützung für ServiceWorker um den Fernzugriff nutzen zu können.",
+    "banner": {
+        "title": "Bevorstehende Wartungsarbeiten!",
+        "message": "Wartungsarbeiten sind für Montag, den 01.12.2025 von 10:00 Uhr bis 11:30 Uhr geplant. Währenddessen ist der Fernzugriff nicht erreichbar."
+    },
     "not_now": "Jetzt nicht",
     "allow": "Browserdialog anzeigen",
     "storage_persistence": {

frontend/src/locales/en.ts

@@ -6,6 +6,10 @@ export const en = {
     "alert_default_success": "Success!",
     description,
     "no_service_worker": "Your browser needs support for ServiceWorkers to be able to run the Remote Access.",
+    "banner": {
+        "title": "Upcoming Maintenance!",
+        "message": "Maintenance is scheduled for Monday 01.12.2025 from 10:00 A.M. to 11:30 P.M. During this time, Remote Access will be unavailable."
+    },
     "not_now": "Not now",
     "allow": "Show browser prompt",
     "storage_persistence": {