feat(dashboard): equal grid layout - clean and scalable

- Removed bento/featured card logic
- All repos same size in 3-column grid
- Sorted: indexed first, then by function count
- Cleaner code, 143 lines vs 250
- Scales better for 10+ repos

Author: DevanshuNEU

frontend/src/components/RepoList.tsx

@@ -13,112 +13,19 @@ interface RepoListProps {
 const StatusBadge = ({ status }: { status: string }) => {
   const isIndexed = status === 'indexed'
 
-  if (isIndexed) {
-    return (
-      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20">
-        <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
-        Indexed
-      </span>
-    )
-  }
-  
-  return (
-    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">
-      <span className="w-1.5 h-1.5 rounded-full bg-zinc-500 animate-pulse" />
-      Pending
-    </span>
-  )
-}
-
-// Featured card - tall, prominent
-const FeaturedRepoCard = ({ repo, totalFunctions, onSelect }: { 
-  repo: Repository
-  totalFunctions: number
-  onSelect: () => void 
-}) => {
-  const cardRef = useRef<HTMLButtonElement>(null)
-  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
-  const [hovering, setHovering] = useState(false)
-  const pct = totalFunctions > 0 ? Math.round((repo.file_count || 0) / totalFunctions * 100) : 0
-
   return (
-    <motion.button
-      ref={cardRef}
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      whileHover={{ y: -3 }}
-      onClick={onSelect}
-      onMouseMove={(e) => {
-        if (!cardRef.current) return
-        const rect = cardRef.current.getBoundingClientRect()
-        setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
-      }}
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
-      className="group relative text-left rounded-2xl overflow-hidden w-full h-full min-h-[300px]
-        bg-[#111113] border border-white/[0.06] hover:border-blue-500/40
-        focus:outline-none focus:ring-2 focus:ring-blue-500/50 p-6 transition-colors"
+    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full border
+      ${isIndexed 
+        ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' 
+        : 'bg-zinc-800 text-zinc-400 border-zinc-700'
+      }`}
     >
-      {/* Mouse glow - BLUE only */}
-      {hovering && (
-        <div
-          className="pointer-events-none absolute inset-0"
-          style={{
-            background: `radial-gradient(500px circle at ${mousePos.x}px ${mousePos.y}px, rgba(37, 99, 235, 0.1), transparent 50%)`,
-          }}
-        />
-      )}
-      
-      {/* Top accent - solid blue */}
-      <div className="absolute top-0 left-0 right-0 h-[2px] bg-blue-500" />
-      
-      <div className="relative flex flex-col h-full">
-        {/* Header */}
-        <div className="flex items-start justify-between mb-6">
-          <div className="w-14 h-14 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
-            <svg className="w-7 h-7 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-            </svg>
-          </div>
-          <StatusBadge status={repo.status} />
-        </div>
-
-        {/* Title */}
-        <h3 className="text-2xl font-semibold text-white mb-1 group-hover:text-blue-400 transition-colors">
-          {repo.name}
-        </h3>
-        <p className="text-sm text-zinc-500 font-mono mb-auto">{repo.branch}</p>
-
-        {/* Stats */}
-        <div className="pt-6 mt-6 border-t border-white/[0.06]">
-          <div className="flex items-end justify-between mb-3">
-            <span className="text-sm text-zinc-500">Functions indexed</span>
-            <span className="text-4xl font-bold text-blue-500">
-              {(repo.file_count || 0).toLocaleString()}
-            </span>
-          </div>
-          
-          {/* Progress bar */}
-          {totalFunctions > 0 && repo.file_count > 0 && (
-            <div className="space-y-2">
-              <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
-                <motion.div 
-                  initial={{ width: 0 }}
-                  animate={{ width: `${pct}%` }}
-                  transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
-                  className="h-full bg-blue-500 rounded-full"
-                />
-              </div>
-              <p className="text-xs text-zinc-600">{pct}% of total indexed</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </motion.button>
+      <span className={`w-1.5 h-1.5 rounded-full ${isIndexed ? 'bg-blue-400' : 'bg-zinc-500 animate-pulse'}`} />
+      {isIndexed ? 'Indexed' : 'Pending'}
+    </span>
   )
 }
 
-// Regular card - compact
 const RepoCard = ({ repo, index, onSelect }: { 
   repo: Repository
   index: number
@@ -133,7 +40,7 @@ const RepoCard = ({ repo, index, onSelect }: {
       ref={cardRef}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: index * 0.1 }}
+      transition={{ delay: index * 0.05, duration: 0.3 }}
       whileHover={{ y: -3 }}
       onClick={onSelect}
       onMouseMove={(e) => {
@@ -143,8 +50,8 @@ const RepoCard = ({ repo, index, onSelect }: {
       }}
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
-      className="group relative text-left rounded-2xl overflow-hidden w-full h-full
-        bg-[#111113] border border-white/[0.06] hover:border-white/[0.15]
+      className="group relative text-left rounded-2xl overflow-hidden w-full
+        bg-[#111113] border border-white/[0.06] hover:border-blue-500/40
         focus:outline-none focus:ring-2 focus:ring-blue-500/50 p-5 transition-colors"
     >
       {/* Mouse glow */}
@@ -157,28 +64,28 @@ const RepoCard = ({ repo, index, onSelect }: {
         />
       )}
 
-      <div className="relative flex flex-col h-full">
+      <div className="relative">
         {/* Header */}
         <div className="flex items-start justify-between mb-4">
-          <div className="w-10 h-10 rounded-lg bg-zinc-800 border border-zinc-700 flex items-center justify-center">
-            <svg className="w-5 h-5 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <div className="w-11 h-11 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center group-hover:bg-blue-500/15 transition-colors">
+            <svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
             </svg>
           </div>
           <StatusBadge status={repo.status} />
         </div>
 
         {/* Title */}
-        <h3 className="font-semibold text-white mb-0.5 group-hover:text-blue-400 transition-colors">
+        <h3 className="text-lg font-semibold text-white mb-0.5 group-hover:text-blue-400 transition-colors">
           {repo.name}
         </h3>
-        <p className="text-xs text-zinc-500 font-mono mb-auto">{repo.branch}</p>
+        <p className="text-xs text-zinc-500 font-mono mb-5">{repo.branch}</p>
 
         {/* Stats */}
-        <div className="pt-4 mt-4 border-t border-white/[0.04]">
+        <div className="pt-4 border-t border-white/[0.06]">
           <div className="flex items-center justify-between">
-            <span className="text-xs text-zinc-500">Functions</span>
-            <span className="text-xl font-bold text-blue-500">
+            <span className="text-sm text-zinc-500">Functions</span>
+            <span className="text-2xl font-bold text-blue-500">
               {(repo.file_count || 0).toLocaleString()}
             </span>
           </div>
@@ -220,28 +127,13 @@ export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListPro
     })
   }, [repos])
 
-  const totalFunctions = repos.reduce((acc, r) => acc + (r.file_count || 0), 0)
-  const [featured, ...rest] = sortedRepos
-
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 auto-rows-fr">
-      {/* Featured - spans 2 rows on desktop */}
-      {featured && (
-        <div className="lg:row-span-2">
-          <FeaturedRepoCard 
-            repo={featured} 
-            totalFunctions={totalFunctions}
-            onSelect={() => onSelect(featured.id)}
-          />
-        </div>
-      )}
-      
-      {/* Other repos */}
-      {rest.map((repo, index) => (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {sortedRepos.map((repo, index) => (
         <RepoCard 
           key={repo.id}
           repo={repo} 
-          index={index + 1}
+          index={index}
           onSelect={() => onSelect(repo.id)}
         />
       ))}