Skip to content

feat: add sidebar collapse toggle for desktop#1108

Closed
sheng-di wants to merge 1 commit intonesquena:masterfrom
sheng-di:feat/sidebar-collapse
Closed

feat: add sidebar collapse toggle for desktop#1108
sheng-di wants to merge 1 commit intonesquena:masterfrom
sheng-di:feat/sidebar-collapse

Conversation

@sheng-di
Copy link
Copy Markdown
Contributor

Summary

Adds the ability to collapse/expand the left sidebar on desktop, making more room for the chat content.

Changes

  • Rail nav button: New sidebar toggle icon button in the rail navigation (above Settings), showing a sidebar icon
  • Keyboard shortcut: Ctrl+B / Cmd+B toggles sidebar visibility
  • Smooth animation: CSS transition on width, opacity, and border-color for a polished feel
  • Persistent state: Collapsed state is saved to localStorage, remembered across page reloads

Files changed

  • static/index.html — added toggle button in rail nav
  • static/style.css — collapse styles with transition animation
  • static/boot.jstoggleSidebar() function, initSidebarCollapsed(), Ctrl+B shortcut

- Add toggle button in rail nav with sidebar icon
- Ctrl+B / Cmd+B keyboard shortcut
- Smooth CSS transition (width, opacity, border-color)
- State persisted in localStorage across reloads
@nesquena nesquena added ux User experience / visual polish hold labels Apr 26, 2026
@nesquena-hermes
Copy link
Copy Markdown
Collaborator

Thanks for the contribution! A few things are needed before this can be reviewed:

1. Before/After Screenshots (required)

Per CONTRIBUTING.md:

For UI or UX changes, before/after images are required. PRs that change the interface or interaction flow without before/after images will likely be ignored, or closed in a regular maintainer sweep without review.

Please add screenshots showing the sidebar in its normal (expanded) state and the collapsed state.

2. Missing PR Description Sections

CONTRIBUTING.md specifies these sections for every PR:

  • Thinking Path — why you approached it this way
  • Why It Matters — the user problem this solves
  • Verification — what you tested and how
  • Risks / Follow-ups — edge cases, known tradeoffs, anything left open
  • Model Used — if AI helped produce this change, list the provider and model name; if not, write None — human-authored

The current description covers What Changed well, but the above sections are missing.

Once those are added, we can move forward with a full review.

@nesquena-hermes
Copy link
Copy Markdown
Collaborator

@aronprins — tagging you for UX review on this one.

This is a sidebar collapse toggle for desktop. The PR is currently on hold pending screenshots (requested above) and the missing PR description sections (Thinking Path, Why It Matters, Verification, Risks, Model Used).

Once @sheng-di adds those, your blessing on the UX approach would be great before we proceed with full review.

@sheng-di
Copy link
Copy Markdown
Contributor Author

Screenshots

Before (sidebar expanded — master branch)

Sidebar expanded

After (sidebar collapsed — this PR)

Sidebar collapsed

How it works:

  • New Toggle sidebar button added at the bottom of the rail nav (just above Settings)
  • Click to collapse/expand the left sidebar with a smooth CSS transition
  • Keyboard shortcut: Ctrl+B (Cmd+B on macOS)
  • State persists across sessions via localStorage

Repository owner deleted a comment from nesquena-hermes Apr 27, 2026
@aronprins
Copy link
Copy Markdown
Contributor

Screenshots

Before (sidebar expanded — master branch)

Sidebar expanded

After (sidebar collapsed — this PR)

Sidebar collapsed

How it works:

  • New Toggle sidebar button added at the bottom of the rail nav (just above Settings)
  • Click to collapse/expand the left sidebar with a smooth CSS transition
  • Keyboard shortcut: Ctrl+B (Cmd+B on macOS)
  • State persists across sessions via localStorage

None of your "after" screenshots work? They work but i mean what is in the screenshots looks broken?

sheng-di added a commit to sheng-di/hermes-webui that referenced this pull request Apr 27, 2026
@sheng-di
Copy link
Copy Markdown
Contributor Author

Updated Screenshots

重新截图,CSS 完整加载,两张都是干净的状态:

Before(侧边栏展开)

Sidebar expanded

After(侧边栏折叠)

Sidebar collapsed

@nesquena-hermes
Copy link
Copy Markdown
Collaborator

Hold — awaiting explicit @aronprins UX approval

Thanks for the updated screenshots, @sheng-di! The implementation looks clean.

Per our UX review process: @aronprins quoted the screenshots but hasn't posted an explicit approval comment yet. @aronprins — please post an "LGTM" or "Approved" comment here when you're happy with the sidebar collapse UX. We'll move to technical review immediately after.

