feat(live): daily.dev show card

[tomeredlich]

Summary

• Adds the daily.dev show card variation: a card-shaped feed slot with a looping muted webm preview, dark overlay, centered play button, and squad/title metadata at the bottom.
• Inserted into MyFeed / Popular / Upvoted at index 3.
• List mode uses a tighter min-h-[17rem] so the card matches neighbouring post height; grid mode keeps min-h-card.

Test plan

• Visit MyFeed / Popular / Upvoted and confirm the card appears at the 4th slot.
• Verify autoplay loop with no audio, poster shows while video loads.
• Toggle list ↔ grid mode and confirm height matches neighbouring posts in both.
• Switch between light and dark themes; squad name + title remain readable on the dark video overlay.

Made with Cursor

Preview domain

https://daily-show-card.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	Apr 29, 2026 2:24pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Apr 29, 2026 2:24pm

[tomeredlich]

@claude check pr

[claude]

Claude finished @tomeredlich's task in 3m 4s —— View job

---

PR Review: feat(live): daily.dev show card

• Gather context and understand request
• Read changed files
• Review Feed.tsx integration
• Review YoutubeLiveFeedCard component
• Review mock data and utility files
• Provide comprehensive feedback

---

Summary

Solid initial implementation with a clear visual direction. A few concrete issues to address before shipping.

---

Bug: Invalid Tailwind opacity class

packages/shared/src/components/cards/common/YoutubeLiveFeedCard.tsx:71

<div className="absolute inset-0 bg-overlay-tertiary-black opacity-55" />

opacity-55 is not a valid Tailwind class in this project. The Tailwind config (packages/shared/tailwind.config.ts:93-100) only defines opacity values 0, 16, 40, 50, 64, 100. The dark overlay will silently have no opacity applied, making it invisible. Use opacity-50 or add 55 to the config if a specific value is needed. Fix this →

---

Missing feature flag

packages/shared/src/components/Feed.tsx:215-219

const showSyntaxLiveCard =
  feedName === SharedFeedPage.MyFeed ||
  feedName === SharedFeedPage.Popular ||
  feedName === SharedFeedPage.Upvoted;

This card is now shown to 100% of users on three high-traffic feeds with no GrowthBook gate. Per the CLAUDE.md and established pattern in this codebase, A/B experiments should use useConditionalFeature. Without a flag, there's no way to roll back or control exposure without a code deploy.

---

2.9MB binary asset committed to git

packages/webapp/public/assets/videos/syntax-live-preview.webm is ~2.9MB. Binary files permanently inflate the git repo history and this is a preview loop that will be loaded in every feed on the three main pages. Consider hosting the video on media.daily.dev (or a CDN) and referencing it by URL, similar to how post images and squad avatars are handled throughout the codebase.

---

Hardcoded permalink will 404

packages/shared/src/lib/syntaxLiveMockPost.ts:36

commentsPermalink: 'https://daily.dev/posts/syntax-live-mock',

This points to a non-existent post. Any user clicking the card navigates to a 404. It should point to a real post URL or, if intentionally a placeholder, use webappUrl so it at least resolves in staging/dev environments correctly.

---

Minor issues

text-raw-salt-50 bypasses semantic tokens (YoutubeLiveFeedCard.tsx:93): The codebase enforces semantic color tokens via the no-custom-color ESLint rule. For a white/light text on a dark overlay, use text-white or a semantic token like text-primary. raw-salt-50 is used in dev card and marketing CTA contexts where raw palettes are intentional, but those are edge cases.

Inline handleClick without useCallback (YoutubeLiveFeedCard.tsx:37): The handler recreates on every render. Wrap with useCallback or simplify directly in the onClick prop. Minor perf concern but consistent with component patterns elsewhere.

Development-context comment in source (YoutubeLiveFeedCard.tsx:28): The JSDoc "Option 3 design for the Syntax live YouTube experiment" describes a design iteration/A-B decision. Per CLAUDE.md, this kind of context belongs in the PR description, not the source — it will rot as iterations continue.

---

What's working well

• The CSS gradient mesh animation is clean and properly respects prefers-reduced-motion
• Correct min-h handling for list vs grid mode
• aria-hidden on decorative video/play-button elements
• preload="metadata" on the video is a good default