fix(review): address PR feedback - hooks, types, UX clarity

- Move useMemo before conditional returns (React hooks rule violation)
- Disable empty state button when onAddClick handler not provided
- Use discriminated union types for AddRepoForm controlled mode
- Hide trigger button in controlled mode (parent provides trigger)
- Rename 'try again' to 'use a different email' for clarity

Author: DevanshuNEU

frontend/src/components/AddRepoForm.tsx

@@ -5,21 +5,30 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 
-interface AddRepoFormProps {
+// Discriminated union: if isOpen is provided, onOpenChange is required
+type UncontrolledProps = {
+  isOpen?: undefined
+  onOpenChange?: undefined
+}
+
+type ControlledProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+type AddRepoFormProps = {
   onAdd: (gitUrl: string, branch: string) => Promise<void>
   loading: boolean
-  isOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-}
+} & (UncontrolledProps | ControlledProps)
 
 export function AddRepoForm({ onAdd, loading, isOpen, onOpenChange }: AddRepoFormProps) {
   const [gitUrl, setGitUrl] = useState('')
   const [branch, setBranch] = useState('main')
   const [internalOpen, setInternalOpen] = useState(false)
 
-  // Support both controlled and uncontrolled modes
-  const showForm = isOpen !== undefined ? isOpen : internalOpen
-  const setShowForm = onOpenChange || setInternalOpen
+  const isControlled = isOpen !== undefined
+  const showForm = isControlled ? isOpen : internalOpen
+  const setShowForm = isControlled ? onOpenChange : setInternalOpen
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -32,14 +41,17 @@ export function AddRepoForm({ onAdd, loading, isOpen, onOpenChange }: AddRepoFor
 
   return (
     <>
-      <Button
-        onClick={() => setShowForm(true)}
-        disabled={loading}
-        className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2"
-      >
-        <Plus className="w-4 h-4" />
-        Add Repository
-      </Button>
+      {/* Only show trigger button in uncontrolled mode */}
+      {!isControlled && (
+        <Button
+          onClick={() => setShowForm(true)}
+          disabled={loading}
+          className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2"
+        >
+          <Plus className="w-4 h-4" />
+          Add Repository
+        </Button>
+      )}
 
       <AnimatePresence>
         {showForm && (

frontend/src/components/RepoList.tsx

@@ -96,17 +96,30 @@ const RepoCard = ({ repo, index, onSelect }: {
 }
 
 export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }: RepoListProps) {
+  // Hooks must be called before any conditional returns
+  const sortedRepos = useMemo(() => {
+    return [...repos].sort((a, b) => {
+      if (a.status === 'indexed' && b.status !== 'indexed') return -1
+      if (b.status === 'indexed' && a.status !== 'indexed') return 1
+      return (b.file_count || 0) - (a.file_count || 0)
+    })
+  }, [repos])
+
   if (loading) return <RepoGridSkeleton count={3} />
 
   if (repos.length === 0) {
+    const isClickable = !!onAddClick
     return (
       <motion.button
         onClick={onAddClick}
+        disabled={!isClickable}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        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"
+        whileHover={isClickable ? { scale: 1.01 } : undefined}
+        whileTap={isClickable ? { scale: 0.99 } : undefined}
+        className={`w-full bg-card border border-dashed border-border rounded-xl p-16 text-center transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 ${
+          isClickable ? 'hover:border-primary/40 cursor-pointer' : 'cursor-default'
+        }`}
       >
         <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" />
@@ -119,14 +132,6 @@ export function RepoList({ repos, selectedRepo, onSelect, onAddClick, loading }:
     )
   }
 
-  const sortedRepos = useMemo(() => {
-    return [...repos].sort((a, b) => {
-      if (a.status === 'indexed' && b.status !== 'indexed') return -1
-      if (b.status === 'indexed' && a.status !== 'indexed') return 1
-      return (b.file_count || 0) - (a.file_count || 0)
-    })
-  }, [repos])
-
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {sortedRepos.map((repo, index) => (

frontend/src/components/auth/SignupForm.tsx

@@ -153,7 +153,7 @@ export function SignupForm() {
                         onClick={() => setEmailSent(false)}
                         className="text-primary hover:underline font-medium"
                       >
-                        try again
+                        use a different email
                       </button>
                     </p>
                   </div>

frontend/src/components/dashboard/DashboardHome.tsx

@@ -9,9 +9,11 @@ import {
   Zap, 
   ArrowLeft,
   FolderGit2,
-  ExternalLink
+  ExternalLink,
+  Plus
 } from 'lucide-react'
 import { useAuth } from '../../contexts/AuthContext'
+import { Button } from '../ui/button'
 import { RepoList } from '../RepoList'
 import { AddRepoForm } from '../AddRepoForm'
 import { SearchPanel } from '../SearchPanel'
@@ -137,6 +139,14 @@ export function DashboardHome() {
                   Semantic code search powered by AI
                 </p>
               </div>
+              <Button
+                onClick={() => setShowAddForm(true)}
+                disabled={loading}
+                className="bg-primary hover:bg-primary/90 text-primary-foreground gap-2"
+              >
+                <Plus className="w-4 h-4" />
+                Add Repository
+              </Button>
               <AddRepoForm 
                 onAdd={handleAddRepo} 
                 loading={loading}