Skip to content

feat(layout-v2): label rail icons and pin streak/cores/reputation#6177

Open
tsahimatsliah wants to merge 48 commits into
mainfrom
claude/strange-jang-4a3ea2
Open

feat(layout-v2): label rail icons and pin streak/cores/reputation#6177
tsahimatsliah wants to merge 48 commits into
mainfrom
claude/strange-jang-4a3ea2

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 10, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

What

Addresses the top council feedback on the new reading-focused layout (v2): "everything is hidden, you have to remember the icons, and streak/cores/reputation aren't visible."

  • Labels under every rail icon — Home, Squads, Discover, Saved, Quests, Profile (plus an "Alerts" label on the notifications bell). No more guessing what an icon does. The rail widens 64px → 80px to fit, with the content offset, rail/panel separator, and collapse-toggle positions updated to match.
  • Pinned streak / cores / reputation cluster — a compact SidebarRailStats sits at the bottom of the always-visible rail, so the loved gamification signals stay at a glance regardless of whether the context panel is collapsed/expanded or which category is selected. Previously these only rendered in the expanded Home panel. Reuses the existing handlers (streak popover, wallet, reputation docs); the streak popover was generalized to open to the right (bottom-anchored) so it doesn't clip near the viewport bottom.
  • Renamed "Game Center" → "Quests" on the rail to fit one line and reflect what lands first.

Notes

  • All v2-only; gated behind layout_v2 (laptop+).
  • Two shared positioning constants left intentionally: InteractivePopup line 142 (laptop:left-16) is shared with v1, so it's untouched to avoid a v1 regression; RAIL_HOVER_PROFILE_ALIGN_OFFSET may want minor re-tuning now that rail items are taller (cosmetic, collapsed hover only).

Testing

  • tsc clean on all changed files; eslint clean; sidebar specs pass (16/16).
  • Not yet eyeballed in a running browser.

🤖 Generated with Claude Code

Preview domain

https://claude-strange-jang-4a3ea2.preview.app.daily.dev

@tsahimatsliah @claude
feat(layout-v2): label rail icons and pin streak/cores/reputation
9a252f0 
Make the v2 desktop rail legible and keep gamification signals at a glance:
- Add a text label under every rail category icon; widen the rail 64px->80px
  and update the coupled content offset, separator, and toggle positions.
- Rename the Game Center rail category to "Quests".
- Pin a compact streak / cores / reputation cluster to the rail so the stats
  stay visible regardless of collapsed/expanded state or selected panel.
- Label the rail notifications bell ("Alerts") to match.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 10, 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 Jun 13, 2026 11:23am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Jun 13, 2026 11:23am

Request Review

@tsahimatsliah @claude
fix(layout-v2): allow null stat value in SidebarRailStats
7e3f926 
largeNumberFormat returns string | null; widen RailSlot value type to
match (mirrors SidebarHeaderStats) so the strict typecheck passes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
refactor(layout-v2): move profile to rail-bottom avatar, tighten padding
fc2c88e 
- Reduce the rail's horizontal padding (px-2 -> px-1.5) so it feels less bulky.
- Remove the Profile tab from the top category list and relocate it to the
  bottom of the rail (below the settings icon) as the profile avatar, with the
  same click/panel navigation the tab had.
- Move the streak / cores / reputation cluster below the avatar.
- Drop the avatar + name + stats block from the expanded Home panel (the stats
  now live only on the rail; create-post action stays).
- Extract StreakPopover into its own file and delete the now-unused
  SidebarHeaderStats component.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): compact sidebar mode + uniform rail hover
f73a26a 
- Make every rail button's hover the same width; fix the Alerts bell that
  collapsed to content width (bare wrapper div). Search stays icon-only with
  the shortcut hint outside the hover.
- Add account-synced compact mode via the sidebarCompact flag (stored in the
  settings flags bag, no backend migration): hides the rail labels and search
  hint and narrows the rail back to its icon-only width. Toggle on the rail
  (utilities group) and a switch in Settings > Appearance (v2 only).
  MainLayout content offset mirrors both width sets.
- Move the profile avatar to the very bottom, below the stats cluster.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
refactor(layout-v2): drop rail compact toggle, add Home panel title
08970e8 
- Remove the rail's compact/hide-labels toggle button (menu icon); compact
  mode stays available from Settings > Appearance.
- Give the Home expanded panel the same title header ("Home") as every other
  dedicated panel, replacing the New post button (still available on the rail).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): fold Discover into Home with an Explore entry
