Skip to content

feat(notifications): readability redesign + Storybook coverage#6254

Closed
tsahimatsliah wants to merge 15 commits into
mainfrom
claude/heuristic-lamarr-0182ae
Closed

feat(notifications): readability redesign + Storybook coverage#6254
tsahimatsliah wants to merge 15 commits into
mainfrom
claude/heuristic-lamarr-0182ae

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 28, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

Changes

Improves notification readability and collects every notification surface into one Storybook folder for ongoing design review.

Components (packages/shared):

  • NotificationItem — readability pass:
    • Title is regular weight with the actor name bold (scannable hierarchy instead of all-bold), sized at ~15px (typo-callout) to match X.
    • Relative time moved inline after the title (was a leading timestamp that made rows hard to read).
    • Description/meta dropped to text-text-tertiary to reduce glare.
    • Avatar, cover image, and menu top-align with the title; three-dots menu pinned to the top-right corner.
    • No reserved menu gap when a row has no menu (cover sits flush right); title no longer truncates; roomier vertical padding.
  • NotificationItemLead (new) — shared avatar + category badge / type icon, so the feed row and in-app popup render leads identically.
  • InAppNotificationItem — redesigned to match the row (icon + category badge lead, bold-name headline).
  • NotificationsBell — compact corner badge on the rail bell (the full-size bubble was blanketing the icon).
  • Category badges — Squads now shares the Followers purple (dropped the low-contrast cheese yellow); each badge gets a glyph color picked for contrast against bright vs. dark fills.

