Skip to content

improve(ui): polish main sidebar layout#100963

Closed
vyctorbrzezowski wants to merge 1 commit into
openclaw:mainfrom
vyctorbrzezowski:brzezowski/main-sidebar-polish
Closed

improve(ui): polish main sidebar layout#100963
vyctorbrzezowski wants to merge 1 commit into
openclaw:mainfrom
vyctorbrzezowski:brzezowski/main-sidebar-polish

Conversation

@vyctorbrzezowski

@vyctorbrzezowski vyctorbrzezowski commented Jul 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

What Problem This Solves

The main Control UI sidebar has several small visual and copy inconsistencies: fixed routes sit above New session, sidebar row edges do not line up consistently, compact session timestamps include extra "ago" text, and the docs/customization copy is broader than the control it describes.

Why This Change Was Made

This PR proposes visual and copy polish only. It moves the fixed sidebar routes below New session, normalizes the main sidebar row inset/focus/active styling, keeps the More separator outside the scrollable session list, shortens compact sidebar timestamps, and updates the docs and pinned-item customization copy.

It intentionally does not change session sorting, session data ordering, routing behavior, the Settings-only sidebar layout, or the chat transcript/composer UI.

User Impact

Users get a cleaner main sidebar with aligned row actions, timestamps, footer icons, and route controls. The sidebar customization control now describes editing pinned items specifically, and the Documentation tooltip is compact while still signaling an external link.

Screenshots

Desktop sidebar view proposed in this PR:

Desktop sidebar view proposed in this PR

Mobile sidebar drawer view proposed in this PR:

Mobile sidebar drawer view proposed in this PR

Evidence

  • git diff --check origin/main...HEAD
  • node scripts/run-vitest.mjs ui/src/e2e/sidebar-customization.e2e.test.ts
  • pnpm ui:i18n:check
  • Browser smoke with mocked Gateway for /overview, /chat, and /config: New session, pinned route, session row, All sessions, and the rightmost footer icon all measured at the same right edge (239px) on the final head.

@clawsweeper

clawsweeper Bot commented Jul 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 7, 2026, 5:22 AM ET / 09:22 UTC.

Summary
The branch moves main Control UI sidebar navigation below New session, aligns sidebar row/footer spacing and focus styles, shortens compact session timestamps, and updates pinned-item/docs tooltip copy plus generated locale metadata and E2E expectations.

PR surface: Source +21, Tests 0. Total +21 across 45 files.

Reproducibility: not applicable. this is a UI polish PR rather than a bug report. The changed behavior is directly visible in the inspected desktop and mobile screenshots and traceable in PR-head sidebar source.

Review metrics: 1 noteworthy metric.

  • Generated locale copy: 1 tooltip key regenerated across 20 non-English locale bundles. The UI guide treats those files as generated output, so maintainers should notice that the compact docs tooltip now carries an English label across localized bundles.

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🐚 platinum hermit
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

  • When maintainer UX direction is settled, mark the PR ready, rebase onto current main, and rerun focused sidebar/i18n validation on the exact head.

Risk before merge

  • [P1] The PR is currently draft, protected by the maintainer label, and behind current main; final merge should wait for maintainer UX review and fresh exact-head validation.
  • [P1] The branch overlaps feat(ui): redesign dashboard chrome with tiny top bar and sidebar search #101497 and other active sidebar/chrome drafts, so maintainers should choose one Control UI chrome path before landing visible navigation changes.
  • [P1] The compact docs tooltip is generated as English text across non-English locale bundles; this is a small product-copy choice rather than a correctness blocker.

Maintainer options:

  1. Decide the mitigation before merge
    Have maintainers choose whether this narrow sidebar polish should rebase and land after the draft is ready, or be folded into the broader Control UI chrome redesign while preserving the existing pinned-route and session-navigation contracts.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

  • [P2] No autonomous repair lane: the PR is draft and protected, and the remaining action is maintainer UX direction plus rebase/validation rather than a concrete code defect for ClawSweeper to fix.

