feat(spots): give a new county its own colour, from a shared marker table

A new county and a new park both drew --success, so the two were the same green
in the cluster list and, since the band map copied it, in the band map too.
County takes violet; POTA keeps green, the association being worth something.

Violet is a chart hue rather than a semantic token because every token was
already spoken for: red, orange and yellow are the entity statuses, blue is
"callsign already worked", green is now POTA. It is defined in both the light
and dark chart groups, so all eleven themes have it.

Changed in BOTH panels at once — separating them in one place would have left
the two views contradicting each other about the same fact, which is worse than
sharing a colour. To make that impossible to get wrong again, the marker
definitions move to lib/spotMarkers: key, colour and label in one table that the
cluster list and the band map both read. That table is what a per-marker colour
setting will drive, which is why it is a table and not three constants.

The band map deliberately shows three of the four markers. A new PREFIX stays a
cluster-list badge: the pill is 22 px tall and a fourth segment on its strip
turns it into a colour code nobody reads at a glance.

frontend/src/components/BandMap.tsx

@@ -3,6 +3,7 @@ import { Minus, Plus, Crosshair, X, PanelLeft, PanelRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
 import { spotStatusKey, inferSpotMode, spotModeCategory } from '@/lib/spot';
+import { SPOT_MARKERS, activeMarkers } from '@/lib/spotMarkers';
 
 // BandMap — vertical spectrum panel inspired by Log4OM.
 // - Full band is always visible; zoom changes pixels-per-kHz, scroll
@@ -36,27 +37,28 @@ type SpotStatusEntry = {
   new_pfx?: boolean;
 };
 
-// Extra markers, ORTHOGONAL to the entity status: a spot can be a worked entity
-// AND a new park. The cluster grid stacks them as separate badges rather than
-// letting one replace another, so the map stacks them too — as segments of the
-// pill's left accent bar, which until now only repeated the pill's own colour
-// and carried no information of its own.
+// The extra markers are ORTHOGONAL to the entity status: a spot can be a worked
+// entity AND a new park. The cluster list stacks them as separate badges instead
+// of letting one replace another, so the map stacks them too — as segments of
+// the pill's left accent bar, which until now only repeated the pill's own
+// colour and carried no information of its own.
 //
-// Colours are the cluster grid's, deliberately: the same fact must not be blue
-// in one panel and green in the next. NOTE that a new county and a new park
-// share --success there, so they share it here.
-const EXTRA_MARKERS: { key: 'new_pota' | 'new_county' | 'worked_call'; cls: string; label: string }[] = [
-  { key: 'new_pota', cls: 'bg-success', label: 'bmp.legendNewPota' },
-  { key: 'new_county', cls: 'bg-success', label: 'bmp.legendNewCounty' },
-  { key: 'worked_call', cls: 'bg-info', label: 'bmp.legendWorkedCall' },
-];
+// Their colours come from lib/spotMarkers, shared with the cluster list: the
+// same fact must not be violet in one panel and green in the next.
+// The map shows three of the four. A new PREFIX is left to the cluster list: the
+// pill is 22 px tall, and a fourth segment turns the strip into a colour code
+// nobody can read at a glance. Add it here the day the strip earns more room.
+const BMP_MARKERS = SPOT_MARKERS.filter((m) => m.key !== 'new_pfx');
+const markersFor = (e: SpotStatusEntry | undefined) =>
+  activeMarkers(e).filter((m) => m.key !== 'new_pfx');
 
-// markersFor returns the extra markers active on a spot, in a fixed order so
-// the bar reads the same way every time.
-function markersFor(e: SpotStatusEntry | undefined): typeof EXTRA_MARKERS {
-  if (!e) return [];
-  return EXTRA_MARKERS.filter((m) => !!e[m.key]);
-}
+// The legend spells the markers out; the cluster list's badges are abbreviated
+// ("NEW CTY") because they sit in a narrow cell, and there is room here.
+const BMP_MARKER_LABEL: Record<string, string> = {
+  new_pota: 'bmp.legendNewPota',
+  new_county: 'bmp.legendNewCounty',
+  worked_call: 'bmp.legendWorkedCall',
+};
 
 interface Props {
   band: string;
@@ -599,7 +601,7 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
                   'hover:translate-x-0.5 hover:shadow',
                   style.pill,
                 )}
