Radar: Fix hydration, award-winning mobile PWA design

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

@@ -1,16 +1,13 @@
 'use client'
 
-import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { useStore } from '@/lib/store'
 import { api } from '@/lib/api'
-import { CommandCenterLayout } from '@/components/CommandCenterLayout'
+import { Sidebar } from '@/components/Sidebar'
 import { Toast, useToast } from '@/components/Toast'
 import {
   Eye,
   Gavel,
-  ExternalLink,
-  Plus,
-  Activity,
   ArrowRight,
   CheckCircle2,
   XCircle,
@@ -21,13 +18,14 @@ import {
   Target,
   Search,
   X,
-  Home,
   TrendingUp,
   Settings,
-  Bell,
-  ChevronRight,
   Clock,
-  Wifi
+  Wifi,
+  ChevronRight,
+  Sparkles,
+  Radio,
+  Activity
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -56,288 +54,12 @@ interface SearchResult {
   auctionData?: HotAuction
 }
 
-// ============================================================================
-// MOBILE BOTTOM NAV
-// ============================================================================
-
-function MobileBottomNav({ currentPath }: { currentPath: string }) {
-  const navItems = [
-    { href: '/terminal/radar', label: 'Radar', icon: Target },
-    { href: '/terminal/market', label: 'Market', icon: Gavel },
-    { href: '/terminal/watchlist', label: 'Watch', icon: Eye },
-    { href: '/terminal/intel', label: 'Intel', icon: TrendingUp },
-    { href: '/terminal/settings', label: 'Settings', icon: Settings },
-  ]
-  
-  return (
-    <nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0A0A0A]/95 backdrop-blur-xl border-t border-white/[0.08] safe-area-bottom">
-      <div className="flex items-stretch">
-        {navItems.map((item) => {
-          const isActive = currentPath === item.href
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={clsx(
-                "flex-1 flex flex-col items-center justify-center py-3 gap-1 transition-colors",
-                isActive ? "text-accent" : "text-white/40"
-              )}
-            >
-              <item.icon className="w-5 h-5" />
-              <span className="text-[10px] font-medium">{item.label}</span>
-              {isActive && <div className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-accent" />}
-            </Link>
-          )
-        })}
-      </div>
-    </nav>
-  )
-}
-
-// ============================================================================
-// MOBILE HEADER
-// ============================================================================
-
-function MobileHeader({ stats }: { stats: { tracking: number; available: number } }) {
-  return (
-    <header className="lg:hidden sticky top-0 z-40 bg-[#020202]/95 backdrop-blur-xl border-b border-white/[0.08] safe-area-top">
-      <div className="flex items-center justify-between px-4 py-3">
-        <div className="flex items-center gap-3">
-          <Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
-          <div>
-            <h1 className="text-sm font-bold text-white">Radar</h1>
-            <div className="flex items-center gap-1.5">
-              <div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
-              <span className="text-[10px] text-white/40">Live</span>
-            </div>
-          </div>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className="text-right">
-            <div className="text-xs font-bold text-white">{stats.tracking}</div>
-            <div className="text-[9px] text-white/30">tracking</div>
-          </div>
-          <div className="text-right">
-            <div className="text-xs font-bold text-accent">{stats.available}</div>
-            <div className="text-[9px] text-white/30">available</div>
-          </div>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-// ============================================================================
-// MOBILE SEARCH CARD
-// ============================================================================
-
-function MobileSearchCard({
-  searchQuery,
-  setSearchQuery,
-  searchResult,
-  searchFocused,
-  setSearchFocused,
-  handleAddToWatchlist,
-  addingToWatchlist,
-}: {
-  searchQuery: string
-  setSearchQuery: (q: string) => void
-  searchResult: SearchResult | null
-  searchFocused: boolean
-  setSearchFocused: (f: boolean) => void
-  handleAddToWatchlist: () => void
-  addingToWatchlist: boolean
-}) {
-  return (
-    <div className="px-4 py-5">
-      {/* Search Input - Full width, app-like */}
-      <div className={clsx(
-        "relative bg-white/[0.03] border-2 transition-all duration-200",
-        searchFocused ? "border-accent/50" : "border-white/[0.08]"
-      )}>
-        <div className="flex items-center">
-          <Search className="w-5 h-5 text-white/30 ml-4" />
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onFocus={() => setSearchFocused(true)}
-            onBlur={() => setSearchFocused(false)}
-            placeholder="Search domains..."
-            className="flex-1 bg-transparent px-3 py-4 text-base text-white placeholder:text-white/25 outline-none"
-          />
-          {searchQuery && (
-            <button 
-              onClick={() => setSearchQuery('')}
-              className="p-4 text-white/30 active:text-white"
-            >
-              <X className="w-5 h-5" />
-            </button>
-          )}
-        </div>
-      </div>
-      
-      {/* Results - App-like card */}
-      {searchResult && (
-        <div className="mt-4 animate-in slide-in-from-top-2 fade-in duration-200">
-          {searchResult.loading ? (
-            <div className="flex items-center justify-center gap-3 py-8 bg-white/[0.02] border border-white/[0.05]">
-              <Loader2 className="w-5 h-5 animate-spin text-accent" />
-              <span className="text-sm text-white/50">Checking...</span>
-            </div>
-          ) : (
-            <div className={clsx(
-              "border-2 overflow-hidden",
-              searchResult.is_available ? "border-accent/40 bg-accent/5" : "border-white/[0.08] bg-white/[0.02]"
-            )}>
-              {/* Status Banner */}
-              <div className={clsx(
-                "px-4 py-3 flex items-center justify-between",
-                searchResult.is_available ? "bg-accent/10" : "bg-white/[0.02]"
-              )}>
-                <div className="flex items-center gap-3">
-                  {searchResult.is_available ? (
-                    <CheckCircle2 className="w-6 h-6 text-accent" />
-                  ) : (
-                    <XCircle className="w-6 h-6 text-white/30" />
-                  )}
-                  <div>
-                    <div className="text-base font-semibold text-white">{searchResult.domain}</div>
-                    {!searchResult.is_available && searchResult.registrar && (
-                      <div className="text-xs text-white/40">{searchResult.registrar}</div>
-                    )}
-                  </div>
-                </div>
-                <span className={clsx(
-                  "text-xs font-bold px-3 py-1.5",
-                  searchResult.is_available ? "bg-accent text-black" : "bg-white/10 text-white/50"
-                )}>
-                  {searchResult.is_available ? 'Available' : 'Taken'}
-                </span>
-              </div>
-              
-              {/* Actions - Large touch targets */}
-              <div className="p-4 space-y-3">
-                <button
-                  onClick={handleAddToWatchlist}
-                  disabled={addingToWatchlist}
-                  className={clsx(
-                    "w-full py-4 text-sm font-semibold flex items-center justify-center gap-2 transition-colors active:scale-[0.98]",
-                    searchResult.is_available 
-                      ? "border border-white/20 text-white/80 active:bg-white/5"
-                      : "border-2 border-accent text-accent active:bg-accent/10"
-                  )}
-                >
-                  {addingToWatchlist ? <Loader2 className="w-5 h-5 animate-spin" /> : <Eye className="w-5 h-5" />}
-                  {searchResult.is_available ? 'Add to Watchlist' : 'Track for Availability'}
-                </button>
-                
-                {searchResult.is_available && (
-                  <a
-                    href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
-                    target="_blank"
-                    className="w-full py-4 bg-accent text-black text-sm font-bold flex items-center justify-center gap-2 active:bg-white active:scale-[0.98] transition-all"
-                  >
-                    Register Now
-                    <ArrowRight className="w-5 h-5" />
-                  </a>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ============================================================================
-// MOBILE AUCTION CARD
-// ============================================================================
-
-function MobileAuctionCard({ auction }: { auction: HotAuction }) {
-  return (
-    <a
-      href={auction.affiliate_url || '#'}
-      target="_blank"
-      className="flex items-center gap-4 px-4 py-4 bg-white/[0.02] border-b border-white/[0.05] active:bg-white/[0.05] transition-colors"
-    >
-      <div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
-        <Gavel className="w-4 h-4 text-accent" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="text-sm font-medium text-white truncate">{auction.domain}</div>
-        <div className="flex items-center gap-2 text-[11px] text-white/40">
-          <span>{auction.platform}</span>
-          <span className="text-white/20">·</span>
-          <span className="flex items-center gap-1">
-            <Clock className="w-3 h-3" />
-            {auction.time_remaining}
-          </span>
-        </div>
-      </div>
-      <div className="text-right shrink-0">
-        <div className="text-base font-bold text-accent font-mono">${auction.current_bid.toLocaleString()}</div>
-        <div className="text-[10px] text-white/30">current bid</div>
-      </div>
-      <ChevronRight className="w-4 h-4 text-white/20" />
-    </a>
-  )
-}
-
-// ============================================================================
-// MOBILE QUICK ACTION
-// ============================================================================
-
-function MobileQuickAction({ href, icon: Icon, label, badge }: { href: string; icon: any; label: string; badge?: number }) {
-  return (
-    <Link
-      href={href}
-      className="flex flex-col items-center justify-center gap-2 py-5 bg-white/[0.02] border border-white/[0.05] active:bg-white/[0.05] active:border-accent/30 transition-all relative"
-    >
-      <Icon className="w-6 h-6 text-white/50" />
-      <span className="text-xs text-white/70">{label}</span>
-      {badge !== undefined && badge > 0 && (
-        <span className="absolute top-2 right-2 w-5 h-5 bg-accent text-black text-[10px] font-bold flex items-center justify-center">
-          {badge}
-        </span>
-      )}
-    </Link>
-  )
-}
-
-// ============================================================================
-// LIVE TICKER (Desktop)
-// ============================================================================
-
-function LiveTicker({ items }: { items: { label: string; value: string; highlight?: boolean }[] }) {
-  return (
-    <div className="hidden lg:block relative border-y border-white/[0.08] bg-black/40 overflow-hidden">
-      <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-[#020202] to-transparent z-10" />
-      <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-[#020202] to-transparent z-10" />
-      
-      <div className="flex animate-[ticker_30s_linear_infinite] py-2.5" style={{ width: 'max-content' }}>
-        {[...items, ...items, ...items].map((item, i) => (
-          <div key={i} className="flex items-center gap-3 px-6 border-r border-white/[0.08]">
-            <span className="text-[10px] font-mono tracking-wide text-white/30">{item.label}</span>
-            <span className={clsx(
-              "text-xs font-mono font-medium",
-              item.highlight ? "text-accent" : "text-white/70"
-            )}>{item.value}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
 // ============================================================================
 // MAIN PAGE
 // ============================================================================
 
 export default function RadarPage() {
-  const { isAuthenticated, user, domains, addDomain } = useStore()
+  const { isAuthenticated, domains, addDomain } = useStore()
   const { toast, showToast, hideToast } = useToast()
   
   const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
@@ -348,12 +70,13 @@ export default function RadarPage() {
   const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
   const [addingToWatchlist, setAddingToWatchlist] = useState(false)
   const [searchFocused, setSearchFocused] = useState(false)
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   // Load Data
   const loadDashboardData = useCallback(async () => {
     try {
       const summary = await api.getDashboardSummary()
-      setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 5))
+      setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 6))
       setMarketStats({
         totalAuctions: summary.market.total_auctions || 0,
         endingSoon: summary.market.ending_soon || 0,
@@ -367,6 +90,7 @@ export default function RadarPage() {
 
   useEffect(() => {
     if (isAuthenticated) loadDashboardData()
+    else setLoadingData(false)
   }, [isAuthenticated, loadDashboardData])
 
   // Search
@@ -401,11 +125,11 @@ export default function RadarPage() {
     setAddingToWatchlist(true)
     try {
       await addDomain(searchQuery.trim())
-      showToast(`Target acquired: ${searchQuery.trim()}`, 'success')
+      showToast(`Added: ${searchQuery.trim()}`, 'success')
       setSearchQuery('')
       setSearchResult(null)
     } catch (err: any) {
-      showToast(err.message || 'Mission failed', 'error')
+      showToast(err.message || 'Failed', 'error')
     } finally {
       setAddingToWatchlist(false)
     }
@@ -423,143 +147,86 @@ export default function RadarPage() {
   const availableDomains = domains?.filter(d => d.is_available) || []
   const totalDomains = domains?.length || 0
 
-  const tickerItems = [
-    { label: 'Status', value: 'ONLINE', highlight: true },
-    { label: 'Tracking', value: totalDomains.toString() },
-    { label: 'Available', value: availableDomains.length.toString(), highlight: availableDomains.length > 0 },
-    { label: 'Auctions', value: marketStats.totalAuctions.toString() },
+  // Nav Items for Mobile
+  const mobileNavItems = [
+    { href: '/terminal/radar', label: 'Radar', icon: Target, active: true },
+    { href: '/terminal/market', label: 'Market', icon: Gavel, active: false },
+    { href: '/terminal/watchlist', label: 'Watch', icon: Eye, active: false },
+    { href: '/terminal/intel', label: 'Intel', icon: TrendingUp, active: false },
+    { href: '/terminal/settings', label: 'More', icon: Settings, active: false },
   ]
 
-  // ============================================================================
-  // MOBILE VIEW
-  // ============================================================================
-  
-  const MobileView = () => (
-    <div className="lg:hidden min-h-screen bg-[#020202] pb-20">
-      {/* Mobile Header */}
-      <MobileHeader stats={{ tracking: totalDomains, available: availableDomains.length }} />
-      
-      {/* Search Section */}
-      <MobileSearchCard 
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-        searchResult={searchResult}
-        searchFocused={searchFocused}
-        setSearchFocused={setSearchFocused}
-        handleAddToWatchlist={handleAddToWatchlist}
-        addingToWatchlist={addingToWatchlist}
-      />
-      
-      {/* Quick Actions Grid */}
-      <div className="px-4 pb-5">
-        <div className="grid grid-cols-3 gap-2">
-          <MobileQuickAction href="/terminal/watchlist" icon={Eye} label="Watchlist" badge={availableDomains.length} />
-          <MobileQuickAction href="/terminal/market" icon={Gavel} label="Market" />
-          <MobileQuickAction href="/terminal/intel" icon={TrendingUp} label="Intel" />
-        </div>
+  return (
+    <div className="min-h-screen bg-[#020202]">
+      {/* Desktop Sidebar */}
+      <div className="hidden lg:block">
+        <Sidebar />
       </div>
       
-      {/* Live Status Bar */}
-      <div className="px-4 py-3 bg-white/[0.02] border-y border-white/[0.05] flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Wifi className="w-4 h-4 text-accent" />
-          <span className="text-xs text-white/50">Live monitoring active</span>
-        </div>
-        <div className="flex items-center gap-4 text-xs">
-          <span className="text-white/30">{marketStats.totalAuctions} auctions</span>
-          <span className="text-accent font-medium">{marketStats.endingSoon} ending soon</span>
-        </div>
-      </div>
+      {/* Main Content */}
+      <main className="lg:pl-[240px]">
         
-      {/* Hot Auctions Section */}
-      <div className="pt-5">
-        <div className="flex items-center justify-between px-4 pb-3">
-          <h2 className="text-sm font-semibold text-white flex items-center gap-2">
-            <Activity className="w-4 h-4 text-accent" />
-            Hot Auctions
-          </h2>
-          <Link href="/terminal/market" className="text-xs text-accent active:text-white transition-colors">
-            View all
-          </Link>
-        </div>
-        
-        {loadingData ? (
-          <div className="flex items-center justify-center py-12">
-            <Loader2 className="w-6 h-6 text-accent animate-spin" />
-          </div>
-        ) : hotAuctions.length > 0 ? (
-          <div>
-            {hotAuctions.map((auction, i) => (
-              <MobileAuctionCard key={i} auction={auction} />
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-12 text-white/30 text-sm">
-            No active auctions at the moment
-          </div>
-        )}
-      </div>
-      
-      {/* Bottom Navigation */}
-      <MobileBottomNav currentPath="/terminal/radar" />
-      
-      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
-    </div>
-  )
-
-  // ============================================================================
-  // DESKTOP VIEW (Original with minor tweaks)
-  // ============================================================================
-  
-  const DesktopView = () => (
-    <CommandCenterLayout minimal>
-      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
-      
-      {/* HERO */}
-      <section className="pt-6 lg:pt-8 pb-10">
-        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
-          
-          {/* Left: Typography */}
-          <div className="space-y-5">
-            <div className="inline-flex items-center gap-3">
-              <div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse shadow-[0_0_10px_rgba(16,185,129,0.8)]" />
-              <span className="text-[10px] font-mono tracking-[0.15em] text-accent">Intelligence Hub</span>
-            </div>
-            
-            <h1 className="font-display text-[2rem] sm:text-[2.5rem] lg:text-[2.75rem] leading-[1] tracking-[-0.02em]">
-              <span className="block text-white">Domain Radar</span>
-              <span className="block text-white/30">Find your next acquisition.</span>
-            </h1>
-            
-            <p className="text-sm text-white/50 max-w-md font-light leading-relaxed">
-              Real-time monitoring across {marketStats.totalAuctions.toLocaleString()}+ auctions. 
-              <span className="text-white/70"> Your targets. Your intel.</span>
-            </p>
-            
-            {/* Stats Row */}
-            <div className="flex gap-8 lg:gap-10 pt-5 border-t border-white/[0.08]">
-              <div>
-                <div className="text-xl lg:text-2xl font-display text-white">{totalDomains}</div>
-                <div className="text-[9px] tracking-wide text-white/30 font-mono mt-1">Tracking</div>
-              </div>
-              <div>
-                <div className="text-xl lg:text-2xl font-display text-accent">{availableDomains.length}</div>
-                <div className="text-[9px] tracking-wide text-white/30 font-mono mt-1">Available</div>
-              </div>
-              <div>
-                <div className="text-xl lg:text-2xl font-display text-white">{marketStats.endingSoon}</div>
-                <div className="text-[9px] tracking-wide text-white/30 font-mono mt-1">Ending Soon</div>
-              </div>
-            </div>
-          </div>
-          
-          {/* Right: Search Terminal */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE HEADER - Premium App Style */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <header className="lg:hidden sticky top-0 z-40 bg-[#020202] border-b border-white/[0.06]" style={{ paddingTop: 'env(safe-area-inset-top)' }}>
+          <div className="px-5 py-4">
+            <div className="flex items-center justify-between">
+              {/* Brand */}
+              <div className="flex items-center gap-3">
                 <div className="relative">
-            <div className="absolute -inset-4 bg-gradient-to-tr from-accent/10 via-transparent to-accent/5 blur-3xl opacity-30" />
+                  <div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center">
+                    <Radio className="w-5 h-5 text-accent" />
+                  </div>
+                  <div className="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 bg-accent rounded-full animate-pulse" />
+                </div>
+                <div>
+                  <h1 className="text-lg font-bold text-white tracking-tight">Radar</h1>
+                  <p className="text-[10px] text-white/40 font-mono">Domain Intelligence</p>
+                </div>
+              </div>
               
-            <div className="relative bg-[#0A0A0A] border border-white/10 overflow-hidden">
-              {/* Header Bar */}
-              <div className="flex items-center justify-between px-5 py-3 border-b border-white/[0.06] bg-black/40">
+              {/* Stats Pills */}
+              <div className="flex items-center gap-2">
+                <div className="px-3 py-1.5 bg-white/[0.03] border border-white/[0.08]">
+                  <div className="text-xs font-bold text-white tabular-nums">{totalDomains}</div>
+                  <div className="text-[8px] text-white/30 uppercase tracking-wider">tracking</div>
+                </div>
+                <div className="px-3 py-1.5 bg-accent/10 border border-accent/20">
+                  <div className="text-xs font-bold text-accent tabular-nums">{availableDomains.length}</div>
+                  <div className="text-[8px] text-accent/60 uppercase tracking-wider">available</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* SEARCH SECTION */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="px-5 lg:px-10 pt-6 lg:pt-10 pb-6">
+          {/* 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 rounded-full animate-pulse" />
+              <span className="text-[10px] font-mono tracking-[0.2em] text-accent uppercase">Intelligence Hub</span>
+            </div>
+            <h1 className="font-display text-[2.5rem] leading-[1] tracking-[-0.02em] text-white mb-2">
+              Domain Radar
+            </h1>
+            <p className="text-white/40 text-sm max-w-md">
+              Real-time monitoring across {marketStats.totalAuctions.toLocaleString()}+ auctions
+            </p>
+          </div>
+          
+          {/* Search Card */}
+          <div className="relative">
+            {/* Desktop Glow */}
+            <div className="hidden lg:block absolute -inset-6 bg-gradient-to-tr from-accent/5 via-transparent to-accent/5 blur-3xl opacity-50 pointer-events-none" />
+            
+            <div className="relative bg-[#0A0A0A] border border-white/[0.08] overflow-hidden">
+              {/* Terminal Header - Desktop only */}
+              <div className="hidden lg:flex items-center justify-between px-5 py-3 border-b border-white/[0.06] bg-black/40">
                 <span className="text-[10px] font-mono text-white/40 flex items-center gap-2">
                   <Crosshair className="w-3 h-3 text-accent" />
                   Domain Search
@@ -571,88 +238,112 @@ export default function RadarPage() {
                 </div>
               </div>
               
-              <div className="p-5 lg:p-6">
-                {/* Input */}
+              {/* Search Input */}
+              <div className="p-4 lg:p-6">
                 <div className={clsx(
-                  "relative border-2 transition-all duration-300 bg-black/30",
-                  searchFocused ? "border-accent/60 shadow-[0_0_30px_-10px_rgba(16,185,129,0.3)]" : "border-white/10"
+                  "relative border-2 transition-all duration-200",
+                  searchFocused 
+                    ? "border-accent/50 bg-accent/[0.02]" 
+                    : "border-white/[0.08] bg-white/[0.02]"
                 )}>
+                  <div className="flex items-center">
+                    <Search className={clsx(
+                      "w-5 h-5 ml-4 transition-colors",
+                      searchFocused ? "text-accent" : "text-white/30"
+                    )} />
                     <input
+                      ref={searchInputRef}
                       type="text"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
                       onFocus={() => setSearchFocused(true)}
                       onBlur={() => setSearchFocused(false)}
-                    placeholder="example.com"
-                    className="w-full bg-transparent px-4 py-4 text-lg text-white placeholder:text-white/20 outline-none"
+                      placeholder="Search any domain..."
+                      className="flex-1 bg-transparent px-4 py-4 lg:py-5 text-base lg:text-lg text-white placeholder:text-white/25 outline-none"
                     />
                     {searchQuery && (
                       <button 
                         onClick={() => { setSearchQuery(''); setSearchResult(null) }}
-                      className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white transition-colors"
+                        className="p-4 text-white/30 hover:text-white active:text-white transition-colors"
                       >
-                      <XCircle className="w-5 h-5" />
+                        <X className="w-5 h-5" />
                       </button>
                     )}
                   </div>
+                </div>
                 
-                {/* Results */}
+                {/* Search Result */}
                 {searchResult && (
-                  <div className="mt-5">
+                  <div className="mt-4 animate-in fade-in slide-in-from-bottom-2 duration-200">
                     {searchResult.loading ? (
-                      <div className="flex items-center justify-center gap-3 py-6 text-white/40">
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        <span className="text-sm">Checking availability...</span>
+                      <div className="flex items-center justify-center gap-3 py-8 bg-white/[0.02] border border-white/[0.06]">
+                        <Loader2 className="w-5 h-5 animate-spin text-accent" />
+                        <span className="text-sm text-white/50">Checking availability...</span>
                       </div>
                     ) : (
                       <div className={clsx(
-                        "p-5 border-2 transition-all",
+                        "border-2 overflow-hidden",
                         searchResult.is_available 
-                          ? "bg-accent/5 border-accent/40" 
-                          : "bg-white/[0.02] border-white/10"
+                          ? "border-accent/40 bg-accent/[0.03]" 
+                          : "border-white/[0.08] bg-white/[0.02]"
+                      )}>
+                        {/* Result Header */}
+                        <div className={clsx(
+                          "px-5 py-4 flex items-center justify-between",
+                          searchResult.is_available ? "bg-accent/[0.05]" : "bg-white/[0.02]"
                         )}>
-                        <div className="flex items-center justify-between mb-4">
                           <div className="flex items-center gap-3">
                             {searchResult.is_available ? (
+                              <div className="w-10 h-10 bg-accent/20 border border-accent/30 flex items-center justify-center">
                                 <CheckCircle2 className="w-5 h-5 text-accent" />
+                              </div>
                             ) : (
+                              <div className="w-10 h-10 bg-white/5 border border-white/10 flex items-center justify-center">
                                 <XCircle className="w-5 h-5 text-white/30" />
+                              </div>
                             )}
-                            <span className="text-lg font-medium text-white">{searchResult.domain}</span>
+                            <div>
+                              <div className="text-base lg:text-lg font-semibold text-white">{searchResult.domain}</div>
+                              {!searchResult.is_available && searchResult.registrar && (
+                                <div className="text-xs text-white/40">{searchResult.registrar}</div>
+                              )}
+                            </div>
                           </div>
                           <span className={clsx(
-                            "text-xs font-medium px-3 py-1",
-                            searchResult.is_available ? "text-accent bg-accent/10" : "text-white/40 bg-white/5"
+                            "text-xs font-bold px-3 py-1.5",
+                            searchResult.is_available 
+                              ? "bg-accent text-black" 
+                              : "bg-white/10 text-white/50"
                           )}>
                             {searchResult.is_available ? 'Available' : 'Taken'}
                           </span>
                         </div>
                         
-                        {!searchResult.is_available && searchResult.registrar && (
-                          <p className="text-xs text-white/40 mb-4">Registered with {searchResult.registrar}</p>
-                        )}
-                        
-                        <div className="flex gap-3">
+                        {/* Actions */}
+                        <div className="p-4 flex flex-col sm:flex-row gap-3">
                           <button
                             onClick={handleAddToWatchlist}
                             disabled={addingToWatchlist}
                             className={clsx(
-                              "flex-1 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2",
+                              "flex-1 py-4 text-sm font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98]",
                               searchResult.is_available 
-                                ? "border border-white/20 text-white/80 hover:bg-white/5"
-                                : "border border-accent/30 text-accent hover:bg-accent/10"
+                                ? "border border-white/20 text-white hover:bg-white/5"
+                                : "border-2 border-accent text-accent hover:bg-accent/10"
                             )}
                           >
-                            {addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Eye className="w-4 h-4" />}
-                            {searchResult.is_available ? 'Add to Watchlist' : 'Track for Availability'}
+                            {addingToWatchlist ? <Loader2 className="w-5 h-5 animate-spin" /> : <Eye className="w-5 h-5" />}
+                            {searchResult.is_available ? 'Add to Watchlist' : 'Track Domain'}
                           </button>
+                          
                           {searchResult.is_available && (
                             <a
                               href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
                               target="_blank"
-                              className="flex-1 py-3 bg-accent text-black text-sm font-bold hover:bg-white transition-colors flex items-center justify-center gap-2"
+                              rel="noopener noreferrer"
+                              className="flex-1 py-4 bg-accent text-black text-sm font-bold flex items-center justify-center gap-2 hover:bg-white active:scale-[0.98] transition-all"
                             >
-                              Register Now <ArrowRight className="w-4 h-4" />
+                              Register Now
+                              <ArrowRight className="w-5 h-5" />
                             </a>
                           )}
                         </div>
@@ -661,137 +352,181 @@ export default function RadarPage() {
                   </div>
                 )}
                 
+                {/* Hint */}
                 {!searchResult && (
-                  <p className="text-xs text-white/20 mt-4 text-center">Enter a domain name to check availability</p>
+                  <p className="text-xs text-white/20 mt-4 text-center lg:text-left">
+                    Enter a domain to check availability instantly
+                  </p>
                 )}
               </div>
             </div>
           </div>
-        </div>
         </section>
 
-      {/* Ticker */}
-      <LiveTicker items={tickerItems} />
-
-      {/* CONTENT GRID */}
-      <section className="py-8 lg:py-10">
-        <div className="grid lg:grid-cols-3 gap-px bg-white/[0.08] border border-white/[0.08]">
-          
-          {/* Hot Auctions - 2 cols */}
-          <div className="lg:col-span-2 bg-[#020202] p-6 lg:p-8">
-            <div className="flex items-center justify-between mb-5">
-              <div className="flex items-center gap-2">
-                <Gavel className="w-4 h-4 text-accent" />
-                <span className="text-sm font-semibold text-white">Live Auctions</span>
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* QUICK ACTIONS - Mobile */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="lg:hidden px-5 pb-6">
+          <div className="grid grid-cols-3 gap-2">
+            {[
+              { href: '/terminal/watchlist', icon: Eye, label: 'Watchlist', badge: availableDomains.length, accent: true },
+              { href: '/terminal/market', icon: Gavel, label: 'Market' },
+              { href: '/terminal/intel', icon: TrendingUp, label: 'Intel' },
+            ].map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={clsx(
+                  "relative flex flex-col items-center justify-center gap-2 py-5 border transition-all active:scale-[0.97]",
+                  item.accent 
+                    ? "bg-accent/[0.05] border-accent/20" 
+                    : "bg-white/[0.02] border-white/[0.06]"
+                )}
+              >
+                <item.icon className={clsx("w-6 h-6", item.accent ? "text-accent" : "text-white/50")} />
+                <span className={clsx("text-xs font-medium", item.accent ? "text-accent" : "text-white/60")}>{item.label}</span>
+                {item.badge !== undefined && item.badge > 0 && (
+                  <span className="absolute top-2 right-2 min-w-[18px] h-[18px] px-1 bg-accent text-black text-[10px] font-bold flex items-center justify-center">
+                    {item.badge}
+                  </span>
+                )}
+              </Link>
+            ))}
           </div>
-              <Link href="/terminal/market" className="text-xs text-white/40 hover:text-white transition-colors">
-                View all →
+        </section>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* STATUS BAR */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="px-5 lg:px-10">
+          <div className="flex items-center justify-between py-3 lg:py-4 border-y border-white/[0.06] bg-white/[0.01]">
+            <div className="flex items-center gap-2">
+              <Wifi className="w-4 h-4 text-accent" />
+              <span className="text-xs text-white/40">Live monitoring</span>
+            </div>
+            <div className="flex items-center gap-4 text-xs">
+              <span className="text-white/30">{marketStats.totalAuctions.toLocaleString()} auctions</span>
+              <span className="text-accent font-medium">{marketStats.endingSoon} ending soon</span>
+            </div>
+          </div>
+        </section>
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* HOT AUCTIONS */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="px-5 lg:px-10 py-6 lg:py-8 pb-28 lg:pb-10">
+          <div className="flex items-center justify-between mb-5">
+            <h2 className="text-sm font-semibold text-white flex items-center gap-2">
+              <Activity className="w-4 h-4 text-accent" />
+              Hot Auctions
+            </h2>
+            <Link href="/terminal/market" className="text-xs text-accent hover:text-white active:text-white transition-colors flex items-center gap-1">
+              View all
+              <ChevronRight className="w-3 h-3" />
             </Link>
           </div>
           
           {loadingData ? (
-              <div className="flex items-center justify-center py-8">
-                <Loader2 className="w-5 h-5 text-accent animate-spin" />
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="w-6 h-6 text-accent animate-spin" />
             </div>
           ) : hotAuctions.length > 0 ? (
-              <div className="space-y-1">
+            <div className="grid lg:grid-cols-2 gap-px bg-white/[0.06] border border-white/[0.06]">
               {hotAuctions.map((auction, i) => (
                 <a
                   key={i}
                   href={auction.affiliate_url || '#'}
                   target="_blank"
-                    className="flex items-center justify-between p-3 bg-white/[0.02] hover:bg-white/[0.05] transition-colors group"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-4 p-4 lg:p-5 bg-[#020202] hover:bg-white/[0.02] active:bg-white/[0.03] transition-colors group"
                 >
-                    <div className="flex items-center gap-3">
-                      <span className="text-[10px] font-mono text-white/25 w-6">{auction.platform.substring(0, 3)}</span>
-                      <div>
-                        <div className="text-sm text-white group-hover:text-accent transition-colors">{auction.domain}</div>
-                        <div className="text-[10px] text-white/30">{auction.time_remaining}</div>
+                  <div className="w-10 h-10 lg:w-12 lg:h-12 bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
+                    <Gavel className="w-4 h-4 lg:w-5 lg:h-5 text-accent" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm lg:text-base font-medium text-white truncate group-hover:text-accent transition-colors">
+                      {auction.domain}
+                    </div>
+                    <div className="flex items-center gap-2 text-[11px] text-white/40">
+                      <span>{auction.platform}</span>
+                      <span className="text-white/20">·</span>
+                      <span className="flex items-center gap-1">
+                        <Clock className="w-3 h-3" />
+                        {auction.time_remaining}
+                      </span>
                     </div>
                   </div>
-                    <div className="font-mono text-sm text-accent font-medium">${auction.current_bid.toLocaleString()}</div>
+                  <div className="text-right shrink-0">
+                    <div className="text-base lg:text-lg font-bold text-accent font-mono">
+                      ${auction.current_bid.toLocaleString()}
+                    </div>
+                    <div className="text-[10px] text-white/30">current bid</div>
+                  </div>
                 </a>
               ))}
             </div>
           ) : (
-              <div className="text-center py-8 text-white/20 text-sm">No active auctions</div>
+            <div className="text-center py-16 border border-dashed border-white/[0.08]">
+              <Gavel className="w-8 h-8 text-white/10 mx-auto mb-3" />
+              <p className="text-white/30 text-sm">No active auctions</p>
+            </div>
           )}
-          </div>
 
-          {/* Quick Links */}
-          <div className="bg-[#020202] p-6 lg:p-8">
-            <div className="flex items-center gap-2 mb-5">
-              <Zap className="w-4 h-4 text-white/50" />
-              <span className="text-sm font-semibold text-white">Quick Access</span>
-            </div>
-            
-            <div className="space-y-2">
+          {/* Desktop Quick Links */}
+          <div className="hidden lg:grid grid-cols-3 gap-4 mt-8">
             {[
-                { label: 'Watchlist', href: '/terminal/watchlist', icon: Eye },
-                { label: 'Market', href: '/terminal/market', icon: Gavel },
-                { label: 'Intel', href: '/terminal/intel', icon: Globe },
+              { href: '/terminal/watchlist', icon: Eye, label: 'Watchlist', desc: 'Track domain availability' },
+              { href: '/terminal/market', icon: Gavel, label: 'Market', desc: 'Browse all auctions' },
+              { href: '/terminal/intel', icon: Globe, label: 'Intel', desc: 'TLD price analysis' },
             ].map((item) => (
               <Link
                 key={item.href}
                 href={item.href}
-                  className="flex items-center gap-3 p-3 border border-white/[0.05] hover:border-accent/30 hover:bg-accent/5 transition-all group"
+                className="flex items-center gap-4 p-5 border border-white/[0.06] hover:border-accent/30 hover:bg-accent/[0.02] transition-all group"
               >
-                  <item.icon className="w-4 h-4 text-white/30 group-hover:text-accent transition-colors" />
-                  <span className="text-sm text-white/70 group-hover:text-white transition-colors flex-1">{item.label}</span>
-                  <ArrowRight className="w-3 h-3 text-white/15 group-hover:text-accent group-hover:translate-x-0.5 transition-all" />
+                <div className="w-12 h-12 bg-white/[0.02] border border-white/[0.08] flex items-center justify-center group-hover:border-accent/20 group-hover:bg-accent/10 transition-all">
+                  <item.icon className="w-5 h-5 text-white/40 group-hover:text-accent transition-colors" />
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-white group-hover:text-accent transition-colors">{item.label}</div>
+                  <div className="text-xs text-white/30">{item.desc}</div>
+                </div>
+                <ArrowRight className="w-4 h-4 text-white/10 group-hover:text-accent group-hover:translate-x-1 transition-all ml-auto" />
               </Link>
             ))}
           </div>
-            
-            <div className="mt-6 pt-4 border-t border-white/[0.05]">
-              <div className="flex items-center gap-2">
-                <div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
-                <span className="text-[10px] font-mono text-white/30">System online</span>
-              </div>
-            </div>
-          </div>
-          
-        </div>
         </section>
 
-      <style jsx global>{`
-        @keyframes ticker {
-          0% { transform: translateX(0); }
-          100% { transform: translateX(-33.33%); }
-        }
-      `}</style>
-    </CommandCenterLayout>
-  )
-
-  // ============================================================================
-  // RENDER
-  // ============================================================================
-
-  return (
-    <>
-      {/* Mobile View */}
-      <div className="lg:hidden">
-        <MobileView />
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* MOBILE BOTTOM NAV - Premium Tab Bar */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <nav 
+          className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0A0A0A]/98 backdrop-blur-xl border-t border-white/[0.08]"
+          style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+        >
+          <div className="flex items-stretch h-16">
+            {mobileNavItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={clsx(
+                  "flex-1 flex flex-col items-center justify-center gap-1 relative transition-colors",
+                  item.active ? "text-accent" : "text-white/40 active:text-white/60"
+                )}
+              >
+                {item.active && (
+                  <div className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-accent" />
+                )}
+                <item.icon className="w-5 h-5" />
+                <span className="text-[10px] font-medium">{item.label}</span>
+              </Link>
+            ))}
           </div>
+        </nav>
+      </main>
       
-      {/* Desktop View */}
-      <div className="hidden lg:block">
-        <DesktopView />
+      {/* Toast */}
+      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
     </div>
-      
-      {/* Global Styles for Safe Areas */}
-      <style jsx global>{`
-        .safe-area-top {
-          padding-top: env(safe-area-inset-top);
-        }
-        .safe-area-bottom {
-          padding-bottom: env(safe-area-inset-bottom);
-        }
-        @keyframes ticker {
-          0% { transform: translateX(0); }
-          100% { transform: translateX(-33.33%); }
-        }
-      `}</style>
-    </>
   )
 }