refactor(frontend): move S3TT1NGS to its own /settings.html page (#1464 step 2)
Extracts the operator-local preferences (browser-notification toggle)
out of the dashboard tab strip into a standalone /settings.html page,
reached from the H0M3 hub — same minimal-chrome pattern as /flow.html
and /logs.html. The dashboard tab strip is now purely operational.
- new settings.{html,css,js}; settings.js binds NOTIF + renders the
shared server-warnings banner (matching the other standalone pages).
- drop the S3TT1NGS tab + pane from dashboard.html; the NOTIF.bind()
toggle wiring moves to settings.js. The dashboard keeps NOTIF.show()
(approvals / questions) — it reads the same browser permission +
localStorage mute flag the settings page sets, so firing still works.
- move .notif-row / .btn-notif from dashboard.css to settings.css.
- add a Settings tile to the H0M3 hub; wire the new entries into
build.mjs and update the nix/frontend.nix asset manifest comment.
First slice of #1464 step 2; the ST4TS page extraction follows separately.
This commit is contained in:
parent
8006dd2809
commit
d9c66de069
9 changed files with 124 additions and 62 deletions
40
frontend/packages/dashboard/src/settings.css
Normal file
40
frontend/packages/dashboard/src/settings.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/* ─── /settings.html — operator-local preferences ──────────────────
|
||||
Extracted from the dashboard S3TT1NGS tab. Same
|
||||
minimal-chrome pattern as /flow.html and /logs.html: the back-link
|
||||
header + title (.logs-header / .logs-back / .logs-title) live in
|
||||
common.css; only the page body padding + the notif-toggle row are
|
||||
page-specific and live here. */
|
||||
|
||||
body.settings-shell {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settings-main {
|
||||
padding: 1.2em 1.5em 2em;
|
||||
}
|
||||
|
||||
/* Browser-notification toggle row (moved verbatim from dashboard.css —
|
||||
the buttons + status that NOTIF.bind() in common.js wires up). */
|
||||
.notif-row {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
margin: 0.5em 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.btn-notif {
|
||||
font-family: inherit;
|
||||
font-size: 0.85em;
|
||||
background: transparent;
|
||||
color: var(--cyan);
|
||||
border: 1px solid var(--cyan);
|
||||
padding: 0.2em 0.7em;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 4px currentColor;
|
||||
}
|
||||
.btn-notif:hover {
|
||||
background: color-mix(in srgb, var(--cyan) 10%, transparent);
|
||||
box-shadow: 0 0 10px -2px currentColor;
|
||||
}
|
||||
Loading…
Reference in a new issue