up

frontend/src/components/BandSlotGrid.tsx

@@ -101,6 +101,17 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCal
     return m;
   }, [wb]);
 
+  // "Newness" of the current band+mode entry, for the award/DX-chase badges.
+  const curClass = CLASSES.find((c) => classMatchesMode(c, currentMode));
+  const slotStatus = curClass ? statusMap.get(`${currentBand}|${curClass}`) : undefined;
+  const bandWorked = CLASSES.some((c) => statusMap.get(`${currentBand}|${c}`));
+  const modeWorked = !!curClass && cols.some((b) => statusMap.get(`${b.tag}|${curClass}`));
+  const newBand = hasDxcc && !newOne && !bandWorked;
+  const newMode = hasDxcc && !newOne && !!curClass && !modeWorked;
+  const newBandMode = hasDxcc && !newOne && !!curClass && !slotStatus;
+  // New slot for THIS call: worked the op before, but not on this band+mode.
+  const newSlot = !newOne && callCount > 0 && !!curClass && slotStatus !== 'call_c' && slotStatus !== 'call_w';
+
   return (
     <section
       className={cn(
@@ -136,6 +147,14 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCal
                 </>
               )}
             </span>
+            {(newBand || newMode || newBandMode || newSlot) && (
+              <div className="flex flex-wrap items-center gap-1">
+                {newBand && <Badge className="bg-amber-600 text-white px-1.5 py-0 text-[10px]">New Band</Badge>}
+                {newMode && <Badge className="bg-amber-600 text-white px-1.5 py-0 text-[10px]">New Mode</Badge>}
+                {!newBand && !newMode && newBandMode && <Badge className="bg-amber-500 text-white px-1.5 py-0 text-[10px]">New Band &amp; Mode</Badge>}
+                {newSlot && <Badge className="bg-sky-600 text-white px-1.5 py-0 text-[10px]">New Slot</Badge>}
+              </div>
+            )}
           </>
         ) : busy ? (
           <span className="flex items-center gap-2 text-xs text-muted-foreground italic">