fix(webpub): the column picker is a dropdown, not a wall

The first attempt laid 123 fields out on the page, sectioned by group. That buried every other setting in the panel and was no easier to read than the flat wrap it replaced — more surface, same problem. One dropdown now, alphabetical, with a search box pinned at its top. Alphabetical because any other order means hunting: the operator arrives knowing the name of the field they want. The menu stays open while ticking, since picking eight columns should be one visit rather than eight. The chosen columns keep their place above it, in publication order — that list answers "what will the page look like", which no catalogue can.
2026-08-11 11:11:24 +02:00
parent 67fe5bcff0
commit 735dfe69db
3 changed files with 50 additions and 40 deletions
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Upload, FolderOpen, Loader2 } from 'lucide-react';
+import { Upload, FolderOpen, Loader2, ChevronsUpDown } from 'lucide-react';
 import {
  GetWebPublishConfig, SaveWebPublishConfig, WebPublishColumns,
  TestWebPublishFTP, PublishLogNow, GetWebPublishStatus, PickBackupFolder,
@@ -9,6 +9,9 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem,
+} from '@/components/ui/dropdown-menu';
 import { useI18n } from '@/lib/i18n';
 import { cn } from '@/lib/utils';

@@ -24,10 +27,10 @@ export function WebPublishPanel() {
  const { t } = useI18n();
  const [cfg, setCfg] = useState<Cfg | null>(null);
  const [cols, setCols] = useState<Col[]>([]);
-  // With every ADIF field on offer the list is long, so it is searchable and
-  // sectioned. Chosen columns are pulled to the top: after picking eight out of
-  // a hundred, the question stops being 'what exists' and becomes 'what did I
-  // pick, and in what order does it print'.
+  // The catalogue is 123 fields, so the picker is a dropdown with a search box
+  // rather than anything laid out on the page. Chosen columns stay visible above
+  // it, in publication order: after picking eight out of a hundred the question
+  // stops being 'what exists' and becomes 'what did I pick, and how will it print'.
  const [colSearch, setColSearch] = useState('');
  const [busy, setBusy] = useState<'' | 'test' | 'publish'>('');
  const [msg, setMsg] = useState('');
@@ -166,37 +169,44 @@ export function WebPublishPanel() {
            </div>
          )}

