src/App.js

@@ -8,7 +8,7 @@ import {
   UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle,
   Play as PlayIcon, Pause as PauseIcon, SkipForward as SkipForwardIcon,
   StopCircle as StopCircleIcon, Users2, Dices, ChevronUp, ChevronDown, ScrollText,
-  Maximize2, Minimize2, Moon, Coffee, Clock
+  Maximize2, Minimize2, Moon, Coffee, Clock, ChevronRight
 } from 'lucide-react';
 
 // Custom CSS for death animation (player view only)
@@ -2195,6 +2195,7 @@ function AdminView({ userId }) {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
+  const [campaignsCollapsed, setCampaignsCollapsed] = useState(false);
 
   useEffect(() => {
     if (campaignsData && db) {
@@ -2322,7 +2323,18 @@ function AdminView({ userId }) {
       <div className="space-y-6">
         <div>
           <div className="flex justify-between items-center mb-4">
-            <h2 className="text-2xl font-semibold text-amber-300 font-cinzel tracking-wide">Campaigns</h2>
+            <button
+              onClick={() => setCampaignsCollapsed(c => !c)}
+              className="flex items-center gap-2 text-2xl font-semibold text-amber-300 font-cinzel tracking-wide hover:text-amber-200 transition-colors"
+              aria-expanded={!campaignsCollapsed}
+              aria-controls="campaigns-grid"
+            >
+              {campaignsCollapsed
+                ? <ChevronRight size={24} />
+                : <ChevronDown size={24} />}
+              Campaigns
+              <span className="text-sm font-normal text-stone-400">({campaignsWithDetails.length})</span>
+            </button>
             <button
               onClick={() => setShowCreateModal(true)}
               className="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded-lg flex items-center transition-colors"
@@ -2331,11 +2343,13 @@ function AdminView({ userId }) {
             </button>
           </div>
 
+          {!campaignsCollapsed && (
+            <>
               {campaignsWithDetails.length === 0 && !isLoadingCampaigns && (
                 <p className="text-stone-400">No campaigns yet. Create one to get started!</p>
               )}
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div id="campaigns-grid" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {campaignsWithDetails.map(campaign => {
               const cardStyle = campaign.playerDisplayBackgroundUrl
                 ? { backgroundImage: `url(${campaign.playerDisplayBackgroundUrl})` }
@@ -2383,6 +2397,8 @@ function AdminView({ userId }) {
               );
             })}
               </div>
+            </>
+          )}
         </div>
 
         {showCreateModal && (