-                title={`${p.spot.dx_call}${entry?.country ? ' · ' + entry.country : ''} · ${p.spot.freq_khz.toFixed(1)} kHz · ${statusLabel(st, t)}${markersFor(entry).map((m) => ' · ' + t(m.label)).join('')}${p.spot.comment ? ' · ' + p.spot.comment : ''}${p.spot.spotter ? ' · de ' + p.spot.spotter : ''}`}
+                title={`${p.spot.dx_call}${entry?.country ? ' · ' + entry.country : ''} · ${p.spot.freq_khz.toFixed(1)} kHz · ${statusLabel(st, t)}${markersFor(entry).map((m) => ' · ' + t(BMP_MARKER_LABEL[m.key])).join('')}${p.spot.comment ? ' · ' + p.spot.comment : ''}${p.spot.spotter ? ' · de ' + p.spot.spotter : ''}`}
               >
                 {/* Left accent strip. With no extra marker it repeats the status
                     colour, exactly as before; otherwise it splits into one
@@ -610,7 +612,7 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
                   if (marks.length === 0) return <span className={cn('w-1 shrink-0', style.bar)} aria-hidden />;
                   return (
                     <span className="w-1 shrink-0 flex flex-col" aria-hidden>
-                      {marks.map((m) => <span key={m.key} className={cn('flex-1', m.cls)} />)}
+                      {marks.map((m) => <span key={m.key} className="flex-1" style={{ background: m.colour }} />)}
                     </span>
                   );
                 })()}
@@ -633,10 +635,11 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
         <LegendDot cls="bg-warning" label={t('bmp.legendNewBand')} />
         <LegendDot cls="bg-caution" label={t('bmp.legendNewSlot')} />
         <LegendDot cls="bg-muted-foreground/30" label={t("bmp.legendWorked")} />
-        {/* The stacked markers, same colours as the cluster grid. */}
-        <LegendDot cls="bg-success" label={t('bmp.legendNewPota')} />
-        <LegendDot cls="bg-success" label={t('bmp.legendNewCounty')} />
-        <LegendDot cls="bg-info" label={t('bmp.legendWorkedCall')} />
+        {/* The stacked markers, straight from the shared table so the legend
+            cannot drift from what the pills actually draw. */}
+        {BMP_MARKERS.map((m) => (
+          <LegendDot key={m.key} colour={m.colour} label={t(BMP_MARKER_LABEL[m.key])} />
+        ))}
         {/* Sub-band shading, so the wash behind the pills is never colour-alone. */}
         <span className="mx-0.5 opacity-40">|</span>
         <LegendDot colour={SEG_CW} label={t("bmp.legendCW")} />

frontend/src/components/ClusterGrid.tsx

@@ -12,6 +12,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { cleanSpotter, inferSpotMode, spotStatusKey } from '@/lib/spot';
+import { markerColour } from '@/lib/spotMarkers';
 import { loadLocal, loadRemote, saveState, seedLocal, whenGridPrefsReady } from '@/lib/gridPrefs';
 import { useI18n } from '@/lib/i18n';
 
@@ -221,9 +222,11 @@ const makeColCatalog = (t: TFn): ColEntry[] => [
                 : t('clg2.wkdCall');
         parts.push({ text: label, color: main });
       }
-      if (s?.new_county) parts.push({ text: t('clg2.newCounty'), color: 'var(--success)' });
-      if (s?.new_pota) parts.push({ text: t('clg2.newPota'), color: 'var(--success)' });
-      if (s?.new_pfx) parts.push({ text: t('clg2.newPfx'), color: 'var(--caution)' });
+      // Colours from lib/spotMarkers — shared with the band map so a marker is
+      // never one colour here and another there.
+      if (s?.new_county) parts.push({ text: t('clg2.newCounty'), color: markerColour('new_county') });
+      if (s?.new_pota) parts.push({ text: t('clg2.newPota'), color: markerColour('new_pota') });
+      if (s?.new_pfx) parts.push({ text: t('clg2.newPfx'), color: markerColour('new_pfx') });
       if (parts.length === 0) return <span style={{ color: 'var(--muted-foreground)', fontSize: 10 }}>—</span>;
       return (
         <span style={{ whiteSpace: 'nowrap' }}>

frontend/src/lib/spotMarkers.ts

@@ -0,0 +1,41 @@
+// The "extra" spot markers — the ones ORTHOGONAL to the entity status.
+//
+// A spot's entity status (new DXCC / new band / new slot / worked) answers one
+// question. These answer others that can be true at the same time: the park is
+// new even if the entity is worked, the county is new even if the band is not.
+// Both the DX-cluster list and the band map show them, and they have to agree —
+// the same fact must not be green in one panel and violet in the next, so the
+// colours live HERE and nowhere else. This is also the table a per-marker colour
+// setting will drive, which is why it is a table rather than three constants.
+//
+// Colour choices:
+//   POTA    green   — parks; the association is worth keeping
+//   county  violet  — a chart hue, because every semantic token was already
+//                     spoken for: red, orange and yellow are the entity
+//                     statuses, blue is "callsign worked", green is POTA
+//   worked  blue    — matches the WKD-CALL badge the cluster list has always used
+//   prefix  yellow  — unchanged
+export type SpotMarkerKey = 'new_pota' | 'new_county' | 'new_pfx' | 'worked_call';
+
+export type SpotMarker = {
+  key: SpotMarkerKey;
+  colour: string;  // a CSS colour — a var() reference, so it follows the theme
+  labelKey: string; // i18n key, short form (badge / legend)
+};
+
+// Order is the display order, in both panels.
+export const SPOT_MARKERS: SpotMarker[] = [
+  { key: 'new_pota', colour: 'var(--success)', labelKey: 'clg2.newPota' },
+  { key: 'new_county', colour: 'var(--chart-5)', labelKey: 'clg2.newCounty' },
+  { key: 'new_pfx', colour: 'var(--caution)', labelKey: 'clg2.newPfx' },
+  { key: 'worked_call', colour: 'var(--info)', labelKey: 'clg2.wkdCall' },
+];
+
+export const markerColour = (key: SpotMarkerKey): string =>
+  SPOT_MARKERS.find((m) => m.key === key)?.colour ?? 'var(--muted-foreground)';
+
+// activeMarkers returns the markers set on a status entry, in display order.
+export function activeMarkers(e: Record<string, unknown> | undefined): SpotMarker[] {
+  if (!e) return [];
+  return SPOT_MARKERS.filter((m) => !!e[m.key]);
+}