feat(UI): hide NPC/monster HP toggle (player display)

Mirrors hidePlayerHp. New hideNpcHp flag on activeDisplay doc.
- AdminView: 'Hide NPC/monster HP' switch in Player Display settings.
- DisplayView: HP bar gated by !(hideNpcHp && p.type !== 'character').
  Covers monsters + NPCs (all non-player).
- Default false (show NPC HP) — opposite of player HP default true.

updateDoc patch (BUG-4 pattern). No clobber.

Test: HideHpToggle selector scoped to 'hide player hp' (now 2 switches).

src/App.js

@@ -1658,6 +1658,7 @@ 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;
@@ -1668,6 +1669,15 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
     }
   };
 
+  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.");
@@ -1915,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>
 
@@ -2592,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) {
@@ -2693,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

src/tests/HideHpToggle.test.js

@@ -43,7 +43,7 @@ describe('BUG-4: hide-player-HP toggle preserves activeDisplay', () => {
     await selectCampaignByName('Camp');
 
     // find the hide-player-HP toggle (role switch)
-    const toggle = await screen.findByRole('switch', { name: /hide/i }, { timeout: 3000 });
+    const toggle = await screen.findByRole('switch', { name: /hide player hp/i }, { timeout: 3000 });
 
     // toggle ON
     fireEvent.click(toggle);