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

feat(m5a): channel manager, tabbed settings panel, per-user sync status

Browse source 
Backend: /api/channels (list + PATCH priority/hidden + attach/detach user tags),
user-tag CRUD on /api/tags, /api/sync/my-status (per-user channel sync counts).
Frontend: feed|channels page nav (URL-synced) from the account menu; a slide-in
tabbed Settings panel (Appearance, Notifications=6b sound+duration, Sync status +
actions + admin pause/resume, Account); a channel manager with priority, hide,
per-channel user tags, sync badges and 'view in feed'. Notifications now honor the
configurable sound + auto-dismiss settings.
This commit is contained in:
npeter83 2026-06-11 20:45:48 +02:00
parent b8a8605797
commit a8822d3935
11 changed files with 1063 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,20 @@
import { useRef, useState } from "react";
import {
Home,
LayoutGrid,
List,
LogOut,
Moon,
Palette,
Search,
Settings,
Shield,
Sun,
Tv,
} from "lucide-react";
import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
import type { FeedFilters, Me } from "../lib/api";
import type { Page } from "../lib/urlState";
import SyncStatus from "./SyncStatus";
import NotificationCenter from "./NotificationCenter";
@ -72,6 +76,9 @@ export default function Header({
setFilters,
view,
setView,
page,
setPage,
onOpenSettings,
}: {
me: Me;
theme: ThemePrefs;
@ -80,6 +87,9 @@ export default function Header({
setFilters: (f: FeedFilters) => void;
view: "grid" | "list";
setView: (v: "grid" | "list") => void;
page: Page;
setPage: (p: Page) => void;
onOpenSettings: () => void;
}) {
const [menuOpen, setMenuOpen] = useState(false);
@ -90,29 +100,39 @@ export default function Header({
return (
<header className="h-14 shrink-0 border-b border-border bg-surface/80 backdrop-blur flex items-center gap-3 px-4 z-20">
<div className="text-xl font-bold tracking-tight select-none">
<button
onClick={() => setPage("feed")}
className="text-xl font-bold tracking-tight select-none"
title="Feed"
>
Sub<span className="text-accent">feed</span>
</div>
</button>
<SyncStatus />
<div className="flex-1 max-w-xl mx-auto relative">
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
<input
value={filters.q}
onChange={(e) => setFilters({ ...filters, q: e.target.value })}
placeholder="Search your subscriptions…"
className="w-full bg-card border border-border rounded-full pl-9 pr-4 py-2 text-sm outline-none focus:border-accent"
/>
</div>
{page === "feed" ? (
<div className="flex-1 max-w-xl mx-auto relative">
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
<input
value={filters.q}
onChange={(e) => setFilters({ ...filters, q: e.target.value })}
placeholder="Search your subscriptions…"
className="w-full bg-card border border-border rounded-full pl-9 pr-4 py-2 text-sm outline-none focus:border-accent"
/>
</div>
) : (
<div className="flex-1 text-center text-sm font-semibold">Channel manager</div>
)}
<div className="flex items-center gap-1">
<IconBtn
onClick={() => setView(view === "grid" ? "list" : "grid")}
title={view === "grid" ? "List view" : "Grid view"}
>
{view === "grid" ? <List className="w-5 h-5" /> : <LayoutGrid className="w-5 h-5" />}
</IconBtn>
{page === "feed" && (
<IconBtn
onClick={() => setView(view === "grid" ? "list" : "grid")}
title={view === "grid" ? "List view" : "Grid view"}
>
{view === "grid" ? <List className="w-5 h-5" /> : <LayoutGrid className="w-5 h-5" />}
</IconBtn>
)}
<IconBtn
onClick={() => setTheme({ ...theme, mode: theme.mode === "dark" ? "light" : "dark" })}
title="Toggle dark / light"
@ -134,7 +154,13 @@ export default function Header({
<NotificationCenter filters={filters} setFilters={setFilters} />
<div className="pl-1">
<AccountMenu me={me} logout={logout} />
<AccountMenu
me={me}
logout={logout}
page={page}
setPage={setPage}
onOpenSettings={onOpenSettings}
/>
</div>
</div>
</header>
@ -151,7 +177,19 @@ function Avatar({ me, className = "" }: { me: Me; className?: string }) {
);
}
function AccountMenu({ me, logout }: { me: Me; logout: () => void }) {
function AccountMenu({
me,
logout,
page,
setPage,
onOpenSettings,
}: {
me: Me;
logout: () => void;
page: Page;
setPage: (p: Page) => void;
onOpenSettings: () => void;
}) {
const [open, setOpen] = useState(false);
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@ -163,6 +201,9 @@ function AccountMenu({ me, logout }: { me: Me; logout: () => void }) {
closeTimer.current = setTimeout(() => setOpen(false), 220);
}
const itemClass =
"w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition";
return (
<div
className="relative"
@ -196,13 +237,27 @@ function AccountMenu({ me, logout }: { me: Me; logout: () => void }) {
</div>
)}
<button
onClick={logout}
className="mt-2 w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
>
<LogOut className="w-4 h-4" />
Sign out
</button>
<div className="mt-2 flex flex-col">
{page === "channels" ? (
<button onClick={() => { setPage("feed"); setOpen(false); }} className={itemClass}>
<Home className="w-4 h-4" />
Feed
</button>
) : (
<button onClick={() => { setPage("channels"); setOpen(false); }} className={itemClass}>
<Tv className="w-4 h-4" />
Channels
</button>
)}
<button onClick={() => { onOpenSettings(); setOpen(false); }} className={itemClass}>
<Settings className="w-4 h-4" />
Settings
</button>
<button onClick={logout} className={itemClass}>
<LogOut className="w-4 h-4" />
Sign out
</button>
</div>
</div>
)}
</div>