up

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  AlertCircle, Antenna, CheckCircle2, Clock, Compass, Hash, Loader2, Lock,
+  AlertCircle, Antenna, CheckCircle2, Clock, Compass, ExternalLink, Hash, Loader2, Lock,
   Maximize2, Minimize2, Pencil, RadioTower, RefreshCw, Send, Settings, Square, Trash2, Unlock, X,
 } from 'lucide-react';
 
@@ -15,6 +15,7 @@ import {
   GetCATState, SetCATFrequency, SetCATMode, SwitchCATRig,
   RefreshCtyDat,
   RotatorGoTo, RotatorStop,
+  OpenExternalURL,
   GetCATSettings,
 } from '../wailsjs/go/main/App';
 import { EventsOn, EventsOff } from '../wailsjs/runtime/runtime';
@@ -555,6 +556,8 @@ export default function App() {
 
   function resetAutoFill() {
     setName(''); setQth(''); setCountry(''); setGrid('');
+    setWb(null);
+    setLookupResult(null);
     setDetails((d) => ({
       ...d,
       state: '', cnty: '', address: '',
@@ -1010,6 +1013,21 @@ export default function App() {
         <div className="flex flex-col w-40">
           <Label className="mb-1 flex items-center gap-2 h-3.5">
             Callsign
+            {callsign.trim() && (
+              <button
+                type="button"
+                tabIndex={-1}
+                onClick={() => {
+                  const c = callsign.trim().toUpperCase();
+                  OpenExternalURL(`https://www.qrz.com/db/${encodeURIComponent(c)}`)
+                    .catch((err) => setError(String(err?.message ?? err)));
+                }}
+                title="Open this callsign on QRZ.com"
+                className="inline-flex items-center justify-center size-3.5 rounded text-muted-foreground/60 hover:text-primary transition-colors"
+              >
+                <ExternalLink className="size-3" />
+              </button>
+            )}
             {lookupBusy && <Badge variant="secondary" className="text-[9px] py-0 px-1.5 normal-case font-medium tracking-wider"><Loader2 className="size-2.5 mr-1 animate-spin" />Looking up…</Badge>}
             {!lookupBusy && lookupResult && (
               <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[9px] py-0 px-1.5 normal-case font-medium tracking-wider" variant="outline">
@@ -1205,7 +1223,35 @@ export default function App() {
           else and let the user re-expand with the topbar toggle. */}
       {compact ? null : <>
       {/* ===== BAND/SLOT GRID ===== */}
-      <BandSlotGrid wb={wb} busy={wbBusy} currentBand={band} currentMode={mode} />
+      {/* QRZ profile picture sits next to the matrix when the user has
+          opted in (Settings → Lookup → Show QRZ profile pictures). The
+          backend returns image_url="" when the toggle is off, so we
+          don't need to re-check the setting here. */}
+      <div className="flex items-start gap-3">
+        <div className="flex-1 min-w-0">
+          <BandSlotGrid wb={wb} busy={wbBusy} currentBand={band} currentMode={mode} />
+        </div>
+        {lookupResult?.image_url && (
+          <a
+            href={lookupResult.image_url}
+            onClick={(e) => {
+              e.preventDefault();
+              OpenExternalURL(lookupResult.image_url!).catch((err) => setError(String(err?.message ?? err)));
+            }}
+            title="Open full-size on QRZ.com"
+            className="block shrink-0 rounded border border-border overflow-hidden hover:border-primary/60 transition-colors"
+          >
+            <img
+              src={lookupResult.image_url}
+              alt={`${callsign} profile`}
+              className="block w-[160px] h-[120px] object-cover bg-muted/30"
+              loading="lazy"
+              referrerPolicy="no-referrer"
+              onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+            />
+          </a>
+        )}
+      </div>
 
       {/* ===== F2-F5 DETAILS ===== */}
       <DetailsPanel
@@ -1340,7 +1386,7 @@ export default function App() {
                         <td className="px-2.5 py-1.5 whitespace-nowrap border-b border-border/40">
                           <span className="inline-block px-2 py-0.5 rounded font-mono text-[11px] font-semibold bg-emerald-100 text-emerald-700">{q.mode}</span>
                         </td>
-                        <td className="px-2.5 py-1.5 font-mono text-right whitespace-nowrap border-b border-border/40">{fmtFreq(q.freq_hz)}</td>
+                        <td className="px-2.5 py-1.5 font-mono text-right whitespace-nowrap border-b border-border/40">{q.freq_hz ? fmtFreqDots(fmtFreq(q.freq_hz)) : ''}</td>
                         <td className="px-2.5 py-1.5 font-mono whitespace-nowrap border-b border-border/40">{q.rst_sent ?? ''}</td>
                         <td className="px-2.5 py-1.5 font-mono whitespace-nowrap border-b border-border/40">{q.rst_rcvd ?? ''}</td>
                         <td className="px-2.5 py-1.5 whitespace-nowrap border-b border-border/40">{q.name ?? ''}</td>