Merge pull request 'Rework backend' (#2) from rework-backend into main

Reviewed-on: #2

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
+  Maximize2, Minimize2, Moon, Coffee, Clock, ChevronRight
 } from 'lucide-react';
 
 // Custom CSS for death animation (player view only)
@@ -444,9 +444,10 @@ function EditParticipantModal({ participant, onClose, onSave }) {
           />
         </div>
         <div>
-          <label className="block text-sm font-medium text-stone-300">Initiative</label>
+          <label htmlFor="edit-initiative" className="block text-sm font-medium text-stone-300">Initiative</label>
           <input
             type="number"
+            id="edit-initiative"
             value={initiative}
             onChange={(e) => setInitiative(e.target.value)}
             className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
@@ -781,6 +782,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
   const [selectedCharacterId, setSelectedCharacterId] = useState('');
   const [monsterInitMod, setMonsterInitMod] = useState(MONSTER_DEFAULT_INIT_MOD);
   const [maxHp, setMaxHp] = useState(DEFAULT_MAX_HP);
+  const [manualInitiative, setManualInitiative] = useState('');
   const [isNpc, setIsNpc] = useState(false);
   const [editingParticipant, setEditingParticipant] = useState(null);
   const [hpChangeValues, setHpChangeValues] = useState({});
@@ -817,6 +819,8 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
     let modifier = 0;
     let currentMaxHp = parseInt(maxHp, 10) || DEFAULT_MAX_HP;
     let participantIsNpc = false;
+    const manualInit = manualInitiative !== '' && !isNaN(parseInt(manualInitiative, 10));
+    const finalInitiative = manualInit ? parseInt(manualInitiative, 10) : null;
 
     if (participantType === 'character') {
       const character = campaignCharacters.find(c => c.id === selectedCharacterId);
@@ -836,13 +840,13 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
       participantIsNpc = isNpc;
     }
 
-    const finalInitiative = initiativeRoll + modifier;
+    const computedInitiative = manualInit ? finalInitiative : (initiativeRoll + modifier);
     const newParticipant = {
       id: generateId(),
       name: nameToAdd,
       type: participantType,
       originalCharacterId: participantType === 'character' ? selectedCharacterId : null,
-      initiative: finalInitiative,
+      initiative: computedInitiative,
       maxHp: currentMaxHp,
       currentHp: currentMaxHp,
       isNpc: participantType === 'monster' ? participantIsNpc : false,
@@ -854,19 +858,21 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
 
     try {
       await storage.updateDoc(encounterPath, {
-        participants: [...participants, newParticipant]
+        participants: sortParticipantsByInitiative([...participants, newParticipant], participants),
+        ...syncTurnOrder([...participants, newParticipant]),
       });
-      logAction(`${nameToAdd} added to encounter (Initiative: ${finalInitiative})`, { encounterName: encounter.name }, {
+      logAction(`${nameToAdd} added to encounter (Initiative: ${computedInitiative})`, { encounterName: encounter.name }, {
         encounterPath,
         updates: { participants: [...participants] },
       });
 
       setLastRollDetails({
         name: nameToAdd,
-        roll: initiativeRoll,
-        mod: modifier,
-        total: finalInitiative,
-        type: participantIsNpc ? 'NPC' : participantType
+        roll: manualInit ? null : initiativeRoll,
+        mod: manualInit ? null : modifier,
+        total: computedInitiative,
+        type: participantIsNpc ? 'NPC' : participantType,
+        manual: manualInit,
       });
       setTimeout(() => setLastRollDetails(null), ROLL_DISPLAY_DURATION);
 
@@ -876,6 +882,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
       setSelectedCharacterId('');
       setMonsterInitMod(MONSTER_DEFAULT_INIT_MOD);
       setIsNpc(false);
+      setManualInitiative('');
     } catch (err) {
       console.error("Error adding participant:", err);
       alert("Failed to add participant. Please try again.");
@@ -934,9 +941,13 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
     const updatedParticipants = participants.map(p =>
       p.id === editingParticipant.id ? { ...p, ...updatedData } : p
     );
+    const reslotted = sortParticipantsByInitiative(updatedParticipants, participants);
 
     try {
-      await storage.updateDoc(encounterPath, { participants: updatedParticipants });
+      await storage.updateDoc(encounterPath, {
+        participants: reslotted,
+        ...syncTurnOrder(reslotted),
+      });
       setEditingParticipant(null);
     } catch (err) {
       console.error("Error updating participant:", err);
@@ -944,6 +955,28 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
     }
   };
 
+  // Inline initiative edit (FEAT-3): blur/Enter commits. Reslots participant
+  // into correct list position (stable sort by init desc, tie-break original
+  // index). Display + AdminView both reflect new order. Pre-combat only —
+  // field gated to !started||paused elsewhere.
+  const handleInlineInitiative = async (participantId, value) => {
+    if (!db) return;
+    const n = parseInt(value, 10);
+    if (isNaN(n)) return;
+    const updatedParticipants = participants.map(p =>
+      p.id === participantId ? { ...p, initiative: n } : p
+    );
+    const reslotted = sortParticipantsByInitiative(updatedParticipants, participants);
+    try {
+      await storage.updateDoc(encounterPath, {
+        participants: reslotted,
+        ...syncTurnOrder(reslotted),
+      });
+    } catch (err) {
+      console.error("Error updating initiative:", err);
+    }
+  };
+
   const requestDeleteParticipant = (participantId, participantName) => {
     setItemToDelete({ id: participantId, name: participantName });
     setShowDeleteConfirm(true);
@@ -1307,6 +1340,19 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
+              <div className="md:col-span-2">
+                <label htmlFor="manualInitiative" className="block text-sm font-medium text-stone-300">
+                  Initiative <span className="text-xs text-stone-400">(blank=roll)</span>
+                </label>
+                <input
+                  type="number"
+                  id="manualInitiative"
+                  value={manualInitiative}
+                  onChange={(e) => setManualInitiative(e.target.value)}
+                  placeholder="auto"
+                  className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+                />
+              </div>
               <div className="md:col-span-2">
                 <label htmlFor="monsterMaxHp" className="block text-sm font-medium text-stone-300">
                   Max HP
@@ -1358,6 +1404,19 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
+              <div className="md:col-span-2">
+                <label htmlFor="charManualInitiative" className="block text-sm font-medium text-stone-300">
+                  Initiative <span className="text-xs text-stone-400">(blank=roll)</span>
+                </label>
+                <input
+                  type="number"
+                  id="charManualInitiative"
+                  value={manualInitiative}
+                  onChange={(e) => setManualInitiative(e.target.value)}
+                  placeholder="auto"
+                  className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+                />
+              </div>
             </>
           )}
 
@@ -1375,8 +1434,10 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
 
         {lastRollDetails && (
           <p className="text-sm text-green-400 mt-2 mb-2 text-center">
-            {lastRollDetails.name} ({lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type})
-            : Rolled d20 ({lastRollDetails.roll}) {formatInitMod(lastRollDetails.mod)} = {lastRollDetails.total} Initiative
+            {lastRollDetails.manual
+              ? `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type}): Set initiative ${lastRollDetails.total}`
+              : `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type}): Rolled d20 (${lastRollDetails.roll}) ${formatInitMod(lastRollDetails.mod)} = ${lastRollDetails.total} Initiative`
+            }
           </p>
         )}
 
@@ -1422,9 +1483,27 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
                       )}
                       {isDead && <span className="ml-2 text-xs text-red-300 font-semibold">{p.type === 'character' ? '(Unconscious)' : '(Dead)'}</span>}
                     </p>
-                    <p className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-stone-200'}`}>
-                      Init: {p.initiative} | HP: {p.currentHp}/{p.maxHp}
-                    </p>
+                    <div className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-stone-200'} flex items-center gap-2`}>
+                      <span className="inline-flex items-center gap-1">
+                        <label htmlFor={`init-${p.id}`} className="sr-only">Initiative</label>
+                        <input
+                          type="number"
+                          id={`init-${p.id}`}
+                          defaultValue={p.initiative}
+                          key={p.initiative}
+                          min="0"
+                          max="99"
+                          disabled={encounter.isStarted && !encounter.isPaused}
+                          onChange={(e) => { if (e.target.value.length > 2) e.target.value = e.target.value.slice(0, 2); }}
+                          onFocus={(e) => e.target.select()}
+                          onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); }}
+                          onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
+                          className="w-10 px-1 py-0.5 bg-stone-800 border border-stone-700 rounded-md shadow-sm text-white text-sm focus:outline-none focus:ring-1 focus:ring-amber-600 focus:border-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                          aria-label={`Initiative for ${p.name}`}
+                        />
+                      </span>
+                      <span>HP: {p.currentHp}/{p.maxHp}</span>
+                    </div>
                     
                     {/* Death Saves - only player characters make death saving throws */}
                     {isDead && encounter.isStarted && p.type === 'character' && (
@@ -1579,16 +1658,26 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
   const [showEndConfirm, setShowEndConfirm] = useState(false);
   const { data: activeDisplayData } = useFirestoreDocument(getPath.activeDisplay());
   const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
+  const hideNpcHp = activeDisplayData?.hideNpcHp ?? false;
 
   const handleToggleHidePlayerHp = async () => {
     if (!db) return;
     try {
-      await storage.setDoc(getPath.activeDisplay(), { hidePlayerHp: !hidePlayerHp }, { merge: true });
+      await storage.updateDoc(getPath.activeDisplay(), { hidePlayerHp: !hidePlayerHp });
     } catch (err) {
       console.error("Error toggling hidePlayerHp:", err);
     }
   };
 
+  const handleToggleHideNpcHp = async () => {
+    if (!db) return;
+    try {
+      await storage.updateDoc(getPath.activeDisplay(), { hideNpcHp: !hideNpcHp });
+    } catch (err) {
+      console.error("Error toggling hideNpcHp:", err);
+    }
+  };
+
   const handleStartEncounter = async () => {
     if (!db || !encounter.participants || encounter.participants.length === 0) {
       alert("Add participants first.");
@@ -1616,10 +1705,10 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
         turnOrderIds: sortedParticipants.map(p => p.id)
       });
 
-      await storage.setDoc(getPath.activeDisplay(), {
+      await storage.updateDoc(getPath.activeDisplay(), {
         activeCampaignId: campaignId,
         activeEncounterId: encounter.id
-      }, { merge: true });
+      });
 
       logAction(`Combat started: "${encounter.name}" — ${sortedParticipants[0].name}'s turn (Round 1)`, { encounterName: encounter.name }, {
         encounterPath,
@@ -1747,10 +1836,10 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
         turnOrderIds: []
       });
 
-      await storage.setDoc(getPath.activeDisplay(), {
+      await storage.updateDoc(getPath.activeDisplay(), {
         activeCampaignId: null,
         activeEncounterId: null
-      }, { merge: true });
+      });
 
       logAction(`Combat ended: "${encounter.name}"`, { encounterName: encounter.name }, {
         encounterPath,
@@ -1836,6 +1925,17 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
               <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hidePlayerHp ? 'translate-x-4' : 'translate-x-0'}`} />
             </button>
           </label>
+          <label className="flex items-center justify-between cursor-pointer gap-2 mt-2">
+            <span className="text-sm text-stone-300">Hide NPC/monster HP</span>
+            <button
+              role="switch"
+              aria-checked={hideNpcHp}
+              onClick={handleToggleHideNpcHp}
+              className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hideNpcHp ? 'bg-amber-600' : 'bg-stone-600'}`}
+            >
+              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hideNpcHp ? 'translate-x-4' : 'translate-x-0'}`} />
+            </button>
+          </label>
         </div>
       </div>
 
@@ -1965,15 +2065,15 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
       const currentActiveEncounter = activeDisplayInfo?.activeEncounterId;
 
       if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) {
-        await storage.setDoc(getPath.activeDisplay(), {
+        await storage.updateDoc(getPath.activeDisplay(), {
           activeCampaignId: null,
           activeEncounterId: null,
-        }, { merge: true });
+        });
       } else {
-        await storage.setDoc(getPath.activeDisplay(), {
+        await storage.updateDoc(getPath.activeDisplay(), {
           activeCampaignId: campaignId,
           activeEncounterId: encounterId,
-        }, { merge: true });
+        });
       }
     } catch (err) {
       console.error("Error toggling Player Display:", err);
@@ -2116,6 +2216,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) {
@@ -2243,7 +2344,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"
@@ -2252,12 +2364,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})` }
                 : {};
