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.
This commit is contained in:
npeter83
parent
7b1fc02c68
commit
d30dc7f760
5 changed files with 71 additions and 102 deletions
|
|
@ -57,7 +57,13 @@ function loadInitialPage(): Page {
|
|||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.has("page")) return readPage();
|
||||
const stored = localStorage.getItem(PAGE_KEY);
|
||||
if (stored === "channels" || stored === "stats" || stored === "playlists") return stored;
|
||||
if (
|
||||
stored === "channels" ||
|
||||
stored === "stats" ||
|
||||
stored === "playlists" ||
|
||||
stored === "settings"
|
||||
)
|
||||
return stored;
|
||||
return "feed";
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +89,6 @@ export default function App() {
|
|||
const [view, setView] = useState<"grid" | "list">("grid");
|
||||
const [sidebarLayout, setSidebarLayoutState] = useState<SidebarLayout>(loadLayout);
|
||||
const [page, setPageState] = useState<Page>(loadInitialPage);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [wizardOpen, setWizardOpen] = useState(false);
|
||||
const [channelFilter, setChannelFilter] = useState<ChannelStatusFilter>("all");
|
||||
const [aboutOpen, setAboutOpen] = useState(false);
|
||||
|
|
@ -198,7 +203,6 @@ export default function App() {
|
|||
me={meQuery.data!}
|
||||
page={page}
|
||||
setPage={setPage}
|
||||
onOpenSettings={() => setSettingsOpen(true)}
|
||||
onOpenAbout={() => setAboutOpen(true)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0 flex flex-col">
|
||||
|
|
@ -239,6 +243,15 @@ export default function App() {
|
|||
<Stats />
|
||||
) : page === "playlists" ? (
|
||||
<Playlists canWrite={meQuery.data!.can_write} />
|
||||
) : page === "settings" ? (
|
||||
<SettingsPanel
|
||||
me={meQuery.data!}
|
||||
theme={theme}
|
||||
setTheme={setTheme}
|
||||
view={view}
|
||||
setView={changeView}
|
||||
onOpenWizard={() => setWizardOpen(true)}
|
||||
/>
|
||||
) : (
|
||||
<Feed
|
||||
filters={filters}
|
||||
|
|
@ -251,20 +264,6 @@ export default function App() {
|
|||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{settingsOpen && (
|
||||
<SettingsPanel
|
||||
me={meQuery.data!}
|
||||
theme={theme}
|
||||
setTheme={setTheme}
|
||||
view={view}
|
||||
setView={changeView}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
onOpenWizard={() => {
|
||||
setSettingsOpen(false);
|
||||
setWizardOpen(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{wizardOpen && meQuery.data && (
|
||||
<OnboardingWizard me={meQuery.data} onClose={() => setWizardOpen(false)} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,8 @@ export default function Header({
|
|||
? t("header.usageStats")
|
||||
: page === "playlists"
|
||||
? t("header.account.playlists")
|
||||
: page === "settings"
|
||||
? t("settings.title")
|
||||
: t("header.channelManager")}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -23,13 +23,11 @@ export default function NavSidebar({
|
|||
me,
|
||||
page,
|
||||
setPage,
|
||||
onOpenSettings,
|
||||
onOpenAbout,
|
||||
}: {
|
||||
me: Me;
|
||||
page: Page;
|
||||
setPage: (p: Page) => void;
|
||||
onOpenSettings: () => void;
|
||||
onOpenAbout: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -115,9 +113,14 @@ export default function NavSidebar({
|
|||
|
||||
<div className="mt-2 pt-2 border-t border-border flex flex-col gap-1">
|
||||
<button
|
||||
onClick={onOpenSettings}
|
||||
onClick={() => setPage("settings")}
|
||||
title={collapsed ? t("header.account.settings") : undefined}
|
||||
className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} text-muted hover:text-fg hover:bg-card`}
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<Settings className="w-[18px] h-[18px] shrink-0" />
|
||||
{!collapsed && <span className="truncate">{t("header.account.settings")}</span>}
|
||||
|
|
|
|||
|
|
@ -23,13 +23,15 @@ const TABS: { id: TabId; icon: typeof Monitor }[] = [
|
|||
{ id: "account", icon: User },
|
||||
];
|
||||
|
||||
// Settings as a page (Design B): rendered in the main content area, not an overlay. It keeps
|
||||
// the frosted `.glass` surface so it still refracts the ambient backdrop. The page title is
|
||||
// shown by the Header; the tab rail stays as in-page sub-navigation.
|
||||
export default function SettingsPanel({
|
||||
me,
|
||||
theme,
|
||||
setTheme,
|
||||
view,
|
||||
setView,
|
||||
onClose,
|
||||
onOpenWizard,
|
||||
}: {
|
||||
me: Me;
|
||||
|
|
@ -37,52 +39,14 @@ export default function SettingsPanel({
|
|||
setTheme: (t: ThemePrefs) => void;
|
||||
view: "grid" | "list";
|
||||
setView: (v: "grid" | "list") => void;
|
||||
onClose: () => void;
|
||||
onOpenWizard: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [tab, setTab] = useState<TabId>("appearance");
|
||||
const [closing, setClosing] = useState(false);
|
||||
|
||||
const close = useCallback(() => {
|
||||
setClosing(true);
|
||||
setTimeout(onClose, 190);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") close();
|
||||
}
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [close]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-40 flex justify-end">
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/50 ${
|
||||
closing ? "animate-[overlayOut_0.19s_ease_forwards]" : "animate-[overlayIn_0.2s_ease]"
|
||||
}`}
|
||||
onClick={close}
|
||||
/>
|
||||
<div
|
||||
className={`glass relative self-start m-3 w-[min(94vw,520px)] max-h-[calc(100vh-1.5rem)] rounded-2xl overflow-hidden flex flex-col ${
|
||||
closing
|
||||
? "animate-[panelOut_0.19s_ease-in_forwards]"
|
||||
: "animate-[panelIn_0.26s_cubic-bezier(0.22,1,0.36,1)]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-4 h-14 border-b border-border/60 shrink-0">
|
||||
<div className="text-base font-semibold">{t("settings.title")}</div>
|
||||
<button
|
||||
onClick={close}
|
||||
className="p-2 rounded-lg text-muted hover:text-fg hover:bg-card/60 transition"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 min-h-0">
|
||||
<div className="p-4 max-w-3xl w-full mx-auto">
|
||||
<div className="glass rounded-2xl overflow-hidden flex">
|
||||
{/* Vertical tab rail — never wraps; active is a clear accent pill. */}
|
||||
<nav className="w-32 sm:w-36 shrink-0 border-r border-border/60 p-2 flex flex-col gap-1">
|
||||
{TABS.map((tabItem) => {
|
||||
|
|
@ -106,7 +70,7 @@ export default function SettingsPanel({
|
|||
|
||||
{/* All tabs stacked in one grid cell so the panel sizes to the tallest tab
|
||||
(stable height, no jump on switch); the active one is shown on top. */}
|
||||
<div className="grid flex-1 overflow-y-auto">
|
||||
<div className="grid flex-1 min-w-0">
|
||||
{TABS.map((tabItem) => (
|
||||
<div
|
||||
key={tabItem.id}
|
||||
|
|
@ -125,7 +89,6 @@ export default function SettingsPanel({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,11 +78,13 @@ export function hasFilterParams(params: URLSearchParams): boolean {
|
|||
return KEYS.some((k) => params.has(k));
|
||||
}
|
||||
|
||||
export type Page = "feed" | "channels" | "stats" | "playlists";
|
||||
export type Page = "feed" | "channels" | "stats" | "playlists" | "settings";
|
||||
|
||||
export function readPage(): Page {
|
||||
const p = new URLSearchParams(window.location.search).get("page");
|
||||
return p === "channels" || p === "stats" || p === "playlists" ? p : "feed";
|
||||
return p === "channels" || p === "stats" || p === "playlists" || p === "settings"
|
||||
? p
|
||||
: "feed";
|
||||
}
|
||||
|
||||
/** Build a shareable absolute URL that reproduces the current filters (+ page). Used by the
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue