feat(share): floating share bar for text selected in a post

[tsahimatsliah]

Stacks on PR 1 (#6343) — base branch is claude/website-sharing-visibility-be6b32, not main.

What changed

Selecting text inside a post body raises a portaled floating bar anchored to the selection, with three actions:

• Copy link — deep link to the post; on mobile this hands off to the native share sheet (reuses useShareOrCopyLink, so the selection rides along as the share text)
• Copy text — the selection itself, via useCopyText (clipboard + toast)
• Generate quote image — opens /image-generator/quote/[id]?text=… in a new tab

New files

File	Purpose
packages/shared/src/hooks/useTextSelectionShare.ts	Detects selection end inside a container, exposes the trimmed text + a viewport rect, follows the selection on scroll/resize (capture phase, so inner scrollers count), clears on collapse. enabled: false attaches nothing.
packages/shared/src/components/post/SelectionShareBar.tsx	The portaled bar. Flag gate is the outer component; every hook lives in the inner one.
packages/shared/src/components/post/QuoteImageCard.tsx	The 1200×630 card the screenshot service renders.
packages/webapp/pages/image-generator/quote/[id].tsx	ISR page marked id="screenshot_wrapper", following image-generator/devcards/[userId].tsx and badges/[badgeId].tsx.

Wiring

usePostRedesign swaps the classic bodies for PostFocusCard on both the post page and the post modal, so all three render paths get the bar:

• PostContent (classic article/video)
• SquadPostContent (freeform / welcome / share / YouTube)
• PostFocusCard (redesign)

Each change is a ref on an element that already exists plus one <SelectionShareBar> — which portals, so it adds no DOM in place. PostFocusCard and the classic bodies are a ternary swap, never nested, so there is no double-render.

Behaviour details

• Anchored position: fixed, centred over the selection, flipping below it when there is no room above (< 64px from the top).
• Horizontally clamped to visualViewport width and offsetLeft, updated on the visual viewport's scroll/resize — pinch-zoom pans the visual viewport without moving the layout viewport a fixed element sits in, which is the known Android overlay trap.
• Dismisses on click-away, on Escape, and whenever the browser reports the selection collapsed. Clicks back inside the body are ignored by the outside-click handler so it never races the browser mid-drag.
• Calm reveal via the existing animate-composer-in utility, with motion-reduce:animate-none.
• Every control is a real <button type="button"> with an aria-label and a tooltip; the bar is role="toolbar".

Flag

share_text_selection, appended at the end of featureManagement.ts, default false. Gated on that AND the master useSharingVisibility() gate, both via useConditionalFeature with shouldEvaluate. Flag-off renders nothing and mounts none of the inner hooks, so no selection or viewport listeners are attached at all.

Logging

LogEvent.SharePost via usePostLogEvent, with extra: { provider, origin: Origin.TextSelection }. Additions to existing enums:

• Origin.TextSelection (log.ts, appended in the sharing-visibility section)
• ShareProvider.CopyText, ShareProvider.QuoteImage (share.ts) — the existing providers are all link targets, and neither of these is one

Backend dependency ⚠️

The screenshot service must be taught the /image-generator/quote/:id route before "Generate quote image" produces an actual PNG. The frontend renders the screenshot_wrapper page regardless, and today the button opens that page in a new tab — so the feature degrades to "here is your quote card" until the service picks up the route. The quote text is passed as a ?text= query param (capped at 280 chars) so the ISR'd shell is reused across every quote of the same post.

og:image currently points at the existing https://og.daily.dev/api/posts/:id endpoint; once the screenshot service serves quote images it can be repointed.

Storybook

• Components/Share/SelectionShareBar — Desktop, Mobile, FlippedBelow, FlagOff. Storybook aliases @growthbook/growthbook to a mock that coerces falsy flag defaults to the truthy string 'control', so flag-off is simulated by holding FeaturesReadyContext as not-ready (same approach as PR 6).
• Components/Share/QuoteImageCard — Default, LongQuote, SourceOnly.

Verification

Check	Result
node ./scripts/typecheck-strict-changed.js	✅ pass
pnpm --filter shared lint	✅ pass
pnpm --filter webapp lint	✅ pass
NODE_ENV=test pnpm --filter shared test	✅ 296 suites / 1997 tests
pnpm --filter webapp test	✅ 45 suites / 300 tests

New tests:

• SelectionShareBar.spec.tsx — copy link writes to clipboard + toast; copy text writes the selection + toast; the mobile path calls navigator.share; generate-image opens the quote URL with the encoded selection; the bar dismisses on click-away; flag-off renders nothing and never calls useTextSelectionShare (proving no listeners), including the case where only the per-surface flag is on.
• useTextSelectionShare.spec.ts — reports text + rect on selection end, ignores selections outside the container, clears on collapse, inert when disabled.
• QuoteImageGeneratorPage.spec.tsx — getStaticProps attribution + twitter:card=summary_large_image + og image, 404 on a missing post, and the page renders the #screenshot_wrapper element.

Deliberately left out

• No OG image library was added (none exists in this repo) — the quote image goes through the existing screenshot-service pattern.
• The bar does not offer the full social network row; that lives in ShareActions and would be too heavy for a selection popover.
• No new keyframes or design tokens — the reveal reuses animate-composer-in.

🤖 Generated with Claude Code

Preview domain

https://claude-share-text-selection.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 8:07pm
storybook	Building	Preview	Jul 22, 2026 8:07pm