Use toasts instead of modals for user feedback

web/scss/styles.scss

@@ -69,8 +69,8 @@ $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
 //@import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";
-// @import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal"; // Requires transitions
+@import "bootstrap/scss/toasts";
+// @import "bootstrap/scss/modal"; // Requires transitions
 // @import "bootstrap/scss/tooltip";
 //@import "bootstrap/scss/popover";
 // @import "bootstrap/scss/carousel";
@@ -83,4 +83,3 @@ $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
 
 // Utilities
 @import "bootstrap/scss/utilities/api";
-

web/src/components/Header.tsx

@@ -1,12 +1,12 @@
 import { RouteInstruction } from "App";
-import Modal from "bootstrap/js/dist/modal";
 import NavPathContext from "common/NavPathContext";
 import {
   RestartRequiredContext,
   RestartRequiredContextProps,
 } from "common/RestartRequiredContext";
 import { type JSX } from "preact";
 import { useContext, useState } from "preact/hooks";
+import { ToastMessage } from "./ToastMessage";
 
 function RouteLink({ route }: { route: RouteInstruction }): JSX.Element {
   const navPath = useContext(NavPathContext);
@@ -32,14 +32,12 @@ type HeaderProps = {
 export function Header({ routes }: HeaderProps): JSX.Element {
   const { restartRequired, setRestartRequired } =
     useContext<RestartRequiredContextProps>(RestartRequiredContext);
-  const [modalMessage, setModalMessage] = useState<string>("");
+  const [showToast, setShowToast] = useState(false);
 
   async function handleRestart(e: MouseEvent): Promise<void> {
     e.preventDefault();
     const response = await fetch("/api/device/restart", { method: "POST" });
-    setModalMessage("Device is restarting.");
-    const modal = Modal.getOrCreateInstance(`#modalRestarting`);
-    modal.show();
+    setShowToast(true);
     // Wait for the device to restart and then reload the page.
     setTimeout(() => {
       window.location.reload();
@@ -48,33 +46,14 @@ export function Header({ routes }: HeaderProps): JSX.Element {
 
   return (
     <>
-        <div id="modalRestarting" className="modal fade">
-          <div className="modal-dialog">
-            <div className="modal-content">
-              <div className="modal-header">
-                <h5 className="modal-title">Restarting</h5>
-                <button
-                  type="button"
-                  className="btn-close"
-                  data-bs-dismiss="modal"
-                  aria-label="Close"
-                ></button>
-              </div>
-              <div className="modal-body">
-                <p>{modalMessage}</p>
-              </div>
-              <div className="modal-footer">
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  data-bs-dismiss="modal"
-                >
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+      <ToastMessage
+        color="text-bg-warning"
+        show={showToast}
+        onHide={() => setShowToast(false)}
+      >
+        The device is restarting. Please wait...
+      </ToastMessage>
+
       <header className="navbar navbar-expand sticky-top d-flex flex-wrap justify-content-center bg-body-secondary">
         <div className="container px-3">
           <a
@@ -95,19 +74,19 @@ export function Header({ routes }: HeaderProps): JSX.Element {
                 <RouteLink key={route.path} route={route} />
               ))}
             </ul>
+            {restartRequired && (
+              <button
+                className="btn btn-warning"
+                type="button"
+                onClick={(e: MouseEvent): void => {
+                  e.stopPropagation();
+                  void handleRestart(e);
+                }}
+              >
+                Restart
+              </button>
+            )}
           </nav>
-          {restartRequired && (
-            <button
-              className="btn btn-danger"
-              type="button"
-              onClick={(e: MouseEvent): void => {
-                e.stopPropagation();
-                void handleRestart(e);
-              }}
-            >
-              Restart
-            </button>
-          )}
         </div>
       </header>
     </>

web/src/components/ToastMessage.tsx

@@ -0,0 +1,58 @@
+import { type JSX } from "preact";
+import { useEffect } from "preact/hooks";
+import useToast from "./useToast";
+
+interface ToastMessageProps {
+  color: string;
+  children: React.ReactNode;
+  show: boolean;
+  autohide?: boolean;
+  delay?: number;
+  onHide: () => void;
+}
+
+export function ToastMessage({
+  color,
+  children,
+  show,
+  autohide = true,
+  delay = 5000,
+  onHide,
+}: ToastMessageProps): JSX.Element {
+  const {toastRef, showToast, hideToast} = useToast({autohide, delay, onHide});
+
+  useEffect(() => {
+    if (show) {
+      showToast();
+    } else {
+      hideToast();
+    }
+  }, [show]);
+
+  return (
+    <>
+      <div
+        ref={toastRef}
+        className={"toast position-fixed border-0 bottom-0 end-0 m-3 " + color}
+        style="z-index: 9998"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div className="d-flex">
+          <div className="toast-body">
+            <br />
+            {children}
+          </div>
+          <button
+            type="button"
+            className="btn-close me-2 m-auto"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+            onClick={onHide}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

web/src/components/useToast.ts

@@ -0,0 +1,39 @@
+import { Toast } from "bootstrap";
+import { useEffect, useRef, useState } from "react";
+
+interface useToastProps {
+  autohide: boolean;
+  delay: number;
+  onHide: () => void;
+}
+
+export default function useToast({ autohide, delay, onHide }: useToastProps) {
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toastRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (toastRef.current) {
+      const toastElement = new Toast(toastRef.current, { autohide, delay });
+      // Call onHide when the toast is hidden to sync the state
+      toastRef.current.addEventListener("hidden.bs.toast", onHide);
+
+      if (isVisible) {
+        toastElement.show();
+      } else {
+        toastElement.hide();
+      }
+    }
+  }, [isVisible]);
+
+  const showToast = () => {
+    setIsVisible(true);
+  };
+
+  const hideToast = () => {
+    setIsVisible(false);
+  };
+
+  return {toastRef, showToast, hideToast};
+}

web/src/index.tsx

@@ -9,7 +9,7 @@ import "../css/styles.css";
 // import "bootstrap/dist/js/bootstrap.js";
 
 import "bootstrap/js/dist/collapse";
-import "bootstrap/js/dist/modal";
 import "bootstrap/js/dist/tab";
+import "bootstrap/js/dist/toast";
 
 render(<App />, document.body);

web/src/pages/Configuration/ConfigCard.tsx

@@ -1,8 +1,11 @@
 import { APP_CONFIG } from "config";
 import { useContext, useEffect, useId, useState } from "preact/hooks";
 
+import {
+  RestartRequiredContext,
+  RestartRequiredContextProps,
+} from "common/RestartRequiredContext";
 import { JsonValue, type JsonObject } from "common/jsonTypes";
-import { RestartRequiredContext, RestartRequiredContextProps } from "common/RestartRequiredContext";
 import { Card } from "components/Card";
 import {
   FormCheckboxInput,
@@ -12,7 +15,7 @@ import {
   FormTextAreaInput,
   FormTextInput,
 } from "components/Form";
-import { ModalError } from "components/ModalError";
+import { ToastMessage } from "components/ToastMessage";
 import { type JSX } from "preact/compat";
 
 interface ItemsProps {
@@ -385,16 +388,14 @@ export function ConfigCard({ path }: ConfigCardProps): JSX.Element | null {
 
   return (
     <>
-      <ModalError
-        id={`${id}-modal`}
-        title="Error"
+      <ToastMessage
+        color="text-bg-danger"
         show={httpErrorText !== ""}
-        onHide={() => {
-          setHttpErrorText("");
-        }}
+        onHide={() => setHttpErrorText("")}
       >
-        {httpErrorText}
-      </ModalError>
+        <p>Unable to set configuration:</p>
+        <p>{httpErrorText}</p>
+      </ToastMessage>
 
       <Card id={`${id}-card`} key={`${id}-card`} title={title}>
         <form>