rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 117 Wiki Activity

fix(chase): the unconfirmed entity badge is visible

Browse Source 
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.
This commit is contained in:
rouggy
2026-08-30 21:40:26 +02:00
parent 3a94a69be3
commit bbb485b9cf
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DecodesPanel.tsx
+13 -9
View File
@@ -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>
))}