feat(search): add year/group headers in document list when sorted by date, sender, or receiver #236

Merged
marcel merged 11 commits from feat/issue-220-group-headers into main 2026-04-15 10:48:16 +02:00
Showing only changes of commit 38d558182a - Show all commits

View File

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