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

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