06534e5fba
Operator feedback 2026-06-04: - "pull out the left nav to make it look like it is its own floating section versus attached to the top-left" - "this is also true for the header for the pages" - "the divider that runs between the right side and the sidebar. let's make that divider go away so it all feels like one large page" Changes: components/Layout.js - Outer flex shell: `md:p-4 md:gap-4` pulls the sidebar AND the main column in from the viewport edges on desktop. Mobile (< 768px) is unaffected because the sidebar is `hidden md:flex` already and the TopSearchBar / page content still run flush there. - Desktop sidebar: `md:rounded-3xl md:overflow-hidden` so the rail reads as a floating chip. Dropped `var(--rim-light-outer)` from its box-shadow stack — that 1px outer ring was literally the "vertical divider between the sidebar and the right side" the operator wanted gone. Chip edges are now defined by `var(--elevation-ambient)` (drop shadow) + the glass-surface-mid tint against the body gradient that shows through `md:gap-4`. - Main column: added `md:gap-4 min-w-0`. The gap separates the floating TopSearchBar from the page content vertically so they read as two distinct floating chrome elements; min-w-0 prevents long card titles / table cells from blowing past the column width. components/ui/TopSearchBar.js - `md:rounded-2xl` so the header reads as a floating chip on desktop. Mobile stays square (header is edge-to-edge there). - Box-shadow: `rim-light-inner` + `elevation-ambient`. Deliberately no `rim-light-outer` — the prior "remove the divider" feedback applies to any visible 1px edge, and a hairline outer ring would re-introduce one on mobile where the bar abuts content directly. Tests: - npm run test:run: 113/113 - npm run lint: clean - npm run build: green Co-authored-by: Cursor <cursoragent@cursor.com>
244 lines
9 KiB
JavaScript
244 lines
9 KiB
JavaScript
import { useState } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import Link from 'next/link';
|
|
|
|
/**
|
|
* TopSearchBar — the top horizontal chrome strip from the operator's
|
|
* redesign-v2 mockup.
|
|
*
|
|
* Layout: prominent search input on the left (with magnifier + Cmd+K
|
|
* hint pill), then 3 right-side widgets — notification bell (with red
|
|
* badge when there are unread items), mail/inbox icon, and a compact
|
|
* user-menu chip (avatar + name + chevron).
|
|
*
|
|
* Mounted globally inside <Layout> for authenticated users; renders
|
|
* as a no-op `null` for unauthenticated visitors (the public landing
|
|
* uses its own marketing header).
|
|
*
|
|
* Props:
|
|
* user { username, email, avatar_url, ... }
|
|
* notificationCount number — drives the bell badge; 0 hides it
|
|
* onOpenCommandPalette () => void — fires when user clicks the
|
|
* search input or presses ⌘K (the global
|
|
* keydown listener lives in <Layout>).
|
|
*
|
|
* Implementation notes:
|
|
* - The search input is intentionally read-only-ish: clicking or
|
|
* focusing it opens the CommandPaletteModal instead of typing
|
|
* inline. This matches Linear / Notion / Vercel's pattern and
|
|
* avoids two competing search affordances on the page.
|
|
* - The "Cmd+K" hint adapts to the user's platform: ⌘K on Mac,
|
|
* Ctrl+K elsewhere. Detection is best-effort via navigator.platform
|
|
* and gracefully defaults to ⌘ on the server (matches the Mac
|
|
* audience's default expectation).
|
|
* - User menu (avatar + name) is a Link that routes to /settings;
|
|
* a follow-up convoy can replace this with a real dropdown if
|
|
* the operator wants the full Notion-style menu.
|
|
*/
|
|
function isMacPlatform() {
|
|
if (typeof window === 'undefined' || !window.navigator) return true;
|
|
return /Mac|iPhone|iPad|iPod/.test(window.navigator.platform);
|
|
}
|
|
|
|
export default function TopSearchBar({
|
|
user,
|
|
notificationCount = 0,
|
|
onOpenCommandPalette,
|
|
}) {
|
|
const router = useRouter();
|
|
const [hovered, setHovered] = useState(false);
|
|
|
|
if (!user) return null;
|
|
|
|
const isMac = isMacPlatform();
|
|
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 = () => {
|
|
onOpenCommandPalette?.();
|
|
};
|
|
|
|
return (
|
|
<header
|
|
// Floating-chrome pass 2026-06-04: `md:rounded-2xl` so the bar
|
|
// reads as its own floating chip on desktop (Layout's
|
|
// `md:p-4 md:gap-4` puts visible body gradient on all four sides
|
|
// of it). Mobile keeps square corners since the header runs
|
|
// edge-to-edge there. The shadow stack pairs `rim-light-inner`
|
|
// (subtle top inset highlight kept from the prior pass) with
|
|
// `elevation-ambient` (drop shadow) so it floats over the body
|
|
// gradient. We deliberately did NOT add `rim-light-outer` here:
|
|
// the operator's "remove the divider" feedback from the prior
|
|
// pass applies to any visible 1px edge, and a hairline outer
|
|
// ring would re-introduce one on mobile where the bar abuts
|
|
// content directly.
|
|
className="px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4 md:rounded-2xl"
|
|
style={{
|
|
background: 'var(--glass-surface-mid)',
|
|
backdropFilter: 'blur(12px) saturate(180%)',
|
|
WebkitBackdropFilter: 'blur(12px) saturate(180%)',
|
|
boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)',
|
|
}}
|
|
>
|
|
{/* Search affordance — read-only-ish input that opens the
|
|
command palette on click. */}
|
|
<button
|
|
type="button"
|
|
onClick={openPalette}
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
className="flex-1 max-w-2xl flex items-center gap-2 px-4 py-2 rounded-xl text-left transition-colors focus:outline-none focus:ring-2"
|
|
style={{
|
|
backgroundColor: hovered
|
|
? 'var(--bg-tertiary)'
|
|
: 'var(--input-bg)',
|
|
border: '1px solid var(--input-border)',
|
|
color: 'var(--text-secondary)',
|
|
'--tw-ring-color': 'var(--accent-ember)',
|
|
}}
|
|
aria-label="Open command palette to search"
|
|
>
|
|
<svg
|
|
className="h-5 w-5 flex-shrink-0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
/>
|
|
</svg>
|
|
<span className="flex-1 text-sm truncate">
|
|
Search cards, sets, decks, users…
|
|
</span>
|
|
<span
|
|
className="hidden sm:inline-flex items-center gap-0.5 px-2 py-0.5 rounded-md text-xs font-mono"
|
|
style={{
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|
color: 'var(--text-secondary)',
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
{shortcutLabel}
|
|
</span>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
|
|
<button
|
|
type="button"
|
|
className="relative p-2 rounded-xl transition-colors focus:outline-none focus:ring-2 nav-item-hover"
|
|
style={{
|
|
color: 'var(--text-secondary)',
|
|
'--tw-ring-color': 'var(--accent-ember)',
|
|
}}
|
|
aria-label={
|
|
notificationCount > 0
|
|
? `${notificationCount} unread notifications`
|
|
: 'Notifications'
|
|
}
|
|
>
|
|
<svg
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
|
/>
|
|
</svg>
|
|
{notificationCount > 0 && (
|
|
<span
|
|
className="absolute -top-0.5 -right-0.5 min-w-[1.25rem] h-5 px-1 rounded-full text-xs font-bold flex items-center justify-center"
|
|
style={{
|
|
backgroundColor: 'rgb(239, 68, 68)',
|
|
color: 'rgb(255, 255, 255)',
|
|
boxShadow: '0 1px 3px rgba(239, 68, 68, 0.5)',
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
{notificationCount > 99 ? '99+' : notificationCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
<Link href="/settings#messages" passHref legacyBehavior>
|
|
<a
|
|
className="p-2 rounded-xl transition-colors focus:outline-none focus:ring-2 nav-item-hover"
|
|
style={{
|
|
color: 'var(--text-secondary)',
|
|
'--tw-ring-color': 'var(--accent-ember)',
|
|
}}
|
|
aria-label="Messages"
|
|
>
|
|
<svg
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</Link>
|
|
|
|
<Link href="/settings" passHref legacyBehavior>
|
|
<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>
|
|
</header>
|
|
);
|
|
}
|