fix(BUG-12): campaign selection follows activeDisplay

Selection effect had `!selectedCampaignId` guard — once any campaign
selected, new activeDisplay.activeCampaignId writes ignored. Replay tool
writes activeDisplay to new campaign each run; UI stayed on old selection
=> displayed wrong campaign data.

Removed guard. Selection now syncs when activeCampaignId differs from
current selection. Manual deselect (null) does not force-select (RED test
locks this).

Also fixed test helper bug: createCampaignViaUI/createEncounterViaUI
returned FIRST setDoc match (idA for all creates). Now filters by name +
.pop() for latest. This masked the real bug for several debug cycles.

Tests: 2 new (SelectionFollowsActiveDisplay), both green. No regressions
in full FE suite (App, Combat, DisplayView, Encounter, HideHpToggle,
Logs, Participant, storage all pass). Combat.scenario = pre-existing
BUG-11 crash, not regression.

src/tests/SelectionFollowsActiveDisplay.test.js

@@ -0,0 +1,49 @@
+// RED test: campaign selection must follow activeDisplay.activeCampaignId changes.
+// Bug: once selected, new activeDisplay writes ignored (guard `!selectedCampaignId`).
+// Scenario: replay tool writes activeDisplay to new campaign -> UI must switch.
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MOCK_DB } from '../__mocks__/firebase/_mock-db';
+import { renderApp, createCampaignViaUI, selectCampaignByName } from './testHelpers';
+
+const PUBLIC_DATA = 'artifacts/ttrpg-initiative-tracker-default/public/data';
+
+describe('Selection follows activeDisplay (BUG-12)', () => {
+  test('new activeCampaignId switches selection', async () => {
+    await renderApp();
+    const idA = await createCampaignViaUI('Campaign A');
+    const idB = await createCampaignViaUI('Campaign B');
+
+    // seed activeDisplay so useFirestoreDocument has a value to emit
+    const activePath = Object.keys(MOCK_DB._state.docs).find(p => p.includes('/activeDisplay/status'))
+      || `${PUBLIC_DATA}/activeDisplay/status`;
+    MOCK_DB.set(activePath, { activeCampaignId: null, activeEncounterId: null });
+
+    // manually select A first
+    await selectCampaignByName('Campaign A');
+    expect(screen.getByText(/Managing:/i).textContent).toMatch(/Campaign A/);
+
+    // simulate replay/another-DM setting activeDisplay to B
+    MOCK_DB.merge(activePath, { activeCampaignId: idB });
+
+    // selection should now follow -> Managing: Campaign B
+    await waitFor(() => {
+      expect(screen.getByText(/Managing:/i).textContent).toMatch(/Campaign B/);
+    });
+  });
+
+  test('activeDisplay cleared (null) does not force-select', async () => {
+    await renderApp();
+    const idA = await createCampaignViaUI('Persist A');
+    const activePath = Object.keys(MOCK_DB._state.docs).find(p => p.includes('/activeDisplay/status'))
+      || `${PUBLIC_DATA}/activeDisplay/status`;
+    MOCK_DB.set(activePath, { activeCampaignId: null, activeEncounterId: null });
+    await selectCampaignByName('Persist A');
+
+    MOCK_DB.merge(activePath, { activeCampaignId: null });
+
+    // should stay on A (manual selection persists)
+    expect(screen.getByText(/Managing:/i).textContent).toMatch(/Persist A/);
+  });
+});

src/tests/testHelpers.js

@@ -33,10 +33,10 @@ export async function createCampaignViaUI(name = 'Test Campaign') {
   await waitFor(() => screen.getByLabelText(/Campaign Name/i));
   fireEvent.change(screen.getByLabelText(/Campaign Name/i), { target: { value: name } });
   fireEvent.click(screen.getByRole('button', { name: /^Create$/i }));
-  // wait for setDoc recorded
+  // wait for setDoc recorded with this name (latest match)
   const { getCalls } = require('../__mocks__/firebase/_mock-db');
-  await waitFor(() => getCalls().find(c => c.fn === 'setDoc' && c.path.includes('/campaigns/')));
-  const call = getCalls().find(c => c.fn === 'setDoc' && c.path.includes('/campaigns/'));
+  await waitFor(() => getCalls().find(c => c.fn === 'setDoc' && c.path.includes('/campaigns/') && c.data.name === name));
+  const call = getCalls().filter(c => c.fn === 'setDoc' && c.path.includes('/campaigns/') && c.data.name === name).pop();
   return call.path.split('/').pop(); // campaign id
 }
 
@@ -54,8 +54,8 @@ export async function createEncounterViaUI(name = 'Test Encounter') {
   fireEvent.change(screen.getByLabelText(/Encounter Name/i), { target: { value: name } });
   fireEvent.click(screen.getByRole('button', { name: /^Create$/i }));
   const { getCalls } = require('../__mocks__/firebase/_mock-db');
-  await waitFor(() => getCalls().find(c => c.fn === 'setDoc' && c.path.includes('/encounters/')));
-  const call = getCalls().find(c => c.fn === 'setDoc' && c.path.includes('/encounters/'));
+  await waitFor(() => getCalls().find(c => c.fn === 'setDoc' && c.path.includes('/encounters/') && c.data.name === name));
+  const call = getCalls().filter(c => c.fn === 'setDoc' && c.path.includes('/encounters/') && c.data.name === name).pop();
   return call.path.split('/').pop();
 }