Add About & Privacy and Donate modals (M6, §01)

src/app/components/AboutModal.test.tsx

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { AboutModal } from './AboutModal';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => root.render(<AboutModal />));
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe('AboutModal', () => {
+  test('renders the app name', () => {
+    expect(container.textContent).toContain('Astrolabe');
+  });
+
+  test('renders the app version from __APP_VERSION__', () => {
+    // __APP_VERSION__ is injected by vite.config.ts `define` (shared with Vitest).
+    expect(container.textContent).toContain(__APP_VERSION__);
+  });
+
+  test('renders all five keyboard shortcuts from spec §01D', () => {
+    // Platform-specific modifier (Cmd on Mac, Ctrl elsewhere) + the five actions.
+    const text = container.textContent ?? '';
+    // Key combinations — platform-aware modifier is either ⌘ or Ctrl
+    expect(text).toMatch(/(?:⌘|Ctrl)\+Shift\+N/);
+    expect(text).toMatch(/(?:⌘|Ctrl)\+K/);
+    expect(text).toMatch(/(?:⌘|Ctrl)\+S/);
+    expect(text).toMatch(/(?:⌘|Ctrl)\+,/);
+    expect(text).toContain('Esc');
+  });
+
+  test('shortcuts are in an accessible table with an aria-label', () => {
+    const table = container.querySelector('table[aria-label]');
+    expect(table).not.toBeNull();
+    expect(table!.getAttribute('aria-label')).toBe('Keyboard shortcuts');
+  });
+
+  test('renders a Privacy section that mentions local-first posture', () => {
+    const text = container.textContent ?? '';
+    // Core privacy claims from SOUL.md / spec §10
+    expect(text).toMatch(/no account/i);
+    expect(text).toMatch(/no telemetry|no analytics|no tracking/i);
+    expect(text).toMatch(/offline/i);
+  });
+
+  test('has three labelled sections: identity, shortcuts, privacy', () => {
+    const headings = Array.from(container.querySelectorAll('h3')).map(
+      (h) => h.textContent?.toLowerCase() ?? '',
+    );
+    expect(headings.some((h) => h.includes('astrolabe'))).toBe(true);
+    expect(headings.some((h) => h.includes('keyboard'))).toBe(true);
+    expect(headings.some((h) => h.includes('privacy'))).toBe(true);
+  });
+});