rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 113 Wiki Activity

style(settings): tidy the General panel

Browse Source 
Per review: the panel-wide 'saved instantly' hint goes; the date-format picker
loses its embedded sample line (kept as the buttons' tooltip) so the row is one
line tall; the IARU region moves up under the date format, before the themes;
and the parentheticals after Distances-in-miles, Check-updates and the
telemetry opt-out go. The telemetry and ClubLog explanations survive as
tooltips — an opt-out about data leaving the machine, and an option changing
how entities resolve, should still say what they do somewhere.
This commit is contained in:
rouggy
2026-08-28 22:15:53 +02:00
parent f0f9898f7c
commit 3ed643e072
1 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SettingsModal.tsx
+25 -31
View File
@@ -690,8 +690,7 @@ function TelemetryToggle() {
<label className="flex items-center gap-2 text-sm cursor-pointer">
<Checkbox checked={on} disabled={!loaded}
onCheckedChange={(c) => { const v = !!c; setOn(v); SetTelemetryEnabled(v).catch(() => {}); }} />
{t('settings.telemetry')}
<span className="text-xs text-muted-foreground">({t('settings.telemetryHint')})</span>
<span title={t('settings.telemetryHint')}>{t('settings.telemetry')}</span>
</label>
);
}
@@ -7149,7 +7148,7 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
const { lang, setLang, t } = useI18n();
return (
<>
<SectionHeader title={t('sec.general')} hint={t('gen.hint')} />
<SectionHeader title={t('sec.general')} />
<div className="space-y-3 max-w-3xl">
<div className="flex items-center gap-3">
<Label className="text-sm w-40">{t('settings.language')}</Label>
@@ -7177,15 +7176,33 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
['us', t('gen.dateUS'), '07-30-2026 14:25']] as [DateFormat, string, string][]).map(([code, label, sample]) => (
<button key={code} type="button" title={sample}
onClick={() => { setDateFormat(code); setDateFmtSel(code); }}
className={cn('flex flex-col items-start px-3 py-1 text-sm font-medium border-l border-border first:border-l-0',
className={cn('px-3 py-1.5 text-sm font-medium border-l border-border first:border-l-0',
dateFmtSel === code ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
{label}
<span className="text-[10px] font-mono opacity-70">{sample}</span>
</button>
))}
</div>
</div>
<div className="flex items-center gap-2 text-sm">
{/* The IARU region drives the band edges and mode segments the band
maps draw — Region 2's 40 m runs to 7300, Region 1's stops at
7200 — and nothing else: spots and logging are region-blind. */}
<Label className="text-sm w-40 shrink-0">{t('gen.iaruRegion')}</Label>
<Select value={String(region)} onValueChange={(v) => {
const r = (v === '2' ? 2 : v === '3' ? 3 : 1) as IaruRegion;
setRegion(r); setIaruRegion(r);
}}>
<SelectTrigger className="h-8 w-72"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="1">{t('gen.iaruR1')}</SelectItem>
<SelectItem value="2">{t('gen.iaruR2')}</SelectItem>
<SelectItem value="3">{t('gen.iaruR3')}</SelectItem>
</SelectContent>
</Select>
<span className="text-xs text-muted-foreground">{t('gen.iaruHint')}</span>
</div>
<ThemeSelector />
<label className="flex items-center gap-2 text-sm cursor-pointer">
@@ -7241,34 +7258,16 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
<Checkbox checked={groupDigital} onCheckedChange={(c) => { const v = !!c; setGroupDigital(v); writeUiPref('opslog.groupDigitalSlots', v ? '1' : '0'); }} />
{t('gen.groupDigital')} <span className="text-xs text-muted-foreground">{t('gen.groupDigitalHint')}</span>
</label>
<div className="flex items-center gap-2 text-sm">
{/* The IARU region drives the band edges and mode segments the band
maps draw — Region 2's 40 m runs to 7300, Region 1's stops at
7200 — and nothing else: spots and logging are region-blind. */}
<span>{t('gen.iaruRegion')}</span>
<Select value={String(region)} onValueChange={(v) => {
const r = (v === '2' ? 2 : v === '3' ? 3 : 1) as IaruRegion;
setRegion(r); setIaruRegion(r);
}}>
<SelectTrigger className="h-8 w-64"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="1">{t('gen.iaruR1')}</SelectItem>
<SelectItem value="2">{t('gen.iaruR2')}</SelectItem>
<SelectItem value="3">{t('gen.iaruR3')}</SelectItem>
</SelectContent>
</Select>
<span className="text-xs text-muted-foreground">{t('gen.iaruHint')}</span>
</div>
<label className="flex items-center gap-2 text-sm cursor-pointer">
{/* Distances are computed in km everywhere and converted at display
time — see lib/units. Changing this repaints the columns that
already carry a distance; nothing stored moves. */}
<Checkbox checked={milesUnit} onCheckedChange={(c) => { const v = !!c; setMilesUnit(v); setUseMiles(v); }} />
{t('gen.miles')} <span className="text-xs text-muted-foreground">{t('gen.milesHint')}</span>
{t('gen.miles')}
</label>
<label className="flex items-center gap-2 text-sm cursor-pointer">
<Checkbox checked={checkUpdates} onCheckedChange={(c) => { const v = !!c; setCheckUpdates(v); writeUiPref('opslog.checkUpdates', v ? '1' : '0'); }} />
{t('gen.checkUpdates')} <span className="text-xs text-muted-foreground">{t('gen.checkUpdatesHint')}</span>
{t('gen.checkUpdates')}
</label>
<TelemetryToggle />
@@ -7331,12 +7330,7 @@ function SettingsModalImpl({ onClose, onSaved, initialSection, onMainPaneChanged
}}
className="mt-0.5"
/>
<span>
{t('gen.clubUse')}
<span className="block text-xs text-muted-foreground mt-0.5">
{t('gen.clubDesc')}
</span>
</span>
<span title={t('gen.clubDesc')}>{t('gen.clubUse')}</span>
</label>
<div className="flex items-center gap-3 pl-6">
<Button variant="outline" size="sm" className="h-8" disabled={clubBusy}