From 6fa00f4b376817d00d1e9d92eef7861ca9515ab6 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 8 Apr 2026 22:30:35 +0200
Subject: [PATCH] style: unify thumbnail indicators on the primary blue palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/components/heaps/HeapsPanel.tsx  | 14 ++++------
 .../components/timeline/PhotoThumbnail.tsx    | 26 ++++++++++---------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/heaps/HeapsPanel.tsx b/frontend/src/components/heaps/HeapsPanel.tsx
index c7e4ca1..c883362 100644
--- a/frontend/src/components/heaps/HeapsPanel.tsx
+++ b/frontend/src/components/heaps/HeapsPanel.tsx
@@ -266,10 +266,10 @@ export function HeapsPanel() {
                 className={clsx(
                   'group relative flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-[13px]',
                   isFiltered ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
-                  // Active-heap row gets a left accent stripe so the
+                  // Active-heap row gets a soft primary wash so the
                   // user always knows where Pick / T will land, even
-                  // when navigating to a different section.
-                  isActive && !isFiltered && 'bg-pick/10 text-text',
+                  // when viewing a different section.
+                  isActive && !isFiltered && 'bg-primary/8 text-text',
                   isDropTarget && 'ring-2 ring-primary bg-primary/10'
                 )}
                 style={{ paddingLeft: '32px' }}
@@ -312,11 +312,7 @@ export function HeapsPanel() {
                 <ShoppingBasket
                   className={clsx(
                     'h-4 w-4 flex-shrink-0',
-                    isActive
-                      ? 'text-pick'
-                      : isFiltered
-                      ? 'text-primary'
-                      : 'text-text-muted'
+                    isActive || isFiltered ? 'text-primary' : 'text-text-muted'
                   )}
                 />
 
@@ -347,7 +343,7 @@ export function HeapsPanel() {
                     </span>
                     {isActive && (
                       <span
-                        className="ml-1 flex-shrink-0 rounded-full bg-pick/25 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-pick"
+                        className="ml-1 flex-shrink-0 rounded-full bg-primary/25 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-primary"
                         title="Active heap — Pick (P) and the basket badge on photos point here"
                       >
                         Active
diff --git a/frontend/src/components/timeline/PhotoThumbnail.tsx b/frontend/src/components/timeline/PhotoThumbnail.tsx
index 2d20026..0583f93 100644
--- a/frontend/src/components/timeline/PhotoThumbnail.tsx
+++ b/frontend/src/components/timeline/PhotoThumbnail.tsx
@@ -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} />