Skip to content

Restyle the connect and setup pages in the Shelf look - #124

Merged
KodeStar merged 3 commits into
mainfrom
restyle-legacy-pages
Oct 12, 2026
Merged

KodeStar merged 3 commits into
mainfrom
restyle-legacy-pages

Conversation

@KodeStar

Copy link
Copy Markdown
Owner

The server's own HTML pages still wore the pre-redesign look: violet #7c3aed, Roboto, the "AUDIO"/"SILO" wordmark, dark only. This restyles all of them in the console's Shelf look. ADMIN-CONSOLE-PLAN.md lists this as a Phase 6 item.

Pages restyled. These are the only server-rendered pages outside the console and the player:

  • / and /connect, the connect page with the auth code, QR and links.
  • /setup, the first-run wizard.
  • /admin when the console isn't built (the dev-only 503 page).

What changed

  • internal/web/assets/style.css
    • Shelf tokens (light + dark) copied from admin-ui/src/styles/globals.css.
    • Card, field and button rules mirror the console's sign-in page.
    • The brand row is the ink tile + "AudioSilo" wordmark. The mark is favicon.svg used as a CSS mask, so its path isn't duplicated.
  • Fonts. Self-hosted Figtree + Bricolage Grotesque variable woff2 (latin, OFL) replace the three Roboto files.
  • theme-init.js
    • A copy of the console's own script. It reads the same storage key, so a theme chosen in /admin carries over; with none stored, the pages follow the system theme.
    • It is loaded before the stylesheet.
  • Sync tests. shelf_sync_test.go fails if theme-init.js or the copied colour tokens drift from admin-ui.
  • Service worker (scope /, so it sees these pages once an admin has opened the console).
    • Unhashed /assets/*.css|js are now network-first, like the console's theme-init.js. A cached old style.css would otherwise render the new markup broken once after the upgrade.
    • VERSION is bumped so cached Roboto files are dropped.
    • Covered by a case in admin-ui/src/test/sw.test.ts.
  • Unchanged. Ids, data-i18n* attributes and script tags are the same, so connect.js, setup.js and the i18n engine are untouched. No inline style or script; the strict CSP holds.
  • No wire change.

Verified in a real browser (Chromium via Playwright, scratch data dirs)

  • Connect page, light and dark: entry state, wrong code (error line), redeem via #code= (fragment stripped; QR, uses note, the three links).
  • Language switch: German and Spanish.
  • Phone widths: 375 px and 320 px. No horizontal scroll, and the QR stays square.
  • Theme carry-over: a theme stored by the console wins over the system preference.
  • Setup wizard, light and dark: the form, plus the "all set" state after a real submit.
  • "Console not built" page: light and dark.
  • Fonts: both load.
  • Console errors: none apart from the expected 401 (wrong code) and 503 (not-built page).

Not changed / follow-ups

  • favicon.svg, the PWA icons and the manifest still use the old violet mark. Changing the brand icon is a separate decision.
  • The pages set the theme at load. Unlike the console, they don't follow an OS light/dark switch while open.

Docs: KodeStar/audiosilo-docs (regenerated server/connect-page.png and server/setup-wizard.png), PR linked below once open.

The connect page (/, /connect), the first-run setup wizard (/setup) and the
'console not built' page still wore the pre-redesign look (violet, Roboto,
dark only). They now use the console's Shelf tokens, its sign-in layout and
its fonts (self-hosted Figtree + Bricolage Grotesque variable, replacing
Roboto), with light and dark themes. theme-init.js reads the console's stored
theme, so a choice made in /admin carries over. Markup ids, i18n attributes
and scripts are unchanged; the strict CSP holds (no inline style or script).
…st assets

- Draw the mark from favicon.svg as a CSS mask instead of inlining its path.
- Links styled as buttons use the button classes; drop unused tokens/rules.
- Tests fail when theme-init.js or the copied Shelf tokens drift from admin-ui.
- The service worker fetches the pages' unhashed /assets/*.css|js network-first
  (a stale style.css would pair with the new markup once after an upgrade), and
  VERSION is bumped so clients drop the cached Roboto files.
Square QR at any width, wrapping full-width buttons, 16px fields on phones
(no iOS zoom), role=alert on the error lines, a setup page asset test, and a
token parser that fails instead of panicking on a malformed block.
@KodeStar
KodeStar merged commit 213856a into main Oct 12, 2026
3 checks passed
@KodeStar
KodeStar deleted the restyle-legacy-pages branch October 12, 2026 21:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant