feat(layout-v2): sidebar rail rework + Slack-style add rows#6218
Closed
tsahimatsliah wants to merge 129 commits into
Closed
feat(layout-v2): sidebar rail rework + Slack-style add rows#6218tsahimatsliah wants to merge 129 commits into
tsahimatsliah wants to merge 129 commits into
Conversation
Restructure the v2 dual-sidebar per the latest design review: - Move the daily.dev logo to the top of the rail. - Turn the avatar into a tab that opens a Profile panel (your feeds, history, happening now, analytics, jobs, devcard, pins, custom feeds) instead of a dropdown menu. - Add a flat Home button that goes to the For You feed. - Replace the Home category with Explore (panel lists the /posts sub-tabs + recent pages). - Add a bottom settings gear holding the leftover account/app actions (theme, settings, appearance, feed settings, billing, log out). Add Slack-style add affordances to the squad/folder/feed panels: a dedicated "add" row at the bottom of each list, with the existing top "+" surfacing only once the list grows past a few entries. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Happening Now is a discovery feed, so it belongs alongside the Explore sub-tabs rather than in the personal Profile panel. Also remap /highlights to the Explore (Main) category so the active panel matches. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reuse DiscoverSection (Explore, Tags, Sources, Leaderboard, Discussions) in the v2 Explore panel, replacing the per-sort tabs (those remain in the in-page Explore header). Add a showHotTakes opt-out so the panel keeps the five hub sections without the Hot Takes modal launcher. Happening Now and Recent still follow. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bookmarks now live as a "Bookmarks" section in the Profile panel alongside pins and feeds, and the standalone Saved rail tab is removed (remap /bookmarks + /briefing to the Profile category). The folder add action follows the same pattern as feeds: a bottom "New folder" row, with the header "+" only once there are more than a few folders. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Rename the rail notifications label "Alerts" → "Activity". - Replace the per-panel "+" add icon with a leading "New …" row in the Squads, Bookmarks and Feeds panels (v2 only); v1 keeps its header "+". - Remove the Explore hub section tabs (Explore/Tags/Sources/Leaderboard/ Discussions) from the page headers — they live in the sidebar Explore panel now. Drop the now-dead ExploreSectionTabs component. - Recent rows no longer render an active highlight (new disableActiveState flag on SidebarMenuItem). - Move the Home and Search buttons above the profile avatar in the rail. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ofile - The Home rail button now uses the filled (secondary) icon when the For You feed is the current page, and the outline otherwise. - Move "Feed settings" out of the settings gear into the Profile panel, just above DevCard. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…separator - Show the search shortcut keys inside the Search tooltip and remove the standalone ⌘K row from the rail to reclaim vertical space. - Move the profile avatar below the separator, so it sits at the top of the Explore tab group rather than with the logo/home/search cluster. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The collapsed sidebar no longer expands just because the cursor enters the rail. The hover-peek now opens only when hovering an icon that has a context panel (Explore, Squads, Activity, Quests, Profile, New post) via commitPreview. Empty space and panel-less icons (logo, Home, Search, Invite, Support, Settings) don't open it, and hovering the bottom utility cluster closes any open peek. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add a CompassIcon and use it for Explore everywhere it was a flame (rail tab, Discover panel row, explore breadcrumb). - Restore a consistent breadcrumb header (Home / icon + title) on the Explore hub pages (Explore, Tags, Sources, Leaderboard, Best of) via ExploreHubHeader/ExploreHubBreadcrumb, replacing the removed section tabs so the pages no longer render header-less. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…, default to Profile - Reveal an "open link" icon on hover/focus for link rows in the v2 panels (and the profile header), matching the ProfileMenu rows. - Align the profile header/stats block's right edge with the list rows' content (pr-6) so it's no longer wider than the items below. - Default the panel to Profile on the home / For You feed for logged-in users (Home click + initial load) instead of Explore; Explore still works when its tab is selected. Anonymous users keep Explore. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…profile panel - Decouple the selected (white) tab indicator from hover-preview: the indicator tracks the committed category and no longer jumps to whichever tab you hover, so you always know where you are. The hovered tab shows a distinct "previewing" background instead. - Make the Home rail button match the Search icon (size, hover background, tertiary color), filling/going primary when the For You feed is active. - Nudge the daily.dev logo down to line up with the panel title. - Remove the custom feeds section from the Profile panel (it already lives in the For You feed's top header). Prediction-cone review: the safe-zone logic is sound; the felt "issue" was the indicator tracking the preview state, now fixed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ders Open-link icon (regression fix): - Make the hover "open link" icon opt-in per item instead of showing on every panel link. Only rows that leave the sidebar carry it — Feed settings and DevCard (→ /settings). Following/History/Analytics/Jobs and the profile header no longer show it. Dividers (settings-dropdown style grouping): - Add a `createSidebarSeparatorItem` helper; Section renders it as a HorizontalSeparator. - Notifications panel: divider between the activity list and Settings. - Squads panel: divider after Find Squads/Pending Posts, before the squads. - New post panel: divider before "Live" (a live room, not a post type). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…gnment - Replace the explore-hub breadcrumb with the standard plain title header (like Analytics/Settings): Explore, Sources, Leaderboard, Best of. Discussions already uses its feed heading. The Explore feed shows an "Explore" PageHeader title with the sort dropdown as a header action. - Tags: drop the header title and keep the TagPageNavbar tabs; rename its leading "Explore" tab to "All tags" (the old name clashed with the Explore feed). - Redraw the Compass icon to match the design (tilted needle + center dot, ring outline / solid disc). - Nudge the profile header/stats right (pl-5) so they line up with the panel's list-row icons instead of sticking out to the left. The selected-tab indicator already behaves Slack-style (committed tab keeps white text + filled icon; hovered tab gets a background + white outline icon). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Render the Explore sort options (Popular, By upvotes, By comments, By date, Best of) as a regular tab bar in the page header — reusing FeedExploreHeader without breadcrumbs — instead of the v2 sort dropdown. The date-range filter stays as FeedExploreHeader's own dropdown for the applicable sorts. Removes the now-unused ExploreSortDropdown. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The open-link icon used an unnamed group-hover, which also matched the SidebarAside's `group` class — so it showed whenever the cursor was anywhere in the sidebar. Scope it to a named `group/openLink` on the row so it only reveals when hovering that exact row (Feed settings, DevCard), matching the Advertise item in the settings menu. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
… + settings link - Quests panel: add a separator above "Quests settings". - New post panel: move the divider to below Live, and add a Settings link after it that leaves to /settings (open-link icon reveals on row hover). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Clear the optimistic pendingCategory once the route settles (on activePage change) instead of only on an exact match. The sidebar persists across client navigation, so a stale pending value (e.g. Profile after the avatar navigates to /username) stranded the panel on the wrong category until a refresh — clicking Settings then showed the old panel. - Resolve the user's own profile page (/<username> and sub-pages) to the Profile category so the avatar's destination matches and pending clears. - Section: track open/closed in state instead of a ref so collapsing works for sections without a persisted flag (the settings panel groups). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add Playground / AllStates / Zoomed stories for the v2 rail StreakBadge so the new reading-streak widget's states are reviewable in Storybook. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Relocate RecentSection from the Explore panel to the bottom of the Profile
("You") panel, so recently visited pages sit with the rest of your stuff.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Reading streaks off (but other gamification on): the tab becomes the broader "Quests"/Game Center — joystick glyph + "Quests" label (tab, panel title, hover card, and More menu all follow). - All gamification off: the tab drops out of the rail entirely. - Re-enabling lives in Settings → Gamification (already in both the rail settings panel and the profile settings menu), so it's always reachable. Also restore the sliding selected pill on category tabs: a stray merge had re-added bg-background-default to the selected category button, which painted over the shared sliding indicator. Selected tabs own only their text color now. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- New post button now has the same active:scale press as the other rail buttons (Button ships no transition, so the transform transition is additive). - Pin the create panel from the click until the composer modal closes (createPinned), so the panel no longer flashes back to the resolved category (e.g. Profile) during the open transition. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Daily quest titles wrap fully instead of truncating. - XP reward value is now plain white (text-primary), normal weight; Cores and Reputation stay bold + colour-coded. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The streak settings already live on the combined "Feature visibility" page, so remove the duplicate "Streaks" item from the Gamification group in both the rail settings panel and the profile settings menu. The /customization/streaks route stays (it re-exports the combined page and is a redirect target in next.config). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Make the quest name take the available width and wrap to multiple lines with no ellipsis; break-words handles long unbroken tokens. Reward value stays on the right. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
StreakBadge now owns its own per-state visuals (decoupled from the legacy StreakRing maps): - Read today: solid pink tile + white flame (was hollow gray + pink flame). - Just earned: same read-today look + white flame, keeping the earn pop/wash animation; settles into read-today after. - New / pending / rest day: white border (the lighter "selected"-style border, matching the avatar), keeping each state's dashed/solid pattern. - At-risk / critical keep their amber/red colour + pulse for urgency. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…65af # Conflicts: # packages/shared/src/components/notifications/NotificationsRailPanel.tsx
…lame The solid pink read-today tile made the streak tab too prominent. Revert just the `safe` state to an empty tile (white border, no fill) with a pink flame — the lighter original look. Celebration pop and all other states unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Shortcuts dock now renders even with zero shortcuts so its "•••" customize button reveals on rail hover (was gated on shortcutCount>0, hiding the only way to add the first shortcut). Framing separator still waits for real shortcuts. - Daily quest rows now show the quest description under the title, get a hover state + a reveal-on-hover chevron, and the whole row is a stretched link to the Game Center (quest details); the Claim button opts out via relative z-1. - Streak calendar checks "today" before "read" so today's white ring always shows — previously reading today dropped the ring, leaving no today indicator. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Settings: collapse the separate Show levels / Show quests / Show achievements switches into one "Show quests" toggle (levels + quests + achievements move together; reading streaks stay separate). Backed by a new isQuestExperienceEnabled / toggleQuestExperience on SettingsContext (the individual toggles each setState off the same snapshot, so can't be chained). - Streak panel title is now "Current Streak" (streaks on) / "Daily Quests" (streaks off). Drop the redundant "Current streak" line under the count, and hide the inner "Daily quests" header when streaks are off (the panel title already says it). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- The reading-streak rail tab now uses the brand pink (subtle accent-bacon-flat tint, so the pink flame still reads) for its selected pill and its hover/preview state; every other tab keeps the neutral treatment, and the pink only shows on hover/selected, not by default. - Calendar "today" ring is now a top-layer overlay (z-1) so it stays visible over a read-day flame disc — previously it painted under the disc and vanished once you'd read today. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a calendar story with mocked auth + seeded reading history so the dot states are reviewable — including today read (white ring on top of the pink flame) vs today not read. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ular progress) Title + subtitle now span the full row width (stacked), with the XP/Cores rewards beneath the subtitle. Progress moves to a circular ring (ProgressCircle, brand = cabbage) on the right of the row, with the value/target beneath it; Claim / Claimed sit there too. Hover chevron kept as the open-details cue. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…left Title + subtitle are now full-width lines. Below them a strip holds the XP/Cores rewards on the left and, pinned bottom-right, the step count followed by a small radial ring (size 20) sized to match the reward strip height. Claim/Claimed occupy that same bottom-right slot. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…; pink selected label - StreakBadge calm-state border (new/pending/read-today/rest day) is now a subtle gray by default, turns white on tab hover (scoped via group/streaktab), and pink (brand) when the tab is selected — no longer always white. - The selected reading-streak tab's label is pink (accent-bacon) instead of white. Other tabs keep white. - Storybook: add a `selected` control + a "Selected" story to preview the pink border state. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Draw the "today" ring OUTSIDE the dot (ring-2 + transparent ring-offset gap) instead of inset, so the flame fills the full circle and the ring sits around it as a halo rather than cutting into the filled day. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…top-right) - Chevron moved to the top-right of the row; the radial+step-count move to a right column (steps left of the ring). - Rows now use the same hover as other v2 panel lists: rounded-10 pill + bg-surface-hover (dropped the dividers; small gap between rows instead). - Equal ~12px L/R inset (px-3 container) matching the mx-3 of other panel items. - Title + subtitle keep full row width. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop the transparent offset gap so the white "today" ring is a 2px border directly around the filled day instead of a detached halo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
All CircleCI checks (typecheck, test_webapp/shared/extension, lint, build) and the storybook deploy are green; only the webapp Vercel preview flaked. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Move the quest radial + step count into the bottom rewards strip, right- aligned on the same row as the XP/Cores (chevron stays top-right by the title). - Streak calendar today ring is now a 1px white border (was 2px). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…doesn't shift The "•••" customize button now always sits under the top frame separator (gated on showInlineDock, not shortcutCount), and the utilities separator is keyed on isLoggedIn (constant). So the empty dock and the with-shortcuts dock look identical and adding the first shortcut causes no layout shift. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The reading-streak tab's hover/preview background is now the same neutral surface-hover as every other tab; the brand pink stays only on the selected pill + label. (group/streaktab is kept so the badge's hover-white border still works.) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…reveals on hover - Streak panel: the daily-quest list now flex-fills the panel and scrolls inside its own area (hero stays fixed up top) instead of a fixed max-h-96 scroll box that left dead space below. The Nav stretches to the scroll wrapper for this panel (isStreakPanel) so the section can flex-fill it. - Top dock separator: with zero shortcuts it now reveals on sidebar hover in step with the empty ••• button (both hidden by default); with shortcuts it stays visible. Space stays reserved (opacity only) so adding the first shortcut never shifts anything. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The reading-streak tab no longer tints its whole pill + label pink when selected: it now uses the same neutral selected pill (bg-background-default) and white label as every other tab, with float on hover. The brand pink is reserved for the square StreakBadge (driven by the badge's selected state) — the badge is untouched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…lyphs Recent rows now show the most recognizable icon available, with the timer only as the true fallback: - Source pages resolve and show the source's logo (like squads/users already do). - Known internal pages map to their own glyph (Game Center, Settings, Notifications, Bookmarks, Briefing, Analytics, Jobs, Following, Explore, Squads) instead of the generic timer. - Anything unmapped with no image keeps the timer icon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Member
Author
|
Superseded by #6240 — the production-ready port rebased on current |
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
1 participant
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.
Reworks the v2 dual-sidebar based on the latest design review, plus consistent add-action affordances for the squad/folder/feed panels. All changes are v2-only — the v1 sidebar and the shared
MainSectionare untouched.Rail layout (top → bottom)
Panels
/postssub-tabs (Popular, By upvotes, By comments, By date, Best of) + Recent pages, reusingurlToTabfromFeedExploreHeaderso it can't drift.Add affordances (squads / folders / feeds)
SIDEBAR_ADD_TOP_THRESHOLD), so short lists stay clean and long lists keep the shortcut reachable.Verification
tscclean for changed files;eslint --max-warnings 0clean.sidebarCategory.spec.ts).layout_v2enabled + a logged-in session).🤖 Generated with Claude Code
Preview domain
https://claude-keen-hopper-4265af.preview.app.daily.dev