Radar: Added watchlist preview, Market: Native app mobile design

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

@@ -457,6 +457,78 @@ export default function RadarPage() {
           </div>
         </section>
 
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* WATCHLIST PREVIEW */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {domains && domains.length > 0 && (
+          <section className="px-4 lg:px-10 py-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
+                <Eye className="w-4 h-4 text-accent" />
+                Your Watchlist
+              </h2>
+              <Link href="/terminal/watchlist" className="text-xs font-medium text-accent hover:text-white active:text-white transition-colors flex items-center gap-1">
+                Manage
+                <ChevronRight className="w-3 h-3" />
+              </Link>
+            </div>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+              {domains.slice(0, 6).map((domain) => (
+                <Link
+                  key={domain.id}
+                  href="/terminal/watchlist"
+                  className={clsx(
+                    "flex items-center gap-3 p-4 bg-[#0A0A0A] border rounded-xl lg:rounded-none transition-all active:scale-[0.99] group",
+                    domain.is_available 
+                      ? "border-accent/30 bg-accent/[0.03]" 
+                      : "border-white/[0.06]"
+                  )}
+                >
+                  <div className={clsx(
+                    "w-10 h-10 rounded-lg lg:rounded-none flex items-center justify-center shrink-0",
+                    domain.is_available 
+                      ? "bg-accent/10 border border-accent/20" 
+                      : "bg-white/[0.03] border border-white/[0.06]"
+                  )}>
+                    {domain.is_available ? (
+                      <CheckCircle2 className="w-5 h-5 text-accent" />
+                    ) : (
+                      <Eye className="w-5 h-5 text-white/30" />
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-bold text-white truncate group-hover:text-accent transition-colors">
+                      {domain.domain}
+                    </div>
+                    <div className={clsx(
+                      "text-[10px] font-bold uppercase tracking-wider",
+                      domain.is_available ? "text-accent" : "text-white/30"
+                    )}>
+                      {domain.is_available ? 'Available!' : 'Monitoring'}
+                    </div>
+                  </div>
+                  {domain.is_available && (
+                    <span className="px-2 py-1 bg-accent text-[#020202] text-[9px] font-bold rounded-sm shrink-0">
+                      GET IT
+                    </span>
+                  )}
+                </Link>
+              ))}
+            </div>
+            
+            {domains.length > 6 && (
+              <Link 
+                href="/terminal/watchlist" 
+                className="mt-4 flex items-center justify-center gap-2 py-3 border border-white/[0.08] rounded-xl lg:rounded-none text-white/50 text-xs font-medium hover:text-white hover:border-white/20 active:bg-white/[0.02] transition-all"
+              >
+                View all {domains.length} domains
+                <ArrowRight className="w-3 h-3" />
+              </Link>
+            )}
+          </section>
+        )}
+
         {/* ═══════════════════════════════════════════════════════════════════════ */}
         {/* HOT AUCTIONS - Feed Style */}
         {/* ═══════════════════════════════════════════════════════════════════════ */}