From 848fdd386f4eb5e192d46915259ab9d2a8d1ed5f Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 16 Jun 2026 10:12:10 +0200
Subject: [PATCH] improvement(demo): permanent banner instead of a re-popping
 toast

The shared-account warning was a requiresInteraction toast that re-fired
on every reload. Replace it with a permanent, non-dismissible banner (like
the version banner) shown above the content while in the demo account.
---
 frontend/src/App.tsx                   | 11 ++++-------
 frontend/src/components/DemoBanner.tsx | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/DemoBanner.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5658722..688a049 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -34,6 +34,7 @@ import Toaster from "./components/Toaster";
 import About from "./components/About";
 import ReleaseNotes from "./components/ReleaseNotes";
 import VersionBanner from "./components/VersionBanner";
+import DemoBanner from "./components/DemoBanner";
 import { CURRENT_VERSION } from "./lib/releaseNotes";
 
 const DEFAULT_FILTERS: FeedFilters = {
@@ -190,15 +191,10 @@ export default function App() {
       });
     }
     // The demo account is shared: there are no subscriptions, so default it to the whole
-    // library (the "my" feed would be empty), and warn that its state is communal.
+    // library (the "my" feed would be empty). The communal-state warning is a permanent
+    // banner (see DemoBanner below), not a toast that re-pops on every reload.
     if (meQuery.data?.is_demo) {
       setFilters({ ...loadStoredFilters(), scope: "all" });
-      notify({
-        level: "warning",
-        title: t("common.demoTitle"),
-        message: t("common.demoSharedNotice"),
-        requiresInteraction: true,
-      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [meQuery.data?.id]);
@@ -250,6 +246,7 @@ export default function App() {
             setPage("channels");
           }}
         />
+        {meQuery.data!.is_demo && <DemoBanner />}
         <VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
         <div className="flex flex-1 min-h-0">
           {page === "feed" && (
diff --git a/frontend/src/components/DemoBanner.tsx b/frontend/src/components/DemoBanner.tsx
new file mode 100644
index 0000000..2fe59bd
--- /dev/null
+++ b/frontend/src/components/DemoBanner.tsx
@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next";
+import { AlertTriangle } from "lucide-react";
+
+// 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>
+  );
+}