From 503ce49ef755089e4b8eb943e286d4997e454894 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 23 Apr 2026 21:08:33 +0200
Subject: [PATCH] refactor(briefwechsel): TagChipList defaults max to 3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Makes `max` an optional prop with default 3 — the common row-layout
case doesn't need to name the cap explicitly. ThumbnailRow's callsite
drops to `<TagChipList tags={doc.tags ?? []} />`, consistent with how
other shared components in $lib/components expose sensible defaults.

Refs #305
Fixes @leonievoss round-2 follow-up from PR review

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/TagChipList.svelte         | 2 +-
 frontend/src/lib/components/TagChipList.svelte.spec.ts | 7 +++++++
 frontend/src/lib/components/ThumbnailRow.svelte        | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/TagChipList.svelte b/frontend/src/lib/components/TagChipList.svelte
index 05851250..92a5df9c 100644
--- a/frontend/src/lib/components/TagChipList.svelte
+++ b/frontend/src/lib/components/TagChipList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 type Tag = { id: string; name: string };
 
-let { tags, max }: { tags: Tag[]; max: number } = $props();
+let { tags, max = 3 }: { tags: Tag[]; max?: number } = $props();
 
 const displayedTags = $derived(tags.slice(0, max));
 const hiddenTagCount = $derived(Math.max(0, tags.length - max));
diff --git a/frontend/src/lib/components/TagChipList.svelte.spec.ts b/frontend/src/lib/components/TagChipList.svelte.spec.ts
index 14eb2a14..ae5542c6 100644
--- a/frontend/src/lib/components/TagChipList.svelte.spec.ts
+++ b/frontend/src/lib/components/TagChipList.svelte.spec.ts
@@ -31,4 +31,11 @@ describe('TagChipList', () => {
 		expect(chips).toHaveLength(0);
 		expect(document.body.textContent).not.toMatch(/\+/);
 	});
+
+	it('defaults max to 3 when the prop is omitted', () => {
+		render(TagChipList, { tags: makeTags(5) });
+		const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
+		expect(chips).toHaveLength(3);
+		expect(document.body.textContent).toMatch(/\+2/);
+	});
 });
diff --git a/frontend/src/lib/components/ThumbnailRow.svelte b/frontend/src/lib/components/ThumbnailRow.svelte
index 7fb2eba0..f5770211 100644
--- a/frontend/src/lib/components/ThumbnailRow.svelte
+++ b/frontend/src/lib/components/ThumbnailRow.svelte
@@ -91,6 +91,6 @@ const ariaLabel = $derived(
 			{/if}
 		</div>
 
-		<TagChipList tags={doc.tags ?? []} max={3} />
+		<TagChipList tags={doc.tags ?? []} />
 	</div>
 </a>