Skip to content

Commit 3ae2a30

Browse files
DevanshuNEUDevanshuNEU
committed
feat(dashboard): v2 redesign with bento grid, animations, premium UX
- RepoList: bento grid layout with featured card (sorted by function count) - RepoList: mouse-following glow effect on hover - RepoList: animated progress bars showing % of total - RepoList: distinct styling for pending vs indexed repos - DashboardStats: animated number counters on load - DashboardStats: gradient glows and premium card styling - RepoOverview: bento stats grid with icons and gradients - AddRepoForm: framer-motion modal animations - DashboardHome: page transitions with AnimatePresence Design inspired by Linear, Vercel, and 2026 dashboard trends.
1 parent 3bb6b35 commit 3ae2a30

5 files changed

Lines changed: 760 additions & 468 deletions

File tree

‎frontend/src/components/AddRepoForm.tsx‎

Lines changed: 108 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react'
2+
import { motion, AnimatePresence } from 'framer-motion'
23

34
interface AddRepoFormProps {
45
onAdd: (gitUrl: string, branch: string) => Promise<void>
@@ -13,110 +14,126 @@ export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
1314
const handleSubmit = async (e: React.FormEvent) => {
1415
e.preventDefault()
1516
if (!gitUrl) return
16-
1717
await onAdd(gitUrl, branch)
1818
setGitUrl('')
1919
setBranch('main')
2020
setShowForm(false)
2121
}
2222

23-
if (!showForm) {
24-
return (
25-
<button
23+
return (
24+
<>
25+
<motion.button
26+
whileHover={{ scale: 1.02 }}
27+
whileTap={{ scale: 0.98 }}
2628
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"
29+
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"
2830
disabled={loading}
2931
>
30-
+ Add Repository
31-
</button>
32-
)
33-
}
32+
<span className="text-lg">+</span>
33+
<span>Add Repository</span>
34+
</motion.button>
3435

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

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>
72+
{/* Form */}
73+
<form onSubmit={handleSubmit} className="p-6 space-y-5">
74+
<div>
75+
<label className="block text-sm font-medium mb-2 text-gray-300">Git URL</label>
76+
<input
77+
type="url"
78+
value={gitUrl}
79+
onChange={(e) => setGitUrl(e.target.value)}
80+
placeholder="https://github.com/username/repo"
81+
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"
82+
required
83+
disabled={loading}
84+
autoFocus
85+
/>
86+
</div>
7087

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>
88+
<div>
89+
<label className="block text-sm font-medium mb-2 text-gray-300">Branch</label>
90+
<input
91+
type="text"
92+
value={branch}
93+
onChange={(e) => setBranch(e.target.value)}
94+
placeholder="main"
95+
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"
96+
required
97+
disabled={loading}
98+
/>
99+
<p className="mt-2 text-xs text-gray-500">Repository will be cloned and automatically indexed</p>
100+
</div>
88101

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>
102+
{/* Actions */}
103+
<div className="flex gap-3 pt-2">
104+
<button
105+
type="button"
106+
onClick={() => { setShowForm(false); setGitUrl(''); setBranch('main') }}
107+
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"
108+
disabled={loading}
109+
>
110+
Cancel
111+
</button>
112+
<motion.button
113+
whileHover={{ scale: 1.02 }}
114+
whileTap={{ scale: 0.98 }}
115+
type="submit"
116+
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"
117+
disabled={loading}
118+
>
119+
{loading ? (
120+
<>
121+
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
122+
<span>Adding...</span>
123+
</>
124+
) : (
125+
<>
126+
<span>🚀</span>
127+
<span>Add & Index</span>
128+
</>
129+
)}
130+
</motion.button>
131+
</div>
132+
</form>
133+
</motion.div>
134+
</motion.div>
135+
)}
136+
</AnimatePresence>
137+
</>
121138
)
122139
}

0 commit comments

Comments
 (0)