frontend/src/routes/conversations/ConversationTimeline.svelte

@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import GroupDivider from '$lib/components/GroupDivider.svelte';
+import { groupDocuments } from '$lib/utils/groupDocuments';
 
 let {
 	documents,
@@ -30,22 +31,15 @@ let {
 
 const documentYears = $derived(
 	documents
-		.map((doc) => (doc.documentDate ? new Date(doc.documentDate).getFullYear() : null))
+		.map((doc) =>
+			doc.documentDate ? new Date(doc.documentDate + 'T12:00:00').getFullYear() : null
+		)
 		.filter((y): y is number => y !== null)
 );
 const yearFrom = $derived(documentYears.length > 0 ? Math.min(...documentYears) : null);
 const yearTo = $derived(documentYears.length > 0 ? Math.max(...documentYears) : null);
 
-const enrichedDocuments = $derived(
-	documents.map((doc, i) => {
-		const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
-		const prevYear =
-			i > 0 && documents[i - 1].documentDate
-				? new Date(documents[i - 1].documentDate!).getFullYear()
-				: null;
-		return { doc, year, showYearDivider: year !== null && year !== prevYear };
-	})
-);
+const documentGroups = $derived.by(() => groupDocuments(documents, 'DATE', ''));
 </script>
 
 <!-- Summary bar -->
@@ -83,10 +77,11 @@ const enrichedDocuments = $derived(
 
 	<div class="p-6 md:p-8">
 		<div class="relative z-10 flex flex-col gap-4">
-			{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
-				{#if showYearDivider}
-					<GroupDivider label={String(year)} />
+			{#each documentGroups as group (group.label)}
+				{#if group.label}
+					<GroupDivider label={group.label} />
 				{/if}
+				{#each group.documents as doc (doc.id)}
 					{@const isRight = doc.sender?.id === senderId}
 
 					<!-- Message Row -->
@@ -159,6 +154,7 @@ const enrichedDocuments = $derived(
 						</div>
 					</div>
 				{/each}
+			{/each}
 		</div>
 	</div>
 </div>