Skip to content

feat(layout-v2): sidebar iteration fixes — logo/home combo, streak states, dnd fixes - #6393

Open
tsahimatsliah wants to merge 17 commits into
mainfrom
feat/layout-v2-iterations
Open

feat(layout-v2): sidebar iteration fixes — logo/home combo, streak states, dnd fixes#6393
tsahimatsliah wants to merge 17 commits into
mainfrom
feat/layout-v2-iterations

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jul 29, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

Changes

Iteration pass on the production layout v2 sidebar (on top of #6240):

Rail

  • Combine the daily.dev logo with the Home button: logo at rest, crossfades to the home glyph on hover/focus; click goes to the For You feed (keeps the extension's feed-reset contract)
  • Move "New post" above Search, right below the logo
  • Suppress the post-drag click when reordering rail tabs (dropping a tab navigated/reloaded the page)
  • Restore the square design-system Bubble (rounded-8, cabbage) on the rail notifications bell — it had regressed to a hand-rolled oval pill

Streak

  • StreakBadge: unread days are grey outlines (tile + flame); read-today fills the tile pink with a filled white flame
  • Restore the weekend auto-freeze / used-freeze tooltips on the 30-day calendar
  • Restyle the freeze row to sidebar guidelines: title + subtitle, neutral Subtle button instead of link-blue text

Panels

  • Remove the duplicate "Get API Access" CTA in the You panel (keep only the list row below DevCard)
  • Concentric corner radius on the profile header hover pill (rounded-18 = avatar 10 + 8px padding)
  • "Hot Takes" no longer false-highlights on the home feed (modal launcher opts out of active state)
  • /daily resolves to the same Profile panel as the feed, so switching feed ⇄ daily keeps an identical sidebar
  • Compact quest rows route to each quest's completion surface via the dashboard's destination mapping (extracted to questDestinations.ts); claimable/claimed rows still go to Game Center
  • Shortcuts dock: dropping below the last icon now works and shows the purple frame (drop + indicator now share the same geometric check)

Verification

  • node ./scripts/typecheck-strict-changed.js ✅
  • ESLint on all changed files ✅
  • shared: 114 tests / 16 suites ✅
  • webapp: 336 tests / 45 suites ✅

🤖 Generated with Claude Code

Preview domain

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

@tsahimatsliah @claude
feat(layout-v2): sidebar iteration fixes — logo/home combo, streak st…
aadf4b9 
…ates, dnd fixes

- Combine the daily.dev logo with the Home button (logo at rest, home glyph on hover)
- Move New post above Search on the rail
- Streak badge: grey outline unread, pink-filled tile + flame when read today
- Restore weekend auto-freeze tooltip on the 30-day streak calendar
- Restyle the streak freeze row to sidebar guidelines (neutral Subtle button)
- Remove duplicate "Get API Access" CTA in the You panel
- Concentric corner radius on the profile header hover pill
- Stop "Hot Takes" false-highlighting on the home feed
- Keep the same sidebar on /daily as on the feed
- Route compact quest rows to their completion surfaces
- Suppress post-drag click navigation when reordering rail tabs
- Fix end-of-list drop zone + indicator in the shortcuts dock
- Restore the square design-system Bubble on the rail notifications bell

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 29, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jul 29, 2026 7:58pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Jul 29, 2026 7:58pm

Request Review

@tsahimatsliah @claude
fix(layout-v2): actually consume the rail drag click guard
1343b0a 
The guard flag was armed on drag end but never read, so the stray post-drop
click still navigated. Swallow it in the capture phase on the sortable
wrapper, which also covers the notifications bell's anchor.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): move New post below the rail tabs
c963b53 
New post now sits directly under the last tab instead of at the top of the
rail. It renders outside the tablist and the More menu, so on short viewports
the tabs and shortcuts fold into "More" while New post stays visible; its row
is reserved in the overflow budget so tabs still peel off one at a time.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): use the filter icon for Feed settings in the You panel
e9e1bcb 
Matches how feed settings is iconified elsewhere (MyFeedHeading).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): add breathing room below the New post button
370c194 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): make New post a reorderable rail item
864c7da 
New post now joins the tabs in the drag-and-drop order (persisted in
sidebar_rail_order) instead of being fixed below them. Only the tabs fold
into "More" — New post is filtered out of the foldable set, so it stays on
the rail at every viewport height.

