feat: sort award references by reference or description

Reference stays the default: that is how award lists are published and how a
paper list is read. Description answers the other question an operator actually
has — "have I worked anything in Alicante" — which reference order scatters
across eight thousand rows.

Sorted where the filtered list is built, so the grid and list views inherit it
rather than each growing its own copy that could disagree.

localeCompare rather than a byte comparison, because these lists are Spanish,
French and Italian place names: "Ávila" belongs beside "Avilés", not after
"Zaragoza". References compare numerically for the same reason in reverse —
08019 must not sort between 0801 and 081.

changelog.json

@@ -13,7 +13,8 @@
       "Kenwood CAT can go over the network: give a host:port instead of a COM port and OpsLog talks to a serial bridge (ser2net, an Ethernet-serial adapter, a Raspberry Pi at the radio). This is not the radio's own RJ45, which speaks Kenwood's KNS protocol.",
       "The CAT backend list is renamed by how the radio is reached: OmniRig, FlexRadio (API), Yaesu (USB), Kenwood (USB, network), Xiegu (USB), Icom (CI-V USB), Icom (CI-V network), TCI.",
       "With automatic recording off but the audio devices configured, a red dot appears where the recording counter goes. Click it to record the contact by hand: the counter starts, the dot disappears, and logging the QSO saves the file as usual. The sound devices are released again afterwards.",
