comments-ux: figma bubble pins, floating panel, seen/reactions/mentions UI, theme follow (0001 A–E + 0002)

- GAL pin = one closed polygon: round body, squared-off bottom-left corner
  ON the anchor; PIN gains unread (accent ring); tuner knobs; shipped
  defaults r9/ring4/alpha.9. DOM hit/highlight sized+offset from a LIVE
  pin-geometry radius store the tuner feeds.
- Floating comments panel: draggable (shared useDraggablePanel with
  always-onscreen restore; overlay FAB retrofitted), collapsible to header,
  header carries add/show-hide/mark-all; unread badges (rose on mention).
- Reactions (emoji-mart lazy, quick-row) + @-mention autocomplete
  (MentionInput; backend roster with presence/author fallback).
- Theme: ?theme= > storage > OS, no-flash boot, toggles (HomePage + overlay
  View row), boot-seeded pcbjam-dark schematic colors + kicadSetColorTheme /
  kicadSetDarkChrome bridges (canvas + wx chrome live flip), light/dark
  variants across all overlay surfaces.
- e2e: panel/seen/reactions/mentions/theme specs + resize-spec geometry;
  bumps pcbjam-shared (flat-key seen/reactions + listCollaborators) and
  wxwidgets (dark chrome) pointers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HLwn1toiNKi1MgxGKnZTes

tests/web/comments-reactions.spec.ts

@@ -0,0 +1,86 @@
+import { test, expect, type Page } from '@playwright/test';
+import { openOverlayMenu } from './overlay-menu';
+
+/**
+ * Emoji reactions e2e (comments-ux 0001 D): quick-row toggle on/off, two
+ * users reacting with the same emoji both counted (flat own-key writes — no
+ * LWW clobber), and the lazy full picker mounting on demand.
+ */
+
+const SCOPE = 'default';
+const ROUTE = 'demo.kicad_sch';
+const TITLE = /demo — Schematic Editor/i;
+
+async function bootAs(page: Page, user: string): Promise<void> {
+  await page.goto(`/${SCOPE}/projects/demo/${ROUTE}?user=${user}`);
+  await expect(page.locator('#canvas')).toBeVisible({ timeout: 120000 });
+  await expect
+    .poll(() => page.title(), { timeout: 120000, intervals: [1000] })
+    .toMatch(TITLE);
+  await openOverlayMenu(page);
+  await expect(page.getByTestId('comment-mode-toggle')).toBeVisible({ timeout: 30000 });
+}
+
+async function deleteAllThreads(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const ctl = (window as unknown as {
+      __pcbjamComments?: {
+        threads(): Array<{ id: string }>;
+        deleteThread(id: string): void;
+      };
+    }).__pcbjamComments;
+    ctl?.threads().forEach((t) => ctl.deleteThread(t.id));
+  });
+  await expect(page.getByTestId('comment-pin')).toHaveCount(0);
+}
+
+test('reactions: quick-row toggle, concurrent same-emoji, lazy full picker', async ({
+  page,
+  context,
+}) => {
+  test.setTimeout(360000); // two full tool boots
+
+  await bootAs(page, 'alice');
+  await deleteAllThreads(page);
+  const pageB = await context.newPage();
+  await bootAs(pageB, 'bob');
+
+  // alice creates and keeps the popover open.
+  await page.getByTestId('comment-mode-toggle').click();
+  await page.getByTestId('comment-click-catcher').click({ position: { x: 400, y: 250 } });
+  await page.getByTestId('comment-composer').locator('textarea').fill('react to me');
+  await page.getByTestId('comment-submit').click();
+  await expect(page.getByTestId('comment-popover')).toBeVisible();
+
+  // alice: 👍 via the quick row ("add reaction" shows on message hover).
+  await page.getByTestId('comment-message').hover();
+  await page.getByTestId('comment-react').click();
+  await page.getByTestId('comment-quick-react').locator('[data-emoji="👍"]').click();
+  const chip = page.getByTestId('comment-reaction-chip');
+  await expect(chip).toHaveCount(1);
+  await expect(chip).toContainText('1');
+
+  // bob opens the same thread and clicks the existing chip → count 2 in BOTH.
+  await expect(pageB.getByTestId('comment-pin')).toHaveCount(1, { timeout: 20000 });
+  await pageB.getByTestId('comment-pin').click();
+  const chipB = pageB.getByTestId('comment-reaction-chip');
+  await expect(chipB).toContainText('1', { timeout: 20000 });
+  await chipB.click();
+  await expect(chipB).toContainText('2', { timeout: 20000 });
+  await expect(chip).toContainText('2', { timeout: 20000 });
+
+  // Toggle off (bob) → back to 1 everywhere.
+  await chipB.click();
+  await expect(chip).toContainText('1', { timeout: 20000 });
+
+  // Full picker: quick row's "+" mounts the lazy emoji-mart chunk.
+  await page.getByTestId('comment-message').hover();
+  await page.getByTestId('comment-react').click();
+  await page.getByTestId('comment-react-more').click();
+  await expect(page.getByTestId('emoji-picker')).toBeVisible();
+  await expect(page.locator('em-emoji-picker')).toBeVisible({ timeout: 30000 });
+  await page.keyboard.press('Escape');
+  await expect(page.getByTestId('emoji-picker')).toHaveCount(0);
+
+  await pageB.close();
+});