Settings sidebar: User/Admin bigger than group headings, indent nested items

kayg commented

2026-10-04 07:12:28 +00:00

Owner

Owner report (2026-10-04, production `6074f71d1`, dark theme)

"In the settings left sidebar, both 'User', 'Admin' and the H2s 'You'… all look the same size? A tiny bit of indentation for the nested items would also be nice!"

Today the Settings sidebar (apps/web/src/routes/settings/, sections in sections.ts) shows three levels with no visible hierarchy: the scope titles User / Admin, the group headings (You, Look & Feel, Tabs, Connections…) and the section rows (Account, Notifications…). The scope titles and group headings render in the same size and weight, and rows sit at the same left edge as the headings.

Wanted

Three distinct levels, using the one rem type scale and role tokens only (no numeric literals; the guard check fails on them, see #287/#299):
- Scope title (User, Admin): clearly the largest, like the sidebar title tier.
- Group heading (You, Look & Feel, Tabs…): a smaller secondary heading tier, quieter colour.
- Section rows: unchanged size.
A small indent (one spacing token step) for the group headings under a scope and for rows under a group, so nesting reads at a glance. The selected-row highlight follows the indent; icons and labels stay aligned on one vertical line inside a group (check icon/text alignment with a zoomed screenshot).
Screen readers: scope titles and group headings are real headings at the correct levels (or the sidebar nav exposes the grouping), keyboard order unchanged.

Earlier owner ask, still true: User/Admin act as section headers (Honcho). This issue adds that they must be visibly bigger than the group headings.

Acceptance

Screenshots of the real production build, light and dark, desktop and phone width, sidebar at default and narrow width, plus a zoomed crop of one group showing the indent and alignment. bun run check, bun run test verbatim.

## Owner report (2026-10-04, production 6074f71d1, dark theme) "In the settings left sidebar, both 'User', 'Admin' and the H2s 'You'… all look the same size? A tiny bit of indentation for the nested items would also be nice!" Today the Settings sidebar (`apps/web/src/routes/settings/`, sections in `sections.ts`) shows three levels with no visible hierarchy: the scope titles **User** / **Admin**, the group headings (**You**, **Look & Feel**, **Tabs**, **Connections**…) and the section rows (Account, Notifications…). The scope titles and group headings render in the same size and weight, and rows sit at the same left edge as the headings. ## Wanted 1. Three distinct levels, using the one rem type scale and role tokens only (no numeric literals; the guard check fails on them, see #287/#299): - **Scope title** (User, Admin): clearly the largest, like the sidebar title tier. - **Group heading** (You, Look & Feel, Tabs…): a smaller secondary heading tier, quieter colour. - **Section rows**: unchanged size. 2. A small indent (one spacing token step) for the group headings under a scope and for rows under a group, so nesting reads at a glance. The selected-row highlight follows the indent; icons and labels stay aligned on one vertical line inside a group (check icon/text alignment with a zoomed screenshot). 3. Screen readers: scope titles and group headings are real headings at the correct levels (or the sidebar nav exposes the grouping), keyboard order unchanged. Earlier owner ask, still true: User/Admin act as section headers (Honcho). This issue adds that they must be visibly bigger than the group headings. ## Acceptance Screenshots of the real production build, light and dark, desktop and phone width, sidebar at default and narrow width, plus a zoomed crop of one group showing the indent and alignment. `bun run check`, `bun run test` verbatim.

sidebar-390-light-default.png

267 KiB

sidebar-390-dark-default.png

276 KiB

sidebar-820-light-default.png

528 KiB

sidebar-820-dark-default.png

571 KiB

sidebar-1440-light-default.png

1,018 KiB

sidebar-1440-dark-default.png

833 KiB

sidebar-1440-light-narrow.png

1,018 KiB

sidebar-1440-dark-narrow.png

878 KiB

sidebar-group-user-1440-light-zoomed.png

16 KiB

sidebar-group-user-1440-dark-zoomed.png

27 KiB

sidebar-group-user-1440-dark-zoomed.png

27 KiB

sidebar-top-390-light.png

265 KiB

sidebar-top-390-dark.png

274 KiB

sidebar-top-820-light.png

526 KiB

sidebar-top-820-dark.png

569 KiB

sidebar-top-1440-light.png

354 KiB

sidebar-top-1440-dark.png

306 KiB

sidebar-narrow-1440-light.png

273 KiB

sidebar-narrow-1440-dark.png

250 KiB

sidebar-group-user-1440-light-zoomed.png

16 KiB

sidebar-money-1440-light.png

393 KiB

sidebar-money-1440-dark.png

251 KiB

sidebar-top-1440-dark.png

307 KiB

sidebar-top-390-light.png

265 KiB

sidebar-bottom-390-light.png

270 KiB

sidebar-admin-390-light.png

270 KiB

sidebar-top-820-light.png

526 KiB

sidebar-bottom-820-light.png

527 KiB

sidebar-admin-820-light.png

545 KiB

sidebar-top-1440-light.png

354 KiB

sidebar-bottom-1440-light.png

279 KiB

sidebar-admin-1440-light.png

279 KiB

sidebar-top-390-dark.png

274 KiB

sidebar-bottom-390-dark.png

278 KiB

sidebar-admin-390-dark.png

281 KiB

sidebar-top-820-dark.png

569 KiB

sidebar-bottom-820-dark.png

558 KiB

sidebar-admin-820-dark.png

586 KiB

sidebar-bottom-1440-dark.png

257 KiB

sidebar-admin-1440-dark.png

257 KiB

sidebar-narrow-1440-light.png

273 KiB

sidebar-narrow-1440-dark.png

250 KiB

kayg commented

2026-10-04 07:13:35 +00:00

Author

Owner

Starting work on branch job/setside-1039 from base 6074f71d1. I am checking the current Settings layout and DESIGN §§33 and 50 before the #1039 hierarchy change.

Starting work on branch job/setside-1039 from base 6074f71d1. I am checking the current Settings layout and DESIGN §§33 and 50 before the #1039 hierarchy change.

kayg commented

2026-10-04 07:21:20 +00:00

Author

Owner

Finding: FloatingSidebar already renders the scope and subgroup as h2/h3, but its desktop roles resolve to adjacent 15px and 14px steps; the subsection and rows also start at the same inset. The #1039 fix uses title-2/title-3/small roles and one toolbar-gap indent per nested level.

kayg referenced this issue from a commit

2026-10-04 07:30:19 +00:00

Clarify Settings sidebar hierarchy (#1039)

kayg commented

2026-10-04 08:02:20 +00:00

Author

Owner

Completed #1039 and #1040. READY FOR MERGE: yes.

Built

#1039: Made the existing User/Admin scope headings visibly stronger than subsection headings. Added a shared indent for subsection headings and their rows, so the heading and row icons start together. The sidebar continues to use the existing FloatingSidebar and shared role tokens.
#1040: Limited the Tabs group to enabled Plugins in PLUGIN_NAVIGATION. Non-Tab Plugin settings now live under User → You → Plugins. Old non-Tab paths and #tabs/... links resolve to their new home; the Notifications path resolves to its single static page. Redirects keep query strings.
Extended bench/settings-open-642.mjs to record sidebar size, Tab IDs, and the Notifications row count.

Files and commits

apps/web/src/routes/settings/[...path]/+page.svelte
apps/web/src/routes/settings/sections.ts
apps/web/src/routes/settings/sections.test.ts
bench/settings-open-642.mjs
7fc5273e5 Clarify Settings sidebar hierarchy (#1039)
2e2caa219 Keep non-Tab plugins out of Settings Tabs (#1040)
e4bebd97e8e816098a3da5197a8624034f5ea7f1 Track Settings sidebar in open profile (#1040)

Production screenshots

Captured from the production build on a real local server with macOS platform emulation. All six device/theme combinations are attached, along with desktop narrow-sidebar and zoomed alignment crops.

Phone: 390 light, 390 dark
Tablet: 820 light, 820 dark
Desktop: 1440 light, 1440 dark
Narrow desktop sidebar: light, dark
User-group alignment crop: light, dark
#1040 Plugins catalog: light, dark

UX gaps closed

The scope hierarchy is clear at phone, tablet, and desktop sizes. The Tabs list no longer repeats Notifications or lists Search, System, Tags, and Video as Tab pages. Old links continue to open the correct Settings page.

Verification

bun run check:

$ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
User browser caches use userStorage; only documented device/public-link exceptions remain.
Text sizes and UI shape values use shared role tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/setside-1039/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bunx vitest run src/routes/settings/sections.test.ts src/routes/settings/api.svelte.test.ts --maxWorkers=2:


 RUN  v5.0.1 /home/kayg/Developer/calternal-wt/setside-1039/apps/web


 Test Files  2 passed (2)
      Tests  18 passed (18)
   Start at  09:55:12
   Duration  3.72s (transform 62%, environment 25%, setup 7%, import 4%, tests 2%)

Production route checks passed for old Search, System, Tags, Video, and Notifications paths and the old #tabs/video link. The first four resolve to /settings/plugins; Notifications resolves to /settings/notifications; query strings stay intact. The benchmark script passed node --check.

Decisions and known gaps

Issue #1040's explicit resolution says only actual Tab Bar Plugins belong in Tabs. This differs from the older example in DESIGN §50, which places Plugins without a Tab under Tabs. I followed the issue resolution and left DESIGN.md unchanged for owner reconciliation.

The full bun run test suite and the benchmark measurement are not run in this job: the 2026-10-02 verification policy reserves the full suite for the merge round and perf measurements for performance issues. The benchmark profile is extended, but has not been measured. For the merge round, run bun run test and confirm the full web suite passes. No server route or API contract changed.

Head SHA: e4bebd97e8e816098a3da5197a8624034f5ea7f1.

Completed #1039 and #1040. **READY FOR MERGE: yes.** ## Built - #1039: Made the existing User/Admin scope headings visibly stronger than subsection headings. Added a shared indent for subsection headings and their rows, so the heading and row icons start together. The sidebar continues to use the existing FloatingSidebar and shared role tokens. - #1040: Limited the Tabs group to enabled Plugins in `PLUGIN_NAVIGATION`. Non-Tab Plugin settings now live under User → You → Plugins. Old non-Tab paths and `#tabs/...` links resolve to their new home; the Notifications path resolves to its single static page. Redirects keep query strings. - Extended `bench/settings-open-642.mjs` to record sidebar size, Tab IDs, and the Notifications row count. ## Files and commits - `apps/web/src/routes/settings/[...path]/+page.svelte` - `apps/web/src/routes/settings/sections.ts` - `apps/web/src/routes/settings/sections.test.ts` - `bench/settings-open-642.mjs` - `7fc5273e5` Clarify Settings sidebar hierarchy (#1039) - `2e2caa219` Keep non-Tab plugins out of Settings Tabs (#1040) - `e4bebd97e8e816098a3da5197a8624034f5ea7f1` Track Settings sidebar in open profile (#1040) ## Production screenshots Captured from the production build on a real local server with macOS platform emulation. All six device/theme combinations are attached, along with desktop narrow-sidebar and zoomed alignment crops. - Phone: [390 light](https://git.kayg.org/attachments/576d017c-763c-4c48-ac23-f973094c7b1c), [390 dark](https://git.kayg.org/attachments/c6cb9f40-ca51-4031-b20f-ebcdc0eed893) - Tablet: [820 light](https://git.kayg.org/attachments/a762a243-d217-45a5-aea7-472fb5003c2b), [820 dark](https://git.kayg.org/attachments/7fc21958-fc00-4e5d-ab9a-ef2d3f8d792d) - Desktop: [1440 light](https://git.kayg.org/attachments/d4cd7725-d50a-4ed2-9707-1c31786c4912), [1440 dark](https://git.kayg.org/attachments/086f0ee4-9559-44cc-afed-eb0c78565b4a) - Narrow desktop sidebar: [light](https://git.kayg.org/attachments/f3d89da2-ac18-49ec-bacc-242c48967388), [dark](https://git.kayg.org/attachments/7a546d54-0d85-4a42-b8da-7ebe98fb2e2d) - User-group alignment crop: [light](https://git.kayg.org/attachments/a72e5cd6-cfd5-44e3-bf2b-40f50a50c5de), [dark](https://git.kayg.org/attachments/7ac6f83a-4652-499c-bebd-d7b8bcf0599b) - #1040 Plugins catalog: [light](https://git.kayg.org/attachments/57cf5210-8456-49f6-8849-2f1f49258aea), [dark](https://git.kayg.org/attachments/1d616f27-26b5-4794-be91-41f1a4c54e13) ## UX gaps closed The scope hierarchy is clear at phone, tablet, and desktop sizes. The Tabs list no longer repeats Notifications or lists Search, System, Tags, and Video as Tab pages. Old links continue to open the correct Settings page. ## Verification `bun run check`: ```text $ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json User browser caches use userStorage; only documented device/public-link exceptions remain. Text sizes and UI shape values use shared role tokens. UI transitions and animation options use shared motion tokens or documented exceptions. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/setside-1039/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bunx vitest run src/routes/settings/sections.test.ts src/routes/settings/api.svelte.test.ts --maxWorkers=2`: ```text RUN v5.0.1 /home/kayg/Developer/calternal-wt/setside-1039/apps/web Test Files 2 passed (2) Tests 18 passed (18) Start at 09:55:12 Duration 3.72s (transform 62%, environment 25%, setup 7%, import 4%, tests 2%) ``` Production route checks passed for old Search, System, Tags, Video, and Notifications paths and the old `#tabs/video` link. The first four resolve to `/settings/plugins`; Notifications resolves to `/settings/notifications`; query strings stay intact. The benchmark script passed `node --check`. ## Decisions and known gaps Issue #1040's explicit resolution says only actual Tab Bar Plugins belong in Tabs. This differs from the older example in DESIGN §50, which places Plugins without a Tab under Tabs. I followed the issue resolution and left DESIGN.md unchanged for owner reconciliation. The full `bun run test` suite and the benchmark measurement are not run in this job: the 2026-10-02 verification policy reserves the full suite for the merge round and perf measurements for performance issues. The benchmark profile is extended, but has not been measured. For the merge round, run `bun run test` and confirm the full web suite passes. No server route or API contract changed. Head SHA: `e4bebd97e8e816098a3da5197a8624034f5ea7f1`.

kayg referenced this issue

2026-10-04 08:02:24 +00:00

Settings sidebar: Tabs group lists plugins; Notifications appears twice #1040

kayg commented

2026-10-04 08:05:35 +00:00

Author

Owner

Starting work on job/setside-1039 from base e4bebd97e. I am tracing the Settings sidebar hierarchy and the fixture that controls the Money Tab before changing styles or screenshots.

Starting work on job/setside-1039 from base e4bebd97e. I am tracing the Settings sidebar hierarchy and the fixture that controls the Money Tab before changing styles or screenshots.

kayg commented

2026-10-04 08:11:27 +00:00

Author

Owner

Finding: Money is in PLUGIN_NAVIGATION and enabled for an Instance, but a new User starts with Money off ( checks ). Settings intentionally filters disabled User Tabs, so the earlier fixture omitted Money because it never opted in. I will enable it through the fixture API and add a regression assertion that it remains in the Tabs list when enabled.

kayg commented

2026-10-04 08:11:36 +00:00

Author

Owner

Finding: Money is in PLUGIN_NAVIGATION and enabled for an Instance, but a new User starts with Money off (apps/web/e2e/money.mjs asserts user_enabled is false). Settings intentionally filters disabled User Tabs, so the earlier fixture omitted Money because it never opted in. I will enable it through the fixture API and add a regression assertion that it remains in the Tabs list when enabled.

kayg commented

2026-10-04 08:16:07 +00:00

Author

Owner

Decision: User and Admin remain semantic h2 headings with title-2 role tokens. Subsection labels remain semantic h3 elements but use the existing compact SidebarSectionHeader style used by Calendar views and Tags. The subsection text starts one toolbar-gap after the scope title; rows and the active capsule start one more token step in. This uses the existing type and spacing roles without adding token values.

kayg commented

2026-10-04 08:16:20 +00:00

Author

Owner

Correction: my first Money finding comment lost its parenthesized evidence during shell quoting and was then posted again correctly. The complete evidence is in the following finding comment, which identifies apps/web/e2e/money.mjs and user_enabled=false.

kayg commented

2026-10-04 08:47:04 +00:00

Author

Owner

READY FOR MERGE: yes

Built

Kept User and Admin as semantic h2 scope headings in the title-2 role. Subsection names remain semantic h3 headings and use the existing compact SidebarSectionHeader style used by Calendar views and Tags.
Indented each subsection one toolbar-gap after its scope title. Rows and the selected capsule start one more spacing step in.
Enabled Money for the real screenshot User through the Plugin API. The Settings registry test now verifies that an enabled Money Tab appears. The earlier absence was the new User's default opt-out, not a Tab filter regression.
Captured the production Settings UI with macOS platform signals in light and dark at 390, 820 and 1440 px, plus narrow desktop and 2× group crops.

Files

apps/web/src/routes/settings/[...path]/+page.svelte
apps/web/src/routes/settings/sections.test.ts
apps/web/e2e/settings-review-50.mjs

Measured offsets

At 1440 px: User x=289.4 px, You x=297.9 px, Account icon x=306.1 px. The offsets are +8.5 px and +16.7 px from User; the toolbar-gap token is 8.56 px. The narrow rail reached 184 px by keyboard and reset to 248 px.

Screenshots

Phone: 390 light, 390 dark
Tablet: 820 light, 820 dark
Desktop: 1440 light, 1440 dark
Narrow desktop sidebar: light, dark
Zoomed User group: light, dark
Money visible in Tabs: light, dark

UX gaps closed

The scope, subsection and row hierarchy is visible; selected-row highlight follows the indent; h2/h3 semantics remain; the keyboard resize review reached and reset the narrow width; and the enabled Money Tab is visible in the screenshots.

UX gaps left

None in this issue's scope. The full web suite remains for the merge round under the verification policy.

Gates

bun run check passed. Output:

$ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
User browser caches use userStorage; only documented device/public-link exceptions remain.
Text sizes and UI shape values use shared role tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/setside-1039/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bunx vitest run src/routes/settings/sections.test.ts --maxWorkers=2 passed:


 RUN  v5.0.1 /home/kayg/Developer/calternal-wt/setside-1039/apps/web


 Test Files  1 passed (1)
      Tests  16 passed (16)
   Start at  10:18:59
   Duration  1.42s (transform 86%, import 12%, tests 2%)

The production review runner passed. It captured 50 screenshots, verified 26 legacy Settings URLs and the Calendar Settings menu route. The server was built locally only to serve the production web assets; no Rust source or API contract changed. cargo clean removed 7,238 files (4.6 GiB), and the web build output was deleted.

Decisions

DESIGN §50 specifies h2/h3 semantics but does not set a visual size step between them. I kept those semantics and used SidebarSectionHeader's existing compact label role for the subsection tier. No new type token was added.

Commits

dc6bded77 style(settings): separate sidebar hierarchy levels
e2ddbccb4 test(settings): cover enabled Money sidebar Tab
5454fac0f test(settings): sharpen sidebar review crops

Head SHA: 5454fac0f1c18acf3bb4ecca8ad49522b0e072ca.

## READY FOR MERGE: yes ### Built - Kept User and Admin as semantic h2 scope headings in the title-2 role. Subsection names remain semantic h3 headings and use the existing compact SidebarSectionHeader style used by Calendar views and Tags. - Indented each subsection one toolbar-gap after its scope title. Rows and the selected capsule start one more spacing step in. - Enabled Money for the real screenshot User through the Plugin API. The Settings registry test now verifies that an enabled Money Tab appears. The earlier absence was the new User's default opt-out, not a Tab filter regression. - Captured the production Settings UI with macOS platform signals in light and dark at 390, 820 and 1440 px, plus narrow desktop and 2× group crops. ### Files - apps/web/src/routes/settings/[...path]/+page.svelte - apps/web/src/routes/settings/sections.test.ts - apps/web/e2e/settings-review-50.mjs ### Measured offsets At 1440 px: User x=289.4 px, You x=297.9 px, Account icon x=306.1 px. The offsets are +8.5 px and +16.7 px from User; the toolbar-gap token is 8.56 px. The narrow rail reached 184 px by keyboard and reset to 248 px. ### Screenshots - Phone: [390 light](https://git.kayg.org/attachments/42883bd4-5893-4a7e-b88e-41a6fa3e9c58), [390 dark](https://git.kayg.org/attachments/f0fb5ec2-01b5-45c5-9b1b-94033f47f281) - Tablet: [820 light](https://git.kayg.org/attachments/d4093743-fe7f-4c73-88ea-687e8c4b152d), [820 dark](https://git.kayg.org/attachments/b7b5b365-8a7c-4ecd-89c0-5a1c7ad0a0cf) - Desktop: [1440 light](https://git.kayg.org/attachments/35ec8b6b-f1c8-4de5-9d4c-09d75ad23d9f), [1440 dark](https://git.kayg.org/attachments/00cd55a8-aed6-449f-a945-63603825869c) - Narrow desktop sidebar: [light](https://git.kayg.org/attachments/cf962309-7f36-40e9-9b75-7752dca14578), [dark](https://git.kayg.org/attachments/c39eada2-7339-4d09-90be-82a8a6fa4b0d) - Zoomed User group: [light](https://git.kayg.org/attachments/58a0d83d-5b91-4aa9-8420-1b11a7337681), [dark](https://git.kayg.org/attachments/f7aa2dde-34fc-46fe-9230-9281fa2cc479) - Money visible in Tabs: [light](https://git.kayg.org/attachments/1045164c-2953-4374-ac98-2799b8852934), [dark](https://git.kayg.org/attachments/7ea0dc3f-630d-4b09-9fb8-250cf8690cd5) ### UX gaps closed The scope, subsection and row hierarchy is visible; selected-row highlight follows the indent; h2/h3 semantics remain; the keyboard resize review reached and reset the narrow width; and the enabled Money Tab is visible in the screenshots. ### UX gaps left None in this issue's scope. The full web suite remains for the merge round under the verification policy. ### Gates `bun run check` passed. Output: ```text $ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json User browser caches use userStorage; only documented device/public-link exceptions remain. Text sizes and UI shape values use shared role tokens. UI transitions and animation options use shared motion tokens or documented exceptions. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/setside-1039/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bunx vitest run src/routes/settings/sections.test.ts --maxWorkers=2` passed: ```text RUN v5.0.1 /home/kayg/Developer/calternal-wt/setside-1039/apps/web Test Files 1 passed (1) Tests 16 passed (16) Start at 10:18:59 Duration 1.42s (transform 86%, import 12%, tests 2%) ``` The production review runner passed. It captured 50 screenshots, verified 26 legacy Settings URLs and the Calendar Settings menu route. The server was built locally only to serve the production web assets; no Rust source or API contract changed. `cargo clean` removed 7,238 files (4.6 GiB), and the web build output was deleted. ### Decisions DESIGN §50 specifies h2/h3 semantics but does not set a visual size step between them. I kept those semantics and used SidebarSectionHeader's existing compact label role for the subsection tier. No new type token was added. ### Commits - dc6bded77 style(settings): separate sidebar hierarchy levels - e2ddbccb4 test(settings): cover enabled Money sidebar Tab - 5454fac0f test(settings): sharpen sidebar review crops Head SHA: `5454fac0f1c18acf3bb4ecca8ad49522b0e072ca`.

kayg commented

2026-10-04 08:50:21 +00:00

Author

Owner

Starting the #1039 send-back on job/setside-1039, based on 6074f71d18abe73b2b4255acb564f275a9acc851. I will widen the Settings sidebar default through the existing token system so the longest User/Admin row fits with its approved indent, then run the requested web checks and capture the requested screenshots.

Starting the #1039 send-back on `job/setside-1039`, based on `6074f71d18abe73b2b4255acb564f275a9acc851`. I will widen the Settings sidebar default through the existing token system so the longest User/Admin row fits with its approved indent, then run the requested web checks and capture the requested screenshots.

kayg commented

2026-10-04 09:02:55 +00:00

Author

Owner

Finding: the current Settings width is 248 px in both the route's resize defaults and its CSS track fallback. The approved row inset is two --toolbar-gap steps, so the real production screenshot clips the User row label to Connected Accou… at 1440 px. I replaced the duplicate fallback with one rem-based --settings-rail-default-width token and pass its resolved width to the existing pointer and keyboard resizer. The review runner now checks every User/Admin row and captures the Admin scope.

Finding: the current Settings width is 248 px in both the route's resize defaults and its CSS track fallback. The approved row inset is two `--toolbar-gap` steps, so the real production screenshot clips the User row label to `Connected Accou…` at 1440 px. I replaced the duplicate fallback with one rem-based `--settings-rail-default-width` token and pass its resolved width to the existing pointer and keyboard resizer. The review runner now checks every User/Admin row and captures the Admin scope.

kayg commented

2026-10-04 09:29:18 +00:00

Author

Owner

READY FOR MERGE: yes

Built

Set the Settings rail default from the rem-based --settings-rail-default-width token. The existing pointer and keyboard resizer reads that token for its pixel bounds and reset value.
Added production review assertions that every rendered User and Admin row fits at the default width and that “Connected Accounts” truncates after the User narrows the rail to 184 px.
Captured the requested Settings views at 390, 820 and 1440 px in light and dark, with macOS platform emulation. The Admin scope has its own view.

Files and commit

apps/web/src/calternal-app.css
apps/web/src/routes/settings/[...path]/+page.svelte
apps/web/e2e/settings-review-50.mjs
Head SHA: b8794746858179d3daa7b91fa24346b7a746750b (fix(settings): fit sidebar labels at default width (#1039)).

Screenshots

Captured from the production build on a real local server. These review images are attached to this issue; all 56 captures remain in the worktree under artifacts/setside-1039/sendback/ and are not committed.

Phone (390 px): top light, bottom light, admin light, top dark, bottom dark, admin dark
Tablet (820 px): top light, bottom light, admin light, top dark, bottom dark, admin dark
Desktop (1440 px): top light, bottom light, admin light, top dark, bottom dark, admin dark
Resized desktop rail: narrow light, narrow dark

UX gaps closed

“Connected Accounts” is the longest rendered row label. It fits in the default rail across the captured widths and themes.
The focused 184 px keyboard resize truncates that label. Enter restores the token width.
The Admin scope is covered in its own screenshots, in both themes.

UX gaps left

None in this send-back.

Gates

bun run check:

$ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
User browser caches use userStorage; only documented device/public-link exceptions remain.
Text sizes and UI shape values use shared role tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/setside-1039/apps/web
Getting Svelte diagnostics...

svelte-check found 0 errors and 0 warnings

bunx vitest run src/routes/settings/sections.test.ts --maxWorkers=2:

 RUN  v5.0.1 /home/kayg/Developer/calternal-wt/setside-1039/apps/web


 Test Files  1 passed (1)
      Tests  16 passed (16)
   Start at  11:19:36
   Duration  2.19s (transform 86%, import 12%, tests 2%, worker 1%)

node --check e2e/settings-review-50.mjs passed with no output.
bun run test:e2e:settings-50 passed: 56 screenshots captured, all rendered row labels fit at default width, narrow-width truncation/reset checks passed, 26 legacy Settings URLs resolved, and the Calendar overflow menu opened its Tab Settings page.

Decisions

DESIGN §50 does not set the Settings rail width. I chose 17.5rem for the default width token. It keeps the longest label and its inset visible with a small margin. The owner can confirm this width choice.

For the merge round

Run bun run test to prove the full web suite passes. The verification policy reserves that suite for the merge round. No Rust source changed; cargo clean removed the local build output after the screenshot run.

## READY FOR MERGE: yes ### Built - Set the Settings rail default from the rem-based `--settings-rail-default-width` token. The existing pointer and keyboard resizer reads that token for its pixel bounds and reset value. - Added production review assertions that every rendered User and Admin row fits at the default width and that “Connected Accounts” truncates after the User narrows the rail to 184 px. - Captured the requested Settings views at 390, 820 and 1440 px in light and dark, with macOS platform emulation. The Admin scope has its own view. ### Files and commit - `apps/web/src/calternal-app.css` - `apps/web/src/routes/settings/[...path]/+page.svelte` - `apps/web/e2e/settings-review-50.mjs` - Head SHA: `b8794746858179d3daa7b91fa24346b7a746750b` (`fix(settings): fit sidebar labels at default width (#1039)`). ### Screenshots Captured from the production build on a real local server. These review images are attached to this issue; all 56 captures remain in the worktree under `artifacts/setside-1039/sendback/` and are not committed. - **Phone (390 px):** [top light](https://git.kayg.org/attachments/403c6765-a901-4413-bd12-7de8012fed91), [bottom light](https://git.kayg.org/attachments/b8fbf73c-fea9-4f27-a587-2feb2674df5d), [admin light](https://git.kayg.org/attachments/a0ca138b-786c-40e3-83c6-dd2a5a8399e8), [top dark](https://git.kayg.org/attachments/e0f224fb-99ab-4c2b-8958-b1d8febaa33c), [bottom dark](https://git.kayg.org/attachments/2c1fd117-5e04-48cd-b6b1-fe5393d9095c), [admin dark](https://git.kayg.org/attachments/7682e813-7bc2-490e-99a6-1284f561fc1f) - **Tablet (820 px):** [top light](https://git.kayg.org/attachments/2c04b24e-bfcf-4275-9cbb-9757e5e3251c), [bottom light](https://git.kayg.org/attachments/44cae030-b301-4fd6-a9aa-0b1a5b77c0d1), [admin light](https://git.kayg.org/attachments/e3fb4def-36d1-42c0-aa60-34ec57e1c869), [top dark](https://git.kayg.org/attachments/3560e34d-76da-46e4-aeff-d6dbb4061d52), [bottom dark](https://git.kayg.org/attachments/7bc8b604-3b8a-49e3-b12d-a66ef464cd93), [admin dark](https://git.kayg.org/attachments/06a63d32-ba14-4ec0-aa19-0a40a14f3bdd) - **Desktop (1440 px):** [top light](https://git.kayg.org/attachments/c7faeadd-fb23-4836-b8ea-25ff2042c57e), [bottom light](https://git.kayg.org/attachments/eec03d9d-11c3-4298-93d4-d1910652790d), [admin light](https://git.kayg.org/attachments/f99b5db8-0528-4db0-a20f-078a772c9e42), [top dark](https://git.kayg.org/attachments/02a8d511-c350-4efb-b65e-f6afc95a0f33), [bottom dark](https://git.kayg.org/attachments/944fc253-dee2-4ed2-9225-6d006f0bb4db), [admin dark](https://git.kayg.org/attachments/288ad6c1-3eea-44e0-8f0a-44846a52b6b9) - **Resized desktop rail:** [narrow light](https://git.kayg.org/attachments/09b164c2-e7f6-42a3-abff-9b191555bba4), [narrow dark](https://git.kayg.org/attachments/0e27e2d4-5531-414c-a371-eed2a69f3c39) ### UX gaps closed - “Connected Accounts” is the longest rendered row label. It fits in the default rail across the captured widths and themes. - The focused 184 px keyboard resize truncates that label. Enter restores the token width. - The Admin scope is covered in its own screenshots, in both themes. ### UX gaps left None in this send-back. ### Gates `bun run check`: ```text $ node scripts/check-user-storage.mjs && node scripts/check-type-tokens.mjs && node scripts/check-motion-tokens.mjs && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json User browser caches use userStorage; only documented device/public-link exceptions remain. Text sizes and UI shape values use shared role tokens. UI transitions and animation options use shared motion tokens or documented exceptions. Loading svelte-check in workspace: /home/kayg/Developer/calternal-wt/setside-1039/apps/web Getting Svelte diagnostics... svelte-check found 0 errors and 0 warnings ``` `bunx vitest run src/routes/settings/sections.test.ts --maxWorkers=2`: ```text RUN v5.0.1 /home/kayg/Developer/calternal-wt/setside-1039/apps/web Test Files 1 passed (1) Tests 16 passed (16) Start at 11:19:36 Duration 2.19s (transform 86%, import 12%, tests 2%, worker 1%) ``` `node --check e2e/settings-review-50.mjs` passed with no output. `bun run test:e2e:settings-50` passed: 56 screenshots captured, all rendered row labels fit at default width, narrow-width truncation/reset checks passed, 26 legacy Settings URLs resolved, and the Calendar overflow menu opened its Tab Settings page. ### Decisions DESIGN §50 does not set the Settings rail width. I chose `17.5rem` for the default width token. It keeps the longest label and its inset visible with a small margin. The owner can confirm this width choice. ### For the merge round Run `bun run test` to prove the full web suite passes. The verification policy reserves that suite for the merge round. No Rust source changed; `cargo clean` removed the local build output after the screenshot run.

kayg referenced this issue from a commit

2026-10-04 09:31:41 +00:00

fix(settings): fit sidebar labels at default width (#1039)

kayg commented

2026-10-04 09:53:01 +00:00

Author

Owner

Deployed to production (2026-10-04, small round 6 = `c39ffe5d9`)

Round: dev d0fc1f463 + job/setside-1039 + job/paste-1036 (web only). Gates on the round: web check COMPLETED 2005 FILES 0 ERRORS 0 WARNINGS, web tests Tests 1118 passed (1118), editor tests Tests 410 passed (410), PASTE-1036 E2E PASSED (WebKit, 390/820/1440 light/dark, image saved as a Home file and rendered after reload). Staging healthy first.

## Deployed to production (2026-10-04, small round 6 = c39ffe5d9) Round: dev d0fc1f463 + job/setside-1039 + job/paste-1036 (web only). Gates on the round: web check `COMPLETED 2005 FILES 0 ERRORS 0 WARNINGS`, web tests `Tests 1118 passed (1118)`, editor tests `Tests 410 passed (410)`, `PASTE-1036 E2E PASSED` (WebKit, 390/820/1440 light/dark, image saved as a Home file and rendered after reload). Staging healthy first.

kayg closed this issue

2026-10-04 09:53:03 +00:00

kayg referenced this issue

2026-10-06 10:37:40 +00:00

REGRESSION: Settings overlay lost its dim/blur scrim and its sidebar got wider #1195

Rows
Columns

Settings sidebar: User/Admin bigger than group headings, indent nested items #1039

Owner report (2026-10-04, production 6074f71d1, dark theme)

Wanted

Acceptance

Built

Files and commits

Production screenshots

UX gaps closed

Verification

Decisions and known gaps

READY FOR MERGE: yes

Built

Files

Measured offsets

Screenshots

UX gaps closed

UX gaps left

Gates

Decisions

Commits

READY FOR MERGE: yes

Built

Files and commit

Screenshots

UX gaps closed

UX gaps left

Gates

Decisions

For the merge round

Deployed to production (2026-10-04, small round 6 = c39ffe5d9)

Owner report (2026-10-04, production `6074f71d1`, dark theme)

Deployed to production (2026-10-04, small round 6 = `c39ffe5d9`)