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

feat: replace setup checklist with a five-screen onboarding flow

Browse source 
Generate-or-recover an identity, establish server trust, then bind an
address — each its own screen with no bleed-through, replacing the
old intro/restore cards plus the post-hoc setup checklist banner.
This commit is contained in:
randogoth 2026-10-08 20:48:09 +03:00
parent 1710d7b144
commit fb0ca5c8cc
4 changed files with 313 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

66
web/style.css
View file

@ -384,62 +384,25 @@ main { flex: 1; min-height: 0; display: flex; background: var(--bg); }
}
.link:hover { color: var(--accent); background: none; }
/* --- setup checklist ------------------------------------------------------------ */
/* Over the mailbox the missing steps are holding up, rather than inside the
dialog the user would have to already know to open. */
.setup-banner {
flex: none;
margin: 10px 10px 0;
padding: 12px 14px 10px;
background: var(--accent-soft);
/* A two-way choice feeding one piece of state (screen 5's new/existing
address mode) — same shape as .settings-tabs, laid out horizontally. */
.mode-toggle {
display: flex;
gap: 2px;
padding: 3px;
background: var(--raised);
border-radius: var(--radius);
}
.setup-banner-head { display: flex; align-items: center; gap: 10px; }
.setup-banner-head h2 {
.mode-toggle button {
flex: 1;
margin: 0;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
}
.setup-banner-count { font-size: 12px; color: var(--accent); }
.setup-banner .icon-only { padding: 4px; color: var(--accent); }
.setup-banner .icon-only:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.setup-steps { list-style: none; margin: 6px 0 0; padding: 0; }
.setup-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.setup-step + .setup-step { border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.setup-mark {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--accent);
border-radius: 50%;
color: var(--ok-fg);
}
.setup-step.done .setup-mark { background: var(--ok-bg); border-color: var(--ok-bg); }
.setup-mark .icon { width: 13px; height: 13px; stroke-width: 3; }
.setup-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.setup-step-title { font-size: 13px; font-weight: 500; }
/* A finished step keeps its place in the order but stops explaining itself. */
.setup-step.done .setup-step-title { color: var(--muted); font-weight: 400; }
.setup-step.done .hint { display: none; }
.setup-step-action {
flex: none;
padding: 5px 12px;
font-size: 12px;
padding: 8px 10px;
font-size: 13px;
font-weight: 500;
background: var(--surface);
box-shadow: var(--shadow);
color: var(--fg);
border-radius: calc(var(--radius) - 3px);
}
.setup-step-action:hover { background: var(--surface); }
.mode-toggle button:hover { background: var(--hover); }
.mode-toggle button.active { background: var(--accent-soft); color: var(--accent); }
/* --- dialogs --------------------------------------------------------------------- */
@ -638,7 +601,6 @@ dialog::backdrop { background: var(--backdrop); }
.view { padding: 16px; }
.toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
.setup-card { padding: 22px 18px 14px; }
.setup-banner { margin: 8px 8px 0; }
/* The tab rail turns into a scrollable strip rather than eating half the
width of a phone-sized dialog. */
.settings-body { flex-direction: column; min-height: 0; }