Skip to content

Commit 02b9769

Browse files
DevanshuNEUDevanshuNEU
authored
Merge pull request #179 from DevanshuNEU/feature/dashboard-v2-redesign
feat(dashboard): V2 redesign with unified brand identity & premium UX
2 parents 3bb6b35 + 8b75e42 commit 02b9769

10 files changed

Lines changed: 558 additions & 492 deletions

File tree

‎frontend/src/components/AddRepoForm.tsx‎

Lines changed: 109 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useState } from 'react'
2+
import { motion, AnimatePresence } from 'framer-motion'
3+
import { Package, Plus, X } from 'lucide-react'
24

35
interface AddRepoFormProps {
46
onAdd: (gitUrl: string, branch: string) => Promise<void>
@@ -13,110 +15,126 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
1315
const handleSubmit = async (e: React.FormEvent) => {
1416
e.preventDefault()
1517
if (!gitUrl) return
16-
1718
await onAdd(gitUrl, branch)
1819
setGitUrl('')
1920
setBranch('main')
2021
setShowForm(false)
2122
}
2223

23-
if (!showForm) {
24-
return (
25-
<button
24+
return (
25+
<>
26+
<motion.button
27+
whileHover={{ scale: 1.02 }}
28+
whileTap={{ scale: 0.98 }}
2629
onClick={() => setShowForm(true)}
27-
className="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white text-sm font-medium rounded-lg transition-all disabled:opacity-50"
30+
className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white text-sm font-medium rounded-xl transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2"
2831
disabled={loading}
2932
>
30-
+ Add Repository
31-
</button>
32-
)
33-
}
33+
<span className="text-lg">+</span>
34+
<span>Add Repository</span>
35+
</motion.button>
3436

35-
return (
36-
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
37-
<div className="bg-[#111113] border border-white/10 rounded-2xl shadow-2xl w-full max-w-md mx-4">
38-
{/* Header */}
39-
<div className="flex items-center justify-between p-5 border-b border-white/5">
40-
<div>
41-
<h3 className="text-lg font-semibold text-white">Add Repository</h3>
42-
<p className="text-sm text-gray-400 mt-0.5">Clone and index a Git repository</p>
43-
</div>
44-
<button
45-
onClick={() => setShowForm(false)}
46-
className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
47-
disabled={loading}
37+
<AnimatePresence>
38+
{showForm && (
39+
<motion.div
40+
initial={{ opacity: 0 }}
41+
animate={{ opacity: 1 }}
42+
exit={{ opacity: 0 }}
43+
className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50"
44+
onClick={() => !loading && setShowForm(false)}
4845
>
49-
✕
50-
</button>
51-
</div>
46+
<motion.div
47+
initial={{ opacity: 0, scale: 0.95, y: 20 }}
48+
animate={{ opacity: 1, scale: 1, y: 0 }}
49+
exit={{ opacity: 0, scale: 0.95, y: 20 }}
50+
onClick={e => e.stopPropagation()}
51+
className="bg-gradient-to-br from-[#111113] to-[#0a0a0c] border border-white/10 rounded-2xl shadow-2xl w-full max-w-md mx-4"
52+
>
53+
{/* Header */}
54+
<div className="flex items-center justify-between p-6 border-b border-white/5">
55+
<div className="flex items-center gap-3">
56+
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center">
57+
<Package className="w-5 h-5 text-blue-400" />
58+
</div>
59+
<div>
60+
<h3 className="text-lg font-semibold text-white">Add Repository</h3>
61+
<p className="text-sm text-gray-500">Clone and index with AI</p>
62+
</div>
63+
</div>
64+
<button
65+
onClick={() => setShowForm(false)}
66+
className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
67+
disabled={loading}
68+
>
69+
<X className="w-4 h-4" />
70+
</button>
71+
</div>
5272

53-
{/* Form */}
54-
<form onSubmit={handleSubmit} className="p-5 space-y-5">
55-
<div>
56-
<label className="block text-sm font-medium mb-2 text-gray-300">
57-
Git URL
58-
</label>
59-
<input
60-
type="url"
61-
value={gitUrl}
62-
onChange={(e) => setGitUrl(e.target.value)}
63-
placeholder="https://github.com/username/repo"
64-
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20 transition-all"
65-
required
66-
disabled={loading}
67-
autoFocus
68-
/>
69-
</div>
73+
{/* Form */}
74+
<form onSubmit={handleSubmit} className="p-6 space-y-5">
75+
<div>
76+
<label className="block text-sm font-medium mb-2 text-gray-300">Git URL</label>
77+
<input
78+
type="url"
79+
value={gitUrl}
80+
onChange={(e) => setGitUrl(e.target.value)}
81+
placeholder="https://github.com/username/repo"
82+
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
83+
required
84+
disabled={loading}
85+
autoFocus
86+
/>
87+
</div>
7088

71-
<div>
72-
<label className="block text-sm font-medium mb-2 text-gray-300">
73-
Branch
74-
</label>
75-
<input
76-
type="text"
77-
value={branch}
78-
onChange={(e) => setBranch(e.target.value)}
79-
placeholder="main"
80-
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20 transition-all"
81-
required
82-
disabled={loading}
83-
/>
84-
<p className="mt-2 text-xs text-gray-500">
85-
The repository will be cloned and automatically indexed
86-
</p>
87-
</div>
89+
<div>
90+
<label className="block text-sm font-medium mb-2 text-gray-300">Branch</label>
91+
<input
92+
type="text"
93+
value={branch}
94+
onChange={(e) => setBranch(e.target.value)}
95+
placeholder="main"
96+
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
97+
required
98+
disabled={loading}
99+
/>
100+
<p className="mt-2 text-xs text-gray-500">Repository will be cloned and automatically indexed</p>
101+
</div>
88102

89-
{/* Actions */}
90-
<div className="flex gap-3 pt-2">
91-
<button
92-
type="button"
93-
onClick={() => {
94-
setShowForm(false)
95-
setGitUrl('')
96-
setBranch('main')
97-
}}
98-
className="flex-1 px-4 py-3 bg-white/5 border border-white/10 text-gray-300 font-medium rounded-xl hover:bg-white/10 transition-colors disabled:opacity-50"
99-
disabled={loading}
100-
>
101-
Cancel
102-
</button>
103-
<button
104-
type="submit"
105-
className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
106-
disabled={loading}
107-
>
108-
{loading ? (
109-
<>
110-
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
111-
<span>Adding...</span>
112-
</>
113-
) : (
114-
'Add & Index'
115-
)}
116-
</button>
117-
</div>
118-
</form>
119-
</div>
120-
</div>
103+
{/* Actions */}
104+
<div className="flex gap-3 pt-2">
105+
<button
106+
type="button"
107+
onClick={() => { setShowForm(false); setGitUrl(''); setBranch('main') }}
108+
className="flex-1 px-4 py-3 bg-white/5 border border-white/10 text-gray-300 font-medium rounded-xl hover:bg-white/10 transition-colors disabled:opacity-50"
109+
disabled={loading}
110+
>
111+
Cancel
112+
</button>
113+
<motion.button
114+
whileHover={{ scale: 1.02 }}
115+
whileTap={{ scale: 0.98 }}
116+
type="submit"
117+
className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20"
118+
disabled={loading}
119+
>
120+
{loading ? (
121+
<>
122+
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
123+
<span>Adding...</span>
124+
</>
125+
) : (
126+
<>
127+
<Plus className="w-4 h-4" />
128+
<span>Add & Index</span>
129+
</>
130+
)}
131+
</motion.button>
132+
</div>
133+
</form>
134+
</motion.div>
135+
</motion.div>
136+
)}
137+
</AnimatePresence>
138+
</>
121139
)
122140
}

‎frontend/src/components/DependencyGraph.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ReactFlow, {
99
} from 'reactflow'
1010
import type { Node, Edge } from 'reactflow'
1111
import dagre from 'dagre'
12+
import { Lightbulb } from 'lucide-react'
1213
import 'reactflow/dist/style.css'
1314
import { useDependencyGraph } from '../hooks/useCachedQuery'
1415

@@ -235,21 +236,21 @@ export function DependencyGraph({ repoId, apiUrl, apiKey }: DependencyGraphProps
235236
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
236237
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
237238
<div className="text-sm text-gray-400 mb-1">Total Files</div>
238-
<div className="text-3xl font-bold text-white">{allNodes.length}</div>
239+
<div className="text-3xl font-bold text-blue-500">{allNodes.length}</div>
239240
</div>
240241
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
241242
<div className="text-sm text-gray-400 mb-1">Dependencies</div>
242-
<div className="text-3xl font-bold text-blue-400">{edges.length}</div>
243+
<div className="text-3xl font-bold text-blue-500">{edges.length}</div>
243244
</div>
244245
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
245246
<div className="text-sm text-gray-400 mb-1">Avg per File</div>
246-
<div className="text-3xl font-bold text-white">
247+
<div className="text-3xl font-bold text-blue-500">
247248
{metrics?.avg_dependencies?.toFixed(1) || 0}
248249
</div>
249250
</div>
250251
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
251252
<div className="text-sm text-gray-400 mb-1">Showing</div>
252-
<div className="text-3xl font-bold text-green-400">{nodes.length}</div>
253+
<div className="text-3xl font-bold text-blue-500">{nodes.length}</div>
253254
</div>
254255
</div>
255256

@@ -357,8 +358,9 @@ export function DependencyGraph({ repoId, apiUrl, apiKey }: DependencyGraphProps
357358
<span className="text-gray-400">Dependency</span>
358359
</div>
359360
</div>
360-
<div className="mt-3 pt-3 border-t border-white/5 text-xs text-gray-500">
361-
💡 Click any node to highlight its dependencies • Drag to pan • Scroll to zoom
361+
<div className="mt-3 pt-3 border-t border-white/5 text-xs text-gray-500 flex items-center gap-2">
362+
<Lightbulb className="w-3.5 h-3.5 text-blue-400" />
363+
<span>Click any node to highlight its dependencies • Drag to pan • Scroll to zoom</span>
362364
</div>
363365
</div>
364366
</div>

‎frontend/src/components/ImpactAnalyzer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export function ImpactAnalyzer({ repoId, apiUrl, apiKey }: ImpactAnalyzerProps)
129129
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
130130
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
131131
<div className="text-sm text-gray-400 mb-1">Direct Dependencies</div>
132-
<div className="text-3xl font-bold text-blue-400">
132+
<div className="text-3xl font-bold text-blue-500">
133133
{result.dependency_count}
134134
</div>
135135
<div className="text-xs text-gray-500 mt-1">
@@ -139,7 +139,7 @@ export function ImpactAnalyzer({ repoId, apiUrl, apiKey }: ImpactAnalyzerProps)
139139

140140
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
141141
<div className="text-sm text-gray-400 mb-1">Total Impact</div>
142-
<div className="text-3xl font-bold text-yellow-400">
142+
<div className="text-3xl font-bold text-blue-500">
143143
{result.dependent_count}
144144
</div>
145145
<div className="text-xs text-gray-500 mt-1">
@@ -149,7 +149,7 @@ export function ImpactAnalyzer({ repoId, apiUrl, apiKey }: ImpactAnalyzerProps)
149149

150150
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
151151
<div className="text-sm text-gray-400 mb-1">Test Files</div>
152-
<div className="text-3xl font-bold text-green-400">
152+
<div className="text-3xl font-bold text-blue-500">
153153
{result.test_files?.length || 0}
154154
</div>
155155
<div className="text-xs text-gray-500 mt-1">

0 commit comments

Comments
 (0)