feat(webapp): your brief homepage mockup#6076
Open
tsahimatsliah wants to merge 51 commits into
Open
Conversation
Adds a new /brief route as a community-first, hybrid-data daily briefing experience: hero greeting + streak, lead story with a community quote pull, inline-expandable reads, 2x2 topical digests, quick-hit one-liners, a two-state closing card, and a bridge into a real useFeed slice of the explore feed. Gated behind a new featureBriefingHome flag and surfaced via a "Your brief" sidebar entry. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: Cursor <cursoragent@cursor.com>
Big restructure based on review feedback: - Brief is no longer a separate /brief route or sidebar item; it now mounts inside MainFeedLayout above the existing home strips, gated by the briefing_home flag. Users land directly on it and scroll past into the real tags strip + feed they already know. - Cover has explicit top controls: Collapse (-> 1-line pill), Hide for today (-> reshow link), and Skip to feed anchor. All states persisted in localStorage. - Magazine 70/30 layout: image-led lead with quote pull and a stat block (stories / minutes / saved / streak / progress bar). - "Worth your attention" 3-col grid of reads. - "On your topics" chip strip with a single inline slim digest card; the full HTML body opens in a reading panel. - "Also worth a glance" 2-col one-liner list. - New ReadingPanel: right-side Drawer on desktop, full-screen on mobile, with prev/next + ESC/arrow keyboard nav. Replaces the old inline expand so the page no longer jumps. - Feature folder moved from packages/webapp to packages/shared/src/ features/briefingHome since MainFeedLayout lives in shared. Co-authored-by: Cursor <cursoragent@cursor.com>
UX overhaul based on review feedback:
- Header: replaced 3-icon control row with an explicit segmented control
("Your brief" / "For you"). Active tab shows a hint underneath. "For you"
smooth-scrolls to the feed anchor below the cover. Collapse and Dismiss
moved into a discreet overflow menu on the right. Edition number + date
shown as a small caption.
- Lead block: dropped the blurry hero image entirely (it carried no
information). Replaced with a proper editorial card — eyebrow strip
with "The big thing" tag and read time, headline, narrative deck, a
source byline ("Covered by: Hacker News, Reddit, lobste.rs +N more"),
upvotes/comments/contributor count, a real quote pull with avatar +
username + score, and a primary CTA "Read the breakdown".
- Reading panel: replaced the giant Drawer with the shared Modal
primitive (FlexibleTop + Large), matching the post-modal pattern.
Drawer-on-mobile for full-screen on small viewports. Header gets named
Previous/Next buttons (icon only on mobile) + close. Story body now
uses framed comment cards and a 2-col thread post grid; topic body
keeps the prose styling with a tinted TL;DR block.
- Cards: every section now has a consistent icon eyebrow with count
(Hot / Trending / Eye / Star) and a one-line hint on desktop. Cards
surface read time, primary source name, secondary source count.
- Quick hits: thinner rows, colored bullet (greys out when read), hover
arrow, eyebrow tag.
- Closing: progress bar moved up with percentage, smaller more-balanced
action row.
Copy file rewritten with editorial labels (The big thing, Worth your
attention, On your radar, Quick hits, Read the breakdown, Read the
digest, What the community's saying, etc.) and per-item read-time
helpers.
Co-authored-by: Cursor <cursoragent@cursor.com>
…pics grid, editorial endcap
Round 3 of UX revisions:
- New BriefFloatingTabs: a floating pill at bottom-center while the
user reads the brief ("Your brief" active, "For you" secondary).
Clicking "For you" smooth-scrolls to the feed sentinel; scrolling
past it morphs the pill into a full-width top-anchored bar with
[← Back to brief | separator | ExploreChipsBar]. Chips are sourced
from the same useFeedTagsList hook as the existing strip.
- MainFeedLayout: when briefing_home is enabled on the logged-in
homepage, the original ExploreChipsBar is suppressed so it does
not duplicate the docked one above the feed.
- CoverHeader: dropped the redundant segmented tabs and the 3-dot
collapse/dismiss menu (the floating dock replaces them). The header
is now a single block: edition meta + greeting + 1-line deck. Top
gap reduced.
- CoverGrid: "Worth your attention" is no longer a 3-col card grid;
it is now a scannable numbered list (01, 02, 03 …) with source +
read time meta on the top row, big title underneath, community
quote below, and engagement counters right-aligned. Each row is
one big clickable surface.
- CoverTopics: killed the oval chip selector. All four topic digests
now render at once in a 2x2 card grid, each with a colored topic
bar, read time, headline, and 3-line TL;DR — user gets the gist of
every topic without clicking.
- CoverClosing: rebuilt from scratch as an editorial endcap. Centered
layout, horizontal rule with "END OF BRIEF" tag, large sign-off
headline + sub, progress bar only if still in progress, single
strong CTA pointing to the feed, and a colophon line ("Edition #142
· Tue, May 19 · Filed by daily.dev") at the bottom.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Replace dual floating-pill + docked-bar with a single rectangular rounded-12 sticky tab bar rendered between the brief and the feed in MainFeedLayout. Bar scrolls with content, sticks to the top once it hits the offset, and inline-expands the tags strip only when stuck. Width matches the feed column. - Trim CoverHeader to a single eyebrow + greeting line with the deck inlined; remove the secondary description block. - Flatten CoverLead: drop pull-quote, drop gradient eyebrow strip, tighter padding, single source byline + small primary CTA. - Convert CoverGrid rows to compact one-line titles + meta; drop per-row community quote to reduce visual noise. - Flatten CoverTopics: remove colored top stripe and dot, click-through cards with 2-line tldr clamp, tighter padding. - CoverQuick: drop hint line, wrap in subtle card container, tighter rows. - Rebuild CoverClosing as a single horizontal endcap row with progress, share, and primary CTA; remove the large editorial sign-off block. - Reduce section gaps from gap-7 to gap-5 and overall vertical padding for a ~20% shorter brief. Co-authored-by: Cursor <cursoragent@cursor.com>
Restore dual-state floating tabs and visualize the brief. Floating bar - Bring back the bottom-center floating bar while reading the brief and a top-docked bar with the tags strip expanded once the user reaches the feed. Both states are rectangular rounded-12 (no more oval) and use position: fixed so parent overflow doesn't break sticking. - Bottom pill: just the two tabs, elevated with shadow-3. - Docked bar: tabs + separator + full personalized tags chip strip, aligned to the feed column width (min(64rem, 100vw - 1.5rem)) and horizontally scrollable when chips overflow. - Driven by an IntersectionObserver-equivalent rAF measurement of #brief-feed-start. Brief visuals - Header trimmed to a single line: greeting + tiny meta. - Lead is now a hero card with a 16:10 cover image (uses first post image) on tablet+, "The big thing" pill over the image, title + short deck + sources/meta + primary inline CTA on the right. - Worth your attention is a 2-up image card grid (16:9 thumbs + 2-line title + source/meta), replacing the dense numbered list. - On your radar topic cards use topic-tinted backgrounds for immediate visual recognition. Co-authored-by: Cursor <cursoragent@cursor.com>
- Portal BriefFloatingTabs to document.body and use z-popup so the bar always renders above feed cards regardless of parent stacking contexts. - Clicking "For you" now immediately docks the bar (showing tabs + tags strip at full feed-column width) and clicking "Brief" undocks it. A short scroll-lock window prevents the scroll listener from fighting the click during the smooth scroll. - Rework "Worth your attention" away from the image card grid which read as more articles. New treatment is a magazine-style numbered list inside a single bordered container: large ketchup-tinted rank, bold headline, top community quote with attribution as a pull-quote, source avatar stack + meta. No thumbnails, clear contrast with the hero lead above. Section relabeled "What devs are debating" to lean into the discussion angle that is unique to the brief. Co-authored-by: Cursor <cursoragent@cursor.com>
…le morphing bar
Reset
- useReadTracker.reset is now wired through. CoverHeader shows a small
ghost Reset button when any item has been opened so the design can be
reviewed from a clean slate. Same Reset is mirrored in the new
closing block.
Layout
- BriefCover restructured: full-width header + lead hero on top, then
a 1fr | 18rem grid on laptop+. Main column hosts the stories list and
topic digests; sidebar hosts compact Quick hits, "By the numbers"
stats (stories, posts scanned, min saved, comments read), and a
"Top sources today" list.
Stories list
- Removed the red left border and the big 01/02/03/04 ranks from
"What devs are debating". Each row is now flat: bold title, optional
community quote in muted text with attribution, and a small
sources + meta row. Cleaner visual rhythm.
Closing
- Replaced the heavy "That's the brief" card with a light editorial
endcap: thin horizontal rule with a "P.S. · Brief no. X" mark,
one-line headline ("You're caught up." / "You opened X of Y."),
one-line sub with tomorrow's next-brief time, and three ghost text
actions (Open the feed, Share, Reset). Progress bar shown only when
incomplete. No card chrome.
Floating tabs
- Collapsed the dual pill+docked-bar pair into a single morphing bar
portaled to body. It animates top (viewport-bottom <-> 56px) and
width (220px tabs-only <-> min(64rem, vw-24px)) with a 500ms ease.
The tags strip is the same element's inner container animating
max-width + opacity. Click "For you" docks it; click "Brief" undocks
it; scroll past the brief-feed sentinel auto-docks it.
Co-authored-by: Cursor <cursoragent@cursor.com>
…ng main Stop shrinking the main brief column when the sidebar appears. The section container now grows to max-w-[83rem] on laptop+ while the main column keeps its previous max-w-[64rem] reading width. The sidebar (Quick hits + By the numbers + Top sources) lives in a 17rem aside positioned to the right with sticky top-20 so it stays in view as the brief is read. Below laptop the sidebar hides and the brief keeps the same single-column layout it had before. Co-authored-by: Cursor <cursoragent@cursor.com>
…oundary The bar's top is now computed per scroll frame as max(headerOffset, min(floatingBottom, sentinelTop - barHeight)). While the brief→feed sentinel is below the viewport the bar parks at the floating-bottom position. As soon as the sentinel enters the viewport the bar follows it 1:1, so it appears to sit in the gap between the brief and the feed and get pushed up by the feed as you scroll. It clamps at the header offset where it then docks; that moment is when the width animates from the tabs-only pill to the full feed-column width with the tags strip. Removes the previous scroll-lock + state-driven top transition, since the position is now driven directly by scroll. Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the conditional "you opened X of Y" framing, the open-the-feed
CTA (the feed starts right below this card, so it's redundant), and
the heavy P.S. divider. Replace with an Instagram-style completion
moment: avocado check badge, single positive headline ("You're all
caught up"), one short line summarizing what the brief delivered, a
faint "Next brief drops <tomorrow>" line, and one secondary share
button (with copy-link fallback + 'Link copied' confirmation). Reset
progress remains as a ghost text action. A muted "Below: your
personalized feed" caption hints at the handoff without competing
with the celebration.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Revert right sidebar back to single 64rem vertical column with gap-10
between sections so the cover feels less busy.
- New header: "Your briefing is ready" with stats subtitle on the left,
long date + reset on the right; remove time-of-day greeting.
- Drop uppercase tracking on section titles ("What devs are debating",
"On your radar", "Quick hits"); keep uppercase only for colored
category labels (topics, quick-hit eyebrows, lead pill).
- Rebuild Quick hits as a full-width 2-col scannable list with colored
eyebrow chips (TOOL / RELEASE / etc.), tighter meta, and hover
affordance; drop the now-unused CoverSources sidebar widget.
Co-authored-by: Cursor <cursoragent@cursor.com>
- HEADER_OFFSET 56 -> 80 so the bar sits clearly inside the brief area instead of touching the bottom edge of the global page header. - Bump BriefCover top padding pt-16 -> pt-24 to keep ~16px breathing room between the bar and the H1. Co-authored-by: Cursor <cursoragent@cursor.com>
- Chevron moves to the start (left) of the row as its own column, resting at rotate-90 (points right) when collapsed and rotate-180 (points down) when expanded, with a 300ms transform transition. - Remove the community quote display entirely. The mid-row text is now the story summary itself — line-clamp-2 when collapsed, full when expanded — so users see the TL;DR up front and read more by toggling. - Drop the separate expand-below drawer; the TLDR grows in place so the meta strip (stats / sources) naturally moves down with it. - "Read the full breakdown" button shows inline after the meta line when expanded, stopPropagation so it opens the modal without collapsing the row. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…eader Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…ts strip Co-authored-by: Cursor <cursoragent@cursor.com>
…ft on expand Co-authored-by: Cursor <cursoragent@cursor.com>
… for grid gap Co-authored-by: Cursor <cursoragent@cursor.com>
…al timer icon Co-authored-by: Cursor <cursoragent@cursor.com>
…cus states Co-authored-by: Cursor <cursoragent@cursor.com>
…ry/full link Co-authored-by: Cursor <cursoragent@cursor.com>
…tom-right Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…rows Co-authored-by: Cursor <cursoragent@cursor.com>
…ing H1 Co-authored-by: Cursor <cursoragent@cursor.com>
…tton, wider radar gaps Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…breakdown pill Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…le gap Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Mockup of a new daily-brief homepage at
/brief, gated behind abriefing_homefeature flag and surfaced via a new "Your brief" sidebar entry. Hybrid data — real user/streak/explore-feed, mocked briefing items lifted from the v10 design.Try it
briefing_homeflag in GrowthBook (already defaults to true in dev)./briefwhile logged in.Page anatomy
useAuthContext, real streak fromuseReadingStreak, read-time pill.useFeed(FEED_V2_QUERY)slice of 8 posts in a responsive grid + "Open the full feed" CTA to/my-feed.Editorial voice
All visible copy lives in
copy.ts. Direct address, declarative sentences, real numbers, "permission to leave" closer — no "Trends" / "Highlights" / "Happening now" labels. Section eyebrows read as instructions, not taxonomy.State
localStorage(briefing-home-read), strikethrough + dim on read.Validation
pnpm --filter webapp exec eslint pages/brief.tsx components/briefingHomecleannode ./scripts/typecheck-strict-changed.jspassedpnpm --filter webapp buildcompiled successfullyTest plan
/briefrenders with real name + streak in hero/my-feedMade with Cursor
Preview domain
https://feat-briefing-mockup.preview.app.daily.dev