feat: add search bar to examples gallery

front-end/components/app-grid.tsx

@@ -4,8 +4,8 @@ import * as React from "react";
 import type { CodeExample } from "@/lib/code-examples";
 import { AppCard } from "./app-card";
 import { AppModal } from "./app-modal";
+import { SearchBar } from "./search-bar";
 
-/* ---------- Animated track ---------- */
 const Track = React.memo(function Track({
   apps,
   onOpen,
@@ -24,7 +24,6 @@ const Track = React.memo(function Track({
   );
 });
 
-/* ---------- Auto-scrolling row ---------- */
 const AutoScrollerRow = React.memo(function AutoScrollerRow({
   apps,
   reverse = false,
@@ -44,8 +43,7 @@ const AutoScrollerRow = React.memo(function AutoScrollerRow({
           reverse ? "animate-marquee-reverse" : "animate-marquee",
           "[animation-duration:var(--marquee-duration)]",
         ].join(" ")}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        style={{ ["--marquee-duration" as any]: `${duration}s` }}
+        style={{ "--marquee-duration": `${duration}s` } as React.CSSProperties}
       >
         <Track apps={apps} onOpen={onOpen} />
         <Track apps={apps} onOpen={onOpen} aria-hidden />
@@ -57,6 +55,7 @@ const AutoScrollerRow = React.memo(function AutoScrollerRow({
 export function AppGrid({ apps }: { apps: CodeExample[] }) {
   const [open, setOpen] = React.useState(false);
   const [active, setActive] = React.useState<CodeExample | null>(null);
+  const [searchQuery, setSearchQuery] = React.useState("");
 
   const onOpen = React.useCallback((app: CodeExample) => {
     setActive(app);
@@ -70,30 +69,72 @@ export function AppGrid({ apps }: { apps: CodeExample[] }) {
     } catch {}
   }, [active]);
 
+  const filteredApps = React.useMemo(() => {
+    if (!searchQuery.trim()) return apps;
+
+    const query = searchQuery.toLowerCase().trim();
+    return apps.filter(app => {
+      const searchableText = [
+        app.title,
+        app.prompt,
+        app.id,
+        ...(app.tags || [])
+      ].join(' ').toLowerCase();
+
+      return searchableText.includes(query);
+    });
+  }, [apps, searchQuery]);
+
   const buckets = React.useMemo(() => {
+    if (searchQuery) return [];
+
     const ROWS = Math.min(8, Math.max(3, Math.ceil(apps.length / 8)));
     const rows: CodeExample[][] = Array.from({ length: ROWS }, () => []);
-    apps.forEach((app, i) => rows[i % ROWS].push(app)); // deterministic
+    apps.forEach((app, i) => rows[i % ROWS].push(app));
     return rows;
-  }, [apps]);
+  }, [apps, searchQuery]);
 
   return (
     <>
+      <div className="fixed top-4 right-4 z-50">
+        <SearchBar onSearch={setSearchQuery} />
+      </div>
+
       <div className="min-h-screen overflow-y-auto pt-4">
-        <div className="full-bleed flex flex-col gap-y-4">
-          {buckets.map((row, i) => (
-            <AutoScrollerRow
-              key={i}
-              apps={row.length ? row : apps}
-              reverse={i % 2 === 1}
-              onOpen={onOpen}
-              duration={18 + ((i * 2) % 8)}
-            />
-          ))}
-        </div>
+        {searchQuery && (
+          <div className="text-center mb-4 px-4">
+            <p className="text-gray-600">
+              {filteredApps.length > 0 
+                ? `Found ${filteredApps.length} example${filteredApps.length !== 1 ? 's' : ''} matching "${searchQuery}"`
+                : `No examples found for "${searchQuery}"`
+              }
+            </p>
+          </div>
+        )}
+
+        {searchQuery ? (
+          filteredApps.length > 0 && (
+            <div className="px-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 max-w-7xl mx-auto">
+              {filteredApps.map((app) => (
+                <AppCard key={app.id} app={app} onOpen={onOpen} />
+              ))}
+            </div>
+          )
+        ) : (
+          <div className="full-bleed flex flex-col gap-y-4">
+            {buckets.map((row, i) => (
+              <AutoScrollerRow
+                key={i}
+                apps={row}
+                reverse={i % 2 === 1}
+                onOpen={onOpen}
+                duration={18 + ((i * 2) % 8)}
+              />
+            ))}
+          </div>
+        )}
       </div>
 
-      {/* Modal; background rows keep animating */}
       <AppModal
         active={active}
         open={open}

front-end/components/search-bar.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { Search, X } from "lucide-react";
+
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+  placeholder?: string;
+}
+
+export function SearchBar({ onSearch, placeholder = "Search examples..." }: SearchBarProps) {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const debounceRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  const handleToggle = React.useCallback(() => {
+    if (isExpanded) {
+      if (query) {
+        setQuery("");
+        onSearch("");
+      }
+      setIsExpanded(false);
+    } else {
+      setIsExpanded(true);
+    }
+  }, [isExpanded, query, onSearch]);
+
+  const handleClear = React.useCallback(() => {
+    setQuery("");
+    onSearch("");
+    inputRef.current?.focus();
+  }, [onSearch]);
+
+  const handleClose = React.useCallback(() => {
+    if (!query) {
+      setIsExpanded(false);
+    }
+  }, [query]);
+
+  React.useEffect(() => {
+    if (isExpanded && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isExpanded]);
+
+  React.useEffect(() => {
+    if (!isExpanded) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        handleClose();
+      }
+    };
+
+    const handleScroll = () => {
+      handleClose();
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    window.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isExpanded, handleClose]);
+
+  React.useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(() => {
+      onSearch(query);
+    }, 300);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [query, onSearch]);
+
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      if (query) {
+        setQuery("");
+        onSearch("");
+      } else {
+        setIsExpanded(false);
+      }
+    }
+  }, [query, onSearch]);
+
+  return (
+    <div ref={containerRef} className="relative flex items-center justify-center">
+      <div
+        className={`
+          flex items-center gap-2 transition-all duration-300 ease-in-out
+          ${isExpanded 
+            ? "w-80 bg-white/95 backdrop-blur-sm border border-gray-200 rounded-full px-4 py-2 shadow-lg" 
+            : "w-auto"
+          }
+        `}
+      >
+        <button
+          onClick={isExpanded && query ? handleClear : handleToggle}
+          className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+          aria-label={isExpanded && query ? "Clear search" : isExpanded ? "Close search" : "Open search"}
+        >
+          {isExpanded && query ? (
+            <X className="w-5 h-5 text-gray-600" />
+          ) : (
+            <Search className="w-5 h-5 text-gray-600" />
+          )}
+        </button>
+
+        {isExpanded && (
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-500"
+            autoComplete="off"
+            spellCheck={false}
+          />
+        )}
+      </div>
+
+      {!isExpanded && (
+        <span className="ml-2 text-sm text-gray-600 hidden sm:inline">
+          Search
+        </span>
+      )}
+    </div>
+  );
+}