feat(layout-v2): sidebar rail iteration — icon system, drag hardening, streak polish

[tsahimatsliah]

Iteration pass on the production layout v2 rail (on top of #6240).

Rail

• The daily.dev logo and Home are one control: logo at rest, crossfading to the home glyph on hover/focus. Grey while inactive, white on direct hover (matching Search), filled only on the feed itself.
• New post is reorderable with the tabs (persisted in sidebar_rail_order) but excluded from the foldable set, so it never collapses into "More" on short viewports.
• One shared icon scale — RAIL_ICON_SIZE + railGlyphBoxClass — sizes every rail glyph (tabs, Home, Search, bottom utilities, "More", shortcuts dock), replacing ~30 hard-coded sizes. Hit areas unchanged; New post keeps its own size.
• Optical sizing measured in-browser rather than eyeballed: the avatar is smaller than the outline glyphs (a solid photo carries more optical mass), the compass gets a 5% overshoot (a thin hollow circle reads small), and the streak ring matches the compass's drawn diameter.

Drag and drop

The rail and the shortcuts dock now share one architecture.

• Rail tabs drag via DragOverlay: the real element parks as a slot skeleton while a pointer-events-none ghost follows the cursor. This is what makes the Notifications tab safe to drag — its live anchor is never under the pointer at release, so the browser can't natively follow the href (the cause of the page reloads). draggable={false} and a consume-based click guard back it up.
• The slot skeleton reorders live (onDragOver) so it tracks the landing position, and the drop commits synchronously — no frame of stale order (the flicker).
• Translate-only transforms: dnd-kit's sortable scale distorted glyphs of differing heights.
• Shared glass ghost + landing-slot treatment across both systems.
• Dock: dropping past the last icon now lands, driven by the same geometry as its indicator.

Streak

• Circular badge whose ring always takes the colour of the flame inside it — grey unread, pink read today, blue on a frozen rest day — with ring and flame going white together on hover. Ring stroke matches the icon set's measured weight; the flame is nudged 0.5px to correct artwork that isn't centred in its own viewBox.
• Weekend auto-freeze tooltips restored on the 30-day calendar.
• Freeze row follows the panel guidelines: title, subtitle, neutral button.

Panels

• Quest rows navigate to the surface where each quest can actually be completed, via a destination mapping extracted from QuestButton into a reusable module.
• "Hot Takes" no longer false-highlights on the feed (it's a modal launcher, and the active check strips queries).
• /daily resolves to the same panel as the feed, so switching between them doesn't reshuffle the sidebar.
• Removed the duplicate "Get API Access" CTA, plus Jobs and DevCard (both reachable from settings); Feed settings takes the filter icon; concentric radius on the profile pill.
• Notification count is a square badge anchored to grow rightward, so wide values stay inside the rail.

Storybook

• Components → Sidebar → Rail icon set, with an Audit variant that outlines each glyph box so ink coverage stays measurable.
• StreakBadge stories now supply group/streaktab, so hover states are reviewable (they previously couldn't be).

Known gap (not addressed here)

The in-panel feedback widget is still hidden on the home feed — a separate regression from #6240, since that PR made the feed resolve to the Profile panel while the widget only renders on the Explore panel. It remains reachable via the rail's "?" button.

🤖 Generated with Claude Code

Preview domain

https://feat-layout-v2-iterations.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Jul 30, 2026 8:09am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Jul 30, 2026 8:09am