feat(design-system): redesign v2 #3 — TopSearchBar + Cmd+K + sweep page-header-glass (#105)

Sub-convoy #3 from .convoys/redesign-v2-from-mockups.md (umbrella
§ 7.3 — locked: sweep to ALL authenticated pages this convoy).

What ships:

- components/ui/TopSearchBar.js — the top horizontal chrome strip
  from the mockup. Layout: prominent search input on left (with
  magnifier icon + Cmd+K/Ctrl+K hint pill that adapts to platform)
  + notification bell with red badge (hidden when count=0) + mail
  icon + compact user-menu chip (gradient-tile avatar + display name
  + chevron). Avatar reads user.username with a fallback initial.
  Renders null for unauthenticated visitors (public marketing pages
  use their own header).

- components/ui/CommandPaletteModal.js — the surface that opens on
  ⌘K / Ctrl+K. Single search input, auto-focused. Enter submits to
  /cards?q=<query>. 3 quick-action buttons (Dashboard / Cards /
  Scanner) below the input. Eschews live-result preview, recent-
  search storage, and federated-search ranking; those are deferred
  to a follow-up convoy per umbrella § 7.2.

- components/Layout.js: TopSearchBar mounted in the main-content
  column ABOVE <main> for authenticated users (drops the legacy
  showSearch prop dependency — the prop stays for back-compat but
  no longer drives the header's visibility). Global keydown listener
  attached at Layout scope, toggles the CommandPaletteModal on
  ⌘K/Ctrl+K (preventDefault on the shortcut so the browser's native
  bookmark/search shortcut doesn't fire). The legacy <header>
  block that rendered an inline search input is removed; that
  surface is replaced by TopSearchBar + CommandPaletteModal.

- page-header-glass call-site sweep (umbrella § 7.3 contract:
  "no call site references it after this convoy"):
  - pages/dashboard.js
  - pages/my-cards.js
  - pages/community/collections.js
  - components/CollectionsPageView.js
  - components/CollectionPageView.js
  - components/CardsPageView.js
  Each `page-header-glass p-4 sm:p-6` is replaced with plain content
  padding (`px-4 sm:px-6 pt-6 pb-2`). Page titles + actions stay
  exactly where they were inside the content area; the glass chrome
  that previously framed them is now provided by TopSearchBar above.
  The .page-header-glass utility class stays in styles/globals.css
  (a downstream sweep convoy can remove it once the unused-CSS lint
  catches it).

- components/ui/index.js: barrel export updated with TopSearchBar +
  CommandPaletteModal.

Lint fix:
- CommandPaletteModal initially used useEffect(setQuery(''), [open])
  to reset the input on open; that hits the react-hooks/set-state-
  in-effect rule (we added the rule in fix-auth-bypass Brief 5). Use
  the "during render with previous-state tracking" pattern that
  NavigationContent uses (lines 168-178 of components/Layout.js)
  for the same purpose. No useEffect required.

Tests:
- npm run test:run: 113/113 (was 110; +3 new — implicit Layout
  tree-render coverage of the new TopSearchBar mount paths).
- npm run lint: clean (1 pre-existing unused-disable warning).
- npm run build: green.

Next: sub-convoy #6 (card-grid outer-glow), #7 (dashboard layout
rebuild), #8 (right-rail Card Spotlight).

Co-authored-by: Cursor <cursoragent@cursor.com>

components/CardsPageView.js

@@ -49,7 +49,7 @@ export default function CardsPageView(props) {
   return (
     <>
       {/* Header */}
-      <div className="page-header-glass p-4 sm:p-6">
+      <div className="px-4 sm:px-6 pt-6 pb-2">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>

components/CollectionPageView.js

@@ -78,7 +78,7 @@ export default function CollectionPageView(props) {
     <>
       <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
         {/* Header */}
-        <div className="page-header-glass p-6">
+        <div className="px-6 pt-6 pb-2">
           <div className="flex items-center justify-between mb-6">
             {/* Back button */}
             <div className="flex items-center">

components/CollectionsPageView.js

@@ -48,7 +48,7 @@ export default function CollectionsPageView(props) {
   return (
     <>
       {/* Header */}
-      <div className="page-header-glass p-6">
+      <div className="px-6 pt-6 pb-2">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>

components/Layout.js

@@ -4,6 +4,8 @@ import Link from 'next/link';
 import { useTheme } from '../lib/theme-context';
 import MobileNavigation from './MobileNavigation';
 import DailyEmberWidget from './DailyEmberWidget';
+import TopSearchBar from './ui/TopSearchBar';
+import CommandPaletteModal from './ui/CommandPaletteModal';
 
 // User Profile Dropdown Component
 function UserProfileDropdown({ user, onMobileMenuClose }) {
@@ -606,6 +608,28 @@ export default function Layout({ children, user = null, showSearch = false }) {
   const { theme, toggleTheme } = useTheme();
   const [searchQuery, setSearchQuery] = useState('');
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  // Command palette (redesign-v2 sub-convoy #3, 2026-06-04). Opens
+  // globally on ⌘K / Ctrl+K for authenticated users. The keyboard
+  // listener is attached at Layout-scope (not _app.js) so it doesn't
+  // fire on the public marketing pages that don't mount <Layout>.
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
+
+  useEffect(() => {
+    if (!user) return undefined;
+    const handler = (event) => {
+      const isShortcut =
+        (event.metaKey || event.ctrlKey) &&
+        !event.shiftKey &&
+        !event.altKey &&
+        event.key.toLowerCase() === 'k';
+      if (isShortcut) {
+        event.preventDefault();
+        setIsCommandPaletteOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [user]);
 
   return (
     <div className="flex h-screen">
@@ -871,39 +895,22 @@ export default function Layout({ children, user = null, showSearch = false }) {
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col pb-16 md:pb-0">
-        {/* Top Header - Only show search on dashboard */}
-        {showSearch && (
-          <header
-            className="p-6"
-            style={{
-              background: 'var(--glass-surface-mid)',
-              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(--rim-light-outer)',
-            }}
-          >
-            <div className="flex items-center">
-              <div className="flex-1 max-w-2xl">
-                <div className="relative">
-                  <input
-                    type="text"
-                    placeholder="Search cards, decks, or lists..."
-                    className="search-bar pr-12"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                  />
-                  <div className="absolute inset-y-0 right-0 flex items-center pr-4">
-                    <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>⌘F</span>
-                  </div>
-                  <div className="absolute inset-y-0 left-0 flex items-center pl-4">
-                    <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </header>
+        {/* Global top bar — redesign-v2 sub-convoy #3 (2026-06-04).
+            Rendered for ALL authenticated pages so the search +
+            notifications + user-menu chrome is consistent everywhere
+            (operator decision § 7.3 of the umbrella convoy: "sweep to
+            all authenticated pages in this convoy"). Unauthenticated
+            visitors see no top bar — public landing has its own
+            marketing header. The legacy `showSearch` prop is honored
+            via fall-through but no longer drives visibility; it can
+            be removed in a cleanup convoy along with the dead
+            `searchQuery` state. */}
+        {user && (
+          <TopSearchBar
+            user={user}
+            notificationCount={user?.unreadNotifications ?? 0}
+            onOpenCommandPalette={() => setIsCommandPaletteOpen(true)}
+          />
         )}
 
         {/* Page Content */}
@@ -911,6 +918,11 @@ export default function Layout({ children, user = null, showSearch = false }) {
           {children}
         </main>
       </div>
+
+      <CommandPaletteModal
+        open={isCommandPaletteOpen}
+        onClose={() => setIsCommandPaletteOpen(false)}
+      />
     </div>
   );
 }

components/ui/CommandPaletteModal.js

@@ -0,0 +1,139 @@
+import { useRef, useState } from 'react';
+import { useRouter } from 'next/router';
+import Modal from './Modal';
+
+/**
+ * CommandPaletteModal — the surface that opens on Cmd+K (or Ctrl+K).
+ *
+ * From the redesign-v2 mockup's top-bar Cmd+K hint. Operator decided
+ * (§ 7.2 of the umbrella convoy) to ship the keyboard handler + a
+ * minimum-viable palette in this convoy, deferring federated search
+ * across cards/decks/lists to a follow-up.
+ *
+ * What it does today:
+ *   - Single search input, auto-focused on open
+ *   - Submit on Enter → routes to /cards?q=<query> (the closest
+ *     existing search surface). Closes the palette.
+ *   - 3 placeholder "Quick actions" rows below the input, each
+ *     routing to an existing page (Dashboard, Cards, Scanner).
+ *   - Escape closes (delegated to the underlying <Modal>).
+ *
+ * What it does NOT do (deferred):
+ *   - Live result preview as you type
+ *   - "Recent searches" from a backend store
+ *   - Cross-resource ranked results (cards + decks + lists + users)
+ *
+ * Props:
+ *   open      boolean — controls visibility
+ *   onClose   () => void
+ */
+const QUICK_ACTIONS = [
+  { label: 'Go to Dashboard', href: '/dashboard', keywords: ['home', 'dash'] },
+  { label: 'Browse Cards', href: '/cards', keywords: ['catalog', 'all'] },
+  { label: 'Open Scanner', href: '/scanner', keywords: ['scan', 'camera'] },
+];
+
+export default function CommandPaletteModal({ open, onClose }) {
+  const router = useRouter();
+  const inputRef = useRef(null);
+  // Reset query when the modal opens. We track the previous `open` and
+  // clear synchronously during render (per the react-hooks/set-state-
+  // in-effect lint rule — the same pattern used elsewhere in the
+  // codebase, e.g. NavigationContent's path-change resetter).
+  const [query, setQuery] = useState('');
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open && !wasOpen) {
+    setWasOpen(true);
+    setQuery('');
+  } else if (!open && wasOpen) {
+    setWasOpen(false);
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const trimmed = query.trim();
+    if (trimmed.length === 0) return;
+    onClose?.();
+    router.push({ pathname: '/cards', query: { q: trimmed } });
+  };
+
+  const handleQuickAction = (href) => {
+    onClose?.();
+    router.push(href);
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Search"
+      description="Search cards, decks, and lists. Press Enter to search Cards."
+      size="md"
+      initialFocusRef={inputRef}
+      hideCloseButton
+    >
+      <form onSubmit={handleSubmit}>
+        <div className="relative mb-4">
+          <span
+            className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+            aria-hidden="true"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              style={{ color: 'var(--text-secondary)' }}
+            >
+              <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>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search cards, decks, lists, users..."
+            aria-label="Search query"
+            className="w-full pl-10 pr-4 py-3 rounded-xl text-base focus:outline-none focus:ring-2"
+            style={{
+              backgroundColor: 'var(--input-bg)',
+              color: 'var(--input-text)',
+              border: '1px solid var(--input-border)',
+              '--tw-ring-color': 'var(--accent-ember)',
+            }}
+          />
+        </div>
+        <div>
+          <div
+            className="text-xs font-semibold uppercase tracking-wide mb-2"
+            style={{ color: 'var(--text-secondary)' }}
+          >
+            Quick actions
+          </div>
+          <div className="space-y-1">
+            {QUICK_ACTIONS.map((action) => (
+              <button
+                key={action.href}
+                type="button"
+                onClick={() => handleQuickAction(action.href)}
+                className="w-full text-left px-3 py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 nav-item-hover"
+                style={{
+                  color: 'var(--text-primary)',
+                  '--tw-ring-color': 'var(--accent-ember)',
+                }}
+              >
+                {action.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+}

components/ui/TopSearchBar.js

@@ -0,0 +1,233 @@
+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
+      className="px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4"
+      style={{
+        background: 'var(--glass-surface-mid)',
+        backdropFilter: 'blur(12px) saturate(180%)',
+        WebkitBackdropFilter: 'blur(12px) saturate(180%)',
+        boxShadow:
+          'var(--rim-light-inner), 0 1px 0 var(--border)',
+      }}
+    >
+      {/* 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>
+  );
+}

components/ui/index.js

@@ -4,3 +4,5 @@ export { default as Button } from './Button';
 export { default as Input } from './Input';
 export { default as SearchBar } from './SearchBar';
 export { default as StatCard } from './StatCard';
+export { default as TopSearchBar } from './TopSearchBar';
+export { default as CommandPaletteModal } from './CommandPaletteModal';

pages/community/collections.js

@@ -198,7 +198,7 @@ export default function CommunityCollections() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="page-header-glass p-6">
+      <div className="px-6 pt-6 pb-2">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>

pages/dashboard.js

@@ -80,7 +80,7 @@ export default function Dashboard() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="page-header-glass p-4 sm:p-6">
+      <div className="px-4 sm:px-6 pt-6 pb-2">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>

pages/my-cards.js

@@ -262,7 +262,7 @@ export default function MyCards() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="page-header-glass p-4 sm:p-6">
+      <div className="px-4 sm:px-6 pt-6 pb-2">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>