Skip to content

feat(snapshot): square share images for every daily.dev surface - #6544

Draft
tomeredlich wants to merge 134 commits into
dev-take-picfrom
snapshot-share-images
Draft

feat(snapshot): square share images for every daily.dev surface#6544
tomeredlich wants to merge 134 commits into
dev-take-picfrom
snapshot-share-images

Conversation

@tomeredlich

@tomeredlich tomeredlich commented Aug 26, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Contributor

Stacked on #6426 — base retargets to main once that merges. The diff here is one commit.

Adds a Snapshot control that exports a surface as a branded 1080×1080 PNG, and the twenty card designs it captures. Easier to review in Storybook than in the diff: Features/Snapshot → Share images (every image), Spec (dimensions and content contract), Edge cases (how each card degrades).

Changes

  • Capture builds on feat: add captureShareImage util for element-to-OG-image capture #6426's util: each card is a real React component rendered off-screen, rasterized by snapdom, composed onto one canvas. The background gradient is seeded from the subject's id, so a post or profile always produces the same image.
  • Twenty cards across the sharing-initiative surfaces — post, highlighted text, Happening Now, leaderboard rank, watercooler, hot take, profile, reading overview, badges, achievements, the collectible achievement slab, invite, streak, tag/source/squad, discussion, briefing, best-of, level up. Tag/source/squad share one component, as do briefing/best-of: each pair is the same object with a different label.
  • The button plays a shutter and sweeps a highlight across its face on press. Beside the bookmark on watercooler cards, on hover in leaderboard rows and achievement cards, inline elsewhere.
  • Content rules — quotes cap at 280 characters and truncate at the last word rather than being refused; headlines balance line lengths; long URLs and type names wrap inside the card; missing copy collapses instead of leaving an empty band; cards cannot outgrow the square, so a capture never clips the logo.

Not in this PR

Design review only. No data wiring — every card reads Storybook fixtures. No feature flag. No share flow: the button downloads a PNG, and onCapture is the seam for whatever replaces that. RTL is not handled yet.

Events

None.

Experiment

None.

Testing

  • shared: 365 suites / 2,579 tests. webapp: 74 / 587.
  • typecheck-strict-changed clean; eslint clean on every touched file.
  • pnpm --filter storybook build verified, and the static bundle re-checked in a browser — cards render and capture from the production build.
  • Two overflow bugs found and fixed by the edge-case page: cards could grow past the square and clip the logo, and the streak card overflowed its own card at typical values.

🤖 Generated with Claude Code

Preview domain

https://snapshot-share-images.preview.app.daily.dev

rebelchris and others added 30 commits August 6, 2026 14:00
@rebelchris
build(extension): version 3.46.6
e1e7b01
@idoshamun
feat(world): count a visit to someone else's world towards the tour (#…
ffea5ba 
…6446)
@pnvasanth
feat(cookies): style iubenda TCF banner like the in-house cookie bann…
1326260 
…er (#6445)
@idoshamun
feat(world): make the rail back button step out of a realm first (#6447)
748ee13
@idoshamun
feat(world): a lofi bed while you are riding a bird (#6449)
d0351f6
@idoshamun
fix(profile): 404 unknown profiles instead of 200 (#6448)
2339c82
@idoshamun
feat(world): level progress on the plates, and events for the loop (#…
b0f7a76 
…6450)
@idoshamun
feat(post): surface the questions a post answers to answer engines (#…
45e9d3d 
…6451)
@idoshamun
feat(post): show the answered questions FAQ to anonymous readers (#6452)
95899aa
@idoshamun
fix(seo): render prerendered content instead of an empty document (#6453
263339d 
)
@capJavert
fix: layout v2 sidebar links in extension
6c8429a
@capJavert
fix: paint prerendered content before boot (#6454)
0d273ea
@capJavert @claude
feat(feeds): A/B clustered tag-chip feed seeding (#6427)
a31451f 
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
@capJavert @claude
feat(wallet): link transaction counterparts to their profile (#6457)
70b0c31 
Co-authored-by: Claude <noreply@anthropic.com>
@capJavert @claude
fix: show gift messages in the wallet transaction row (#6458)
7acc42d 
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
@tsahimatsliah @claude
feat(ads): move the ad_only card links into an options menu on the gl…
82bb029 
…ass card (#6462)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(storybook): ad card review pages, plus two ad card fixes they su…
bff88e1 
…rfaced (#6463)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
@idoshamun
chore(giveback): close the campaign (#6464)
83cb470
@idoshamun
fix(world): one open signup per world visit, attributed to the world (#…
0ee521d 
…6465)
@idoshamun
feat(world): open a district's upvote feed when you click it (#6466)
28a0141
@idoshamun
feat(world): filter a district's upvote feed by niche id (#6467)
66c3b31
@tsahimatsliah @claude
fix(layout-v2): stop the announcement bar covering the top of the app (…
b093343 
…#6461)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(tags): add notification subscribe to the tag page (#6460)
024756e 
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
@tsahimatsliah @claude
chore(cards): remove the feed_card_glass_actions experiment (#6470)
8ce58b8 
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
@idoshamun
feat(world): render the district level-up notification (#6469)
9331f8e
@idoshamun
feat(world): its own notification toggle instead of the achievements …
c1836b1 
…one (#6472)
@idoshamun
feat(world): explain the place to somebody seeing it for the first ti…
dffb9dd 
…me (#6473)
@idoshamun
fix(typography): stop remounting on every render (#6475)
beca166
@idoshamun
feat(world): a first-visit sequence, and an explanation on phones (#6474
250b125 
)
@capJavert
feat: add agent markdown signup wall (#6471)
7636639
@tomeredlich @claude
docs(snapshot): rebuild directory pages and lists from source, drop f…
873704c 
…eed cards

No two of the four directory headers were laid out the way I had drawn
them: the tag page is a centred hero with no logo, the source page is
left-aligned with its actions on a line below the title, the squad card
is a w-80 EntityCard whose menu is hover-revealed, and the best-of
archive is a month grid with no controls and no post list at all.

Hot takes are an emoji tile, title, subtitle and an upvote counter — no
menu, so it is the only list with no share route even buried. Reading
history rows lead with 'Share post via...' and drop their vote buttons
below laptop.

Feed cards removed: they are covered on the post page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): rebuild profile, invite and the leaderboard row from …
4670a3f 
…source

- ProfileHeader is an h-36 cover with a 7.5rem rounded-16 avatar pinned
  over its bottom-left and a right-aligned action row above the name, not
  beside it. Snapshot already ships in that row; Follow/Award/... render
  only for a visitor, below the handle. The widgets all carry a snapshot
  already, and their real contents are summary cards, a tag-progress grid
  and the heatmap.
- /settings/invite is three sections with a labelled TextField, a Primary
  Copy link action button and the seven-target social row. The reward copy
  belongs to #6366's unbuilt onboarding step, not this page.
- The leaderboard row is score, rank badge, avatar, name and handle, with
  the snapshot fading in at XSmall Float.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): add the hot-takes swipe modal, where the snapshot ships
b1e5644 
I had only drawn the profile list row. The surface people actually meet a
hot take on is HotAndColdModal: an emoji tile, centred Title3, the quote
in Body-tertiary, an upvote pill and a bordered author footer, with the
three reaction buttons and 'Add your own hot take' beneath.

The snapshot already ships there, on the top card only and at Float,
beside the upvote pill — so the profile-list placement is a placement of
an existing card, not a new feature.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): lock in the hot-takes and reading-history decisions
134b717 
Each section is now Today plus the chosen option, with the alternatives
removed:

- Swipe modal: snapshot promoted from Float to labeled and filled.
- Profile list: snapshot beside the upvote at XSmall.
- Reading history: an icon-only copy link before the menu, always
  visible rather than hover-gated.

Dead 'lead' branches dropped from the list and history rows.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): drop the invite-friends suggestions
03eeb08 
Both snapshot variants removed, along with the now-unreachable snapshot
target inside InviteScreen. The section keeps its Today state as a
reference point and states the conclusion outright: no change proposed,
because an image of a referral cannot be clicked and the page already
carries the most complete share UI in the product.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): split the invite out as its own onboarding surface
2cedaa7 
The settings page is complete and unreachable: a labelled TextField, a
Primary Copy link and the seven-target row, buried three levels into
settings, long after the moment a new account is most willing to bring
someone with them. So the invite is not a payload problem, it is a
placement one — which makes it a surface of its own rather than a
suggestion attached to the feed export.

The new page draws #6366's step on the real funnel chrome:
FunnelStepCtaWrapper's glass branch, the 32rem rail, StepHeadline, three
invite slots, the glass bar CTA and step dots. Snapshot is deliberately
absent throughout — a referral image cannot be clicked.

Invite & feed export becomes Copy my feed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): move the feed export into the custom-feed settings modal
5299a3d 
Scoped to custom feeds and drawn where it belongs: FeedSettingsGeneralSection
already gates feed name, the emoji picker, the default-feed toggle and
delete behind isCustomFeed, so an export is a property of a feed you
built rather than a control on the feed header. The 'Share this feed'
block sits between the default toggle and Happening Now placement.

Replaces the invented feed-header mock with the real modal: seven tabs,
Cancel and a disabled Save, and every General block in its shipped order.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
tomeredlich and others added 4 commits September 2, 2026 09:28
@tomeredlich @claude
fix(snapshot): stop the feed-settings buttons stretching the column
7c53ca3 
Pick emoji and the snapshot control were filling the panel width because
the block is a flex column. Both now size themselves, matching Make
default and Delete feed at w-40. 'Choose an icon' also has no description
in production, so the empty line is gone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): share the feed itself instead of a snapshot of it
ac9dacd 
Reframed on the product call: a custom feed is something you built, so
the thing worth sending is the feed, not a picture of its posts. Copy
link leads, the top-20 text list becomes the fallback, and snapshot is
out entirely — which revises #6362's sharing-map row.

Adds the recipient side, which is what makes the share worth anything:
open the link, see whose feed it is and what adding it will do, get a new
feed named after the sharer. FeedSettingsCreate's
/feeds/new?entityId=&entityType= flow is the precedent — same thing with
a set instead of a single tag. Also drawn: the added state, and the feed
limit, which FeedSettingsCreate already treats as a real error.

Four blockers named, three of them not frontend.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): settle the feed-share decisions, drop the read-only path
fa6f50d 
- Copy on add, not a live subscription.
- Sign-in required: a feed lives in an account, so a session-less visitor
  gets a sign-in state and opens the link again afterwards. No logged-out
  preview, which is also why the sample posts are dimmed and not links.
- 'Just show me the posts' removed, and the feed-limit copy now names the
  only two ways out — delete a feed or upgrade.
- The remaining open question restated plainly: whether an added feed
  consumes a feed slot.

The story was titled 'Copy my feed' while its heading read 'Share my
feed', which made the two halves look like separate pages; renamed so
the sharer and recipient sections are visibly one page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): surface the feed cap as an error toast
c0359d6 
Add stays live and the failure comes back as a real toast — NotifContainer
with the Error variant's AlertIcon — naming both ways out. Nothing is
disabled up front, because we cannot know the recipient is at their cap
until they press, and a dead button explains nothing.

That also settles the last open question: an added feed uses a slot like
any other, so there is one kind of feed, one limit and one message.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Sep 2, 2026
Draft
Draft
tomeredlich and others added 2 commits September 2, 2026 11:12
@tomeredlich @claude
docs(snapshot): audit the win moments that end in a dismiss
3582f3a 
Three more celebrations already ship with no share route, drawn before
and after: TopReaderBadgeModal, which already generates an image for its
Download button and shares none of it; the ten-tier streak milestone
system in streakTiers.ts, which is far richer than the day count we had
been drawing; and ReputationPrivilegesModal.

Six more listed rather than drawn, because each needs a call on whether
the moment is worth interrupting: the achievement unlock modal, levelling
up, curating the profile showcase, being awarded, a post that did well
via analytics or a boost, and going Plus.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@tomeredlich @claude
docs(snapshot): promote awards and post analytics, drop privileges an…
435e868 
…d Plus

Being awarded and a post that did well move from the listed set into
drawn before/after frames, joining the top reader badge and the streak
tiers. Reputation privileges and going Plus removed.

The awards moment is drawn from the recipient's side — ListAwardsModal's
cores total and giver list — and analytics gets two placements, an icon
in the header and a labeled control under the stats where the numbers
have just made the case.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Sep 2, 2026
Draft
Draft
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.

7 participants

@tomeredlich @rebelchris @idoshamun @pnvasanth @capJavert @tsahimatsliah @nimrodkra