Radar page: Native PWA-like mobile experience

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

@@ -20,23 +20,18 @@ import {
   Globe,
   Target,
   Search,
+  X,
   Home,
-  BarChart3,
+  TrendingUp,
   Settings,
   Bell,
   ChevronRight,
-  TrendingUp,
-  RefreshCw,
-  Menu,
-  X,
-  Tag,
-  Coins,
-  Shield,
-  LogOut,
-  User
+  Clock,
+  Wifi
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
+import Image from 'next/image'
 
 // ============================================================================
 // TYPES
@@ -62,151 +57,38 @@ interface SearchResult {
 }
 
 // ============================================================================
-// FULLSCREEN NAVIGATION MENU
+// MOBILE BOTTOM NAV
 // ============================================================================
 
-function FullscreenNav({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
-  const { user, logout, subscription } = useStore()
-  
-  const mainLinks = [
-    { label: 'Radar', href: '/terminal/radar', icon: Crosshair, desc: 'Domain search & overview' },
-    { label: 'Market', href: '/terminal/market', icon: Gavel, desc: 'Live auctions' },
-    { label: 'Watchlist', href: '/terminal/watchlist', icon: Eye, desc: 'Track domains' },
-    { label: 'Intel', href: '/terminal/intel', icon: BarChart3, desc: 'TLD pricing data' },
-  ]
-  
-  const secondaryLinks = [
-    { label: 'Sniper', href: '/terminal/sniper', icon: Target },
-    { label: 'Yield', href: '/terminal/yield', icon: Coins },
-    { label: 'For Sale', href: '/terminal/listing', icon: Tag },
-    { label: 'Settings', href: '/terminal/settings', icon: Settings },
-  ]
-
-  if (!isOpen) return null
-
-  return (
-    <div className="lg:hidden fixed inset-0 z-50 bg-[#020202] animate-in fade-in duration-200">
-      {/* Header */}
-      <div className="flex items-center justify-between px-5 h-16 border-b border-white/10 safe-area-top">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 bg-accent/20 border border-accent/40 flex items-center justify-center">
-            <Crosshair className="w-4 h-4 text-accent" />
-          </div>
-          <span className="text-base font-semibold text-white">Menu</span>
-        </div>
-        <button 
-          onClick={onClose}
-          className="w-10 h-10 flex items-center justify-center text-white/60 active:scale-95"
-        >
-          <X className="w-6 h-6" />
-        </button>
-      </div>
-
-      {/* Main Links */}
-      <div className="p-4 space-y-1">
-        {mainLinks.map((item) => (
-          <Link
-            key={item.href}
-            href={item.href}
-            onClick={onClose}
-            className="flex items-center gap-4 p-4 bg-white/[0.03] border border-white/[0.08] active:bg-white/[0.06] transition-colors"
-          >
-            <div className="w-12 h-12 bg-accent/10 border border-accent/20 flex items-center justify-center">
-              <item.icon className="w-6 h-6 text-accent" />
-            </div>
-            <div className="flex-1">
-              <div className="text-base font-semibold text-white">{item.label}</div>
-              <div className="text-xs text-white/40">{item.desc}</div>
-            </div>
-            <ChevronRight className="w-5 h-5 text-white/20" />
-          </Link>
-        ))}
-      </div>
-
-      {/* Secondary Links */}
-      <div className="px-4 pt-4 border-t border-white/[0.06] mx-4">
-        <div className="text-[10px] font-mono text-white/30 tracking-wide mb-3 px-1">More</div>
-        <div className="grid grid-cols-2 gap-2">
-          {secondaryLinks.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              onClick={onClose}
-              className="flex items-center gap-3 p-3 bg-white/[0.02] border border-white/[0.06] active:bg-white/[0.05] transition-colors"
-            >
-              <item.icon className="w-5 h-5 text-white/40" />
-              <span className="text-sm text-white/70">{item.label}</span>
-            </Link>
-          ))}
-        </div>
-      </div>
-
-      {/* User Section */}
-      <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-white/[0.08] bg-[#020202] safe-area-bottom">
-        <div className="flex items-center gap-3 p-3 bg-white/[0.02] border border-white/[0.06]">
-          <div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center">
-            <User className="w-5 h-5 text-accent" />
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="text-sm font-medium text-white truncate">{user?.name || user?.email?.split('@')[0]}</div>
-            <div className="text-[10px] text-accent font-mono">{subscription?.tier || 'Scout'}</div>
-          </div>
-          <button 
-            onClick={() => { logout(); onClose() }}
-            className="w-10 h-10 flex items-center justify-center text-white/30 active:text-red-400"
-          >
-            <LogOut className="w-5 h-5" />
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// ============================================================================
-// MOBILE BOTTOM NAV - With Menu Button
-// ============================================================================
-
-function MobileBottomNav({ active, onMenuOpen }: { active: string; onMenuOpen: () => void }) {
+function MobileBottomNav({ currentPath }: { currentPath: string }) {
   const navItems = [
-    { id: 'radar', label: 'Radar', icon: Crosshair, href: '/terminal/radar' },
-    { id: 'market', label: 'Market', icon: Gavel, href: '/terminal/market' },
-    { id: 'watchlist', label: 'Watch', icon: Eye, href: '/terminal/watchlist' },
+    { 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] border-t border-white/[0.15] safe-area-bottom">
-      <div className="flex items-center h-[60px]">
+    <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 = active === item.id
+          const isActive = currentPath === item.href
           return (
             <Link
-              key={item.id}
+              key={item.href}
               href={item.href}
-              className="flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform"
+              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={clsx(
-                "w-6 h-6 mb-0.5 transition-colors",
-                isActive ? "text-accent" : "text-white/40"
-              )} />
-              <span className={clsx(
-                "text-[10px] font-medium transition-colors",
-                isActive ? "text-accent" : "text-white/40"
-              )}>
-                {item.label}
-              </span>
+              <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>
           )
         })}
-        
-        {/* Menu Button */}
-        <button
-          onClick={onMenuOpen}
-          className="flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform"
-        >
-          <Menu className="w-6 h-6 mb-0.5 text-white/40" />
-          <span className="text-[10px] font-medium text-white/40">More</span>
-        </button>
       </div>
     </nav>
   )
@@ -216,45 +98,30 @@ function MobileBottomNav({ active, onMenuOpen }: { active: string; onMenuOpen: (
 // MOBILE HEADER
 // ============================================================================
 
-function MobileHeader({ 
-  onSearchOpen,
-  isRefreshing,
-  onRefresh
-}: { 
-  onSearchOpen: () => void
-  isRefreshing: boolean
-  onRefresh: () => void
-}) {
+function MobileHeader({ stats }: { stats: { tracking: number; available: number } }) {
   return (
-    <header className="lg:hidden sticky top-0 z-40 bg-[#0a0a0a] border-b border-white/[0.15] safe-area-top">
-      <div className="flex items-center justify-between px-4 h-[56px]">
+    <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">
-          <div className="w-10 h-10 bg-accent/20 border border-accent/40 flex items-center justify-center">
-            <Crosshair className="w-5 h-5 text-accent" />
-          </div>
+          <Image src="/pounce-puma.png" alt="Pounce" width={28} height={28} className="object-contain" />
           <div>
-            <h1 className="text-base font-bold text-white">Radar</h1>
+            <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-accent font-semibold">Live</span>
+              <span className="text-[10px] text-white/40">Live</span>
             </div>
           </div>
         </div>
         
-        <div className="flex items-center gap-1">
-          <button 
-            onClick={onRefresh}
-            disabled={isRefreshing}
-            className="w-11 h-11 flex items-center justify-center text-white/50 active:bg-white/10 rounded-xl transition-colors"
-          >
-            <RefreshCw className={clsx("w-5 h-5", isRefreshing && "animate-spin")} />
-          </button>
-          <button 
-            onClick={onSearchOpen}
-            className="w-11 h-11 bg-accent flex items-center justify-center text-black active:scale-95 transition-transform rounded-xl"
-          >
-            <Search className="w-5 h-5" />
-          </button>
+        <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>
@@ -262,128 +129,107 @@ function MobileHeader({
 }
 
 // ============================================================================
-// MOBILE SEARCH MODAL
+// MOBILE SEARCH CARD
 // ============================================================================
 
-function MobileSearchModal({
-  isOpen,
-  onClose,
+function MobileSearchCard({
   searchQuery,
   setSearchQuery,
   searchResult,
+  searchFocused,
+  setSearchFocused,
+  handleAddToWatchlist,
   addingToWatchlist,
-  onAddToWatchlist
 }: {
-  isOpen: boolean
-  onClose: () => void
   searchQuery: string
   setSearchQuery: (q: string) => void
   searchResult: SearchResult | null
+  searchFocused: boolean
+  setSearchFocused: (f: boolean) => void
+  handleAddToWatchlist: () => void
   addingToWatchlist: boolean
-  onAddToWatchlist: () => void
 }) {
-  const inputRef = useRef<HTMLInputElement>(null)
-  
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      setTimeout(() => inputRef.current?.focus(), 100)
-    }
-  }, [isOpen])
-
-  if (!isOpen) return null
-
   return (
-    <div className="lg:hidden fixed inset-0 z-50 bg-[#050505] animate-in fade-in slide-in-from-bottom-4 duration-200">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 h-[60px] border-b border-white/[0.15] safe-area-top">
-        <button 
-          onClick={onClose}
-          className="text-accent text-base font-semibold"
-        >
-          Cancel
-        </button>
-        <div className="flex-1 relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
+    <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
-            ref={inputRef}
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Search domain..."
-            className="w-full h-11 bg-white/10 border border-white/[0.2] pl-11 pr-4 text-white placeholder:text-white/40 outline-none focus:border-accent/50 rounded-xl text-base"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="none"
+            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"
           />
-        </div>
-      </div>
-
-      {/* Results */}
-      <div className="flex-1 overflow-auto p-4 pb-20">
-        {searchResult?.loading && (
-          <div className="flex flex-col items-center justify-center gap-3 py-20">
-            <Loader2 className="w-8 h-8 animate-spin text-accent" />
-            <span className="text-sm text-white/60">Checking availability...</span>
-          </div>
+          {searchQuery && (
+            <button 
+              onClick={() => setSearchQuery('')}
+              className="p-4 text-white/30 active:text-white"
+            >
+              <X className="w-5 h-5" />
+            </button>
           )}
+        </div>
+      </div>
       
-        {searchResult && !searchResult.loading && (
+      {/* 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 rounded-2xl",
-            searchResult.is_available ? "bg-accent/10 border-accent/50" : "bg-white/[0.03] border-white/[0.15]"
+              "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-5 py-5 flex items-center gap-4",
-              searchResult.is_available ? "bg-accent/10" : "bg-white/[0.03]"
+                "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 ? (
-                <div className="w-14 h-14 bg-accent/30 border-2 border-accent flex items-center justify-center rounded-xl">
-                  <CheckCircle2 className="w-7 h-7 text-accent" />
-                </div>
+                    <CheckCircle2 className="w-6 h-6 text-accent" />
                   ) : (
-                <div className="w-14 h-14 bg-white/10 border-2 border-white/20 flex items-center justify-center rounded-xl">
-                  <XCircle className="w-7 h-7 text-white/50" />
-                </div>
+                    <XCircle className="w-6 h-6 text-white/30" />
                   )}
-              <div className="flex-1">
-                <div className="text-xl font-bold text-white">{searchResult.domain}</div>
-                <div className={clsx(
-                  "text-sm font-semibold mt-0.5",
-                  searchResult.is_available ? "text-accent" : "text-white/50"
-                )}>
-                  {searchResult.is_available ? 'Available for registration' : 'Already registered'}
-                </div>
-              </div>
-            </div>
-
-            {/* Details */}
+                  <div>
+                    <div className="text-base font-semibold text-white">{searchResult.domain}</div>
                     {!searchResult.is_available && searchResult.registrar && (
-              <div className="px-5 py-4 border-t border-white/[0.1] bg-black/30">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-white/50">Registrar</span>
-                  <span className="text-white/80 font-medium">{searchResult.registrar}</span>
-                </div>
-              </div>
+                      <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 */}
-            <div className="p-4 border-t border-white/[0.1] space-y-3">
+              {/* Actions - Large touch targets */}
+              <div className="p-4 space-y-3">
                 <button
-                onClick={onAddToWatchlist}
+                  onClick={handleAddToWatchlist}
                   disabled={addingToWatchlist}
                   className={clsx(
-                  "w-full h-14 flex items-center justify-center gap-3 text-base font-bold rounded-xl transition-colors active:scale-[0.98]",
+                    "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-2 border-white/30 text-white active:bg-white/10"
+                      ? "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" />
-                )}
+                  {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>
                 
@@ -391,7 +237,7 @@ function MobileSearchModal({
                   <a
                     href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
                     target="_blank"
-                  className="w-full h-14 bg-accent text-black text-base font-bold flex items-center justify-center gap-3 rounded-xl active:bg-white transition-colors active:scale-[0.98]"
+                    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" />
@@ -400,75 +246,69 @@ function MobileSearchModal({
               </div>
             </div>
           )}
-
-        {!searchResult && searchQuery.length === 0 && (
-          <div className="text-center py-20">
-            <div className="w-20 h-20 mx-auto bg-white/[0.05] border-2 border-white/[0.1] flex items-center justify-center mb-4 rounded-2xl">
-              <Search className="w-10 h-10 text-white/20" />
-            </div>
-            <p className="text-white/50 text-base">Enter a domain to check availability</p>
         </div>
       )}
     </div>
-    </div>
   )
 }
 
 // ============================================================================
-// STAT CARD - Higher Contrast
+// MOBILE AUCTION CARD
 // ============================================================================
 
-function StatCard({ label, value, highlight, icon: Icon }: { 
-  label: string
-  value: string | number
-  highlight?: boolean
-  icon: any
-}) {
-  return (
-    <div className="bg-[#0c0c0c] border border-white/[0.15] p-4 rounded-xl active:bg-white/[0.05] transition-colors">
-      <div className="flex items-center gap-2 mb-2">
-        <Icon className={clsx("w-4 h-4", highlight ? "text-accent" : "text-white/50")} />
-        <span className="text-[11px] font-semibold text-white/60 tracking-wide">{label}</span>
-      </div>
-      <div className={clsx(
-        "text-3xl font-bold tracking-tight",
-        highlight ? "text-accent" : "text-white"
-      )}>
-        {value}
-      </div>
-    </div>
-  )
-}
-
-// ============================================================================
-// AUCTION CARD - Higher Contrast
-// ============================================================================
-
-function AuctionCard({ auction }: { auction: HotAuction }) {
+function MobileAuctionCard({ auction }: { auction: HotAuction }) {
   return (
     <a
       href={auction.affiliate_url || '#'}
       target="_blank"
-      className="flex items-center gap-4 p-4 bg-[#0c0c0c] border border-white/[0.15] rounded-xl active:bg-white/[0.05] transition-colors"
+      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-12 h-12 bg-white/10 border border-white/[0.2] flex items-center justify-center shrink-0 rounded-lg">
-        <span className="text-xs font-bold text-white/60">{auction.platform.substring(0, 2).toUpperCase()}</span>
+      <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-base font-semibold text-white truncate">{auction.domain}</div>
-        <div className="text-sm text-white/50 font-medium">{auction.time_remaining}</div>
+        <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="font-mono text-lg font-bold text-accent">${auction.current_bid.toLocaleString()}</div>
-        <div className="text-[11px] text-white/40 font-medium">Current bid</div>
+        <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-5 h-5 text-white/30 shrink-0" />
+      <ChevronRight className="w-4 h-4 text-white/20" />
     </a>
   )
 }
 
 // ============================================================================
-// DESKTOP LIVE TICKER
+// 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 }[] }) {
@@ -503,15 +343,11 @@ export default function RadarPage() {
   const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
   const [marketStats, setMarketStats] = useState({ totalAuctions: 0, endingSoon: 0 })
   const [loadingData, setLoadingData] = useState(true)
-  const [isRefreshing, setIsRefreshing] = useState(false)
   
   const [searchQuery, setSearchQuery] = useState('')
   const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
   const [addingToWatchlist, setAddingToWatchlist] = useState(false)
   const [searchFocused, setSearchFocused] = useState(false)
-  const [mobileSearchOpen, setMobileSearchOpen] = useState(false)
-  const [menuOpen, setMenuOpen] = useState(false)
-  const searchInputRef = useRef<HTMLInputElement>(null)
 
   // Load Data
   const loadDashboardData = useCallback(async () => {
@@ -526,15 +362,9 @@ export default function RadarPage() {
       console.error('Failed to load data:', error)
     } finally {
       setLoadingData(false)
-      setIsRefreshing(false)
     }
   }, [])
 
-  const handleRefresh = useCallback(async () => {
-    setIsRefreshing(true)
-    await loadDashboardData()
-  }, [loadDashboardData])
-
   useEffect(() => {
     if (isAuthenticated) loadDashboardData()
   }, [isAuthenticated, loadDashboardData])
@@ -571,12 +401,11 @@ export default function RadarPage() {
     setAddingToWatchlist(true)
     try {
       await addDomain(searchQuery.trim())
-      showToast(`Added: ${searchQuery.trim()}`, 'success')
+      showToast(`Target acquired: ${searchQuery.trim()}`, 'success')
       setSearchQuery('')
       setSearchResult(null)
-      setMobileSearchOpen(false)
     } catch (err: any) {
-      showToast(err.message || 'Failed', 'error')
+      showToast(err.message || 'Mission failed', 'error')
     } finally {
       setAddingToWatchlist(false)
     }
@@ -601,124 +430,88 @@ export default function RadarPage() {
     { label: 'Auctions', value: marketStats.totalAuctions.toString() },
   ]
 
-  return (
-    <>
-      {/* Fullscreen Navigation Menu */}
-      <FullscreenNav isOpen={menuOpen} onClose={() => setMenuOpen(false)} />
+  // ============================================================================
+  // MOBILE VIEW
+  // ============================================================================
   
+  const MobileView = () => (
+    <div className="lg:hidden min-h-screen bg-[#020202] pb-20">
       {/* Mobile Header */}
-      <MobileHeader 
-        onSearchOpen={() => setMobileSearchOpen(true)} 
-        isRefreshing={isRefreshing}
-        onRefresh={handleRefresh}
-      />
+      <MobileHeader stats={{ tracking: totalDomains, available: availableDomains.length }} />
       
-      {/* Mobile Search Modal */}
-      <MobileSearchModal
-        isOpen={mobileSearchOpen}
-        onClose={() => setMobileSearchOpen(false)}
+      {/* Search Section */}
+      <MobileSearchCard 
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         searchResult={searchResult}
+        searchFocused={searchFocused}
+        setSearchFocused={setSearchFocused}
+        handleAddToWatchlist={handleAddToWatchlist}
         addingToWatchlist={addingToWatchlist}
-        onAddToWatchlist={handleAddToWatchlist}
       />
       
-      {/* Mobile Content */}
-      <div className="lg:hidden min-h-screen bg-[#050505] pb-24">
-        {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
-        
-        {/* Stats Grid */}
-        <div className="p-4 grid grid-cols-2 gap-3">
-          <StatCard label="Tracking" value={totalDomains} icon={Eye} />
-          <StatCard label="Available" value={availableDomains.length} highlight={availableDomains.length > 0} icon={CheckCircle2} />
-          <StatCard label="Auctions" value={marketStats.totalAuctions} icon={Gavel} />
-          <StatCard label="Ending Soon" value={marketStats.endingSoon} icon={Activity} />
+      {/* 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>
       </div>
       
-        {/* Available Alert */}
-        {availableDomains.length > 0 && (
-          <div className="mx-4 mb-4 p-4 bg-accent/15 border-2 border-accent/50 rounded-xl">
-            <div className="flex items-center gap-4">
-              <div className="w-12 h-12 bg-accent/25 border-2 border-accent flex items-center justify-center rounded-xl">
-                <Bell className="w-6 h-6 text-accent" />
-              </div>
-              <div className="flex-1">
-                <div className="text-base font-bold text-white">{availableDomains.length} Domain{availableDomains.length > 1 ? 's' : ''} Available!</div>
-                <div className="text-sm text-accent font-semibold">Grab them now</div>
-              </div>
-              <Link href="/terminal/watchlist" className="w-12 h-12 bg-accent flex items-center justify-center rounded-xl active:scale-95 transition-transform">
-                <ArrowRight className="w-6 h-6 text-black" />
-              </Link>
-            </div>
-          </div>
-        )}
-
-        {/* Section: Live Auctions */}
-        <div className="px-4 mb-6">
-          <div className="flex items-center justify-between mb-4">
+      {/* 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">
-              <Gavel className="w-5 h-5 text-accent" />
-              <span className="text-base font-bold text-white">Live Auctions</span>
+          <Wifi className="w-4 h-4 text-accent" />
+          <span className="text-xs text-white/50">Live monitoring active</span>
         </div>
-            <Link href="/terminal/market" className="text-sm text-accent font-bold">
-              See all
+        <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>
+      
+      {/* 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-16">
-              <Loader2 className="w-8 h-8 text-accent animate-spin" />
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="w-6 h-6 text-accent animate-spin" />
           </div>
         ) : hotAuctions.length > 0 ? (
-            <div className="space-y-3">
+          <div>
             {hotAuctions.map((auction, i) => (
-                <AuctionCard key={i} auction={auction} />
+              <MobileAuctionCard key={i} auction={auction} />
             ))}
           </div>
         ) : (
-            <div className="text-center py-16 border-2 border-dashed border-white/[0.15] rounded-xl">
-              <Gavel className="w-10 h-10 text-white/20 mx-auto mb-3" />
-              <p className="text-white/50 text-base">No active auctions</p>
+          <div className="text-center py-12 text-white/30 text-sm">
+            No active auctions at the moment
           </div>
         )}
       </div>
       
-        {/* Section: Quick Links */}
-        <div className="px-4">
-          <div className="flex items-center gap-2 mb-4">
-            <Zap className="w-5 h-5 text-white/60" />
-            <span className="text-base font-bold text-white">Quick Actions</span>
-          </div>
+      {/* Bottom Navigation */}
+      <MobileBottomNav currentPath="/terminal/radar" />
       
-          <div className="grid grid-cols-2 gap-3">
-            {[
-              { label: 'TLD Intel', desc: 'Price trends', href: '/terminal/intel', icon: TrendingUp },
-              { label: 'Sniper', desc: 'Set alerts', href: '/terminal/sniper', icon: Target },
-              { label: 'Yield', desc: 'Monetize', href: '/terminal/yield', icon: Coins },
-              { label: 'For Sale', desc: 'List domains', href: '/terminal/listing', icon: Tag },
-            ].map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className="p-4 bg-[#0c0c0c] border border-white/[0.15] rounded-xl active:bg-white/[0.05] transition-colors"
-              >
-                <item.icon className="w-6 h-6 text-accent mb-3" />
-                <div className="text-base font-semibold text-white">{item.label}</div>
-                <div className="text-xs text-white/50 font-medium">{item.desc}</div>
-              </Link>
-            ))}
-          </div>
-        </div>
+      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
     </div>
+  )
 
-      {/* Mobile Bottom Nav with Menu Button */}
-      <MobileBottomNav active="radar" onMenuOpen={() => setMenuOpen(true)} />
+  // ============================================================================
+  // DESKTOP VIEW (Original with minor tweaks)
+  // ============================================================================
   
-      {/* ═══════════════════════════════════════════════════════════════════════ */}
-      {/* DESKTOP LAYOUT */}
-      {/* ═══════════════════════════════════════════════════════════════════════ */}
-      <div className="hidden lg:block">
+  const DesktopView = () => (
     <CommandCenterLayout minimal>
       {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
       
@@ -730,9 +523,7 @@ export default function RadarPage() {
           <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>
+              <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]">
@@ -787,7 +578,6 @@ export default function RadarPage() {
                   searchFocused ? "border-accent/60 shadow-[0_0_30px_-10px_rgba(16,185,129,0.3)]" : "border-white/10"
                 )}>
                   <input
-                        ref={searchInputRef}
                     type="text"
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
@@ -821,7 +611,6 @@ export default function RadarPage() {
                           ? "bg-accent/5 border-accent/40" 
                           : "bg-white/[0.02] border-white/10"
                       )}>
-                            {/* Status Header */}
                         <div className="flex items-center justify-between mb-4">
                           <div className="flex items-center gap-3">
                             {searchResult.is_available ? (
@@ -833,22 +622,16 @@ export default function RadarPage() {
                           </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"
+                            searchResult.is_available ? "text-accent bg-accent/10" : "text-white/40 bg-white/5"
                           )}>
                             {searchResult.is_available ? 'Available' : 'Taken'}
                           </span>
                         </div>
                         
-                            {/* Registrar Info for taken domains */}
                         {!searchResult.is_available && searchResult.registrar && (
-                              <p className="text-xs text-white/40 mb-4">
-                                Registered with {searchResult.registrar}
-                              </p>
+                          <p className="text-xs text-white/40 mb-4">Registered with {searchResult.registrar}</p>
                         )}
                         
-                            {/* Actions */}
                         <div className="flex gap-3">
                           <button
                             onClick={handleAddToWatchlist}
@@ -878,11 +661,8 @@ 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">Enter a domain name to check availability</p>
                 )}
               </div>
             </div>
@@ -963,7 +743,6 @@ export default function RadarPage() {
               ))}
             </div>
             
-                {/* Status */}
             <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" />
@@ -974,26 +753,43 @@ export default function RadarPage() {
           
         </div>
       </section>
-        </CommandCenterLayout>
-      </div>
       
       <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 />
+      </div>
+      
+      {/* Desktop View */}
+      <div className="hidden lg:block">
+        <DesktopView />
+      </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);
         }
-        
-        @media (max-width: 1023px) {
-          html, body {
-            overscroll-behavior: none;
-          }
+        @keyframes ticker {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-33.33%); }
         }
       `}</style>
     </>