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/app/admin/layout.tsx

@@ -1,361 +1,18 @@
-import {
-	Award,
-	Ban,
-	Bell,
-	Calendar,
-	ClipboardList,
-	Cog,
-	Compass,
-	CreditCard,
-	DoorOpen,
-	FileText,
-	Filter,
-	Gem,
-	Globe,
-	Group,
-	HelpCircle,
-	History,
-	Image,
-	Key,
-	Languages,
-	LayoutDashboard,
-	LogOut,
-	Mail,
-	Megaphone,
-	MessageSquare,
-	Monitor,
-	Music,
-	Newspaper,
-	Palette,
-	Radio,
-	Receipt,
-	Settings,
-	Shield,
-	ShoppingCart,
-	SquarePen,
-	Store,
-	Tags,
-	Terminal,
-	Ticket,
-	Trophy,
-	Upload,
-	Users,
-	Wrench,
-} from "lucide-react";
+import { LogOut } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { ReactNode } from "react";
+import { AdminHubChrome } from "@/components/admin/admin-hub-chrome";
 import { AdminMobileWrapper } from "@/components/admin/admin-mobile-wrapper";
 import { AdminNavLink } from "@/components/admin/admin-nav-link";
 import { requireStaff } from "@/lib/admin/guard";
+import { ADMIN_NAV_GROUPS } from "@/lib/admin-nav";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export const dynamic = "force-dynamic";
 
