From 4b8b8bccfb79c8f47340b884a773fd81d27c4265 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Thu, 2 Jul 2026 11:17:04 -0400
Subject: [PATCH] feat(UI): collapsible Campaigns section

Campaigns heading -> clickable button. ChevronDown expanded,
ChevronRight collapsed. Toggles grid visibility. Shows count
(e.g. 'Campaigns (61)'). Preserves Create Campaign button.

State: campaignsCollapsed in AdminView. aria-expanded/controls for a11y.
---
 src/App.js | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index d296f2a..acfcc70 100644
--- a/src/App.js
+++ b/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,12 +2343,14 @@ function AdminView({ userId }) {
             </button>
           </div>
 
-          {campaignsWithDetails.length === 0 && !isLoadingCampaigns && (
-            <p className="text-stone-400">No campaigns yet. Create one to get started!</p>
-          )}
+          {!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">
-            {campaignsWithDetails.map(campaign => {
+              <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})` }
                 : {};
@@ -2382,7 +2396,9 @@ function AdminView({ userId }) {
                 </div>
               );
             })}
-          </div>
+              </div>
+            </>
+          )}
         </div>
 
         {showCreateModal && (