feat(snapshot): share a hot take as an image, and copy a link from reading history - #6610
Open
tomeredlich wants to merge 8 commits into
Open
feat(snapshot): share a hot take as an image, and copy a link from reading history#6610tomeredlich wants to merge 8 commits into
tomeredlich wants to merge 8 commits into
Conversation
Adds one Storybook page — Features / Snapshot / Surfaces / Hot takes & history — recording where a share control belongs on the two hot-take frames (the swipe modal, the profile list) and on reading history. Each surface is drawn at desktop, tablet and mobile, with what ships today beside the placement the page argues for. No production surface changes. The controls are inert: the page compares placement, not behaviour. SnapshotIcon comes with it because the page draws it and it is not on main yet. Mockup-to-eng-pass: 1 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Each of the three surfaces was drawn twice, before and after. A review page for a change should show the change, so the before halves go: the modal's Float snapshot, the profile list with no share route, and the history row's ⋯ menu. The placement prop that switched between them, and the menu furniture only the history row needed, go with them. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The reading-history row is a pointer back to a post, so copying its link is the share that fits it. The control sits before the ⋯ menu, icon-only because the row already drops its vote buttons below laptop, and always visible rather than hover-gated so it survives touch. CopyStateIcon confirms on the button itself: the copy glyph and a green check share one grid cell, so nothing beside them moves during the swap. Gated on showCopyLink, which only the history list passes, so the reading-history modal keeps the DOM it has. ReadingHistoryList came into the strict-typecheck guard's scope with this change, which surfaced an untyped reduce accumulator and an unguarded Date built from an optional field. Both are typed now, with no change to what runs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Puts the snapshot capture path on main so the surfaces that want a snapshot can add one without carrying the machinery themselves. captureShareImage rasterizes a DOM node through snapdom at a fixed 1200x630 and brands it. SnapshotButton is the control on top: it plays the shutter, captures, and writes the PNG to the clipboard with the link beside it as text, so a rich composer takes the image and a plain one takes the link. A browser that refuses the clipboard write gets the download instead, and a failed capture reports rather than throws. Nothing renders SnapshotButton yet. The surfaces that will are drawn in Features / Snapshot / Surfaces in Storybook. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
A hot take is a self-contained opinion with nowhere to link to, so the card is the whole payload and an image is the only share that carries it. In the swipe modal the control sits beside the upvote pill, labeled and filled, on the top card only: the cards stacked behind are rendered too, and a control on those would capture a take the reader has not reached. On the profile list it is icon-only at XSmall to match the upvote counter it sits next to, and placed before it so the count stays at the edge. Both HotTakeItem variants carry it, so engagement_bar_v2 does not change whether a hot take can be shared. Stacked on the capture path.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
tomeredlich
changed the base branch from
claude/snapshot-capture-infra
to
main
September 6, 2026 06:37
The image was a photograph of the card as it sits on screen, at 1200x630 with a logo bar bolted on. It should be the square card #6544 designs: 1080x1080, a gradient seeded from the take's id, the eyebrow, the take, the emoji as a watermark and the count read as agreement. SnapshotButton now takes that card and mounts it off-screen for as long as the button is mounted, so the capture still starts inside the press: Safari only honours a clipboard write in the task that handled it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…otdev/apps into claude/snapshot-hot-take-placements
tomeredlich
changed the title
tomeredlich
marked this pull request as ready for review
September 6, 2026 07:45
Picks up the treatment #6544 settled on since the card was copied across. The surface label rides the logo row instead of heading the copy, the take and its subtitle are set as one statement rather than split across two type styles that read as two voices, and the copy is centred. The frame grows to the card rather than holding 1:1, so the capture is measured through getSnapshotCaptureOptions instead of assuming the square: a short take gives a short image rather than one padded out with dead gradient. Carries the .snapshot-copy rule the cards have always referenced, which the first port missed — without it a long take wrapped ragged and a long unbroken word could leave the card. Co-Authored-By: Claude Opus 5 <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.
Standalone — base is
main. Carries the snapshot capture path, the hot-take placements, the reading-history copy link, and the Storybook page that specs them.What changes for the reader
Snapshot a hot take. A hot take is a self-contained opinion with nowhere to link to, so the card is the whole payload and an image is the only share that carries it. The image is the square card #6544 designs — 1080×1080, a gradient seeded from the take's id, the eyebrow, the take, the emoji as a watermark, and the count read as agreement rather than a score. It is rendered off-screen and rasterized; it is not a photograph of the row on screen.
HotAndColdModal.tsx) — beside the upvote pill, labeled and filled, on the top card only. The cards stacked behind are mounted too, so an unguarded control would offer to capture a take the reader has not reached.HotTakeItem.tsx+.v2) — icon-only atXSmallto match the upvote counter, placed before it so the count stays at the edge. Both variants carry it:engagement_bar_v2decides which renders, not whether a take can be shared.Copy a link from reading history. A history row is a pointer back to a post, so copying its link is the share that fits it. Icon-only before the ⋯ menu, always visible rather than hover-gated so it survives touch.
CopyStateIconconfirms on the button itself — the copy glyph and a green check share one grid cell, so nothing beside them moves during the swap, and it collapses to an instant swap underprefers-reduced-motion.Gated on
showCopyLink, which only the history list passes, so the reading-history modal keeps the DOM it has.The capture path
captureShareImagerasterizes through@zumer/snapdom;copyShareImageputs the PNG on the clipboard with the link beside it as text, so a rich composer takes the image and a plain one takes the link;downloadShareImageis the fallback when the clipboard refuses;shutterSoundplays once per press without ever failing the capture.SnapshotButtonmounts its card off-screen for as long as the button is mounted, so the capture starts inside the press — Safari only honours a clipboard write in the task that handled the gesture.SnapshotFrame,SnapshotContent,snapshotGradientandsnapshotTextare copied from #6544 so this PR stands alone. They overlap with that PR; whoever merges second resolves it.Storybook
Features/Snapshot/Surfaces/Hot takes & historydraws all three placements at desktop, tablet and mobile. Controls there are inert — the page compares placement, not behaviour.Testing
SnapshotButton.spec.tsx: copies and reports, falls back to download when the clipboard refuses, reports a failed capture rather than throwing, names both halves when a link is passed.HotAndColdModal.spec.tsx: one control, top card only, with a second take stacked behind.ProfileUserHotTakes.spec.tsx: one control per take, visitors included.ReadingHistory.spec.tsx: copies the right link and swaps to the copied state; absent by default.QueryClientProvider(SnapshotButtonreports throughuseToastNotification), and three text queries now skip thearia-hiddencapture card. Both handled in this pass.typecheck-strict-changedclean, shared lint clean.@zumer/snapdomonly; verified--frozen-lockfileaccepts it unchanged.Decisions
Review links
Features/Snapshot/Surfaces/Hot takes & history: https://storybook-git-claude-snapshot-hot-take-placements-dailydotdev.vercel.app/?path=/story/features-snapshot-surfaces-hot-takes-history--variationsPreview domain
https://claude-snapshot-hot-take-placeme.preview.app.daily.dev