From ce2bbf42302c10aa3b8460b07deda97339e1d02c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 14 Apr 2026 23:33:26 +0200
Subject: [PATCH] refactor(conversations): use GroupDivider in
 ConversationTimeline

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../routes/conversations/ConversationTimeline.svelte   |  9 ++-------
 frontend/src/routes/conversations/page.svelte.spec.ts  | 10 +++++-----
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/routes/conversations/ConversationTimeline.svelte b/frontend/src/routes/conversations/ConversationTimeline.svelte
index 71422858..feb6d9f7 100644
--- a/frontend/src/routes/conversations/ConversationTimeline.svelte
+++ b/frontend/src/routes/conversations/ConversationTimeline.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
+import GroupDivider from '$lib/components/GroupDivider.svelte';
 
 let {
 	documents,
@@ -84,13 +85,7 @@ const enrichedDocuments = $derived(
 		<div class="relative z-10 flex flex-col gap-4">
 			{#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-line"></div>
-						<span class="mx-4 font-sans text-xs font-bold tracking-widest text-ink/40 uppercase"
-							>{year}</span
-						>
-						<div class="flex-grow border-t border-line"></div>
-					</div>
+					<GroupDivider label={String(year)} />
 				{/if}
 				{@const isRight = doc.sender?.id === senderId}
 
diff --git a/frontend/src/routes/conversations/page.svelte.spec.ts b/frontend/src/routes/conversations/page.svelte.spec.ts
index 2433c958..3b3ba356 100644
--- a/frontend/src/routes/conversations/page.svelte.spec.ts
+++ b/frontend/src/routes/conversations/page.svelte.spec.ts
@@ -116,7 +116,7 @@ describe('Conversations page – summary', () => {
 describe('Conversations page – year dividers', () => {
 	it('renders a year divider for the first document', async () => {
 		render(Page, { data: withDocs });
-		await expect.element(page.getByTestId('year-divider').first()).toHaveTextContent('1923');
+		await expect.element(page.getByTestId('group-divider').first()).toHaveTextContent('1923');
 	});
 
 	it('renders a divider for each new year in the document list', async () => {
@@ -128,8 +128,8 @@ describe('Conversations page – year dividers', () => {
 			]
 		};
 		render(Page, { data });
-		await expect.element(page.getByTestId('year-divider').first()).toHaveTextContent('1923');
-		await expect.element(page.getByTestId('year-divider').nth(1)).toHaveTextContent('1965');
+		await expect.element(page.getByTestId('group-divider').first()).toHaveTextContent('1923');
+		await expect.element(page.getByTestId('group-divider').nth(1)).toHaveTextContent('1965');
 	});
 
 	it('does not render a second divider for documents from the same year', async () => {
@@ -142,8 +142,8 @@ describe('Conversations page – year dividers', () => {
 		};
 		render(Page, { data });
 		// Only one divider for 1923; 1965 divider should not appear
-		await expect.element(page.getByTestId('year-divider').first()).toHaveTextContent('1923');
-		await expect.element(page.getByTestId('year-divider').nth(1)).not.toBeInTheDocument();
+		await expect.element(page.getByTestId('group-divider').first()).toHaveTextContent('1923');
+		await expect.element(page.getByTestId('group-divider').nth(1)).not.toBeInTheDocument();
 	});
 });