Skip to content

feat(web): quieten the sidebar session rows - #111

Closed
elkaix wants to merge 1 commit into
feat/web-ui-primitivesfrom
feat/web-sidebar-shell
Closed

feat(web): quieten the sidebar session rows#111
elkaix wants to merge 1 commit into
feat/web-ui-primitivesfrom
feat/web-sidebar-shell

Conversation

@elkaix

@elkaix elkaix commented Aug 17, 2026

Copy link
Copy Markdown
Member

Related Issue

No issue. The problem is described below.

Problem

The sidebar session rows do the opposite of the two idioms the rest of the UI now follows. They hover with a solid var(--panel2) fill and mark the selected row with a solid var(--soft) fill, at an 8px radius with a pinned text size.

What changed

  • Hover moves to the --hover token — the translucent wash style.css already describes for exactly this purpose.
  • The selected row becomes the same faint color-mix wash the shared MenuRow primitive uses, so the sidebar and the menus agree.
  • The radius moves to --r-md, and the row and title sizes derive from --ui-font-size so the font-size setting still scales them. Section labels drop to the muted tone.

Behaviour is unchanged.

Three things worth calling out:

  • style.css carried its own per-theme overrides for these rows, with their own solid colours. Changing only the scoped block would have left the modern and pythinker themes untouched — the change would have looked correct in the default theme and been invisible in the other two. Those overrides are updated as well, and a test now pins them.
  • The row height is a minimum, not a fixed height. A fixed height with the existing padding leaves a 13px content box, which clips the 18px tag pill and the archive-confirm strip. jsdom performs no layout, so no test could have caught this — the guard now asserts the property is min-height and fails if it becomes a fixed height.
  • The colour-literal guard no longer diffs against git show HEAD. That baseline compares the file to itself once the change lands, so it could never fail again, and it required git at test time. It is now an explicit allowlist of the one pre-existing literal.

Deliberately not included: the sidebar resizer and the chat header. App.vue already has a persisted drag resizer via ResizeHandle/useResizable (270px default, clamped 170–420) — rewriting it to different numbers is churn. The header's fixed 48px is coupled to the desktop title-bar reserve asserted in windows-titlebar.test.ts, so restyling it belongs in its own change.

Verified locally: 346 web tests, typecheck and lint all pass, and the suite passes again after the pre-commit autofix. Both new guards were mutation-checked.

Checklist

  • I have read the CONTRIBUTING document.
  • I have linked a related issue, or explained the problem above.
  • I have added tests that prove my feature works.
  • Ran gen-changesets skill, or this PR needs no changeset.
  • Ran gen-docs skill, or this PR needs no doc update.

The rows hovered with a solid `--panel2` and marked selection with a
solid `--soft`, which is the opposite of the two idioms the rest of the
UI now follows: a translucent hover, and a barely-there active state.

Hover moves to `--hover`, selection to the same faint wash the shared
menu row uses, and the radius to `--r-md`. Row and title sizes derive
from `--ui-font-size` so the font-size setting still scales them, and the
section labels drop to the muted tone.

The per-theme overrides in `style.css` carried their own solid colours, so
they are updated too — changing only the scoped block would have left two
of the three themes unchanged.

The row height is a minimum, not a fixed height: the row also carries an
18px tag pill and the archive-confirm strip, both of which a fixed height
clips.
@coderabbitai

coderabbitai Bot commented Aug 17, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (1)
  • main

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 95ea425b-6109-42d7-b4c5-2ab5bfb413ed

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Comment @coderabbitai help to get the list of available commands.

@pkg-pr-new

pkg-pr-new Bot commented Aug 17, 2026

Copy link
Copy Markdown
pnpm dlx https://pkg.pr.new/@pymodel/pythinker-code@93e31d7
npx https://pkg.pr.new/@pymodel/pythinker-code@93e31d7

commit: 93e31d7

@elkaix

elkaix commented Aug 17, 2026

Copy link
Copy Markdown
Member Author

Closing: merged locally into main; a new PR will follow.

@elkaix elkaix closed this Aug 17, 2026
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