fix: resolve global search crashes and re-enable search bar

Author: QaidVoid

web/load.mjs

@@ -29,7 +29,14 @@ const run = async (url, branch, arch) => {
    */
   const familyMap = {};
 
-  const resp = await fetch(url).then((res) => res.json());
+  const res = await fetch(url);
+  
+  if (!res.ok) {
+    console.warn(`⚠️ Skipping ${branch}-${arch}: ${res.status} ${res.statusText}`);
+    return;
+  }
+
+  const resp = await res.json();
 
   resp.forEach((data) => {
     response.push(data);

web/src/components/global-search.tsx

@@ -117,23 +117,9 @@ export function GlobalSearch() {
   }, [open]);
 
   const renderVirtualItems = React.useCallback(() => {
-    return results.map((item, i) => {
-      return (
-        <div
-          key={i}
-          style={{
-            //position: 'absolute',
-            top: 0,
-            left: 0,
-            width: "100%",
-            //height: `${virtualRow.size}px`,
-            //transform: `translateY(${virtualRow.start}px)`,
-          }}
-        >
-          <SearchResultItem item={item} onCopy={handleCopy} />
-        </div>
-      );
-    });
+    return results.map((item) => (
+      <SearchResultItem key={`${item.pkg_name}#${item.pkg_id}#${item.source}`} item={item} onCopy={handleCopy} />
+    ));
   }, [results, handleCopy]);
 
   const SearchButton = React.useMemo(
@@ -182,21 +168,12 @@ export function GlobalSearch() {
             <div className="flex items-center justify-center p-8 text-muted-foreground">
               Start typing to search packages...
             </div>
-          ) : (
+              ) : (
             <>
               <CommandEmpty>No results found.</CommandEmpty>
               {results.length > 0 && (
-                <CommandGroup>
-                  <div
-                    style={{
-                      height: `40vh`,
-                      width: "100%",
-                      position: "relative",
-                    }}
-                    className="flex flex-col overflow-hidden overflow-y-scroll"
-                  >
-                    {renderVirtualItems()}
-                  </div>
+                <CommandGroup className="max-h-[40vh] overflow-y-auto">
+                  {renderVirtualItems()}
                 </CommandGroup>
               )}
             </>

web/src/hooks/use-search.ts

@@ -21,14 +21,24 @@ export function useSearch(
       return;
     }
 
-    const searchResults = searchIndex.search(searchTerm, {
-      prefix: true,
-      fuzzy: true,
-    });
+    try {
+      const searchResults = searchIndex.search(searchTerm, {
+        prefix: true,
+        fuzzy: true,
+      });
 
-    setResults(
-      searchResults.map((result) => result as unknown as SearchResult),
-    );
+      setResults(
+        searchResults.map((result) => ({
+          pkg_name: result.pkg_name as string,
+          pkg_id: result.pkg_id as string,
+          source: result.source as string,
+          url: result.url as string,
+        })),
+      );
+    } catch (error) {
+      console.error("Search failed:", error);
+      setResults([]);
+    }
   }, [searchTerm, searchIndex, isLoading]);
 
   return results;

web/src/layouts/Layout.astro

@@ -29,7 +29,7 @@ import { GlobalSearch } from "@/components/global-search";
         >
       </div>
       <div class="flex flex-row items-center gap-2">
-        <!-- <GlobalSearch client:load /> -->
+        <GlobalSearch client:load />
         <SocialLink client:load />
         <ModeToggle client:load />
       </div>