-      "A recording in progress can be stopped and TRANSMITTED to the station being worked, keyed and sent like a voice-keyer message — for when they ask to hear their own signal. The audio is kept and still saved with the QSO, and recording can be resumed."
+      "A recording in progress can be stopped and TRANSMITTED to the station being worked, keyed and sent like a voice-keyer message — for when they ask to hear their own signal. The audio is kept and still saved with the QSO, and recording can be resumed.",
+      "The award reference table can be sorted by reference (the default) or by description — click either heading, click again to reverse. Both the grid and list views follow."
     ],
     "fr": [
       "Le backend Kenwood est désormais éprouvé face à une radio qui répond : OpsLog dialogue avec l'émulateur TS-2000 qu'il embarque déjà pour les amplis ACOM, ce qui vérifie fréquence, mode, VFO, split et PTT de bout en bout. Un essai sur un vrai Kenwood reste nécessaire, mais le dialogue n'est plus non testé.",
@@ -26,7 +27,8 @@
       "Le CAT Kenwood peut passer par le réseau : indiquez un hôte:port au lieu d'un port COM et OpsLog dialogue avec un pont série (ser2net, boîtier Ethernet-série, Raspberry Pi près de la radio). Il ne s'agit pas de la prise RJ45 de la radio, qui parle le protocole KNS de Kenwood.",
       "La liste des backends CAT est renommée selon la façon dont la radio est jointe : OmniRig, FlexRadio (API), Yaesu (USB), Kenwood (USB, réseau), Xiegu (USB), Icom (CI-V USB), Icom (CI-V réseau), TCI.",
       "Quand l'enregistrement automatique est désactivé mais que les périphériques audio sont configurés, un rond rouge apparaît à l'emplacement du compteur. Un clic enregistre le contact à la main : le compteur démarre, le rond disparaît, et journaliser le QSO enregistre le fichier comme d'habitude. Les périphériques audio sont ensuite relâchés.",
-      "Un enregistrement en cours peut être arrêté puis ÉMIS vers la station travaillée, radio passée en émission comme un message du manipulateur vocal — pour quand elle demande à entendre son propre signal. L'audio est conservé et toujours enregistré avec le QSO, et l'enregistrement peut reprendre."
+      "Un enregistrement en cours peut être arrêté puis ÉMIS vers la station travaillée, radio passée en émission comme un message du manipulateur vocal — pour quand elle demande à entendre son propre signal. L'audio est conservé et toujours enregistré avec le QSO, et l'enregistrement peut reprendre.",
+      "Le tableau des références d'un diplôme peut être trié par référence (par défaut) ou par description — cliquez sur l'en-tête, un second clic inverse l'ordre. Les vues grille et liste suivent toutes deux."
     ]
   },
   {

frontend/src/components/AwardsPanel.tsx

@@ -191,17 +191,40 @@ export function AwardsPanel({ onEditQSO, onAwardsChanged }: { onEditQSO?: (id: n
     return idx.length ? idx : all;
   }, [stats, awardBands]);
 
+  // Sort order for the reference table. Reference is the default because that
+  // is how award lists are published and how an operator reads a paper list;
+  // description answers the other question — "have I worked anything in
+  // Alicante" — which reference order scatters across the whole table.
+  const [refSort, setRefSort] = useState<'ref' | 'name'>('ref');
+  const [refSortDir, setRefSortDir] = useState<'asc' | 'desc'>('asc');
+  const toggleRefSort = (k: 'ref' | 'name') => {
+    if (k === refSort) setRefSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    else { setRefSort(k); setRefSortDir('asc'); }
+  };
+
   const filteredRefs = useMemo(() => {
     if (!current) return [];
     const q = refSearch.trim().toUpperCase();
-    return (current.refs ?? []).filter((r) => {
+    const rows = (current.refs ?? []).filter((r) => {
       if (refFilter === 'worked' && !r.worked) return false;
       if (refFilter === 'notworked' && r.worked) return false;
       if (refFilter === 'worked_notconf' && !(r.worked && !r.confirmed)) return false;
       if (q && !(r.ref.includes(q) || (r.name ?? '').toUpperCase().includes(q) || (r.group ?? '').toUpperCase().includes(q))) return false;
       return true;
     });
-  }, [current, refSearch, refFilter]);
+    const dir = refSortDir === 'asc' ? 1 : -1;
+    return rows.sort((a, b) => {
+      if (refSort === 'name') {
+        // localeCompare, not a byte comparison: these lists are Spanish, French
+        // and Italian place names, where "Ávila" belongs beside "Avilés" rather
+        // than after "Zaragoza".
+        const c = (a.name ?? '').localeCompare(b.name ?? '', undefined, { sensitivity: 'base' });
+        if (c !== 0) return c * dir;
+        return a.ref.localeCompare(b.ref) * dir; // stable tie-break
+      }
+      return a.ref.localeCompare(b.ref, undefined, { numeric: true }) * dir;
+    });
+  }, [current, refSearch, refFilter, refSort, refSortDir]);
 
   return (
     <div className="flex h-full min-h-0">
@@ -386,8 +409,18 @@ export function AwardsPanel({ onEditQSO, onAwardsChanged }: { onEditQSO?: (id: n
                 <table className="text-sm border-separate" style={{ borderSpacing: 0 }}>
                   <thead className="sticky top-0 z-10">
                     <tr className="bg-card">
-                      <th className="sticky left-0 z-20 bg-card text-left py-1.5 pr-2 font-medium border-b border-border w-24">{t('awp.ref')}</th>
+                      <th className="sticky left-0 z-20 bg-card text-left py-1.5 pr-2 font-medium border-b border-border w-24">
-                      <th className="text-left py-1.5 pr-3 font-medium border-b border-border">{t('awp.description')}</th>
+                        <button type="button" onClick={() => toggleRefSort('ref')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.ref')}
+                          {refSort === 'ref' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      <th className="text-left py-1.5 pr-3 font-medium border-b border-border">
+                        <button type="button" onClick={() => toggleRefSort('name')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.description')}
+                          {refSort === 'name' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
                       {gridBands.map((b) => (
                         <th key={b} className="py-1.5 px-1 font-mono font-medium border-b border-border text-center w-11">{b}</th>
                       ))}
@@ -424,8 +457,18 @@ export function AwardsPanel({ onEditQSO, onAwardsChanged }: { onEditQSO?: (id: n
                 <table className="w-full text-sm">
                   <thead className="sticky top-0 bg-card">
                     <tr className="text-left text-muted-foreground border-b border-border">
-                      <th className="py-1.5 pr-2 font-medium w-24">{t('awp.ref')}</th>
+                      <th className="py-1.5 pr-2 font-medium w-24">
-                      <th className="py-1.5 pr-2 font-medium">{t('awp.name')}</th>
+                        <button type="button" onClick={() => toggleRefSort('ref')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.ref')}
+                          {refSort === 'ref' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
+                      <th className="py-1.5 pr-2 font-medium">
+                        <button type="button" onClick={() => toggleRefSort('name')} className="inline-flex items-center gap-1 hover:text-foreground">
+                          {t('awp.name')}
+                          {refSort === 'name' && (refSortDir === 'asc' ? <ChevronUp className="size-3" /> : <ChevronDown className="size-3" />)}
+                        </button>
+                      </th>
                       <th className="py-1.5 pr-2 font-medium w-40">{t('awp.groupCol')}</th>
                       <th className="py-1.5 pr-2 font-medium w-24">{t('awp.status')}</th>
                       <th className="py-1.5 font-medium">{t('awp.bands')}</th>