peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
siftlode/frontend/src/components/NavSidebar.tsx

231 lines
8.4 KiB
TypeScript
Raw Normal View History

fix(nav): remove backdrop div so the account popover frosts The full-screen transparent dismiss backdrop sat directly behind the popover and acted as a compositing layer, so the popover's backdrop-filter sampled it (empty) instead of the page — making the glass look fully solid. Drop the backdrop and dismiss via document mousedown/Escape listeners (like the other menus). Now backdrop-filter samples real content and the frost shows.
2026-06-16 01:54:01 +02:00
import { useEffect, useRef, useState } from "react";
fix(nav): portal account popover to body (stacking + click-through) The nav's .glass backdrop-filter makes it a containing block for fixed descendants and a stacking context, so the account popover's fixed inset-0 backdrop only covered the nav (not the viewport) and the popover sat below the main content — controls behind it stayed clickable. Portal the popover + its dismiss backdrop to <body> with fixed coords computed from the trigger rect, so it's truly top-most (z-50) and blocks clicks underneath.
2026-06-16 01:46:32 +02:00
import { createPortal } from "react-dom";
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
import { useTranslation } from "react-i18next";
import {
BarChart3,
ChevronLeft,
ChevronRight,
Home,
Info,
ListVideo,
LogOut,
Settings,
Shield,
Tv,
} from "lucide-react";
import type { Me } from "../lib/api";
import type { Page } from "../lib/urlState";
import AvatarImg from "./Avatar";
// Primary app navigation: a collapsible left rail with icon+label entries (Design C). The
// modules used to hide under the avatar dropdown; they now live here. Collapsed, it becomes
// a thin icon-only rail. Account actions sit at the bottom in a popover.
export default function NavSidebar({
me,
page,
setPage,
onOpenAbout,
}: {
me: Me;
page: Page;
setPage: (p: Page) => void;
onOpenAbout: () => void;
}) {
const { t } = useTranslation();
const [collapsed, setCollapsed] = useState<boolean>(
() => localStorage.getItem("siftlode.navCollapsed") === "1"
);
const [acctOpen, setAcctOpen] = useState(false);
fix(nav): portal account popover to body (stacking + click-through) The nav's .glass backdrop-filter makes it a containing block for fixed descendants and a stacking context, so the account popover's fixed inset-0 backdrop only covered the nav (not the viewport) and the popover sat below the main content — controls behind it stayed clickable. Portal the popover + its dismiss backdrop to <body> with fixed coords computed from the trigger rect, so it's truly top-most (z-50) and blocks clicks underneath.
2026-06-16 01:46:32 +02:00
const acctBtnRef = useRef<HTMLButtonElement | null>(null);
fix(nav): remove backdrop div so the account popover frosts The full-screen transparent dismiss backdrop sat directly behind the popover and acted as a compositing layer, so the popover's backdrop-filter sampled it (empty) instead of the page — making the glass look fully solid. Drop the backdrop and dismiss via document mousedown/Escape listeners (like the other menus). Now backdrop-filter samples real content and the frost shows.
2026-06-16 01:54:01 +02:00
const acctPanelRef = useRef<HTMLDivElement | null>(null);
fix(nav): portal account popover to body (stacking + click-through) The nav's .glass backdrop-filter makes it a containing block for fixed descendants and a stacking context, so the account popover's fixed inset-0 backdrop only covered the nav (not the viewport) and the popover sat below the main content — controls behind it stayed clickable. Portal the popover + its dismiss backdrop to <body> with fixed coords computed from the trigger rect, so it's truly top-most (z-50) and blocks clicks underneath.
2026-06-16 01:46:32 +02:00
// Popover position (fixed, viewport coords). It's portaled to <body> so it escapes the
// nav's backdrop-filter, which would otherwise trap fixed positioning + stacking and let
// clicks fall through to the controls behind it.
const [acctPos, setAcctPos] = useState<{ left: number; bottom: number }>({ left: 0, bottom: 0 });
function toggleAccount() {
if (!acctOpen) {
const r = acctBtnRef.current?.getBoundingClientRect();
if (r) setAcctPos({ left: r.right + 8, bottom: window.innerHeight - r.bottom });
}
setAcctOpen((o) => !o);
}
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
fix(nav): remove backdrop div so the account popover frosts The full-screen transparent dismiss backdrop sat directly behind the popover and acted as a compositing layer, so the popover's backdrop-filter sampled it (empty) instead of the page — making the glass look fully solid. Drop the backdrop and dismiss via document mousedown/Escape listeners (like the other menus). Now backdrop-filter samples real content and the frost shows.
2026-06-16 01:54:01 +02:00
// Dismiss on outside click / Escape via document listeners — NOT a full-screen backdrop
// div, which (sitting between the popover and the page) would break the popover's
// backdrop-filter and make it look solid.
useEffect(() => {
if (!acctOpen) return;
function onDoc(e: MouseEvent) {
const t = e.target as Node;
if (acctPanelRef.current?.contains(t) || acctBtnRef.current?.contains(t)) return;
setAcctOpen(false);
}
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") setAcctOpen(false);
}
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDoc);
document.removeEventListener("keydown", onKey);
};
}, [acctOpen]);
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
function toggleCollapsed() {
setCollapsed((c) => {
const next = !c;
localStorage.setItem("siftlode.navCollapsed", next ? "1" : "0");
return next;
});
}
async function logout() {
await fetch("/auth/logout", { method: "POST", credentials: "include" });
location.reload();
}
const items: { page: Page; icon: typeof Home; label: string }[] = [
{ page: "feed", icon: Home, label: t("header.account.feed") },
{ page: "channels", icon: Tv, label: t("header.account.channels") },
{ page: "playlists", icon: ListVideo, label: t("header.account.playlists") },
];
if (me.role === "admin")
items.push({ page: "stats", icon: BarChart3, label: t("header.account.stats") });
const rowBase =
"w-full flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition";
const name = me.display_name ?? me.email.split("@")[0];
return (
<nav
feat(ui): glassmorphism phase 1 — frost the app chrome Apply the real frosted .glass surface (blur) to the few large chrome surfaces — the nav sidebar, the header and all Modal-based dialogs (was glass-card / plain surfaces) — and enrich the ambient backdrop a touch (three soft accent pools) so the glass has more to refract app-wide. Popovers (notifications, language, account, add-to-playlist) were already glass. Bulk feed cards stay glass-card (no per-card blur) for performance; the existing perf-mode still disables blur. Phase 2 (ambient thumbnail mosaic / bg image + toggle) deferred to end-of-project polish.
2026-06-16 01:11:50 +02:00
className={`glass relative shrink-0 border-r border-border flex flex-col py-3 transition-[width] ${
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
collapsed ? "w-[56px] px-2" : "w-52 px-3"
}`}
aria-label={t("nav.primary")}
>
<div className={`flex items-center mb-3 ${collapsed ? "justify-center" : "justify-between"}`}>
{!collapsed && (
<button
onClick={() => setPage("feed")}
className="text-lg font-bold tracking-tight select-none"
title={t("header.feed")}
>
Sift<span className="text-accent">lode</span>
</button>
)}
<button
onClick={toggleCollapsed}
title={collapsed ? t("nav.expand") : t("nav.collapse")}
aria-label={collapsed ? t("nav.expand") : t("nav.collapse")}
className="p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
>
{collapsed ? (
<ChevronRight className="w-4 h-4" />
) : (
<ChevronLeft className="w-4 h-4" />
)}
</button>
</div>
<div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-1">
{items.map(({ page: p, icon: Icon, label }) => (
<button
key={p}
onClick={() => setPage(p)}
title={collapsed ? label : undefined}
aria-current={page === p ? "page" : undefined}
className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} ${
page === p
? "bg-accent text-accent-fg"
: "text-muted hover:text-fg hover:bg-card"
}`}
>
<Icon className="w-[18px] h-[18px] shrink-0" />
{!collapsed && <span className="truncate">{label}</span>}
</button>
))}
</div>
<div className="mt-2 pt-2 border-t border-border flex flex-col gap-1">
<button
feat(nav): Settings as a page module (Design B) Move Settings out of the right-side overlay into a left-nav page (page='settings'), so it opens where you're already looking — no cross-screen mouse travel. The Settings rail item now sets the page (with active highlight) instead of opening a dialog; the panel is refactored to an in-flow .glass card (keeps the frosted look over the ambient backdrop), with the page title shown in the header. Removed the overlay + Esc/backdrop close path.
2026-06-16 01:05:05 +02:00
onClick={() => setPage("settings")}
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
title={collapsed ? t("header.account.settings") : undefined}
feat(nav): Settings as a page module (Design B) Move Settings out of the right-side overlay into a left-nav page (page='settings'), so it opens where you're already looking — no cross-screen mouse travel. The Settings rail item now sets the page (with active highlight) instead of opening a dialog; the panel is refactored to an in-flow .glass card (keeps the frosted look over the ambient backdrop), with the page title shown in the header. Removed the overlay + Esc/backdrop close path.
2026-06-16 01:05:05 +02:00
aria-current={page === "settings" ? "page" : undefined}
className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} ${
page === "settings"
? "bg-accent text-accent-fg"
: "text-muted hover:text-fg hover:bg-card"
}`}
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
>
<Settings className="w-[18px] h-[18px] shrink-0" />
{!collapsed && <span className="truncate">{t("header.account.settings")}</span>}
</button>
<div className="relative">
<button
fix(nav): portal account popover to body (stacking + click-through) The nav's .glass backdrop-filter makes it a containing block for fixed descendants and a stacking context, so the account popover's fixed inset-0 backdrop only covered the nav (not the viewport) and the popover sat below the main content — controls behind it stayed clickable. Portal the popover + its dismiss backdrop to <body> with fixed coords computed from the trigger rect, so it's truly top-most (z-50) and blocks clicks underneath.
2026-06-16 01:46:32 +02:00
ref={acctBtnRef}
onClick={toggleAccount}
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
title={collapsed ? name : undefined}
className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} text-muted hover:text-fg hover:bg-card`}
>
<AvatarImg
src={me.avatar_url}
fallback={name}
className="w-[22px] h-[22px] rounded-full text-[10px] shrink-0"
/>
{!collapsed && <span className="truncate flex-1 text-left">{name}</span>}
</button>
fix(nav): portal account popover to body (stacking + click-through) The nav's .glass backdrop-filter makes it a containing block for fixed descendants and a stacking context, so the account popover's fixed inset-0 backdrop only covered the nav (not the viewport) and the popover sat below the main content — controls behind it stayed clickable. Portal the popover + its dismiss backdrop to <body> with fixed coords computed from the trigger rect, so it's truly top-most (z-50) and blocks clicks underneath.
2026-06-16 01:46:32 +02:00
{acctOpen &&
createPortal(
fix(nav): remove backdrop div so the account popover frosts The full-screen transparent dismiss backdrop sat directly behind the popover and acted as a compositing layer, so the popover's backdrop-filter sampled it (empty) instead of the page — making the glass look fully solid. Drop the backdrop and dismiss via document mousedown/Escape listeners (like the other menus). Now backdrop-filter samples real content and the frost shows.
2026-06-16 01:54:01 +02:00
<div
ref={acctPanelRef}
style={{ position: "fixed", left: acctPos.left, bottom: acctPos.bottom }}
className="glass w-60 rounded-xl p-3 z-50 animate-[popIn_0.16s_ease]"
>
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
<div className="flex items-center gap-3 pb-3 border-b border-border">
<AvatarImg
src={me.avatar_url}
fallback={name}
className="w-10 h-10 rounded-full text-sm shrink-0"
/>
<div className="min-w-0">
<div className="text-sm font-semibold truncate">{name}</div>
<div className="text-xs text-muted truncate">{me.email}</div>
</div>
</div>
{me.role === "admin" && (
<div className="flex items-center gap-1.5 mt-2 text-[11px] font-medium text-accent">
<Shield className="w-3.5 h-3.5" />
{t("header.account.admin")}
</div>
)}
<div className="mt-2 flex flex-col">
<button
onClick={() => {
onOpenAbout();
setAcctOpen(false);
}}
className="w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
>
<Info className="w-4 h-4" />
{t("header.account.about")}
</button>
<button
onClick={logout}
className="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" />
{t("header.account.signOut")}
</button>
</div>
fix(nav): remove backdrop div so the account popover frosts The full-screen transparent dismiss backdrop sat directly behind the popover and acted as a compositing layer, so the popover's backdrop-filter sampled it (empty) instead of the page — making the glass look fully solid. Drop the backdrop and dismiss via document mousedown/Escape listeners (like the other menus). Now backdrop-filter samples real content and the frost shows.
2026-06-16 01:54:01 +02:00
</div>,
fix(nav): portal account popover to body (stacking + click-through) The nav's .glass backdrop-filter makes it a containing block for fixed descendants and a stacking context, so the account popover's fixed inset-0 backdrop only covered the nav (not the viewport) and the popover sat below the main content — controls behind it stayed clickable. Portal the popover + its dismiss backdrop to <body> with fixed coords computed from the trigger rect, so it's truly top-most (z-50) and blocks clicks underneath.
2026-06-16 01:46:32 +02:00
document.body
)}
feat(nav): N1 — collapsible left nav sidebar (Design C) Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a persistent left sidebar with icon+label entries; collapses to a thin icon rail (persisted in localStorage). Account actions (About, Sign out, admin badge) move to a popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top bar (sync status, feed scope + search or page title, language, notifications) — logo and account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.
2026-06-16 00:42:23 +02:00
</div>
</div>
</nav>
);
}
Reference in a new issue Copy permalink