-function getNavGroups(t: (key: string) => string) {
-	return [
-		{
-			label: t("overview"),
-			icon: <LayoutDashboard size={14} />,
-			items: [
-				{
-					href: "/admin",
-					label: t("dashboard"),
-					icon: <LayoutDashboard size={16} />,
-				},
-			],
-		},
-		{
-			label: t("content"),
-			icon: <Newspaper size={14} />,
-			items: [
-				{
-					href: "/admin/articles",
-					label: t("articles"),
-					icon: <Newspaper size={16} />,
-				},
-				{ href: "/admin/tags", label: t("tags"), icon: <Tags size={16} /> },
-				{
-					href: "/admin/navigation",
-					label: t("navigator"),
-					icon: <Compass size={16} />,
-				},
-				{
-					href: "/admin/help-questions",
-					label: t("helpCenter"),
-					icon: <HelpCircle size={16} />,
-				},
-				{
-					href: "/admin/ads",
-					label: t("advertisements"),
-					icon: <Megaphone size={16} />,
-				},
-				{
-					href: "/admin/writeable-boxes",
-					label: t("writeableBoxes"),
-					icon: <SquarePen size={16} />,
-				},
-				{
-					href: "/admin/photos",
-					label: t("photos"),
-					icon: <Image size={16} />,
-				},
-				{
-					href: "/admin/tickets",
-					label: t("tickets"),
-					icon: <MessageSquare size={16} />,
-				},
-				{
-					href: "/admin/events",
-					label: t("events"),
-					icon: <Calendar size={16} />,
-				},
-				{
-					href: "/admin/polls",
-					label: t("polls"),
-					icon: <ClipboardList size={16} />,
-				},
-				{ href: "/admin/banners", label: t("banners"), icon: <Image size={16} /> },
-				{
-					href: "/admin/prefixes",
-					label: t("prefixes"),
-					icon: <Languages size={16} />,
-				},
-			],
-		},
-		{
-			label: t("usersAndAccess"),
-			icon: <Shield size={14} />,
-			items: [
-				{ href: "/admin/users", label: t("users"), icon: <Users size={16} /> },
-				{ href: "/admin/bans", label: t("bans"), icon: <Ban size={16} /> },
-				{
-					href: "/admin/ip",
-					label: t("ipManagement"),
-					icon: <Globe size={16} />,
-				},
-				{ href: "/admin/vpn", label: t("vpn"), icon: <Shield size={16} /> },
-				{
-					href: "/admin/applications",
-					label: t("applications"),
-					icon: <ClipboardList size={16} />,
-				},
-				{ href: "/admin/teams", label: t("teams"), icon: <Group size={16} /> },
-				{
-					href: "/admin/permissions",
-					label: t("permissions"),
-					icon: <Key size={16} />,
-				},
-				{
-					href: "/admin/online",
-					label: t("onlineUsers"),
-					icon: <Users size={16} />,
-				},
-				{
-					href: "/admin/moderation",
-					label: t("moderation"),
-					icon: <Shield size={16} />,
-				},
-			],
-		},
-		{
-			label: t("economy"),
-			icon: <ShoppingCart size={14} />,
-			items: [
-				{
-					href: "/admin/catalog",
-					label: t("catalog"),
-					icon: <Store size={16} />,
-				},
-				{
-					href: "/admin/shop",
-					label: t("shop"),
-					icon: <ShoppingCart size={16} />,
-				},
-				{
-					href: "/admin/transactions",
-					label: t("transactions"),
-					icon: <Receipt size={16} />,
-				},
-				{
-					href: "/admin/vouchers",
-					label: t("vouchers"),
-					icon: <Ticket size={16} />,
-				},
-				{
-					href: "/admin/subscriptions",
-					label: t("subscriptions"),
-					icon: <CreditCard size={16} />,
-				},
-				{
-					href: "/admin/rare-values",
-					label: t("rareValues"),
-					icon: <Gem size={16} />,
-				},
-				{
-					href: "/admin/badges",
-					label: t("badges"),
-					icon: <Award size={16} />,
-				},
-				{
-					href: "/admin/achievements",
-					label: t("achievements"),
-					icon: <Trophy size={16} />,
-				},
-				{
-					href: "/admin/calendar",
-					label: t("calendar"),
-					icon: <Calendar size={16} />,
-				},
-			],
-		},
-		{
-			label: t("radio"),
-			icon: <Radio size={14} />,
-			items: [
-				{ href: "/admin/radio", label: t("radio"), icon: <Radio size={16} /> },
-				{
-					href: "/admin/radio/history",
-					label: t("radioHistory"),
-					icon: <History size={16} />,
-				},
-				{
-					href: "/admin/radio/banners",
-					label: t("radioBanners"),
-					icon: <Image size={16} />,
-				},
-				{
-					href: "/admin/radio/embed",
-					label: t("radioEmbed"),
-					icon: <Radio size={16} />,
-				},
-				{
-					href: "/admin/radio/api-keys",
-					label: t("radioApiKeys"),
-					icon: <Key size={16} />,
-				},
-				{
-					href: "/admin/radio/moderation",
-					label: t("radioModeration"),
-					icon: <Shield size={16} />,
-				},
-				{
-					href: "/admin/radio/settings",
-					label: t("radioSettings"),
-					icon: <Settings size={16} />,
-				},
-				{
-					href: "/admin/radio/monitoring",
-					label: t("radioMonitoring"),
-					icon: <Monitor size={16} />,
-				},
-				{
-					href: "/admin/radio/points",
-					label: t("radioPoints"),
-					icon: <Gem size={16} />,
-				},
-				{
-					href: "/admin/radio/ranks",
-					label: t("radioRanks"),
-					icon: <Group size={16} />,
-				},
-				{
-					href: "/admin/radio/autodj",
-					label: t("radioAutodj"),
-					icon: <Radio size={16} />,
-				},
-			],
-		},
-		{
-			label: t("system"),
-			icon: <Settings size={14} />,
-			items: [
-				{
-					href: "/admin/commandocentrum",
-					label: t("commandocentrum"),
-					icon: <Terminal size={16} />,
-				},
-				{
-					href: "/admin/emulator",
-					label: t("emulator"),
-					icon: <Monitor size={16} />,
-				},
-				{ href: "/admin/alerts", label: t("alerts"), icon: <Bell size={16} /> },
-				{ href: "/admin/logs", label: t("logs"), icon: <FileText size={16} /> },
-				{
-					href: "/admin/logs/audit",
-					label: t("auditLog"),
-					icon: <FileText size={16} />,
-				},
-				{
-					href: "/admin/analytics",
-					label: t("analytics"),
-					icon: <LayoutDashboard size={16} />,
-				},
-				{ href: "/admin/devops", label: t("devops"), icon: <Monitor size={16} /> },
-				{
-					href: "/admin/wordfilter",
-					label: t("wordFilter"),
-					icon: <Filter size={16} />,
-				},
-				{
-					href: "/admin/maintenance",
-					label: t("maintenance"),
-					icon: <Wrench size={16} />,
-				},
-				{
-					href: "/admin/housekeeping",
-					label: t("housekeeping"),
-					icon: <Settings size={16} />,
-				},
-				{
-					href: "/admin/rooms",
-					label: t("rooms"),
-					icon: <DoorOpen size={16} />,
-				},
-				{
-					href: "/admin/email-templates",
-					label: t("emailTemplates"),
-					icon: <Mail size={16} />,
-				},
-				{
-					href: "/admin/theme",
-					label: t("theme"),
-					icon: <Palette size={16} />,
-				},
-				{ href: "/admin/media", label: t("media"), icon: <Image size={16} /> },
-				{
-					href: "/admin/favicon",
-					label: t("favicon"),
-					icon: <Image size={16} />,
-				},
-				{
-					href: "/admin/sounds",
-					label: t("sounds"),
-					icon: <Music size={16} />,
-				},
-				{
-					href: "/admin/translations",
-					label: t("translations"),
-					icon: <Languages size={16} />,
-				},
-				{
-					href: "/admin/import",
-					label: t("import"),
-					icon: <Upload size={16} />,
-				},
-				{
-					href: "/admin/settings",
-					label: t("settings"),
-					icon: <Cog size={16} />,
-				},
-			],
-		},
-	];
-}
-
 export default async function AdminLayout({
 	children,
 }: {
@@ -380,7 +37,9 @@ export default async function AdminLayout({
 				style={{ backgroundColor: "var(--admin-canvas)" }}
 			>
 				<Topbar staff={staff} />
-				<section className="admin-page flex-1">{children}</section>
+				<section className="admin-page flex-1">
+					<AdminHubChrome>{children}</AdminHubChrome>
+				</section>
 			</div>
 		</AdminMobileWrapper>
 	);
@@ -393,7 +52,6 @@ async function Sidebar({
 }) {
 	const t = await getTranslations("pages.admin.nav");
 	const initial = staff.username.charAt(0).toUpperCase();
-	const navGroups = getNavGroups(t);
 
 	return (
 		<aside
@@ -418,26 +76,37 @@ async function Sidebar({
 			</div>
 
 			<nav className="flex-1 overflow-y-auto px-3 py-4">
-				{navGroups.map((group, gi) => (
-					<div
-						key={group.label}
-						className={
-							gi > 0 ? "mt-4 pt-4 border-t border-[var(--admin-border)]" : ""
-						}
-					>
-						<div className="flex items-center gap-1.5 px-2 pb-2 text-[0.65rem] font-extrabold uppercase tracking-[0.14em] text-[var(--admin-sidebar-text-readable)] opacity-70">
-							{group.icon}
-							<span>{group.label}</span>
+				{ADMIN_NAV_GROUPS.map((group, gi) => {
+					const GroupIcon = group.icon;
+					return (
+						<div
+							key={group.labelKey}
+							className={
+								gi > 0 ? "mt-4 pt-4 border-t border-[var(--admin-border)]" : ""
+							}
+						>
+							<div className="flex items-center gap-1.5 px-2 pb-2 text-[0.65rem] font-extrabold uppercase tracking-[0.14em] text-[var(--admin-sidebar-text-readable)] opacity-70">
+								<GroupIcon size={14} />
+								<span>{t(group.labelKey)}</span>
+							</div>
+							<div className="space-y-0.5">
+								{group.items.map((item) => {
+									const ItemIcon = item.icon;
+									return (
+										<AdminNavLink
+											key={`${group.labelKey}-${item.href}`}
+											href={item.href}
+											matchPrefixes={item.matchPrefixes}
+											icon={<ItemIcon size={16} />}
+										>
+											{t(item.labelKey)}
+										</AdminNavLink>
+									);
+								})}
+							</div>
 						</div>
-						<div className="space-y-0.5">
-							{group.items.map((item) => (
-								<AdminNavLink key={item.href} href={item.href} icon={item.icon}>
-									{item.label}
-								</AdminNavLink>
-							))}
-						</div>
-					</div>
-				))}
+					);
+				})}
 			</nav>
 
 			<div className="px-3 py-3 border-t border-[var(--admin-border)]">

src/app/admin/settings/page.tsx

@@ -1,5 +1,3 @@
-import { Cog, ExternalLink } from "lucide-react";
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
@@ -10,13 +8,6 @@ import { CmsSettingsForm } from "./cms-settings-form";
 export const dynamic = "force-dynamic";
 export const metadata = { title: "CMS Settings" };
 
-const RELATED = [
-	{ href: "/admin/theme", label: "Theme & colors" },
-	{ href: "/admin/maintenance", label: "Maintenance" },
-	{ href: "/admin/vpn", label: "VPN / proxy block" },
-	{ href: "/admin/emulator", label: "Emulator config" },
-] as const;
-
 export default async function AdminSettings() {
 	const { session, permissions } = await getAdminContext();
 	if (!canAccess(permissions, PERMS.SETTINGS_VIEW, session.user.rank)) {
@@ -49,34 +40,6 @@ export default async function AdminSettings() {
 
 	return (
 		<div className="space-y-8">
-			<div className="flex flex-wrap items-start justify-between gap-4">
-				<div className="flex items-center gap-3">
-					<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
-						<Cog size={20} className="text-[var(--admin-accent)]" />
-					</div>
-					<div>
-						<h1 className="m-0 text-2xl font-extrabold tracking-tight text-[var(--admin-text)]">
-							CMS Settings
-						</h1>
-						<p className="m-0 mt-0.5 text-sm text-[var(--admin-text-muted)]">
-							Configure hotel identity, imaging, client, radio and security.
-						</p>
-					</div>
-				</div>
-				<div className="flex flex-wrap gap-2">
-					{RELATED.map((item) => (
-						<Link
-							key={item.href}
-							href={item.href}
-							className="inline-flex items-center gap-1.5 rounded-full border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-1.5 text-xs font-semibold text-[var(--admin-text)] no-underline hover:border-[var(--admin-accent)] transition-colors"
-						>
-							{item.label}
-							<ExternalLink size={12} className="opacity-60" />
-						</Link>
-					))}
-				</div>
-			</div>
-
 			<div className="admin-stat-row">
 				<span className="admin-stat-chip">
 					{settings.length} keys in database