feat(frontend): enhance GitHub repo picker with search and sorting

frontend/src/api/github.ts

@@ -104,6 +104,34 @@ export const retrieveGitHubUser = async () => {
   return user;
 };
 
+export const searchPublicRepositories = async (
+  query: string,
+  per_page = 1,
+  sort: "" | "updated" | "stars" | "forks" = "",
+  order: "desc" | "asc" = "desc",
+): Promise<GitHubRepository[]> => {
+  if (!query.trim()) {
+    return [];
+  }
+
+  try {
+    const response = await github.get<{ items: GitHubRepository[] }>(
+      "/search/repositories",
+      {
+        params: {
+          q: query,
+          per_page,
+          sort,
+          order,
+        },
+      },
+    );
+    return response.data.items;
+  } catch (error) {
+    return [];
+  }
+};
+
 export const retrieveLatestGitHubCommit = async (
   repository: string,
 ): Promise<GitHubCommit> => {

frontend/src/components/features/github/github-repo-selector.tsx

@@ -4,6 +4,7 @@ import { useDispatch } from "react-redux";
 import posthog from "posthog-js";
 import { setSelectedRepository } from "#/state/initial-query-slice";
 import { useConfig } from "#/hooks/query/use-config";
+import { searchPublicRepositories } from "#/api/github";
 
 interface GitHubRepositorySelectorProps {
   onSelect: () => void;
@@ -16,24 +17,33 @@ export function GitHubRepositorySelector({
 }: GitHubRepositorySelectorProps) {
   const { data: config } = useConfig();
   const [selectedKey, setSelectedKey] = React.useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = React.useState<string>("");
+  const [searchedRepo, setSearchedRepo] =
+    React.useState<GitHubRepository | null>(null);
 
-  // Add option to install app onto more repos
-  const finalRepositories =
-    config?.APP_MODE === "saas"
-      ? [{ id: -1000, full_name: "Add more repositories..." }, ...repositories]
-      : repositories;
+  React.useEffect(() => {
+    const searchPublicRepo = async () => {
+      const repos = await searchPublicRepositories(searchQuery);
+      setSearchedRepo(repos.length > 0 ? repos[0] : null);
+    };
+
+    const debounceTimeout = setTimeout(searchPublicRepo, 300);
+    return () => clearTimeout(debounceTimeout);
+  }, [searchQuery]);
+
+  const finalRepositories = repositories.map((i) => i);
+  if (searchedRepo && !repositories.find((r) => r.id === searchedRepo.id)) {
+    finalRepositories.unshift({
+      ...searchedRepo,
+      fromPublicRepoSearch: true,
+    });
+  }
 
   const dispatch = useDispatch();
 
   const handleRepoSelection = (id: string | null) => {
     const repo = finalRepositories.find((r) => r.id.toString() === id);
-    if (id === "-1000") {
-      if (config?.APP_SLUG)
-        window.open(
-          `https://github.com/apps/${config.APP_SLUG}/installations/new`,
-          "_blank",
-        );
-    } else if (repo) {
+    if (repo) {
       // set query param
       dispatch(setSelectedRepository(repo.full_name));
       posthog.capture("repository_selected");
@@ -47,18 +57,7 @@ export function GitHubRepositorySelector({
     dispatch(setSelectedRepository(null));
   };
 
-  const emptyContent = config?.APP_SLUG ? (
-    <a
-      href={`https://github.com/apps/${config.APP_SLUG}/installations/new`}
-      target="_blank"
-      rel="noreferrer noopener"
-      className="underline"
-    >
-      Add more repositories...
-    </a>
-  ) : (
-    "No results found."
-  );
+  const emptyContent = "No results found.";
 
   return (
     <Autocomplete
@@ -74,18 +73,44 @@ export function GitHubRepositorySelector({
         },
       }}
       onSelectionChange={(id) => handleRepoSelection(id?.toString() ?? null)}
+      onInputChange={(value) => setSearchQuery(value)}
       clearButtonProps={{ onClick: handleClearSelection }}
       listboxProps={{
         emptyContent,
       }}
+      defaultFilter={(textValue, inputValue) =>
+        !inputValue ||
+        textValue.toLowerCase().includes(inputValue.toLowerCase())
+      }
     >
+      {config?.APP_MODE === "saas" &&
+        config?.APP_SLUG &&
+        ((
+          <AutocompleteItem key="install">
+            <a
+              href={`https://github.com/apps/${config.APP_SLUG}/installations/new`}
+              target="_blank"
+              rel="noreferrer noopener"
+              onClick={(e) => e.stopPropagation()}
+            >
+              Add more repositories...
+            </a>
+          </AutocompleteItem> // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ) as any)}
       {finalRepositories.map((repo) => (
         <AutocompleteItem
           data-testid="github-repo-item"
           key={repo.id}
           value={repo.id}
+          className="data-[selected=true]:bg-default-100"
+          textValue={repo.full_name}
         >
           {repo.full_name}
+          {repo.fromPublicRepoSearch && repo.stargazers_count !== undefined && (
+            <span className="ml-1 text-gray-400">
+              ({repo.stargazers_count}⭐)
+            </span>
+          )}
         </AutocompleteItem>
       ))}
     </Autocomplete>

frontend/src/types/github.d.ts

@@ -16,6 +16,8 @@ interface GitHubUser {
 interface GitHubRepository {
   id: number;
   full_name: string;
+  stargazers_count?: number;
+  fromPublicRepoSearch?: boolean;
 }
 
 interface GitHubAppRepository {