Skip to content

feat: Pinterest-style post discovery mockup#6130

Open
tsahimatsliah wants to merge 111 commits into
feat/anon-post-page-conversionfrom
feat/post-discovery-experience
Open

feat: Pinterest-style post discovery mockup#6130
tsahimatsliah wants to merge 111 commits into
feat/anon-post-page-conversionfrom
feat/post-discovery-experience

Conversation

@tsahimatsliah

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

Copy link
Copy Markdown
Member

Summary

A mockup of a Pinterest/Google-Images-style post discovery experience that turns the post page into a continuous exploration loop. Gated behind a new post_discovery_experience flag and exposed on a noindex mockup route at /posts/[id]/discovery.

  • PostFocusCard — borderless, elevated two-column card. Article summary + (Rich) key takeaways and a "more like this" teaser on the left; the live discussion on the right. Includes a Lean / Rich content-depth toggle.
  • PostDiscussionPanel — extracted the comment stack (counts, sort, composer, comments, share) out of EngagementRail into one reusable panel, so the reader and the focus card share a single source of truth instead of duplicating it.
  • PostDiscoveryFeed — a finite, topic-relevant rail (feedByTags on the post's tags) followed by the infinite personalized feed, filling the page with relevant content to keep exploration going.
  • PostDiscoveryLayout — shell wiring the focus card, a value-timed signup nudge for logged-out visitors, an impression log, and a back-to-top control.

Notes / follow-ups

  • Stacked on feat/anon-post-page-conversion (the post/experience/* primitives it reuses live there, not on main).
  • Discovery feed renders the research-recommended uniform grid. A grid-vs-masonry comparison and richer loop instrumentation are intentionally deferred.

Test plan

  • Enable post_discovery_experience and open /posts/<id>/discovery
  • Verify focus card layout (desktop two-column, mobile stacked) and Lean/Rich toggle
  • Verify comments/sort/composer work in the discussion panel
  • Verify the related rail + infinite discovery feed load and that cards open posts
  • Verify the existing reader modal (EngagementRail) discussion still works after the extraction

Made with Cursor

Preview domain

https://feat-post-discovery-experience.preview.app.daily.dev

@tsahimatsliah @cursoragent
feat: add Pinterest-style post discovery mockup
f6d9fbe 
Introduce a discovery experience for the post page that turns a read into a
continuous exploration loop:

- PostFocusCard: borderless two-column card (summary/key points left, live
  discussion right) with a Lean/Rich content-depth toggle.
- PostDiscussionPanel: extracted the comment stack (counts, sort, composer,
  comments, share) out of EngagementRail so the reader and the focus card
  share one source of truth instead of duplicating it.
- PostDiscoveryFeed: a finite, topic-relevant rail followed by the infinite
  personalized feed, filling the page with relevant content.
- PostDiscoveryLayout: shell with a value-timed signup nudge, impression
  logging, and a back-to-top control.
- Mockup route /posts/[id]/discovery (noindex) gated behind the new
  post_discovery_experience flag.

Co-authored-by: Cursor <cursoragent@cursor.com>
@vercel

vercel Bot commented Jun 2, 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 10, 2026 10:33am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Jun 10, 2026 10:33am

Request Review

@tsahimatsliah @cursoragent
feat: render discovery experience on the real post page behind flag
7508344 
Gate /posts/[id] on post_discovery_experience for article/video posts so the
discovery layout takes over the actual post page (not only the standalone
mockup route). Add a ?discovery=1 query override for easy preview without
flipping the flag, and suppress the duplicate auth banner in that mode.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: show post discovery preview by default
5d62e66 
Default the post discovery feature on for the mockup branch so PR preview URLs
show the planned discovery design without requiring a query param. Keep
?discovery=0 as a reviewer escape hatch for comparing against the classic post
page.

Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah and others added 2 commits June 2, 2026 12:03
@tsahimatsliah @cursoragent
fix: align discovery post layout with platform reading surface
a26f1f7 
Simplify the discovery post surface so it feels like daily.dev instead of a
new boxed composition. Render the post details directly in the left column,
keep comments in a compact reader-style right rail, widen the focus area, and
show related content as feed-grid cards instead of a horizontal/list-like rail.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: remove duplicate discovery read action
bbc7988 
Keep the discovery post action row focused on the primary read/watch CTA plus the
context menu, avoiding a second icon-only read action from PostHeaderActions.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
test: keep classic post page tests on classic layout
bdce1ca 
Pin the post discovery feature mock off in the existing PostPage suite so those
assertions continue to cover the classic post-page behavior while the mockup
branch defaults the new discovery experience on for preview.

Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah and others added 2 commits June 2, 2026 12:25
@tsahimatsliah @cursoragent
fix: force discovery feed to render as card grid
5611539 
The discovery feed was inheriting the post page/list-mode feed layout, so users
with list mode enabled still saw list cards. Scope the nested discovery feeds to
a grid-oriented feed context and disable insane mode only for this surface so it
uses the familiar card grid regardless of global feed layout preference.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: reuse production post actions in discovery layout
cd76374 
Keep the discovery left column closer to the production post page by using the
existing stats/action bar components instead of a custom detail section. Wire the
comment action to the right-side discussion rail composer and remove the custom
key-takeaways block from this surface.

Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah and others added 3 commits June 2, 2026 12:34
@tsahimatsliah @cursoragent
fix: let discovery feed use full page width
6b6ac31 
Keep the post details constrained, but render the discovery feed outside that
post-detail wrapper so it can expand like the main feed. Let it use the normal
responsive feed column counts while still forcing this nested surface onto the
grid-card layout path.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: reuse production post details in discovery layout
5e02970 
Render the discovery left column with the same production post detail stack used
above comments today: PostHero, video embed, PostInsightPanel, code snippets,
and the standard stats/action bar. Keep only the comment thread separated into
the right rail.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: use reader source strip in discovery hero
7788b4f 
Allow PostHero to receive a custom source row and render the discovery post
source with the Read Inside daily.dev SourceStrip pattern: logo, source name,
handle, and follow action.

Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah and others added 2 commits June 2, 2026 12:45
@tsahimatsliah @cursoragent
fix: render discovery feed across available page width
b97f254 
Keep the post details constrained, but let the discovery feed itself occupy the
available page width like the main feed. Move padding to the section headings
and scope nested feeds to their real feed names so responsive card columns match
home/explore behavior.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: restore production post details column structure
edb1437 
Use the production PostContainer as the discovery left column so the post details
keep the same flex, padding, and right-border behavior as today's post page.
Render only the comment thread in the right rail while preserving the source,
title, summary, tags, metadata, media, TOC, snippets, and action bar in the left
post details area.

Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah and others added 2 commits June 2, 2026 12:55
@tsahimatsliah @cursoragent
fix: polish discovery discussion sidebar card
f83318d 
Render the right-side discussion as a contained card with improved spacing,
shadow, and padding. Cap the sidebar height and make the comment thread scroll
inside the card so long discussions and replies do not stretch the post details
surface.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: render more-like-this as three-column card grid
74dcd4d 
Scope the related discovery feed to three cards per row with the same grid/gap
behavior expected from feed cards, and add the requested top spacing before the
card grid.

Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah and others added 3 commits June 2, 2026 13:07
@tsahimatsliah @cursoragent
fix: tighten discovery actions and comment rail spacing
d49c6cf 
Compact the post recommendation/action area into a single row on tablet and up,
remove the extra discussion title from the right rail, and pull the discussion
card flush to the top while keeping its card styling and internal scroll.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: place action bar at top of discussion card
41eeabe 
Replace the discussion-card header area with the standard post action bar and
remove the duplicate action bar from the left post details column. Keep the stats
line with the post details and let the right rail action bar control the comment
composer.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: remove discovery post column separator
368a480 
Remove the production column border in the discovery layout so the left post
details and right comments card do not have a hard separator between them.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @cursoragent
fix: simplify discussion card actions and sharing
d3e492d 
Allow the post action bar to render without its outer border in the discovery
rail, and make ShareBar configurable so this surface shows one row of share
options with the rest behind the expand button.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tsahimatsliah @claude
style(discovery): reduce top padding on the post page
2720713 
Trim the page wrapper's top padding (the focus card already adds its own
internal top spacing), keeping the bottom padding intact.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(discovery): muted autoplay on click + align inline ad attribution
66e275d 
- Play the YouTube video on the first click: cross-origin iframes block
  unmuted autoplay even with a parent gesture, so add mute=1 (YouTube
  shows its native unmute) to avoid a second press on a still frame.
- Inline ad: align the "Promoted by" / "Advertise here" row with the
  title, left-align both with a dot separator, and trim bottom padding.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(discovery): cap video TL;DR to four lines with inline Show more
d35dcd3 
For video posts, clamp the TL;DR summary to four lines. When it overflows,
a blue "Show more" link sits at the end of the last visible line (with a
fade into the clamped text) and expands the summary to full length on click.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(ad): vertically center inline ad strip, tighten title spacing
0275ec6 
Group the title and the "Promoted by · Advertise here" line into a column
beside the favicon so the icon and Visit button center against the text
block, and reduce the gap between the title and the line below it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 10, 2026 09:44
@tsahimatsliah @claude
fix(ad): balance inline ad padding by removing AdPixel flex gap
cf2c586 
The trailing zero-size AdPixel was a flex child, so gap-2 reserved extra
space below the content row, making the bottom padding look larger. Pull
it out of flex flow (absolute) and use equal padding on all sides.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(ad): add hover state to inline ad card
173d2fa 
Highlight the inline ad on hover (border + surface) to signal it is
clickable, matching the discussion composer trigger pattern.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(discovery): remove doubled page padding, tighten action bar gap
1643fc3 
On the post page the layout wrapper added the same horizontal padding the
focus card already applies, doubling it (huge side padding on mobile and
squeezing the content into overflow). Drop the wrapper padding (the focus
card owns it, matching the modal) and give the signup hero its own. Also
reduce the action bar's inter-group gap so its buttons fit on narrow widths.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(discovery): match production mobile side padding on focus card
8688f5c 
The focus card used px-4 (16px) on mobile vs production post content's
px-2 (8px). Halve the small-resolution horizontal padding to px-2 so the
page/modal align with the rest of the app; keep the larger breakpoints.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 10, 2026 10:50
@tsahimatsliah @claude
fix(discovery): match production reader side padding (px-4) on mobile
83c4bcf 
Restore px-4 mobile padding to align with the production post-page reader
(PostExperienceLayout/EngagementRail/ReaderFallback all use
px-4 tablet:px-6 laptop:px-8). The earlier "huge padding" was the layout
doubling the card padding, already removed; px-2 overcorrected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(ad): soften inline ad hover state
68b1d0e 
Drop the border-brightening on hover so the border stays subtle; keep a
gentle background fill as the hover affordance instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(discovery): unify Read post button + fix mobile title/image layout
1a8bc21 
- Use one Read post button for every post type: icon + label via the
  shared helpers, Primary variant on all resolutions (keeps the
  background on mobile). Previously shared posts used an icon-less button
  while other types went through PostHeaderActions, which dropped the
  background to Tertiary on mobile.
- Stop the title being squeezed on mobile: smaller title font
  (typo-title2 -> typo-large-title from tablet) and a smaller cover
  thumbnail (w-20 -> w-40 from tablet).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(discovery): square cover image, stacked below title on mobile
7b15877 
Replace the small wide thumbnail with a square cover (ratio 1:1). On
mobile the title spans full width with the square image stacked below
(size-32); on tablet+ the square sits beside the title (size-40). Fixes
the cramped title and gives the image real presence on both layouts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(discovery): square cover only below laptop, wide ratio on desktop
d711237 
Scope the square crop to mobile/tablet via responsive aspect classes
(aspect-square -> laptop:aspect-[25/13], the original 52% ratio), since
LazyImage's ratio prop is inline padding and can't respond to breakpoints.
Desktop keeps the previous wide thumbnail beside the title.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(discovery): morphing engagement bar (Liquid Glass-style)
25a1a81 
Redesign the focus-card action bar to concentrate-then-expand, inspired by
the iOS 26 Liquid Glass toolbar:

- Default (collapsed): show only the upvote (always, so the bar reads as
  actionable) plus any action that has a metric (comment/award when their
  count > 0). Everything else is hidden.
- On hover/focus of the bar it morphs open to the full action set; the
  upvote stays anchored while siblings grow in around it. Touch devices,
  which have no hover, show everything by default.
- The reveal is CSS-driven (grid 0fr->1fr width + opacity morph, the same
  trick as Section.tsx) so there is no hover re-render and no flicker.
- Frosted glass surface (translucent bg + backdrop blur).
- Fix the pin-time layout shift: keep the top border always present and
  toggle its color instead of its presence, so height never changes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(discovery): mobile header — read button below title, fewer squads
e9a54d2 
- Move the Read post / Watch video button below the title on mobile (the
  header row was too tight beside the author + Follow); keep it inline next
  to Follow from tablet up. Follow button stays in the header on all sizes.
- Share row shows only two squads on mobile (four from tablet up) so it
  doesn't overflow the row on small screens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This was referenced Jun 10, 2026
Open
Closed
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