diff --git a/apps/code/src/renderer/features/settings/components/sections/GitHubIntegrationSection.tsx b/apps/code/src/renderer/features/settings/components/sections/GitHubIntegrationSection.tsx index a094d175d..4786b8037 100644 --- a/apps/code/src/renderer/features/settings/components/sections/GitHubIntegrationSection.tsx +++ b/apps/code/src/renderer/features/settings/components/sections/GitHubIntegrationSection.tsx @@ -11,6 +11,26 @@ import { InfoIcon, } from "@phosphor-icons/react"; import { Box, Button, Flex, Spinner, Text, Tooltip } from "@radix-ui/themes"; +import { useMemo } from "react"; + +/** + * Past this count, the tooltip would become an unreadable wall of `owner/name` + * rows, so we collapse to owner-level summaries instead. + */ +const REPO_LIST_TOOLTIP_THRESHOLD = 10; + +function summarizeReposByOwner( + repositories: readonly string[], +): { owner: string; count: number }[] { + const counts = new Map(); + for (const repo of repositories) { + const owner = repo.includes("/") ? (repo.split("/", 1)[0] ?? repo) : repo; + counts.set(owner, (counts.get(owner) ?? 0) + 1); + } + return [...counts.entries()] + .map(([owner, count]) => ({ owner, count })) + .sort((a, b) => b.count - a.count || a.owner.localeCompare(b.owner)); +} export function GitHubIntegrationSection({ hasGithubIntegration, @@ -18,6 +38,13 @@ export function GitHubIntegrationSection({ hasGithubIntegration: boolean; }) { const { repositories, isLoadingRepos } = useRepositoryIntegration(); + const ownerSummary = useMemo( + () => + repositories.length > REPO_LIST_TOOLTIP_THRESHOLD + ? summarizeReposByOwner(repositories) + : null, + [repositories], + ); const projectId = useAuthStateValue((state) => state.projectId); const { error: connectError, @@ -51,13 +78,27 @@ export function GitHubIntegrationSection({ repositories.length > 0 ? ( - {repositories.map((repo) => ( - - {repo} + ownerSummary ? ( + + + {repositories.length} repos across {ownerSummary.length}{" "} + {ownerSummary.length === 1 ? "owner" : "owners"} - ))} - + {ownerSummary.map(({ owner, count }) => ( + + {owner} ({count}) + + ))} + + ) : ( + + {repositories.map((repo) => ( + + {repo} + + ))} + + ) } side="bottom" >