improve status bar

Author: AmyJeanes

Keypad.Flasher.Client/src/KeypadFlasherApp.tsx

@@ -1,5 +1,5 @@
 /// <reference types="w3c-web-usb" />
-import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type ReactNode } from "react";
 import {
   CH55xBootloader,
   FakeBootloader,
@@ -1226,7 +1226,7 @@ export default function KeypadFlasherApp() {
   const warnNoBootEntry = Boolean(selectedLayout && bootloaderOnBootCount === 0 && bootloaderChordCount === 0);
   const warnSingleChord = Boolean(selectedLayout && bootloaderChordCount === 1);
 
-  const statusBanner = (() => {
+  const statusBanner: { tone: "info" | "success" | "warn" | "error"; title: string; body?: ReactNode; showSpinner?: boolean } | null = (() => {
     switch (status.state) {
       case "requesting":
         return { tone: "info" as const, title: "Requesting device…", body: "Approve the WebUSB prompt to continue." };
@@ -1235,7 +1235,7 @@ export default function KeypadFlasherApp() {
       case "connectedUnknown":
         return { tone: "warn" as const, title: "Device not recognized", body: "Use debug firmware or pick a supported layout." };
       case "compiling":
-        return { tone: "info" as const, title: "Compiling firmware…", body: status.detail ? `Building ${status.detail}.` : undefined };
+        return { tone: "info" as const, title: "Compiling firmware…", body: status.detail ? `Building ${status.detail}.` : undefined, showSpinner: true };
       case "unsupported":
         return { tone: "warn" as const, title: "Unknown device", body: status.detail };
       case "flashing":
@@ -1259,10 +1259,12 @@ export default function KeypadFlasherApp() {
       case "error":
         return { tone: "error" as const, title: "Error", body: status.detail };
       default:
-        return null;
+          return null;
     }
   })();
 
+        const statusProgress = progress.total > 0 ? progress : null;
+
   return (
     <div className="app-shell">
       <div className="container">
@@ -1353,14 +1355,13 @@ export default function KeypadFlasherApp() {
           )}
 
           {statusBanner && (
-            <StatusBanner tone={statusBanner.tone} title={statusBanner.title} body={statusBanner.body} />
-          )}
-
-          {progress.total > 0 && (
-            <div className="progress">
-              <div className="progress-bar" style={{ width: `${Math.round((progress.current / progress.total) * 100)}%` }} />
-              <div className="muted small mt-1">{progress.phase} {progress.current} / {progress.total}</div>
-            </div>
+            <StatusBanner
+              tone={statusBanner.tone}
+              title={statusBanner.title}
+              body={statusBanner.body}
+              showSpinner={statusBanner.showSpinner}
+              progress={statusProgress}
+            />
           )}
         </div>
 

Keypad.Flasher.Client/src/components/StatusBanner.tsx

@@ -1,18 +1,35 @@
 import type { ReactNode } from "react";
+import type { Progress } from "../lib/ch55x-bootloader";
 
 type StatusTone = "info" | "success" | "warn" | "error";
 
 type StatusBannerProps = {
   tone: StatusTone;
   title: string;
   body?: ReactNode;
+  progress?: Progress | null;
+  showSpinner?: boolean;
 };
 
-export function StatusBanner({ tone, title, body }: StatusBannerProps) {
+export function StatusBanner({ tone, title, body, progress, showSpinner }: StatusBannerProps) {
+  const hasProgress = Boolean(progress && progress.total > 0);
+  const percent = hasProgress && progress ? Math.round((progress.current / progress.total) * 100) : 0;
+
   return (
     <div className={`status-banner status-${tone}`}>
-      <div className="status-title">{title}</div>
+      <div className="status-header">
+        <div className="status-title">{title}</div>
+        {showSpinner && <span className="status-spinner" role="status" aria-live="polite" aria-label="Working" />}
+      </div>
       {body && <div className="status-body">{body}</div>}
+      {hasProgress && progress && (
+        <div className="status-progress-block">
+          <div className="status-progress">
+            <div className="status-progress-bar" style={{ width: `${percent}%` }} />
+          </div>
+          <div className="status-progress-meta">{progress.phase} {progress.current} / {progress.total}</div>
+        </div>
+      )}
     </div>
   );
 }

Keypad.Flasher.Client/src/styles/base.css

@@ -516,6 +516,16 @@ input[type="color"] {
   background: var(--info-bg);
   color: var(--info-text);
   box-shadow: var(--shadow);
+  --status-progress-track: rgba(0, 0, 0, 0.08);
+  --status-progress-start: var(--progress-start);
+  --status-progress-end: var(--progress-end);
+}
+
+.status-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .status-title {
@@ -539,22 +549,77 @@ input[type="color"] {
   word-break: break-word;
 }
 
+.status-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-right-color: currentColor;
+  animation: status-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes status-spin {
+  to { transform: rotate(360deg); }
+}
+
+.status-progress-block {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.status-progress {
+  width: 100%;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--status-progress-track);
+  overflow: hidden;
+}
+
+.status-progress-bar {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--status-progress-start), var(--status-progress-end));
+}
+
+.status-progress-meta {
+  font-size: 12px;
+  color: inherit;
+  opacity: 0.85;
+}
+
+@media (prefers-color-scheme: dark) {
+  .status-banner {
+    --status-progress-track: rgba(255, 255, 255, 0.14);
+  }
+}
+
 .status-success {
   border-color: var(--success-border);
   background: var(--success-bg);
   color: var(--success-text);
+  --status-progress-start: #0ea15a;
+  --status-progress-end: #34d399;
 }
 
 .status-warn {
   border-color: var(--warn-border);
   background: var(--warn-bg);
   color: var(--warn-text);
+  --status-progress-start: #d97706;
+  --status-progress-end: #fbbf24;
 }
 
 .status-error {
   border-color: var(--error-border);
   background: var(--error-bg);
   color: var(--error-text);
+  --status-progress-start: #dc2626;
+  --status-progress-end: #f87171;
 }
 
 .clickable {