d1b33d3 
Remove the Discover rail category; surface Explore from the Home panel
(after Following) and map its sub-routes (/posts, /tags, /sources, /users,
/discussed) to the Home category for active highlighting. Step 1 of the
Explore restructure — the dedicated pages become Explore tabs next.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): reorder rail, lift Settings up, merge stats + avatar
0f1c429 
- Rail order is now Home, Squads, Alerts, Quests, Saved, Settings (bell
  moved before Quests; Settings lifted from the bottom utilities into the
  top nav as a labeled tab).
- Combine the streak / cores / reputation cluster and the profile avatar
  into one bordered card at the bottom (stats on top, avatar below), and
  enlarge the stats for prominence.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): responsive "More" overflow menu on the rail
fd785b9 
When the rail is too short to fit every nav item, the lowest-priority items
fold into the Settings button, which becomes a 3-dots "More" dropdown — fold
order Saved → Quests → Alerts; Home, Squads and New post always stay. The
fold point is measured against the nav list's height via ResizeObserver, so
it tracks the viewport like Slack's sidebar. Extracted a renderCategoryTab
helper to share tab markup between the rail and the More menu.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): icon-over-label stats, drop the stats card box
3523955 
- Stack each rail stat as icon-on-top / value-below to match the nav items.
- Remove the dark filled card (border + background + dividers) around the
  stats and profile avatar so the cluster reads bright and open on the rail.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): grouped Explore tab hub across sections
b57dcbc 
Add a shared ExploreSectionTabs primary navbar (Explore / Tags / Sources /
Leaderboard / Discussions) so the pages folded out of the old Discover hub
stay one click apart:
- Explore feed header (MainFeedLayout) stacks the section tabs above the
  existing sort tabs (Popular / upvotes / comments / date / best) — the
  grouped two-level layout.
- Tags, Sources and Leaderboard pages render the section tabs in their
  PageHeader so the hub persists across the directory pages.

Discussions persistence (its header routes through the feed heading) is a
follow-up.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): pin squads into a Home "Pinned" section
39086b8 
Reframe the squad favorite as a "pin" in v2 (reuses favoritedAt /
toggleFavoriteSource — no backend change):
- SquadFavoriteButton shows a pin icon + "Pin/Unpin" label in v2 (v1 keeps
  the star/favorite look).
- New PinnedSection lists the user's pinned squads under a "Pinned" header in
  the Home panel; renders nothing when empty.
- NetworkSection no longer floats pinned squads to the top of the Squads list
  in v2 (plain alphabetical order) since they now live in the Pinned section.
- Add sidebarPinnedExpanded settings flag for the section's collapse state.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): pass pin variant as a prop, not via layout hook
63543e6 
SquadFavoriteButton is a shared, provider-light button; reading
useLayoutVariant() (which needs AuthContext) crashed its unit test. Take an
`asPin` prop instead and have the v2 callers (NetworkSection, PinnedSection)
pass it, so the button stays context-free and v1 keeps the star/favorite
labels.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 11, 2026 01:34
@tsahimatsliah @claude
feat(layout-v2): hover-only pin icon, always-show Pinned section
f4c2de7 
- Keep the pin icon hover-only even when a squad is pinned (the Pinned
  header already conveys the state), so the column isn't busy. v1 favorites
  are unaffected.
- Always render the "Pinned" section header (even when empty) so users
  discover the feature.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): Recent pages section in the Home panel
196103b 
Add a "Recent" section listing the last 5 non-post pages the user visited
(profiles, feeds, tags, sources, etc.). Post permalinks (/posts/[id]) are
skipped — they belong to reading History.

- recentPages.ts: tiny localStorage-backed external store.
- useRecentPages / useRecordRecentPages: read via useSyncExternalStore;
  record route changes (gated to v2) reading the settled document.title.
- RecentSection mounted in the Home panel under Pinned; hidden when empty.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 11, 2026 01:59
@tsahimatsliah @claude
feat(layout-v2): profile avatar opens a dropdown; drop Settings rail tab
4e39fdd 
Slack-style profile menu replaces the Profile sidebar panel:
- Bottom-rail avatar opens an InteractivePopup with Your profile, Analytics,
  Jobs, Settings, DevCard (Cores wallet omitted — the stats cluster links
  there). New SidebarProfileMenu popup position.
- Remove the Settings rail tab; the overflow "More" is now a standalone
  3-dots button (no longer the Settings anchor) and no longer lists Settings.
- Profile sub-routes resolve to their natural category (devcard → Settings);
  updated sidebarCategory tests accordingly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): Explore ranking via a Sort dropdown, not a second ta…
1ce7f19 
…b row

