style: unify thumbnail indicators on the primary blue palette

The badges on a thumbnail were a rainbow — yellow stars, blue check,
green heap pill, red discard, black duplicate — and read as five
unrelated palettes. Collapse to a single family.

PhotoThumbnail:
- Rating stars: bg-primary pill with white star icons (was yellow on
  a translucent dark backing).
- Heap basket / name chip: bg-primary (was bg-pick green).
- Duplicate badge: bg-primary (was bg-black/70).
- Discarded badge: bg-black/75 (kept neutral-dark, deliberately NOT
  blue, so "in this collection" and "trashed" never collapse into the
  same visual).
- All badges share the white outer ring + thicker icon stroke from
  the previous contrast pass.

HeapsPanel:
- Active heap row uses bg-primary/8 instead of bg-pick/10.
- Basket icon turns text-primary on the active row (was text-pick).
- "Active" pill uses bg-primary/25 + text-primary (was bg-pick/25 +
  text-pick).

The whole indicator family now reads as one consistent thing in the
brand blue.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-08 22:30:35 +02:00
parent e49f64659e
commit 6fa00f4b37
2 changed files with 19 additions and 21 deletions

View File

@@ -196,25 +196,27 @@ export function PhotoThumbnail({
</div>
)}
{/* Rating Stars — sit in a translucent dark pill so yellow stars
* don't disappear against a yellow / sandy photo. */}
{/* Rating Stars — same primary blue as every other indicator,
* in a matching pill so the rating reads as part of the same
* badge family instead of a yellow accent from a different
* palette. */}
{photo.rating > 0 && (
<div className="absolute bottom-1 left-1 flex items-center gap-0.5 rounded bg-black/55 px-1 py-0.5 shadow-sm backdrop-blur-[2px]">
<div className="absolute bottom-1 left-1 flex h-5 items-center gap-0.5 rounded-full bg-primary px-1.5 text-white shadow-md ring-2 ring-white/90">
{Array.from({ length: photo.rating }).map((_, i) => (
<Star
key={i}
className="h-3 w-3 fill-star text-star drop-shadow"
/>
<Star key={i} className="h-3 w-3 fill-white text-white" />
))}
</div>
)}
{/* Flag Indicators — every badge gets a white ring so it survives
* any photo content. */}
{/* Flag Indicators — all share the same blue-primary chip style
* + white ring so the family reads as one thing. The discard
* indicator is the only exception: it stays neutral-dark
* because mixing it with the positive blue chips would conflate
* "in this collection" with "trashed". */}
<div className="absolute bottom-1 right-1 flex items-center gap-1">
{isInActiveHeap && (
<div
className="flex h-5 max-w-[120px] items-center gap-1 rounded-full bg-pick px-1.5 text-white shadow-md ring-2 ring-white/90"
className="flex h-5 max-w-[120px] items-center gap-1 rounded-full bg-primary px-1.5 text-white shadow-md ring-2 ring-white/90"
title={activeHeapName ? `In heap: ${activeHeapName}` : 'In active heap'}
>
<ShoppingBasket className="h-3 w-3 flex-shrink-0" strokeWidth={2.5} />
@@ -227,7 +229,7 @@ export function PhotoThumbnail({
)}
{photo.is_duplicate && (
<div
className="flex h-5 w-5 items-center justify-center rounded-full bg-black/70 text-white shadow-md ring-2 ring-white/90"
className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white shadow-md ring-2 ring-white/90"
title="Duplicate (matches another photo's hash)"
>
<Copy className="h-3 w-3" strokeWidth={2.5} />
@@ -235,7 +237,7 @@ export function PhotoThumbnail({
)}
{photo.is_discarded && (
<div
className="flex h-5 w-5 items-center justify-center rounded-full bg-reject text-white shadow-md ring-2 ring-white/90"
className="flex h-5 w-5 items-center justify-center rounded-full bg-black/75 text-white shadow-md ring-2 ring-white/90"
title="Discarded"
>
<Trash2 className="h-3 w-3" strokeWidth={2.5} />