Reverted to commit 095907b3a5

src/components/layout/AdminHeader.tsx

@@ -27,23 +27,26 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
   const pageTitle = isSettingsPage ? 'Admin Settings' : 'Admin Dashboard';
   
   return (
-    <header className="sticky top-0 z-50 w-full border-b border-border/50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center justify-between px-4 max-w-7xl">
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between px-4">
         {/* Left Section - Navigation */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           <Button variant="ghost" size="sm" asChild>
             <Link to={backLink} className="flex items-center gap-2">
               <ArrowLeft className="w-4 h-4" />
-              <span className="hidden sm:inline text-sm">{backText}</span>
+              <span className="hidden sm:inline">{backText}</span>
             </Link>
           </Button>
           
-          <div className="h-4 w-px bg-border/50 hidden sm:block" />
+          <div className="h-6 w-px bg-border hidden sm:block" />
           
-          <h1 className="text-base font-semibold">
-            <span className="sm:hidden">Admin</span>
-            <span className="hidden sm:inline">{pageTitle}</span>
-          </h1>
+          <div className="flex items-center gap-2">
+            <Shield className="w-6 h-6 text-primary" />
+            <h1 className="text-lg font-semibold">
+              <span className="sm:hidden">Admin</span>
+              <span className="hidden sm:inline">{pageTitle}</span>
+            </h1>
+          </div>
         </div>
 
         {/* Right Section - Admin actions */}
@@ -91,16 +94,16 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
             size="sm" 
             onClick={onRefresh}
             title="Refresh admin data"
-            className="hidden md:flex gap-2"
+            className="hidden md:flex"
           >
             <RefreshCw className="w-4 h-4" />
-            <span className="text-sm">Refresh</span>
+            <span className="hidden sm:ml-2 sm:inline">Refresh</span>
           </Button>
           {permissions?.role_level === 'superuser' && !isSettingsPage && (
-            <Button variant="ghost" size="sm" asChild className="hidden md:flex gap-2">
+            <Button variant="ghost" size="sm" asChild className="hidden md:flex">
               <Link to="/admin/settings">
                 <Settings className="w-4 h-4" />
-                <span className="text-sm">Settings</span>
+                <span className="hidden sm:ml-2 sm:inline">Settings</span>
               </Link>
             </Button>
           )}

src/components/layout/AdminLayout.tsx

@@ -1,62 +0,0 @@
-import { ReactNode, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { AdminSidebar } from './AdminSidebar';
-import { AdminTopBar } from './AdminTopBar';
-import { useAuth } from '@/hooks/useAuth';
-import { useUserRole } from '@/hooks/useUserRole';
-
-interface AdminLayoutProps {
-  children: ReactNode;
-  onRefresh?: () => void;
-  isRefreshing?: boolean;
-}
-
-export function AdminLayout({ children, onRefresh, isRefreshing }: AdminLayoutProps) {
-  const { user, loading: authLoading } = useAuth();
-  const { isModerator, loading: roleLoading } = useUserRole();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!authLoading && !roleLoading) {
-      if (!user) {
-        navigate('/auth');
-        return;
-      }
-      
-      if (!isModerator()) {
-        navigate('/');
-        return;
-      }
-    }
-  }, [user, authLoading, roleLoading, navigate, isModerator]);
-
-  if (authLoading || roleLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-muted-foreground">Loading admin panel...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!user || !isModerator()) {
-    return null;
-  }
-
-  return (
-    <SidebarProvider defaultOpen={true}>
-      <div className="flex min-h-screen w-full">
-        <AdminSidebar />
-        <main className="flex-1 flex flex-col">
-          <AdminTopBar onRefresh={onRefresh} isRefreshing={isRefreshing} />
-          <div className="flex-1 overflow-auto">
-            {children}
-          </div>
-        </main>
-      </div>
-    </SidebarProvider>
-  );
-}

src/components/layout/AdminSidebar.tsx

