chore(web): Change carousel and repository list links to link to file tree (#528)

Author: brendan-kellam

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Improved repository query performance by adding db indices. [#526](https://github.com/sourcebot-dev/sourcebot/pull/526)
 - Improved repository query performance by removing JOIN on `Connection` table. [#527](https://github.com/sourcebot-dev/sourcebot/pull/527)
+- Changed repo carousel and repo list links to redirect to the file browser. [#528](https://github.com/sourcebot-dev/sourcebot/pull/528)
 
 ## [4.7.1] - 2025-09-19
 

packages/web/src/app/[domain]/components/homepage/repositoryCarousel.tsx

@@ -11,6 +11,9 @@ import Image from "next/image";
 import { FileIcon } from "@radix-ui/react-icons";
 import clsx from "clsx";
 import { RepositoryQuery } from "@/lib/types";
+import { getBrowsePath } from "../../browse/hooks/useBrowseNavigation";
+import Link from "next/link";
+import { useDomain } from "@/hooks/useDomain";
 
 interface RepositoryCarouselProps {
     repos: RepositoryQuery[];
@@ -56,7 +59,8 @@ interface RepositoryBadgeProps {
 const RepositoryBadge = ({
     repo
 }: RepositoryBadgeProps) => {
-    const { repoIcon, displayName, repoLink } = (() => {
+    const domain = useDomain();
+    const { repoIcon, displayName } = (() => {
         const info = getCodeHostInfoForRepo({
             codeHostType: repo.codeHostType,
             name: repo.repoName,
@@ -72,32 +76,30 @@ const RepositoryBadge = ({
                     className={`w-4 h-4 ${info.iconClassName}`}
                 />,
                 displayName: info.displayName,
-                repoLink: info.repoLink,
             }
         }
 
         return {
             repoIcon: <FileIcon className="w-4 h-4" />,
             displayName: repo.repoName,
-            repoLink: undefined,
         }
     })();
 
     return (
-        <div
-            onClick={() => {
-                if (repoLink !== undefined) {
-                    window.open(repoLink, "_blank");
-                }
-            }}
-            className={clsx("flex flex-row items-center gap-2 border rounded-md p-2 text-clip", {
-                "cursor-pointer": repoLink !== undefined,
+        <Link
+            href={getBrowsePath({
+                repoName: repo.repoName,
+                path: '/',
+                pathType: 'tree',
+                domain
             })}
+           
+            className={clsx("flex flex-row items-center gap-2 border rounded-md p-2 text-clip")}
         >
             {repoIcon}
             <span className="text-sm font-mono">
                 {displayName}
             </span>
-        </div>
+        </Link>
     )
 }

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

@@ -2,20 +2,22 @@
 
 import { Button } from "@/components/ui/button"
 import type { ColumnDef } from "@tanstack/react-table"
-import { ArrowUpDown, ExternalLink, Clock, Loader2, CheckCircle2, XCircle, Trash2, Check, ListFilter } from "lucide-react"
+import { ArrowUpDown, Clock, Loader2, CheckCircle2, XCircle, Trash2, Check, ListFilter } from "lucide-react"
 import Image from "next/image"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { cn, getRepoImageSrc } from "@/lib/utils"
 import { RepoIndexingStatus } from "@sourcebot/db";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import Link from "next/link"
+import { getBrowsePath } from "../browse/hooks/useBrowseNavigation"
 
 export type RepositoryColumnInfo = {
     repoId: number
-    name: string
+    repoName: string;
+    repoDisplayName: string
     imageUrl?: string
     repoIndexingStatus: RepoIndexingStatus
     lastIndexed: string
-    url: string
 }
 
 const statusLabels = {
@@ -90,42 +92,38 @@ const StatusIndicator = ({ status }: { status: RepoIndexingStatus }) => {
 
 export const columns = (domain: string): ColumnDef<RepositoryColumnInfo>[] => [
     {
-        accessorKey: "name",
+        accessorKey: "repoDisplayName",
         header: 'Repository',
-        cell: ({ row }) => {
-            const repo = row.original
-            const url = repo.url
-            const isRemoteRepo = url.length > 0
-
+        cell: ({ row: { original: { repoId, repoName, repoDisplayName, imageUrl } } }) => {
             return (
                 <div className="flex flex-row items-center gap-3 py-2">
                     <div className="relative h-8 w-8 overflow-hidden rounded-md border bg-muted">
-                        {repo.imageUrl ? (
+                        {imageUrl ? (
                             <Image
-                                src={getRepoImageSrc(repo.imageUrl, repo.repoId, domain) || "/placeholder.svg"}
-                                alt={`${repo.name} logo`}
+                                src={getRepoImageSrc(imageUrl, repoId, domain) || "/placeholder.svg"}
+                                alt={`${repoDisplayName} logo`}
                                 width={32}
                                 height={32}
                                 className="object-cover"
                             />
                         ) : (
                             <div className="flex h-full w-full items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground">
-                                {repo.name.charAt(0)}
+                                {repoDisplayName.charAt(0)}
                             </div>
                         )}
                     </div>
                     <div className="flex items-center gap-2">
-                        <span
-                            className={isRemoteRepo ? "font-medium text-primary hover:underline cursor-pointer" : "font-medium"}
-                            onClick={() => {
-                                if (isRemoteRepo) {
-                                    window.open(url, "_blank")
-                                }
-                            }}
+                        <Link
+                            className={"font-medium text-primary hover:underline cursor-pointer"}
+                            href={getBrowsePath({
+                                repoName: repoName,
+                                path: '/',
+                                pathType: 'tree',
+                                domain
+                            })}
                         >
-                            {repo.name.length > 40 ? `${repo.name.slice(0, 40)}...` : repo.name}
-                        </span>
-                        {isRemoteRepo && <ExternalLink className="h-3.5 w-3.5 text-muted-foreground" />}
+                            {repoDisplayName.length > 40 ? `${repoDisplayName.slice(0, 40)}...` : repoDisplayName}
+                        </Link>
                     </div>
                 </div>
             )

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

@@ -37,21 +37,21 @@ export const RepositoryTable = ({
     const tableRepos = useMemo(() => {
         if (reposLoading) return Array(4).fill(null).map(() => ({
             repoId: 0,
-            name: "",
+            repoName: "",
+            repoDisplayName: "",
             repoIndexingStatus: RepoIndexingStatus.NEW,
             lastIndexed: "",
-            url: "",
             imageUrl: "",
         }));
 
         if (!repos) return [];
         return repos.map((repo): RepositoryColumnInfo => ({
             repoId: repo.repoId,
-            name: repo.repoDisplayName ?? repo.repoName,
+            repoName: repo.repoName,
+            repoDisplayName: repo.repoDisplayName ?? repo.repoName,
             imageUrl: repo.imageUrl,
             repoIndexingStatus: repo.repoIndexingStatus as RepoIndexingStatus,
             lastIndexed: repo.indexedAt?.toISOString() ?? "",
-            url: repo.webUrl ?? repo.repoCloneUrl,
         })).sort((a, b) => {
             const getPriorityFromStatus = (status: RepoIndexingStatus) => {
                 switch (status) {
@@ -119,7 +119,7 @@ export const RepositoryTable = ({
             <DataTable
                 columns={tableColumns}
                 data={tableRepos}
-                searchKey="name"
+                searchKey="repoDisplayName"
                 searchPlaceholder="Search repositories..."
                 headerActions={isAddReposButtonVisible && (
                     <Button