feat: introduce dual desktop sidebar#6026
Open
tsahimatsliah wants to merge 26 commits into
Open
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The dual sidebar shipped with three stacked cards (rail + panel + content) that felt visually noisy. Strip the chrome around the rail and panel so they sit flat against the page background and the content becomes the only elevated surface. - Hide the global header on laptop+ for logged-in users and relocate its contents into the rail: logo at top, search/notifications/profile pinned to the bottom alongside the expand toggle. Opportunity and quest entries move to the bottom of the contextual panel. - Drop the explicit borders and shadows from the rail and panel; the panel keeps a quiet divider above its footer actions, nothing more. - Replace the dotted left-edge accent with a soft surface pill for the active category — quieter and matches the rest of the design system. - Floating content card now uses a single elevation (rounded-24, surface-float, shadow-2, no border) with a small left margin so the panel and the card don't visually collide. Co-authored-by: Cursor <cursoragent@cursor.com>
Two design tweaks based on review feedback: 1. Swap the elevation. The sidebar now sits on `bg-surface-float` while the feed/content area uses the page background. The sidebar reads as a quiet tray and the feed flows on the page — the inverse of the previous treatment that had the feed floating over the sidebar. 2. Restore the user's profile picture and stats. The rail uses a new `compact` mode on `ProfileButton` that renders the avatar (clickable, opens the menu) instead of a generic settings icon. The full pill with streak / cores / reputation / avatar now lives at the bottom of the contextual panel, next to the jobs and quest entries. Also bump the active-category background to `bg-surface-active` so it remains distinct now that the rail itself is `surface-float`, and drop the now-redundant floating card styling on the content container. Co-authored-by: Cursor <cursoragent@cursor.com>
Restore the floating content shell so the dual sidebar keeps the same behavior as the prior working version, while only swapping the surface colors: the sidebar uses the elevated surface and the feed card uses the page background. Replace the reused header profile pill in the panel footer with a sidebar-specific profile summary. It keeps the avatar/profile menu in a compact trigger and presents reputation, streak, and cores as small sidebar-friendly stats so the footer no longer distorts the panel. Co-authored-by: Cursor <cursoragent@cursor.com>
Revert the sidebar/profile structural changes introduced after the approved layout iteration and keep behavior/padding exactly as before. Apply a strict color-only swap between the two main containers: - sidebar shell uses `bg-surface-float` - feed shell uses `bg-background-default` No layout, spacing, or interaction changes beyond that token swap. Co-authored-by: Cursor <cursoragent@cursor.com>
The active rail indicator was still using bg-surface-float, which now matches the sidebar's own background, making the selected category invisible. Swap it to bg-background-default so the swap is symmetric and the rail remains readable. Co-authored-by: Cursor <cursoragent@cursor.com>
The feed card is on bg-background-default, so put the sidebar on the same primary background for a single calm surface. The active rail pill now uses bg-surface-float so the selected category remains readable against the transparent rail. Co-authored-by: Cursor <cursoragent@cursor.com>
Move the sidebar back onto bg-surface-float so it reads as a distinct panel next to the primary-bg feed area. Active rail pill now uses bg-background-default so the selected category remains readable against the new surface-float rail. Co-authored-by: Cursor <cursoragent@cursor.com>
Refine the desktop dual-sidebar interaction model and move user actions into calmer rail/profile surfaces. Co-authored-by: Cursor <cursoragent@cursor.com>
- move profile menu Jobs entry above Core Wallet, refresh Support links - migrate settings and achievement tracker into utility sidebar panels - tighten feed list header to a compact, bordered header style - shrink sidebar option left padding and main feed inner padding Co-authored-by: Cursor <cursoragent@cursor.com>
Promote Discover (Hot Takes, Tags, Sources, Leaderboard, Discussions) to a top-level rail entry with a HotIcon, matching the Squads/Saved/Game Center treatment. Drops the Discover list from the Home panel and routes /tags, /sources, /users, and /discussed back to the Discover category. Co-authored-by: Cursor <cursoragent@cursor.com>
Adds a UserIcon rail entry that links straight to the signed-in user's profile page, matching the Settings/Support footer treatment without relying on the avatar image. Co-authored-by: Cursor <cursoragent@cursor.com>
Adds a Recent group (cap 5) that lists the last visited squad, tag, source, custom feed, and profile pages — Reddit-style — with kind-aware icons. Tracking is centralized in a module-level store so visits are captured even when a different sidebar panel is open. Post pages are intentionally excluded to keep the list focused on browsable feeds. Co-authored-by: Cursor <cursoragent@cursor.com>
The Feed Settings / sort / clickbait controls render through the non-search, non-list path of FeedContainer, which my previous header tweak did not touch. Promote that strip to a real <header> with a slim bottom border and compact horizontal padding so it reads as a header on the dual-sidebar layout instead of floating above the grid. Co-authored-by: Cursor <cursoragent@cursor.com>
Replaces the profile/streak/CreatePost/feedback chrome on Squads, Saved, Discover, Game Center, and Settings with a slim generic header showing the panel title on the left and a close button on the right. Squads gets a + action moved out of the section title into the panel header. Feedback and Help widgets now render on the Home panel only. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
The daily-api `SettingsFlagsPublicInput` schema doesn't define `sidebarSelectedCategory` or `sidebarRecentExpanded`, so including them in the `updateUserSettings` payload causes the mutation to fail with a generic "Unexpected error". Mark them as client-only flags, strip them from the GraphQL payload, and round-trip them through localStorage so the sidebar panel selection and recent-expansion still survive reloads. Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the legacy MainSection/AccountSection blocks from the ProfileMenu dropdown and surface those destinations through a dedicated Profile panel in the desktop sidebar rail. The ProfileMenu now keeps only the extension-specific actions, theme + account chrome moves into the profile settings menu, and the redundant `profileMenu` variant of OpportunityEntryButton is removed alongside it. Co-authored-by: Cursor <cursoragent@cursor.com>
Treat the list feed action strip as a real header (consistent padding, quaternary border, inset grid) and shrink the search-control buttons to a uniform compact icon size so the toolbar reads as one row. Co-authored-by: Cursor <cursoragent@cursor.com>
- Add explicit href to <Link><a> patterns to satisfy jsx-a11y - Extract sidebar category resolution + ProfileButton triggers to helpers, removing nested ternaries and stale exhaustive-deps - Default sidebarRecentExpanded so SettingsFlags type stays satisfied - Apply prettier/tailwind/type-imports auto-fixes to touched files - Update tests for dual-sidebar layout (Discover panel, settings link removed from ProfileMenu, MainSection Game Center moved out) Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Address PR review feedback:
- Remove unused client-only flags from defaultSettings; mark
sidebarRecentExpanded optional so localStorage hydration works
- Tighten useRecentPages: drop /[userId] auto-detector (avoids
recording 404s and reserved top-level slugs); record explicitly
from ProfileLayout once the profile resolves; clear store on
logout so recents don't leak between users
- Fix Jobs sidebar URL trailing slash when no opportunityId
- Drop Achievements/DevCard/Core wallet/Game Center duplicates
from the settings menu (they live in the Profile rail panel)
- Wire bottom Settings rail link with role=tab/aria-controls/
aria-selected and group it in its own utility tablist
- Skip persisting Settings/GameCenter selection (they're
navigations, not panel state)
- Replace formRef! non-null assertion with explicit guard
- Add aria-hidden to the decorative app-icon image
- Replace InnerProfileSettingsMenu in the Settings rail panel with
a new SettingsPanelSection that uses sidebar-native Section +
SidebarItem styling, so settings options match Home/Discover/
Saved/Squads/Profile row size, padding, icon size, and typography
- Restore the dual-sidebar floating-card treatment unconditionally
for logged-in users: revert the screenCentered gate that was
killing the feed card border/background, adding a 64px top gap,
and showing a duplicate global FeedbackWidget on most pages
- Add Slack-style floating hover preview anchored to each rail
icon. Uses @radix-ui/react-hover-card for the safe-polygon hover
bridge; opens in 250ms, closes in 120ms; suppressed when the
category is already pinned and the sidebar is expanded; styled
with bg-surface-float + shadow-3 + stronger border to lift
visibly off the rail; max-height capped to viewport with an
internal scroll area so long lists stay reachable
Co-authored-by: Cursor <cursoragent@cursor.com>
Switch the rail hover preview to the same solid styling as the sidebar Support dropdown: - bg-accent-pepper-subtlest (solid in both themes) instead of bg-surface-float (which is 92% transparent and let the underlying feed/sidebar bleed through, hurting legibility) - border-border-subtlest-tertiary + rounded-10 (matches Support) - Wider (w-72) so the panel stays comfortably readable when it overlays the main feed area Co-authored-by: Cursor <cursoragent@cursor.com>
The rail hover preview reused the docked-sidebar Section/SidebarItem markup as-is, which made every row feel oversized and inconsistent inside the small floating dropdown: - mx-3 on each item collided with the panel's own padding, leaving a large empty gutter on the left - typo-callout text + h-9/h-10 rows + w-9 icon containers + h-5 icons are tuned for the full-width docked panel, not a 288px popover Match the Support dropdown's compact density via scoped descendant overrides on the panel content wrapper: - mx-3 -> mx-0 (panel's own p-2 provides the gutter) - typo-callout -> typo-subhead, rows -> h-8, icons -> w-7/h-7 with h-4/w-4 svgs, NavHeader -> h-7 - a/button get px-2 inner padding so labels don't hug the edge Also swap the bold body title for a Footnote/Quaternary section header so the panel feels like a peer of the Support menu rather than a heavier "page header" treatment. Co-authored-by: Cursor <cursoragent@cursor.com>
Clicking a rail category icon now both selects the dedicated panel AND opens the category's first navigable page, so the panel selection matches what the user sees in the main content area: - Home -> / - Squads -> /squads (Find Squads) - Discover-> /tags (skipping the Hot Takes modal trigger so we land on a real page, not "/" with a dialog over it) - Saved -> /bookmarks (Quick saves) - Game -> /game-center - Profile -> /:username (only when the user is logged in) Settings keeps its existing <Link> navigation. Also fix the panel flicker that occurred when transitioning between non-Main routes (e.g. /squads -> click Profile rail): The prior `useState(resolveCategory) + useEffect` pattern would re-resolve the category from the OLD URL while router.push was still in flight and snap the panel back to Squads for one render before the URL caught up and snapped it to Profile. Replaced with an optimistic `pendingCategory` override that wins over the URL-derived `resolvedCategory` until the route navigation lands, at which point an effect clears the override so back/forward and deep-link changes still drive the panel correctly. Co-authored-by: Cursor <cursoragent@cursor.com>
Even after switching to bg-accent-pepper-subtlest the panel still felt "left-padded" compared to the Support dropdown. Two real causes: 1) The docked SidebarItem wraps every icon in a `w-9 h-9` flex box that *centers* the 20px icon in a 36px column. Even after shrinking the wrapper to `w-7`, the icon still floated 6px away from the row's left edge, so the label visually sat far further right than the section title above it. 2) The panel used `p-2` outer padding while Support uses `p-3`, so the title-to-edge measurements were inconsistent between the two dropdowns. Match Support's ProfileSectionItem layout 1:1: - Outer padding p-2 -> p-3 (and update the scroll wrapper's negative margins to follow), title goes from `px-1 pb-1` -> Support's `p-1` - Item rows use `px-1 gap-2` (Support's pattern) instead of the sidebar's `pl-1 pr-3 + centered icon wrapper` - Collapse the `w-9 h-9` icon wrapper to `w-4 h-4` so the icon hugs the row's left edge; `gap-2` then provides the icon-to-label space - Tighten `mt-1` -> `mt-0` between groups and the `h-9` section header -> `h-6` to match Support's compact rhythm 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
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.
Summary
Test plan
Made with Cursor
Preview domain
https://feat-dual-sidebar-desktop-layout.preview.app.daily.dev