feat(storybook): card actions exploration — bigger feed-card buttons

[tsahimatsliah]

Changes

Storybook only — no production code. After card_imps won, Ido asked to make the feed card's engagement buttons bigger again. Making them bigger by itself looked busy, so this explores the whole system: the bar, the feed's spacing, and what other products do.

Every page uses the real production grid/list cards filled with 40 posts from the public feed (realFeed.json, fetched 2026-10-08), anonymised: every person is a synthetic name with a placeholder avatar, third-party images are media.daily.dev placeholders, impressions are synthetic; post titles, publications and squads are kept. Only the action bar is swapped, by DOM slot in Storybook — the cards, layout and spacing are production's; a red "Slot not found" badge appears if a slot ever stops matching production markup.

Storybook → Experiments / Card actions

• 1. Decide
  • Overview — findings, the shortlist, how the folder is organised.
  • Compare — the shortlist × gaps 32/24/20/16 at a chosen window width (feed, one card, or bar close-up; click to enlarge).
  • Fit check — every variant on all 40 posts plus a stress post (9.9K / 999 / 999.9K): the card width it needs vs the narrowest card each gap gives, and its card height vs today.
  • Gap sheet — today's bar at 24px vs 32px, gap by gap.
• 2. Explore — feed-gap before/after wipe at real breakpoints, variants on every card type (article, share, post, video), a variant in the feed down to tablet/phone list cards, and a lab.
• 3. Research — 15 products (Bluesky, X, LinkedIn, Reddit, Pinterest, Dribbble, Behance, YouTube, Product Hunt, dev.to, …), gutters, and target-size / hover / number-format rules with sources.
• Archive / Round 1 — the first 12 bar and spacing variants.

Shortlist: T.1 (today's bar at 32px / 20px icons), C.3 (counts left; downvote · bookmark · copy link right), E.1 (today's order, bookmark moves to the header on hover), E.2 (counts first, bookmark on hover). All keep today's card height (36px bar row; 44px tap areas).

Findings worth knowing

• The narrowest production grid card is 289px (6 columns; 292px at 3) — not the 272px fix(cards): free the impressions slot and fit the feed action bar to the min card width #6394 sized the bar for.
• Today's bar at 32px fits every real post at today's 32px gap; posts with the largest possible counts need a 24px gap (20px leaves spare).
• Proposed number rule: one decimal only under 10 (1.7K), whole above (23K, 234K), rounded down — what Bluesky and Mastodon do. Would be a change to the shared largeNumberFormat.

Events

No new tracking events.

Experiment

No experiment in this PR — it's the exploration to decide one.

🤖 Generated with Claude Code

Preview domain

https://card-engagement-buttons-bigger-d.preview.app.daily.dev

[vercel]

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

Project	Deployment	Actions	Updated
daily-webapp	Ready	Preview	Oct 11, 2026 7:32am UTC

[tsahimatsliah]

Storybook-only exploration; confirmed the diff touches nothing outside packages/storybook and adds no binaries under packages/storybook/public. One blocking finding (the committed live-feed snapshot carries real user records into a public repo) and a handful of non-blocking ones, inline. Verification: read the diff and compared the selectors and bar markup against ActionButtons.tsx / PostMenuOptions on main and against #6836; I did not run storybook or a typecheck locally (CI's typecheck_strict_changed reports green, but storybook is outside strict typecheck per AGENTS.md).

Reviewed by AI.

[tsahimatsliah]

Review follow-up — all 6 threads addressed and resolved

Blocking

• Real users in realFeed.json → anonymised: all 20 authors / user sources are synthetic with a media.daily.dev placeholder avatar, personal-site domains replaced, GitHub/Google/YouTube images swapped for daily.dev placeholders, contentHtml + videoId dropped, impressions synthetic. Titles, publications and squads kept. Commit amended, so the raw dump is not in the PR's history.

Non-blocking

• Silent slot coupling → cards now show a red "Slot not found" badge if the swap can't find its host. Rendering the real E.1/E.2 component needs feat(cards): card_save_on_hover experiment — bookmark in the card header, bigger bar #6836 on main; follow-up once it lands.
• @ts-expect-error on react-dom → @types/react-dom 18.3.1 added to storybook devDependencies; suppression removed.
• Barrel import → largeNumberFormat from lib/numberFormat; icon imports switched from the barrel to per-icon source files too.
• Archive → kept on purpose (product owner asked to keep every folder; it holds the number rule and spacing ladder); the exploration is one self-contained folder, so removal later is a single delete.
• Material link + claims → link points at the M2 responsive layout grid (the page with the 8dp / 32dp guidance); headline claims scoped to measured / source-read products.

Re-verified: all 10 stories render, no slot badges, no external avatar hosts; storybook typecheck clean.