Skip to content

feat(cards): feed-card impressions on the glass bar + post action bars#6237

Open
tsahimatsliah wants to merge 29 commits into
mainfrom
claude/feed-card-impressions
Open

feat(cards): feed-card impressions on the glass bar + post action bars#6237
tsahimatsliah wants to merge 29 commits into
mainfrom
claude/feed-card-impressions

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 23, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

Changes

A standalone PR (independent of the floating-bar fix PR) that adds an impressions stat to the engagement bars and tightens the glass feed bar. It carries the glass-bar foundation as its baseline and builds the impressions feature on top.

Impressions stat (new)

  • Adds an impressions action (analytics icon + count) to the floating glass feed bar, right after the comment action.
  • Shown to everyone as a public stat, sourced from post.views (already selected by the feed fragment; now also selected in SharedPostInfo so the post detail has it, and typed on the Post model).
  • Adds the same impressions stat after comment to the post action bars the post view actually renders: classic PostActions, PostActions.v2, and the redesigned FocusCardActionBar.

Glass bar polish

  • Smaller icons (20→16px) and buttons (Small→XSmall, pill h-10→h-8) so the bar is more compact and all six actions fit a narrow feed-card width without clipping (verified down to a 264px pill, including a worst-case card with three K-counts). Padding stays equal on all four sides.

Baseline (carried from the glass-bar work)

  • Even glass-bar spacing, no count clipping/overlap, darker glass fill, equal padding.
  • Hero title shrinks to fit three lines (useFitFontSize) so the TLDR stays visible; the hook tracks its node via a callback ref so it measures even when the title mounts late.
  • Restored the standard 3-line title clamp on glass article cards.

Events

No new tracking events.

Experiment

No new experiments. The glass feed bar stays behind the existing feed_card_glass_actions flag; the post bars stay behind their existing post_redesign / engagement_bar_v2 flags.

Manual Testing

