refactor(timeline): de-duplicate the TagChip markup
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 5m4s
CI / OCR Service Tests (pull_request) Successful in 23s
CI / Backend Unit Tests (pull_request) Successful in 5m26s
CI / fail2ban Regex (pull_request) Successful in 49s
CI / Semgrep Security Scan (pull_request) Successful in 22s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m7s
SDD Gate / RTM Check (pull_request) Successful in 17s
SDD Gate / Contract Validate (pull_request) Successful in 28s
SDD Gate / Constitution Impact (pull_request) Successful in 18s
CI / Unit & Component Tests (push) Successful in 4m21s
CI / OCR Service Tests (push) Successful in 25s
CI / Backend Unit Tests (push) Successful in 4m57s
CI / fail2ban Regex (push) Successful in 48s
CI / Semgrep Security Scan (push) Successful in 30s
CI / Compose Bucket Idempotency (push) Successful in 1m8s

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>
This commit was merged in pull request #838.
This commit is contained in:
Marcel
2026-06-14 17:59:10 +02:00
parent 095eeeb4d4
commit 1cd6ffd5ca

View File

@@ -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>