feat: rebuild HUNT page with radar-style mobile layout

frontend/src/app/terminal/hunt/page.tsx

@@ -1,58 +1,374 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
+import { useStore } from '@/lib/store'
 import { Sidebar } from '@/components/Sidebar'
 import { Toast, useToast } from '@/components/Toast'
-import { useStore } from '@/lib/store'
 import { HuntStrategyChips, type HuntTab } from '@/components/hunt/HuntStrategyChips'
 import { SniperTab } from '@/components/hunt/SniperTab'
 import { TrendSurferTab } from '@/components/hunt/TrendSurferTab'
 import { BrandableForgeTab } from '@/components/hunt/BrandableForgeTab'
+import {
+  Eye,
+  Gavel,
+  Crosshair,
+  Zap,
+  Target,
+  TrendingUp,
+  Settings,
+  Sparkles,
+  Menu,
+  Tag,
+  Coins,
+  Shield,
+  LogOut,
+  Crown,
+  X,
+  Briefcase,
+} from 'lucide-react'
+import clsx from 'clsx'
+import Link from 'next/link'
+import Image from 'next/image'
+
+// ============================================================================
+// MAIN PAGE
+// ============================================================================
 
 export default function HuntPage() {
-  const { checkAuth } = useStore()
+  const { isAuthenticated, isLoading: authLoading, user, subscription, logout, checkAuth, domains } = useStore()
-  const { toast, hideToast, showToast } = useToast()
+  const { toast, showToast, hideToast } = useToast()
   const [tab, setTab] = useState<HuntTab>('sniper')
 
+  // Mobile Menu State
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  // Check auth on mount
   useEffect(() => {
     checkAuth()
   }, [checkAuth])
 
+  // Computed
+  const availableDomains = domains?.filter(d => d.is_available) || []
+  const totalDomains = domains?.length || 0
+
+  // Nav Items for Mobile Bottom Bar
+  const mobileNavItems = [
+    { href: '/terminal/radar', label: 'Radar', icon: Target, active: false },
+    { href: '/terminal/hunt', label: 'Hunt', icon: Crosshair, active: true },
+    { href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
+    { href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
+  ]
+
+  // Full Navigation for Drawer
+  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
+  const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap
+
+  const drawerNavSections = [
+    {
+      title: 'Discover',
+      items: [
+        { href: '/terminal/radar', label: 'Radar', icon: Target },
+        { href: '/terminal/hunt', label: 'Hunt', icon: Crosshair },
+        { href: '/terminal/market', label: 'Market', icon: Gavel },
+        { href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
+      ]
+    },
+    {
+      title: 'Manage',
+      items: [
+        { href: '/terminal/watchlist', label: 'Watchlist', icon: Eye },
+        { href: '/terminal/portfolio', label: 'Portfolio', icon: Briefcase },
+        { href: '/terminal/cfo', label: 'CFO', icon: Shield },
+        { href: '/terminal/sniper', label: 'Sniper', icon: Target },
+      ]
+    },
+    {
+      title: 'Monetize',
+      items: [
+        { href: '/terminal/yield', label: 'Yield', icon: Coins, isNew: true },
+        { href: '/terminal/listing', label: 'For Sale', icon: Tag },
+      ]
+    }
+  ]
+
+  // Tab labels for header
+  const tabLabels: Record<HuntTab, string> = {
+    sniper: 'Closeout Sniper',
+    trends: 'Trend Surfer',
+    forge: 'Brandable Forge',
+  }
+
   return (
     <div className="min-h-screen bg-[#020202]">
+      {/* Desktop Sidebar */}
+      <div className="hidden lg:block">
         <Sidebar />
+      </div>
 
-      <main className="lg:ml-72">
+      {/* Main Content */}
-        {/* Header */}
+      <main className="lg:pl-[240px]">
-        <section className="px-4 lg:px-10 pt-8 pb-5 border-b border-white/[0.08]">
+
-          <div className="flex items-end justify-between gap-6 flex-wrap">
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
-            <div>
+        {/* MOBILE HEADER - Techy Angular */}
-              <p className="text-[10px] font-mono text-white/40 uppercase tracking-[0.25em]">PHASE 1</p>
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
-              <h1 className="text-3xl font-bold text-white tracking-tight">HUNT</h1>
+        <header
-              <p className="text-white/40 text-sm font-mono mt-2 max-w-2xl">
+          className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-md border-b border-white/[0.08]"
+          style={{ paddingTop: 'env(safe-area-inset-top)' }}
+        >
+          <div className="px-4 py-3">
+            {/* Top Row: Brand + Stats */}
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
+                <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Domain Hunt</span>
+              </div>
+              <div className="flex items-center gap-2 text-[10px] font-mono text-white/40">
+                <span className="text-accent">{tabLabels[tab]}</span>
+              </div>
+            </div>
+
+            {/* Stats Grid */}
+            <div className="grid grid-cols-3 gap-2">
+              <div className="bg-white/[0.02] border border-white/[0.08] p-2">
+                <div className="text-lg font-bold text-white tabular-nums">{totalDomains}</div>
+                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Tracked</div>
+              </div>
+              <div className="bg-accent/[0.05] border border-accent/20 p-2">
+                <div className="text-lg font-bold text-accent tabular-nums">{availableDomains.length}</div>
+                <div className="text-[9px] font-mono text-accent/60 uppercase tracking-wider">Available</div>
+              </div>
+              <button
+                onClick={() => {
+                  const next: HuntTab = tab === 'sniper' ? 'trends' : tab === 'trends' ? 'forge' : 'sniper'
+                  setTab(next)
+                }}
+                className="bg-white/[0.02] border border-white/[0.08] p-2 text-left hover:bg-white/[0.04] active:bg-white/[0.06] transition-colors"
+              >
+                <div className="text-[10px] font-bold text-white/70 truncate">{tabLabels[tab]}</div>
+                <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider">Strategy</div>
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* DESKTOP HERO + STRATEGY CHIPS */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="px-4 lg:px-10 pt-4 lg:pt-10 pb-4">
+          {/* Desktop Hero Text */}
+          <div className="hidden lg:block mb-8">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
+              <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Phase 1 · Discovery</span>
+            </div>
+            <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em] text-white mb-2">
+              Domain Hunt
+            </h1>
+            <p className="text-white/40 text-sm font-mono max-w-lg">
               Find → Analyze → Decide. Strategy-first discovery for domainers.
             </p>
           </div>
+
+          {/* Strategy Chips - Desktop */}
+          <div className="hidden lg:block">
             <HuntStrategyChips tab={tab} onChange={setTab} />
           </div>
+
+          {/* Strategy Chips - Mobile (horizontal scroll) */}
+          <div className="lg:hidden -mx-4 px-4 overflow-x-auto pb-2">
+            <div className="flex gap-2 min-w-max">
+              {(['sniper', 'trends', 'forge'] as HuntTab[]).map((t) => {
+                const active = tab === t
+                const labels: Record<HuntTab, { label: string; hint: string }> = {
+                  sniper: { label: 'SNIPER', hint: '< $10 · 5y+' },
+                  trends: { label: 'TRENDS', hint: 'Keywords + Typos' },
+                  forge: { label: 'FORGE', hint: 'Brandables' },
+                }
+                return (
+                  <button
+                    key={t}
+                    onClick={() => setTab(t)}
+                    className={clsx(
+                      'px-3 py-2 border text-left transition-colors shrink-0',
+                      active ? 'border-accent/30 bg-accent/10 text-accent' : 'border-white/10 text-white/50 active:bg-white/5'
+                    )}
+                  >
+                    <div className="text-[10px] font-bold uppercase tracking-wider font-mono">{labels[t].label}</div>
+                    <div className="text-[9px] font-mono mt-0.5 text-white/30">{labels[t].hint}</div>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
         </section>
 
-        {/* Content */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
-        <section className="px-4 lg:px-10 py-6 pb-24">
+        {/* TAB CONTENT */}
-          {tab === 'sniper' ? <SniperTab showToast={showToast} /> : null}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
-          {tab === 'trends' ? <TrendSurferTab showToast={showToast} /> : null}
+        <section className="px-4 lg:px-10 py-4 pb-28 lg:pb-10">
-          {tab === 'forge' ? <BrandableForgeTab showToast={showToast} /> : null}
+          {tab === 'sniper' && <SniperTab showToast={showToast} />}
+          {tab === 'trends' && <TrendSurferTab showToast={showToast} />}
+          {tab === 'forge' && <BrandableForgeTab showToast={showToast} />}
         </section>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE BOTTOM NAV */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <nav
+          className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#020202] border-t border-white/[0.08]"
+          style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+        >
+          <div className="flex items-stretch h-14">
+            {mobileNavItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={clsx(
+                  "flex-1 flex flex-col items-center justify-center gap-0.5 relative transition-colors",
+                  item.active ? "text-accent" : "text-white/40 active:text-white/80"
+                )}
+              >
+                {item.active && (
+                  <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 bg-accent" />
+                )}
+                <item.icon className="w-5 h-5" />
+                <span className="text-[9px] font-mono uppercase tracking-wider">{item.label}</span>
+              </Link>
+            ))}
+
+            {/* Menu Button */}
+            <button
+              onClick={() => setMenuOpen(true)}
+              className="flex-1 flex flex-col items-center justify-center gap-0.5 text-white/40 active:text-white/80 transition-all"
+            >
+              <Menu className="w-5 h-5" />
+              <span className="text-[9px] font-mono uppercase tracking-wider">Menu</span>
+            </button>
+          </div>
+        </nav>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE DRAWER */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {menuOpen && (
+          <div className="lg:hidden fixed inset-0 z-[100]">
+            {/* Backdrop */}
+            <div
+              className="absolute inset-0 bg-black/80 animate-in fade-in duration-200"
+              onClick={() => setMenuOpen(false)}
+            />
+
+            {/* Drawer Panel */}
+            <div className="absolute top-0 right-0 bottom-0 w-[80%] max-w-[300px] bg-[#0A0A0A] border-l border-white/[0.08] animate-in slide-in-from-right duration-300 flex flex-col" style={{ paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }}>
+
+              {/* Drawer Header */}
+              <div className="flex items-center justify-between p-4 border-b border-white/[0.08]">
+                <div className="flex items-center gap-3">
+                  <Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
+                  <div>
+                    <h2 className="text-sm font-bold text-white tracking-wider">POUNCE</h2>
+                    <p className="text-[9px] text-white/40 font-mono uppercase tracking-widest">Terminal v1.0</p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setMenuOpen(false)}
+                  className="w-8 h-8 flex items-center justify-center border border-white/10 text-white/60 hover:text-white active:bg-white/5 transition-all"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+
+              {/* Navigation Sections */}
+              <div className="flex-1 overflow-y-auto py-4">
+                {drawerNavSections.map((section) => (
+                  <div key={section.title} className="mb-4">
+                    <div className="flex items-center gap-2 px-4 mb-2">
+                      <div className="w-1 h-3 bg-accent" />
+                      <span className="text-[9px] font-bold text-white/30 uppercase tracking-[0.2em]">{section.title}</span>
+                    </div>
+                    <div>
+                      {section.items.map((item: any) => (
+                        <Link
+                          key={item.href}
+                          href={item.href}
+                          onClick={() => setMenuOpen(false)}
+                          className="flex items-center gap-3 px-4 py-2.5 text-white/60 active:text-white active:bg-white/[0.03] transition-colors border-l-2 border-transparent active:border-accent"
+                        >
+                          <item.icon className="w-4 h-4 text-white/30" />
+                          <span className="text-sm font-medium flex-1">{item.label}</span>
+                          {item.isNew && (
+                            <span className="px-1.5 py-0.5 text-[8px] font-bold bg-accent text-black">NEW</span>
+                          )}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+
+                {/* Settings */}
+                <div className="pt-3 border-t border-white/[0.08] mx-4">
+                  <Link
+                    href="/terminal/settings"
+                    onClick={() => setMenuOpen(false)}
+                    className="flex items-center gap-3 py-2.5 text-white/50 active:text-white transition-colors"
+                  >
+                    <Settings className="w-4 h-4" />
+                    <span className="text-sm font-medium">Settings</span>
+                  </Link>
+
+                  {user?.is_admin && (
+                    <Link
+                      href="/admin"
+                      onClick={() => setMenuOpen(false)}
+                      className="flex items-center gap-3 py-2.5 text-amber-500/70 active:text-amber-400 transition-colors"
+                    >
+                      <Shield className="w-4 h-4" />
+                      <span className="text-sm font-medium">Admin</span>
+                    </Link>
+                  )}
+                </div>
+              </div>
+
+              {/* User Card */}
+              <div className="p-4 bg-white/[0.02] border-t border-white/[0.08]">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
+                    <TierIcon className="w-4 h-4 text-accent" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-bold text-white truncate">
+                      {user?.name || user?.email?.split('@')[0] || 'User'}
+                    </p>
+                    <p className="text-[9px] font-mono text-white/40 uppercase tracking-wider">{tierName}</p>
+                  </div>
+                </div>
+
+                {tierName === 'Scout' && (
+                  <Link
+                    href="/pricing"
+                    onClick={() => setMenuOpen(false)}
+                    className="flex items-center justify-center gap-2 w-full py-2.5 bg-accent text-black text-xs font-bold uppercase tracking-wider active:scale-[0.98] transition-all mb-2"
+                  >
+                    <Sparkles className="w-3 h-3" />
+                    Upgrade
+                  </Link>
+                )}
+
+                <button
+                  onClick={() => { logout(); setMenuOpen(false) }}
+                  className="flex items-center justify-center gap-2 w-full py-2 border border-white/10 text-white/40 text-[10px] font-mono uppercase tracking-wider active:bg-white/5 transition-all"
+                >
+                  <LogOut className="w-3 h-3" />
+                  Sign out
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </main>
 
-      {toast && (
+      {/* Toast */}
-        <Toast
+      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
-          message={toast.message}
-          type={toast.type}
-          onClose={hideToast}
-        />
-      )}
     </div>
   )
 }
-