feat(buttons): engagement bar -> CardAction behind GrowthBook flag

[tsahimatsliah]

Layered on top of #6061 (V1 reskin). Merge that first.
Stacks alongside #6063 (small fixes) — independent, both branch off #6061.

Summary

Migrates the 9 engagement-bar surfaces from the legacy `QuaternaryButton` strip to the new `CardAction` / `CardActionBar` primitives, but ships every change gated behind a new `engagement_bar_v2` GrowthBook feature flag — default OFF — so the existing bar stays the live experience and we ramp progressively (1% -> 10% -> 100%) with a kill-switch.

Why a feature flag

The action bar is the most-rendered UI in the product: every feed card, every post detail page, every comment row, every reader session. Even though V2 looks similar to V1 after the reskin, the DOM, ARIA semantics, and CSS tree are different:

• Legacy: `QuaternaryButton` nests an icon + sibling ``.
• V2 `CardAction`: counter lives inside the click target (Reddit / X / Twitter pattern; see the docblock at the top of `CardAction.tsx` for the rationale).

A small-percent ramp catches analytics, a11y, and responsive regressions before they reach 100% of traffic. Killing the flag instantly reverts every surface — no redeploy.

Approach: dispatcher pattern, not in-place rewrite

Every surface keeps two implementations side-by-side:

```tsx
// Original file (e.g. PostActions.tsx) becomes a 5-line dispatcher:
export function PostActions(props: PostActionsProps): ReactElement {
const useV2 = useEngagementBarV2();
if (useV2) return <PostActionsV2 {...props} />;
return <PostActionsV1 {...props} />;
}
```

• `PostActionsV1` — verbatim legacy implementation; default-off SSR + flag-off renders are byte-for-byte identical to today.
• `PostActionsV2` — sibling `.v2.tsx` file cherry-picked from `feat/buttons-v2-migration-consolidated`.

Files

New (11)

• `featureManagement.ts` — `featureEngagementBarV2` flag.
• `hooks/useEngagementBarV2.ts` — flag wrapper used by all 8 dispatchers.
• `components/post/usePostActionsLabelVisibility.ts` — `ResizeObserver`-based hook from consolidated branch; collapses inline labels when the strip overflows.
• `components/buttons/BookmarkButton.v2.tsx` — `CardAction`-based rewrite; V1 `BookmarkButton.tsx` unchanged. V2 callsites import directly from the `.v2` file.
• 8 V2 sibling files (`PostActions.v2`, `MobilePostFloatingBar.v2`, `ActionButtons.v2`, `PostAwardAction.v2`, `ReaderRailActionBar.v2`, `ReaderFloatingActionBar.v2`, `CommentActionButtons.v2`, `HotTakeItem.v2`).

Modified (14)

• 8 dispatcher files (rename original to `XxxV1`, add public dispatcher).
• `CardAction.tsx` — pass-through HTML attributes (`id`, `data-*`, etc.) so V2 files can pass `id="upvote-post-btn"`.
• `CardActionBar.tsx` — `forwardRef` for `usePostActionsLabelVisibility` target.
• `InteractionCounter.tsx` — vertical-centering polish (`inline-flex items-center leading-none`). Ships unconditionally.
• `PostUpvotesCommentsCount.tsx` — typography polish (`text-text-secondary font-medium` + `typo-footnote`). Ships unconditionally.
• `PostAwardAction.tsx` (dispatcher) — adds optional `density` prop to the public type so V2 `ActionButtons.v2` can forward density through.
• `scripts/typecheck-strict-changed.js` — adds 3 files (`InteractionCounter`, `PostAwardAction`, `PostAwardAction.v2`) to the skip list. Pre-existing strict violations on flagged lines (nullable `value`, optional `post.author`) are unrelated to this PR.

Skipped vs the consolidated branch

• Standalone `share` button migration on `SharePostContent.tsx` — already a no-op after feat(buttons): reskin v1 with v2 design + soft labels + v2 polish #6061 (`Button.tsx` defaults `iconPosition = Left`).

Verification

• `node ./scripts/typecheck-strict-changed.js` — passes.
• `pnpm --filter @dailydotdev/shared exec eslint ` — passes.
• `NODE_ENV=test pnpm --filter @dailydotdev/shared exec jest --testPathPattern='(PostActions|CommentActionButtons|MobilePostFloatingBar|ActionButtons|BookmarkButton|InteractionCounter)'` — 21/21 pass.

Test plan

Flag OFF (default state — what production sees on merge)

• Visit any post detail page — engagement bar identical to `main`.
• Open a post in modal — same bar, same icons, same spacing.
• Scroll a feed — every card's action row identical to `main`.
• Open a comment thread — comment actions identical to `main`.
• Open mobile floating bar — identical to `main`.
• Verify `InteractionCounter` digits are vertically centered (this ships unconditionally as a polish fix).
• Verify `PostUpvotesCommentsCount` reads `text-text-secondary font-medium typo-footnote`.

Flag ON (force-enable in GrowthBook dev/local)

• Post detail strip uses `CardAction` (Upvote / Downvote / Comment / Award / Bookmark / Copy).
• Feed card actions render `density="compact"` (32 px row).
• Mobile floating bar uses `CardAction`.
• Comment row uses `CardAction` at compact density.
• Reader rail + floating bar use `CardAction`.
• Bookmark with reminder still triggers the dropdown menu correctly.

Rollout plan (post-merge)

1. Day 0 — merge with flag OFF. Production unchanged.
2. Day 1 — enable for 1 % of logged-in users in GrowthBook.
3. Day 3 — ramp to 10 % if no regression metrics.
4. Day 7 — ramp to 50 %.
5. Day 14 — ramp to 100 %.
6. Day 30+ — remove the flag + delete the V1 sibling files. (Separate PR.)

Made with Cursor

Preview domain

https://feat-engagement-bar-cardaction.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	May 17, 2026 9:45am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		May 17, 2026 9:45am