From 1ab063486cdc620708ae03dbbe7f3355ddc3c437 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 20 Mar 2026 16:20:36 +0100
Subject: [PATCH] feat(conversations): add year dividers between documents
 (#30)

Renders a horizontal rule with the year label between consecutive
documents that belong to different years.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/conversations/+page.svelte     | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index 64086b2e..3c893a1b 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -52,6 +52,17 @@ function swapPersons() {
 	receiverId = tmp;
 	applyFilters();
 }
+
+const enrichedDocuments = $derived(
+	data.documents.map((doc, i) => {
+		const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
+		const prevYear =
+			i > 0 && data.documents[i - 1].documentDate
+				? new Date(data.documents[i - 1].documentDate!).getFullYear()
+				: null;
+		return { doc, year, showYearDivider: year !== null && year !== prevYear };
+	})
+);
 </script>
 
 <div class="mx-auto max-w-5xl px-4 py-10">
@@ -221,7 +232,17 @@ function swapPersons() {
 
 			<div class="p-6 md:p-8">
 				<div class="relative z-10 flex flex-col gap-4">
-					{#each data.documents as doc (doc.id)}
+					{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
+						{#if showYearDivider}
+							<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
+								<div class="flex-grow border-t border-brand-sand"></div>
+								<span
+									class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
+									>{year}</span
+								>
+								<div class="flex-grow border-t border-brand-sand"></div>
+							</div>
+						{/if}
 						{@const isRight = doc.sender?.id === senderId}
 
 						<!-- Message Row -->