Sort GitHub repos by pushed_at and add search functionality

frontend/src/api/github.ts

@@ -104,6 +104,22 @@ export const retrieveGitHubUser = async () => {
   return user;
 };
 
+export const searchPublicGitHubRepo = async (query: string): Promise<GitHubRepository | null> => {
+  const response = await github.get<{ items: GitHubRepository[] }>(
+    `/search/repositories`,
+    {
+      params: {
+        q: query,
+        sort: 'stars',
+        order: 'desc',
+        per_page: 1,
+      },
+    },
+  );
+
+  return response.data.items[0] || null;
+};
+
 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 { searchPublicGitHubRepo } from "#/api/github";
 
 interface GitHubRepositorySelectorProps {
   onSelect: () => void;
@@ -16,12 +17,45 @@ 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);
+  const [isSearching, setIsSearching] = React.useState<boolean>(false);
 
-  // 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 searchTimeout = setTimeout(async () => {
+      if (searchQuery.trim()) {
+        setIsSearching(true);
+        try {
+          const repo = await searchPublicGitHubRepo(searchQuery);
+          setSearchedRepo(repo);
+        } catch (error) {
+          console.error("Error searching for repo:", error);
+        }
+        setIsSearching(false);
+      } else {
+        setSearchedRepo(null);
+      }
+    }, 500);
+
+    return () => clearTimeout(searchTimeout);
+  }, [searchQuery]);
+
+  // Sort repositories by pushed_at
+  const sortedRepositories = [...repositories].sort((a, b) => {
+    const dateA = a.pushed_at ? new Date(a.pushed_at).getTime() : 0;
+    const dateB = b.pushed_at ? new Date(b.pushed_at).getTime() : 0;
+    return dateB - dateA;
+  });
+
+  // Add option to install app onto more repos and searched repo if found
+  const finalRepositories = [
+    ...(searchedRepo ? [{
+      ...searchedRepo,
+      full_name: `${searchedRepo.full_name} (${searchedRepo.stargazers_count} ⭐)`,
+    }] : []),
+    ...(config?.APP_MODE === "saas" ? [{ id: -1000, full_name: "Add more repositories..." }] : []),
+    ...sortedRepositories,
+  ];
 
   const dispatch = useDispatch();
 
@@ -67,6 +101,8 @@ export function GitHubRepositorySelector({
       aria-label="GitHub Repository"
       placeholder="Select a GitHub project"
       selectedKey={selectedKey}
+      inputValue={searchQuery}
+      onInputChange={(value) => setSearchQuery(value)}
       inputProps={{
         classNames: {
           inputWrapper:
@@ -76,7 +112,7 @@ export function GitHubRepositorySelector({
       onSelectionChange={(id) => handleRepoSelection(id?.toString() ?? null)}
       clearButtonProps={{ onClick: handleClearSelection }}
       listboxProps={{
-        emptyContent,
+        emptyContent: isSearching ? "Searching..." : emptyContent,
       }}
     >
       {finalRepositories.map((repo) => (