mokhtar
f7f4c8be09
the shell grid grew past the viewport and scrolled the document, carrying the sidebar with it. the shell is now viewport-height at the wide breakpoint with main as the sole scroll container; the nav list scrolls inside the pinned rail; router scroll restoration targets the inner scroller so navigation resets it and back/forward restores it.
355 lines
9.4 KiB
TypeScript
355 lines
9.4 KiB
TypeScript
import { useId, useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { Link, Outlet, useNavigate } from "@tanstack/react-router";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { useAuth } from "@/auth/store";
|
|
import InlineError from "@/lib/InlineError";
|
|
import { healthQuery, versionQuery } from "@/lib/queries";
|
|
import PauseControl from "@/features/pause/PauseControl";
|
|
import { diagnosticsBadge } from "./diagnosticsBadge";
|
|
import ConfigStatusNotices from "./ConfigStatusNotices";
|
|
import AuthorityLine from "@/features/configuration/AuthorityLine";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
/** The one breakpoint the shell has: below it the sidebar becomes a drawer. */
|
|
const WIDE = "@media (min-width: 768px)";
|
|
const DARK = "@media (prefers-color-scheme: dark)";
|
|
|
|
/**
|
|
* The four operational surfaces, then the configuration group. Configuration
|
|
* is a labelled group rather than a collapsible tree: three items do not earn
|
|
* a disclosure, and a tree would hide the authority line under it.
|
|
*/
|
|
const NAV_ITEMS = [
|
|
{ to: "/overview", label: "Overview" },
|
|
{ to: "/activity", label: "Activity" },
|
|
{ to: "/clients", label: "Clients" },
|
|
{ to: "/diagnostics", label: "Diagnostics" },
|
|
] as const;
|
|
|
|
const CONFIGURATION_ITEMS = [
|
|
{ to: "/configuration/protection", label: "Protection" },
|
|
{ to: "/configuration/resolution", label: "Resolution" },
|
|
{ to: "/configuration/system", label: "System" },
|
|
] as const;
|
|
|
|
const styles = stylex.create({
|
|
navList: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "0.25rem",
|
|
},
|
|
navLink: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
borderRadius: "0.25rem",
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.375rem",
|
|
textDecorationLine: "none",
|
|
},
|
|
navLabel: {
|
|
flex: 1,
|
|
},
|
|
navGroup: {
|
|
marginTop: "1rem",
|
|
},
|
|
navGroupLabel: {
|
|
paddingInline: "0.75rem",
|
|
paddingBlock: "0.25rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
fontWeight: 600,
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em",
|
|
color: colors.textMuted,
|
|
},
|
|
/**
|
|
* Neutral chrome: the mark is the message, and a coloured pill here would be
|
|
* the page's loudest element on every route. Text and shape carry it.
|
|
*/
|
|
badge: {
|
|
minWidth: "1.25rem",
|
|
borderRadius: "0.625rem",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.borderStrong,
|
|
backgroundColor: colors.surfaceHover,
|
|
paddingInline: "0.375rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1.125rem",
|
|
fontWeight: 500,
|
|
textAlign: "center",
|
|
color: colors.textSecondary,
|
|
},
|
|
/** The control sits with the footer, not in the scrolling nav list above it. */
|
|
sidebarFooter: {
|
|
paddingInline: "1rem",
|
|
paddingTop: "0.75rem",
|
|
},
|
|
/** The current page reads as a filled chip, heavier than the hover fill. */
|
|
navActive: {
|
|
backgroundColor: { default: "oklch(92% 0.004 286.32)", [DARK]: "oklch(27.4% 0.006 286.033)" },
|
|
color: colors.text,
|
|
fontWeight: 500,
|
|
},
|
|
navIdle: {
|
|
backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
|
|
color: { default: colors.textSecondary, ":hover": colors.text },
|
|
},
|
|
versionFooter: {
|
|
paddingInline: "1rem",
|
|
paddingBlock: "0.75rem",
|
|
fontSize: "0.75rem",
|
|
lineHeight: "1rem",
|
|
color: colors.textMuted,
|
|
},
|
|
logoutRow: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
},
|
|
shell: {
|
|
minHeight: "100dvh",
|
|
height: { default: null, [WIDE]: "100dvh" },
|
|
overflow: { default: null, [WIDE]: "hidden" },
|
|
backgroundColor: colors.surface,
|
|
color: colors.text,
|
|
display: { default: "block", [WIDE]: "grid" },
|
|
gridTemplateColumns: { default: null, [WIDE]: "14rem 1fr" },
|
|
},
|
|
sidebar: {
|
|
display: { default: "none", [WIDE]: "flex" },
|
|
flexDirection: { default: null, [WIDE]: "column" },
|
|
minHeight: { default: null, [WIDE]: 0 },
|
|
overflow: { default: null, [WIDE]: "hidden" },
|
|
borderRightWidth: 1,
|
|
borderRightStyle: "solid",
|
|
borderRightColor: colors.border,
|
|
},
|
|
brand: {
|
|
paddingInline: "1rem",
|
|
paddingBlock: "1rem",
|
|
fontSize: "1.125rem",
|
|
lineHeight: "1.75rem",
|
|
fontWeight: 600,
|
|
},
|
|
sidebarNav: {
|
|
flex: 1,
|
|
minHeight: { default: null, [WIDE]: 0 },
|
|
overflowY: { default: null, [WIDE]: "auto" },
|
|
paddingInline: "0.5rem",
|
|
},
|
|
column: {
|
|
display: "flex",
|
|
minHeight: { default: "100dvh", [WIDE]: 0 },
|
|
minWidth: { default: null, [WIDE]: 0 },
|
|
flexDirection: "column",
|
|
},
|
|
header: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
borderBottomWidth: 1,
|
|
borderBottomStyle: "solid",
|
|
borderBottomColor: colors.border,
|
|
paddingInline: "1rem",
|
|
paddingBlock: "0.5rem",
|
|
},
|
|
narrowOnly: {
|
|
display: { default: null, [WIDE]: "none" },
|
|
},
|
|
narrowBrand: {
|
|
fontSize: "1.125rem",
|
|
lineHeight: "1.75rem",
|
|
fontWeight: 600,
|
|
display: { default: null, [WIDE]: "none" },
|
|
},
|
|
headerRight: {
|
|
marginLeft: "auto",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
},
|
|
drawer: {
|
|
borderBottomWidth: 1,
|
|
borderBottomStyle: "solid",
|
|
borderBottomColor: colors.border,
|
|
display: { default: null, [WIDE]: "none" },
|
|
},
|
|
drawerNav: {
|
|
paddingInline: "0.5rem",
|
|
paddingBlock: "0.5rem",
|
|
},
|
|
main: {
|
|
flex: 1,
|
|
minHeight: { default: null, [WIDE]: 0 },
|
|
minWidth: { default: null, [WIDE]: 0 },
|
|
overflowY: { default: null, [WIDE]: "auto" },
|
|
padding: "1rem",
|
|
},
|
|
});
|
|
|
|
function NavItem({
|
|
to,
|
|
label,
|
|
onNavigate,
|
|
badge,
|
|
}: {
|
|
to: string;
|
|
label: string;
|
|
onNavigate?: () => void;
|
|
badge?: { text: string; label: string } | null;
|
|
}) {
|
|
return (
|
|
<li>
|
|
<Link
|
|
to={to}
|
|
onClick={onNavigate}
|
|
activeProps={{
|
|
"aria-current": "page",
|
|
className: stylex.props(styles.navActive).className,
|
|
}}
|
|
inactiveProps={{ className: stylex.props(styles.navIdle).className }}
|
|
{...stylex.props(styles.navLink, shared.focusRing)}
|
|
>
|
|
<span {...stylex.props(styles.navLabel)}>{label}</span>
|
|
{badge !== undefined && badge !== null && (
|
|
<span aria-label={badge.label} {...stylex.props(styles.badge)}>
|
|
{badge.text}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
|
const health = useQuery(healthQuery());
|
|
const badge = diagnosticsBadge(health.data, health.isError);
|
|
const groupHeadingId = useId();
|
|
return (
|
|
<>
|
|
<ul {...stylex.props(styles.navList)}>
|
|
{NAV_ITEMS.map((item) => (
|
|
<NavItem
|
|
key={item.to}
|
|
to={item.to}
|
|
label={item.label}
|
|
onNavigate={onNavigate}
|
|
badge={item.to === "/diagnostics" ? badge : undefined}
|
|
/>
|
|
))}
|
|
</ul>
|
|
<div {...stylex.props(styles.navGroup)}>
|
|
{/* A span, not a heading: the sidebar label is not a section of the
|
|
page, and an h2 here lands in the middle of the page's own outline. */}
|
|
<span id={groupHeadingId} {...stylex.props(styles.navGroupLabel)}>
|
|
Configuration
|
|
</span>
|
|
<ul aria-labelledby={groupHeadingId} {...stylex.props(styles.navList)}>
|
|
{CONFIGURATION_ITEMS.map((item) => (
|
|
<NavItem key={item.to} to={item.to} label={item.label} onNavigate={onNavigate} />
|
|
))}
|
|
</ul>
|
|
<AuthorityLine />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The sidebar's foot, in both renderings. Pause is a runtime action on the whole
|
|
* resolver rather than on the page in front of the reader, which is why it sits
|
|
* with the version label instead of in the header of every route.
|
|
*/
|
|
function SidebarFooter() {
|
|
return (
|
|
<>
|
|
<div {...stylex.props(styles.sidebarFooter)}>
|
|
<PauseControl />
|
|
</div>
|
|
<VersionFooter />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function VersionFooter() {
|
|
const { data } = useQuery(versionQuery());
|
|
return (
|
|
<footer {...stylex.props(styles.versionFooter)}>
|
|
{data === undefined ? "nxdns" : `nxdns v${data.version} (${data.git_commit.slice(0, 7)})`}
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
function LogoutButton() {
|
|
const { authRequired, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [error, setError] = useState<unknown>(null);
|
|
if (authRequired !== true) return null;
|
|
return (
|
|
<div {...stylex.props(styles.logoutRow)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setError(null);
|
|
void logout().then(
|
|
() => navigate({ to: "/login" }),
|
|
(logoutError: unknown) => setError(logoutError),
|
|
);
|
|
}}
|
|
{...stylex.props(shared.button, shared.focusRing)}
|
|
>
|
|
Log out
|
|
</button>
|
|
{error !== null && <InlineError error={error} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AppShell() {
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
return (
|
|
<div {...stylex.props(styles.shell)}>
|
|
<aside {...stylex.props(styles.sidebar)}>
|
|
<div {...stylex.props(styles.brand)}>nxdns</div>
|
|
<nav aria-label="Main" {...stylex.props(styles.sidebarNav)}>
|
|
<NavLinks />
|
|
</nav>
|
|
<SidebarFooter />
|
|
</aside>
|
|
<div {...stylex.props(styles.column)}>
|
|
<header {...stylex.props(styles.header)}>
|
|
<button
|
|
type="button"
|
|
aria-expanded={drawerOpen}
|
|
aria-controls="mobile-nav"
|
|
onClick={() => setDrawerOpen((open) => !open)}
|
|
{...stylex.props(shared.button, styles.narrowOnly, shared.focusRing)}
|
|
>
|
|
Menu
|
|
</button>
|
|
<span {...stylex.props(styles.narrowBrand)}>nxdns</span>
|
|
<div {...stylex.props(styles.headerRight)}>
|
|
<LogoutButton />
|
|
</div>
|
|
</header>
|
|
<ConfigStatusNotices />
|
|
{drawerOpen && (
|
|
<div id="mobile-nav" {...stylex.props(styles.drawer)}>
|
|
<nav aria-label="Main" {...stylex.props(styles.drawerNav)}>
|
|
<NavLinks onNavigate={() => setDrawerOpen(false)} />
|
|
</nav>
|
|
<SidebarFooter />
|
|
</div>
|
|
)}
|
|
<main id="main-content" data-scroll-restoration-id="main" {...stylex.props(styles.main)}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|