Merge improvement/demo-banner: permanent demo banner instead of toast

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" && (

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>
+  );
+}