@@ -2283,12 +2397,12 @@ function AdminView({ userId }) {
                         <span className="inline-flex items-center">
                           <Swords size={12} className="mr-1" /> {campaign.encounterCount === undefined ? '...' : campaign.encounterCount} Encounters
                         </span>
-                        {campaign.createdAt && (
-                          <span className="inline-flex items-center opacity-80">
-                            {new Date(campaign.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}
-                          </span>
-                        )}
                       </div>
+                      {campaign.createdAt && (
+                        <div className="text-xs text-stone-300 opacity-70 mt-1">
+                          <Clock size={12} className="mr-1 inline-block" /> Created: {new Date(campaign.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}
+                        </div>
+                      )}
                     </div>
                     <button
                       onClick={(e) => {
@@ -2303,7 +2417,9 @@ function AdminView({ userId }) {
                 </div>
               );
             })}
-          </div>
+              </div>
+            </>
+          )}
         </div>
 
         {showCreateModal && (
@@ -2497,6 +2613,7 @@ function DisplayView() {
 
   const { name, participants, round, currentTurnParticipantId, isStarted, isPaused } = activeEncounterData;
   const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
+  const hideNpcHp = activeDisplayData?.hideNpcHp ?? false;
 
   let participantsToRender = [];
   if (participants) {
@@ -2598,7 +2715,7 @@ function DisplayView() {
                   </span>
                 </div>
 
-                {!(hidePlayerHp && p.type === 'character') && (
+                {!(hidePlayerHp && p.type === 'character') && !(hideNpcHp && p.type !== 'character') && (
                   <div className="flex justify-between items-center">
                     <div className="w-full bg-stone-700 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-stone-600">
                       <div