milestone 23 s3: convert shell/AppShell.tsx to stylex

web/src/shell/AppShell.tsx

@@ -1,13 +1,19 @@
 import { 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 { versionQuery } from "@/lib/queries";
 import PauseWidget from "../features/pause/PauseWidget";
 import ReadOnlyConfigBanner from "../features/settings/ReadOnlyConfigBanner";
 import RestartBanner from "../features/settings/RestartBanner";
-import { buttonClass, focusRing } from "@/ui/classes";
+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)";
 
 const NAV_ITEMS = [
 	{ to: "/", label: "Dashboard" },
@@ -23,9 +29,115 @@ const NAV_ITEMS = [
 	{ to: "/settings", label: "Settings" },
 ] as const;
 
+const styles = stylex.create({
+	navList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.25rem",
+	},
+	navLink: {
+		display: "block",
+		borderRadius: "0.25rem",
+		paddingInline: "0.75rem",
+		paddingBlock: "0.375rem",
+		textDecorationLine: "none",
+	},
+	/** 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.textMuted, ":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",
+		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" },
+		borderRightWidth: 1,
+		borderRightStyle: "solid",
+		borderRightColor: colors.border,
+	},
+	brand: {
+		paddingInline: "1rem",
+		paddingBlock: "1rem",
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		fontWeight: 600,
+	},
+	sidebarNav: {
+		flex: 1,
+		paddingInline: "0.5rem",
+	},
+	column: {
+		display: "flex",
+		minHeight: "100dvh",
+		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,
+		padding: "1rem",
+	},
+});
+
 function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 	return (
-		<ul className="space-y-1">
+		<ul {...stylex.props(styles.navList)}>
 			{NAV_ITEMS.map((item) => (
 				<li key={item.to}>
 					<Link
@@ -34,13 +146,10 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 						activeOptions={{ exact: item.to === "/" }}
 						activeProps={{
 							"aria-current": "page",
-							className: "bg-zinc-200 font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50",
+							className: stylex.props(styles.navActive).className,
 						}}
-						inactiveProps={{
+						inactiveProps={{ className: stylex.props(styles.navIdle).className }}
-							className:
+						{...stylex.props(styles.navLink, shared.focusRing)}
-								"text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-100",
-						}}
-						className={`block rounded px-3 py-1.5 ${focusRing}`}
 					>
 						{item.label}
 					</Link>
@@ -53,7 +162,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 function VersionFooter() {
 	const { data } = useQuery(versionQuery());
 	return (
-		<footer className="px-4 py-3 text-xs text-zinc-500">
+		<footer {...stylex.props(styles.versionFooter)}>
 			{data === undefined ? "nxdns" : `nxdns v${data.version} (${data.git_commit.slice(0, 7)})`}
 		</footer>
 	);
@@ -65,7 +174,7 @@ function LogoutButton() {
 	const [error, setError] = useState<unknown>(null);
 	if (authRequired !== true) return null;
 	return (
-		<div className="flex items-center gap-2">
+		<div {...stylex.props(styles.logoutRow)}>
 			<button
 				type="button"
 				onClick={() => {
@@ -75,7 +184,7 @@ function LogoutButton() {
 						(logoutError: unknown) => setError(logoutError),
 					);
 				}}
-				className={buttonClass}
+				{...stylex.props(shared.button, shared.focusRing)}
 			>
 				Log out
 			</button>
@@ -87,27 +196,27 @@ function LogoutButton() {
 export default function AppShell() {
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	return (
-		<div className="min-h-dvh bg-zinc-50 text-zinc-900 md:grid md:grid-cols-[14rem_1fr] dark:bg-zinc-950 dark:text-zinc-100">
+		<div {...stylex.props(styles.shell)}>
-			<aside className="hidden border-r border-zinc-200 md:flex md:flex-col dark:border-zinc-800">
+			<aside {...stylex.props(styles.sidebar)}>
-				<div className="px-4 py-4 text-lg font-semibold">nxdns</div>
+				<div {...stylex.props(styles.brand)}>nxdns</div>
-				<nav aria-label="Main" className="flex-1 px-2">
+				<nav aria-label="Main" {...stylex.props(styles.sidebarNav)}>
 					<NavLinks />
 				</nav>
 				<VersionFooter />
 			</aside>
-			<div className="flex min-h-dvh flex-col">
+			<div {...stylex.props(styles.column)}>
-				<header className="flex items-center gap-3 border-b border-zinc-200 px-4 py-2 dark:border-zinc-800">
+				<header {...stylex.props(styles.header)}>
 					<button
 						type="button"
-						className={`${buttonClass} md:hidden`}
 						aria-expanded={drawerOpen}
 						aria-controls="mobile-nav"
 						onClick={() => setDrawerOpen((open) => !open)}
+						{...stylex.props(shared.button, styles.narrowOnly, shared.focusRing)}
 					>
 						Menu
 					</button>
-					<span className="text-lg font-semibold md:hidden">nxdns</span>
+					<span {...stylex.props(styles.narrowBrand)}>nxdns</span>
-					<div className="ml-auto flex items-center gap-3">
+					<div {...stylex.props(styles.headerRight)}>
 						<PauseWidget />
 						<LogoutButton />
 					</div>
@@ -115,14 +224,14 @@ export default function AppShell() {
 				<RestartBanner />
 				<ReadOnlyConfigBanner />
 				{drawerOpen && (
-					<div id="mobile-nav" className="border-b border-zinc-200 md:hidden dark:border-zinc-800">
+					<div id="mobile-nav" {...stylex.props(styles.drawer)}>
-						<nav aria-label="Main" className="px-2 py-2">
+						<nav aria-label="Main" {...stylex.props(styles.drawerNav)}>
 							<NavLinks onNavigate={() => setDrawerOpen(false)} />
 						</nav>
 						<VersionFooter />
 					</div>
 				)}
-				<main className="flex-1 p-4">
+				<main {...stylex.props(styles.main)}>
 					<Outlet />
 				</main>
 			</div>