revamp repo page

packages/web/src/actions.ts

@@ -325,12 +325,25 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
                 }
             });
 
+            const connectionData = await prisma.connection.findMany({
+                where: {
+                    id: { in: repos.flatMap((repo) => repo.connections.map((connection) => connection.connectionId)) },
+                },
+                select: {
+                    id: true,
+                    name: true,
+                },
+            });
+
             return repos.map((repo) => repositoryQuerySchema.parse({
                 codeHostType: repo.external_codeHostType,
                 repoId: repo.id,
                 repoName: repo.name,
                 repoCloneUrl: repo.cloneUrl,
-                linkedConnections: repo.connections.map((connection) => connection.connectionId),
+                linkedConnections: repo.connections.map((connection) => ({
+                    id: connection.connectionId,
+                    name: connectionData.find((c) => c.id === connection.connectionId)?.name ?? "",
+                })),
                 imageUrl: repo.imageUrl ?? undefined,
                 indexedAt: repo.indexedAt ?? undefined,
                 repoIndexingStatus: repo.repoIndexingStatus,

packages/web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx

@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
                 return checkIfSecretExists(secretKey, domain);
             }, { message: "Secret not found" }),
         });
-    }, [schema, domain]);
+    }, [schema, domain, additionalConfigValidation]);
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),

packages/web/src/app/[domain]/components/errorNavIndicator.tsx

@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
                                     .slice(0, 10)
                                     .map(repo => (
                                         // Link to the first connection for the repo
-                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+                                        <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
                                             <div className="flex items-center justify-between px-3 py-2 
                                                             bg-red-50 dark:bg-red-900/20 rounded-md
                                                             border border-red-200/50 dark:border-red-800/50

packages/web/src/app/[domain]/components/progressNavIndicator.tsx

@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
                         <div className="flex flex-col gap-2 pl-4">
                             {inProgressRepos.slice(0, 10).map(item => (
                                 // Link to the first connection for the repo
-                                <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+                                <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
                                     <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
                                                 rounded-md text-sm text-green-700 dark:text-green-300 
                                                 border border-green-200/50 dark:border-green-800/50

packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx

@@ -49,13 +49,19 @@ export const RepoListItem = ({
             className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
         >
             <div className="flex flex-row items-center gap-2">
-                <Image
-                    src={imageUrl ?? ""}
-                    alt={name}
-                    width={40}
-                    height={40}
-                    className="rounded-full"
-                />
+                {imageUrl ? (
+                    <Image
+                        src={imageUrl}
+                        alt={name}
+                        width={32}
+                        height={32}
+                        className="object-cover"
+                    />
+                ) : (
+                    <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+                        {name.charAt(0)}
+                    </div>
+                )}
                 <p className="font-medium">{name}</p>
             </div>
             <div className="flex flex-row items-center gap-4">

packages/web/src/app/[domain]/repos/addRepoButton.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+    DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+    const [isOpen, setIsOpen] = useState(false)
+    const domain = useDomain()
+
+    return (
+        <>
+          <Button
+            onClick={() => setIsOpen(true)}
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <PlusCircle className="h-4 w-4" />
+          </Button>
+
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+              <DialogHeader className="px-6 py-4 border-b">
+                <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+                <DialogDescription className="text-sm text-muted-foreground mt-1">
+                  Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto p-6">
+                <ConnectionList className="w-full" />
+              </div>
+              <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+                <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+                  <Link href={`/${domain}/connections`}>Add new connection</Link>
+                </Button>
+                <DialogClose asChild>
+                  <Button variant="outline">Close</Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      )
+}