deckhearth/components/ui/TopSearchBar.js

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>
  );
}