Add persistent action status banner and fix stacked toast overlap

Stack actions (start/stop/pull/update/…) now surface a dismissible status banner on the stack detail page instead of relying on the transient top-right toast alone. Also enable toast expand mode so multiple notifications no longer collapse behind each other. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016pMmFFkdfxkoYjcEcpZTa5
2026-08-30 20:04:10 +02:00
parent d81c48a5c0
commit 9d28e12cd7
4 changed files with 80 additions and 3 deletions
@@ -0,0 +1,43 @@
+import { CheckCircle2, Loader2, X, XCircle } from "lucide-react";
+import type { StackActionStatus } from "@/hooks/useStackActions";
+
+const TONE = {
+  running: "border-sp-border bg-sp-surface-2 text-sp-text-1",
+  success: "border-sp-green/30 bg-sp-green/10 text-sp-green",
+  error: "border-red-300 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300",
+} as const;
+
+/** Persistent status line for a stack action (start/stop/pull/update/…), shown
+ *  in addition to the transient toast so the outcome doesn't disappear with it. */
+export function ActionStatusBanner({
+  status,
+  onDismiss,
+}: {
+  status: StackActionStatus;
+  onDismiss: () => void;
+}) {
+  return (
+    <div className={`flex items-center gap-2 rounded-card border px-3 py-2 text-sm ${TONE[status.phase]}`}>
+      {status.phase === "running" && (
+        <Loader2 className="h-4 w-4 shrink-0 animate-spin text-accent dark:text-accent-dark" />
+      )}
+      {status.phase === "success" && <CheckCircle2 className="h-4 w-4 shrink-0" />}
+      {status.phase === "error" && <XCircle className="h-4 w-4 shrink-0" />}
+      <span className="flex-1">
+        {status.phase === "running" && `${status.label} ${status.id}…`}
+        {status.phase === "success" && `${status.label} ${status.id} — done`}
+        {status.phase === "error" &&
+          `${status.label} ${status.id} — failed${status.message ? `: ${status.message}` : ""}`}
+      </span>
+      {status.phase !== "running" && (
+        <button
+          onClick={onDismiss}
+          className="shrink-0 opacity-60 transition-opacity hover:opacity-100"
+          aria-label="Dismiss"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}