Skip to content

feat(sidebar): add More unread floating buttons#771

Merged
wesbillman merged 2 commits into
mainfrom
sidebar-more-unread
May 28, 2026
Merged

feat(sidebar): add More unread floating buttons#771
wesbillman merged 2 commits into
mainfrom
sidebar-more-unread

Conversation

@wesbillman
Copy link
Copy Markdown
Collaborator

Summary

Adds Slack-style "More unread" floating pill buttons to the sidebar. When unread channels are scrolled out of view above or below the visible area, a directional pill appears showing the count and scrolling to the nearest off-screen unread on click.

What changed

File Change
desktop/src/features/sidebar/lib/useUnreadOverflow.ts New hook — IntersectionObserver tracks unread row visibility relative to SidebarContent scroll container; MutationObserver rebinds on collapse/expand. Returns counts + scroll-to-next callbacks.
desktop/src/features/sidebar/ui/MoreUnreadButton.tsx Extracted pill component matching existing "Jump to latest" style (rounded-full, backdrop-blur, pointer-events layering).
desktop/src/features/sidebar/ui/AppSidebar.tsx Wraps SidebarContent in a relative container, passes scrollRef, renders top/bottom pills when overflow counts > 0.

Behavior

  • Floating pill appears at top/bottom of sidebar when unread channels are scrolled out of view
  • Click scrolls to the nearest off-screen unread (smooth, centered)
  • Does NOT auto-select the channel — just scrolls it into view
  • Collapsed sections excluded from count (can't scroll to what's not in the DOM)
  • DMs included via unreadChannelIds
  • No wrapping — directional only (matches Slack)

NIT (not addressed — not worth the churn)

  • deriveCounts recomputes getRelativeTop from the element rather than caching — keeps logic simpler and avoids stale-position bugs.

Testing

  • pnpm --dir desktop typecheck
  • pnpm --dir desktop lint
  • pnpm --dir desktop test
  • Visual QA ✅

Add Slack-style floating pill buttons to the sidebar that appear when
there are unread channels above or below the visible scroll area.
Clicking scrolls to the next unread channel without selecting it.

- New useUnreadOverflow hook using IntersectionObserver + MutationObserver
  to track which unread channel rows are above/below the SidebarContent
  scroll viewport
- MoreUnreadButton component renders top/bottom pills with counts
- Wraps SidebarContent in a relative container for absolute positioning
- Matches existing Jump to latest button styling

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
@wesbillman wesbillman requested a review from a team as a code owner May 28, 2026 17:23
@wesbillman
Copy link
Copy Markdown
Collaborator Author

Screenshot 2026-05-28 at 10 17 37 AM Screenshot 2026-05-28 at 10 18 23 AM

The absolute-positioned pill with pointer-events-auto was overlapping
channel rows at the bottom of the sidebar, causing E2E test failures
(Playwright couldn't click channel-random because the pill intercepted).

Fix: render pills as flex siblings above/below SidebarContent instead of
absolute-positioned overlays. They take their natural height and the
scroll content shrinks to accommodate, so they never overlap clickable
channel rows.

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
@wesbillman wesbillman merged commit fec6a68 into main May 28, 2026
15 checks passed
@wesbillman wesbillman deleted the sidebar-more-unread branch May 28, 2026 18:05
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