feat(frontend): render honest precision dates in detail, list and search

Wires formatDocumentDate/DocumentDate into the read sites: the document detail top bar + metadata drawer (the drawer shows the visible "Originaltext:" raw line for UNKNOWN/SEASON/APPROX), the search/list rows (DocumentRow, mobile + desktop), and the document multi-select dropdown label. A MONTH or SEASON document now reads "Juni 1916"/"Sommer 1916" everywhere instead of a fabricated day. Adds metaDatePrecision to the DocumentRow/DocumentMultiSelect test fixtures (required on DocumentListItem since #671) and updates the multi-select label assertion to the honest long date. Refs #666 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-27 11:56:49 +02:00
parent 6538c9e59a
commit b56b9dfa74
8 changed files with 86 additions and 19 deletions
--- a/frontend/src/lib/document/DocumentMetadataDrawer.svelte
+++ b/frontend/src/lib/document/DocumentMetadataDrawer.svelte
@@ -4,6 +4,8 @@ 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 type { DatePrecision } from '$lib/shared/utils/documentDate';

 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -16,6 +18,9 @@ type GeschichteSummary = {

 type Props = {
 	documentDate: string | null;
+	metaDatePrecision?: DatePrecision | null;
+	metaDateEnd?: string | null;
+	metaDateRaw?: string | null;
 	location: string | null;
 	status: string;
 	sender: Person | null;
@@ -29,6 +34,9 @@ type Props = {

 let {
 	documentDate,
+	metaDatePrecision = null,
+	metaDateEnd = null,
+	metaDateRaw = null,
 	location,
 	status,
 	sender,
@@ -59,7 +67,6 @@ function formatGeschichteDate(g: GeschichteSummary): string {
 	return formatDate(g.publishedAt.slice(0, 10), 'short');
 }

-const formattedDate = $derived(documentDate ? formatDate(documentDate) : '—');
 const displayLocation = $derived(location ?? '—');
 const statusLabel = $derived(formatDocumentStatus(status));
 const visibleReceivers = $derived(receivers.slice(0, VISIBLE_RECEIVER_LIMIT));
@@ -105,7 +112,18 @@ function getFullName(person: Person): string {
 			<dl class="space-y-3 font-serif text-sm">
 				<div>
 					<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_date()}</dt>
-					<dd class="text-ink">{formattedDate}</dd>
+					<dd class="text-ink">
+						{#if documentDate || metaDateRaw}
+							<DocumentDate
+								iso={documentDate}
+								precision={metaDatePrecision}
+								end={metaDateEnd}
+								raw={metaDateRaw}
+							/>
+						{:else}
+							—
+						{/if}
+					</dd>
 				</div>
 				<div>
 					<dt class="font-sans text-xs font-medium text-ink-3">{m.form_label_location()}</dt>
--- a/frontend/src/lib/document/DocumentMultiSelect.svelte
+++ b/frontend/src/lib/document/DocumentMultiSelect.svelte
@@ -2,7 +2,8 @@
 import type { components } from '$lib/generated/api';
 import { m } from '$lib/paraglide/messages.js';
 import { clickOutside } from '$lib/shared/actions/clickOutside';
-import { formatDate } from '$lib/shared/utils/date';
+import { formatDocumentDate, type DatePrecision } from '$lib/shared/utils/documentDate';
+import { getLocale } from '$lib/paraglide/runtime.js';

 type Document = components['schemas']['Document'];
 type DocumentListItem = components['schemas']['DocumentListItem'];
@@ -49,7 +50,9 @@ function handleInput() {
 				const docs = body.items.map((it) => ({
 					id: it.id,
 					title: it.title,
-					documentDate: it.documentDate
+					documentDate: it.documentDate,
+					metaDatePrecision: it.metaDatePrecision,
+					metaDateEnd: it.metaDateEnd
 				})) as unknown as Document[];
 				results = docs.filter((d) => !selectedDocuments.some((s) => s.id === d.id));
 			}
@@ -73,8 +76,10 @@ function removeDocument(id: string | undefined) {
 }

 function formatDocLabel(doc: Document): string {
-	if (doc.documentDate) return `${doc.title} · ${formatDate(doc.documentDate, 'short')}`;
-	return doc.title;
+	if (!doc.documentDate) return doc.title;
+	const precision = (doc.metaDatePrecision as DatePrecision | undefined) ?? 'DAY';
+	const label = formatDocumentDate(doc.documentDate, precision, doc.metaDateEnd, null, getLocale());
+	return `${doc.title} · ${label}`;
 }
 </script>

--- a/frontend/src/lib/document/DocumentMultiSelect.svelte.spec.ts
+++ b/frontend/src/lib/document/DocumentMultiSelect.svelte.spec.ts
@@ -9,6 +9,7 @@ const docFactory = (id: string, title: string, date = '1880-01-01') => ({
 	id,
 	title,
 	documentDate: date,
+	metaDatePrecision: 'DAY' as const,
 	originalFilename: `${title}.pdf`,
 	receivers: [],
 	tags: [],
@@ -55,7 +56,8 @@ describe('DocumentMultiSelect — rendering', () => {
 			selectedDocuments: [docFactory('d1', 'Brief vom 1. Mai', '1882-05-01')]
 		});
 		await expect.element(page.getByText(/Brief vom 1\. Mai/)).toBeInTheDocument();
-		await expect.element(page.getByText(/01\.05\.1882/)).toBeInTheDocument();
+		// DAY precision renders the honest long date (formatDocumentDate), not 01.05.1882.
+		await expect.element(page.getByText(/1\. Mai 1882/)).toBeInTheDocument();
 	});

 	it('emits a hidden documentIds input for each pre-selected document', async () => {
--- a/frontend/src/lib/document/DocumentRow.svelte
+++ b/frontend/src/lib/document/DocumentRow.svelte
@@ -2,7 +2,7 @@
 import { goto } from '$app/navigation';
 import type { components } from '$lib/generated/api';
 import { applyOffsets } from '$lib/document/search';
-import { formatDate } from '$lib/shared/utils/date';
+import DocumentDate from './DocumentDate.svelte';
 import * as m from '$lib/paraglide/messages.js';
 import { bulkSelectionStore } from '$lib/document/bulkSelection.svelte';
 import ProgressRing from '$lib/shared/primitives/ProgressRing.svelte';
@@ -164,7 +164,16 @@ function safeTagColor(color: string | null | undefined): string {
 				<!-- Mobile-only metadata -->
 				<div class="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 font-sans text-xs text-ink-2 sm:hidden">
 					<div>
-						{doc.documentDate ? formatDate(doc.documentDate) : '—'}
+						{#if doc.documentDate}
+							<DocumentDate
+								iso={doc.documentDate}
+								precision={doc.metaDatePrecision}
+								end={doc.metaDateEnd}
+								showRaw={false}
+							/>
+						{:else}
+							—
+						{/if}
 					</div>
 					<div class="flex items-start gap-2">
 						<ProgressRing percentage={item.completionPercentage} />
@@ -178,7 +187,16 @@ function safeTagColor(color: string | null | undefined): string {
 			<!-- Right column — desktop only -->
 			<div class="hidden flex-col gap-2 pl-4 font-sans text-sm text-ink-2 sm:flex sm:w-44 lg:w-56">
 				<div>
-					{doc.documentDate ? formatDate(doc.documentDate) : '—'}
+					{#if doc.documentDate}
+						<DocumentDate
+							iso={doc.documentDate}
+							precision={doc.metaDatePrecision}
+							end={doc.metaDateEnd}
+							showRaw={false}
+						/>
+					{:else}
+						—
+					{/if}
 				</div>
 				<div>
 					<span class="font-bold tracking-wide text-ink-3 uppercase">{m.docs_list_from()}</span>
--- a/frontend/src/lib/document/DocumentRow.svelte.spec.ts
+++ b/frontend/src/lib/document/DocumentRow.svelte.spec.ts
@@ -22,6 +22,7 @@ function makeItem(overrides: Partial<DocumentListItem> = {}): DocumentListItem {
 		title: 'Testbrief',
 		originalFilename: 'testbrief.pdf',
 		documentDate: '2024-03-15',
+		metaDatePrecision: 'DAY',
 		sender: undefined,
 		receivers: [],
 		tags: [],
--- a/frontend/src/lib/document/DocumentRow.svelte.test.ts
+++ b/frontend/src/lib/document/DocumentRow.svelte.test.ts
@@ -49,6 +49,7 @@ const baseItem = (overrides: Record<string, unknown> = {}) => ({
 	title: 'Brief 1923',
 	originalFilename: 'b.pdf',
 	documentDate: '1923-04-15',
+	metaDatePrecision: 'DAY' as const,
 	sender,
 	receivers: [receiver],
 	tags: [],
--- a/frontend/src/lib/document/DocumentTopBar.svelte
+++ b/frontend/src/lib/document/DocumentTopBar.svelte
@@ -8,6 +8,7 @@ import DocumentTopBarTitle from './DocumentTopBarTitle.svelte';
 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';

 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -17,6 +18,9 @@ type Doc = {
 	title?: string | null;
 	originalFilename?: string | null;
 	documentDate?: string | null;
+	metaDatePrecision?: DatePrecision | null;
+	metaDateEnd?: string | null;
+	metaDateRaw?: string | null;
 	sender?: Person | null;
 	receivers?: Person[] | null;
 	filePath?: string | null;
@@ -81,6 +85,9 @@ const overflowPersons = $derived(receivers.slice(2));
 			title={doc.title}
 			originalFilename={doc.originalFilename}
 			documentDate={doc.documentDate}
+			metaDatePrecision={doc.metaDatePrecision}
+			metaDateEnd={doc.metaDateEnd}
+			metaDateRaw={doc.metaDateRaw}
 		/>

 		<!-- Chip row — desktop only, hidden on small screens to make room for buttons -->
@@ -151,6 +158,9 @@ const overflowPersons = $derived(receivers.slice(2));
 		<div transition:slide={{ duration: 200 }}>
 			<DocumentMetadataDrawer
 				documentDate={doc.documentDate ?? null}
+				metaDatePrecision={doc.metaDatePrecision ?? null}
+				metaDateEnd={doc.metaDateEnd ?? null}
+				metaDateRaw={doc.metaDateRaw ?? null}
 				location={doc.location ?? null}
 				status={doc.status ?? 'PLACEHOLDER'}
 				sender={doc.sender ?? null}
--- a/frontend/src/lib/document/DocumentTopBarTitle.svelte
+++ b/frontend/src/lib/document/DocumentTopBarTitle.svelte
@@ -1,17 +1,32 @@
 <script lang="ts">
-import { formatDate } from '$lib/shared/utils/date';
+import { formatDocumentDate, type DatePrecision } from '$lib/shared/utils/documentDate';
+import { getLocale } from '$lib/paraglide/runtime.js';

 type Props = {
 	title?: string | null;
 	originalFilename?: string | null;
 	documentDate?: string | null;
+	metaDatePrecision?: DatePrecision | null;
+	metaDateEnd?: string | null;
+	metaDateRaw?: string | null;
 };

-let { title, originalFilename, documentDate }: Props = $props();
+let {
+	title,
+	originalFilename,
+	documentDate,
+	metaDatePrecision = null,
+	metaDateEnd = null,
+	metaDateRaw = null
+}: Props = $props();

 const displayTitle = $derived(title || originalFilename || '');
-const shortDate = $derived(documentDate ? formatDate(documentDate, 'short') : null);
-const longDate = $derived(documentDate ? formatDate(documentDate, 'long') : null);
+const precision = $derived<DatePrecision>(metaDatePrecision ?? (documentDate ? 'DAY' : 'UNKNOWN'));
+const dateLabel = $derived(
+	documentDate
+		? formatDocumentDate(documentDate, precision, metaDateEnd, metaDateRaw, getLocale())
+		: null
+);
 </script>

 <div class="min-w-0 flex-1 overflow-hidden">
@@ -21,10 +36,7 @@ const longDate = $derived(documentDate ? formatDate(documentDate, 'long') : null
 	>
 		{displayTitle}
 	</h1>
-	{#if shortDate}
-		<p class="font-sans text-[16px] text-ink-2">
-			<span class="lg:hidden">{shortDate}</span>
-			<span class="hidden lg:inline">{longDate}</span>
-		</p>
+	{#if dateLabel}
+		<p class="font-sans text-[16px] text-ink-2">{dateLabel}</p>
 	{/if}
 </div>