Maintainer decision needed

  • Question: Should maintainers land this narrow main-sidebar polish after the draft is ready, or fold the desired row, timestamp, and copy polish into feat(ui): redesign dashboard chrome with tiny top bar and sidebar search #101497 or another Control UI chrome path?
  • Rationale: The PR changes visible navigation chrome, is protected by a maintainer label, and overlaps active broader Control UI chrome work, so automation should not choose the permanent UX path alone.
  • Likely owner: steipete — steipete owns the most recent merged sidebar/chrome direction and authored the active broader dashboard chrome redesign that overlaps this PR.
  • Options:
    • Review with the chrome redesign (recommended): Pick one Control UI chrome path, then carry over only the row alignment, compact timestamp, and copy polish that still fits before merging.
    • Land the narrow polish after ready: Ask the contributor to undraft, rebase, and rerun focused sidebar/i18n validation if maintainers want these small sidebar changes independent of the broader redesign.
    • Pause or close this draft: Leave this PR paused or close it if the broader redesign intentionally supersedes the narrow sidebar polish.

Security
Cleared: The diff is limited to Control UI rendering, CSS, E2E expectations, and generated i18n files; I found no concrete security or supply-chain concern.

Review details

Best possible solution:

Have maintainers choose whether this narrow sidebar polish should rebase and land after the draft is ready, or be folded into the broader Control UI chrome redesign while preserving the existing pinned-route and session-navigation contracts.

Do we have a high-confidence way to reproduce the issue?

Not applicable: this is a UI polish PR rather than a bug report. The changed behavior is directly visible in the inspected desktop and mobile screenshots and traceable in PR-head sidebar source.

Is this the best way to solve the issue?

Yes for the narrow scope: the PR reuses existing sidebar route/session renderers and shared relative-time formatting instead of creating a second navigation contract. Product fit remains a maintainer decision because #101497 and other drafts overlap the same chrome surface.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 202d90041dc2.

Label changes

Label changes:

  • add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
  • remove rating: 🦐 gold shrimp: Current PR rating is rating: 🐚 platinum hermit, so this older rating label is no longer current.

Label justifications:

  • P3: This is low-risk Control UI visual and copy polish with no evidence of a broken workflow, data loss, security issue, crash, or release blocker.
  • rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Sufficient screenshot proof: the desktop and mobile screenshots in the PR body directly show the changed sidebar layout states, and they were inspected during review.
  • proof: sufficient: Contributor real behavior proof is sufficient. Sufficient screenshot proof: the desktop and mobile screenshots in the PR body directly show the changed sidebar layout states, and they were inspected during review.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Sufficient screenshot proof: the desktop and mobile screenshots in the PR body directly show the changed sidebar layout states, and they were inspected during review.
Evidence reviewed

PR surface:

Source +21, Tests 0. Total +21 across 45 files.

View PR surface stats
Area Files Added Removed Net
Source 44 121 100 +21
Tests 1 3 3 0
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 45 124 103 +21

What I checked:

  • Repository policy read: Root AGENTS.md and ui/AGENTS.md were read fully; the UI-scoped generated-locale rule applies because the PR changes English source copy plus generated locale bundles and metadata. (ui/AGENTS.md:7, 202d90041dc2)
  • Live PR state: GitHub reports the PR open, draft, mergeable but behind, with maintainer, proof: sufficient, and proof screenshot labels on head 4187fe4. (4187fe4e2ba0)
  • PR-head sidebar order and timestamp behavior: PR-head source adds formatSidebarTimestamp, uses it for sidebar session metadata, renders renderSidebarNavigation after New session, and keeps the route renderer/More section as the navigation source of truth. (ui/src/components/app-sidebar.ts:111, 4187fe4e2ba0)
  • PR-head layout CSS: PR-head CSS centralizes sidebar row inset/gap variables, applies the same row inset to nav/new-session/recent headers/footer, and preserves collapsed-rail sizing and focus-visible states. (ui/src/styles/layout.css:380, 4187fe4e2ba0)
  • Changed E2E expectations: The sidebar customization E2E now asserts the updated accessible names for editing and resetting pinned items, preserving coverage for pinned route persistence and reset behavior. (ui/src/e2e/sidebar-customization.e2e.test.ts:104, 4187fe4e2ba0)
  • Current-main navigation contract: Current main keeps Chat reachable through sessions, Settings/Docs in the sidebar footer, and pinned nav routes flowing through SIDEBAR_NAV_ROUTES/sidebarMoreRoutes, which the PR continues to use rather than creating a second nav model. (ui/src/app-navigation.ts:12, 202d90041dc2)

