Settings sidebar: User / Admin labels are not heading size (reuse shared section header)

kayg commented

2026-09-30 05:08:41 +00:00

Owner

Bug (owner, 2026-09-30, with screenshot)

"I notice that still User and Admin don't have the heading size." In the Settings sidebar, the "User" and "Admin" labels render at the same size as the item rows, so they read like greyed items, not headings.

Fix

Render User and Admin with the shared section-header component and the heading role token that the other sidebars use. The owner earlier asked to reuse the section-header code for User and Admin: search for it and reuse it; do not add a new style or a literal.
Sub-section labels inside User and Admin (coming from the Better Settings grill, #407) use the next level down of the same component. Leave a clear hook for them.
Check it at 390, 820 and 1440 in both themes, and zoom in to check alignment with the icons. Add a unit or e2e assertion that the group headers use the heading role.

## Bug (owner, 2026-09-30, with screenshot) "I notice that still User and Admin don't have the heading size." In the Settings sidebar, the "User" and "Admin" labels render at the same size as the item rows, so they read like greyed items, not headings. ## Fix - Render User and Admin with the shared section-header component and the heading role token that the other sidebars use. The owner earlier asked to reuse the section-header code for User and Admin: search for it and reuse it; do not add a new style or a literal. - Sub-section labels inside User and Admin (coming from the Better Settings grill, #407) use the next level down of the same component. Leave a clear hook for them. - Check it at 390, 820 and 1440 in both themes, and zoom in to check alignment with the icons. Add a unit or e2e assertion that the group headers use the heading role.

settings-navigation-390-paper.png

32 KiB

settings-navigation-390-tokyo-night.png

44 KiB

settings-navigation-820-paper.png

50 KiB

settings-navigation-820-tokyo-night.png

66 KiB

settings-navigation-1440-paper.png

140 KiB

settings-navigation-1440-tokyo-night.png

168 KiB

kayg commented

2026-09-30 05:09:49 +00:00

Author

Owner

Starting #482 on branch job/settings-hdr-482, based on 2bd6890290. I am tracing the shared sidebar section-header component and the Settings navigation before editing.

Starting #482 on branch job/settings-hdr-482, based on 2bd6890290571642c49def7f4bf0496ae0932655. I am tracing the shared sidebar section-header component and the Settings navigation before editing.

kayg commented

2026-09-30 05:14:42 +00:00

Author

Owner

Finding for #482: the narrow Settings master list already passes the shared section header heading variant. The wide rail groups items through packages/ui FloatingSidebar, whose template omits that variant, so User and Admin render as compact labels there. The fix will carry the shared heading level through FloatingSidebar.

kayg commented

2026-09-30 05:23:50 +00:00

Author

Owner

Finding for #482: bun run test completed with 136 passed files (880 tests) and one unrelated ThemePicker keyboard submenu test timing out at 5.275 s (5 s limit). I am rerunning that test alone to check whether the full-suite transform/load caused the timeout; I will keep its expectation unchanged.

kayg referenced this issue

2026-09-30 05:56:17 +00:00

BETTER SETTINGS: organise Settings so it feels non-overwhelming and close to the User (grill pending); includes Connected Accounts #407

kayg commented

2026-09-30 06:01:38 +00:00

Author

Owner

Build finding for #482: the server build stopped in rustc_version because the shared sccache wrapper referenced a removed sibling worktree temp file. I will resume with RUSTC_WRAPPER unset; this does not change workspace code.

kayg commented

2026-09-30 06:35:33 +00:00

Author

Owner

Screenshot finding for #482: bun e2e/auth.mjs --screenshots fails on its first setup-page capture because the auth setup route has no app root for the shared theme helper to update (observed mode system, requested mode light). I am adding a Settings-only screenshot option so the requested Settings route is captured in both themes without changing the assertion.

Screenshot finding for #482: `bun e2e/auth.mjs --screenshots` fails on its first setup-page capture because the auth setup route has no app root for the shared theme helper to update (observed mode `system`, requested mode `light`). I am adding a Settings-only screenshot option so the requested Settings route is captured in both themes without changing the assertion.

kayg commented

2026-09-30 06:38:01 +00:00

Author

Owner

E2E finding for #482: the real-server auth flow timed out in saveKey() because Playwright clicked the hidden native checkbox center and the painted SVG indicator intercepted it. The label itself wraps the checkbox and is the visible control, so I am changing the test action to click that text while keeping the state assertion unchanged.

E2E finding for #482: the real-server auth flow timed out in `saveKey()` because Playwright clicked the hidden native checkbox center and the painted SVG indicator intercepted it. The label itself wraps the checkbox and is the visible control, so I am changing the test action to click that text while keeping the state assertion unchanged.

kayg commented

2026-09-30 06:40:29 +00:00

Author

Owner

E2E follow-up for #482: the label-click helper allowed first-owner setup and sign-in to pass, but recovery-key rotation still had a direct .check() call and hit the same painted-indicator interception. I am routing that second caller through the same helper.

E2E follow-up for #482: the label-click helper allowed first-owner setup and sign-in to pass, but recovery-key rotation still had a direct `.check()` call and hit the same painted-indicator interception. I am routing that second caller through the same helper.

kayg commented

2026-09-30 06:41:52 +00:00

Author

Owner

E2E finding for #482: the Settings heading assertion reached the phone view and found both the sheet title and the User group heading. The non-exact accessible-name matcher matched both; I am making it exact so the assertion checks the actual group heading.

kayg commented

2026-09-30 06:44:58 +00:00

Author

Owner

Screenshot finding for #482: the exact group-heading assertion passed at the phone width, but capture found the app still rendered server-backed system/mono while the helper only changed local storage. I am making the Settings-only capture save Appearance to its throwaway test server and reload the route before taking each theme image.

Screenshot finding for #482: the exact group-heading assertion passed at the phone width, but capture found the app still rendered server-backed `system`/`mono` while the helper only changed local storage. I am making the Settings-only capture save Appearance to its throwaway test server and reload the route before taking each theme image.

kayg commented

2026-09-30 07:01:35 +00:00

Author

Owner

Implemented and committed #482.

The Settings sidebar now marks User and Admin as level-2 shared section headings. FloatingSidebar carries the heading level to SidebarSectionHeader, which applies the existing heading role tokens. The same component accepts level 3 for future Better Settings (#407) subsection labels. The Settings route selects level 2, and the auth e2e asserts that the exact User and Admin group headers have .as-heading.

Files changed:

packages/ui/src/components/FloatingSidebar.svelte
packages/ui/src/components/SidebarSectionHeader.svelte
apps/web/src/routes/settings/[...path]/+page.svelte
apps/web/e2e/auth.mjs

Head: 9224fe9ef56afc0eb7a46b76db6cd2e09ca6c4fa
Commits: 24d466669, 503a066db, 911d4debe, 712ac44ad, 9224fe9ef.

Verification output excerpts:

svelte-check found 0 errors and 0 warnings
Removed 7067 files, 4.4GiB total

bun run test: 136 test files and 880 tests passed; one unrelated ThemePicker.svelte.test.ts > ThemePicker variants > opens dark variants as a keyboard submenu and checks the selected variant timed out at 5.275 s against the 5 s limit. The isolated test rerun passed (2/2). No test expectation changed.

The production real-server auth e2e completed with PASS auth e2e and CSP reports: 0. Its Settings heading assertion ran at 390, 820 and 1440 px in light and dark themes. I inspected the six screenshots zoomed in; icon and label alignment is centered. cargo build -p calternal-server completed for the real-server e2e; cargo gates were not applicable because no Rust crate changed. cargo clean completed with the output above. git diff --check was clean.

Screenshots:

390 light: https://git.kayg.org/attachments/0f23f747-2cb2-4937-9101-7fd140d88267
390 dark: https://git.kayg.org/attachments/c6b1b472-cf84-482d-bca4-b4606a0ac9ac
820 light: https://git.kayg.org/attachments/32a832ea-781e-4bf7-ae24-c7f1d6ee71c4
820 dark: https://git.kayg.org/attachments/76e041d4-1d6b-4bae-812c-3f3b609700e2
1440 light: https://git.kayg.org/attachments/a8fec3e2-4788-45e0-98e0-f3ea2d20e473
1440 dark: https://git.kayg.org/attachments/2d46a9a2-b91d-4ab2-9048-9c70f2a9441c

Decision not specified in the design: use groupHeadingLevel=2 for User/Admin and reserve level 3 for the #407 subsection labels, following the existing heading hierarchy. Known gap: the unrelated full-suite ThemePicker timeout above was transient and passed when rerun alone.

Implemented and committed #482. The Settings sidebar now marks User and Admin as level-2 shared section headings. `FloatingSidebar` carries the heading level to `SidebarSectionHeader`, which applies the existing heading role tokens. The same component accepts level 3 for future Better Settings (#407) subsection labels. The Settings route selects level 2, and the auth e2e asserts that the exact User and Admin group headers have `.as-heading`. Files changed: - `packages/ui/src/components/FloatingSidebar.svelte` - `packages/ui/src/components/SidebarSectionHeader.svelte` - `apps/web/src/routes/settings/[...path]/+page.svelte` - `apps/web/e2e/auth.mjs` Head: `9224fe9ef56afc0eb7a46b76db6cd2e09ca6c4fa` Commits: `24d466669`, `503a066db`, `911d4debe`, `712ac44ad`, `9224fe9ef`. Verification output excerpts: ```text svelte-check found 0 errors and 0 warnings Removed 7067 files, 4.4GiB total ``` `bun run test`: 136 test files and 880 tests passed; one unrelated `ThemePicker.svelte.test.ts > ThemePicker variants > opens dark variants as a keyboard submenu and checks the selected variant` timed out at 5.275 s against the 5 s limit. The isolated test rerun passed (2/2). No test expectation changed. The production real-server auth e2e completed with `PASS auth e2e` and `CSP reports: 0`. Its Settings heading assertion ran at 390, 820 and 1440 px in light and dark themes. I inspected the six screenshots zoomed in; icon and label alignment is centered. `cargo build -p calternal-server` completed for the real-server e2e; cargo gates were not applicable because no Rust crate changed. `cargo clean` completed with the output above. `git diff --check` was clean. Screenshots: - 390 light: https://git.kayg.org/attachments/0f23f747-2cb2-4937-9101-7fd140d88267 - 390 dark: https://git.kayg.org/attachments/c6b1b472-cf84-482d-bca4-b4606a0ac9ac - 820 light: https://git.kayg.org/attachments/32a832ea-781e-4bf7-ae24-c7f1d6ee71c4 - 820 dark: https://git.kayg.org/attachments/76e041d4-1d6b-4bae-812c-3f3b609700e2 - 1440 light: https://git.kayg.org/attachments/a8fec3e2-4788-45e0-98e0-f3ea2d20e473 - 1440 dark: https://git.kayg.org/attachments/2d46a9a2-b91d-4ab2-9048-9c70f2a9441c Decision not specified in the design: use `groupHeadingLevel=2` for User/Admin and reserve level 3 for the #407 subsection labels, following the existing heading hierarchy. Known gap: the unrelated full-suite ThemePicker timeout above was transient and passed when rerun alone.

kayg referenced this issue from a commit

2026-09-30 07:05:32 +00:00

Merge job/settings-hdr-482 (#482: User and Admin use the shared section header at heading level 2; level 3 ready for Settings sub-sections)

kayg commented

2026-09-30 07:06:33 +00:00

Author

Owner

Merged into dev at 7e847c2ff.

Merged into dev at 7e847c2ff.

kayg closed this issue

2026-09-30 07:06:34 +00:00

kayg referenced this issue