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.
This commit is contained in:
@@ -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")} />
|
||||
|
||||
@@ -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' }}>
|
||||
|
||||
Reference in New Issue
Block a user