feat(web): notifications bell, unread badge and inbox panel in the header (#5342)

- The bell sits between search and the user menu. Its badge is
  parchment on obsidian, not the accent, which the house style keeps
  off general chrome. It counts up to 9, then shows 9+.
- The panel lists the server-rendered title, body and relative time,
  newest first, with unread rows marked. Clicking a row marks it read
  and opens its link. "Mark all read" appears while anything is unread,
  and an empty inbox says "Nothing waiting for you."
- createNotificationsQuery and createUnreadCountQuery poll every 60s
  while the tab is visible. The `notification.created` live event
  invalidates ['notifications'] so the badge and list refresh promptly.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/Shell.test.ts

@@ -24,6 +24,23 @@ vi.mock('$lib/auth/store.svelte', () => ({
   logout: vi.fn().mockResolvedValue(undefined)
 }));
 
+// The bell's queries need a QueryClient the Shell tests do not provide; its own
+// behaviour is covered in NotificationBell.test.ts.
+vi.mock('@tanstack/svelte-query', async (orig) => {
+  const actual = (await orig()) as Record<string, unknown>;
+  return { ...actual, useQueryClient: () => ({ invalidateQueries: vi.fn() }) };
+});
+vi.mock('$lib/api/notifications', async () => {
+  const { mockQuery } = await import('../../test-utils/query');
+  return {
+    createUnreadCountQuery: () => mockQuery({ data: 0 }),
+    createNotificationsQuery: () => mockQuery({ data: { items: [], unread_count: 0 } }),
+    markNotificationRead: vi.fn(),
+    markAllNotificationsRead: vi.fn(),
+    badgeLabel: () => ''
+  };
+});
+
 import Shell from './Shell.svelte';
 import { logout } from '$lib/auth/store.svelte';
 import { goto } from '$app/navigation';