Use button for update available banner (#202)

emain/emain.ts

@@ -623,8 +623,8 @@ function makeAppMenu() {
         },
         {
             label: "Check for Updates",
-            click: async () => {
-                await updater?.checkForUpdates(true);
+            click: () => {
+                fireAndForget(() => updater?.checkForUpdates(true));
             },
         },
         {

frontend/app/element/button.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import "./button.less";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    forwardedRef?: React.RefObject<HTMLButtonElement>;
     className?: string;
     children?: React.ReactNode;
 }

frontend/app/tab/tabbar.less

@@ -99,18 +99,12 @@
         --os-handle-border-radius: 2px;
     }
 
-    .update-available-label {
+    .update-available-button {
         height: 80%;
         opacity: 0.7;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
         margin: auto 4px;
         color: black;
         background-color: var(--accent-color);
-        padding: 0 5px;
-        border-radius: var(--block-border-radius);
         flex: 0 0 fit-content;
     }
 }

frontend/app/tab/tabbar.tsx

@@ -12,6 +12,7 @@ import React, { createRef, useCallback, useEffect, useRef, useState } from "reac
 import { Tab } from "./tab";
 
 import { debounce } from "throttle-debounce";
+import { Button } from "../element/button";
 import "./tabbar.less";
 
 const TAB_DEFAULT_WIDTH = 130;
@@ -70,7 +71,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     const draggerLeftRef = useRef<HTMLDivElement>(null);
     const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH);
     const scrollableRef = useRef<boolean>(false);
-    const updateStatusLabelRef = useRef<HTMLDivElement>(null);
+    const updateStatusButtonRef = useRef<HTMLButtonElement>(null);
 
     const windowData = useAtomValue(atoms.waveWindow);
     const { activetabid } = windowData;
@@ -128,7 +129,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         const tabbarWrapperWidth = tabbarWrapperRef.current.getBoundingClientRect().width;
         const windowDragLeftWidth = draggerLeftRef.current.getBoundingClientRect().width;
         const addBtnWidth = addBtnRef.current.getBoundingClientRect().width;
-        const updateStatusLabelWidth = updateStatusLabelRef.current?.getBoundingClientRect().width ?? 0;
+        const updateStatusLabelWidth = updateStatusButtonRef.current?.getBoundingClientRect().width ?? 0;
         const spaceForTabs =
             tabbarWrapperWidth - (windowDragLeftWidth + DRAGGER_RIGHT_MIN_WIDTH + addBtnWidth + updateStatusLabelWidth);
 
@@ -507,9 +508,14 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     let updateAvailableLabel: React.ReactNode = null;
     if (appUpdateStatus === "ready") {
         updateAvailableLabel = (
-            <div ref={updateStatusLabelRef} className="update-available-label" onClick={onUpdateAvailableClick}>
-                Update Available: Click to Install
-            </div>
+            <Button
+                forwardedRef={updateStatusButtonRef}
+                className="update-available-button"
+                title="Click to Install Update"
+                onClick={onUpdateAvailableClick}
+            >
+                Update Available
+            </Button>
         );
     }
 

frontend/util/util.ts

@@ -102,7 +102,7 @@ function makeIconClass(icon: string, fw: boolean): string {
  * @param f The promise to run
  */
 function fireAndForget(f: () => Promise<any>) {
-    f().catch((e) => {
+    f()?.catch((e) => {
         console.log("fireAndForget error", e);
     });
 }