fix(cluster): slot colour apart from POTA, chips match badges, NEW CALL filter works

Three from review. Aqua for NEW SLOT sat right next to the POTA green — it is
now the sky cyan the panadapter palette has shipped for new-slot all along.
The NEW COUNTY chip was green while its badge is violet, and NEW SLOT's chip
was still caution yellow: chips now carry the badge's own colour (color-mix for
the muted border/背景), because a filter that does not look like what it selects
has to be learned twice.

And the NEW CALL chip matched only the DISPLAYED status, which is manufactured
by the slot-highlight option — with that option off the chip matched nothing
and read as broken. It now filters on the fact itself (worked_slot false), so
it works either way.

frontend/src/App.tsx

@@ -5870,6 +5870,13 @@ export default function App() {
         // worked call still matches its own entity status too (new-band/new-slot),
         // so it stays visible under those chips.
         const matches = (st !== 'worked' && clusterStatusFilter.has(st))
+          // NEW CALL is a FACT about the callsign (never worked on this band and
+          // mode), surfaced as a status only by the slot-highlight option. The
+          // chip filters on the fact itself, so it works whether or not that
+          // display option is on — worked_slot is computed whenever either
+          // slot option is enabled.
+          || (clusterStatusFilter.has('new-call') && e?.worked_slot === false
+            && (!e?.status || e?.status === 'worked' || e?.status === 'new-call'))
           || (!!e?.worked_call && clusterStatusFilter.has('worked'))
           || (!!e?.new_pota && clusterStatusFilter.has('new-pota'))
           || (!!e?.new_county && clusterStatusFilter.has('new-county'))
@@ -5976,12 +5983,20 @@ export default function App() {
   );
 
   const F_CHIP = 'px-1.5 py-[3px] rounded-md border text-[10px] font-bold tracking-wider transition-opacity';
-  const fChip = (key: string, label: string, cls: string, on: boolean, toggle: () => void) => (
-    <button key={key} type="button" onClick={toggle}
-      className={cn(F_CHIP, on ? cls : `${cls} opacity-40 hover:opacity-80`)}>
+  const fChip = (key: string, label: string, cls: string, on: boolean, toggle: () => void, style?: React.CSSProperties, title?: string) => (
+    <button key={key} type="button" onClick={toggle} title={title}
+      className={cn(F_CHIP, on ? cls : `${cls} opacity-40 hover:opacity-80`)} style={style}>
       {label}
     </button>
   );
+  // chipStyle builds a filter chip in an arbitrary colour — for the statuses
+  // whose grid badge is not one of the semantic tokens the chip classes cover.
+  // A filter that does not look like what it selects has to be learned twice.
+  const chipStyle = (c: string): React.CSSProperties => ({
+    color: c,
+    borderColor: `color-mix(in srgb, ${c} 45%, transparent)`,
+    background: `color-mix(in srgb, ${c} 14%, transparent)`,
+  });
 
   const renderClusterFilters = () => (
     <div className="w-56 shrink-0 border-l border-border/60 flex flex-col min-h-0 bg-muted/10">
@@ -6097,14 +6112,14 @@ export default function App() {
               { k: 'new-band-mode' as SpotFilterKey, label: 'NEW B+M', cls: 'bg-danger-muted text-danger-muted-foreground border-danger-border' },
               { k: 'new-band' as SpotFilterKey, label: 'NEW BAND',  cls: 'bg-warning-muted text-warning-muted-foreground border-warning-border' },
               { k: 'new-mode' as SpotFilterKey, label: 'NEW MODE',  cls: 'bg-caution-muted text-caution-muted-foreground border-caution-border' },
-              { k: 'new-slot' as SpotFilterKey, label: 'NEW SLOT',  cls: 'bg-caution-muted text-caution-muted-foreground border-caution-border' },
+              { k: 'new-slot' as SpotFilterKey, label: 'NEW SLOT',  cls: 'border', style: chipStyle('#5AC8FA') },
               // NEW CALL is about the CALLSIGN, not the entity: never worked on this
               // band and mode. Only appears when the slot-highlight option is on.
               { k: 'new-call' as SpotFilterKey, label: 'NEW CALL',  cls: 'bg-caution-muted text-caution-muted-foreground border-caution-border' },
               // Same colours as the badges in the grid — a filter that does not
               // look like what it selects has to be learned twice.
               { k: 'new-pota'   as SpotFilterKey, label: 'NEW POTA',   cls: 'bg-success-muted text-success-muted-foreground border-success-border' },
-              { k: 'new-county' as SpotFilterKey, label: 'NEW COUNTY', cls: 'bg-success-muted text-success-muted-foreground border-success-border' },
+              { k: 'new-county' as SpotFilterKey, label: 'NEW COUNTY', cls: 'border', style: chipStyle('var(--chart-5)') },
               { k: 'new-pfx'    as SpotFilterKey, label: 'NEW PFX',    cls: 'bg-caution-muted text-caution-muted-foreground border-caution-border' },
               // Only ever set for a station this receiver decoded over the UDP link.
               { k: 'new-grid'   as SpotFilterKey, label: 'NEW GRID',   cls: 'bg-muted text-foreground border-border' },
@@ -6112,8 +6127,8 @@ export default function App() {
               // worked spots; the separate "Hide worked" checkbox drops them — they
               // are opposite controls, so don't use both at once.
               { k: 'worked'   as SpotFilterKey, label: 'WORKED',   cls: 'bg-info-muted text-info-muted-foreground border-info-border' },
-            ]).map((s) => fChip(s.k, s.label, s.cls, clusterStatusFilter.has(s.k),
-              () => setClusterStatusFilter((cur) => { const n = new Set(cur); if (n.has(s.k)) n.delete(s.k); else n.add(s.k); return n; })))}
+            ]).map((s: any) => fChip(s.k, s.label, s.cls, clusterStatusFilter.has(s.k),
+              () => setClusterStatusFilter((cur) => { const n = new Set(cur); if (n.has(s.k)) n.delete(s.k); else n.add(s.k); return n; }), s.style))}
           </div>,
           clusterStatusFilter.size > 0 ? (
             <button type="button" onClick={() => setClusterStatusFilter(new Set())}

frontend/src/components/ClusterGrid.tsx

@@ -150,9 +150,10 @@ function statusFor(p: any): SpotStatusEntry | undefined {
 const NEW = 'var(--warning)'; // yellow: something here is new
 // NEW SLOT gets its own hue. It shared the amber NEW family while the NEW PFX
 // marker sits in caution yellow — two different facts, two near-identical
-// colours in the same cell. Aqua matches the cyan the panadapter palette
-// already gives new-slot, so the two views tell the story in the same colour.
-const NEWSLOT = 'var(--chart-2)';
+// colours in the same cell. Sky cyan, the exact colour the panadapter palette
+// ships for new-slot (#5AC8FA), so the two views tell one story — and clearly
+// apart from the POTA green the first attempt (aqua) sat next to.
+const NEWSLOT = '#5AC8FA';
 const WKD = 'var(--info)';    // blue: this callsign is already in the log
 
 // FILLING the cell that carries the fact, rather than only tinting its text.