feat(layout-v2): single-panel Linear-style sidebar#6188
Open
tsahimatsliah wants to merge 42 commits into
Open
Conversation
Replaces the v2 icon-rail + context-panel with one scrollable panel (inspired by Linear). Primary destinations (For You, Following, Explore, Notifications, Quests) sit as flat rows; Pinned, Saved, Squads, Feeds and Recent are collapsible sections; streak/cores/reputation + the profile menu pin to the footer. Collapsing slides the whole panel off-screen and the content reclaims the width, with a left-edge hover-peek and a floating reopen toggle. Reuses the building blocks introduced in #6177 (Explore folded into Home, Recent/Pinned sections, recent-pages store, Explore hub headers, profile menu, settings panel) but drops the rail, hover-cards, compact mode and "More" overflow that the rail required. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Wrap the panel body in a definite-height (h-dvh) overflow-hidden flex column. Without it the panel grew past the viewport, pushing the footer and collapse toggle off-screen and leaving the nav list unscrollable. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Paint the sidebar with the exact V2 page background (the color-mix MainLayout uses) and drop the right border, so the sidebar and feed read as one continuous surface with the feed floating as a box on top. - Collapsed peek now floats over the feed with a shadow + rounded free edge (no divider), and the reopen toggle is a subtle ghost button, matching Linear's clean collapsed UX. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Collapse the sidebar by dragging its right edge (Linear-style): the panel narrows live and closes when pulled past the threshold. Removes the always-visible collapse toggle. - When collapsed, the sidebar takes zero width and the feed reclaims it; an 'Open sidebar' icon appears at the left of the feed-area headers (shared PageHeader + the Explore/feed/tag/squad-directory header strips) to reopen it. Self-gating so it only shows for a collapsed v2 sidebar. - Drops the hover-peek + floating reopen button in favor of this explicit drag-to-close / header-to-open model. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drag the sidebar's right edge and the feed area resizes in lockstep (Figma/Linear-style): both the sidebar width and the content's left padding read a shared --sidebar-width CSS variable that's updated imperatively during the drag, with transitions suppressed on the resizable panes so they track the cursor 1:1. On release the new width is persisted (sidebarWidth flag) and restored on reload; pulling past the collapse threshold closes it instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tings back - Search is now an icon in the top bar (Linear-style) instead of a full-width field; Support moves up to the top bar too. - Profile dropdown shows the Reputation + Cores wallet strip (as in #6177). - Streak moves onto the profile row next to the avatar; the stats strip is gone. - Settings/inner pages get a Back control at the top of the panel. - Listing rows + section headers are compact (Linear sizing: 13px text, 16px icons, 32px rows, 12px headers), scoped to v2 via a "compact" prop threaded through Section/SidebarItem (no context hooks in shared primitives). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah
force-pushed
the
claude/objective-blackburn-47bee7
branch
from
c671e09 to
046fb84
Compare
…menu - Profile (avatar + name + @username) is now the top switcher with the streak beside it; the daily.dev logo moves to the footer (bottom-right) and Support to the bottom-left, Linear-style. - Search and compose are reduced to 16px glyphs in 32px buttons to match the compact list icons. - Theme (light/dark) toggle moved into the profile dropdown; the standalone theme icon is removed from the sidebar. - Profile menu opens from the top, Support menu from the bottom, to match their new positions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Primary nav is now an explicit v2 order: For You, Following, Notifications, Quests, Explore, Happening Now, History. Built inline (not via the shared MainSection) so the v1 sidebar order is unaffected. - Resize handle straddles the sidebar/feed boundary and reveals a short, vertically-centered grip on hover/drag (Claude-style) so it's discoverable without a permanent divider. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop the three-dots icon (the whole row already opens the dropdown) and the @username handle (the dropdown header already shows it). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ze grip - Tighten compact rows to Linear's density: 28px height (was 32px), 24px icon box (was 28px), 8px item margin (was 12px), 8px radius, and shorter left-aligned section headers. - Resize grip is now a rounded rectangle (rounded-4) instead of a pill. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add ⌘/Ctrl+Shift+L to collapse/expand the sidebar (matching Linear),
ignored while typing in inputs.
- Hovering the resize handle now shows a tooltip ("Drag to resize" + the
toggle shortcut), and the collapsed-state "Open sidebar" control's tooltip
shows the shortcut too.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove the Recent section and its now-unused plumbing (RecentSection, useRecentPages, recentPages store, MainLayout recorder, RecentExpanded flag). - Footer bar: daily.dev logo + name on the left (links home), with the theme toggle and Support center on the right. Theme moves out of the profile dropdown back to this strip. - Streak popover opens downward now that the streak sits in the header (was growing up off-screen). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
New ComposeIcon (outline + filled variants) replaces the plus glyph on the sidebar's New post button. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The section-header collapse arrow (Pinned/Squads/Saved/Feeds) is now smaller and only shows while hovering or focusing within the section (header or its items), keeping the list clean — like Linear. Scoped to the compact v2 sidebar; v1 sections keep the always-visible chevron. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- The chevron rendered at 20px because the Icon wrapper's default size class beat the h-2 w-2 className; size it via the size prop (XXSmall, 12px) instead. - Drop group-focus-within (a focused nav link kept it stuck visible) so it shows only while hovering the section and disappears on mouse-out; keyboard focus on the toggle still reveals it via group-focus-visible. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The squad avatar is an <img>, so the compact [&_svg] size rule didn't apply — it stayed 20px and ran into the label. Match images to icons ([&_img]:size-4, 16px, centered) and add a small right margin so every item has a consistent icon→text gap. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Footer: add a top separator border, shrink the daily.dev logo (20→16px) to match the icon scale, and render the brand as a muted footnote so it reads as a footer rather than competing with the nav. - Collapse/expand shortcut is now the plain "[" key (ignored with modifiers so ⌘/Ctrl+[ stays browser back, and while typing). Tooltips updated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…divider) Show the short, vertically-centered grip indicator by default at the resize boundary instead of a full-height divider line; it grows + darkens on hover/drag. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…hover tint Match the reference resize-divider: the always-visible grip is now a rounded rectangle in a light color that turns blue (accent-blueCheese) on hover/drag, and the full-height strip tints top-to-bottom on hover too. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Grip is 2px by default and grows to 4px (plus the blue tint) on hover/drag. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
New HelpIcon (question-mark circle, outline + filled) replaces FeedbackIcon on the sidebar's support/help-center button. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…yle) Collapsing no longer hides the sidebar — it shows a persistent 4rem icon rail: nav items, sections (as dividers + icons), search, compose, profile avatar, theme and support all stay visible as centered icons with tooltips. Content pads by the rail width (pl-16). Hovering the rail still peeks the full panel open as an overlay (labels return) without shifting content. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…rail - Hovering the collapsed rail no longer opens the panel (removed hover-peek). - Rail icons are centered (row + icon centering when labels are hidden). - The resize grip now also shows on the collapsed rail and acts as the open control there (click to expand); on the open panel it still drags to resize/collapse. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Reduce collapsed rail to w-14 (MainLayout pl-14 to match) - Square 1:1 rail buttons (size-8), centered icons throughout - Show reading streak in the rail below the avatar - Move daily.dev logo to the bottom of the rail, below support - Grip drags the rail open (not just click) with a smooth transition; width grows from the rail and the panel floats over the feed mid-drag Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Center the icon in each square rail button (the label's flex-1 was eating space and pushing the glyph left); label now fades in on open - Lower the rail drag-to-open threshold to ~2x the rail width so a small pull opens it, then snaps to the stored/min width - Collapsed-rail streak shows only a small flame (no count) so a long streak number can't overflow the 32px square Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Dragging the rail grip now previews the full open panel as soon as the pointer moves: the layout switches to open (icons stay left-aligned, labels fade in) and the bar animates to its open width — the rail no longer grows with centered icons. Releasing commits the open state; dragging back over the rail cancels. A "Release to open" hint appears during the drag, and the grip stays blue throughout. Split the open- panel resize into its own handler so each gesture is unambiguous. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The rail grip now opens the panel by drag or click, so the redundant expand control in the feed/explore/tags/squads headers is gone. Deletes SidebarExpandButton and its four usages. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bring the streak count back in the collapsed rail: a small flame on the left followed by the number (caption sizing keeps it inside the rail), instead of the flame-only chip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Darken the pill to blueCheese-bolder and bold the text so the white label reads clearly against the blue. Co-Authored-By: Claude Opus 4.8 <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
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.
What
A new take on the v2 sidebar: remove the icon rail entirely and put everything in one scrollable panel + list, inspired by Linear. Same daily.dev design language — just a single-column information architecture instead of the rail that swaps a context panel.
This builds on the work in #6177 (it ports those building blocks) but takes the opposite layout direction: where #6177 labels the rail icons, this folds the rail away.
Layout
daily.dev, a full-width search field (⌘K), a compose+, and the collapse toggle.Section): Pinned, Saved, Squads, Feeds, Recent.Collapse / peek
The whole panel slides off-screen when collapsed and the content reclaims the full width (no permanent rail). A left-edge hover zone peeks it back in as an overlay; a floating toggle reopens/pins it.
Reused from #6177
Explore folded into Home,
RecentSection/PinnedSection, the recent-pages store, the Explore hub headers (/posts,/tags,/sources,/users, best-of), the profile menu, and the logout move into that menu. Dropped the rail-only pieces: hover-cards, compact mode, and the "More" overflow.Testing
tscclean on all changed files (bothsharedandwebapp); eslint clean (--max-warnings 0).layout_v2is GrowthBook-gated and not easily forced locally. Please review on the preview deploy, especially the collapse/peek interaction and the footer popover anchoring.🤖 Generated with Claude Code
Preview domain
https://claude-objective-blackburn-47bee.preview.app.daily.dev