feat(share): floating share bar for text selected in posts and comments

[tsahimatsliah]

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

What changed

Selecting text inside a post body, a comment, or a Happening Now summary raises a portaled floating bar anchored to the selection.

Ships to everyone — there is no feature flag and no experiment.

Actions

Action	Behaviour
Copy link	The post's link, or the comment's own permalink when the selection is in a comment. Mobile hands off to the native share sheet. Icon swaps to a green check for a second.
Copy text	The selection, followed by a blank line and the link, routed through getShortUrl so a copied quote carries the same referral credit as a plain copy-link. Same check animation.
Quote	Hands the selection to a comment composer as a markdown blockquote, then scrolls it into view. On a comment this opens a reply to that comment, with the quote above the @mention.
Share	The standard ShareActions popover with the full social row.

Quote is only rendered where a composer exists to receive it — hidden on briefings and Happening Now, and on a comment whose reply composer is not wired.

Where it appears

PostSelectionArea binds the bar to a surface's readable content only — title, TL;DR and body. Its wrapper is display: contents, so it adds a node for Node.contains without adding a layout box.

Surface	Component	Quote
Article · video · live room	PostContent	✅
Freeform · welcome · share · YouTube	SquadPostContent	✅
Post redesign	PostFocusCard	✅
Collection	CollectionPostContent	✅
Poll	PollPostContent	✅
Social / Twitter	SocialTwitterPostContent	✅
Presidential briefing	BriefPostContent	— no composer
Comments and replies	CommentContainer	✅
Happening Now	HighlightItem	— no composer

Page and modal resolve to the same components (CONTENT_MAP and getPostModalRenderConfig), so there is no surface where one works and the other does not.

Digest posts are excluded on purpose. A digest is a header plus an embedded feed of other posts, so a selection there would quote someone else's headline under the digest's link.

Nav, source strips, tags, metadata, action bars and the comment section are all outside the bound region — selecting a reply used to raise a bar that would quote a commenter as if they were the post author.

New files

File	Purpose
hooks/useTextSelectionShare.ts	Detects selection end inside a container, exposes the trimmed text and a viewport rect, follows it on scroll/resize (capture phase, so inner scrollers count), clears on collapse.
components/post/SelectionShareBar.tsx	The portaled bar.
components/post/PostSelectionArea.tsx	Scopes the bar to a surface's readable content.
components/share/CopyStateIcon.tsx	Copy → check swap, shared with #6369.
components/post/QuoteImageCard.tsx	The 1200×630 card the screenshot service renders.
pages/image-generator/quote/[id].tsx	ISR page marked id="screenshot_wrapper".

QuoteImageCard and its route are parked: the bar offers no quote-image action until the screenshot service serves the PNG. They stay so the follow-up is a wiring change.

Behaviour details

• Anchored position: fixed, centred over the selection, flipping below when there is under 64px above it, clamped horizontally so it never leaves the viewport.
• Clamped to visualViewport width and offsetLeft — pinch-zoom pans the visual viewport without moving the layout viewport a fixed element sits in.
• Dismisses on click-away, Escape, and selection collapse. An open share popover holds the bar open, since the popover portals out of it.
• Anchoring and the reveal animation live on separate elements: animate-composer-in animates transform with animation-fill-mode: both, which otherwise overrides the anchoring translate permanently.
• Every control is a real <button type="button"> with an aria-label; the bar is role="toolbar".

Also here

• ShareActions popover: heading removed, four fixed columns sized to content so padding is equal on all sides, short last row left-aligned. Affects the three other consumers of that popover.
• NewComment accepts a ?comment= draft on any post type, not just welcome/poll, with an optional ?commentOrigin so the logged origin stays accurate.
• The highlights list query fetches the fields postLogEvent reads, so shares from there are not hollow events.

Storybook

28 stories under Components/Share/SelectionShareBar covering placement, clamping, mobile, selection shapes, all wired surfaces, the ignored cases, and dismissal. Each fakes a selection on mount, so every state is visible without dragging a cursor.

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 29, 2026 7:23am
storybook	Building	Preview	Jul 29, 2026 7:23am

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ tsahimatsliah
❌ Tsahimatzliah
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[rebelchris]

@claude please review this, some hooks seem heavily bloated?

[rebelchris]

We'll have to monitor this doesn't make bad ux for people