Verified the glass feed bar in the Glass Actions Grid Storybook story (flag forced on locally): impressions renders after comment, icons/buttons are smaller, and all six actions fit a 264px pill with no clipping across varied counts. The post action bars were validated by strict typecheck + lint and by mirroring the existing comment/upvote button patterns (CardAction's built-in count); they have no Storybook story and need full app context to render. Strict typecheck, ESLint, and the ArticleGrid + ArticleFeaturedWideGridCard suites pass.

Preview domain

https://claude-feed-card-impressions.preview.app.daily.dev

tsahimatsliah and others added 6 commits June 23, 2026 13:00
@tsahimatsliah @claude
fix(cards): even glass action bar spacing, no count clipping, no hero…
a0a48bd 
… overlap

The floating glass action bar had three spacing problems:

- The award action only renders when a viewer can award a post, leaving an
  empty equal-width slot on most cards and making the bar look inconsistent
  from card to card. Removed it from the glass bar entirely.
- Equal fixed-width slots with overflow-hidden clipped large counters at real
  card widths (e.g. "1.3K" rendered as "1.3", "512" as "51"). Switched the pill
  to justify-between with content-sized buttons (matching the standard action
  bar) so counts render in full, icons keep even gaps, and a long counter grows
  its own button instead of clipping or shoving a neighbour.
- On the hero card the bar floated over the content column and the old pb-12
  reserve didn't actually keep long titles/summaries out from behind it
  (overflow-hidden clips at the padding edge). Made the text column
  flex-1 min-h-0 overflow-hidden with an in-flow spacer that genuinely reserves
  the bar's footprint, so text always clips above the bar regardless of length.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah
Merge branch 'main' into claude/zen-borg-db678b
cdd2839
@tsahimatsliah @claude
fix(cards): shrink hero title to fit three lines so the TLDR stays vi…
972d9dc 
…sible

A long hero title (e.g. "Valve officially supports DIY Steam Machines with
SteamOS 3.8") wrapped to four lines at typo-title1, consuming the column and
pushing the summary off the bottom of the card behind the glass action bar.

Add useFitFontSize: a small SSR-safe hook that measures the rendered element
and steps the font size down (typo-title1 → title2 → title3) until the text
fits within a line budget — measuring rather than guessing from character
count, since the hero content column width varies with wideColSpan. The hero
title now shrinks to fit three lines (full title, no ellipsis) and only clamps
as a last resort at the smallest size, leaving room for the TLDR.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(cards): equal glass bar padding on all sides, slightly darker fill
6a09438 
- Match the pill's left/right padding to the 4px it already leaves above and
  below its buttons (px-2 → px-1), so the inner padding is equal on all sides.
- Darken the glass a few percent by compositing a low-opacity black layer over
  the bg-blur-bg token (kept inline so the shared token is untouched), for
  better contrast over bright cover images.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(cards): restore 3-line title clamp on glass article cards
9e34b03 
The glass-action-bar variant overrode the article card title to line-clamp-2,
breaking the standard feed guideline of a fixed three-line title area (ellipsis
beyond three lines, reserved height so short titles don't change card height).

min-h-cardGlass is only shorter than min-h-card because the action bar floats
over the cover image instead of taking its own row — the title's vertical
budget is unchanged — so there was no reason to drop a line. Let the glass card
fall through to the default CardTitle clamp (line-clamp-3), matching the
non-glass production card. Verified card heights stay equal across titles of
1–3 lines.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(cards): add impressions action to the feed card glass bar
6e582fa 
Adds an impressions stat to the floating glass action bar, placed right after
the comments button (upvote · comment · impressions · downvote · bookmark ·
copy link). It reuses the post-page AnalyticsIcon and shows the post's view
count, and is gated with canViewPostAnalytics so — like the post page — only
the author or a team member sees it.

- Source the count from the feed `views` field (already selected by
  FEED_POST_INFO_FRAGMENT; no extra query cost) and type it on Post.
- Drop the fixed gap and trim the counter padding so the sixth action still
  fits a narrow card; justify-between keeps the five-action (non-author) bar
  evenly spaced and unchanged.

Also hardens useFitFontSize from the prior review: it now tracks the element
with a callback ref so the measure/resize effects run even when the title
mounts late (e.g. after a feedback card is dismissed), instead of a one-shot
empty-dependency observer that never attached.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jun 24, 2026 12:52pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Jun 24, 2026 12:52pm

Request Review

@tsahimatsliah @claude
feat(cards): show impressions everywhere, shrink glass bar, add to po…
e7ef2f2 
…st bars

- Glass feed bar: shrink icons (20→16px) and buttons (Small→XSmall, pill
  h-10→h-8) so the bar is more compact and all six actions — including
  impressions — fit a narrow feed-card width without clipping.
- Impressions are now a public stat (ungated) sourced from post.views, shown
  on every card right after the comment action.
- Add the same impressions stat (analytics icon + count) after comment to the
  post action bars the post view actually renders: classic PostActions,
  PostActions.v2, and the redesigned FocusCardActionBar.
- Select `views` in SHARED_POST_INFO_FRAGMENT so the post detail has the count.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah tsahimatsliah changed the title feat(cards): impressions action on the feed card glass bar feat(cards): feed-card impressions on the glass bar + post action bars Jun 23, 2026
@tsahimatsliah @claude
style(post): shrink post action bar buttons to match the compact feed…
1709c03 
… bar

Reduce the post engagement bar buttons themselves (not just icons): CardAction
bars (PostActions.v2, FocusCardActionBar) use density="compact" (Small / 20px),
and the classic PostActions QuaternaryButtons drop to ButtonSize.Small. Bookmark,
post menu and close in the focus bar match the smaller size so the row stays
uniform. The glass feed bar stays at its XSmall size.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 24, 2026 07:42
@tsahimatsliah
Merge remote-tracking branch 'origin/main' into claude/feed-card-impr…
8393d92 
…essions

# Conflicts:
#	packages/shared/src/components/cards/article/ArticleFeaturedWideGridCard.tsx
#	packages/shared/src/components/cards/common/FeedCardGlassActions.tsx
@tsahimatsliah @claude
fix(cards): taller glass bar + always-visible impressions count
099dd5d 
- Restore the floating bar to its original h-10 height (it had been shrunk to
  h-8) while keeping the smaller XSmall buttons.
- Always render the impressions counter (even at 0) instead of hiding it when
  the count is falsy. The number was disappearing whenever post.views was 0/
  null; impressions is a public stat shown to everyone, so it now always shows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 24, 2026 09:33
@tsahimatsliah @claude
feat(cards): show post impressions with a mock fallback for review
23798e4 
The feed doesn't return real per-post impressions yet (post.views is empty), so
the impressions number rendered as 0/blank. Add getPostImpressions: use the real
post.views when present, otherwise a stable, realistic-looking number (~100K–3M)
derived from the post id so the impressions UI can be reviewed on a preview
build. Used by the glass feed card bar and all three post action bars; the count
renders next to the analytics icon exactly like the upvote/comment counters.

MOCK: the fallback is clearly marked for the engineer to drop once the API
exposes real feed impressions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
revert(post): keep post page/modal action bars at their original size
ed3b2ee 
The compact (smaller button + icon) treatment should apply to the feed card
glass bar only. Restore the post engagement bars to their original sizes:
remove density="compact" from the CardAction bars (PostActions.v2,
FocusCardActionBar), drop the ButtonSize.Small overrides from the classic
PostActions, and put the focus bar's bookmark/menu/close back to Medium. The
impressions action stays in all three bars, now at the default size.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(buttons): default QuaternaryButton label to font-medium per gui…
02d6157 
…deline

The button typography guideline is medium weight — the Button base and
CardAction already use font-medium, while the (deprecated) QuaternaryButton
hard-coded font-bold on its label. Default it to font-medium so action-bar
counts/labels match the guideline. Call sites that pass an explicit weight via
labelClassName still override it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(cards): move impressions/analytics action to the end of the bar
b3b7a2e 
Place the impressions (analytics) action last — after the copy-link/share
button — instead of right after comments, across the glass feed bar and all
three post action bars (classic, v2, focus card).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 3 commits June 24, 2026 10:37
@tsahimatsliah @claude
feat(cards): X/Twitter-style impressions number (decimal only under 10)
505bc11 
Format the impressions count like X/Twitter: a decimal is shown only while the
abbreviated value is below 10 (1.2K, 1.8M) and dropped once it reaches double
digits (12K, 137K, 45M), so the decimal point isn't displayed at every
magnitude. Applied at all resolutions.

Add an optional `format` override to InteractionCounter (and `countFormat` to
CardAction), defaulting to the existing largeNumberFormat, and pass
formatImpressions only for the impressions counter — upvotes/comments keep their
current formatting. Widen the formatter param types to number | null so the
override composes cleanly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(cards): impressions explainer popup + optical right padding
da22ebb 
- Optical alignment: a number reads tighter against an edge than an icon, so
  the glass bar now uses asymmetric padding (pl-1 pr-2.5) — the left edge holds
  the upvote icon, the right edge holds the impressions number, which needs more
  padding to look balanced (per jakub.kr "details that make interfaces feel
  better").
- Non-author popup: clicking impressions opens an X/Twitter-style "Views"
  explainer (daily.dev modal styling, X-like copy) via a new LazyModal
  (PostImpressions). usePostImpressionsModal wires it across the glass bar and
  all three post action bars; the post author/team get no popup (they own the
  stat), so the click is a no-op for them.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah
Merge branch 'main' into claude/feed-card-impressions
fafd1e9
tsahimatsliah and others added 2 commits June 24, 2026 12:14
@tsahimatsliah @claude
fix(cards): wire impressions click for owners/team → analytics, other…
bbff68d 
…s → popup

The impressions click did nothing for the post owner or daily.dev team members:
canViewPostAnalytics returns true for them, and the hook returned undefined (no
handler). It now always returns a handler — owners/team go to the post analytics
page, everyone else opens the X-style explainer popup.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(cards): add impressions to the standard action bar (list + all r…
ec94dc9 
…esolutions)

Bring the impressions action to the non-glass ActionButtons (V1 and V2) so list
cards and the standard grid/signal bars match the glass feed bar across all
resolutions: analytics icon + X/Twitter-style count (formatImpressions) placed
last after copy-link, owner/team → analytics page, everyone else → the
explainer popup (usePostImpressionsModal).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(cards): compact action bar on small screens + downvote 3rd to m…
ad8032d 
…atch glass

- On small resolutions (below laptop) the standard ActionButtons now shrink to
  the glass feed bar's size (ButtonSize.XSmall + 16px icons) for consistency;
  laptop and up keep the regular Small size.
- Reorder to match the glass bar: downvote moves to the 3rd position
  (upvote, comment, downvote, …) in both V1 and V2.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(cards): hide feed awards on tablet/mobile + consistent impression…
69e1b29 
…s counter

- Hide the award action in the feed below laptop (tablet + mobile), matching the
  glass bar which drops it entirely.
- Fix the impressions counter styling: its wrapper was missing the
  btn-tertiary-cheese class, so the number rendered in text-primary (darker)
  instead of the muted rest colour used by the upvote/comment counters. Now all
  feed stat numbers share the same colour, size and weight.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(cards): impressions number turns yellow on hover like the other s…
c5d8ec4 
…tats

The glass bar and classic post bar impressions buttons were missing the
btn-tertiary-cheese class on their wrapper, so the number kept its rest colour
on hover. Adding it wires --button-hover-color to the cheese accent, so the
impressions count turns yellow on hover just like upvote (avocado) / comment
(blueCheese). The CardAction-based bars already inherit this via their color
prop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
docs(posts): correct the views field comment (also in SharedPostInfo)
0ba1a5f 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(cards): bigger icons + smaller stat numbers on mobile/tablet fe…
7b7f34d 
…ed bar

Stop shrinking the feed action buttons below laptop — keep the full-size icons
(Small button / 20px icons) so they read as the primary affordance — and instead
shrink the stat counters to typo-caption1 on mobile/tablet. Desktop counters are
unchanged. Applied to all counters (upvote, comment, impressions) for a
consistent look.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(post): impressions stat next to comments; move it left in the st…
2be0671 
…icky bar

Article post page/modal:
- Stats row: replace the blue "Post analytics" button with an impressions stat
  styled exactly like the comment count (tertiary ClickableText), placed right
  after comments, that opens the analytics page on click. Shown when the API
  returns impressions (author/team), same gating the button had.
- Sticky focus action bar: move the impressions action from the right group to
  the left, right after the comment, so it stays next to comments when pinned.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(post): impressions live in the stats strip, not the post action bar
c220f82 
On the post page/modal the impressions belong with the other counts (upvotes,
comments, awards) in the stats strip — where the old blue "Post analytics" link
used to be — not as an action in the bar. Remove the impressions action from the
post action bars (FocusCardActionBar + classic PostActions v1/v2). The feed
action bars keep their impressions button unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): always show impressions in the stats strip via mock fallback
415f926 
The stats-strip impressions only rendered when the API returned
`analytics.impressions` (author/team-gated), so it was invisible in most
environments. Use the shared getPostImpressions helper (real `views`, else the
deterministic mock) so the impressions stat is always visible on the post
page/modal strip for review — scoped to the non-compact strip so the compact
post embed stays clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(cards): vertically center the stat count in its fixed-height box
582b6c2 
The InteractionCounter is a fixed h-5 (20px) box with top-aligned content, so
smaller type — typo-caption1 (16px line-height) on the mobile/tablet feed action
bars — sat visibly higher than the icon. Center the number within the box
(justify-center at rest, leading-5 on the rolling slices) so upvote, comment and
impressions counts line up with their icons at every resolution.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(post): prefer real impressions over the mock in the stats strip
663b3ae 
getPostImpressions now returns the real value (analytics.impressions, then
views) when present and only falls back to the deterministic mock when both are
missing — so the post page shows the real impressions count (fixes the PostPage
"shows impressions" test) while still staying visible for review when there is
no data. Drop the impressions assertion from the compact ContentEmbeds spec,
which no longer renders impressions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tsahimatsliah