rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 72 Wiki Activity

fix(bandmap): a muted spot must be grey, not brown

Browse Source 
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.
This commit is contained in:
rouggy
2026-08-10 12:06:52 +02:00
parent 2cb1add3db
commit 18a583901c
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BandMap.tsx
+20 -9
View File
@@ -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