From bbb485b9cf06b162fe1ea4541e915fe40448278c Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sun, 30 Aug 2026 21:40:26 +0200
Subject: [PATCH] fix(chase): the unconfirmed entity badge is visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dimming the filled chip to a transparent background left its light
foreground text on nothing — an invisible badge in the row. Unconfirmed now
renders in the category's own hue, dashed border and text, like the extras
beside it.
---
 frontend/src/components/DecodesPanel.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

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<string, { label: string; cls: string }> = {
-  '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<string, { label: string; cls: string; colour: string }> = {
+  // 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<string, { label: string; cls: string }> = {
 // 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) => (
                       <span key={b.label}
                         title={e?.unconf_status ? t('dec.unconfTip') : undefined}
-                        className={cn('rounded px-1 py-px text-[10px] font-bold uppercase tracking-wide shrink-0', b.cls,
-                          e?.unconf_status && 'opacity-60 border border-dashed border-current bg-transparent')}>
+                        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)}
                       </span>
                     ))}