up

frontend/src/components/AwardEditor.tsx

@@ -13,12 +13,16 @@ import { cn } from '@/lib/utils';
 import {
   GetAwardDefs, SaveAwardDefs, ResetAwardDefs, AwardFields,
   GetAwardReferenceMeta, UpdateAwardReferenceList,
-  ListAwardReferences, SaveAwardReference, DeleteAwardReference,
+  ListAwardReferences, SearchAwardReferences, SaveAwardReference, DeleteAwardReference,
   ImportAwardReferencesText, GetAwardPresets, ApplyAwardPreset,
   ListCountries, DXCCForCountry, DXCCName,
   PopulateBuiltinReferences, HasBuiltinReferences,
 } from '../../wailsjs/go/main/App';
 
+// Above this many references the editor stops loading the whole list and
+// switches to search-only (mirrors Log4OM's "Too many items" behaviour).
+const REF_LIST_CAP = 1000;
+
 type RefMeta = { code: string; count: number; updated_at: string; can_update: boolean };
 
 export type AwardDef = {
@@ -358,24 +362,44 @@ function ReferencesPanel({ code, presets, meta, onUpdateOnline, updating, onChan
   const [showBulk, setShowBulk] = useState(false);
   const [hasBuiltin, setHasBuiltin] = useState(false);
 
+  const total = meta?.count ?? 0;
+  const large = total > REF_LIST_CAP;
+
+  // Small lists are loaded whole and filtered client-side; large lists (POTA,
+  // 85k parks) are search-only to stay responsive.
   const load = () => {
     if (!code) return;
+    if (total > REF_LIST_CAP) { setRefs([]); return; }
     setBusy(true);
     ListAwardReferences(code).then((r) => setRefs((r ?? []) as any)).catch(() => {}).finally(() => setBusy(false));
   };
-  useEffect(load, [code]);
+  useEffect(load, [code, total]);
   useEffect(() => { HasBuiltinReferences(code).then(setHasBuiltin).catch(() => setHasBuiltin(false)); }, [code]);
 
+  // Server-side search for large lists (debounced, min 2 chars).
+  useEffect(() => {
+    if (!large) return;
+    const s = q.trim();
+    if (s.length < 2) { setRefs([]); return; }
+    const t = window.setTimeout(() => {
+      setBusy(true);
+      SearchAwardReferences(code, s, 0, 200).then((r) => setRefs((r ?? []) as any)).catch(() => setRefs([])).finally(() => setBusy(false));
+    }, 200);
+    return () => window.clearTimeout(t);
+  }, [code, q, large]);
+
   async function populateBuiltin() {
     try { const n = await PopulateBuiltinReferences(code); load(); onChanged(); setErr(`Populated ${n} built-in references.`); }
     catch (e: any) { setErr(String(e?.message ?? e)); }
   }
 
   const sel = refs.find((r) => r.code === selCode) || null;
+  // Large lists are already filtered by the server; small lists filter locally.
   const filtered = useMemo(() => {
+    if (large) return refs;
     const s = q.trim().toUpperCase();
     return refs.filter((r) => !s || r.code.toUpperCase().includes(s) || (r.name ?? '').toUpperCase().includes(s));
-  }, [refs, q]);
+  }, [refs, q, large]);
 
   const patchSel = (p: Partial<AwardRef>) => setRefs((rs) => rs.map((r) => (r.code === selCode ? { ...r, ...p } : r)));
 
@@ -407,7 +431,7 @@ function ReferencesPanel({ code, presets, meta, onUpdateOnline, updating, onChan
     <div className="space-y-2">
       {/* Toolbar */}
       <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-xs text-muted-foreground">Reference count: <span className="font-mono text-foreground">{refs.length}</span></span>
+        <span className="text-xs text-muted-foreground">Reference count: <span className="font-mono text-foreground">{total.toLocaleString()}</span></span>
         <div className="flex-1" />
         <Select value="" onValueChange={applyPreset}>
           <SelectTrigger className="h-7 w-44 text-xs"><SelectValue placeholder="Apply preset…" /></SelectTrigger>
@@ -440,8 +464,13 @@ function ReferencesPanel({ code, presets, meta, onUpdateOnline, updating, onChan
         <div className="border rounded flex flex-col min-h-0 max-h-[46vh]">
           <div className="p-1.5 border-b"><Input className="h-7 text-xs" placeholder="Search…" value={q} onChange={(e) => setQ(e.target.value)} /></div>
           <div className="flex-1 overflow-auto">
-            {busy && <div className="px-2 py-1.5 text-[11px] text-muted-foreground flex items-center gap-1.5"><Loader2 className="size-3 animate-spin" /> Loading…</div>}
-            {!busy && filtered.length === 0 && <div className="px-2 py-1.5 text-[11px] text-muted-foreground">No references.</div>}
+            {busy && <div className="px-2 py-1.5 text-[11px] text-muted-foreground flex items-center gap-1.5"><Loader2 className="size-3 animate-spin" /> Searching…</div>}
+            {!busy && large && q.trim().length < 2 && (
+              <div className="m-2 rounded border border-amber-300 bg-amber-50 px-2 py-1.5 text-[11px] text-amber-800">
+                Too many items ({total.toLocaleString()}). Please refine search (type 2+ characters).
+              </div>
+            )}
+            {!busy && filtered.length === 0 && !(large && q.trim().length < 2) && <div className="px-2 py-1.5 text-[11px] text-muted-foreground">No references.</div>}
             {filtered.map((r) => (
               <button key={r.code} onClick={() => setSelCode(r.code)}
                 className={cn('flex w-full items-baseline gap-2 px-2 py-1 text-left text-xs border-b border-border/30', r.code === selCode ? 'bg-accent' : 'hover:bg-accent/50', !r.valid && 'opacity-50')}>