[claude]

Claude finished @rebelchris's task in 6m 20s —— View job

---

Review — selection share bar

Answering the question first: useTextSelectionShare is not the bloated part. It's 152 lines of which ~40 are comments, and it does one thing. The bloat is (1) SelectionShareBar itself, a 325-line component that mixes anchoring math, viewport tracking, dismissal, logging and three action flows, and (2) far more importantly — how many copies of that whole hook stack get mounted.

---

1. One full hook stack per comment (the real cost)

CommentContainer.tsx:199 renders a SelectionShareBar for every comment on the page. Each instance mounts:

Hook	Cost per instance
useTextSelectionShare	4 always-on document listeners — mouseup, touchend, keyup, selectionchange (useTextSelectionShare.ts:117-129)
useOutsideClick	a window click listener — it attaches unconditionally and checks enabled inside the handler (useOutsideClick.ts:9-24)
useVisualViewport	a visualViewport resize listener
useGetShortUrl	×3 — directly at :99, plus twice more via useShareOrCopyLink → useCopyLink. Each creates a useQuery observer, all with queryKey: []
useRouter, useLogContext, usePostLogEvent, useCopyText, useToastNotification ×2	—

On a 150-comment thread that's ~750 document/window listeners and ~450 react-query observers, all for one bar that can only ever be visible once. The hot path is worse than the count suggests: selectionchange fires continuously while the reader drags, and every one of the N handlers calls window.getSelection(); each mouseup runs selection.toString() N times, which is O(selection length) per call.

PostSelectionArea.tsx:36 already stamps data-selection-area — currently unused. That's the shape of the fix: one watcher at the post/discussion root, resolve the owning surface by walking up from selection.anchorNode to the nearest [data-selection-area], read a data-comment-id off it for comment attribution, and render exactly one bar. That deletes the contents wrapper in CommentContainer, the per-comment hook stack, and makes the early return at SelectionShareBar.tsx:173 real (today ~10 hooks run before it).

Fix this →

2. SelectionShareBar should be split

Not a blocker, but the anchoring concern is self-contained and testable on its own: barWidth/viewportOffset state (:78-83), the measuring layout effect (:128-132), the visualViewport listener (:161-171) and the clamp/flip math (:177-188) are one unit — useSelectionAnchor({ rect, barRef }) → { left, top, flipsBelow }. What's left is a small component plus three action handlers.

---

3. Copy text will fail on Safari/iOS

SelectionShareBar.tsx:205-214 awaits getShortUrl — a GraphQL round-trip — and then calls copyText, which does navigator.clipboard.writeText (useCopy.ts:74). WebKit requires the clipboard write in the same task as the user gesture; after an awaited fetch the transient activation is gone and it rejects with NotAllowedError. useCopyText has no try/catch, so the reader gets no clipboard write, no toast, no check animation, and an unhandled rejection in the console.

The codebase already solved this — useCopyLink passes a promise to ClipboardItem precisely so the write is registered synchronously (useCopy.ts:41-46). Either reuse that pattern, or resolve the short URL when the bar opens and have the click handler be synchronous.

Fix this →

4. Quoting while logged out opens a composer that can't post

NewComment.tsx:125-154 acts on ?comment= without the auth check onCommentClick does at :157-159. The bar renders for everyone (per SelectionShareBar.spec.tsx:116), so an anonymous reader hits Quote, the composer opens with the draft, and posting fails. This path used to be a niche squad/poll deep link; the Quote button makes it a primary flow. Gate on user → showLogin({ trigger: AuthTriggers.NewComment }), and leave the query param in place so the draft survives the login round-trip.

5. viewportOffset starts stale

SelectionShareBar.tsx:80 seeds {left: 0, top: 0} and only ever updates on visualViewport scroll (:161-171). If the reader pinch-zoomed and panned before selecting — the common order on mobile — the first paint clamps against the wrong origin and both the clamp and the flip decision are off until they pan again. Read visualViewport.offsetLeft/offsetTop in the same layout effect that measures the width.

6. Nothing caps the selection length

The full selection goes into the URL at :237-248. A reader who selects a long passage gets a multi-KB URL and history entry (and the copied text and the parked quote card have the same unbounded input — the card line-clamp-6s it visually but still carries it). A MAX_QUOTE_LENGTH truncation at the source would be cheap.

7. as unknown as Post

