randogoth/gsmol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: restructure settings into identity, server, backup and advanced tabs

Browse source 
Drops the per-server pin list down to the one server your account is
bound to, adds an enforced network timeout, and replaces the global
status toast inside settings with inline feedback and a reusable
confirm dialog for rotate/log out. Mail-fetching preferences move into
the server tab; the now-superseded claim/recall forms are gone since
onboarding covers both.
This commit is contained in:
randogoth 2026-10-08 21:24:05 +03:00
parent fb0ca5c8cc
commit 84397a3fdd
6 changed files with 270 additions and 334 deletions
Download patch file Download diff file Expand all files Collapse all files

35
web/style.css
View file

@ -437,6 +437,12 @@ dialog::backdrop { background: var(--backdrop); }
#compose footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding-top: 4px; flex-wrap: wrap; }
#compose .anon { font-size: 13px; color: var(--muted); margin-right: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#confirm { max-width: min(420px, calc(100vw - 32px)); }
#confirm .confirm-body { padding: 22px 22px 4px; }
#confirm .confirm-body h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
#confirm .confirm-body p { margin: 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; }
#confirm footer { display: flex; gap: 8px; justify-content: flex-end; padding: 18px 22px 22px; }
/* Without this every action read exactly like "cancel" and "close". */
.filled { background: var(--accent); color: var(--on-accent); font-weight: 500; padding: 8px 20px; }
.filled:hover { background: var(--accent); box-shadow: var(--shadow); }
@ -504,18 +510,6 @@ dialog::backdrop { background: var(--backdrop); }
#settings label input { font-family: var(--mono); font-size: 13px; }
#settings details { margin: 12px 0 2px; }
/* Unregistered this is the panel's whole point, so it is a card rather than a
footnote; registered, the same block collapses to one line. */
#account-claim {
margin: 18px 0 4px;
padding: 12px 14px;
background: var(--raised);
border: 1px solid var(--border);
border-radius: var(--radius);
}
#account-claim > summary { font-size: 13px; font-weight: 600; color: var(--accent); }
#account-claim form + .hint { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
/* A checkbox with a multi-line label, e.g. "leave mail on server" — the box
sits at the label's cap height rather than centered against the full wrapped
block, which is what made it look adrift. */
@ -536,12 +530,19 @@ dialog::backdrop { background: var(--backdrop); }
.seed-card .row { display: flex; align-items: center; gap: 8px; }
.seed-card .seed { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }
.seed-card p { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.backup-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kv { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.kv li { display: flex; gap: 10px; padding: 5px 0; align-items: baseline; }
.kv li + li { border-top: 1px solid var(--divider); }
.kv .key { font-family: var(--mono); word-break: break-all; color: var(--muted); flex: 1; }
/* A button whose result is explained underneath rather than beside it — each
of export/import needs its own line, so side-by-side ran out of room. */
.action-row { margin: 14px 0; }
.action-row .hint { margin: 4px 0 0; }
/* A title/subtitle pair with a control at the end, e.g. the timeout spinner —
same shape as .check-row but for a value instead of a toggle. */
.spin-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.spin-row .spin-text { flex: 1; min-width: 0; }
.spin-row .spin-text .check-title { display: block; }
.spin-row .spin-text .hint { display: block; margin: 2px 0 0; }
.spin-row input[type="number"] { width: 72px; font-family: var(--mono); font-size: 13px; text-align: right; }
.copy { font-size: 12px; padding: 4px 10px; }