feat(snapshot): status moments review page - #6581
Open
tomeredlich wants to merge 11 commits into
Open
Conversation
Splits the "Status moments" section out of #6544 so it can be reviewed on its own. Seven win moments that end in a dismiss — reading streak, achievements, leaderboard rank, top reader badge, streak tiers, being awarded, and post analytics — each drawn today / recommended / push. Lives at /dev/status-moments alongside the existing /dev/buttons and /dev/checkbox-radio review surfaces, so it renders in the real app shell rather than in Storybook. Gated to non-production builds and noindex. Adds the Snapshot icon the control needs. Everything on the page is inert: no data wiring, no capture, no feature flag. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The six surface docblocks walked through the JSX beneath them, and two restated copy that the page already renders in its own `note` and `verdict` props. The achievement block also described hover behaviour this page does not implement. Replaced with the one-line source reference the analytics screen already used, so each screen names the real component it redraws and nothing else. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The screens hand-rolled five parts the design system already ships: the reminder toggle, the opt-out checkbox, the achievement progress bar, the leaderboard avatars and the rank badges were raw spans with styling typed in directly. Swapped for Switch, Checkbox, ProgressBar, ProfilePicture and TopRankBadge. The rank column changes visibly and deliberately: TopRankBadge draws the gold/silver/bronze medals the real leaderboard draws, replacing a 🥇 emoji and "#2"/"#3" text. Mockup-to-eng-pass: 1 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
tomeredlich
added a commit
that referenced
this pull request
Sep 3, 2026
…o choose from The Snapshot button becomes a Share button: the icon and label are the ones people already recognise, and pressing it opens a menu that previews the designed 1080² card before offering it. The menu opens immediately with a skeleton rather than waiting on the render. Rasterizing takes a second or two, and a control that does nothing visible for that long reads as broken — so the capture is deferred a tick, letting the menu paint first, and Copy link stays usable while the card is still rendering. Seven layouts are up for review in Features/Snapshot/Menu styles, all live against the same card: rows, rows-centred, an overlay pill on the card, a compact no-preview variant, Tsahi's split button from #6369, and the two ways the image can sit in the share modal — its own section or a single tile. The `menuVariant` prop exists to serve that page and comes out with the losers. The image is one action, not a mode over the sheet's other targets. A link needs a destination, which is why there are twenty of them; an image does not, because the OS share sheet and the clipboard are the destinations, and no web share intent takes an image anyway. So the image owns its own action and the squads and external tiles keep sharing the link — which is what keeps this on one screen instead of two. Pressing it hands the PNG to the native sheet where the platform takes files, copies it to the clipboard otherwise (with a toast, since the clipboard has no UI of its own), and downloads it only as a last resort. Capture moves into `useSnapshotCapture` so the dropdown and the modal section render from one implementation. Its `isActive` gate matters twice: a feed never carries a 1080px card per item until someone asks to share, and because the modal pre-renders on open, the click handler reaches `clipboard.write` with no await in front of it — still inside the user gesture the clipboard requires. Two surfaces had no card at all, from the #6579 and #6581 reviews: - `FeedSnapshotCard` carries a shared feed's recipe — tags and source count — rather than its posts, which are a standing filter and would go stale. - `AwardSnapshotCard` names the sender. It is the only status moment that comes from someone else, and a gift with no giver reads as self-congratulation. Tsahi's `SplitShareButton` and `CopyStateIcon` come across from #6369 unchanged apart from four additive props — `onOpenChange`, `header`, `menuLayout` and a width override — so his grid is untouched when nobody passes them. `SocialShareList`, `SocialShareButton` and `SocialShareContainer` gain optional size and compact props, defaulting to today's values, so the dropdown can tighten without moving anything else in the app. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…sign The streak screens were drawn from the old popup: a 🔥 emoji with the count overlaid, a text tier pill and a hand-built day row. The milestone-rewards review (claude/milestone-rewards-storybook-764fa6, Milestone Rewards/Final review) supersedes it. Both screens now use that celebration panel — the Inferno tier artwork over an ember wash, the tier chip, a tabular day count and the week strip — with the first-party decision column under it: Cores and freezes as option rows, then No thanks. The streak popup no longer has a reminder toggle or a "never show this again" checkbox, so Switch and Checkbox are gone with them. Not brought over: the sponsored-gift half of that review (partner offers, claim sheet, gift vault) and the ember and entrance animations. This page compares control placement across eleven screens. Mockup-to-eng-pass: 2 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
tomeredlich
force-pushed
the
snapshot-status-moments
branch
from
September 3, 2026 09:11
9e99d6a to
076561b
Compare
Every moment was drawn as a triplet — the surface as it ships, the placement we want, and a louder push option — plus three moments listed without a drawing at all. That made a page about a decision read as a menu of decisions still open. Each moment now shows the placement it argues for and nothing else. The props that switched between the three states go with them, as does the rail that only existed to sit before/after pairs side by side. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The screen drew the control twice: an icon in the header and a labelled control under the stats. The header placement asks before the numbers have made the case, so it goes; the control under the stats stays. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
An icon-only Tertiary control beside the close button, matching its weight, so the moment can be captured from the header as well as from the cores row. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
tomeredlich
marked this pull request as ready for review
September 3, 2026 13:50
The page gated on isDevelopment, so the Vercel preview showed the gate message instead of the screens it exists to review. It now blocks the canonical production hosts only, matching /dev/snapshot-happening-now. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The page lived at /dev/status-moments in the webapp. #6556 removed the pages/dev review surfaces it sat next to, and #6544 shipped this same section as the Features/Snapshot/Surfaces/Status moments story, so the branch was a second, newer copy of that story served from production code. The designer's later iterations now replace the story instead: the streak screens on the milestone-rewards design, one placement per moment, the real ProgressBar, ProfilePicture and TopRankBadge, a single control on post analytics, and the header control on awards. The celebration panel reuses FlameBadge, TierName, DayStrip, EmberPanel and NoThanks from the milestone-rewards stories rather than copying their gradients, and the Inferno milestone comes from its ladder. The story gets a QueryClientProvider like its siblings, since ProfilePicture needs one outside the app shell. The page, its host gate and the webapp copy of inferno.png are deleted; Storybook already serves the same PNG from its public folder. Copy drops the em dashes and a claim about the audience's device split.
…ments
The review page is now held to one rule: no invented statistics and no
copy standing in for copy the product doesn't have.
- Streak popup: remove the invented "Day 30 unlocked" heading, the
"Nothing sponsored today" line and the made-up Cores and freeze reward
rows. Snapshot now sits under the celebration, above No thanks.
- Achievement card: use the real "Can't spend it all" achievement, its
description ("Spend 10000 Cores") and its 25 points, and drop the
invented 8/10 progress bar, which the product only shows on locked
achievements.
- Leaderboard and awards: fictional readers instead of real people, and
no invented level scores next to them.
- Top reader badge: remove the "Top 1% of readers in #typescript" line.
- Post analytics: remove the screen. It existed only to show invented
reach numbers, and its note argued from a "41k developers" claim.
The story reads only day, tier, label and headline from the milestone
ladder, so it keeps compiling whether or not the rarity and subhead
fields survive in milestone-rewards/data.ts.
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
2 participants
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.
Updates the Features/Snapshot/Surfaces/Status moments story with the latest iteration of the Status moments review. Storybook only: no production code changes.
Background
This started as a
/dev/status-momentspage in the webapp, split out of #6544. Since then #6556 removed thepages/devreview surfaces, and #6544 shipped the same section as a Storybook story. After merging main, the branch was a second, newer copy of that story living in production code, so the page is gone and its later iterations now live in the existing story instead.What changes in the story
FlameBadge,TierName,DayStrip,EmberPanelandNoThanksfrom the milestone-rewards stories, and the Inferno milestone from its ladder, instead of copying their gradients.ProfilePictureandTopRankBadge, on fictional readers.No fake stats or placeholder copy
The page shows no invented numbers about daily.dev's audience or reach, and no copy standing in for copy the product doesn't have.
rarity,subheador partner offers frommilestone-rewards/data.ts, so it keeps compiling if those fields are removed there.What to look at
Features/Snapshot/Surfaces/Status moments.Removed from the branch
packages/webapp/pages/dev/status-moments.tsxand its host gate.pages/devreview pages don't ship.packages/webapp/public/streak-tiers/inferno.png. Storybook already serves the identical file frompackages/storybook/public/streak-tiers/.shared.Events
None.
Experiment
None.
Testing
tsc: no errors in the story ormilestone-rewards(the package has an unrelated backlog, and Storybook has no CI or strict typecheck).node ./scripts/typecheck-strict-changed.js origin/main: passes.shared,webapporextensioncode changes, so no jest or webapptscrun was needed.Preview domain
Not published for review. Run Storybook locally instead.