HighlightItem.tsx:92-95 double-casts a deliberately partial highlight post. It's runtime-safe today — every field postLogEvent reads is optional-chained — but the cast means the day someone adds a required read there, highlights break silently. Type SelectionShareBar's prop as the fields it actually uses (Pick<Post, 'id' | 'title' | 'commentsPermalink' | 'permalink' | ...>) and the cast disappears along with the risk.

8. Dead code in a 3k-line PR

QuoteImageCard.tsx (149), pages/image-generator/quote/[id].tsx (109), its story (77) and its spec (91) are unreachable by the description's own admission ("parked… the bar offers no quote-image action"). CLAUDE.md is explicit: "Delete dead code — Remove unused components, functions, exports, and files. Don't leave code 'for later'." The route isn't inert either — it's a live public ISR page that reflects ?text= and fires a GraphQL request per uncached id. 426 lines that reviewers have to reason about for a feature that isn't shipping; better as the first commit of the follow-up PR.

9. Description doesn't match the bound region

Nav, source strips, tags, metadata, action bars and the comment section are all outside the bound region

PostContent.tsx:163-166 puts PostSourceInfo inside PostSelectionArea, and PostFocusCard.tsx:473-494 puts PostMetadata (domain link, read time) inside it. Selecting "5 min read" or the source name raises the bar. Either move them out of the wrapper or correct the claim — right now a reviewer trusting the table won't check.

---

Nits

• MIN_SELECTION_LENGTH = 2 (useTextSelectionShare.ts:25-27) — the comment says it filters "single-word accidental selections (double-clicking a link, tapping a word)", but 2 is characters: every double-clicked word passes. Fix one or the other.
• keyup on document (:119) runs readSelection — including getSelection().toString() — on every keystroke anywhere on the page, e.g. while typing in the composer the bar just opened. Gate on shiftKey/arrow keys.
• isInsideContainer (:29-38) is a null guard around one contains call; inline it at both call sites.
• SelectionShareBar.tsx:88 dereferences post.commentsPermalink while CommentContainer.tsx:168 guards post?.source. CommentMarkdownInputProps types post as required, so the guard is the wrong one — but pick a side.
• buildCommentQuote (:51-55) is a string util exported from a component file; lib/strings.ts per CLAUDE.md.
• ShareActions: onOpenChange only fires on the laptop branch — the mobile trigger at :110-120 never calls setOpen. Fine for this consumer (the bar only shows the popover on laptop) but worth a line saying so.
• data-selection-area (PostSelectionArea.tsx:36) is written but never read. Use it (see §1) or drop it.
• The width measurement lands in useLayoutEffect after the first paint (:128-132), so a bar that needs horizontal clamping can visibly jump one frame. visibility: hidden until measured, or measuring in a ref callback, avoids it.

What's good

The scoping decision is the right one and well argued — binding to the surface shell would have attributed replies to the post author, and display: contents is a genuinely neat way to get a Node.contains anchor without touching layout. Separating the anchoring element from the animated one because animation-fill-mode: both would pin the transform is the kind of thing that gets rediscovered in a bug report three months later; good that it's a comment. Comment-vs-post attribution is threaded consistently through the link, the campaign key, the log event and the quote target, and the spec covers exactly that (:210-264). Storybook faking the selection on mount rather than via play makes the states actually reviewable.

Not verified

node_modules isn't installed on this runner and I can't run pnpm install, so I did not run pnpm --filter shared test, pnpm --filter webapp test, lint, or typecheck-strict-changed.js. Findings above are from reading the code.
· claude/share-text-selection

[capJavert]

Code review complete. Blocking issues remain in the current diff:

1. CommentContainer mounts a full SelectionShareBar for every comment. Each instance installs document/window listeners and URL-shortening query observers, so long threads scale this work with comment count. Please move selection ownership to one page/discussion-level bar and resolve the selected comment from the nearest selection-area element.
2. onCopyText awaits getShortUrl before calling navigator.clipboard.writeText. Safari/iOS requires the clipboard write to begin within the user-activation task, so this path can fail with NotAllowedError. Use the existing ClipboardItem-with-promise pattern or pre-resolve the URL.
3. The ?comment= effect opens the composer without the normal anonymous-user login gate, so logged-out users can enter a quote flow they cannot submit.

