Reorganize admin into tabbed hubs with a condensed sidebar.

Replace the long flat nav with hub entries, shared AdminHubChrome tabs, and AdminPageShell. Existing URLs stay stable; Settings/Radio and other sections now share one chrome.

Co-authored-by: Cursor <[email protected]>

src/components/admin/admin-nav-link.tsx

@@ -6,25 +6,33 @@ import type { ReactNode } from "react";
 import { useAdminMobile } from "@/components/admin/admin-mobile-wrapper";
 
 /**
- * Sidebar link that highlights when its route is active. "/admin" matches
- * exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
- * active on /admin/radio/history) so the current section stays lit.
+ * Sidebar link that highlights when its route is active.
+ * Optional matchPrefixes cover multi-page hubs (e.g. Settings → theme/vpn).
  */
 export function AdminNavLink({
 	href,
 	icon,
+	matchPrefixes,
 	children,
 }: {
 	href: string;
 	icon?: ReactNode;
+	matchPrefixes?: string[];
 	children: ReactNode;
 }) {
 	const pathname = usePathname() ?? "";
 	const { close } = useAdminMobile();
-	const active =
-		href === "/admin"
-			? pathname === "/admin"
-			: pathname === href || pathname.startsWith(`${href}/`);
+
+	let active: boolean;
+	if (href === "/admin") {
+		active = pathname === "/admin";
+	} else if (matchPrefixes?.length) {
+		active = matchPrefixes.some(
+			(p) => pathname === p || pathname.startsWith(`${p}/`),
+		);
+	} else {
+		active = pathname === href || pathname.startsWith(`${href}/`);
+	}
 
 	return (
 		<Link