peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(nav): group rail modules + move chrome controls into the sidebar

Browse source 
- Split the rail into a content group (Feed/Channels/Playlists) and an admin
  group (Stats/Scheduler) separated by a divider (system group hidden for non-admins).
- Move the language switcher, About and notification bell out of the top header
  into an icon cluster above Settings (horizontal expanded, vertical collapsed).
  Their popovers portal to <body> and anchor right + above the button, escaping the
  nav's backdrop-filter. About is removed from the account popover (now in the cluster).
- LanguageSwitcher/NotificationCenter gain a 'rail' variant for the above.
- Also relocate the Toaster mount into the (now relative) content column.
This commit is contained in:
npeter83 2026-06-17 14:28:29 +02:00
parent dfaa1551dc
commit df0ca24a23
5 changed files with 194 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/Header.tsx
View file

@ -2,10 +2,7 @@ import { useTranslation } from "react-i18next";
import { Library, Search, User } from "lucide-react";
import type { FeedFilters, Me } from "../lib/api";
import type { Page } from "../lib/urlState";
import { type LangCode } from "../i18n";
import SyncStatus from "./SyncStatus";
import NotificationCenter from "./NotificationCenter";
import LanguageSwitcher from "./LanguageSwitcher";
// Contextual top bar. Primary navigation + account now live in the left NavSidebar; the
// header carries the global sync status, the feed's scope toggle + search (or the current
@ -15,17 +12,15 @@ export default function Header({
filters,
setFilters,
page,
onChangeLanguage,
onGoToFullHistory,
}: {
me: Me;
filters: FeedFilters;
setFilters: (f: FeedFilters) => void;
page: Page;
onChangeLanguage: (code: LangCode) => void;
onGoToFullHistory: () => void;
}) {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
return (
<header className="glass h-14 shrink-0 border-b border-border flex items-center gap-3 px-4 z-20">
@ -83,11 +78,6 @@ export default function Header({
: t("header.channelManager")}
</div>
)}
<div className="flex items-center gap-1">
<LanguageSwitcher value={i18n.language as LangCode} onChange={onChangeLanguage} />
<NotificationCenter filters={filters} setFilters={setFilters} />
</div>
</header>
);
}