Skip to content

Polish desktop sidebar navigation#1107

Open
thomaspblock wants to merge 6 commits into
mainfrom
left-side-nav
Open

Polish desktop sidebar navigation#1107
thomaspblock wants to merge 6 commits into
mainfrom
left-side-nav

Conversation

@thomaspblock

@thomaspblock thomaspblock commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Summary

Refines the desktop left sidebar and global top chrome with several UI and interaction fixes.

  • Unread indicators: channel unread state now shows a numeric count badge instead of a plain dot; removed the counter badge on the Agents menu item.
  • Sidebar layout & blur: content scrolls cleanly under the blurred top/footer regions without the scrollbar being cut off, and the scrollbar appears instantly on hover and hides instantly on leave.
  • Elastic scroll: prevented macOS overscroll rubber-banding in both the sidebar content and the global top chrome.
  • Section controls: removed the channel section search icon, changed the Direct Messages action to a +, and the + and collapse chevron now reveal together on hover without the chevron shifting position.
  • Emoji alignment: vertically centered status and workspace emoji in the profile/workspace menu and fixed clipping.
  • Refactor: split unread-count helpers into unreadChannelCounts.ts to stay within file-size limits.

Test plan

  • Sidebar shows numeric unread badges and no Agents counter
  • Content scrolls under blur; scrollbar not cut off at top/bottom
  • No elastic overscroll in sidebar or top chrome on macOS
  • Hovering a section reveals + and chevron together, chevron stays put
  • DM section uses +; channel section search icon removed
  • Status/workspace emoji are vertically centered and not clipped

Show unread message counts in channel badges and let the sidebar footer participate in normal layout so the scroll area ends cleanly above it.
Contain sidebar and top chrome wheel gestures so macOS rubber-band scrolling does not move the app shell, while keeping the sidebar scrollbar visible only during hover.
This follow-up tightens the left sidebar and profile menu details from this branch:
- remove the channel/forum search icon from section headers so create is the only header action
- use the same plain plus icon for Direct Messages that Channels uses
- keep plus buttons hidden until the section is hovered or focused, matching the collapse arrow behavior
- make the collapse arrow and plus appear together on section hover without the arrow shifting as it fades in
- center profile/workspace emoji vertically in the profile menu and avoid clipping taller native emoji glyphs

Together with the earlier branch work, this keeps the sidebar cleaner, prevents rubber-band scrolling in the sidebar chrome, makes unread/channel controls easier to scan, and smooths out the profile menu alignment.
# Conflicts:
#	desktop/src/features/channels/useUnreadChannels.ts
#	desktop/src/features/sidebar/ui/AppSidebar.tsx
The sidebar no longer renders the browse/search icon button, so e2e tests
that opened the channel browser by clicking `browse-channels` now use the
keyboard shortcut via a shared `openChannelBrowser` helper. Drops the
obsolete button-specific test.
Update the sidebar smoke expectations after removing the Agents counter, and make the channel browser shortcut helper wait for the app shell before dispatching the shortcut.
@thomaspblock thomaspblock requested a review from a team June 18, 2026 01:53
@thomaspblock

Copy link
Copy Markdown
Collaborator Author
leftside-nav-hardening.mp4

@thomaspblock

Copy link
Copy Markdown
Collaborator Author

Hardening the left side navigation and making sure it's not that jumpy and elastic.

@thomaspblock thomaspblock marked this pull request as ready for review June 18, 2026 02:13
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