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 = 5,
+  sort: "" | "updated" | "stars" | "forks" = "stars",
+  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 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,35 @@
 }: GitHubRepositorySelectorProps) {
   const { data: config } = useConfig();
   const [selectedKey, setSelectedKey] = React.useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = React.useState<string>("");
+  const [searchedRepos, setSearchedRepos] = 
+    React.useState<GitHubRepository[]>([]);
 
-  // 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);
+      setSearchedRepos(repos);
+    };
+
+    const debounceTimeout = setTimeout(searchPublicRepo, 300);
+    return () => clearTimeout(debounceTimeout);
+  }, [searchQuery]);
+
+  const finalRepositories = repositories.map((i) => i);
+  searchedRepos.forEach(repo => {
+    if (!repositories.find((r) => r.id === repo.id)) {
+      finalRepositories.unshift({
+        ...repo,
+        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 +59,7 @@
     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 +75,44 @@
         },
       }}
       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 {