refactor(dependency-graph): use shadcn components, replace emojis with lucide icons, add light mode

DevanshuNEU · DevanshuNEU · commit c95b4828b288 · 2026-01-27T15:31:06.000-05:00
diff --git a/frontend/src/components/DependencyGraph/GraphNode.tsx b/frontend/src/components/DependencyGraph/GraphNode.tsx
@@ -1,8 +1,20 @@
 import { memo } from 'react'
 import { Handle, Position } from 'reactflow'
 import type { NodeProps } from 'reactflow'
-import { FileCode2, FileJson, FileText, TestTube2, Settings, File } from 'lucide-react'
+import { 
+  FileCode2, 
+  FileJson, 
+  FileText, 
+  TestTube2, 
+  Settings, 
+  File,
+  AlertTriangle,
+  Flame,
+  CheckCircle2,
+  CircleAlert
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
 import type { RiskLevel } from './hooks/useImpactAnalysis'
 
 export interface GraphNodeData {
@@ -48,11 +60,11 @@ const STATE_STYLES: Record<GraphNodeData['state'], string> = {
   dimmed: 'border-zinc-200 bg-zinc-50/50 opacity-40 dark:border-zinc-800 dark:bg-zinc-900/50',
 }
 
-const RISK_BADGES: Record<RiskLevel, { bg: string; text: string; label: string }> = {
-  low: { bg: 'bg-emerald-100 dark:bg-emerald-500/10', text: 'text-emerald-600 dark:text-emerald-400', label: 'Low' },
-  medium: { bg: 'bg-yellow-100 dark:bg-yellow-500/10', text: 'text-yellow-600 dark:text-yellow-400', label: 'Med' },
-  high: { bg: 'bg-orange-100 dark:bg-orange-500/10', text: 'text-orange-600 dark:text-orange-400', label: 'High' },
-  critical: { bg: 'bg-rose-100 dark:bg-rose-500/10', text: 'text-rose-600 dark:text-rose-400', label: 'Crit' },
+const RISK_CONFIG: Record<RiskLevel, { variant: 'default' | 'secondary' | 'destructive' | 'outline'; label: string; className: string }> = {
+  low: { variant: 'secondary', label: 'Low', className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' },
+  medium: { variant: 'secondary', label: 'Med', className: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/10 dark:text-yellow-400' },
+  high: { variant: 'secondary', label: 'High', className: 'bg-orange-100 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400' },
+  critical: { variant: 'destructive', label: 'Crit', className: 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400' },
 }
 
 function getFileType(path: string, language: string): string {
@@ -75,7 +87,7 @@ function GraphNodeComponent({ data }: NodeProps<GraphNodeData>) {
   const Icon = FILE_ICONS[fileType] || FILE_ICONS.unknown
   const iconColor = LANGUAGE_COLORS[fileType] || LANGUAGE_COLORS.unknown
   const stateStyle = STATE_STYLES[data.state]
-  const risk = RISK_BADGES[data.riskLevel]
+  const risk = RISK_CONFIG[data.riskLevel]
 
   return (
     <>
@@ -93,7 +105,6 @@ function GraphNodeComponent({ data }: NodeProps<GraphNodeData>) {
           data.isEntryPoint && 'border-l-4 border-l-emerald-500'
         )}
       >
-        {/* Header row */}
         <div className="flex items-center gap-2 mb-1">
           <Icon className={cn('w-4 h-4 flex-shrink-0', iconColor)} />
           <span 
@@ -103,13 +114,12 @@ function GraphNodeComponent({ data }: NodeProps<GraphNodeData>) {
             {data.label}
           </span>
           {data.dependentCount > 0 && (
-            <span className={cn('px-1.5 py-0.5 rounded text-[10px] font-medium', risk.bg, risk.text)}>
+            <Badge variant="secondary" className={cn('text-[10px] px-1.5 py-0 h-5', risk.className)}>
               {risk.label}
-            </span>
+            </Badge>
           )}
         </div>
 
-        {/* Stats row */}
         <div className="flex items-center gap-3 text-[11px] text-zinc-500 dark:text-zinc-400">
           <span className={cn(
             'font-medium',
@@ -121,12 +131,6 @@ function GraphNodeComponent({ data }: NodeProps<GraphNodeData>) {
           </span>
           <span>•</span>
           <span>{data.importCount} imports</span>
-          {data.loc && (
-            <>
-              <span>•</span>
-              <span>{data.loc} LOC</span>
-            </>
-          )}
         </div>
       </div>
 
diff --git a/frontend/src/components/DependencyGraph/GraphToolbar.tsx b/frontend/src/components/DependencyGraph/GraphToolbar.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react'
 import { RotateCcw, Maximize2, Filter, Eye, EyeOff } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 
 interface GraphToolbarProps {
   totalFiles: number
@@ -25,7 +26,6 @@ function GraphToolbarComponent({
 }: GraphToolbarProps) {
   return (
     <div className="flex items-center justify-between gap-4 px-4 py-2 bg-white/80 dark:bg-zinc-900/80 border-b border-zinc-200 dark:border-zinc-800 backdrop-blur-sm">
-      {/* Left: Stats */}
       <div className="flex items-center gap-4 text-sm">
         <span className="text-zinc-500 dark:text-zinc-400">
           Showing <span className="text-zinc-700 dark:text-zinc-200 font-medium">{visibleFiles}</span>
@@ -36,53 +36,37 @@ function GraphToolbarComponent({
         </span>
       </div>
 
-      {/* Center: Filters */}
       <div className="flex items-center gap-2">
-        <button
+        <Button
+          variant={showAll ? 'default' : 'secondary'}
+          size="sm"
           onClick={onToggleShowAll}
-          className={cn(
-            'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
-            showAll 
-              ? 'bg-indigo-600 text-white' 
-              : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700'
-          )}
+          className="h-8"
         >
-          <Filter className="w-3.5 h-3.5" />
+          <Filter className="w-3.5 h-3.5 mr-1.5" />
           {showAll ? 'Show Top 15' : 'Show All'}
-        </button>
+        </Button>
 
-        <button
+        <Button
+          variant="secondary"
+          size="sm"
           onClick={onToggleTests}
-          className={cn(
-            'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
-            showTests 
-              ? 'bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700'
-              : 'bg-zinc-50 dark:bg-zinc-800/50 text-zinc-400 dark:text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-600 dark:hover:text-zinc-300'
-          )}
+          className={cn('h-8', !showTests && 'opacity-60')}
         >
-          {showTests ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
+          {showTests ? <Eye className="w-3.5 h-3.5 mr-1.5" /> : <EyeOff className="w-3.5 h-3.5 mr-1.5" />}
           Tests
-        </button>
+        </Button>
       </div>
 
-      {/* Right: Actions */}
       <div className="flex items-center gap-1">
-        <button
-          onClick={onResetView}
-          className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors group"
-          title="Reset View"
-        >
-          <RotateCcw className="w-4 h-4 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300" />
-        </button>
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onResetView} title="Reset View">
+          <RotateCcw className="w-4 h-4" />
+        </Button>
         
         {onFullscreen && (
-          <button
-            onClick={onFullscreen}
-            className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors group"
-            title="Fullscreen"
-          >
-            <Maximize2 className="w-4 h-4 text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-300" />
-          </button>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onFullscreen} title="Fullscreen">
+            <Maximize2 className="w-4 h-4" />
+          </Button>
         )}
       </div>
     </div>
diff --git a/frontend/src/components/DependencyGraph/ImpactPanel.tsx b/frontend/src/components/DependencyGraph/ImpactPanel.tsx
@@ -1,6 +1,21 @@
 import { memo, useState } from 'react'
-import { X, ChevronDown, ChevronRight, AlertTriangle, FileCode2, ExternalLink, Search } from 'lucide-react'
+import { 
+  X, 
+  ChevronDown, 
+  ChevronRight, 
+  AlertTriangle, 
+  FileCode2, 
+  ExternalLink, 
+  Search,
+  CheckCircle2,
+  Flame,
+  CircleAlert,
+  MapPin
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import type { RiskLevel, ImpactResult } from './hooks/useImpactAnalysis'
 
 interface ImpactPanelProps {
@@ -13,33 +28,39 @@ interface ImpactPanelProps {
   onAnalyzeInSearch?: (fileId: string) => void
 }
 
-const RISK_CONFIG: Record<RiskLevel, { bg: string; border: string; text: string; icon: string; label: string }> = {
+const RISK_CONFIG: Record<RiskLevel, { 
+  bg: string
+  border: string
+  text: string
+  icon: typeof CheckCircle2
+  label: string 
+}> = {
   low: { 
     bg: 'bg-emerald-50 dark:bg-emerald-500/10', 
     border: 'border-emerald-200 dark:border-emerald-500/30',
     text: 'text-emerald-600 dark:text-emerald-400', 
-    icon: '✓',
+    icon: CheckCircle2,
     label: 'Low Risk'
   },
   medium: { 
     bg: 'bg-yellow-50 dark:bg-yellow-500/10', 
     border: 'border-yellow-200 dark:border-yellow-500/30',
     text: 'text-yellow-600 dark:text-yellow-400', 
-    icon: '⚠',
+    icon: CircleAlert,
     label: 'Medium Risk'
   },
   high: { 
     bg: 'bg-orange-50 dark:bg-orange-500/10', 
     border: 'border-orange-200 dark:border-orange-500/30',
     text: 'text-orange-600 dark:text-orange-400', 
-    icon: '⚠',
+    icon: AlertTriangle,
     label: 'High Risk'
   },
   critical: { 
     bg: 'bg-rose-50 dark:bg-rose-500/10', 
     border: 'border-rose-200 dark:border-rose-500/30',
     text: 'text-rose-600 dark:text-rose-400', 
-    icon: '🔥',
+    icon: Flame,
     label: 'Critical'
   },
 }
@@ -114,7 +135,7 @@ function CollapsibleSection({
           <ChevronRight className="w-4 h-4 text-zinc-400 dark:text-zinc-500" />
         )}
         <span className={cn('text-sm font-medium', variantStyles[variant])}>{title}</span>
-        <span className="text-xs text-zinc-400 dark:text-zinc-500 ml-auto">{count}</span>
+        <Badge variant="secondary" className="ml-auto text-[10px] px-1.5 py-0 h-5">{count}</Badge>
       </button>
 
       {isOpen && (
@@ -143,12 +164,12 @@ function ImpactPanelComponent({
   onAnalyzeInSearch,
 }: ImpactPanelProps) {
   const risk = RISK_CONFIG[impact.riskLevel]
+  const RiskIcon = risk.icon
   const totalDependents = impact.allDependents.length
 
   return (
     <div className="w-80 bg-white dark:bg-zinc-900 border-l border-zinc-200 dark:border-zinc-800 h-full flex flex-col animate-in slide-in-from-right duration-200">
-      {/* Header */}
-      <div className="p-4 border-b border-zinc-200 dark:border-zinc-800">
+      <CardHeader className="p-4 border-b border-zinc-200 dark:border-zinc-800">
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0 flex-1">
             <h3 className="font-semibold text-zinc-800 dark:text-zinc-100 truncate" title={fullPath}>
@@ -158,20 +179,16 @@ function ImpactPanelComponent({
               {fullPath}
             </p>
           </div>
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors flex-shrink-0"
-          >
-            <X className="w-4 h-4 text-zinc-500 dark:text-zinc-400" />
-          </button>
+          <Button variant="ghost" size="icon" className="h-8 w-8 flex-shrink-0" onClick={onClose}>
+            <X className="w-4 h-4" />
+          </Button>
         </div>
 
-        {/* Risk Badge */}
         <div className={cn(
           'mt-3 px-3 py-2 rounded-lg border flex items-center gap-2',
           risk.bg, risk.border
         )}>
-          <span className="text-lg">{risk.icon}</span>
+          <RiskIcon className={cn('w-5 h-5', risk.text)} />
           <div>
             <div className={cn('font-semibold text-sm', risk.text)}>{risk.label}</div>
             <div className="text-xs text-zinc-500 dark:text-zinc-400">
@@ -183,25 +200,22 @@ function ImpactPanelComponent({
           </div>
         </div>
 
-        {/* Warning for critical files */}
         {impact.riskLevel === 'critical' && (
           <div className="mt-2 flex items-start gap-2 text-xs text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 px-3 py-2 rounded-lg">
             <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
             <span>Changes to this file have high blast radius. Test thoroughly.</span>
           </div>
         )}
 
-        {/* Entry Point indicator */}
         {impact.isEntryPoint && (
           <div className="mt-2 flex items-center gap-2 text-xs text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2 rounded-lg">
-            <span>📍</span>
-            <span>Entry point - this file is a root of the dependency tree</span>
+            <MapPin className="w-3.5 h-3.5" />
+            <span>Entry point - root of the dependency tree</span>
           </div>
         )}
-      </div>
+      </CardHeader>
 
-      {/* Dependents Lists */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+      <CardContent className="flex-1 overflow-y-auto p-4 space-y-3">
         <CollapsibleSection
           title="Direct Dependents"
           count={impact.directDependents.length}
@@ -221,18 +235,14 @@ function ImpactPanelComponent({
           onFileClick={onFileClick}
           onFileHover={onFileHover}
         />
-      </div>
+      </CardContent>
 
-      {/* Actions Footer */}
       {onAnalyzeInSearch && (
         <div className="p-4 border-t border-zinc-200 dark:border-zinc-800">
-          <button
-            onClick={() => onAnalyzeInSearch(fullPath)}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors"
-          >
-            <Search className="w-4 h-4" />
+          <Button className="w-full" onClick={() => onAnalyzeInSearch(fullPath)}>
+            <Search className="w-4 h-4 mr-2" />
             Analyze in Search
-          </button>
+          </Button>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/DependencyGraph/index.tsx b/frontend/src/components/DependencyGraph/index.tsx
