From f4e0924e71bd60c510b66153fccd16dcc4e2012d Mon Sep 17 00:00:00 2001 From: simoleo89 Date: Sun, 28 Jun 2026 18:38:54 +0200 Subject: [PATCH] Restyle the admin panel to match AtomCMS's Filament housekeeping look The admin pages used bare inline-styled tables on the default page background. Rebuilt the admin shell + added a scoped .admin CSS layer so the whole panel matches the original AtomCMS Filament look: - Dark #2d2d44 sidebar (the AtomCMS admin navbar colour) with the nav grouped into Overview / Content / Users & access / Economy / Radio / System (mirrors the Filament resource groups), an avatar + rank badge header, and amber active-link highlighting via a client AdminNavLink (usePathname). - A topbar ("Housekeeping" + signed-in user) over a light content area. - Carded tables (surface bg, rounded, shadow, tinted header, row hover) and a page-title treatment, applied globally so every admin page is styled without per-page edits. Verified in a real authenticated admin session (production server, amx_test): sidebar renders #2d2d44 sticky, active link amber on dark text, /admin/users table carded with 7 real rows; dev server serves the admin rules after a cache refresh. tsc 0, vitest 49/49, next build 0. --- src/app/admin/layout.tsx | 143 ++++++++++++------ src/app/globals.css | 185 ++++++++++++++++++++++++ src/components/admin/admin-nav-link.tsx | 21 +++ 3 files changed, 307 insertions(+), 42 deletions(-) create mode 100644 src/components/admin/admin-nav-link.tsx diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx index 213d3452..0491e588 100644 --- a/src/app/admin/layout.tsx +++ b/src/app/admin/layout.tsx @@ -1,12 +1,79 @@ -import Link from "next/link"; import { redirect } from "next/navigation"; import type { ReactNode } from "react"; +import { AdminNavLink } from "@/components/admin/admin-nav-link"; import { requireStaff } from "@/lib/admin/guard"; import { prisma } from "@/lib/prisma"; import { siteSettings } from "@/lib/services/site-settings"; export const dynamic = "force-dynamic"; +// Sidebar layout grouped like the original AtomCMS Filament panel (Content, +// Users & access, Economy, Radio, System) instead of one flat list. +const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[] = [ + { + label: "Overview", + items: [{ href: "/admin", label: "Dashboard" }], + }, + { + label: "Content", + items: [ + { href: "/admin/articles", label: "Articles" }, + { href: "/admin/tags", label: "Tags" }, + { href: "/admin/navigation", label: "Navigator" }, + { href: "/admin/help-questions", label: "Help center" }, + { href: "/admin/ads", label: "Advertisements" }, + { href: "/admin/photos", label: "Photos" }, + ], + }, + { + label: "Users & access", + items: [ + { href: "/admin/users", label: "Users" }, + { href: "/admin/bans", label: "Bans" }, + { href: "/admin/ip", label: "IP management" }, + { href: "/admin/applications", label: "Applications" }, + { href: "/admin/teams", label: "Teams" }, + { href: "/admin/permissions", label: "Permissions" }, + ], + }, + { + label: "Economy", + items: [ + { href: "/admin/catalog", label: "Catalog" }, + { href: "/admin/shop", label: "Shop" }, + { href: "/admin/transactions", label: "Transactions" }, + { href: "/admin/vouchers", label: "Vouchers" }, + { href: "/admin/subscriptions", label: "Subscriptions" }, + { href: "/admin/rare-values", label: "Rare values" }, + { href: "/admin/badges", label: "Badges" }, + { href: "/admin/achievements", label: "Achievements" }, + { href: "/admin/calendar", label: "Calendar" }, + ], + }, + { + label: "Radio", + items: [ + { href: "/admin/radio", label: "Radio" }, + { href: "/admin/radio/history", label: "Radio history" }, + ], + }, + { + label: "System", + items: [ + { href: "/admin/commandocentrum", label: "Commandocentrum" }, + { href: "/admin/emulator", label: "Emulator" }, + { href: "/admin/alerts", label: "Alerts" }, + { href: "/admin/logs", label: "Logs" }, + { href: "/admin/wordfilter", label: "Word filter" }, + { href: "/admin/maintenance", label: "Maintenance" }, + { href: "/admin/housekeeping", label: "Housekeeping" }, + { href: "/admin/rooms", label: "Rooms" }, + { href: "/admin/email-templates", label: "Email" }, + { href: "/admin/settings", label: "Settings" }, + ], + }, +]; + export default async function AdminLayout({ children }: { children: ReactNode }) { const staff = await requireStaff(); @@ -18,50 +85,42 @@ export default async function AdminLayout({ children }: { children: ReactNode }) if (!u?.twoFactorConfirmedAt) redirect("/settings/2fa?error=staffrequired"); } + const initial = staff.username.charAt(0).toUpperCase(); + return ( -
-