From b4db4d8ab8322d8b51a9930e0088a1ebefa0a01c Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Tue, 28 Apr 2026 08:47:03 +0800
Subject: [PATCH] feat: redesign admin sidebar with grouped sections

- Add Management and Moderation sections with labeled groups
- Section labels: muted uppercase micro text
- Section dividers: horizontal on desktop, vertical on mobile
- Active state: bg-primary/10 text-primary rounded-lg
- Widen desktop sidebar from md:w-48 to md:w-56
- Add desktop-only Admin Panel header with LayoutDashboardIcon
- Expand nav to cover all 6 admin pages (users, hardware, games,
  reports, benchmarks, comments)
- Update admin layout description to 'Manage your platform'
---
 app/(admin)/layout.tsx             |  2 +-
 components/admin/admin-sidebar.tsx | 71 +++++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index 08ec25b..09a38c8 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -20,7 +20,7 @@ export default async function AdminLayout({
                 <div className='max-w-7xl mx-auto'>
                     <h1 className='text-2xl sm:text-3xl font-bold'>Admin</h1>
                     <p className='text-sm text-text/60 mt-1'>
-                        Manage users, hardware, and games
+                        Manage your platform
                     </p>
                 </div>
             </div>
diff --git a/components/admin/admin-sidebar.tsx b/components/admin/admin-sidebar.tsx
index 5a140ee..46ade83 100644
--- a/components/admin/admin-sidebar.tsx
+++ b/components/admin/admin-sidebar.tsx
@@ -2,31 +2,80 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { UsersIcon, CpuIcon, Gamepad2Icon, MessageSquareIcon } from "lucide-react"
+import {
+  UsersIcon,
+  CpuIcon,
+  Gamepad2Icon,
+  MessageSquareIcon,
+  FlagIcon,
+  BarChart3Icon,
+  LayoutDashboardIcon,
+} from "lucide-react"
 
-const adminNavItems = [
-  { href: "/admin/users", label: "Users", icon: UsersIcon },
-  { href: "/admin/hardware", label: "Hardware", icon: CpuIcon },
-  { href: "/admin/games", label: "Games", icon: Gamepad2Icon },
-  { href: "/admin/comments", label: "Comments", icon: MessageSquareIcon },
+type NavItem =
+  | { type: "section"; label: string }
+  | { type: "divider" }
+  | { type: "link"; href: string; label: string; icon: React.ElementType }
+
+const navItems: NavItem[] = [
+  { type: "section", label: "Management" },
+  { type: "link", href: "/admin/users", label: "Users", icon: UsersIcon },
+  { type: "link", href: "/admin/hardware", label: "Hardware", icon: CpuIcon },
+  { type: "link", href: "/admin/games", label: "Games", icon: Gamepad2Icon },
+  { type: "divider" },
+  { type: "section", label: "Moderation" },
+  { type: "link", href: "/admin/reports", label: "Reports", icon: FlagIcon },
+  { type: "link", href: "/admin/benchmarks", label: "Benchmarks", icon: BarChart3Icon },
+  { type: "link", href: "/admin/comments", label: "Comments", icon: MessageSquareIcon },
 ]
 
 export function AdminSidebar() {
   const pathname = usePathname()
 
   return (
-    <nav className="md:w-48 shrink-0">
-      <div className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0 md:border-r md:border-border">
-        {adminNavItems.map((item) => {
+    <nav className="md:w-56 shrink-0">
+      {/* Desktop header */}
+      <div className="hidden md:flex items-center gap-2 px-3 py-2 mb-2 text-sm font-semibold text-text/70">
+        <LayoutDashboardIcon className="h-4 w-4" />
+        Admin Panel
+      </div>
+
+      <div className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0 md:border-r md:border-border md:pr-3">
+        {navItems.map((item, index) => {
+          if (item.type === "section") {
+            return (
+              <div
+                key={`section-${item.label}`}
+                className="hidden md:block px-3 py-1 text-[10px] font-semibold uppercase tracking-widest text-text/30"
+              >
+                {item.label}
+              </div>
+            )
+          }
+
+          if (item.type === "divider") {
+            return [
+              <div
+                key={`div-m-${index}`}
+                className="w-px bg-border shrink-0 self-stretch md:hidden"
+              />,
+              <div
+                key={`div-d-${index}`}
+                className="hidden md:block h-px bg-border"
+              />,
+            ]
+          }
+
           const isActive =
             pathname === item.href || pathname.startsWith(item.href + "/")
+
           return (
             <Link
               key={item.href}
               href={item.href}
-              className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap rounded-lg md:rounded-none md:border-l-2 md:border-r-0 md:border-transparent ${
+              className={`flex items-center gap-2 px-4 md:px-3 py-2.5 text-sm font-medium transition-colors whitespace-nowrap rounded-lg ${
                 isActive
-                  ? "bg-primary/10 text-primary md:border-l-primary"
+                  ? "bg-primary/10 text-primary"
                   : "text-text/50 hover:text-text/70 hover:bg-text/5"
               }`}
             >