-          <Input className="h-7 text-xs" placeholder={t('wpub.columnsSearch')}
-            value={colSearch} onChange={(e) => setColSearch(e.target.value)} />
-
-          {/* The catalogue: sectioned, and filtered as you type. 123 fields in
-              one flat wrap is a wall nobody reads to the end of. */}
-          <div className="max-h-64 overflow-auto rounded border border-border/60 p-2 space-y-2">
-            {Array.from(new Set(cols.map((c) => c.group))).map((g) => {
-              const q = colSearch.trim().toLowerCase();
-              const inGroup = cols.filter((c) => c.group === g &&
-                (!q || c.header.toLowerCase().includes(q) || c.key.toLowerCase().includes(q)));
-              if (inGroup.length === 0) return null;
-              return (
-                <div key={g}>
-                  <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">{g}</div>
-                  <div className="flex flex-wrap gap-1.5">
-                    {inGroup.map((c) => {
-                      const on = cfg.columns?.includes(c.key);
-                      return (
-                        <button key={c.key} type="button" onClick={() => toggleCol(c.key)}
-                          title={c.key}
-                          className={cn('px-2 py-0.5 rounded-full border text-[11px] font-medium transition-colors',
-                            on ? 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground hover:bg-muted')}>
-                          {c.header}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
+          {/* One dropdown, alphabetical, filtered as you type. The catalogue is
+              123 fields: laid out on the page it buries every other setting, and
+              sorting by anything but the alphabet means hunting. The menu stays
+              open while ticking — picking eight columns should be one visit. */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="w-full justify-between h-8 text-xs font-normal">
+                {t('wpub.columnsPick')}
+                <ChevronsUpDown className="size-3.5 opacity-60" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-72 max-h-80 overflow-auto">
+              <div className="p-1.5 sticky top-0 bg-popover z-10">
+                <Input className="h-7 text-xs" placeholder={t('wpub.columnsSearch')}
+                  value={colSearch}
+                  onChange={(e) => setColSearch(e.target.value)}
+                  onKeyDown={(e) => e.stopPropagation()} />
+              </div>
+              {[...cols]
+                .sort((a, b) => a.header.localeCompare(b.header))
+                .filter((c) => {
+                  const q = colSearch.trim().toLowerCase();
+                  return !q || c.header.toLowerCase().includes(q) || c.key.toLowerCase().includes(q);
+                })
+                .map((c) => (
+                  <DropdownMenuCheckboxItem
+                    key={c.key}
+                    checked={cfg.columns?.includes(c.key) ?? false}
+                    onCheckedChange={() => toggleCol(c.key)}
+                    onSelect={(e) => e.preventDefault()}
+                    className="text-xs"
+                  >
+                    {c.header}
+                    <span className="ml-auto pl-2 text-[10px] text-muted-foreground font-mono">{c.group}</span>
+                  </DropdownMenuCheckboxItem>
+                ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
          <p className="text-[11px] text-muted-foreground">{t('wpub.columnsHint')}</p>
        </div>

@@ -117,7 +117,7 @@ const en: Dict = {
  'sec.general': 'General', 'sec.email': 'E-mail (SMTP)', 'sec.lookup': 'Callsign Lookup',
  'sec.bands': 'Bands', 'sec.modes': 'Modes & default RST', 'sec.cluster': 'DX Cluster',
  'sec.udp': 'UDP integrations', 'sec.database': 'Database', 'sec.autostart': 'Autostart', 'sec.backup': 'Database backup', 'sec.uscounties': 'US Counties',
-  'sec.webpublish': 'Web publishing', 'wpub.hint': 'Publishes your log as a file for a website: a standalone HTML page or a CSV, written locally and optionally uploaded by FTP. It is refreshed when you log a QSO and, if you set an interval, on a timer.', 'wpub.enable': 'Publish the log to a file', 'wpub.fileSection': 'The file', 'wpub.format': 'Format', 'wpub.formatHtml': 'HTML page', 'wpub.formatCsv': 'CSV', 'wpub.folder': 'Output folder', 'wpub.browse': 'Browse…', 'wpub.fileName': 'File name', 'wpub.title': 'Page title', 'wpub.titlePh': 'blank = your callsign', 'wpub.count': 'Last N QSOs', 'wpub.every': 'Refresh every', 'wpub.everyHint': 'minutes — 0 = only when a QSO is logged', 'wpub.columns': 'Columns', 'wpub.columnsCount': '{n} of {total} chosen', 'wpub.columnsSearch': 'Search a field…', 'wpub.removeColumn': 'Click to remove', 'wpub.columnsHint': 'Click to add or remove. The order shown here is the order in the file.', 'wpub.ftpEnable': 'Upload by FTP', 'wpub.ftpHost': 'Server / port', 'wpub.ftpUser': 'User', 'wpub.ftpPassword': 'Password', 'wpub.ftpFolder': 'Remote folder', 'wpub.ftpFileName': 'Remote file name', 'wpub.ftpTls': 'Use TLS (FTPS)', 'wpub.publishNow': 'Publish now', 'wpub.testFtp': 'Test connection', 'wpub.lastRun': 'Last run:', 'sec.adifmon': 'ADIF monitor',
+  'sec.webpublish': 'Web publishing', 'wpub.hint': 'Publishes your log as a file for a website: a standalone HTML page or a CSV, written locally and optionally uploaded by FTP. It is refreshed when you log a QSO and, if you set an interval, on a timer.', 'wpub.enable': 'Publish the log to a file', 'wpub.fileSection': 'The file', 'wpub.format': 'Format', 'wpub.formatHtml': 'HTML page', 'wpub.formatCsv': 'CSV', 'wpub.folder': 'Output folder', 'wpub.browse': 'Browse…', 'wpub.fileName': 'File name', 'wpub.title': 'Page title', 'wpub.titlePh': 'blank = your callsign', 'wpub.count': 'Last N QSOs', 'wpub.every': 'Refresh every', 'wpub.everyHint': 'minutes — 0 = only when a QSO is logged', 'wpub.columns': 'Columns', 'wpub.columnsCount': '{n} of {total} chosen', 'wpub.columnsPick': 'Choose columns…', 'wpub.columnsSearch': 'Search a field…', 'wpub.removeColumn': 'Click to remove', 'wpub.columnsHint': 'Click to add or remove. The order shown here is the order in the file.', 'wpub.ftpEnable': 'Upload by FTP', 'wpub.ftpHost': 'Server / port', 'wpub.ftpUser': 'User', 'wpub.ftpPassword': 'Password', 'wpub.ftpFolder': 'Remote folder', 'wpub.ftpFileName': 'Remote file name', 'wpub.ftpTls': 'Use TLS (FTPS)', 'wpub.publishNow': 'Publish now', 'wpub.testFtp': 'Test connection', 'wpub.lastRun': 'Last run:', 'sec.adifmon': 'ADIF monitor',
  'adifmon.hint': 'Watch external ADIF files and import new QSOs automatically — e.g. fldigi logging RTTY, or N1MM/VarAC. Imported QSOs are enriched, de-duplicated and uploaded to your external services just like a QSO logged here.',
  'adifmon.enable': 'Enable ADIF monitor',
  'adifmon.empty': 'No file watched yet. Add an ADIF file below.',
@@ -544,7 +544,7 @@ const fr: Dict = {
  'sec.general': 'Général', 'sec.email': 'E-mail (SMTP)', 'sec.lookup': "Recherche d'indicatif",
  'sec.bands': 'Bandes', 'sec.modes': 'Modes & RST par défaut', 'sec.cluster': 'DX Cluster',
  'sec.udp': 'Intégrations UDP', 'sec.database': 'Base de données', 'sec.autostart': 'Démarrage auto', 'sec.backup': 'Sauvegarde base', 'sec.uscounties': 'Comtés US',
-  'sec.webpublish': 'Publication web', 'wpub.hint': "Publie ton journal dans un fichier destiné à un site web : une page HTML autonome ou un CSV, écrit en local et envoyé par FTP si tu le souhaites. Il est rafraîchi à chaque QSO enregistré et, si tu règles un intervalle, périodiquement.", 'wpub.enable': 'Publier le journal dans un fichier', 'wpub.fileSection': 'Le fichier', 'wpub.format': 'Format', 'wpub.formatHtml': 'Page HTML', 'wpub.formatCsv': 'CSV', 'wpub.folder': 'Dossier de sortie', 'wpub.browse': 'Parcourir…', 'wpub.fileName': 'Nom du fichier', 'wpub.title': 'Titre de la page', 'wpub.titlePh': 'vide = ton indicatif', 'wpub.count': 'N derniers QSO', 'wpub.every': 'Rafraîchir toutes les', 'wpub.everyHint': 'minutes — 0 = seulement à chaque QSO', 'wpub.columns': 'Colonnes', 'wpub.columnsCount': '{n} sur {total} choisis', 'wpub.columnsSearch': 'Chercher un champ…', 'wpub.removeColumn': 'Cliquer pour retirer', 'wpub.columnsHint': 'Clique pour ajouter ou retirer. L ordre affiché ici est celui du fichier.', 'wpub.ftpEnable': 'Envoyer par FTP', 'wpub.ftpHost': 'Serveur / port', 'wpub.ftpUser': 'Utilisateur', 'wpub.ftpPassword': 'Mot de passe', 'wpub.ftpFolder': 'Dossier distant', 'wpub.ftpFileName': 'Nom du fichier distant', 'wpub.ftpTls': 'Utiliser TLS (FTPS)', 'wpub.publishNow': 'Publier maintenant', 'wpub.testFtp': 'Tester la connexion', 'wpub.lastRun': 'Dernière exécution :', 'sec.adifmon': 'Moniteur ADIF',
+  'sec.webpublish': 'Publication web', 'wpub.hint': "Publie ton journal dans un fichier destiné à un site web : une page HTML autonome ou un CSV, écrit en local et envoyé par FTP si tu le souhaites. Il est rafraîchi à chaque QSO enregistré et, si tu règles un intervalle, périodiquement.", 'wpub.enable': 'Publier le journal dans un fichier', 'wpub.fileSection': 'Le fichier', 'wpub.format': 'Format', 'wpub.formatHtml': 'Page HTML', 'wpub.formatCsv': 'CSV', 'wpub.folder': 'Dossier de sortie', 'wpub.browse': 'Parcourir…', 'wpub.fileName': 'Nom du fichier', 'wpub.title': 'Titre de la page', 'wpub.titlePh': 'vide = ton indicatif', 'wpub.count': 'N derniers QSO', 'wpub.every': 'Rafraîchir toutes les', 'wpub.everyHint': 'minutes — 0 = seulement à chaque QSO', 'wpub.columns': 'Colonnes', 'wpub.columnsCount': '{n} sur {total} choisis', 'wpub.columnsPick': 'Choisir les colonnes…', 'wpub.columnsSearch': 'Chercher un champ…', 'wpub.removeColumn': 'Cliquer pour retirer', 'wpub.columnsHint': 'Clique pour ajouter ou retirer. L ordre affiché ici est celui du fichier.', 'wpub.ftpEnable': 'Envoyer par FTP', 'wpub.ftpHost': 'Serveur / port', 'wpub.ftpUser': 'Utilisateur', 'wpub.ftpPassword': 'Mot de passe', 'wpub.ftpFolder': 'Dossier distant', 'wpub.ftpFileName': 'Nom du fichier distant', 'wpub.ftpTls': 'Utiliser TLS (FTPS)', 'wpub.publishNow': 'Publier maintenant', 'wpub.testFtp': 'Tester la connexion', 'wpub.lastRun': 'Dernière exécution :', 'sec.adifmon': 'Moniteur ADIF',
  'adifmon.hint': "Surveille des fichiers ADIF externes et importe les nouveaux QSO automatiquement — ex. fldigi en RTTY, ou N1MM/VarAC. Les QSO importés sont enrichis, dédoublonnés et envoyés à tes services externes comme un QSO loggé ici.",
  'adifmon.enable': 'Activer le moniteur ADIF',
  'adifmon.empty': 'Aucun fichier surveillé. Ajoute un fichier ADIF ci-dessous.',