Likely related people:

  • steipete: GitHub path history shows steipete authored the recent pinned navigation, session-first/minimal sidebar, footer/sidebar rail, and broader dashboard chrome work that owns this UX surface. (role: feature owner and recent area contributor; confidence: high; commits: 51771c3a1485, 60cf7eaa005b, aa0b5b1fb438; files: ui/src/components/app-sidebar.ts, ui/src/styles/layout.css, ui/src/styles/layout.mobile.css)
  • vyctorbrzezowski: Beyond authoring this PR, vyctorbrzezowski has merged adjacent stable sidebar session-order work on the same sidebar path and has several open sidebar/chrome draft PRs that overlap the review surface. (role: recent adjacent contributor; confidence: medium; commits: a03c828cadd8, 4187fe4e2ba0; files: ui/src/components/app-sidebar.ts, ui/src/styles/layout.css, ui/src/e2e/sidebar-customization.e2e.test.ts)
  • shakkernerd: GitHub path history shows shakkernerd carried recent sidebar fixes and the Control UI architecture refactor that still informs this component boundary. (role: recent adjacent contributor; confidence: medium; commits: 67ec544884af, 2a02379e7d27, 4074c8e7439e; files: ui/src/components/app-sidebar.ts, ui/src/styles/layout.css)
What the crustacean ranks mean
  • 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
  • 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
  • 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
  • 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
  • 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
  • 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
  • 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works
  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.
Review history (4 earlier review cycles)
  • reviewed 2026-07-06T15:32:03.771Z sha 44fb3d9 :: needs real behavior proof before merge. :: none
  • reviewed 2026-07-06T17:20:29.414Z sha 44fb3d9 :: needs real behavior proof before merge. :: none
  • reviewed 2026-07-07T08:43:09.963Z sha 44fb3d9 :: needs maintainer review before merge. :: none
  • reviewed 2026-07-07T09:15:52.945Z sha 4187fe4 :: needs maintainer review before merge. :: none

@clawsweeper clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. labels Jul 6, 2026
@vyctorbrzezowski
vyctorbrzezowski marked this pull request as ready for review July 6, 2026 16:31
@openclaw-barnacle openclaw-barnacle Bot added the maintainer Maintainer-authored PR label Jul 7, 2026
@clawsweeper clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. and removed rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. labels Jul 7, 2026
@vyctorbrzezowski
vyctorbrzezowski force-pushed the brzezowski/main-sidebar-polish branch from 44fb3d9 to 4187fe4 Compare July 7, 2026 08:52
@vyctorbrzezowski
vyctorbrzezowski marked this pull request as draft July 7, 2026 09:10
@clawsweeper clawsweeper Bot added rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. labels Jul 7, 2026
@github-actions github-actions Bot mentioned this pull request Jul 7, 2026
Closed
@vyctorbrzezowski vyctorbrzezowski mentioned this pull request Jul 8, 2026
Merged
@vyctorbrzezowski

vyctorbrzezowski commented Jul 8, 2026

Copy link
Copy Markdown
Member Author

Closing this draft because the remaining sidebar polish was folded into #101017.

@vyctorbrzezowski
vyctorbrzezowski deleted the brzezowski/main-sidebar-polish branch July 8, 2026 06:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

app: web-ui App: web-ui maintainer Maintainer-authored PR P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. size: M status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@vyctorbrzezowski