feat(notifications): readability redesign#6272
Open
tsahimatsliah wants to merge 4 commits into
Open
Conversation
Improve notification readability across the feed row, the real-time in-app popup, and the rail bell, and add Storybook coverage for each surface. Components (shared): - NotificationItem: scannable hierarchy — regular title with the actor name bold at ~15px (typo-callout), relative time inline after the title, tertiary low-glare description, top-aligned avatar/cover, three-dots menu pinned to the top-right (no reserved gap when a row has no menu), no title truncation, denser rows below laptop. - Lead with the human actor, not whatever avatar the backend lists first (squad comments/posts arrive source-first) via getNotificationLeadAvatar. - More than three actors render as an overlapping stack of up to three rounded-square faces sized like one avatar, so the lead never grows wider. - Extract shared NotificationItemLead (avatar + category badge / type icon) so the feed row and the in-app popup render leads identically. - InAppNotificationItem: redesigned to match the row (lead + bold-name headline). - NotificationsBell: compact corner badge instead of a full-size bubble that blanketed the 24px rail glyph. - Rounded-square avatars everywhere; SourceButton gains an optional `rounded` prop (defaults to 'full', so all other callers are unchanged). - Category badges: Squads shares the Followers purple (dropped the low-contrast cheese yellow); each badge gets a glyph color picked for contrast. Webapp: - NotificationsFeed: tighter page header→tabs spacing, tab strip matching the Squad/Explore header. - NotificationFilterBar: XSmall tabs on mobile, Small on laptop (Squads parity). Storybook (Components/Notifications/*): - Overview, Bell & badge, Icons & badges, Full page, In-app popup, Toast (live), and Use cases documenting the avatar + badge logic per scenario. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 tasks
Review follow-ups on the readability redesign: - Extract the colored category badge (duplicated between the single-actor lead and the >3-actor stack front face) into a shared NotificationCategoryBadge; corner positioning stays per-call via className. - Drop the now-dead `group` class on the row — the options menu no longer uses group-hover after the readability pass made it always visible. - Fix stale comments (2x2 grid -> overlapping stack; the stack badge straddles the corner rather than "matching" the lead pixel-for-pixel). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Readability pass across every notification surface — the feed row, the real-time in-app popup, and the rail bell — plus Storybook coverage for each. Engineering-ready port of the design mock-up in #6254 (playground/exploration stories dropped).
Components (
packages/shared):typo-callout), relative time inline after the title, description dropped totext-text-tertiary, avatar/cover top-aligned, three-dots menu pinned top-right (no reserved gap when a row has no menu), title no longer truncates, denser rows below laptop.getNotificationLeadAvatar) instead ofavatars[0]— squad comments/posts arrive source-first, which previously showed a source logo instead of the person who acted. Falls back to the source for source-only rows.SourceButtongains an optionalroundedprop (defaults to'full', all other callers unchanged).Webapp:
Storybook (
Components/Notifications/*): Overview, Bell & badge, Icons & badges, Full page, In-app popup, Toast (live), Use cases.Events
No new tracking events.
Experiment
No new experiments.
Manual Testing
Caution
NotificationItem/NotificationsBellare shared — used in the webapp header, the notifications page, and the extension companion. Worth a sanity check there.Verified: strict
tscon changed files, ESLint (shared + webapp), and the notification Jest suites (NotificationItem,utils,Toast,NotificationsContext— 32 tests) all pass.Did you test the modified components media queries?
Preview domain
https://claude-busy-elion-c46b7f.preview.app.daily.dev