feat(topbar): add expandable metadata drawer with Details toggle (#175)

- DocumentMetadataDrawer: 3-column grid (≥1024px), single-column mobile
  Shows document date, location, status, person cards, tag chips
  Person names link to /persons/{id}, tags link to filtered search
  Empty states for missing persons/tags, receiver cap with expand button
- DocumentTopBar: "Details" toggle button with animated SVG chevron
  44×44px tap target, aria-expanded, Svelte slide transition
  Semantic color tokens for dark mode compatibility
- Remove DocumentBottomPanel from document detail page
  Bottom panel replaced by topbar drawer for metadata access
  Simplify +page.server.ts (remove comments loading)
  Update page.server.spec.ts for new load signature

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/routes/documents/[id]/+page.server.ts

@@ -1,17 +1,12 @@
 import { error, redirect } from '@sveltejs/kit';
-import { env } from '$env/dynamic/private';
 import { createApiClient } from '$lib/api.server';
 import { getErrorMessage } from '$lib/errors';
 
 export async function load({ params, fetch }) {
 	const { id } = params;
 	const api = createApiClient(fetch);
-	const base = env.API_INTERNAL_URL || 'http://localhost:8080';
 
-	const [docResult, commentsRes] = await Promise.all([
-		api.GET('/api/documents/{id}', { params: { path: { id } } }),
-		fetch(`${base}/api/documents/${id}/comments`).catch(() => null)
-	]);
+	const docResult = await api.GET('/api/documents/{id}', { params: { path: { id } } });
 
 	if (docResult.response.status === 401) throw redirect(302, '/login');
 
@@ -20,14 +15,5 @@ export async function load({ params, fetch }) {
 		throw error(docResult.response.status, getErrorMessage(code));
 	}
 
-	let comments: unknown[] = [];
-	if (commentsRes?.ok) {
-		try {
-			comments = await commentsRes.json();
-		} catch {
-			// ignore invalid response
-		}
-	}
-
-	return { document: docResult.data!, comments };
+	return { document: docResult.data! };
 }

frontend/src/routes/documents/[id]/+page.svelte

@@ -3,9 +3,7 @@ import { onMount } from 'svelte';
 import { page } from '$app/state';
 import DocumentTopBar from '$lib/components/DocumentTopBar.svelte';
 import DocumentViewer from '$lib/components/DocumentViewer.svelte';
-import DocumentBottomPanel from '$lib/components/DocumentBottomPanel.svelte';
 import AnnotationSidePanel from '$lib/components/AnnotationSidePanel.svelte';
-import type { DocumentPanelTab } from '$lib/types';
 
 let { data } = $props();
 
@@ -62,38 +60,17 @@ let annotateMode = $state(false);
 let activeAnnotationId = $state<string | null>(null);
 let activeAnnotationPage = $state<number | null>(null);
 
-// Close the panel when entering annotate mode so the PDF is fully visible.
-$effect(() => {
-	if (annotateMode) panelOpen = false;
-});
+// ── Navigation / init ─────────────────────────────────────────────────────────
 
-// ── Bottom panel state ────────────────────────────────────────────────────────
-
-let panelOpen = $state(false);
-let panelHeight = $state(0); // set to full height on mount
 let navHeight = $state(0);
-let activeTab = $state<DocumentPanelTab>('metadata');
 
 onMount(() => {
 	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
 
-	const topbar = document.querySelector('[data-topbar]');
-	panelHeight = window.innerHeight - navHeight - (topbar?.getBoundingClientRect().height ?? 0);
-
 	if (targetAnnotationId) {
-		// Deep-link into an annotation comment: open the side panel
 		activeAnnotationId = targetAnnotationId;
-	} else if (targetCommentId) {
-		// Deep-link into a document-level comment: open discussion tab
-		panelOpen = true;
-		activeTab = 'discussion';
-	} else if (!doc?.filePath) {
-		// No file yet — open to metadata so the panel is immediately useful.
-		panelOpen = true;
-		activeTab = 'metadata';
 	}
 
-	// Track last-visited document for the dashboard resume strip
 	if (doc?.id) {
 		localStorage.setItem(
 			'familienarchiv.lastVisited',
@@ -106,8 +83,6 @@ onMount(() => {
 			if (activeAnnotationId) {
 				activeAnnotationId = null;
 				activeAnnotationPage = null;
-			} else if (panelOpen) {
-				panelOpen = false;
 			}
 		}
 	}
@@ -160,16 +135,4 @@ onMount(() => {
 			}}
 		/>
 	</div>
-
-	<DocumentBottomPanel
-		doc={doc}
-		comments={(data.comments ?? []) as never[]}
-		canComment={canComment}
-		currentUserId={currentUserId}
-		canAdmin={canAdmin}
-		targetCommentId={targetCommentId}
-		bind:open={panelOpen}
-		bind:height={panelHeight}
-		bind:activeTab={activeTab}
-	/>
 </div>

frontend/src/routes/documents/[id]/page.server.spec.ts

@@ -8,17 +8,10 @@ import { createApiClient } from '$lib/api.server';
 
 beforeEach(() => vi.clearAllMocks());
 
-function makeCommentsResponse(comments: unknown[]) {
-	return {
-		ok: true,
-		json: vi.fn().mockResolvedValue(comments)
-	};
-}
-
 // ─── happy path ───────────────────────────────────────────────────────────────
 
 describe('document detail load — happy path', () => {
-	it('returns document and comments on success', async () => {
+	it('returns document on success', async () => {
 		vi.mocked(createApiClient).mockReturnValue({
 			GET: vi.fn().mockResolvedValue({
 				response: { ok: true, status: 200 },
@@ -26,7 +19,7 @@ describe('document detail load — happy path', () => {
 			})
 		} as ReturnType<typeof createApiClient>);
 
-		const mockFetch = vi.fn().mockResolvedValue(makeCommentsResponse([{ id: 'c1', body: 'Hi' }]));
+		const mockFetch = vi.fn();
 
 		const result = await load({
 			params: { id: '123' },
@@ -34,45 +27,6 @@ describe('document detail load — happy path', () => {
 		});
 
 		expect(result.document.title).toBe('Testbrief');
-		expect(result.comments).toHaveLength(1);
-	});
-
-	it('returns empty comments when the comments fetch fails', async () => {
-		vi.mocked(createApiClient).mockReturnValue({
-			GET: vi.fn().mockResolvedValue({
-				response: { ok: true, status: 200 },
-				data: { id: '123', title: 'Testbrief' }
-			})
-		} as ReturnType<typeof createApiClient>);
-
-		// fetch throws a network error for the comments endpoint
-		const mockFetch = vi.fn().mockRejectedValue(new Error('Network error'));
-
-		const result = await load({
-			params: { id: '123' },
-			fetch: mockFetch as unknown as typeof fetch
-		});
-
-		expect(result.document.title).toBe('Testbrief');
-		expect(result.comments).toEqual([]);
-	});
-
-	it('returns empty comments when the comments response is not ok', async () => {
-		vi.mocked(createApiClient).mockReturnValue({
-			GET: vi.fn().mockResolvedValue({
-				response: { ok: true, status: 200 },
-				data: { id: '123', title: 'Testbrief' }
-			})
-		} as ReturnType<typeof createApiClient>);
-
-		const mockFetch = vi.fn().mockResolvedValue({ ok: false });
-
-		const result = await load({
-			params: { id: '123' },
-			fetch: mockFetch as unknown as typeof fetch
-		});
-
-		expect(result.comments).toEqual([]);
 	});
 });
 
@@ -87,7 +41,7 @@ describe('document detail load — error paths', () => {
 			})
 		} as ReturnType<typeof createApiClient>);
 
-		const mockFetch = vi.fn().mockResolvedValue({ ok: false });
+		const mockFetch = vi.fn();
 
 		await expect(
 			load({ params: { id: 'missing' }, fetch: mockFetch as unknown as typeof fetch })
@@ -102,7 +56,7 @@ describe('document detail load — error paths', () => {
 			})
 		} as ReturnType<typeof createApiClient>);
 
-		const mockFetch = vi.fn().mockResolvedValue({ ok: false });
+		const mockFetch = vi.fn();
 
 		await expect(
 			load({ params: { id: 'secret' }, fetch: mockFetch as unknown as typeof fetch })
@@ -117,7 +71,7 @@ describe('document detail load — error paths', () => {
 			})
 		} as ReturnType<typeof createApiClient>);
 
-		const mockFetch = vi.fn().mockResolvedValue({ ok: false });
+		const mockFetch = vi.fn();
 
 		await expect(
 			load({ params: { id: 'any' }, fetch: mockFetch as unknown as typeof fetch })