feat: Winkeyer

frontend/src/components/BandSlotGrid.tsx

@@ -46,6 +46,17 @@ const STATUS_CLASSES: Record<string, string> = {
   dxcc_w: 'bg-indigo-300 hover:bg-indigo-200',
 };
 
+// Legend entries, in the same colour order as the cells. swatch = the
+// background class (or a special ring marker for the current-entry cell).
+const LEGEND: { swatch: string; ring?: boolean; label: string }[] = [
+  { swatch: 'bg-emerald-700', label: 'Call confirmed' },
+  { swatch: 'bg-emerald-300', label: 'Call worked' },
+  { swatch: 'bg-indigo-800', label: 'Entity confirmed' },
+  { swatch: 'bg-indigo-300', label: 'Entity worked' },
+  { swatch: 'bg-stone-200', label: 'Not worked' },
+  { swatch: 'bg-stone-200', ring: true, label: 'Current entry' },
+];
+
 function cellTitle(band: string, cls: string, status: string, current: boolean): string {
   const desc =
     status === 'call_c' ? 'This callsign confirmed' :
@@ -75,8 +86,8 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
   return (
     <section
       className={cn(
-        'flex items-center gap-4 px-3 py-2 bg-card border-b border-border flex-wrap shrink-0',
-        newOne && 'bg-gradient-to-br from-amber-100 to-amber-200 border-amber-300',
+        'flex items-center gap-4 px-3 py-2 flex-wrap shrink-0',
+        newOne && 'bg-gradient-to-br from-amber-100 to-amber-200 rounded-lg',
       )}
     >
       <div className="flex items-center gap-2 min-w-[220px]">
@@ -120,6 +131,7 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
         )}
       </div>
 
+      <div className="flex flex-col gap-2">
       <table className="border-separate" style={{ borderSpacing: 3 }}>
         <thead>
           <tr>
@@ -170,6 +182,23 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode }: Props) {
           })}
         </tbody>
       </table>
+
+      {/* Colour legend — sits in the spare room under the matrix. */}
+      <div className="flex items-center gap-x-3 gap-y-1 flex-wrap pl-[26px]">
+        {LEGEND.map((l) => (
+          <span key={l.label} className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
+            <span
+              className={cn(
+                'inline-block size-3 rounded shrink-0',
+                l.swatch,
+                l.ring && 'ring-2 ring-amber-500 ring-inset',
+              )}
+            />
+            {l.label}
+          </span>
+        ))}
+      </div>
+      </div>
     </section>
   );
 }