@@ -1,148 +0,0 @@
-import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
-import { NavLink, useLocation } from 'react-router-dom';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarFooter,
-  SidebarHeader,
-  useSidebar,
-} from '@/components/ui/sidebar';
-import { cn } from '@/lib/utils';
-import { useUserRole } from '@/hooks/useUserRole';
-
-const navigationItems = [
-  {
-    title: 'Dashboard',
-    url: '/admin',
-    icon: LayoutDashboard,
-  },
-  {
-    title: 'Moderation Queue',
-    url: '/admin/moderation',
-    icon: FileText,
-  },
-  {
-    title: 'Reports',
-    url: '/admin/reports',
-    icon: Flag,
-  },
-  {
-    title: 'User Management',
-    url: '/admin/users',
-    icon: Users,
-  },
-];
-
-export function AdminSidebar() {
-  const location = useLocation();
-  const { state } = useSidebar();
-  const { isSuperuser } = useUserRole();
-  const isCollapsed = state === 'collapsed';
-
-  const isActive = (path: string) => {
-    if (path === '/admin') {
-      return location.pathname === '/admin';
-    }
-    return location.pathname.startsWith(path);
-  };
-
-  return (
-    <Sidebar collapsible="icon" className="border-r">
-      <SidebarHeader className="border-b px-4 py-3">
-        <div className="flex items-center gap-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <span className="text-sm font-bold">TW</span>
-          </div>
-          {!isCollapsed && (
-            <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>
-      </SidebarHeader>
-
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {navigationItems.map((item) => (
-                <SidebarMenuItem key={item.url}>
-                  <SidebarMenuButton
-                    asChild
-                    isActive={isActive(item.url)}
-                    tooltip={isCollapsed ? item.title : undefined}
-                  >
-                    <NavLink
-                      to={item.url}
-                      end={item.url === '/admin'}
-                      className={({ isActive }) =>
-                        cn(
-                          'flex items-center gap-3 rounded-md transition-colors',
-                          isActive
-                            ? 'bg-primary/10 text-primary font-medium'
-                            : 'hover:bg-muted/50'
-                        )
-                      }
-                    >
-                      <item.icon className="h-5 w-5" />
-                      {!isCollapsed && <span>{item.title}</span>}
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-
-              {isSuperuser() && (
-                <SidebarMenuItem>
-                  <SidebarMenuButton
-                    asChild
-                    isActive={isActive('/admin/settings')}
-                    tooltip={isCollapsed ? 'Settings' : undefined}
-                  >
-                    <NavLink
-                      to="/admin/settings"
-                      className={({ isActive }) =>
-                        cn(
-                          'flex items-center gap-3 rounded-md transition-colors',
-                          isActive
-                            ? 'bg-primary/10 text-primary font-medium'
-                            : 'hover:bg-muted/50'
-                        )
-                      }
-                    >
-                      <Settings className="h-5 w-5" />
-                      {!isCollapsed && <span>Settings</span>}
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              )}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-
-      <SidebarFooter className="border-t p-2">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild tooltip={isCollapsed ? 'Back to ThrillWiki' : undefined}>
-              <NavLink
-                to="/"
-                className="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <ArrowLeft className="h-5 w-5" />
-                {!isCollapsed && <span>Back to ThrillWiki</span>}
-              </NavLink>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-    </Sidebar>
-  );
-}

src/components/layout/AdminTopBar.tsx

@@ -1,38 +0,0 @@
-import { RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import { ThemeToggle } from '@/components/theme/ThemeToggle';
-import { NotificationCenter } from '@/components/notifications/NotificationCenter';
-import { AuthButtons } from '@/components/auth/AuthButtons';
-
-interface AdminTopBarProps {
-  onRefresh?: () => void;
-  isRefreshing?: boolean;
-}
-
-export function AdminTopBar({ onRefresh, isRefreshing }: AdminTopBarProps) {
-  return (
-    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4">
-      <SidebarTrigger className="-ml-1" />
-      
-      {onRefresh && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onRefresh}
-          disabled={isRefreshing}
-          className="gap-2"
-        >
-          <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
-          <span className="hidden sm:inline">Refresh</span>
-        </Button>
-      )}
-
-      <div className="ml-auto flex items-center gap-2">
-        <NotificationCenter />
-        <ThemeToggle />
-        <AuthButtons />
-      </div>
-    </header>
-  );
-}