Replace the stacked sort tabs on the Explore feed header with a right-aligned
"Sort" dropdown next to the section tabs — sorting a feed isn't navigating to
a sibling page, so a dropdown reads cleaner (Reddit/GitHub pattern). Each
sort stays its own route; the date-range control still shows for the
upvotes/comments sorts. v1 inline explore header is unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): collapse click no longer re-peeks under the cursor
e5b3c20 
Clicking collapse while the cursor is still over the sidebar kept it
expanded (the hover-peek re-triggered immediately). Suppress the peek on a
collapse click until the cursor leaves and re-enters, so the first click
actually collapses; hovering back over it peeks again as before.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 12, 2026 09:28
@tsahimatsliah @claude
fix(layout-v2): keep sidebar one solid color across collapse/hover/pin
7aa50b5 
Make the rail + panel always paint the opaque background-default instead of
switching between transparent (collapsed) and opaque (peek), so hovering
never shifts the sidebar color. Feature themes stay transparent.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): hovering a rail tab previews its panel
6be08cc 
Hovering a category icon (Home, Squads, Quests, Saved, Notifications)
swaps the expanded panel to that category's content and highlights the
tab, without navigating. Reverts to the selected/pinned category when the
cursor leaves the sidebar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): curate profile dropdown items, hover-only external icon
e4cd888 
- Trim the rail profile dropdown to a lean set: Achievements, DevCard,
  Analytics / Settings, Appearance, Feed settings, Subscriptions, Invite
  friends, Ads dashboard / Advertise, Log out. Drop Your profile, Core
  wallet, Theme, Organizations, Changelog, Docs, Support, the feedback
  toggle and the Terms/Privacy/Guidelines footer.
- Show the external-link icon on ProfileSection rows only on hover/focus.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): rework support menu, compact stats, hover-only link …
500c002 
…icon

- Support popup: drop Advertise, add Get the browser extension / Get the
  mobile app / Report a bug, and surface Privacy policy + Terms of service
  as list items instead of the footer.
- External-link icon on profile/support rows shows only on hover/focus.
- Reputation + Cores render as a compact icon+number strip (no labels).
- Profile dropdown header drops the open-link icon/gap (still links to
  the profile).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(layout-v2): use popover surface color for the sidebar + panel
ac381bf 
Paint the rail + panel with accent-pepper-subtlest (the same surface as the
floating menus/preview popovers) in every state instead of the darker page
background-default, so the panel matches the real popover look and the color
never flips when peeking/previewing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): reorder profile + support menus
5ba7625 
Profile dropdown:
- Section 1: Analytics, Jobs, DevCard, Invite friends (drop Achievements)
- Section 2 (separators above/below): Subscriptions, Ads dashboard, Advertise
- Section 3: Settings, Appearance, Feed settings
- Drop the separator between the stats strip and the list; drop the
  extension section.
- Compact the reputation/cores strip height.

Support dropdown: move Get the mobile app + Get the browser extension to
the top, above Changelog.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 3 commits June 12, 2026 18:44
@tsahimatsliah @claude
feat(layout-v2): rail New post button opens a create menu
0878481 
The rail + button now opens a dropdown with Free form, Poll, and Live
(standup), each deep-linking into the composer with the matching kind
preselected, instead of going straight to the freeform composer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): move settings section above billing in profile menu
1e81534 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): drop Log out from settings panel (now in profile menu)
78cdf84 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): New post hovers a panel, clicks open the composer modal
8275b1b 
Replace the rail + dropdown with tab-like behavior: hovering the + previews
a create-post options panel (Free form, Poll, Live) in the expanded sidebar,
while clicking + opens the composer popup (SmartComposer modal).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 3 commits June 13, 2026 13:44
@tsahimatsliah @claude
style: tighten name/handle gap in profile menu header
235f73c 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): match sidebar bg to the V2 page background color-mix
57e508d 
Use the same color-mix(surface-secondary 3%, background-default) that
MainLayout paints the V2 page with, so the rail + panel blend into the app
background instead of the popover surface color.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): right border on the hover-peek panel
26753a5 
Add a right border while the sidebar is a hover overlay so its edge reads
clearly against the feed behind it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix: guard undefined user in ProfileMenuHeader for strict typecheck
83c096a 
Editing the header pulled it into the strict-changed typecheck scope, which
flagged pre-existing 'user possibly undefined' errors. Return null when there
is no user (callers already only render it when logged in).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(layout-v2): render new-post panel with the shared Section list
24d0b20 
Use Section + SidebarMenuItem/ListIcon rows for the create-post hover panel
so it matches the other category panels instead of the dropdown-menu style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 13, 2026 14:18
@tsahimatsliah @claude
fix(layout-v2): match document background to tinted page on overscroll
53c8c31 
The v2 page uses a tinted color-mix background while the document root stayed
background-default, so overscrolling past the feed revealed a darker strip.
Flag <html> with layout-v2 while v2 is active and paint the same tint at
laptop+ so the overscroll area blends in.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(layout-v2): add Share a link to the new-post panel
0eb07d3 
Co-Authored-By: Claude Opus 4.8 <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