fix(ui): make empty state + button clickable to open add repo form

- Add onAddClick prop to RepoList component
- Support controlled mode in AddRepoForm (isOpen, onOpenChange)
- Wire up DashboardHome to pass state between components
- Empty state now opens the add repository modal when clicked

Author: DevanshuNEU

frontend/src/components/AddRepoForm.tsx

@@ -8,12 +8,18 @@ import { Label } from '@/components/ui/label'
 interface AddRepoFormProps {
   onAdd: (gitUrl: string, branch: string) => Promise<void>
   loading: boolean
+  isOpen?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
-export function AddRepoForm({ onAdd, loading }: AddRepoFormProps) {
+export function AddRepoForm({ onAdd, loading, isOpen, onOpenChange }: AddRepoFormProps) {
   const [gitUrl, setGitUrl] = useState('')
   const [branch, setBranch] = useState('main')
-  const [showForm, setShowForm] = useState(false)
+  const [internalOpen, setInternalOpen] = useState(false)
+
+  // Support both controlled and uncontrolled modes
+  const showForm = isOpen !== undefined ? isOpen : internalOpen
+  const setShowForm = onOpenChange || setInternalOpen
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()

frontend/src/components/RepoList.tsx

@@ -8,6 +8,7 @@ interface RepoListProps {
   repos: Repository[]
   selectedRepo: string | null
   onSelect: (repoId: string) => void
+  onAddClick?: () => void
   loading?: boolean
 }
 
@@ -94,15 +95,18 @@ const RepoCard = ({ repo, index, onSelect }: {
   )
 }
 
-export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListProps) {
+export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }: RepoListProps) {
   if (loading) return <RepoGridSkeleton count={3} />
 
   if (repos.length === 0) {
     return (
-      <motion.div 
+      <motion.button
+        onClick={onAddClick}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        className="bg-card border border-border rounded-xl p-16 text-center"
+        whileHover={{ scale: 1.01 }}
+        whileTap={{ scale: 0.99 }}
+        className="w-full bg-card border border-dashed border-border hover:border-primary/40 rounded-xl p-16 text-center transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary/50"
       >
         <div className="w-14 h-14 mx-auto mb-4 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center">
           <Plus className="w-6 h-6 text-primary" />
@@ -111,7 +115,7 @@ export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListPro
         <p className="text-sm text-muted-foreground max-w-xs mx-auto">
           Add your first repository to start searching code with AI
         </p>
-      </motion.div>
+      </motion.button>
     )
   }
 

frontend/src/components/dashboard/DashboardHome.tsx

@@ -32,6 +32,7 @@ export function DashboardHome() {
   const [activeTab, setActiveTab] = useState<RepoTab>('overview')
   const [loading, setLoading] = useState(false)
   const [reposLoading, setReposLoading] = useState(true)
+  const [showAddForm, setShowAddForm] = useState(false)
 
   const fetchRepos = async () => {
     if (!session?.access_token) return
@@ -136,7 +137,12 @@ export function DashboardHome() {
                   Semantic code search powered by AI
                 </p>
               </div>
-              <AddRepoForm onAdd={handleAddRepo} loading={loading} />
+              <AddRepoForm 
+                onAdd={handleAddRepo} 
+                loading={loading}
+                isOpen={showAddForm}
+                onOpenChange={setShowAddForm}
+              />
             </div>
 
             {/* Stats */}
@@ -151,6 +157,7 @@ export function DashboardHome() {
                 setSelectedRepo(id)
                 setActiveTab('overview')
               }}
+              onAddClick={() => setShowAddForm(true)}
             />
           </motion.div>
         )}