The branch has no merge conflict, but GitHub currently marks it unstable because the CLA check is unresolved.

[tsahimatsliah]

Thanks both — the per-comment hook stack was the right thing to lead with, and the Safari clipboard one would have shipped broken. All three blocking items are fixed in a8951ed, plus most of the rest.

Blocking

1. One watcher per page, not one per comment. SelectionShareProvider now owns a single useTextSelectionShare and renders the one bar. Regions register (element, getTarget) and the hook resolves the innermost registered ancestor of the selection, so a comment nested inside a post attributes to the comment. Registration is the entire per-region cost — no listeners, no query observers.

useTextSelectionShare takes a resolveArea callback instead of a containerRef, and resolves the region before calling selection.toString() — you were right that it's O(selection length), and most selections on a page are outside any watched region.

Providers mount at three roots: BasePostContent (post content + its comment list), PostFocusCard, and the highlights list. data-selection-area is load-bearing now rather than decorative.

2. Safari clipboard. onCopyText no longer awaits anything. The short URL resolves through useGetShortUrl's existing query mode while the bar is open, so the click handler is synchronous and the write stays inside the gesture task. I went with pre-resolving rather than ClipboardItem because it also removed a useState/useEffect pair and the act() warnings they caused in tests.

3. Logged-out quote flow. The ?comment= effect now calls showLogin({ trigger: AuthTriggers.NewComment }) and returns, leaving the query param in place so the draft survives the login round-trip and the effect picks it up again afterwards.

Also fixed

• Split the bar — anchoring is now useSelectionAnchor(rect, barRef).
• Stale viewportOffset — the pan offset is read in the same layout effect that measures the bar, so a reader who pinch-panned before selecting is no longer clamped against a stale origin.
• First-frame jump — the bar is visibility: hidden until measured.
• Selection length — capped before it goes into the URL, via truncateForUrl in lib/strings.
• as unknown as Post — gone. SelectionSharePost types the fields the bar actually reads, which the highlights subset satisfies structurally. One documented cast remains at the postLogEvent boundary, since that signature demands a whole Post.
• Dead code — QuoteImageCard, its ISR route, story and spec are deleted (426 lines). You're right that CLAUDE.md is explicit and that the route wasn't inert. It belongs to the follow-up that ships it.
• keyup — only re-reads for keys that can move a selection, so typing in the composer no longer runs getSelection().toString() per keystroke.
• MIN_SELECTION_LENGTH — comment now says characters, which is what it counts.
• isInsideContainer — gone with the containerRef API.
• buildCommentQuote — moved to lib/strings.ts.

Two I pushed back on

§9, the description. You're right that it was wrong, and I've corrected the description rather than the code. PostSourceInfo and PostMetadata are inside the wrapper deliberately — the source name and read time are part of what a reader might quote as context, and excluding them would mean two separate regions per surface for little gain. Flagging it so the claim and the code agree; happy to tighten it if you'd rather.

§Nit, post?.source vs post.commentsPermalink. Left as-is. CommentMarkdownInputProps types post as required, so the optional chain in CommentContainer is the wrong one, but it's pre-existing and not this PR's to change.

Verification

node ./scripts/typecheck-strict-changed.js, eslint on shared and webapp, and jest on all three packages: shared 296 suites / 2005 tests, webapp 44 / 297, extension 6 / 43. All green.

Two notes on the suite, neither caused by this PR: PopularPage + MyFeedPage fail when run as an isolated pair and pass in the full run (test-order pollution in the feed specs), and useFeeds / FurtherReading flake occasionally under full-suite load.

@rebelchris on the focusInputById scroll — agreed, worth watching. It only fires for a draft arriving via ?comment=, which has no click behind it to move the page, and it's behavior: 'smooth' with preventScroll: true on the focus so the scroll isn't fought. If it reads as jumpy in practice the cheapest change is dropping to block: 'nearest'.

One thing still open, unrelated to this review: the base is claude/website-sharing-visibility-be6b32 (#6343), so this can't reach users until that merges or this is retargeted to main. Worth deciding, since with the flag removed #6343's sharing_visibility kill-switch has no consumers left.

[capJavert]

Re-reviewed the latest refactor. The per-comment listener/query fan-out, Safari clipboard timing, and logged-out quote flow are addressed. I found no remaining code blocker. Approved; the unresolved CLA check still blocks merge.