From 11f6f9e2a23a622557f4d0daafbe3779e389fc40 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 20 Mar 2026 12:11:42 +0100
Subject: [PATCH] refactor(frontend): apply formatDate utility and fix
 derived/error handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace 5 inline Intl.DateTimeFormat blocks with formatDate() across
  home, conversations, persons detail, and document detail pages
- Fix coCorrespondents: $derived(() => ...) → $derived.by(...) —
  the old form typed the value as a function, breaking template call sites
- Persons list: throw error on API failure instead of silently returning []

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+page.svelte                |  3 ++-
 frontend/src/routes/conversations/+page.svelte  |  3 ++-
 frontend/src/routes/documents/[id]/+page.svelte |  3 ++-
 frontend/src/routes/persons/+page.server.ts     | 10 ++++++++--
 frontend/src/routes/persons/[id]/+page.svelte   | 11 ++++++-----
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 849fe795..55c1be94 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -5,6 +5,7 @@ import TagInput from '$lib/components/TagInput.svelte';
 import { slide } from 'svelte/transition';
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import { formatDate } from '$lib/utils/date';
 
 let { data } = $props();
 
@@ -240,7 +241,7 @@ $effect(() => {
 									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
 										<div class="flex items-center">
 											<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg" alt="" aria-hidden="true" class="mr-1.5 h-4 w-4" />
-											{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
+											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 										</div>
 										{#if doc.location}
 											<div class="flex items-center">
diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index a22c2881..775649a1 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -3,6 +3,7 @@
     import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
     import { untrack } from 'svelte';
     import { m } from '$lib/paraglide/messages.js';
+    import { formatDate } from '$lib/utils/date';
 
     let { data } = $props();
 
@@ -231,7 +232,7 @@
 											: 'text-gray-500'}"
 									>
 										<span class="flex items-center">
-											{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
+											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 										</span>
 										{#if doc.location}
 											<span class="flex items-center">
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 35556a13..a9903485 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { m } from '$lib/paraglide/messages.js';
+    import { formatDate } from '$lib/utils/date';
 
     let { data } = $props();
 
@@ -119,7 +120,7 @@
 							</span>
 							<div>
 								<span class="block font-serif text-lg text-brand-navy">
-									{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : '—'}
+									{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 								</span>
 								<span class="text-xs font-sans text-gray-500">{m.doc_label_document_date()}</span>
 							</div>
diff --git a/frontend/src/routes/persons/+page.server.ts b/frontend/src/routes/persons/+page.server.ts
index cd071fca..8ac364e6 100644
--- a/frontend/src/routes/persons/+page.server.ts
+++ b/frontend/src/routes/persons/+page.server.ts
@@ -1,12 +1,18 @@
+import { error } from '@sveltejs/kit';
 import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
 
 export async function load({ url, fetch }) {
     const q = url.searchParams.get('q') || '';
     const api = createApiClient(fetch);
 
-    const { data } = await api.GET('/api/persons', {
+    const result = await api.GET('/api/persons', {
         params: { query: { q: q || undefined } }
     });
 
-    return { persons: data ?? [], q };
+    if (!result.response.ok) {
+        throw error(result.response.status, getErrorMessage(undefined));
+    }
+
+    return { persons: result.data!, q };
 }
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index 8aae5805..61a8ceba 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -3,6 +3,7 @@
     import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
     import { m } from '$lib/paraglide/messages.js';
     import { sortDocumentsByDate, type SortDir } from '$lib/utils/sort';
+    import { formatDate } from '$lib/utils/date';
 
     let { data, form } = $props();
 
@@ -38,7 +39,7 @@
     const sentYearRange = $derived(yearRange(sentDocuments));
     const receivedYearRange = $derived(yearRange(receivedDocuments));
 
-    const coCorrespondents = $derived(() => {
+    const coCorrespondents = $derived.by(() => {
         const freq = new Map<string, { id: string; name: string; count: number }>();
 
         for (const doc of sentDocuments) {
@@ -312,11 +313,11 @@
     {/if}
 
     <!-- Co-Correspondents Section -->
-    {#if coCorrespondents().length > 0}
+    {#if coCorrespondents.length > 0}
     <div class="mb-6">
         <h3 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-3">{m.person_co_correspondents_heading()}</h3>
         <div class="flex flex-wrap gap-2">
-            {#each coCorrespondents() as c}
+            {#each coCorrespondents as c}
                 <a href="/conversations?senderId={person.id}&receiverId={c.id}"
                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-sand text-sm font-serif text-brand-navy hover:border-brand-navy transition-colors">
                     {c.name}
@@ -366,7 +367,7 @@
                                             {doc.title || doc.originalFilename}
                                         </div>
                                         <div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
-                                            <span>{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : m.doc_no_date()}</span>
+                                            <span>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span>
                                             {#if doc.location}
                                                 <span class="text-brand-mint">•</span>
                                                 <span>{doc.location}</span>
@@ -438,7 +439,7 @@
                                             {doc.title || doc.originalFilename}
                                         </div>
                                         <div class="flex items-center text-xs font-sans text-gray-500 mt-0.5 space-x-2">
-                                            <span>{doc.documentDate ? new Intl.DateTimeFormat('de-DE', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(doc.documentDate + 'T12:00:00')) : m.doc_no_date()}</span>
+                                            <span>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span>
                                             {#if doc.location}
                                                 <span class="text-brand-mint">•</span>
                                                 <span>{doc.location}</span>