From 1d0bdb92caf621e99e75112c3b4c13657270cd34 Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Thu, 18 Dec 2025 13:33:20 +0100
Subject: [PATCH] refactor: Simplify AnalyzePanel to match Hunt page style

- Remove colorful section backgrounds and borders
- Use monochrome, minimalist styling throughout
- Remove "Show raw data" toggle from items
- Compact header and score display
- Simplified footer with smaller text
- Consistent with Hunt pages design language
---
 .../src/components/analyze/AnalyzePanel.tsx   | 394 ++++++------------
 1 file changed, 134 insertions(+), 260 deletions(-)

diff --git a/frontend/src/components/analyze/AnalyzePanel.tsx b/frontend/src/components/analyze/AnalyzePanel.tsx
index 8f0efe7..832419c 100644
--- a/frontend/src/components/analyze/AnalyzePanel.tsx
+++ b/frontend/src/components/analyze/AnalyzePanel.tsx
@@ -14,17 +14,11 @@ import {
   Check,
   Zap,
   Globe,
-  ChevronDown,
   ChevronRight,
   CheckCircle2,
   XCircle,
   Sparkles,
-  Info,
   Clock,
-  Link2,
-  Search,
-  Eye,
-  Filter,
 } from 'lucide-react'
 import { api } from '@/lib/api'
 import { useAnalyzePanelStore } from '@/lib/analyze-store'
