From 18a583901c6f653dc2e83a58511de0fb46ca637a Mon Sep 17 00:00:00 2001
From: Gregory Salaun <legreg002@hotmail.com>
Date: Mon, 10 Aug 2026 12:06:52 +0200
Subject: [PATCH] fix(bandmap): a muted spot must be grey, not brown

Muting emptied the status, which dropped the spot onto statusStyle's default
branch. That branch paints bg-primary/60 - the theme's burnt orange at 60% over
a dark card, i.e. brown - and it was written for the rare unresolved entity,
where a hint of the accent colour is right because the operator should look.

With the mute option on, most of the map is muted. So the whole band map turned
brown and the spots that were meant to stop competing for attention were the
only ones tinted with the app's own "look here" colour.

Muted now lands on QUIET_STYLE: card background, grey border, grey accent bar
and leader. That is the same style the 'worked' status already used, so it is
now one constant rather than two copies - a muted spot and a worked spot are
the same statement and must not drift apart.
---
 frontend/src/components/BandMap.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/BandMap.tsx b/frontend/src/components/BandMap.tsx
index 607d429..af87296 100644
--- a/frontend/src/components/BandMap.tsx
+++ b/frontend/src/components/BandMap.tsx
@@ -167,7 +167,23 @@ function statusLabel(s: string, t: (k: string) => string, muted = false): string
   }
 }
 
-function statusStyle(s: string): { pill: string; bar: string; line: string; dot: string } {
+// QUIET: no status colour at all. The pill keeps the card background and the
+// accent drops to a plain border grey, so the spot is present but says nothing.
+const QUIET_STYLE = {
+  pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50',
+  bar:  'bg-muted-foreground/30',
+  line: 'stroke-border',
+  dot:  'fill-border',
+};
+
+function statusStyle(s: string, muted = false): { pill: string; bar: string; line: string; dot: string } {
+  // A muted spot must land on QUIET, never on the default branch below. That
+  // default paints bg-primary/60 — the theme's burnt orange at 60 % over a dark
+  // card, i.e. brown — because it was written for the rare unresolved entity and
+  // orange is this app's "look here" colour. With the mute option on, most of
+  // the map is muted, so the whole band map turned brown and the quietest spots
+  // shouted the loudest.
+  if (muted) return QUIET_STYLE;
   // pill = full pill background+text+border
   // bar  = thick left accent inside the pill
   // line = SVG leader stroke (visible on hover)
@@ -191,12 +207,7 @@ function statusStyle(s: string): { pill: string; bar: string; line: string; dot:
       line: 'stroke-caution',
       dot:  'fill-caution',
     };
-    case 'worked':   return {
-      pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50',
-      bar:  'bg-muted-foreground/30',
-      line: 'stroke-border',
-      dot:  'fill-border',
-    };
+    case 'worked':   return QUIET_STYLE;
     default:         return {
       pill: 'bg-card text-foreground border-border hover:bg-accent/40',
       bar:  'bg-primary/60',
@@ -564,7 +575,7 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz,
             {placed.map((p, i) => {
               const k = spotStatusKey(p.spot.dx_call, p.spot.band ?? '', p.spot.comment ?? '', p.spot.freq_hz);
               const st = spotStatus[k]?.status ?? '';
-              const style = statusStyle(st);
+              const style = statusStyle(st, spotStatus[k]?.muted);
               const labelMidY = p.labelY + PILL_H / 2;
               const bumped = Math.abs(p.freqY - labelMidY) > 0.5;
               return (
@@ -612,7 +623,7 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz,
             const k = spotStatusKey(p.spot.dx_call, p.spot.band ?? '', p.spot.comment ?? '', p.spot.freq_hz);
             const entry = spotStatus[k];
             const st = entry?.status ?? '';
-            const style = statusStyle(st);
+            const style = statusStyle(st, entry?.muted);
             const mode = inferSpotMode(p.spot.comment ?? '', p.spot.freq_hz);
             return (
               <button