From 8de1d801c42dbd75740473e09c324c4561ace6d6 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 19 Jun 2026 11:18:20 +0200
Subject: [PATCH] refactor(banner): extract reusable Banner base for
 VersionBanner + DemoBanner

Both top-of-app bars shared the same shell (icon + content + border-b bar);
factor it into a tone-driven Banner with optional action/dismiss. The
version/demo logic stays in the wrappers. Leaves a clean extension point for
a future news-ticker variant.
---
 frontend/src/components/Banner.tsx        | 53 +++++++++++++++++++++++
 frontend/src/components/DemoBanner.tsx    | 12 +++--
 frontend/src/components/VersionBanner.tsx | 34 +++++++--------
 3 files changed, 73 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/Banner.tsx

diff --git a/frontend/src/components/Banner.tsx b/frontend/src/components/Banner.tsx
new file mode 100644
index 0000000..d789078
--- /dev/null
+++ b/frontend/src/components/Banner.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { X } from "lucide-react";
+
+type BannerTone = "accent" | "warning";
+
+const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> = {
+  accent: { bar: "bg-accent/15 border-accent/30", icon: "text-accent", action: "bg-accent text-accent-fg" },
+  warning: { bar: "bg-amber-500/15 border-amber-500/30", icon: "text-amber-500", action: "bg-amber-500 text-black" },
+};
+
+// Shared top-of-app notification bar. VersionBanner and DemoBanner are thin wrappers over this;
+// a future news-ticker variant can build on the same shell (rotating content as children).
+export default function Banner({
+  tone,
+  icon: Icon,
+  children,
+  action,
+  onDismiss,
+  dismissTitle,
+}: {
+  tone: BannerTone;
+  icon: LucideIcon;
+  children: ReactNode;
+  action?: { label: string; onClick: () => void };
+  onDismiss?: () => void;
+  dismissTitle?: string;
+}) {
+  const c = TONES[tone];
+  return (
+    <div className={`shrink-0 flex items-center gap-2 px-4 py-2 text-sm border-b text-fg ${c.bar}`}>
+      <Icon className={`w-4 h-4 shrink-0 ${c.icon}`} />
+      <span className="min-w-0">{children}</span>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className={`ml-1 px-2.5 py-1 rounded-lg font-semibold hover:opacity-90 transition ${c.action}`}
+        >
+          {action.label}
+        </button>
+      )}
+      {onDismiss && (
+        <button
+          onClick={onDismiss}
+          title={dismissTitle}
+          className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/DemoBanner.tsx b/frontend/src/components/DemoBanner.tsx
index 2fe59bd..d9b6cb9 100644
--- a/frontend/src/components/DemoBanner.tsx
+++ b/frontend/src/components/DemoBanner.tsx
@@ -1,17 +1,15 @@
 import { useTranslation } from "react-i18next";
 import { AlertTriangle } from "lucide-react";
+import Banner from "./Banner";
 
 // Permanent, non-dismissible bar shown to the shared demo account so it's always clear the
 // state is communal. (Replaces the old login-time toast, which re-popped on every reload.)
 export default function DemoBanner() {
   const { t } = useTranslation();
   return (
-    <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-amber-500/15 border-b border-amber-500/30 text-fg">
-      <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
-      <span className="min-w-0">
-        <span className="font-semibold">{t("common.demoTitle")}</span>
-        <span className="text-muted"> — {t("common.demoSharedNotice")}</span>
-      </span>
-    </div>
+    <Banner tone="warning" icon={AlertTriangle}>
+      <span className="font-semibold">{t("common.demoTitle")}</span>
+      <span className="text-muted"> — {t("common.demoSharedNotice")}</span>
+    </Banner>
   );
 }
diff --git a/frontend/src/components/VersionBanner.tsx b/frontend/src/components/VersionBanner.tsx
index 720854e..d486bb6 100644
--- a/frontend/src/components/VersionBanner.tsx
+++ b/frontend/src/components/VersionBanner.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Sparkles, X } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";
+import Banner from "./Banner";
 
 // Eye-catching, dismissible bar shown once after the running build's version changes
 // (compares the baked frontend version to the last one the user acknowledged).
@@ -19,25 +20,20 @@ export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
   }
 
   return (
-    <div className="shrink-0 flex items-center gap-2 px-4 py-2 text-sm bg-accent/15 border-b border-accent/30 text-fg">
-      <Sparkles className="w-4 h-4 text-accent shrink-0" />
-      <span className="min-w-0">{t("header.banner.updated", { version: FRONTEND_VERSION })}</span>
-      <button
-        onClick={() => {
+    <Banner
+      tone="accent"
+      icon={Sparkles}
+      action={{
+        label: t("header.banner.releaseNotes"),
+        onClick: () => {
           onOpen();
           markSeen();
-        }}
-        className="ml-1 px-2.5 py-1 rounded-lg font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
-      >
-        {t("header.banner.releaseNotes")}
-      </button>
-      <button
-        onClick={markSeen}
-        title={t("header.banner.dismiss")}
-        className="ml-auto p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
-      >
-        <X className="w-4 h-4" />
-      </button>
-    </div>
+        },
+      }}
+      onDismiss={markSeen}
+      dismissTitle={t("header.banner.dismiss")}
+    >
+      {t("header.banner.updated", { version: FRONTEND_VERSION })}
+    </Banner>
   );
 }