It renders as an action button, not a tab: it carries no aria-selected, so
the sliding selected pill keeps tracking the committed category.

Also stop the notifications tab from reloading the page on drag: it is the
only rail item rendered as an anchor, and browsers drag links natively, so a
native link-drag ran alongside the dnd-kit reorder and navigated on drop.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): drop Jobs and DevCard from the You panel list
28350b9 
Both are reachable from settings, so the panel stays profile-focused.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): centre New post on the rail and even out its spacing
c5ff736 
Moving the button into the sortable list left it aligned to the sortable
wrapper's left edge — the tabs centre their own content, but a fixed 36px
button does not. Centre it explicitly.

Give the dock's framing separator symmetric my-3 margins so it sits midway
between New post and the shortcuts "•••", and update the reserved-height
constants to match.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): arm the rail drag click guard at drag start
213737e 
Arming it in onDragEnd was too late: dnd-kit delivers onDragEnd through a
React state update, which can land after the browser has already dispatched
the click that follows pointerup. Arm on drag start instead and release one
macrotask after the drag settles.

This only ever showed on Notifications because it is the single rail item
rendered as a plain link — every other tab routes its click through
onSelectCategory, which skips router.push for the page you are already on.

Also grey out the home glyph unless the feed is the current page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits July 29, 2026 21:10
@tsahimatsliah @claude
fix(layout-v2): stop rail items squashing mid-drag; give New post tab…
743038b 
…-like margins

CSS.Transform.toString also emits the sortable scale, which dnd-kit sets to
the size ratio between the dragged item and the one it displaces. The rail
now mixes ~56px tabs with the 36px New post button, so both visibly
squashed/stretched while dragging past each other. Translate only.

New post gets my-2 — the same vertical rhythm as the tabs' py-2 — so it
breathes when dropped between them; reserved height updated to match.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): render rail reorder synchronously on drop
d5dda7f 
The persisted order round-trips through a react-query mutation, so its
re-render landed a beat after dnd-kit cleared the sortable transforms — one
visible frame of the old order at the drop, read as a flicker/jump on every
tab. Mirror the shortcuts dock: apply the new order via local state in
onDragEnd (commits in the same React update as dnd-kit's drag-end state) and
let persistence follow; the override drops once the stored value catches up.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): make the post-drag click guard consume-based
e24083a 
The 0ms release timer reliably lost to the browser's click: dnd-kit runs
onDragEnd synchronously inside the pointerup listener, and the click is
dispatched tasks later (pointerup → mouseup → click), so the timer disarmed
the guard before the click arrived and dragging the notifications tab still
navigated. The stray click now consumes the guard itself in the capture
handler; a 500ms timer remains only as a fallback for drags that end with no
click at all (Escape, pointer released off-window).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): drag rail tabs via DragOverlay so the bell's anchor n…
36f8284 
…ever navigates

Port the shortcuts dock's architecture: while dragging, the real element
stays parked in the list as a slot skeleton and a pointer-events-none
DragOverlay ghost follows the cursor. The notifications tab reloaded the
page on some drops (notably upward drags — even back to the same slot,
even while already on /notifications, i.e. a NATIVE href navigation)
because the rail dragged the real element, live anchor included, under the
pointer — so releasing could always produce a click on the link in
geometries the wrapper guard can't cover. With the overlay, the anchor is
never under the pointer at release, making native navigation structurally
impossible rather than guard-timing dependent. The click guard stays as
defence in depth.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): move the rail drag slot skeleton live with the drag
bda45d2 
Mirror the shortcuts dock's onDragOver live reorder: as the dragged tab
passes over a slot, the rendered list reorders so the parked skeleton moves
into that slot — a live landing indicator instead of a gap at the original
position. The order is committed on drop from the live snapshot (at drop the
item is over its own slot, so the old active/over move would be a no-op) and
discarded on cancel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): dock-style chip border on the rail drag ghost
e1d9b3d 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): match the dock exactly for rail drag ghost and skel…
b156c48 
…eton

Ghost now uses the dock's ghostStateClass recipe verbatim — solid surface,
subtle border, shadow-3, 110% lift — and the landing skeleton uses the dock's
bg-background-subtle with the item's content faded out rather than hidden, so
both surfaces read identically across the two drag systems.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tsahimatsliah