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.
This commit is contained in:
parent
94e031aa02
commit
66049d9eca
2 changed files with 21 additions and 7 deletions
|
|
@ -34,6 +34,7 @@ import Toaster from "./components/Toaster";
|
||||||
import About from "./components/About";
|
import About from "./components/About";
|
||||||
import ReleaseNotes from "./components/ReleaseNotes";
|
import ReleaseNotes from "./components/ReleaseNotes";
|
||||||
import VersionBanner from "./components/VersionBanner";
|
import VersionBanner from "./components/VersionBanner";
|
||||||
|
import DemoBanner from "./components/DemoBanner";
|
||||||
import { CURRENT_VERSION } from "./lib/releaseNotes";
|
import { CURRENT_VERSION } from "./lib/releaseNotes";
|
||||||
|
|
||||||
const DEFAULT_FILTERS: FeedFilters = {
|
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
|
// 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) {
|
if (meQuery.data?.is_demo) {
|
||||||
setFilters({ ...loadStoredFilters(), scope: "all" });
|
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
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [meQuery.data?.id]);
|
}, [meQuery.data?.id]);
|
||||||
|
|
@ -250,6 +246,7 @@ export default function App() {
|
||||||
setPage("channels");
|
setPage("channels");
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
{meQuery.data!.is_demo && <DemoBanner />}
|
||||||
<VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
|
<VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
|
||||||
<div className="flex flex-1 min-h-0">
|
<div className="flex flex-1 min-h-0">
|
||||||
{page === "feed" && (
|
{page === "feed" && (
|
||||||
|
|
|
||||||
17
frontend/src/components/DemoBanner.tsx
Normal file
17
frontend/src/components/DemoBanner.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue