feat(share): share DevCard alongside download

[tsahimatsliah]

Part of the sharing-visibility initiative (PR 14 / #24). Builds on PR 1 (#6343) — base branch is claude/website-sharing-visibility-be6b32, not main.

What changed

The DevCard customization step only offered Download DevCard. Sharing your card meant downloading the PNG and uploading it somewhere yourself.

• DevCardStep2.tsx now renders a share control next to the download button, using the shared ShareActions primitive from PR 1 (mobile → single tap to the native share sheet; desktop → share popover with copy link + socials).
• Separate intents, separate weights: Download stays the primary button, Share is a secondary icon trigger with aria-label="Share DevCard" and a tooltip, so it is keyboard operable and screen-reader labelled.
• The two sit in one centered row (mt-4 flex flex-row items-center justify-center gap-3) reusing the existing button size, so no new row and no layout shift on mobile or desktop.
• Share events log LogEvent.ShareDevcard (already defined, previously unused) with the provider and Origin.DevCard from PR 1.

Image or link?

Link — the profile permalink, not the PNG and not navigator.share({ files }).

The profile page already sets the DevCard as its Open Graph image (getOGImageUrl in ProfileLayout, /devcards/v2/{userId}.png?type=wide). So sharing user.permalink:

• renders the DevCard image in every preview (X, LinkedIn, Slack, WhatsApp), i.e. the visual payoff of sharing an image, and
• lands the reader on a real page instead of a bare .png, and
• carries ReferralCampaignKey.ShareProfile, matching how the profile share already works.

File sharing was considered and rejected: navigator.canShare({ files }) is mobile-only and inconsistent, it requires fetching the PNG to a blob first, and the result a recipient gets is an image with no link back to daily.dev. The link path already delivers the image via the OG preview, on every platform, with no feature detection needed.

Flag

share_devcard, default false, appended at the end of featureManagement.ts. Evaluated via useConditionalFeature with shouldEvaluate, gated on the useSharingVisibility() master kill-switch. Flag off renders the exact pre-existing markup — the download button keeps its original mx-auto mt-4 grow-0 self-start classes and no wrapper is introduced (asserted in tests).

Storybook

stories/components/DevCardShareActions.stories.tsx — Desktop, Flag off (download only), Mobile viewport. DevCardStep2 lives in webapp, which storybook does not depend on, so the story mirrors the action row rather than importing the step.

Verification

• node ./scripts/typecheck-strict-changed.js — passed
• pnpm --filter shared lint — passed
• pnpm --filter webapp lint — passed
• NODE_ENV=test pnpm --filter shared test — 294 suites / 1985 tests passed
• NODE_ENV=test pnpm --filter webapp test — 45 suites / 303 tests passed

New spec packages/webapp/__tests__/DevCardStep2.spec.tsx asserts: flag off keeps the download-only row and the original button classes; flag on renders the labelled share control; copy writes the shortened link to the clipboard and shows the toast; native share is used when available (and clipboard is not); the download action still fires the generate mutation and hands the resulting image URL to downloadUrl.

pnpm --filter storybook lint is not runnable on this repo (pre-existing).

🤖 Generated with Claude Code

Preview domain

https://claude-share-devcard.preview.app.daily.dev

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Jul 22, 2026 7:19pm
storybook	Building	Preview	Jul 22, 2026 7:19pm