From 158bad92687c04a55f7fbc1653d035257c7e359f Mon Sep 17 00:00:00 2001
From: bkellam <bshizzle1234@gmail.com>
Date: Tue, 28 Oct 2025 18:08:36 -0700
Subject: [PATCH] Add banner to repos table calling out connections

---
 .../web/src/app/[domain]/repos/[id]/page.tsx  |  6 +++---
 .../web/src/app/[domain]/repos/layout.tsx     | 20 +++++++++++++++++++
 .../settings/connections/[id]/page.tsx        |  4 ++--
 .../components/connectionsTable.tsx           |  1 +
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/app/[domain]/repos/[id]/page.tsx b/packages/web/src/app/[domain]/repos/[id]/page.tsx
index 93289206..db14e50c 100644
--- a/packages/web/src/app/[domain]/repos/[id]/page.tsx
+++ b/packages/web/src/app/[domain]/repos/[id]/page.tsx
@@ -102,7 +102,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DisplayDate date={repo.createdAt} className="text-2xl font-semibold" />
+                        <span className="text-2xl font-semibold"><DisplayDate date={repo.createdAt} /></span>
                     </CardContent>
                 </Card>
 
@@ -121,7 +121,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        {repo.indexedAt ? <DisplayDate date={repo.indexedAt} className="text-2xl font-semibold" /> : "Never"}
+                        <span className="text-2xl font-semibold">{repo.indexedAt ? <DisplayDate date={repo.indexedAt} /> : "Never"}</span>
                     </CardContent>
                 </Card>
 
@@ -140,7 +140,7 @@ export default async function RepoDetailPage({ params }: { params: Promise<{ id:
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        {nextIndexAttempt ? <DisplayDate date={nextIndexAttempt} className="text-2xl font-semibold" /> : "-"}
+                        <span className="text-2xl font-semibold">{nextIndexAttempt ? <DisplayDate date={nextIndexAttempt} /> : "-"}</span>
                     </CardContent>
                 </Card>
             </div>
diff --git a/packages/web/src/app/[domain]/repos/layout.tsx b/packages/web/src/app/[domain]/repos/layout.tsx
index f119d94f..675fdf94 100644
--- a/packages/web/src/app/[domain]/repos/layout.tsx
+++ b/packages/web/src/app/[domain]/repos/layout.tsx
@@ -1,4 +1,11 @@
+import { InfoIcon } from "lucide-react";
 import { NavigationMenu } from "../components/navigationMenu";
+import { SINGLE_TENANT_ORG_DOMAIN } from "@/lib/constants";
+import Link from "next/link";
+import { getCurrentUserRole, getReposStats } from "@/actions";
+import { isServiceError } from "@/lib/utils";
+import { ServiceErrorException } from "@/lib/serviceError";
+import { OrgRole } from "@sourcebot/db";
 
 interface LayoutProps {
     children: React.ReactNode;
@@ -12,9 +19,22 @@ export default async function Layout(
     const { domain } = params;
     const { children } = props;
 
+    const repoStats = await getReposStats();
+    if (isServiceError(repoStats)) {
+        throw new ServiceErrorException(repoStats);
+    }
+
+    const userRoleInOrg = await getCurrentUserRole(domain);
+
     return (
         <div className="min-h-screen flex flex-col">
             <NavigationMenu domain={domain} />
+            {(repoStats.numberOfRepos === 0 && userRoleInOrg === OrgRole.OWNER) && (
+                <div className="w-full flex flex-row justify-center items-center bg-accent py-0.5">
+                    <InfoIcon className="w-4 h-4 mr-1" />
+                    <span><span className="font-medium">No repositories configured.</span> Create a <Link href={`/${SINGLE_TENANT_ORG_DOMAIN}/settings/connections`} className="text-link hover:underline">connection</Link> to get started.</span>
+                </div>
+            )}
             <main className="flex-grow flex justify-center p-4 bg-backgroundSecondary relative">
                 <div className="w-full max-w-6xl rounded-lg p-6">
                     <div className="container mx-auto">
diff --git a/packages/web/src/app/[domain]/settings/connections/[id]/page.tsx b/packages/web/src/app/[domain]/settings/connections/[id]/page.tsx
index a4792f4e..5db0d28c 100644
--- a/packages/web/src/app/[domain]/settings/connections/[id]/page.tsx
+++ b/packages/web/src/app/[domain]/settings/connections/[id]/page.tsx
@@ -121,7 +121,7 @@ export default async function ConnectionDetailPage(props: ConnectionDetailPagePr
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <DisplayDate date={connection.createdAt} className="text-2xl font-semibold" />
+                        <span className="text-2xl font-semibold"><DisplayDate date={connection.createdAt} /></span>
                     </CardContent>
                 </Card>
 
@@ -159,7 +159,7 @@ export default async function ConnectionDetailPage(props: ConnectionDetailPagePr
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        {nextSyncAttempt ? <DisplayDate date={nextSyncAttempt} className="text-2xl font-semibold" /> : "-"}
+                        <span className="text-2xl font-semibold">{nextSyncAttempt ? <DisplayDate date={nextSyncAttempt} /> : "-"}</span>
                     </CardContent>
                 </Card>
             </div>
diff --git a/packages/web/src/app/[domain]/settings/connections/components/connectionsTable.tsx b/packages/web/src/app/[domain]/settings/connections/components/connectionsTable.tsx
index cae2d9c4..db161124 100644
--- a/packages/web/src/app/[domain]/settings/connections/components/connectionsTable.tsx
+++ b/packages/web/src/app/[domain]/settings/connections/components/connectionsTable.tsx
@@ -88,6 +88,7 @@ export const columns: ColumnDef<Connection>[] = [
                     <Image
                         src={codeHostIcon.src}
                         alt={`${connection.codeHostType} logo`}
+                        className={codeHostIcon.className}
                         width={20}
                         height={20}
                     />