diff --git a/frontend/src/components/DecodesPanel.tsx b/frontend/src/components/DecodesPanel.tsx index 0540c04..8929e2c 100644 --- a/frontend/src/components/DecodesPanel.tsx +++ b/frontend/src/components/DecodesPanel.tsx @@ -333,12 +333,15 @@ function ColResizer({ onResize, onReset }: { onResize: (dx: number) => void; onR // // Colours match the cluster list and the band map — the same fact must not be // amber in one panel and green in the next. -const ENTITY_BADGE: Record = { - 'new': { label: 'dec.stNew', cls: 'bg-success text-success-foreground' }, - 'new-band': { label: 'dec.stBand', cls: 'bg-warning text-warning-foreground' }, - 'new-mode': { label: 'dec.stMode', cls: 'bg-info text-info-foreground' }, - 'new-slot': { label: 'dec.stSlot', cls: 'bg-caution text-caution-foreground' }, - 'new-call': { label: 'dec.stCall', cls: 'bg-muted text-muted-foreground' }, +const ENTITY_BADGE: Record = { + // colour is the category's own hue, for the UNCONFIRMED rendering: the + // filled cls puts light text on a filled chip, and dimming that to a + // transparent background left light-on-nothing — an invisible badge. + 'new': { label: 'dec.stNew', cls: 'bg-success text-success-foreground', colour: 'var(--success)' }, + 'new-band': { label: 'dec.stBand', cls: 'bg-warning text-warning-foreground', colour: 'var(--warning)' }, + 'new-mode': { label: 'dec.stMode', cls: 'bg-info text-info-foreground', colour: 'var(--info)' }, + 'new-slot': { label: 'dec.stSlot', cls: 'bg-caution text-caution-foreground', colour: 'var(--caution)' }, + 'new-call': { label: 'dec.stCall', cls: 'bg-muted text-muted-foreground', colour: 'var(--muted-foreground)' }, }; // entityBadgesFor turns a status into the badges that describe it. @@ -349,7 +352,7 @@ const ENTITY_BADGE: Record = { // passed the BAND and MODE filters and then showed no reason for being there, // which is precisely what was reported. catsOf has always split the status into // its two categories; this is the same split, on the screen. -function entityBadgesFor(status: string): { label: string; cls: string }[] { +function entityBadgesFor(status: string): { label: string; cls: string; colour: string }[] { if (status === 'new-band-mode') { return [ENTITY_BADGE['new-band'], ENTITY_BADGE['new-mode']]; } @@ -1151,8 +1154,9 @@ export function DecodesPanel({ decodes, txMsgs, txState, txStates, spotStatus, o {entities.map((b) => ( + className={cn('rounded px-1 py-px text-[10px] font-bold uppercase tracking-wide shrink-0', + e?.unconf_status ? 'border bg-transparent' : b.cls)} + style={e?.unconf_status ? { color: b.colour, borderColor: b.colour, borderStyle: 'dashed', opacity: 0.6 } : undefined}> {t(b.label)} ))}