fix: fix a bug adjusting the length of Ultrabeam

frontend/src/components/NetControlPanel.tsx

@@ -14,6 +14,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { QSOEditModal } from '@/components/QSOEditModal';
+import { RecentQSOsGrid } from '@/components/RecentQSOsGrid';
 import { useI18n } from '@/lib/i18n';
 import type { QSOForm } from '@/types';
 import {
@@ -59,13 +60,13 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
 
   // Full-QSO edit modal for an on-air draft (same one Recent QSOs uses).
   const [editingDraft, setEditingDraft] = useState<QSOForm | null>(null);
+  const [selectedActiveIds, setSelectedActiveIds] = useState<number[]>([]);
 
   // Add/edit-contact dialog.
   const [contactOpen, setContactOpen] = useState(false);
   const [contact, setContact] = useState<Station>(emptyStation());
   const [looking, setLooking] = useState(false);
 
-  const activeGrid = useRef<any>(null);
   const rosterGrid = useRef<any>(null);
 
   // Worked-before for the clicked station (see if/when we contacted it before).
@@ -230,18 +231,6 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
     } catch (e: any) { setError(String(e?.message ?? e)); }
   }
 
-  const activeCols = useMemo<ColDef<QSOForm>[]>(() => [
-    { headerName: t('ncp.colCallsign'), field: 'callsign', width: 110, cellClass: 'font-mono font-semibold' },
-    { headerName: t('ncp.colName'), field: 'name', flex: 1 },
-    { headerName: 'QTH', field: 'qth', flex: 1 },
-    { headerName: t('ncp.colTimeOn'), valueGetter: (p) => fmtTimeOn((p.data as any)?.qso_date), width: 90, cellClass: 'font-mono text-[11px]' },
-    { headerName: t('ncp.colBand'), field: 'band', width: 70, cellClass: 'font-mono' },
-    { headerName: t('ncp.colMode'), field: 'mode', width: 70, cellClass: 'font-mono' },
-    { headerName: 'RST S', field: 'rst_sent', width: 70, cellClass: 'font-mono' },
-    { headerName: 'RST R', field: 'rst_rcvd', width: 70, cellClass: 'font-mono' },
-    { headerName: t('ncp.colComment'), field: 'comment', flex: 1.5 },
-  ], [t]);
-
   const rosterCols = useMemo<ColDef<Station>[]>(() => [
     { headerName: t('ncp.colCallsign'), field: 'callsign', width: 110, cellClass: 'font-mono font-semibold' },
     { headerName: t('ncp.colName'), field: 'name', flex: 1 },
@@ -292,26 +281,20 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
             {t('ncp.onAirActive')}
             <span className="ml-auto font-normal normal-case opacity-90">{t('ncp.activeHint')}</span>
           </div>
-          <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
-            <div style={{ position: 'absolute', inset: 0 }}>
-              <AgGridReact<QSOForm>
-                ref={activeGrid}
-                theme={hamlogTheme}
-                rowData={active}
-                columnDefs={activeCols}
-                defaultColDef={defaultColDef}
-                onRowClicked={(e) => e.data && showWorkedBefore(e.data.callsign, (e.data as any).dxcc ?? 0)}
-                onRowDoubleClicked={(e) => e.data && setEditingDraft(e.data)}
-                rowSelection={{ mode: 'singleRow', checkboxes: false, enableClickSelection: true }}
-                animateRows={false}
-                getRowId={(p) => String((p.data as any).id)}
-              />
-            </div>
+          <div className="flex flex-col min-h-0 flex-1">
+            <RecentQSOsGrid
+              rows={active}
+              total={active.length}
+              storageKey="net.onair"
+              onRowClicked={(q) => showWorkedBefore(q.callsign, (q as any).dxcc ?? 0)}
+              onRowDoubleClicked={(q) => setEditingDraft(q)}
+              onRowSelected={setSelectedActiveIds}
+            />
           </div>
           {isOpen && active.length > 0 && (
             <div className="px-3 py-1.5 border-t border-border/60 bg-muted/30 flex items-center gap-2">
               <Button variant="ghost" size="sm" className="h-7 text-[11px]"
-                onClick={() => { const r = activeGrid.current?.api?.getSelectedRows?.()?.[0] as QSOForm; if (r) deactivate(r.id as number); }}>
+                onClick={() => { if (selectedActiveIds[0] != null) deactivate(selectedActiveIds[0]); }}>
                 <MinusCircle className="size-3.5" /> {t('ncp.logEndSelected')}
               </Button>
             </div>
@@ -335,7 +318,7 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
                   </span>
                 )}
               </div>
-              <div className="flex-1 min-h-0 overflow-auto">
+              <div className="flex-1 min-h-0 flex flex-col">
                 {!wbCall ? (
                   <div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbHint')}</div>
                 ) : wbBusy ? (
@@ -343,30 +326,11 @@ export function NetControlPanel({ onLogged, countries, bands, modes }: Props) {
                 ) : !wb || wb.count === 0 ? (
                   <div className="flex h-full items-center justify-center text-xs text-muted-foreground">{t('ncp.wbNone')} {wbCall}</div>
                 ) : (
-                  <table className="w-full text-xs">
-                    <thead className="sticky top-0 bg-muted/30 text-muted-foreground">
-                      <tr className="text-left">
-                        <th className="px-3 py-1 font-semibold">{t('ncp.colDate')}</th>
-                        <th className="px-2 py-1 font-semibold">{t('ncp.colTimeOn')}</th>
-                        <th className="px-2 py-1 font-semibold">{t('ncp.colBand')}</th>
-                        <th className="px-2 py-1 font-semibold">{t('ncp.colMode')}</th>
-                        <th className="px-2 py-1 font-semibold">RST</th>
-                        <th className="px-2 py-1 font-semibold">{t('ncp.colComment')}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {((wb.entries ?? []) as any[]).map((q, i) => (
-                        <tr key={q.id ?? i} className="border-t border-border/20 hover:bg-muted/30">
-                          <td className="px-3 py-1 font-mono">{String(q.qso_date ?? '').slice(0, 10)}</td>
-                          <td className="px-2 py-1 font-mono">{String(q.time_on ?? '').slice(0, 5)}</td>
-                          <td className="px-2 py-1">{q.band}</td>
-                          <td className="px-2 py-1">{q.mode}</td>
-                          <td className="px-2 py-1 font-mono">{(q.rst_sent ?? '')}/{(q.rst_rcvd ?? '')}</td>
-                          <td className="px-2 py-1 truncate max-w-[360px]">{q.comment}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                  <RecentQSOsGrid
+                    rows={(wb.entries ?? []) as any}
+                    total={wb.count}
+                    storageKey="net.wb"
+                  />
                 )}
               </div>
             </div>