From 25eda98612c354b3baf6693b6d7abe09c9636cc4 Mon Sep 17 00:00:00 2001 From: rouggy Date: Sun, 30 Aug 2026 13:35:37 +0200 Subject: [PATCH] style(watchlist): a pass toward DXHunter's look The operator preferred the original's aesthetics. Adopted: the signature pink callsign (a fixed identity colour, like the cluster palette), counters as coloured pills, a quieter card surface with a hover, a stronger needed bar on spot rows, and the lightning bolt back on the DXpedition badge. Everything else stays on theme tokens. --- changelog.json | 6 +++-- frontend/src/components/WatchlistTab.tsx | 31 +++++++++++++----------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/changelog.json b/changelog.json index 011d1bb..f19397c 100644 --- a/changelog.json +++ b/changelog.json @@ -4,11 +4,13 @@ "date": "", "en": [ "Bulk operations work on any size of selection — setting a field, fixing frequencies, deleting, marking uploads and exporting the selection all failed with “too many SQL variables” past a few tens of thousands of QSOs. Statements are now issued in slices.", - "Elecraft console: the power meter reads in real watts. The K3’s bargraph is relative to a range that flips at 12 W — calibrated against a real radio’s full table, the PC setting picks the range and the bar converts to watts." + "Elecraft console: the power meter reads in real watts. The K3’s bargraph is relative to a range that flips at 12 W — calibrated against a real radio’s full table, the PC setting picks the range and the bar converts to watts.", + "Watchlist: a visual pass toward DXHunter’s look — pink callsigns, counter pills, quieter cards with a hover, the ⚡ back on the DXpedition badge." ], "fr": [ "Les opérations groupées fonctionnent quelle que soit la taille de la sélection — définir un champ, corriger des fréquences, supprimer, marquer les uploads et exporter la sélection échouaient avec « too many SQL variables » au-delà de quelques dizaines de milliers de QSO. Les requêtes sont désormais émises par tranches.", - "Console Elecraft : le wattmètre lit en vrais watts. Le bargraph du K3 est relatif à une gamme qui bascule à 12 W — calibré sur la table complète d’une vraie radio, le réglage PC choisit la gamme et la barre se convertit en watts." + "Console Elecraft : le wattmètre lit en vrais watts. Le bargraph du K3 est relatif à une gamme qui bascule à 12 W — calibré sur la table complète d’une vraie radio, le réglage PC choisit la gamme et la barre se convertit en watts.", + "Watchlist : une passe visuelle vers le look DXHunter — indicatifs roses, compteurs en pastilles, cartes plus feutrées avec survol, le ⚡ de retour sur le badge DXpedition." ] }, { diff --git a/frontend/src/components/WatchlistTab.tsx b/frontend/src/components/WatchlistTab.tsx index fb1b346..ff351a9 100644 --- a/frontend/src/components/WatchlistTab.tsx +++ b/frontend/src/components/WatchlistTab.tsx @@ -247,15 +247,18 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
{/* Header: the counters alone, centred — they are the tab's headline. Everything one INTERACTS with lives on the second row. */} -
+
- - {t('wl.cTotal')} {counters.total} - | - {t('wl.cActive')} {counters.active} - | - {t('wl.cNeeded')} {counters.needed} - + {t('wl.cTotal')} + {counters.total} + | + {t('wl.cActive')} + {counters.active} + | + {t('wl.cNeeded')} + 0 + ? 'text-warning border-warning/40 bg-warning/10' + : 'text-muted-foreground border-border bg-muted/40')}>{counters.needed}
{/* toolbar */}
@@ -328,11 +331,11 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P const list = neededOnly ? all.filter((s) => !workedFor(e, s)) : all; return (
0 ? 'border-warning/50' : 'border-border', + className={cn('rounded-lg border bg-card/70 p-3 transition-colors hover:bg-accent/20', + needed > 0 ? 'border-warning/40' : 'border-border/70', e.isContest && 'border-l-4 border-l-warning')}>
- {e.callsign} + {e.callsign} {isOnAir(e) && chip('var(--danger)', t('wl.onAir'), 'animate-pulse')} {e.isContest && ( {t('wl.contest')} )} - {e.isExpedition && chip('var(--chart-5)', t('wl.expedition'))} + {e.isExpedition && chip('var(--chart-5)', '⚡ ' + t('wl.expedition'))} {e.clubLogTotalQSOs > 0 && {e.clubLogTotalQSOs.toLocaleString()} QSOs{e.clubLogQSOs24h > 0 ? ` · ${e.clubLogQSOs24h}/24h` : ''}} {e.clubLogHasOQRS && chip('var(--success)', 'OQRS')} {e.clubLogLiveStream && ( @@ -385,8 +388,8 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P onClick={() => onSpotSelect?.(s)} onDoubleClick={() => onSpotClick?.(s)} title={t('wl.spotTip')} - className={cn('w-full flex items-center gap-2 px-2 py-1.5 rounded text-[11px] bg-muted/40 hover:bg-muted text-left', - !done && 'border-l-2 border-warning')}> + className={cn('w-full flex items-center gap-2 px-2 py-1.5 rounded text-[11px] bg-muted/25 hover:bg-muted/70 transition-colors text-left', + !done && 'border-l-[3px] border-warning')}> {done && ✓} {s.dx_call} {(s as any).country ?? ''}