Storybook (Components/Notifications/*):

  • Overview, Bell & badge, Icons & badges, List item (all types), Full page, In-app popup, Toast (live), and an Incoming playground (bell + popup entrance animation, current vs. proposed motion).

Events

No new tracking events.

Experiment

No new experiments.

Manual Testing

Caution

Please make sure existing components are not breaking/affected by this PR

Verified via Storybook (light/dark, mobile/desktop) and strict tsc on changed files. NotificationItem / NotificationsBell are shared and used in the webapp header, notifications page, and extension companion — worth a sanity check there.

Did you test the modified components media queries?

  • MobileL (420px)
  • Laptop (1020px)

Preview domain

https://claude-heuristic-lamarr-0182ae.preview.app.daily.dev

@tsahimatsliah @claude
feat(notifications): readability redesign + Storybook coverage
f1f349d 
Improve notification readability and collect every notification surface
into a single Storybook folder for review.

Components (shared):
- NotificationItem: scannable hierarchy (regular title with bold actor
  name at ~15px to match X, tertiary low-glare description), relative time
  moved inline after the title, top-aligned avatar/cover/menu, three-dots
  menu pinned to the top-right corner, no reserved gap when a row has no
  menu, no title truncation, roomier vertical padding.
- Extract shared NotificationItemLead (avatar + category badge / type icon)
  so the feed row and in-app popup render leads identically.
- InAppNotificationItem: redesigned to match the row (icon + category badge
  lead, bold-name headline).
- NotificationsBell: compact corner badge on the rail bell instead of a
  full-size bubble that blanketed the icon.
- Category badges: Squads now shares the Followers purple (dropped the
  low-contrast cheese yellow); per-badge glyph color for contrast on both
  bright and dark fills.

Storybook (Components/Notifications/*):
- Overview, Bell & badge, Icons & badges, List item, Full page,
  In-app popup, Toast (live), Incoming playground.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 28, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jul 1, 2026 7:42am
storybook Building Building Preview Jul 1, 2026 7:42am

Request Review

@tsahimatsliah @claude
style: prettier formatting for NotificationItemLead usage
ec77a4c 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(notifications): lead row with the human actor, not the source
5e83f78 
The row led with avatars[0], but the API lists avatars in different
orders per type — squad comments/replies/posts arrive as [source, user],
so the row showed a source/squad logo instead of the person who acted
(e.g. a comment on your post showed the post's source, not the commenter).

Add getNotificationLeadAvatar: always lead with the User avatar when one
is present, falling back to the first avatar for source-only rows (new
post in a source, role changes) and the type icon for system/digest rows.
Applied to both NotificationItem and the in-app popup.

Kept in its own module so the value import of NotificationAvatarType
doesn't create a utils <-> graphql import cycle.

Also add a "Use cases" Storybook page documenting every scenario with the
avatars the API sends, the resolved lead, the badge, and the rationale.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(notifications): tighten page header→tabs spacing, match Squad tab UI
6c733b8 
- NotificationsFeed: shrink the mobile title-header padding (p-6 → px-4
  pt-4 pb-2) to close the gap above the filter tabs, and render the tab
  strip like the Squad/Explore header (min-h-14, items-center, quaternary
  border) so the tabs read consistently across the app.
- Mirror the same layout in the Storybook Full page story.

Add a "Avatar alternatives" Storybook page presenting options for the
multi-actor lead (current 2x2 grid vs overlapping stack, single avatar +
badge, single + count pill, icon-only, two-avatar overlap) so we can pick
a direction before changing the shared component.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
docs(storybook): round-2 contained multi-avatar alternatives
60f7578 
Per feedback, the lead must show several faces inside the fixed lead box
without overlapping other content. Replace the avatar-alternatives page
with contained grid refinements (circular faces, 4-face + corner badge,
+N count cell, +N corner chip), each shown at 'a few' (3) and 'many' (24),
and keep the round-1 options below for reference.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(notifications): smaller mobile tabs + denser rows, matching Squad…
a651906 
… page

- NotificationFilterBar: use XSmall tabs on mobile and Small on laptop,
  exactly like the Squads directory (isMobileLayout ? XSmall : Small).
- NotificationItem: tighter rows below laptop (min-h-14 + py-3), restoring
  min-h-16 + py-4 from laptop up.
- Mirror the responsive tab size in the Storybook Full page story.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
docs(storybook): round-3 creative multi-actor lead options
54942ec 
Replace the avatar-alternatives page with 5 fresh directions that obey two
rules — never overlap the text/layout, always show several faces:
1) liked-by face row under the title, 2) faces pill in the subtitle,
3) clipped peeking cluster (overflow-hidden so it can't spill),
4) diamond cluster, 5) count coin + peeking faces. Each shown at few (3)
and many (24).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
docs(storybook): round-4 diamond variations + circle vs square faces
e91b6ba 
Build on the diamond direction (#4): 4A triad + mark, 4B quad + center hub,
4C triad + '+N' chip, 4D loose quad. Each rendered with circular and
rounded-square faces side by side to compare the face shape.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(notifications): diamond multi-actor lead + rounded-square badges
77e8c17 
- Replace the 2x2 grid lead (>3 actors) with the chosen "4A" diamond:
  rounded-square faces at the top/left/right points and the colored
  category mark at the bottom point (a 4th face when the row has no badge).
  Stays inside the 40px lead box, so rows keep their alignment.
- Square off the category badge everywhere (rounded-full -> rounded-8) via
  the shared NotificationItemLead, so single-avatar rows and the in-app
  popup get the rounded-square badge too.
- Update the Icons story badges to match.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(notifications): robust diamond gating + valid popup title markup
6d94492 
Code-review follow-ups:
- Only render the diamond cluster when enough real avatars were sent to
  fill it (3 + badge, or 4) — otherwise fall back to the single lead. Avoids
  a lopsided cluster with empty points when numTotalAvatars > sent avatars.
- Key diamond faces with `referenceId ?? index` to avoid key collisions.
- In-app popup: render the title in a <div> (not <p>) with [&_p]:inline —
  the sanitized title can be wrapped in <p>, and <p> inside <p> is invalid
  and gets auto-closed by the browser, breaking the layout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(notifications): multi-actor lead as overlapping rounded-square s…
c98e805 
…tack

Replace the diamond cluster with the chosen direction (#61): more than
three actors now render as a tight overlap of up to three rounded-square
faces, with the category badge centered on the bottom-right corner of the
front face (rounded-square badge, matching the single-actor lead). Sized
like one avatar so the lead never grows wider and rows stay aligned; the
exact count stays in the title.

Also includes the exploration Storybook pages (Stack explorations I/II/III,
Avatar alternatives round 4, Use cases) used to arrive at this direction.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(notifications): rounded-square avatars across all rows
ba8165a 
Make every notification avatar a rounded square to match the multi-actor
stack: users render at rounded-8, and org/achievement/source avatars
switch from circles to rounded-8. SourceButton gains a `rounded` prop
(defaults to 'full', so all other callers are unchanged) since it
hard-coded a circle.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(SourceButton): guard optional source id for strict typecheck
aebbf1f 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah tsahimatsliah mentioned this pull request Jul 1, 2026
Open
2 tasks
@tsahimatsliah

tsahimatsliah commented Jul 1, 2026

Copy link
Copy Markdown
Member Author

Superseded by #6272 — the engineering-ready port on top of main. It carries all the component/webapp changes plus the final Storybook docs, and drops the design-iteration playground stories (diamond/stack explorations, incoming-motion playground) that documented abandoned directions. Closing this mock-up PR.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tsahimatsliah