Radar page: Native PWA mobile experience

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

@@ -18,7 +18,15 @@ import {
   Crosshair,
   Zap,
   Globe,
-  Target
+  Target,
+  Search,
+  Home,
+  BarChart3,
+  Settings,
+  Bell,
+  ChevronRight,
+  TrendingUp,
+  RefreshCw
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -47,12 +55,311 @@ interface SearchResult {
 }
 
 // ============================================================================
-// LIVE TICKER
+// MOBILE BOTTOM NAV
+// ============================================================================
+
+function MobileBottomNav({ active }: { active: 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' },
+    { id: 'intel', label: 'Intel', icon: BarChart3, href: '/terminal/intel' },
+  ]
+
+  return (
+    <nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0a]/95 backdrop-blur-xl border-t border-white/10 safe-area-bottom">
+      <div className="flex items-center justify-around h-16">
+        {navItems.map((item) => {
+          const isActive = active === item.id
+          return (
+            <Link
+              key={item.id}
+              href={item.href}
+              className="flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform"
+            >
+              <item.icon className={clsx(
+                "w-6 h-6 mb-1 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>
+              {isActive && (
+                <div className="absolute bottom-2 w-1 h-1 bg-accent rounded-full" />
+              )}
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}
+
+// ============================================================================
+// MOBILE HEADER
+// ============================================================================
+
+function MobileHeader({ 
+  onSearchOpen,
+  isRefreshing,
+  onRefresh
+}: { 
+  onSearchOpen: () => void
+  isRefreshing: boolean
+  onRefresh: () => void
+}) {
+  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 h-14">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
+            <Crosshair className="w-4 h-4 text-accent" />
+          </div>
+          <div>
+            <h1 className="text-base font-semibold 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-mono">Live</span>
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <button 
+            onClick={onRefresh}
+            disabled={isRefreshing}
+            className="w-10 h-10 flex items-center justify-center text-white/50 active:text-white transition-colors"
+          >
+            <RefreshCw className={clsx("w-5 h-5", isRefreshing && "animate-spin")} />
+          </button>
+          <button 
+            onClick={onSearchOpen}
+            className="w-10 h-10 bg-accent/10 border border-accent/30 flex items-center justify-center text-accent active:scale-95 transition-transform"
+          >
+            <Search className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+// ============================================================================
+// MOBILE SEARCH MODAL
+// ============================================================================
+
+function MobileSearchModal({
+  isOpen,
+  onClose,
+  searchQuery,
+  setSearchQuery,
+  searchResult,
+  addingToWatchlist,
+  onAddToWatchlist
+}: {
+  isOpen: boolean
+  onClose: () => void
+  searchQuery: string
+  setSearchQuery: (q: string) => void
+  searchResult: SearchResult | null
+  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-[#020202] animate-in fade-in slide-in-from-bottom-4 duration-300">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 h-16 border-b border-white/10 safe-area-top">
+        <button 
+          onClick={onClose}
+          className="text-white/50 text-sm font-medium"
+        >
+          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/30" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search domain..."
+            className="w-full h-10 bg-white/5 border border-white/10 pl-11 pr-4 text-white placeholder:text-white/30 outline-none focus:border-accent/50 rounded-lg"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="none"
+          />
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-auto p-4">
+        {searchResult?.loading && (
+          <div className="flex items-center justify-center gap-3 py-16 text-white/40">
+            <Loader2 className="w-6 h-6 animate-spin text-accent" />
+            <span className="text-sm">Checking...</span>
+          </div>
+        )}
+
+        {searchResult && !searchResult.loading && (
+          <div className={clsx(
+            "border-2 overflow-hidden",
+            searchResult.is_available ? "bg-accent/5 border-accent/40" : "bg-white/[0.02] border-white/10"
+          )}>
+            {/* Status Banner */}
+            <div className={clsx(
+              "px-5 py-4 flex items-center gap-4",
+              searchResult.is_available ? "bg-accent/10" : "bg-white/[0.02]"
+            )}>
+              {searchResult.is_available ? (
+                <div className="w-12 h-12 bg-accent/20 border border-accent/40 flex items-center justify-center">
+                  <CheckCircle2 className="w-6 h-6 text-accent" />
+                </div>
+              ) : (
+                <div className="w-12 h-12 bg-white/5 border border-white/10 flex items-center justify-center">
+                  <XCircle className="w-6 h-6 text-white/30" />
+                </div>
+              )}
+              <div className="flex-1">
+                <div className="text-lg font-semibold text-white">{searchResult.domain}</div>
+                <div className={clsx(
+                  "text-xs font-medium",
+                  searchResult.is_available ? "text-accent" : "text-white/40"
+                )}>
+                  {searchResult.is_available ? 'Available for registration' : 'Already registered'}
+                </div>
+              </div>
+            </div>
+
+            {/* Details */}
+            {!searchResult.is_available && searchResult.registrar && (
+              <div className="px-5 py-3 border-t border-white/[0.06] bg-black/20">
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-white/40">Registrar</span>
+                  <span className="text-white/70">{searchResult.registrar}</span>
+                </div>
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="p-4 border-t border-white/[0.06] space-y-3">
+              <button
+                onClick={onAddToWatchlist}
+                disabled={addingToWatchlist}
+                className={clsx(
+                  "w-full h-14 flex items-center justify-center gap-3 text-base font-semibold transition-colors active:scale-[0.98]",
+                  searchResult.is_available 
+                    ? "border border-white/20 text-white/80 active:bg-white/10"
+                    : "border border-accent/30 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 h-14 bg-accent text-black text-base font-bold flex items-center justify-center gap-3 active:bg-white transition-colors active:scale-[0.98]"
+                >
+                  Register Now
+                  <ArrowRight className="w-5 h-5" />
+                </a>
+              )}
+            </div>
+          </div>
+        )}
+
+        {!searchResult && searchQuery.length === 0 && (
+          <div className="text-center py-16">
+            <div className="w-16 h-16 mx-auto bg-white/[0.02] border border-white/10 flex items-center justify-center mb-4">
+              <Search className="w-8 h-8 text-white/10" />
+            </div>
+            <p className="text-white/30 text-sm">Enter a domain to check availability</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// STAT CARD - Mobile Optimized
+// ============================================================================
+
+function StatCard({ label, value, highlight, icon: Icon }: { 
+  label: string
+  value: string | number
+  highlight?: boolean
+  icon: any
+}) {
+  return (
+    <div className="bg-white/[0.02] border border-white/[0.06] p-4 active:bg-white/[0.04] transition-colors">
+      <div className="flex items-center gap-2 mb-2">
+        <Icon className={clsx("w-4 h-4", highlight ? "text-accent" : "text-white/30")} />
+        <span className="text-[10px] font-mono text-white/40 tracking-wide">{label}</span>
+      </div>
+      <div className={clsx(
+        "text-2xl font-display",
+        highlight ? "text-accent" : "text-white"
+      )}>
+        {value}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// AUCTION CARD - Mobile Optimized
+// ============================================================================
+
+function AuctionCard({ auction }: { auction: HotAuction }) {
+  return (
+    <a
+      href={auction.affiliate_url || '#'}
+      target="_blank"
+      className="flex items-center gap-4 p-4 bg-white/[0.02] border border-white/[0.06] active:bg-white/[0.05] transition-colors"
+    >
+      <div className="w-10 h-10 bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
+        <span className="text-[10px] font-mono text-white/40">{auction.platform.substring(0, 2)}</span>
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-white truncate">{auction.domain}</div>
+        <div className="text-[10px] text-white/40">{auction.time_remaining}</div>
+      </div>
+      <div className="text-right shrink-0">
+        <div className="font-mono text-base font-semibold text-accent">${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 shrink-0" />
+    </a>
+  )
+}
+
+// ============================================================================
+// DESKTOP LIVE TICKER
 // ============================================================================
 
 function LiveTicker({ items }: { items: { label: string; value: string; highlight?: boolean }[] }) {
   return (
-    <div className="relative border-y border-white/[0.08] bg-black/40 overflow-hidden">
+    <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" />
       
@@ -82,11 +389,13 @@ 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 searchInputRef = useRef<HTMLInputElement>(null)
 
   // Load Data
@@ -102,9 +411,15 @@ 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])
@@ -144,6 +459,7 @@ export default function RadarPage() {
       showToast(`Target acquired: ${searchQuery.trim()}`, 'success')
       setSearchQuery('')
       setSearchResult(null)
+      setMobileSearchOpen(false)
     } catch (err: any) {
       showToast(err.message || 'Mission failed', 'error')
     } finally {
@@ -171,12 +487,122 @@ export default function RadarPage() {
   ]
 
   return (
+    <>
+      {/* Mobile Header */}
+      <MobileHeader 
+        onSearchOpen={() => setMobileSearchOpen(true)} 
+        isRefreshing={isRefreshing}
+        onRefresh={handleRefresh}
+      />
+
+      {/* Mobile Search Modal */}
+      <MobileSearchModal
+        isOpen={mobileSearchOpen}
+        onClose={() => setMobileSearchOpen(false)}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        searchResult={searchResult}
+        addingToWatchlist={addingToWatchlist}
+        onAddToWatchlist={handleAddToWatchlist}
+      />
+
+      {/* Mobile Content */}
+      <div className="lg:hidden min-h-screen bg-[#020202] pb-20">
+        {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
+        
+        {/* Stats Grid */}
+        <div className="p-4 grid grid-cols-2 gap-2">
+          <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} />
+        </div>
+
+        {/* Available Alert */}
+        {availableDomains.length > 0 && (
+          <div className="mx-4 mb-4 p-4 bg-accent/10 border border-accent/30">
+            <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">
+                <Bell className="w-5 h-5 text-accent" />
+              </div>
+              <div className="flex-1">
+                <div className="text-sm font-semibold text-white">{availableDomains.length} Domain{availableDomains.length > 1 ? 's' : ''} Available!</div>
+                <div className="text-xs text-accent">Check your watchlist now</div>
+              </div>
+              <Link href="/terminal/watchlist" className="w-10 h-10 bg-accent flex items-center justify-center">
+                <ArrowRight className="w-5 h-5 text-black" />
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {/* Section: Live Auctions */}
+        <div className="px-4 mb-6">
+          <div className="flex items-center justify-between mb-3">
+            <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>
+            </div>
+            <Link href="/terminal/market" className="text-xs text-accent font-medium">
+              See 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 className="space-y-2">
+              {hotAuctions.map((auction, i) => (
+                <AuctionCard key={i} auction={auction} />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12 border border-dashed border-white/10">
+              <Gavel className="w-8 h-8 text-white/10 mx-auto mb-2" />
+              <p className="text-white/30 text-sm">No active auctions</p>
+            </div>
+          )}
+        </div>
+
+        {/* Section: Quick Links */}
+        <div className="px-4 mb-6">
+          <div className="flex items-center gap-2 mb-3">
+            <Zap className="w-4 h-4 text-white/50" />
+            <span className="text-sm font-semibold text-white">Quick Actions</span>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-2">
+            {[
+              { label: 'TLD Intel', desc: 'Price trends', href: '/terminal/intel', icon: TrendingUp },
+              { label: 'Sniper', desc: 'Set alerts', href: '/terminal/sniper', icon: Target },
+            ].map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="p-4 bg-white/[0.02] border border-white/[0.06] active:bg-white/[0.05] transition-colors"
+              >
+                <item.icon className="w-5 h-5 text-accent mb-3" />
+                <div className="text-sm font-medium text-white">{item.label}</div>
+                <div className="text-[10px] text-white/40">{item.desc}</div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Bottom Nav */}
+      <MobileBottomNav active="radar" />
+
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      {/* DESKTOP LAYOUT */}
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      <div className="hidden lg:block">
         <CommandCenterLayout minimal>
           {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
           
-      {/* ═══════════════════════════════════════════════════════════════════════ */}
-      {/* HERO - Compact for Laptops */}
-      {/* ═══════════════════════════════════════════════════════════════════════ */}
+          {/* HERO */}
           <section className="pt-6 lg:pt-8 pb-10">
             <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
               
@@ -302,7 +728,7 @@ export default function RadarPage() {
                               </p>
                             )}
                             
-                        {/* Actions - Always show */}
+                            {/* Actions */}
                             <div className="flex gap-3">
                               <button
                                 onClick={handleAddToWatchlist}
@@ -347,9 +773,7 @@ export default function RadarPage() {
           {/* 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]">
               
@@ -430,13 +854,30 @@ export default function RadarPage() {
               
             </div>
           </section>
+        </CommandCenterLayout>
+      </div>
       
       <style jsx global>{`
         @keyframes ticker {
           0% { transform: translateX(0); }
           100% { transform: translateX(-33.33%); }
         }
+        
+        /* Safe area for notch and home indicator */
+        .safe-area-top {
+          padding-top: env(safe-area-inset-top);
+        }
+        .safe-area-bottom {
+          padding-bottom: env(safe-area-inset-bottom);
+        }
+        
+        /* Prevent overscroll on mobile */
+        @media (max-width: 1023px) {
+          html, body {
+            overscroll-behavior: none;
+          }
+        }
       `}</style>
-    </CommandCenterLayout>
+    </>
   )
 }