feat(webapp): your brief homepage mockup#6076
Open
tsahimatsliah wants to merge 96 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>
Replace the plain footnote date on the brief header with a small calendar card: an accent-colored top stripe with the abbreviated month, a bold day number, and the weekday underneath. Sits at the top right alongside the Today's read title, with the Reset progress button tucked below it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wrap chip labels with Typography Footnote bold so the text inside the tag chips matches the "Your brief" / "Your feed" labels in the BriefSwitcher (both desktop ExploreChipsBar and mobile UnifiedMobileFeedNav). Icon-only chips (the New feed plus) skip the Typography wrap. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Stack the title and intro/stats subtitle in a single vertical column and pair it horizontally with the calendar widget + reset button column. Use items-center on the outer flex so the widget sits at the visual midline of the title block, removing the awkward gap between title and subtitle. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switch the Picks and Headlines row buttons from items-start to items-center so the right-side chevron sits at the vertical midline of the entire row instead of being pinned to the top. Drop the mt-5 self-start hack on the Headlines chevron — items-center handles the alignment correctly for both collapsed and expanded states. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Resolve UnifiedMobileFeedNav strip padding: keep our flush-left no-pl variant and adopt the increased py-4 vertical spacing from main. Also shrink the mobile chip strip per design feedback: - Mobile chip Buttons drop from Medium to Small. - Add a compact prop to BriefSwitcher (tighter padding, rounded-10, gap-0.5) and use it inside UnifiedMobileFeedNav so the Brief/Feed toggle matches the smaller mobile chip height. The desktop ExploreChipsBar keeps the default Medium switcher. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pass scroll={false} on the chip-strip Links in both ExploreChipsBar
and UnifiedMobileFeedNav so clicking a tag swaps the active chip and
loads the tagged feed without jumping the page back to the top — the
strip and surrounding context stay in view, matching the desktop
tag-select feel.
Bump BriefCover's mobile horizontal padding from px-3 to px-4 so the
Today's read title + stats stop kissing the left screen edge on
phones. Tablet now also collapses to a single px-4 value.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Use a negative horizontal margin on the list ol elements so they extend to both screen edges on mobile, breaking out of BriefCover's px-4. The bordered card chrome (border + rounded-12) is gated to tablet+ so phones get edge-to-edge rows like feed cards. Row content padding is now px-4 on mobile (px-5 on tablet+), so inside titles and chevrons sit at the same 16px left/right offset as the brief header and the rest of the mobile content area. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bump UnifiedMobileFeedNav from pr-3 (flush left) to pl-2 pr-3 so the first chip has a touch of breathing room from the screen edge on mobile. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Make tag chips and the Brief/Feed switcher share the same active and inactive treatment: inactive labels render in TypographyColor.Secondary (was inheriting tertiary), active labels render in TypographyColor.Primary on top of the surface-float background. Update the BriefSwitcher icon and link colors to match. Pump the CoverGrid expanded-row outer column from gap-2 to gap-3 so the spacing between the title and TL;DR matches the spacing between the TL;DR and the Read full breakdown action row. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Restructure Picks and Headlines rows so the button is a single flex-col with the title row (title + stats + sources + chevron) as the first child and the expansion panel (TLDR + actions) as a sibling underneath. The title and chevron now stay locked at the top of the row regardless of expansion state, so clicking a row no longer shifts the title or chevron downward. Lock vertical padding to py-4 in both states; the gap-3 column on the button keeps the inter-section spacing consistent with the in-panel gap between the TLDR and the action row. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Keep the Subtle border on chips in both states and apply !bg-surface-active when active so the selected tag (and the active Brief/Feed tab) read clearly against the strip — the previous Float variant dropped the border and used the lighter surface-float fill, which made the active state weaker than the hover. Bump the BriefSwitcher hover from surface-float to surface-hover so hover and active sit on the same surface stack as the chips. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Increase the inner panel gap so the Read full breakdown / feedback row sits a bit further below the TLDR summary in both Picks and Headlines rows. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Switch Picks-row upvote and comment stat icons to their filled (secondary) variant so they read as data display rather than interactive controls. Rebuild the BriefFeedback Yes/No controls with the shared Button component (ButtonVariant.Subtle, ButtonSize.Small/Medium) so they carry the standard outline button affordance. Preserve the avocado/ketchup hover tint via an !-override on hover text color. This pulls the worth-your-time controls visually away from the stat chips so users can tell apart what's a number vs what's clickable. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the max-w-3xl flex panel that wrapped TLDR + actions with a contents subgrid: the TLDR keeps its max-w-3xl reading width on its own, while the action row sits as a direct child of the row button and stretches to the full content width. Use ml-auto on BriefFeedback so the Yes/No buttons lock to the right edge with no trailing gap. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add touch-pan-x and overscroll-x-contain to both chip-strip scroll containers so dragging the tags sideways on mobile no longer leaks into the page's vertical scroll. The strip now claims horizontal gestures only and stops scroll chaining to the parent feed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Drop the Yes / No buttons from Small/Medium to XSmall/Small so the feedback control reads as a secondary action next to the primary Read full breakdown button. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.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