Dismiss update banner after 10s on error (#800)

frontend/app/tab/tabbar.tsx

@@ -11,7 +11,7 @@ import React, { createRef, useCallback, useEffect, useRef, useState } from "reac
 import { debounce } from "throttle-debounce";
 import { Tab } from "./tab";
 import "./tabbar.less";
-import { UpdateStatusBanner } from "./updatestatus";
+import { UpdateStatusBanner } from "./updatebanner";
 
 const TAB_DEFAULT_WIDTH = 130;
 const TAB_MIN_WIDTH = 100;

frontend/app/tab/updatebanner.tsx

@@ -0,0 +1,71 @@
+import { Button } from "@/element/button";
+import { atoms, getApi } from "@/store/global";
+import { useAtomValue } from "jotai";
+import { memo, useEffect, useState } from "react";
+import "./updatebanner.less";
+
+const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
+    const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
+    const [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
+    const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
+
+    useEffect(() => {
+        let message: string;
+        let dismissBanner = false;
+        switch (appUpdateStatus) {
+            case "ready":
+                message = "Update Available";
+                break;
+            case "downloading":
+                message = "Downloading Update";
+                break;
+            case "installing":
+                message = "Installing Update";
+                break;
+            case "error":
+                message = "Updater Error: Try Checking Again";
+                dismissBanner = true;
+                break;
+            default:
+                break;
+        }
+        setUpdateStatusMessage(message);
+
+        // Clear any existing timeout
+        if (dismissBannerTimeout) {
+            clearTimeout(dismissBannerTimeout);
+        }
+
+        // If we want to dismiss the banner, set the new timeout, otherwise clear the state
+        if (dismissBanner) {
+            setDismissBannerTimeout(
+                setTimeout(() => {
+                    setUpdateStatusMessage(null);
+                    setDismissBannerTimeout(null);
+                })
+            );
+        } else {
+            setDismissBannerTimeout(null);
+        }
+    }, [appUpdateStatus]);
+
+    function onClick() {
+        getApi().installAppUpdate();
+    }
+
+    if (updateStatusMessage) {
+        return (
+            <Button
+                ref={buttonRef}
+                className="update-available-button"
+                title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
+                onClick={onClick}
+                disabled={appUpdateStatus !== "ready"}
+            >
+                {updateStatusMessage}
+            </Button>
+        );
+    }
+};
+
+export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;

frontend/app/tab/updatestatus.tsx

@@ -1,49 +0,0 @@
-import { Button } from "@/element/button";
-import { atoms, getApi } from "@/store/global";
-import { useAtomValue } from "jotai";
-import { memo } from "react";
-import "./updatestatus.less";
-
-const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
-    const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
-    function onClick() {
-        getApi().installAppUpdate();
-    }
-
-    let buttonText: string;
-    switch (appUpdateStatus) {
-        case "ready":
-            buttonText = "Update Available";
-            break;
-        case "checking":
-            buttonText = "Checking for Updates";
-            break;
-        case "downloading":
-            buttonText = "Downloading Update";
-            break;
-        case "installing":
-            buttonText = "Installing Update";
-            break;
-        case "error":
-            buttonText = "Updater Error: Try Checking Again";
-            break;
-        default:
-            break;
-    }
-
-    if (buttonText) {
-        return (
-            <Button
-                ref={buttonRef}
-                className="update-available-button"
-                title={appUpdateStatus === "ready" ? "Click to Install Update" : buttonText}
-                onClick={onClick}
-                disabled={appUpdateStatus !== "ready"}
-            >
-                {buttonText}
-            </Button>
-        );
-    }
-};
-
-export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;