refactor(document): wire DocumentStatusChip to StatusDot; show label at all breakpoints

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

frontend/src/lib/document/DocumentMetadataDrawer.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
-import { formatDocumentStatus } from '$lib/document/documentStatusLabel';
 import { getInitials, personAvatarColor } from '$lib/person/personFormat';
 import RelationshipPill from '$lib/person/relationship/RelationshipPill.svelte';
 import DocumentDate from './DocumentDate.svelte';
+import DocumentStatusChip from './DocumentStatusChip.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
+import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -22,7 +23,7 @@ type Props = {
 	metaDateEnd?: string | null;
 	metaDateRaw?: string | null;
 	location: string | null;
-	status: string;
+	status: DocumentStatus;
 	sender: Person | null;
 	receivers: Person[];
 	tags: Tag[];
@@ -68,7 +69,6 @@ function formatGeschichteDate(g: GeschichteSummary): string {
 }
 
 const displayLocation = $derived(location ?? '—');
-const statusLabel = $derived(formatDocumentStatus(status));
 const visibleReceivers = $derived(receivers.slice(0, VISIBLE_RECEIVER_LIMIT));
 const hiddenReceiverCount = $derived(Math.max(0, receivers.length - VISIBLE_RECEIVER_LIMIT));
 const hasPersons = $derived(sender !== null || receivers.length > 0);
@@ -131,7 +131,7 @@ function getFullName(person: Person): string {
 				</div>
 				<div>
 					<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_status()}</dt>
-					<dd class="text-ink">{statusLabel}</dd>
+					<dd class="text-ink"><DocumentStatusChip status={status} /></dd>
 				</div>
 			</dl>
 		</div>

frontend/src/lib/document/DocumentStatusChip.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+import StatusDot from '$lib/shared/primitives/StatusDot.svelte';
 import {
 	formatDocumentStatus,
-	statusDotClass,
+	statusDotColor,
 	type DocumentStatus
 } from '$lib/document/documentStatusLabel';
 
@@ -11,12 +12,10 @@ type Props = {
 
 let { status }: Props = $props();
 
-const dotClass = $derived(statusDotClass(status));
+const color = $derived(statusDotColor(status));
 const label = $derived(formatDocumentStatus(status));
 </script>
 
-<span
-	class="hidden shrink-0 md:block {dotClass} h-4 w-4 rounded-full"
-	title={label}
-	aria-label={label}
-></span>
+<span data-testid="status-chip" class="inline-flex shrink-0 items-center">
+	<StatusDot color={color} label={label} />
+</span>

frontend/src/lib/document/DocumentStatusChip.svelte.test.ts

@@ -6,45 +6,63 @@ import DocumentStatusChip from './DocumentStatusChip.svelte';
 afterEach(cleanup);
 
 describe('DocumentStatusChip', () => {
-	it('renders the placeholder label and gray dot for PLACEHOLDER status', async () => {
+	it('renders the placeholder label for PLACEHOLDER status', async () => {
 		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
-
-		const dot = await page.getByTitle('Platzhalter').element();
-		expect(dot.classList.contains('bg-gray-400')).toBe(true);
+		// CSS uppercase is visual only; DOM textContent returns the Paraglide string.
+		await expect.element(page.getByText('Platzhalter')).toBeInTheDocument();
 	});
 
-	it('renders the uploaded label and emerald dot for UPLOADED status', async () => {
+	it('renders the uploaded label for UPLOADED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
-
-		const dot = await page.getByTitle('Hochgeladen').element();
-		expect(dot.classList.contains('bg-emerald-500')).toBe(true);
+		await expect.element(page.getByText('Hochgeladen')).toBeInTheDocument();
 	});
 
-	it('renders the transcribed label and blue dot for TRANSCRIBED status', async () => {
+	it('renders the transcribed label for TRANSCRIBED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'TRANSCRIBED' } });
-
-		const dot = await page.getByTitle('Transkribiert').element();
-		expect(dot.classList.contains('bg-blue-400')).toBe(true);
+		await expect.element(page.getByText('Transkribiert')).toBeInTheDocument();
 	});
 
-	it('renders the reviewed label and amber dot for REVIEWED status', async () => {
+	it('renders the reviewed label for REVIEWED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'REVIEWED' } });
-
-		const dot = await page.getByTitle('Geprüft').element();
-		expect(dot.classList.contains('bg-amber-400')).toBe(true);
+		await expect.element(page.getByText('Geprüft')).toBeInTheDocument();
 	});
 
-	it('renders the archived label and dark emerald dot for ARCHIVED status', async () => {
+	it('renders the archived label for ARCHIVED status', async () => {
 		render(DocumentStatusChip, { props: { status: 'ARCHIVED' } });
-
-		const dot = await page.getByTitle('Archiviert').element();
-		expect(dot.classList.contains('bg-emerald-600')).toBe(true);
+		await expect.element(page.getByText('Archiviert')).toBeInTheDocument();
 	});
 
-	it('exposes the status as both a title tooltip and an aria-label', async () => {
+	it('renders the dot as an aria-hidden element (decorative)', async () => {
 		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
+		const dot = document.querySelector('[aria-hidden="true"]');
+		expect(dot).not.toBeNull();
+	});
 
-		const dot = await page.getByTitle('Hochgeladen').element();
-		expect(dot.getAttribute('aria-label')).toBe('Hochgeladen');
+	it('label AND dot are visible at all breakpoints — no hidden class on chip root', async () => {
+		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
+		const root = document.querySelector('[data-testid="status-chip"]');
+		expect(root).not.toBeNull();
+		// The chip root must NOT have "hidden" class
+		expect(root?.className).not.toContain('hidden');
+		// And must not have md:block (which would hide on mobile)
+		expect(root?.className).not.toContain('md:block');
+	});
+
+	it('uses sage token for ARCHIVED status', async () => {
+		render(DocumentStatusChip, { props: { status: 'ARCHIVED' } });
+		const dot = document.querySelector('[aria-hidden="true"]');
+		expect(dot?.getAttribute('style')).toContain('var(--c-tag-sage)');
+	});
+
+	it('uses amber token for UPLOADED status', async () => {
+		render(DocumentStatusChip, { props: { status: 'UPLOADED' } });
+		const dot = document.querySelector('[aria-hidden="true"]');
+		expect(dot?.getAttribute('style')).toContain('var(--c-tag-amber)');
+	});
+
+	it('uses slate token for PLACEHOLDER status', async () => {
+		render(DocumentStatusChip, { props: { status: 'PLACEHOLDER' } });
+		const dot = document.querySelector('[aria-hidden="true"]');
+		expect(dot?.getAttribute('style')).toContain('var(--c-tag-slate)');
 	});
 });

frontend/src/lib/document/DocumentTopBar.svelte

@@ -9,6 +9,7 @@ import DocumentTopBarActions from './DocumentTopBarActions.svelte';
 import DocumentMobileMenu from './DocumentMobileMenu.svelte';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
+import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -26,7 +27,7 @@ type Doc = {
 	filePath?: string | null;
 	contentType?: string | null;
 	location?: string | null;
-	status?: string | null;
+	status?: DocumentStatus | null;
 	tags?: Tag[] | null;
 	hasTranscription?: boolean;
 };

frontend/src/routes/persons/[id]/PersonDocumentList.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
-import { formatDocumentStatus } from '$lib/document/documentStatusLabel';
 import { sortDocumentsByDate, type SortDir } from '$lib/shared/utils/sort';
 import DocumentThumbnail from '$lib/document/DocumentThumbnail.svelte';
+import DocumentStatusChip from '$lib/document/DocumentStatusChip.svelte';
+import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 const DOCS_PREVIEW_LIMIT = 5;
 
@@ -18,7 +19,7 @@ let {
 		originalFilename: string;
 		documentDate?: string | null;
 		location?: string | null;
-		status: string;
+		status: DocumentStatus;
 		contentType?: string;
 		thumbnailUrl?: string;
 	}[];
@@ -94,17 +95,8 @@ const visibleDocuments = $derived(
 							</div>
 						</div>
 
-						<!-- Status chip -->
-						<span
-							class="hidden flex-shrink-0 rounded-full border px-2 py-0.5 font-sans text-[10px] font-bold sm:inline-block
-							{doc.status === 'UPLOADED'
-								? 'border-accent/50 bg-accent/20 text-ink'
-								: doc.status === 'ARCHIVED'
-									? 'border-green-200 bg-green-50 text-green-800'
-									: 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
-						>
-							{formatDocumentStatus(doc.status)}
-						</span>
+						<!-- Status chip — always visible at all breakpoints -->
+						<DocumentStatusChip status={doc.status} />
 
 						<img
 							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"

frontend/src/routes/persons/[id]/PersonDocumentList.svelte.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import PersonDocumentList from './PersonDocumentList.svelte';
+import type { DocumentStatus } from '$lib/document/documentStatusLabel';
 
 afterEach(cleanup);
 
@@ -11,7 +12,7 @@ const makeDoc = (overrides: Record<string, unknown> = {}) => ({
 	originalFilename: 'brief.pdf',
 	documentDate: '1923-04-15',
 	location: 'Berlin',
-	status: 'UPLOADED' as string,
+	status: 'UPLOADED' as DocumentStatus,
 	contentType: 'application/pdf',
 	thumbnailUrl: '',
 	...overrides