refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown (#114)
Operator feedback 2026-06-04:
- "make the navigation its own section, separated from the badges
and progress"
- "move the help and theme toggle into the profile drop-down"
Changes:
components/Layout.js
- Desktop sidebar restructured: the single full-height chip is gone.
The sidebar column is now <aside className="md:flex md:flex-col
md:gap-4"> holding two independent floating glass chips:
1. nav-chip (flex-1, rounded-3xl, glass-surface-mid) — logo,
wordmark, NavigationContent, and the Sign-in CTA for logged-
out visitors only.
2. bottom-chip — for authenticated users this is the
<DailyEmberWidget /> (already a self-contained glass-panel).
For logged-out, it's a small glass-panel containing the
Support + Theme icon row so those affordances stay reachable
when there's no TopSearchBar dropdown.
The visible body-gradient gap between the two chips is the new
separation the operator asked for.
- Authenticated path no longer renders Support / Theme icons in the
sidebar bottom — they live in the TopSearchBar <UserMenu> dropdown.
- Mobile drawer: bottom Support+Theme row is now gated behind
`!user`. Authenticated mobile users access the same affordances
via the TopSearchBar avatar chip (visible on all viewports; the
name/chevron portion is hidden on < md but the chip itself stays).
components/ui/TopSearchBar.js
- The user-menu chip (previously a <Link href="/settings">) is now
a real <UserMenu> dropdown sub-component:
- Profile, Settings, Admin Panel (admins only), Help & Support,
Theme toggle (button — toggles theme + closes menu),
separator, Logout.
- role="menu" + menuitem children; aria-haspopup + aria-expanded
on the trigger; Escape key closes; click-outside scrim closes.
- Uses useTheme() so the menu label flips between "Dark mode" /
"Light mode" with the matching sun/moon icon.
- Glass-surface-high background + rim-light + ember-rim-subtle
+ elevation-pronounced shadow stack so it reads as a popover
above the floating header chip.
Tests:
- npm run test:run: 113/113
- npm run lint: 0 errors (1 pre-existing warning, not from this PR)
- npm run build: green
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu
GitHub
parent
06534e5fba
commit
f3faeab788
2 changed files with 419 additions and 214 deletions
|
|
@ -760,196 +760,205 @@ export default function Layout({ children, user = null, showSearch = false }) {
|
||||||
/>
|
/>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Mobile Bottom Section.
|
{/* Mobile Bottom Section. 2026-06-04 dropdown-migration pass:
|
||||||
redesign-v2 refinements 2026-06-04: UserProfileDropdown
|
Support + Theme moved into the TopSearchBar <UserMenu>
|
||||||
removed for authenticated users (the TopSearchBar's
|
dropdown for authenticated users (the avatar chip in the
|
||||||
user-menu chip is the canonical entry point now). For
|
top bar is reachable from mobile too — the chevron/name
|
||||||
logged-out visitors, the Sign-in CTA still renders here
|
are hidden via `md:` but the chip itself is always
|
||||||
so the drawer surfaces the auth path. */}
|
visible). Logged-out visitors keep the Sign-in CTA +
|
||||||
<div className="mt-auto space-y-2">
|
Support + Theme here since they have no top-bar menu. */}
|
||||||
{!user && (
|
{!user && (
|
||||||
|
<div className="mt-auto space-y-2">
|
||||||
<UserProfileDropdown
|
<UserProfileDropdown
|
||||||
user={user}
|
user={user}
|
||||||
onMobileMenuClose={() => setIsMobileMenuOpen(false)}
|
onMobileMenuClose={() => setIsMobileMenuOpen(false)}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Icon Buttons Row - Support and Dark Mode */}
|
<div className="flex justify-center space-x-4 pt-2">
|
||||||
<div className="flex justify-center space-x-4 pt-2">
|
<Link href="/support">
|
||||||
{/* Support Icon Button */}
|
<button
|
||||||
<Link href="/support">
|
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md cursor-pointer nav-item-hover focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||||
<button
|
style={{
|
||||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md cursor-pointer nav-item-hover focus:outline-none focus:ring-2 focus:ring-offset-2"
|
backgroundColor: 'transparent',
|
||||||
style={{
|
color: 'var(--text-secondary)',
|
||||||
|
'--tw-ring-color': 'var(--accent-ember)',
|
||||||
|
'--tw-ring-offset-color': 'var(--bg-secondary)',
|
||||||
|
}}
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
aria-label="Support"
|
||||||
|
title="Support"
|
||||||
|
>
|
||||||
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
||||||
|
style={{
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
color: 'var(--text-secondary)',
|
color: 'var(--text-secondary)',
|
||||||
'--tw-ring-color': 'var(--accent-ember)',
|
'--tw-ring-color': 'var(--accent-ember)',
|
||||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
'--tw-ring-offset-color': 'var(--bg-secondary)',
|
||||||
}}
|
}}
|
||||||
onClick={() => setIsMobileMenuOpen(false)}
|
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||||
aria-label="Support"
|
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||||
title="Support"
|
|
||||||
>
|
>
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
{theme === 'light' ? (
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</svg>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</div>
|
||||||
|
|
||||||
{/* Theme Toggle Icon Button */}
|
|
||||||
<button
|
|
||||||
onClick={toggleTheme}
|
|
||||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: 'var(--text-secondary)',
|
|
||||||
'--tw-ring-color': 'var(--accent-ember)',
|
|
||||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
|
||||||
}}
|
|
||||||
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
|
||||||
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
|
||||||
>
|
|
||||||
{theme === 'light' ? (
|
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
||||||
</svg>
|
|
||||||
) : (
|
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Desktop Sidebar - Hidden on mobile. Liquid Glass mid-tint, ambient
|
{/* Desktop Sidebar — Hidden on mobile. 2026-06-04 split-into-two-
|
||||||
elevation + rim-light edges; the page background visibly cools
|
chips pass: per operator feedback ("make the navigation its own
|
||||||
through the rail. 2026-06-04 floating-chrome pass: rounded-3xl
|
section, separated from the badges and progress"), the sidebar
|
||||||
+ overflow-hidden so the rail reads as its own floating chip;
|
column now holds TWO independent floating glass chips with a
|
||||||
`var(--rim-light-outer)` dropped from the box-shadow stack
|
visible body-gradient gap between them:
|
||||||
because that 1px outer ring was the "vertical divider between
|
1. nav-chip (flex-1) — logo, wordmark, NavigationContent,
|
||||||
the sidebar and the right side" the operator wanted gone. The
|
and the Sign-in CTA when logged-out.
|
||||||
chip's edge is now defined solely by `var(--elevation-ambient)`
|
2. bottom-chip — for authenticated users this is the
|
||||||
(drop shadow) + the glass-surface-mid tint against the body
|
<DailyEmberWidget /> (which is already a glass-panel and
|
||||||
gradient that shows through `md:gap-4` on the outer flex. */}
|
renders as its own chip without further wrapping). For
|
||||||
<div
|
logged-out visitors, this is a small glass-panel that
|
||||||
className="hidden md:flex md:static inset-y-0 left-0 w-64 md:rounded-3xl md:overflow-hidden"
|
holds the Support + Theme icon row (since logged-out
|
||||||
style={{
|
users have no TopSearchBar dropdown to host those).
|
||||||
background: 'var(--glass-surface-mid)',
|
Support + Theme were removed from the authenticated path
|
||||||
backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
|
entirely — they live in TopSearchBar's <UserMenu> dropdown
|
||||||
WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
|
now. The shared `boxShadow` stack is rim-light-inner +
|
||||||
boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
|
elevation-ambient (matches the prior floating-chrome pass —
|
||||||
}}
|
rim-light-outer stays dropped so there's no 1px ring that
|
||||||
|
would re-introduce a divider against the body gradient). */}
|
||||||
|
<aside
|
||||||
|
className="hidden md:flex md:flex-col md:gap-4 w-64"
|
||||||
|
aria-label="Sidebar"
|
||||||
>
|
>
|
||||||
<div className="p-4 h-full flex flex-col w-full">
|
{/* Nav chip */}
|
||||||
{/* Desktop Header — flame logomark + two-tone wordmark.
|
<div
|
||||||
redesign-v2 sub-convoy #2 (2026-06-04): replaces the prior
|
className="flex-1 flex flex-col md:rounded-3xl md:overflow-hidden min-h-0"
|
||||||
"DH" monogram + plain text. Mockup shows a gradient flame
|
style={{
|
||||||
icon on the left and "Deck" + "Hearth" where "Hearth" is
|
background: 'var(--glass-surface-mid)',
|
||||||
gradient-text-flame so the wordmark reads as a single brand
|
backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
|
||||||
unit with the ember accent. */}
|
WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
|
||||||
<div className="flex items-center mb-8">
|
boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
|
||||||
<div
|
}}
|
||||||
className="w-10 h-10 mr-3 rounded-2xl flex items-center justify-center"
|
>
|
||||||
style={{
|
<div className="p-4 h-full flex flex-col w-full">
|
||||||
background:
|
{/* Desktop Header — flame logomark + two-tone wordmark.
|
||||||
'linear-gradient(135deg, rgb(255, 140, 30) 0%, rgb(216, 67, 21) 100%)',
|
redesign-v2 sub-convoy #2 (2026-06-04). */}
|
||||||
boxShadow:
|
<div className="flex items-center mb-8">
|
||||||
'0 2px 8px -1px rgba(255, 110, 0, 0.50), inset 0 1px 0 rgba(255,255,255,0.25)',
|
<div
|
||||||
}}
|
className="w-10 h-10 mr-3 rounded-2xl flex items-center justify-center"
|
||||||
aria-hidden="true"
|
style={{
|
||||||
>
|
background:
|
||||||
<svg
|
'linear-gradient(135deg, rgb(255, 140, 30) 0%, rgb(216, 67, 21) 100%)',
|
||||||
className="h-5 w-5"
|
boxShadow:
|
||||||
viewBox="0 0 24 24"
|
'0 2px 8px -1px rgba(255, 110, 0, 0.50), inset 0 1px 0 rgba(255,255,255,0.25)',
|
||||||
fill="rgb(255, 255, 255)"
|
}}
|
||||||
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<path d="M12 2c-.5 3.5-3.5 5.5-3.5 9 0 2.5 1.5 4 3.5 4s3.5-1.5 3.5-4c0-1.5-1-3-2-4 1 2 .5 4-.5 5-1 1-2-1-1-3 .5-1 1.5-3 0-7z" />
|
<svg
|
||||||
<path d="M7 13c0 4 2.2 7 5 7s5-3 5-7c0-1-.3-2-.7-2.8-.3 3-1.8 4.8-4.3 4.8-2 0-3.6-1.5-4.3-4.5-.4 1-.7 1.7-.7 2.5z" />
|
className="h-5 w-5"
|
||||||
</svg>
|
viewBox="0 0 24 24"
|
||||||
</div>
|
fill="rgb(255, 255, 255)"
|
||||||
<h1 className="text-xl font-bold flex items-center gap-1">
|
|
||||||
<span style={{ color: 'var(--text-primary)' }}>Deck</span>
|
|
||||||
<span className="gradient-text-flame">Hearth</span>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Desktop Navigation Content */}
|
|
||||||
<nav className="space-y-2 flex-1" role="navigation" aria-label="Main navigation">
|
|
||||||
<NavigationContent
|
|
||||||
user={user}
|
|
||||||
router={router}
|
|
||||||
onItemClick={() => {}}
|
|
||||||
/>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Desktop Bottom Section.
|
|
||||||
redesign-v2 refinements 2026-06-04: the UserProfileDropdown
|
|
||||||
that used to live here has moved to the TopSearchBar's
|
|
||||||
user-menu chip (top-right). Keeping both was redundant.
|
|
||||||
For logged-out visitors, render the Sign-in CTA here so
|
|
||||||
the sidebar still surfaces the auth path (the top bar
|
|
||||||
renders null when user is null). */}
|
|
||||||
<div className="mt-auto space-y-3">
|
|
||||||
{user && <DailyEmberWidget />}
|
|
||||||
|
|
||||||
{!user && (
|
|
||||||
<UserProfileDropdown
|
|
||||||
user={user}
|
|
||||||
onMobileMenuClose={() => {}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Icon Buttons Row - Support and Dark Mode */}
|
|
||||||
<div className="flex justify-center space-x-4 pt-2">
|
|
||||||
{/* Support Icon Button */}
|
|
||||||
<Link href="/support">
|
|
||||||
<button
|
|
||||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md cursor-pointer nav-item-hover focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: 'var(--text-secondary)',
|
|
||||||
'--tw-ring-color': 'var(--accent-ember)',
|
|
||||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
|
||||||
}}
|
|
||||||
aria-label="Support"
|
|
||||||
title="Support"
|
|
||||||
>
|
>
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<path d="M12 2c-.5 3.5-3.5 5.5-3.5 9 0 2.5 1.5 4 3.5 4s3.5-1.5 3.5-4c0-1.5-1-3-2-4 1 2 .5 4-.5 5-1 1-2-1-1-3 .5-1 1.5-3 0-7z" />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path d="M7 13c0 4 2.2 7 5 7s5-3 5-7c0-1-.3-2-.7-2.8-.3 3-1.8 4.8-4.3 4.8-2 0-3.6-1.5-4.3-4.5-.4 1-.7 1.7-.7 2.5z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</div>
|
||||||
</Link>
|
<h1 className="text-xl font-bold flex items-center gap-1">
|
||||||
|
<span style={{ color: 'var(--text-primary)' }}>Deck</span>
|
||||||
|
<span className="gradient-text-flame">Hearth</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Theme Toggle Icon Button */}
|
{/* Desktop Navigation Content. flex-1 fills the chip; the nav
|
||||||
<button
|
rows themselves don't overflow at the current item count,
|
||||||
onClick={toggleTheme}
|
but min-h-0 on the chip + overflow-y-auto here would be
|
||||||
className="p-3 rounded-xl transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
added if the nav grew long enough to clip. */}
|
||||||
style={{
|
<nav
|
||||||
|
className="space-y-2 flex-1"
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Main navigation"
|
||||||
|
>
|
||||||
|
<NavigationContent user={user} router={router} onItemClick={() => {}} />
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Sign-in CTA for logged-out visitors only. Authenticated
|
||||||
|
users have no UserProfileDropdown footer here — the
|
||||||
|
TopSearchBar's <UserMenu> chip is the canonical entry
|
||||||
|
point. */}
|
||||||
|
{!user && (
|
||||||
|
<div className="mt-auto">
|
||||||
|
<UserProfileDropdown user={user} onMobileMenuClose={() => {}} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom chip — authenticated shows the Daily Ember widget
|
||||||
|
(already a self-contained .glass-panel rounded-2xl). For
|
||||||
|
logged-out visitors, render a small glass-panel with the
|
||||||
|
Support + Theme icon row so those affordances remain
|
||||||
|
reachable when there's no TopSearchBar dropdown. */}
|
||||||
|
{user ? (
|
||||||
|
<DailyEmberWidget />
|
||||||
|
) : (
|
||||||
|
<div className="glass-panel rounded-2xl p-3 flex justify-center space-x-4">
|
||||||
|
<Link href="/support">
|
||||||
|
<button
|
||||||
|
className="p-3 rounded-xl transition-all duration-200 cursor-pointer nav-item-hover focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||||
|
style={{
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
color: 'var(--text-secondary)',
|
color: 'var(--text-secondary)',
|
||||||
'--tw-ring-color': 'var(--accent-ember)',
|
'--tw-ring-color': 'var(--accent-ember)',
|
||||||
'--tw-ring-offset-color': 'var(--bg-secondary)'
|
'--tw-ring-offset-color': 'var(--bg-secondary)',
|
||||||
}}
|
}}
|
||||||
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
aria-label="Support"
|
||||||
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
title="Support"
|
||||||
>
|
>
|
||||||
{theme === 'light' ? (
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
</svg>
|
||||||
</svg>
|
|
||||||
) : (
|
|
||||||
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</Link>
|
||||||
|
<button
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="p-3 rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 nav-item-hover"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
'--tw-ring-color': 'var(--accent-ember)',
|
||||||
|
'--tw-ring-offset-color': 'var(--bg-secondary)',
|
||||||
|
}}
|
||||||
|
aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||||
|
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
|
||||||
|
>
|
||||||
|
{theme === 'light' ? (
|
||||||
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</aside>
|
||||||
|
|
||||||
{/* Main Content. `md:gap-4` adds vertical breathing room between
|
{/* Main Content. `md:gap-4` adds vertical breathing room between
|
||||||
the floating TopSearchBar header and the page content so they
|
the floating TopSearchBar header and the page content so they
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import { useTheme } from '../../lib/theme-context';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TopSearchBar — the top horizontal chrome strip from the operator's
|
* TopSearchBar — the top horizontal chrome strip from the operator's
|
||||||
|
|
@ -31,30 +31,266 @@ import Link from 'next/link';
|
||||||
* Ctrl+K elsewhere. Detection is best-effort via navigator.platform
|
* Ctrl+K elsewhere. Detection is best-effort via navigator.platform
|
||||||
* and gracefully defaults to ⌘ on the server (matches the Mac
|
* and gracefully defaults to ⌘ on the server (matches the Mac
|
||||||
* audience's default expectation).
|
* audience's default expectation).
|
||||||
* - User menu (avatar + name) is a Link that routes to /settings;
|
* - User menu (avatar + name + chevron) opens a real dropdown
|
||||||
* a follow-up convoy can replace this with a real dropdown if
|
* (see <UserMenu> below) with Profile, Settings, Admin (when
|
||||||
* the operator wants the full Notion-style menu.
|
* applicable), Help & Support, Theme toggle, and Logout. The
|
||||||
|
* Help and Theme entries moved here from the desktop sidebar's
|
||||||
|
* bottom icon row 2026-06-04 per operator feedback.
|
||||||
*/
|
*/
|
||||||
function isMacPlatform() {
|
function isMacPlatform() {
|
||||||
if (typeof window === 'undefined' || !window.navigator) return true;
|
if (typeof window === 'undefined' || !window.navigator) return true;
|
||||||
return /Mac|iPhone|iPad|iPod/.test(window.navigator.platform);
|
return /Mac|iPhone|iPad|iPod/.test(window.navigator.platform);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* UserMenu — the dropdown that opens from the top-right avatar chip.
|
||||||
|
*
|
||||||
|
* Hosts the canonical authenticated-user menu items (Profile, Settings,
|
||||||
|
* Admin Panel for admins, Help & Support, Theme toggle, Logout). The
|
||||||
|
* Help and Theme entries moved here 2026-06-04 per operator feedback
|
||||||
|
* ("move the help and theme toggle into the profile drop-down") — the
|
||||||
|
* sidebar's bottom icon row is gone for authenticated users now, so
|
||||||
|
* this menu is the canonical entry point for both.
|
||||||
|
*
|
||||||
|
* The Theme entry is a button (not a Link) because toggling theme is
|
||||||
|
* a side-effect with no destination route. Clicking it flips the
|
||||||
|
* theme AND closes the menu, matching the "act and dismiss" feel of
|
||||||
|
* the other items. Profile / Settings / Admin / Support / Logout are
|
||||||
|
* Links and close the menu on click via onClick.
|
||||||
|
*
|
||||||
|
* a11y:
|
||||||
|
* - The trigger button has aria-haspopup="menu" + aria-expanded.
|
||||||
|
* - The dropdown is role="menu" with menuitem children.
|
||||||
|
* - Escape closes; click-outside closes.
|
||||||
|
* - The focus model is intentionally simple (no roving tabindex);
|
||||||
|
* each menuitem is in the natural tab order so Tab/Shift+Tab
|
||||||
|
* navigates between them — matches the existing sidebar
|
||||||
|
* UserProfileDropdown's pattern (Layout.js).
|
||||||
|
*/
|
||||||
|
function UserMenu({ user }) {
|
||||||
|
const { theme, toggleTheme } = useTheme();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return undefined;
|
||||||
|
const onKeyDown = (event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', onKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', onKeyDown);
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const initial = (user.username || user.email || 'U').charAt(0).toUpperCase();
|
||||||
|
const displayName =
|
||||||
|
user.username || user.email?.split('@')[0] || 'Account';
|
||||||
|
const isAdmin = user?.role === 'admin';
|
||||||
|
|
||||||
|
const close = () => setOpen(false);
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ id: 'profile', label: 'Profile', href: '/profile', icon: 'user' },
|
||||||
|
{ id: 'settings', label: 'Settings', href: '/settings', icon: 'settings' },
|
||||||
|
...(isAdmin
|
||||||
|
? [{ id: 'admin', label: 'Admin Panel', href: '/admin', icon: 'admin' }]
|
||||||
|
: []),
|
||||||
|
{ id: 'support', label: 'Help & Support', href: '/support', icon: 'support' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const renderIcon = (name) => {
|
||||||
|
const iconProps = {
|
||||||
|
className: 'h-4 w-4 flex-shrink-0',
|
||||||
|
fill: 'none',
|
||||||
|
stroke: 'currentColor',
|
||||||
|
viewBox: '0 0 24 24',
|
||||||
|
'aria-hidden': true,
|
||||||
|
};
|
||||||
|
switch (name) {
|
||||||
|
case 'user':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
case 'settings':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
case 'admin':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
case 'support':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
case 'logout':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
case 'sun':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
case 'moon':
|
||||||
|
return (
|
||||||
|
<svg {...iconProps}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setOpen((prev) => !prev)}
|
||||||
|
className="flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-xl transition-colors focus:outline-none focus:ring-2 nav-item-hover"
|
||||||
|
style={{
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
'--tw-ring-color': 'var(--accent-ember)',
|
||||||
|
}}
|
||||||
|
aria-haspopup="menu"
|
||||||
|
aria-expanded={open}
|
||||||
|
aria-label="Account menu"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
'linear-gradient(135deg, rgb(255, 140, 30) 0%, rgb(216, 67, 21) 100%)',
|
||||||
|
color: 'rgb(255, 255, 255)',
|
||||||
|
boxShadow:
|
||||||
|
'0 1px 4px rgba(255, 110, 0, 0.40), inset 0 1px 0 rgba(255,255,255,0.20)',
|
||||||
|
}}
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{initial}
|
||||||
|
</div>
|
||||||
|
<span className="hidden md:inline text-sm font-medium truncate max-w-[10rem]">
|
||||||
|
{displayName}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
className={`hidden md:inline h-4 w-4 flex-shrink-0 transition-transform duration-200 ${
|
||||||
|
open ? 'rotate-180' : ''
|
||||||
|
}`}
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{open && (
|
||||||
|
<>
|
||||||
|
{/* Click-outside scrim. fixed inset-0 catches taps anywhere
|
||||||
|
outside the menu. z-index sits between the menu (z-30)
|
||||||
|
and normal page content. */}
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-20"
|
||||||
|
onClick={close}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
role="menu"
|
||||||
|
aria-label="Account menu"
|
||||||
|
className="absolute right-0 top-full mt-2 w-56 rounded-xl z-30 overflow-hidden"
|
||||||
|
style={{
|
||||||
|
background: 'var(--glass-surface-high)',
|
||||||
|
backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
|
||||||
|
WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
|
||||||
|
boxShadow:
|
||||||
|
'var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-pronounced)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="py-1">
|
||||||
|
{menuItems.map((item) => (
|
||||||
|
<Link key={item.id} href={item.href} passHref legacyBehavior>
|
||||||
|
<a
|
||||||
|
role="menuitem"
|
||||||
|
onClick={close}
|
||||||
|
className="flex items-center gap-3 px-3 py-2 text-sm transition-colors nav-item-hover"
|
||||||
|
style={{ color: 'var(--text-primary)' }}
|
||||||
|
>
|
||||||
|
{renderIcon(item.icon)}
|
||||||
|
<span className="font-medium">{item.label}</span>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Theme toggle — button, not Link, because there's no
|
||||||
|
destination route. Closes the menu after toggling to
|
||||||
|
match the act-and-dismiss feel of the other items. */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="menuitem"
|
||||||
|
onClick={() => {
|
||||||
|
toggleTheme();
|
||||||
|
close();
|
||||||
|
}}
|
||||||
|
className="w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors nav-item-hover"
|
||||||
|
style={{ color: 'var(--text-primary)' }}
|
||||||
|
>
|
||||||
|
{renderIcon(theme === 'light' ? 'moon' : 'sun')}
|
||||||
|
<span className="font-medium">
|
||||||
|
{theme === 'light' ? 'Dark mode' : 'Light mode'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Visual divider before the destructive Logout entry. */}
|
||||||
|
<div
|
||||||
|
role="separator"
|
||||||
|
className="my-1 mx-3 h-px"
|
||||||
|
style={{ backgroundColor: 'var(--border)' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Link href="/logout" passHref legacyBehavior>
|
||||||
|
<a
|
||||||
|
role="menuitem"
|
||||||
|
onClick={close}
|
||||||
|
className="flex items-center gap-3 px-3 py-2 text-sm transition-colors nav-item-hover"
|
||||||
|
style={{ color: 'var(--accent-ember)' }}
|
||||||
|
>
|
||||||
|
{renderIcon('logout')}
|
||||||
|
<span className="font-medium">Logout</span>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function TopSearchBar({
|
export default function TopSearchBar({
|
||||||
user,
|
user,
|
||||||
notificationCount = 0,
|
notificationCount = 0,
|
||||||
onOpenCommandPalette,
|
onOpenCommandPalette,
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
|
||||||
const [hovered, setHovered] = useState(false);
|
const [hovered, setHovered] = useState(false);
|
||||||
|
|
||||||
if (!user) return null;
|
if (!user) return null;
|
||||||
|
|
||||||
const isMac = isMacPlatform();
|
const isMac = isMacPlatform();
|
||||||
const shortcutLabel = isMac ? '⌘K' : 'Ctrl+K';
|
const shortcutLabel = isMac ? '⌘K' : 'Ctrl+K';
|
||||||
const initial = (user.username || user.email || 'U').charAt(0).toUpperCase();
|
|
||||||
const displayName =
|
|
||||||
user.username || user.email?.split('@')[0] || 'Account';
|
|
||||||
|
|
||||||
const openPalette = () => {
|
const openPalette = () => {
|
||||||
onOpenCommandPalette?.();
|
onOpenCommandPalette?.();
|
||||||
|
|
@ -197,47 +433,7 @@ export default function TopSearchBar({
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Link href="/settings" passHref legacyBehavior>
|
<UserMenu user={user} />
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-xl transition-colors focus:outline-none focus:ring-2 nav-item-hover"
|
|
||||||
style={{
|
|
||||||
color: 'var(--text-primary)',
|
|
||||||
'--tw-ring-color': 'var(--accent-ember)',
|
|
||||||
}}
|
|
||||||
aria-label="Account settings"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0"
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
'linear-gradient(135deg, rgb(255, 140, 30) 0%, rgb(216, 67, 21) 100%)',
|
|
||||||
color: 'rgb(255, 255, 255)',
|
|
||||||
boxShadow:
|
|
||||||
'0 1px 4px rgba(255, 110, 0, 0.40), inset 0 1px 0 rgba(255,255,255,0.20)',
|
|
||||||
}}
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
{initial}
|
|
||||||
</div>
|
|
||||||
<span className="hidden md:inline text-sm font-medium truncate max-w-[10rem]">
|
|
||||||
{displayName}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
className="hidden md:inline h-4 w-4 flex-shrink-0"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M19 9l-7 7-7-7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue