feat: added versionning & About window

frontend/src/components/DetailsPanel.tsx

@@ -1,4 +1,5 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { ComputeQSOAwardRefs } from '../../wailsjs/go/main/App';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -121,6 +122,40 @@ function Field({ label, span = 1, children }: { label: string; span?: 1 | 2 | 3
 export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, details, onChange, wb, wbBusy, band, mode, bands, tab, onTab, keyerActive }: Props) {
   const [internalOpen, setInternalOpen] = useState<TabName>('stats');
   const open = tab ?? internalOpen; // controlled when `tab` is provided
+
+  // Live award detection: run the SAME engine used at log time over the current
+  // contact (callsign + looked-up address/state/zones) so award references the
+  // QSO will earn — e.g. WAPC matching "Beijing" inside the address — are
+  // surfaced and auto-added the moment you enter a call or click a spot, instead
+  // of only appearing after logging. Pickable matches are merged into award_refs
+  // (idempotent; award_refs is NOT a dependency, so removing one by hand sticks).
+  const [detected, setDetected] = useState<Array<{ code: string; ref: string; name?: string; pickable?: boolean }>>([]);
+  useEffect(() => {
+    if (open !== 'awards' || !callsign.trim()) { setDetected([]); return; }
+    const t = window.setTimeout(async () => {
+      try {
+        const q: any = {
+          callsign, band, mode,
+          address: details.address ?? '', state: details.state ?? '', cnty: details.cnty ?? '',
+          cont: details.cont ?? '', dxcc: details.dxcc, cqz: details.cqz, ituz: details.ituz,
+          qso_date: new Date().toISOString(),
+        };
+        const all = ((await ComputeQSOAwardRefs(q)) ?? []) as any[];
+        setDetected(all as any);
+        const cur = details.award_refs ?? '';
+        const have = new Set(cur.split(';').filter(Boolean));
+        let next = cur;
+        for (const r of all) {
+          if (!r.pickable) continue;
+          const entry = `${String(r.code).toUpperCase()}@${String(r.ref).toUpperCase()}`;
+          if (!have.has(entry)) { next = next ? `${next};${entry}` : entry; have.add(entry); }
+        }
+        if (next !== cur) onChange({ award_refs: next });
+      } catch { /* leave detection empty on failure */ }
+    }, 400);
+    return () => window.clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, callsign, details.address, details.state, details.cnty, details.dxcc, details.cqz, details.ituz, band, mode]);
   // Bearing/distance from operator's home grid to the remote station.
   // Recomputed only when either grid actually changes.
   const path = useMemo(() => {
@@ -179,7 +214,7 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, detai
         ))}
       </nav>
 
-      <div className="overflow-y-auto min-h-0">
+      <div className="flex-1 overflow-y-auto min-h-0">
       {open === 'stats' && (
         <div className="px-3 py-2.5">
           <BandSlotGrid wb={wb} busy={!!wbBusy} currentBand={band} currentMode={mode} bands={bands} hasCall={callsign.trim() !== ''} />
@@ -257,13 +292,24 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, detai
       )}
 
       {open === 'awards' && (
-        <div className="px-3 py-2.5">
+        <div className="px-3 py-2.5 h-full flex flex-col min-h-0">
           <AwardRefSelector
             dxcc={details.dxcc}
             value={details.award_refs ?? ''}
             onChange={(v) => onChange({ award_refs: v })}
             fieldValues={{ state: details.state ?? '', cnty: details.cnty ?? '' }}
+            heightClass="flex-1 min-h-0"
           />
+          {detected.length > 0 && (
+            <div className="mt-2 text-[11px] text-muted-foreground shrink-0">
+              <span className="font-medium text-foreground/70">Detected — this contact will count for:</span>{' '}
+              {detected.map((r) => (
+                <span key={`${r.code}@${r.ref}`} className="inline-block mr-2 font-mono">
+                  {r.code}{r.ref ? `@${r.ref}` : ''}{r.name ? <span className="text-muted-foreground/70"> {r.name}</span> : null}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
       )}