feat: Implement admin panel redesign plan

src/components/layout/AdminSidebar.tsx

@@ -0,0 +1,115 @@
+import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
+import { NavLink } from 'react-router-dom';
+import { useUserRole } from '@/hooks/useUserRole';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar';
+
+export function AdminSidebar() {
+  const { state } = useSidebar();
+  const { permissions } = useUserRole();
+  const isSuperuser = permissions?.role_level === 'superuser';
+  const collapsed = state === 'collapsed';
+
+  const navItems = [
+    {
+      title: 'Dashboard',
+      url: '/admin',
+      icon: LayoutDashboard,
+    },
+    {
+      title: 'Moderation',
+      url: '/admin/moderation',
+      icon: FileText,
+    },
+    {
+      title: 'Reports',
+      url: '/admin/reports',
+      icon: Flag,
+    },
+    {
+      title: 'Users',
+      url: '/admin/users',
+      icon: Users,
+    },
+    ...(isSuperuser ? [{
+      title: 'Settings',
+      url: '/admin/settings',
+      icon: Settings,
+    }] : []),
+  ];
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader className="border-b border-border/40 px-4 py-4">
+        {!collapsed && (
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+              <span className="text-lg">🎢</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold">ThrillWiki</span>
+              <span className="text-xs text-muted-foreground">Admin Panel</span>
+            </div>
+          </div>
+        )}
+        {collapsed && (
+          <div className="flex items-center justify-center">
+            <span className="text-lg">🎢</span>
+          </div>
+        )}
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.url}>
+                  <SidebarMenuButton asChild tooltip={collapsed ? item.title : undefined}>
+                    <NavLink
+                      to={item.url}
+                      end={item.url === '/admin'}
+                      className={({ isActive }) =>
+                        isActive
+                          ? 'bg-accent text-accent-foreground font-medium'
+                          : 'hover:bg-accent/50'
+                      }
+                    >
+                      <item.icon className="w-4 h-4" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-border/40">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild tooltip={collapsed ? 'Back to ThrillWiki' : undefined}>
+              <NavLink to="/" className="hover:bg-accent/50">
+                <ArrowLeft className="w-4 h-4" />
+                {!collapsed && <span>Back to ThrillWiki</span>}
+              </NavLink>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}