milestone 9: react spa admin ui, frontend ci and embedded dist

2026-08-02 13:04:09 +02:00
parent 5253c47303
commit 617cc966a2
82 changed files with 11833 additions and 17 deletions
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Link, Outlet, useNavigate } from "@tanstack/react-router";
+import { useAuth } from "@/auth/store";
+import InlineError from "@/lib/InlineError";
+import { versionQuery } from "@/lib/queries";
+import PauseWidget from "../features/pause/PauseWidget";
+import RestartBanner from "../features/settings/RestartBanner";
+
+const NAV_ITEMS = [
+	{ to: "/", label: "Dashboard" },
+	{ to: "/queries", label: "Query Log" },
+	{ to: "/live", label: "Live" },
+	{ to: "/clients", label: "Clients" },
+	{ to: "/groups", label: "Groups" },
+	{ to: "/blocklists", label: "Blocklists" },
+	{ to: "/rules", label: "Rules" },
+	{ to: "/local-dns", label: "Local DNS" },
+	{ to: "/lookup", label: "Lookup" },
+	{ to: "/settings", label: "Settings" },
+] as const;
+
+function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
+	return (
+		<ul className="space-y-1">
+			{NAV_ITEMS.map((item) => (
+				<li key={item.to}>
+					<Link
+						to={item.to}
+						onClick={onNavigate}
+						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",
+						}}
+						inactiveProps={{
+							className:
+								"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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+					>
+						{item.label}
+					</Link>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+function VersionFooter() {
+	const { data } = useQuery(versionQuery());
+	return (
+		<footer className="px-4 py-3 text-xs text-zinc-500">
+			{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 className="flex items-center gap-2">
+			<button
+				type="button"
+				onClick={() => {
+					setError(null);
+					void logout().then(
+						() => navigate({ to: "/login" }),
+						(logoutError: unknown) => setError(logoutError),
+					);
+				}}
+				className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
+			>
+				Log out
+			</button>
+			{error !== null && <InlineError error={error} />}
+		</div>
+	);
+}
+
+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">
+			<aside className="hidden border-r border-zinc-200 md:flex md:flex-col dark:border-zinc-800">
+				<div className="px-4 py-4 text-lg font-semibold">nxdns</div>
+				<nav aria-label="Main" className="flex-1 px-2">
+					<NavLinks />
+				</nav>
+				<VersionFooter />
+			</aside>
+			<div className="flex min-h-dvh flex-col">
+				<header className="flex items-center gap-3 border-b border-zinc-200 px-4 py-2 dark:border-zinc-800">
+					<button
+						type="button"
+						className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 md:hidden dark:border-zinc-700"
+						aria-expanded={drawerOpen}
+						aria-controls="mobile-nav"
+						onClick={() => setDrawerOpen((open) => !open)}
+					>
+						Menu
+					</button>
+					<span className="text-lg font-semibold md:hidden">nxdns</span>
+					<div className="ml-auto flex items-center gap-3">
+						<PauseWidget />
+						<LogoutButton />
+					</div>
+				</header>
+				<RestartBanner />
+				{drawerOpen && (
+					<div id="mobile-nav" className="border-b border-zinc-200 md:hidden dark:border-zinc-800">
+						<nav aria-label="Main" className="px-2 py-2">
+							<NavLinks onNavigate={() => setDrawerOpen(false)} />
+						</nav>
+						<VersionFooter />
+					</div>
+				)}
+				<main className="flex-1 p-4">
+					<Outlet />
+				</main>
+			</div>
+		</div>
+	);
+}