From 1cd6ffd5ca96a91f001f7d87b54c441f0b902fce Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 14 Jun 2026 17:59:10 +0200
Subject: [PATCH] refactor(timeline): de-duplicate the TagChip markup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two cleanups flagged in review, both behaviour-preserving:
- collapse the {#if color}/{:else} square-marker branches (identical but for the
  neutral fill) into one element via class:bg-ink-3={!color}; squareStyle is
  already empty when color is null, so no var(--c-tag-) leaks into the neutral
  chip.
- drop the redundant `truncate` class from the name span — the inline
  overflow/ellipsis trio (kept so it applies before the stylesheet loads,
  REQ-008a) already expresses exactly what `truncate` would.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/TagChip.svelte | 27 +++++++++++-------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/timeline/TagChip.svelte b/frontend/src/lib/timeline/TagChip.svelte
index 914c964d..1cceecc9 100644
--- a/frontend/src/lib/timeline/TagChip.svelte
+++ b/frontend/src/lib/timeline/TagChip.svelte
@@ -23,22 +23,19 @@ const squareStyle = $derived(color ? `background-color: var(--c-tag-${color})` :
 	class="mt-1 self-start rounded-full border border-line bg-surface px-2 py-0.5"
 >
 	<span class="sr-only">{m.timeline_tag_chip_label()}: </span>
-	{#if color}
-		<span
-			data-testid="tag-chip-square"
-			aria-hidden="true"
-			style={squareStyle}
-			class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
-		></span>
-	{:else}
-		<span
-			data-testid="tag-chip-square"
-			aria-hidden="true"
-			class="inline-block h-2 w-2 flex-shrink-0 rounded-sm bg-ink-3"
-		></span>
-	{/if}
+	<!-- One marker for both states: a set color paints it via squareStyle; a null color leaves
+	     squareStyle empty and falls back to the neutral bg-ink-3 (no var(--c-tag-) reference). -->
+	<span
+		data-testid="tag-chip-square"
+		aria-hidden="true"
+		style={squareStyle}
+		class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
+		class:bg-ink-3={!color}
+	></span>
+	<!-- Overflow/ellipsis set inline (not via Tailwind's `truncate`) so the name ellipsizes even
+	     before the stylesheet loads, keeping the card overflow-free at 320px (REQ-008a). -->
 	<span
 		style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
-		class="truncate font-sans text-[11px] text-ink-2">{name}</span
+		class="font-sans text-[11px] text-ink-2">{name}</span
 	>
 </span>