@@ -49,58 +43,54 @@ function getStatusColor(status: string) {
 }
 
 function getSectionConfig(key: string) {
+  // Minimalist monochrome style matching Hunt pages
+  const base = { 
+    bg: 'bg-white/[0.02]', 
+    border: 'border-white/[0.08]',
+    color: 'text-white/60'
+  }
+  
   switch (key) {
     case 'authority':
       return { 
+        ...base,
         icon: Shield, 
-        color: 'text-blue-400', 
-        bg: 'bg-blue-500/10', 
-        border: 'border-blue-500/20',
-        description: 'Domain age, backlink profile, and trust signals',
-        tooltip: 'Authority measures how established and trusted the domain is. Older domains with quality backlinks rank better.'
+        description: 'Age, backlinks, trust signals',
+        tooltip: 'Authority measures how established and trusted the domain is.'
       }
     case 'market':
       return { 
+        ...base,
         icon: TrendingUp, 
-        color: 'text-emerald-400', 
-        bg: 'bg-emerald-500/10', 
-        border: 'border-emerald-500/20',
-        description: 'Search demand, ad value, and TLD availability',
-        tooltip: 'Market data shows commercial potential. High search volume + CPC = strong buyer intent.'
+        description: 'Search demand, CPC, TLD availability',
+        tooltip: 'Market data shows commercial potential.'
       }
     case 'risk':
       return { 
+        ...base,
         icon: AlertTriangle, 
-        color: 'text-amber-400', 
-        bg: 'bg-amber-500/10', 
-        border: 'border-amber-500/20',
-        description: 'Trademark conflicts, blacklists, and history',
-        tooltip: 'Risk checks help avoid legal issues and spam penalties. Always clear before buying.'
+        description: 'Trademarks, blacklists, history',
+        tooltip: 'Risk checks help avoid legal issues.'
       }
     case 'value':
       return { 
+        ...base,
         icon: DollarSign, 
-        color: 'text-violet-400', 
-        bg: 'bg-violet-500/10', 
-        border: 'border-violet-500/20',
-        description: 'Estimated worth and recent comparable sales',
-        tooltip: 'Value estimation based on length, keywords, extension, and actual market sales.'
+        description: 'Estimated worth, comparable sales',
+        tooltip: 'Value estimation based on market data.'
       }
     case 'vision':
       return { 
+        ...base,
         icon: Sparkles, 
-        color: 'text-accent', 
-        bg: 'bg-accent/10', 
-        border: 'border-accent/20',
-        description: 'AI business concepts and ideal buyer profiles',
-        tooltip: 'AI-powered analysis suggesting business uses and potential buyers for this domain.'
+        color: 'text-accent',
+        description: 'AI business insights',
+        tooltip: 'AI-powered analysis for this domain.'
       }
     default:
       return { 
+        ...base,
         icon: Globe, 
-        color: 'text-white/50', 
-        bg: 'bg-white/5', 
-        border: 'border-white/10',
         description: '',
         tooltip: ''
       }
@@ -295,22 +285,17 @@ export function AnalyzePanel() {
       <div className="absolute right-0 top-0 bottom-0 w-full sm:w-[560px] lg:w-[640px] bg-[#030303] border-l border-white/[0.08] flex flex-col overflow-hidden">
         
         {/* Header */}
-        <div className="shrink-0 border-b border-white/[0.08]">
+        <div className="shrink-0 border-b border-white/[0.06]">
           {/* Top Bar */}
-          <div className="px-4 py-4 flex items-center justify-between gap-4">
-            <div className="flex items-center gap-3 min-w-0">
-              <div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
-                <Search className="w-5 h-5 text-accent" />
-              </div>
-              <div className="min-w-0">
-                <div className="text-[10px] font-mono text-accent uppercase tracking-wider">Domain Analysis</div>
-                <div className="text-lg font-bold text-white font-mono truncate">
-                  {headerDomain}
-                </div>
+          <div className="px-4 py-3 flex items-center justify-between gap-4">
+            <div className="min-w-0">
+              <div className="text-[9px] font-mono text-white/30 uppercase tracking-wider mb-0.5">Analysis</div>
+              <div className="text-base font-bold text-white font-mono truncate">
+                {headerDomain}
               </div>
             </div>
             
-            <div className="flex items-center gap-1.5 shrink-0">
+            <div className="flex items-center gap-1 shrink-0">
               <button
                 onClick={async () => {
                   const ok = await copyToClipboard(headerDomain)
@@ -318,134 +303,84 @@ export function AnalyzePanel() {
                   setTimeout(() => setCopied(false), 1500)
                 }}
                 className={clsx(
-                  "w-9 h-9 flex items-center justify-center border transition-all",
-                  copied 
-                    ? "border-accent/30 bg-accent/10 text-accent" 
-                    : "border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05]"
+                  "w-8 h-8 flex items-center justify-center transition-all",
+                  copied ? "text-accent" : "text-white/30 hover:text-white"
                 )}
                 title="Copy domain"
               >
-                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
               </button>
               <a
                 href={`https://${encodeURIComponent(headerDomain)}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors"
+                className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors"
                 title="Visit domain"
               >
-                <ExternalLink className="w-4 h-4" />
+                <ExternalLink className="w-3.5 h-3.5" />
               </a>
               <button
                 onClick={refresh}
                 disabled={loading}
-                className="w-9 h-9 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors disabled:opacity-50"
-                title="Refresh analysis"
+                className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors disabled:opacity-50"
+                title="Refresh"
               >
-                <RefreshCw className={clsx('w-4 h-4', loading && 'animate-spin')} />
+                <RefreshCw className={clsx('w-3.5 h-3.5', loading && 'animate-spin')} />
               </button>
               <button 
                 onClick={close} 
-                className="w-9 h-9 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors ml-1"
-                title="Close panel (ESC)"
+                className="w-8 h-8 flex items-center justify-center text-white/30 hover:text-white transition-colors"
+                title="Close (ESC)"
               >
                 <X className="w-4 h-4" />
               </button>
             </div>
           </div>
 
-          {/* Score Bar */}
+          {/* Score Bar - Compact */}
           {overallScore && !loading && (
-            <div className="px-4 pb-4">
-              <div className="p-4 bg-white/[0.02] border border-white/[0.08]">
-                <div className="flex items-center gap-4">
-                  <div 
-                    className={clsx(
-                      "w-16 h-16 flex items-center justify-center border-2",
-                      overallScore.score >= 70 ? "border-accent bg-accent/10" : 
-                      overallScore.score >= 40 ? "border-amber-400 bg-amber-400/10" : "border-rose-500 bg-rose-500/10"
-                    )}
-                    title={`Health Score: ${overallScore.score}/100. ${overallScore.score >= 70 ? 'Excellent - safe to buy' : overallScore.score >= 40 ? 'Moderate - review warnings' : 'Poor - significant issues'}`}
-                  >
-                    <span className={clsx(
-                      "text-2xl font-bold font-mono",
-                      overallScore.score >= 70 ? "text-accent" : overallScore.score >= 40 ? "text-amber-400" : "text-rose-400"
-                    )}>
-                      {overallScore.score}
-                    </span>
+            <div className="px-4 pb-3">
+              <div className="flex items-center gap-3">
+                <div 
+                  className={clsx(
+                    "w-12 h-12 flex items-center justify-center border",
+                    overallScore.score >= 70 ? "border-accent/30 text-accent" : 
+                    overallScore.score >= 40 ? "border-amber-400/30 text-amber-400" : "border-rose-500/30 text-rose-400"
+                  )}
+                >
+                  <span className="text-xl font-bold font-mono">{overallScore.score}</span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="h-1.5 bg-white/[0.05] overflow-hidden flex mb-2">
+                    <div className="h-full bg-accent" style={{ width: `${(overallScore.pass / overallScore.total) * 100}%` }} />
+                    <div className="h-full bg-amber-400" style={{ width: `${(overallScore.warn / overallScore.total) * 100}%` }} />
+                    <div className="h-full bg-rose-500" style={{ width: `${(overallScore.fail / overallScore.total) * 100}%` }} />
                   </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between mb-2">
-                      <div className="text-xs font-bold text-white uppercase tracking-wider">Health Score</div>
-                      <div className="text-[10px] font-mono text-white/40">
-                        {overallScore.score >= 70 ? '✓ Good to buy' : overallScore.score >= 40 ? '⚠ Review issues' : '⛔ High risk'}
-                      </div>
-                    </div>
-                    <div className="h-2.5 bg-white/[0.05] overflow-hidden flex mb-2">
-                      <div 
-                        className="h-full bg-accent transition-all" 
-                        style={{ width: `${(overallScore.pass / overallScore.total) * 100}%` }} 
-                        title={`${overallScore.pass} passed checks`}
-                      />
-                      <div 
-                        className="h-full bg-amber-400 transition-all" 
-                        style={{ width: `${(overallScore.warn / overallScore.total) * 100}%` }} 
-                        title={`${overallScore.warn} warnings`}
-                      />
-                      <div 
-                        className="h-full bg-rose-500 transition-all" 
-                        style={{ width: `${(overallScore.fail / overallScore.total) * 100}%` }} 
-                        title={`${overallScore.fail} failed checks`}
-                      />
-                    </div>
-                    <div className="flex items-center gap-4 text-xs font-mono">
-                      <span className="text-accent flex items-center gap-1.5" title="Checks passed - no issues found">
-                        <CheckCircle2 className="w-3.5 h-3.5" /> {overallScore.pass} passed
-                      </span>
-                      <span className="text-amber-400 flex items-center gap-1.5" title="Warnings - review before buying">
-                        <AlertTriangle className="w-3.5 h-3.5" /> {overallScore.warn} warnings
-                      </span>
-                      <span className="text-rose-400 flex items-center gap-1.5" title="Failed checks - potential problems">
-                        <XCircle className="w-3.5 h-3.5" /> {overallScore.fail} failed
-                      </span>
-                    </div>
+                  <div className="flex items-center gap-3 text-[10px] font-mono text-white/40">
+                    <span className="text-accent">{overallScore.pass} ok</span>
+                    <span className="text-amber-400">{overallScore.warn} warn</span>
+                    <span className="text-rose-400">{overallScore.fail} fail</span>
                   </div>
                 </div>
               </div>
             </div>
           )}
 
-          {/* Controls with Explanations */}
-          <div className="px-4 pb-3">
-            <div className="flex items-center gap-2 flex-wrap">
-              <button
-                onClick={() => setFastMode(!fastMode)}
-                className={clsx(
-                  "flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider border transition-all group relative",
-                  fastMode 
-                    ? "border-accent/30 bg-accent/10 text-accent" 
-                    : "border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05]"
-                )}
-                title="Fast Mode: DNS-only checks (~2 sec). Skips WHOIS/RDAP for speed. Fewer details but instant results."
-              >
-                <Zap className="w-3.5 h-3.5" />
-                Fast Mode
-              </button>
-              {data?.cached && (
-                <span 
-                  className="text-[10px] font-mono text-white/30 px-2 py-1.5 border border-white/[0.08] bg-white/[0.02] flex items-center gap-1.5 cursor-help"
-                  title="Cached Result: Data from previous analysis (saves time). Click refresh ↻ for live data."
-                >
-                  <Clock className="w-3 h-3" />
-                  Cached Result
-                </span>
+          {/* Controls - Minimal */}
+          <div className="px-4 pb-3 flex items-center gap-2">
+            <button
+              onClick={() => setFastMode(!fastMode)}
+              className={clsx(
+                "flex items-center gap-1 px-2 py-1 text-[9px] font-mono uppercase transition-all",
+                fastMode ? "text-accent" : "text-white/30 hover:text-white"
               )}
-              {fastMode && (
-                <span className="text-[10px] font-mono text-white/30 italic">
-                  DNS-only, limited details
-                </span>
-              )}
-            </div>
+            >
+              <Zap className="w-3 h-3" />
+              Fast
+            </button>
+            {data?.cached && (
+              <span className="text-[9px] font-mono text-white/20">cached</span>
+            )}
           </div>
         </div>
 
@@ -479,49 +414,36 @@ export function AnalyzePanel() {
                 return (
                   <div 
                     key={section.key} 
-                    className={clsx(
-                      "border overflow-hidden bg-[#020202]",
-                      config.border
-                    )}
+                    className="border border-white/[0.06] overflow-hidden bg-[#020202]"
                   >
                     {/* Section Header */}
                     <button
                       onClick={() => toggleSection(section.key)}
-                      className={clsx(
-                        "w-full px-4 py-3 flex items-center justify-between transition-colors group",
-                        config.bg, "hover:brightness-110"
-                      )}
+                      className="w-full px-4 py-3 flex items-center justify-between transition-colors group hover:bg-white/[0.02]"
                       title={(config as any).tooltip || ''}
                     >
                       <div className="flex items-center gap-3">
-                        <div className={clsx("w-8 h-8 flex items-center justify-center border", config.border)}>
-                          <SectionIcon className={clsx("w-4 h-4", config.color)} />
-                        </div>
+                        <SectionIcon className="w-4 h-4 text-white/40" />
                         <div className="text-left">
-                          <div className="flex items-center gap-2">
-                            <span className={clsx("text-xs font-bold uppercase tracking-wider", config.color)}>
-                              {section.title}
-                            </span>
-                            <span title={(config as any).tooltip || ''}>
-                              <Info className="w-3 h-3 text-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
-                            </span>
-                          </div>
-                          <div className="text-[10px] font-mono text-white/40 mt-0.5">
+                          <span className="text-[11px] font-bold uppercase tracking-wider text-white/70">
+                            {section.title}
+                          </span>
+                          <div className="text-[10px] font-mono text-white/30">
                             {config.description}
                           </div>
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
                         {section.key !== 'vision' && section.items.length > 0 && (
-                          <span className="text-[10px] font-mono text-white/40 px-2 py-0.5 bg-white/5 border border-white/[0.06]">
-                            {section.items.length} checks
+                          <span className="text-[10px] font-mono text-white/30">
+                            {section.items.length}
                           </span>
                         )}
                         {section.key === 'vision' && (
-                          <span className="text-[10px] font-mono text-accent px-2 py-0.5 bg-accent/10 border border-accent/20">AI Powered</span>
+                          <span className="text-[9px] font-mono text-accent/70 uppercase">AI</span>
                         )}
                         <ChevronRight className={clsx(
-                          "w-4 h-4 text-white/30 transition-transform",
+                          "w-4 h-4 text-white/20 transition-transform",
                           isExpanded && "rotate-90"
                         )} />
                       </div>
@@ -538,98 +460,55 @@ export function AnalyzePanel() {
                           <div className="divide-y divide-white/[0.04]">
                             {section.items.map((item) => {
                               const statusStyle = getStatusColor(item.status)
-                              const StatusIcon = statusStyle.icon
                               const tooltip = getItemTooltip(item.key)
 
                               return (
                                 <div 
                                   key={item.key} 
-                                  className="px-4 py-3.5 hover:bg-white/[0.02] transition-colors group"
+                                  className="px-4 py-3 hover:bg-white/[0.02] transition-colors group"
                                   title={tooltip || undefined}
                                 >
-                                  <div className="flex items-start gap-3">
-                                    {/* Status Indicator */}
-                                    <div className={clsx(
-                                      "w-9 h-9 flex items-center justify-center shrink-0 border",
-                                      statusStyle.bg, statusStyle.border
-                                    )}>
-                                      {StatusIcon && <StatusIcon className={clsx("w-4 h-4", statusStyle.text)} />}
-                                    </div>
-
-                                    {/* Content */}
-                                    <div className="flex-1 min-w-0">
-                                      <div className="flex items-center justify-between gap-2 mb-1.5">
-                                        <div className="flex items-center gap-2">
-                                          <span className="text-sm font-semibold text-white">
-                                            {item.label}
-                                          </span>
-                                          {tooltip && (
-                                            <span 
-                                              title={tooltip}
-                                              className="cursor-help"
-                                            >
-                                              <Info className="w-3.5 h-3.5 text-white/20 group-hover:text-white/40 transition-colors" />
-                                            </span>
-                                          )}
-                                        </div>
-                                        {item.source && (
-                                          <span className="text-[9px] font-mono text-white/30 uppercase px-1.5 py-0.5 bg-white/[0.03] border border-white/[0.06]">
-                                            {item.source}
-                                          </span>
-                                        )}
-                                      </div>
-                                      
-                                      {/* Value */}
-                                      <div>
-                                        {isMatrix(item) ? (
-                                          <div className="grid grid-cols-4 gap-1.5 mt-2">
-                                            {(item.value as any[]).slice(0, 12).map((row: any) => (
-                                              <div
-                                                key={String(row.domain)}
-                                                className={clsx(
-                                                  "px-2 py-1.5 text-[10px] font-mono flex items-center justify-between border",
-                                                  row.status === 'available'
-                                                    ? "border-accent/20 bg-accent/5 text-accent"
-                                                    : "border-white/[0.06] bg-white/[0.02] text-white/40"
-                                                )}
-                                                title={row.status === 'available' ? '✓ Available for registration' : '✗ Already registered'}
-                                              >
-                                                <span className="truncate">.{String(row.domain).split('.').pop()}</span>
-                                                {row.status === 'available' && <Check className="w-3 h-3 shrink-0 ml-1" />}
-                                              </div>
-                                            ))}
-                                          </div>
-                                        ) : (
-                                          <div className={clsx(
-                                            "text-base font-mono font-medium",
-                                            item.status === 'pass' ? "text-accent" : 
-                                            item.status === 'warn' ? "text-amber-400" :
-                                            item.status === 'fail' ? "text-rose-400" : "text-white/60"
-                                          )}>
-                                            {formatValue(item.value)}
-                                          </div>
-                                        )}
-                                      </div>
-
-                                      {/* Inline Explanation for important items */}
-                                      {tooltip && item.status !== 'pass' && (
-                                        <div className="mt-1.5 text-[10px] font-mono text-white/30 leading-relaxed">
-                                          {item.status === 'warn' && '⚠️ '}
-                                          {item.status === 'fail' && '⛔ '}
-                                          {tooltip.split('.')[0]}.
-                                        </div>
+                                  <div className="flex items-center justify-between gap-4">
+                                    {/* Label + Source */}
+                                    <div className="flex items-center gap-2 min-w-0">
+                                      <span className="text-[11px] font-medium text-white/60 truncate">
+                                        {item.label}
+                                      </span>
+                                      {item.source && (
+                                        <span className="text-[9px] font-mono text-white/20 uppercase shrink-0">
+                                          {item.source}
+                                        </span>
                                       )}
-
-                                      {/* Details Toggle */}
-                                      {item.details && Object.keys(item.details).length > 0 && (
-                                        <details className="mt-2">
-                                          <summary className="text-[10px] font-mono text-white/30 cursor-pointer hover:text-white/50 select-none">
-                                            Show raw data
-                                          </summary>
-                                          <pre className="mt-2 text-[10px] font-mono text-white/40 bg-black/50 border border-white/[0.06] p-3 overflow-x-auto max-h-32">
-                                            {JSON.stringify(item.details, null, 2)}
-                                          </pre>
-                                        </details>
+                                    </div>
+                                    
+                                    {/* Value */}
+                                    <div className="shrink-0">
+                                      {isMatrix(item) ? (
+                                        <div className="flex gap-1">
+                                          {(item.value as any[]).slice(0, 7).map((row: any) => (
+                                            <div
+                                              key={String(row.domain)}
+                                              className={clsx(
+                                                "w-6 h-6 flex items-center justify-center text-[9px] font-mono",
+                                                row.status === 'available'
+                                                  ? "bg-accent/10 text-accent"
+                                                  : "bg-white/[0.03] text-white/20"
+                                              )}
+                                              title={`${String(row.domain).split('.').pop()}: ${row.status === 'available' ? 'Available' : 'Taken'}`}
+                                            >
+                                              .{String(row.domain).split('.').pop()?.slice(0, 2)}
+                                            </div>
+                                          ))}
+                                        </div>
+                                      ) : (
+                                        <span className={clsx(
+                                          "text-sm font-mono font-medium",
+                                          item.status === 'pass' ? "text-accent" : 
+                                          item.status === 'warn' ? "text-amber-400" :
+                                          item.status === 'fail' ? "text-rose-400" : "text-white/50"
+                                        )}>
+                                          {formatValue(item.value)}
+                                        </span>
                                       )}
                                     </div>
                                   </div>
@@ -648,29 +527,24 @@ export function AnalyzePanel() {
         </div>
 
         {/* Footer */}
-        <div className="shrink-0 border-t border-white/[0.08] px-4 py-3 bg-[#020202]">
-          <div className="flex items-center justify-between">
-            <div className="text-[10px] font-mono text-white/30">
-              Press ESC to close
-            </div>
-            <div className="flex items-center gap-2">
+        <div className="shrink-0 border-t border-white/[0.06] px-4 py-2 bg-[#020202]">
+          <div className="flex items-center justify-between text-[9px] font-mono text-white/20">
+            <span>ESC to close</span>
+            <div className="flex items-center gap-3">
               <a
                 href={`https://who.is/whois/${encodeURIComponent(headerDomain)}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[10px] font-mono text-white/40 hover:text-white transition-colors flex items-center gap-1"
+                className="hover:text-white/50 transition-colors"
               >
-                <Link2 className="w-3 h-3" />
                 WHOIS
               </a>
-              <span className="text-white/10">|</span>
               <a
                 href={`https://web.archive.org/web/*/${encodeURIComponent(headerDomain)}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[10px] font-mono text-white/40 hover:text-white transition-colors flex items-center gap-1"
+                className="hover:text-white/50 transition-colors"
               >
-                <Clock className="w-3 h-3" />
                 Archive
               </a>
             </div>