Skip to content

feat(desktop): unify unread pills into one shared UnreadPill component#1111

Open
wesbillman wants to merge 1 commit into
mainfrom
brain/unread-pill
Open

feat(desktop): unify unread pills into one shared UnreadPill component#1111
wesbillman wants to merge 1 commit into
mainfrom
brain/unread-pill

Conversation

@wesbillman

Copy link
Copy Markdown
Collaborator

What

Unify the unread "jump" affordances into one shared UnreadPill component, styled like the message-timeline pill (outline / primary). Previously three different treatments existed; this collapses the four pill spots into a single component so they read as one family.

The four spots (after)

Spot After
Message area — top (jump to oldest unread) msg top
Message area — bottom (jump to latest) msg bottom
Sidebar — top sidebar top
Sidebar — bottom sidebar bottom

Before → after

Two spots changed visually:

Message-area bottom was a muted gray pill:

msg bottom before

Sidebar was a solid-blue pill labeled "N more unread":

sidebar before

Changes

  • New desktop/src/shared/ui/UnreadPill.tsx — outline-primary pill (border-primary/40 bg-primary/10 text-primary, rounded-full, arrow + label), with a unreadCountLabel(count) helper for consistent "N new message(s)" pluralization.
  • MoreUnreadButton collapsed to a thin positioning wrapper around UnreadPill.
  • Both MessageTimeline pills (top + bottom) now render UnreadPill; dead ArrowUp/ArrowDown/Button imports removed.
  • Sidebar label unified from "N more unread" to "N new message(s)".
  • e2e screenshot spec (unread-pill-unify-screenshots.spec.ts) covering all four spots.

The per-row sidebar dot (one boolean indicator per channel row) is intentionally left untouched — it's a different job and out of scope.

Testing

  • typecheck, biome check: clean
  • 980 unit tests: pass
  • e2e: existing unread-pill-screenshots.spec.ts (no regression) + new unread-pill-unify-screenshots.spec.ts, all pass

The message timeline and sidebar each rolled their own unread "jump"
affordance: the timeline-top pill (outline/primary), the timeline-bottom
"jump to latest" pill (muted/gray), and the sidebar "N more unread" pills
(solid primary). Extract a single UnreadPill component styled like the
timeline-top pill and use it in all four spots — message area top/bottom
and sidebar top/bottom — so they read as one family.

Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
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