The screenshots showing the collapsed/expanded states look good — just need the explicit sign-off to proceed.

@aronprins
Copy link
Copy Markdown
Contributor

@nesquena what do you think? I personally think its not needed.

@nesquena-hermes
Copy link
Copy Markdown
Collaborator

Hold — UX feedback is negative; feature unlikely to merge in current form

@sheng-di@aronprins reviewed the screenshots and commented: "I personally think it's not needed."

Since this is a UX-affecting feature (sidebar collapse toggle on desktop), we need positive UX buy-in before landing it. @aronprins's position is that the current layout doesn't need a collapse toggle.

Path forward: If you believe there's a strong user case for this, please:

  1. Share specific user feedback or a concrete use case where the sidebar collapse is needed
  2. Propose an alternative approach (e.g., draggable resize rather than collapse)

Otherwise, this PR will remain on hold. Thank you for the effort — the implementation itself is clean!

@nesquena nesquena closed this Apr 30, 2026
nesquena-hermes added a commit that referenced this pull request Apr 30, 2026
## Release v0.50.240

Batch release of 13 PRs that passed full triage + code review + test suite (3199 tests, 0 failures).

---

### Added

- **Compact tool activity mode** (`simplified_tool_calling`, default on) — groups tool calls and thinking traces into a single collapsed "Activity" disclosure card per assistant turn. Also adds a new **Calm Console** theme with earth/slate palette and serif prose. @Michaelyklam#1282
- **PDF first-page preview** — `MEDIA:` `.pdf` files render a canvas thumbnail via PDF.js CDN (4 MB cap). **HTML sandbox iframe** — `.html`/`.htm` files render inline in a sandboxed `<iframe srcdoc>` (256 KB cap). 10 i18n keys × 7 locales. @bergeouss#1280, closes #480 #482
- **Inline Excalidraw diagram preview** — `.excalidraw` files render as pure SVG (no external deps; rectangles, ellipses, diamonds, text, lines, arrows, freehand; 512 KB cap). @bergeouss#1279, closes #479
- **Inline CSV table rendering** — fenced `csv` blocks and `MEDIA:` CSV files render as scrollable HTML tables with auto-separator detection. @bergeouss#1277, closes #485
- **Inline SVG, audio, and video rendering** — SVG as `<img>`, audio as `<audio controls>`, video as `<video controls>`. @bergeouss#1276, closes #481
- **Batch session select mode** — multi-select sessions for bulk Archive/Delete/Move. 11 i18n keys × 7 locales. @bergeouss#1275, closes #568
- **Collapsible skill category headers** — click to collapse/expand without re-render; state persists across filter cycles. @bergeouss#1281
- **`providers.only_configured` setting** — opt-in flag to restrict the model picker to explicitly configured providers. @KingBoyAndGirl#1268
- **OpenCode Go model catalog** — adds Kimi K2.6, DeepSeek V4 Pro/Flash, MiMo V2.5/Pro, Qwen3.6/3.5 Plus. @nesquena-hermes#1284, closes #1269

### Fixed

- **Profile `TERMINAL_CWD` TypeError** — `_build_agent_thread_env()` helper merges env before `_set_thread_env()` call. @hi-friday#1266
- **Service worker subpath cache bypass** — regex now matches `/api/*` under any mount prefix. @Michaelyklam#1278
- **SSE client disconnect leaks** — `TimeoutError`/`OSError` treated as clean disconnects; server backlog 64, threads daemonized; session list renders before saved-session restore. @KayZz69#1267
- **i18n locale corrections** — Korean MCP strings (23), Chinese MCP strings (23), zh-Hant missing keys (41), de missing keys (229). @bergeouss#1274, closes #1273

---

### Test results

```
3199 passed, 2 skipped, 3 xpassed in 72.79s
```

### PRs on hold (not included)

#1265 (draft), #1271 (superseded by #1266), #1272 (skipped XSS tests), #1232 (partial test run), #1222 (review questions open), #1134 (live-server tests), #1132 (superseded by #1134), #1108 (negative UX review), #1084 (empty description)
@sheng-di
Copy link
Copy Markdown
Contributor Author

sheng-di commented May 3, 2026

@nesquena what do you think? I personally think its not needed.

I'll go with your idea for now, but when I accessed this site using my iPad, I found the conversation area to be quite small and inconvenient to use. If we only focus on the desktop version now, it's not really necessary since the screen is wide, but it will still be very important if we plan to expand to a mobile version later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

hold ux User experience / visual polish

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants