From 30c9acf0d202087536bece2e9843e245283ba0e7 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sat, 29 Aug 2026 01:08:39 +0200
Subject: [PATCH] style(watchlist): counters on their own centred line, sane
 placeholders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The counters are the tab's headline and now sit alone, centred, above the
toolbar; everything one interacts with lives on the second row. The inputs stop
shouting their placeholders — the uppercase belonged to the VALUE (callsigns),
not the hint text — and the auto-contest field says what it is.
---
 frontend/src/components/WatchlistTab.tsx | 20 ++++++++++++--------
 frontend/src/lib/i18n.tsx                |  4 ++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/WatchlistTab.tsx b/frontend/src/components/WatchlistTab.tsx
index a941bed..909c23c 100644
--- a/frontend/src/components/WatchlistTab.tsx
+++ b/frontend/src/components/WatchlistTab.tsx
@@ -223,18 +223,22 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
     // Capped and centred: a card is a reading surface, and callsign-to-badge
     // lines stretched across a 34-inch window are not readable, they are long.
     <div className="flex flex-col min-h-0 flex-1 gap-2 p-2 w-full max-w-5xl mx-auto">
-      {/* toolbar */}
-      <div className="flex items-center gap-x-2 gap-y-1.5 flex-wrap">
+      {/* Header: the counters alone, centred — they are the tab's headline.
+          Everything one INTERACTS with lives on the second row. */}
+      <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
         <Eye className="size-4 text-primary shrink-0" />
-        <span className="text-[11px] text-muted-foreground shrink-0">
+        <span>
           {t('wl.cTotal')} <b className="text-foreground">{counters.total}</b>
-          <span className="mx-1 opacity-50">·</span>
+          <span className="mx-1.5 opacity-50">|</span>
           {t('wl.cActive')} <b className="text-info">{counters.active}</b>
-          <span className="mx-1 opacity-50">·</span>
+          <span className="mx-1.5 opacity-50">|</span>
           {t('wl.cNeeded')} <b className="text-warning">{counters.needed}</b>
         </span>
-        <Input className="h-8 w-44 font-mono uppercase" placeholder={t('wl.addPh')} value={addCall}
-          onChange={(e) => setAddCall(e.target.value)}
+      </div>
+      {/* toolbar */}
+      <div className="flex items-center gap-x-2 gap-y-1.5 flex-wrap">
+        <Input className="h-8 w-44 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.addPh')} value={addCall}
+          onChange={(e) => setAddCall(e.target.value.toUpperCase())}
           onKeyDown={(e) => { if (e.key === 'Enter') void add(); }} />
         <label className="flex items-center gap-1.5 text-xs cursor-pointer" title={t('wl.contestHint')}>
           <Checkbox checked={addContest} onCheckedChange={(c) => setAddContest(!!c)} />
@@ -243,7 +247,7 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
         <Button size="sm" className="h-8" onClick={() => void add()} disabled={!addCall.trim()}>
           <Plus className="size-3.5" /> {t('wl.add')}
         </Button>
-        <Input className="h-8 w-28 font-mono uppercase" placeholder={t('wl.patternPh')}
+        <Input className="h-8 w-28 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.patternPh')}
           title={t('wl.patternHint')}
           value={pattern}
           onChange={(e) => setPattern(e.target.value.toUpperCase())}
diff --git a/frontend/src/lib/i18n.tsx b/frontend/src/lib/i18n.tsx
index bef57c5..dd6f1ee 100644
--- a/frontend/src/lib/i18n.tsx
+++ b/frontend/src/lib/i18n.tsx
@@ -39,7 +39,7 @@ const en: Dict = {
   'cwd.tipOnIdle': 'CW decoder — on, idle until CW mode · click to disable',
   'cwd.tipOff': 'CW decoder · click to enable (decodes RX audio in CW mode)',
   'tools.watchlist': 'Watchlist…', 'tab.watchlist': 'Watchlist',
-  'wl.addPh': 'Callsign or prefix', 'wl.add': 'Add', 'wl.contest': 'Contest', 'wl.addAsContest': 'as contest', 'wl.cTotal': 'Watchlist:', 'wl.cActive': 'Active:', 'wl.cNeeded': 'Needed:', 'wl.allModes': 'All modes', 'wl.modeFilter': 'Only show spots in this mode', 'wl.patternPh': 'Auto (WWA)', 'wl.patternHint': 'Auto-add as contest: any spotted callsign CONTAINING this text joins the watchlist as a contest entry by itself. Empty = off; collected entries stay.',
+  'wl.addPh': 'Callsign or prefix', 'wl.add': 'Add', 'wl.contest': 'Contest', 'wl.addAsContest': 'as contest', 'wl.cTotal': 'Watchlist:', 'wl.cActive': 'Active:', 'wl.cNeeded': 'Needed:', 'wl.allModes': 'All modes', 'wl.modeFilter': 'Only show spots in this mode', 'wl.patternPh': 'Auto contest (e.g. WWA)', 'wl.patternHint': 'Auto-add as contest: any spotted callsign CONTAINING this text joins the watchlist as a contest entry by itself. Empty = off; collected entries stay.',
   'wl.contestHint': 'Contest station: worked/needed is judged against the current UTC day — at 00:00 UTC every slot can be worked again.',
   'wl.searchPh': 'Search…', 'wl.famAll': 'All', 'wl.famNormal': 'DX', 'wl.famContest': 'Contest',
   'wl.activeOnly': 'Active only', 'wl.neededOnly': 'Needed only',
@@ -563,7 +563,7 @@ const fr: Dict = {
   'cwd.tipOnIdle': 'Décodeur CW — actif, en veille hors mode CW · clic pour désactiver',
   'cwd.tipOff': 'Décodeur CW · clic pour activer (décode l’audio RX en mode CW)',
   'tools.watchlist': 'Watchlist…', 'tab.watchlist': 'Watchlist',
-  'wl.addPh': 'Indicatif ou préfixe', 'wl.add': 'Ajouter', 'wl.contest': 'Contest', 'wl.addAsContest': 'comme contest', 'wl.cTotal': 'Watchlist :', 'wl.cActive': 'Actives :', 'wl.cNeeded': 'Manquantes :', 'wl.allModes': 'Tous les modes', 'wl.modeFilter': 'Ne montrer que les spots de ce mode', 'wl.patternPh': 'Auto (WWA)', 'wl.patternHint': "Ajout auto comme contest : tout indicatif spotté CONTENANT ce texte rejoint la watchlist en entrée contest tout seul. Vide = désactivé ; les entrées déjà collectées restent.",
+  'wl.addPh': 'Indicatif ou préfixe', 'wl.add': 'Ajouter', 'wl.contest': 'Contest', 'wl.addAsContest': 'comme contest', 'wl.cTotal': 'Watchlist :', 'wl.cActive': 'Actives :', 'wl.cNeeded': 'Manquantes :', 'wl.allModes': 'Tous les modes', 'wl.modeFilter': 'Ne montrer que les spots de ce mode', 'wl.patternPh': 'Auto contest (ex. WWA)', 'wl.patternHint': "Ajout auto comme contest : tout indicatif spotté CONTENANT ce texte rejoint la watchlist en entrée contest tout seul. Vide = désactivé ; les entrées déjà collectées restent.",
   'wl.contestHint': "Station contest : contacté/manquant est jugé sur la journée UTC courante — à 00:00 UTC chaque créneau redevient à faire.",
   'wl.searchPh': 'Chercher…', 'wl.famAll': 'Tous', 'wl.famNormal': 'DX', 'wl.famContest': 'Contest',
   'wl.activeOnly': 'Actifs seulement', 'wl.neededOnly': 'Manquants seulement',