astro-tractstack 2.0.0-rc.45 → 2.0.0-rc.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.45",
+  "version": "2.0.0-rc.46",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/search/SearchModal.tsx

@@ -205,26 +205,22 @@ export default function SearchModal({
               )}
 
               {!showResults && (
-                <div className="relative">
-                  <div className="relative w-full border-none bg-transparent px-6 py-2 text-xl">
-                    {/* Background layer with completion text */}
-                    {showCompletion && (
-                      <div className="pointer-events-none absolute inset-0 px-6 py-2 text-xl text-gray-400">
-                        {bestCompletion}
-                      </div>
-                    )}
-                    {/* Foreground input */}
-                    <input
-                      ref={inputRef}
-                      type="text"
-                      value={query}
-                      onChange={handleInputChange}
-                      onKeyDown={handleKeyDown}
-                      placeholder="Search content..."
-                      className="text-mydarkgrey relative z-10 w-full border-none bg-transparent text-xl placeholder-gray-500 outline-none"
-                      style={{ background: 'transparent' }}
-                    />
-                  </div>
+                <div className="relative w-full px-6 py-2">
+                  {showCompletion && (
+                    <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full items-center px-6 py-2 text-xl text-gray-400">
+                      {bestCompletion}
+                    </div>
+                  )}
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={query}
+                    onChange={handleInputChange}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Search content..."
+                    className="text-mydarkgrey relative z-10 w-full border-none bg-transparent text-xl placeholder-gray-500 outline-none"
+                    style={{ background: 'transparent', padding: '0' }}
+                  />
                 </div>
               )}
               <button
@@ -342,7 +338,6 @@ export default function SearchModal({
                   <SearchResults
                     results={searchResults}
                     contentMap={contentMap}
-                    onResultClick={handleClose}
                   />
                 )}
             </div>

package/templates/src/components/search/SearchResults.tsx

@@ -14,7 +14,6 @@ const VERBOSE = false;
 interface SearchResultsProps {
   results: CategorizedResults;
   contentMap: FullContentMapItem[];
-  onResultClick: () => void;
 }
 
 interface ResultItem {
@@ -36,7 +35,6 @@ const ITEMS_PER_PAGE = 10;
 export default function SearchResults({
   results,
   contentMap,
-  onResultClick,
 }: SearchResultsProps) {
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -238,7 +236,7 @@ export default function SearchResults({
             key={item.id}
             className="rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-100"
           >
-            <a href={item.url} onClick={onResultClick} className="group block">
+            <a href={item.url} className="group block">
               <div className="flex flex-col md:flex-row md:items-start md:gap-4">
                 {/* Mobile: Full width image with overlay badge */}
                 <div

package/templates/src/hooks/useSearch.ts

@@ -39,10 +39,12 @@ export function useSearch(): UseSearchReturn {
   const [isRetrieving, setIsRetrieving] = useState(false);
   const [retrieveError, setRetrieveError] = useState<string | null>(null);
 
+  // Race condition protection
   const debounceRef = useRef<NodeJS.Timeout>();
   const lastSearchTimeRef = useRef<number>(0);
   const pendingQueryRef = useRef<string | null>(null);
   const throttleTimeoutRef = useRef<NodeJS.Timeout>();
+  const inflightQueryRef = useRef<string | null>(null);
   const api = useMemo(() => new TractStackAPI(), []);
 
   const performDiscovery = useCallback(
@@ -52,26 +54,43 @@ export function useSearch(): UseSearchReturn {
         return;
       }
 
+      // Check if this exact query is already inflight
+      if (inflightQueryRef.current === query.trim()) {
+        return;
+      }
+
+      // Mark this query as inflight
+      inflightQueryRef.current = query.trim();
+
       setIsDiscovering(true);
       setDiscoverError(null);
-      lastSearchTimeRef.current = Date.now();
 
       try {
         const response = await api.discover(query.trim());
 
-        if (response.success && response.data) {
-          setSuggestions(response.data.suggestions);
-        } else {
-          setDiscoverError(response.error || 'Discovery failed');
-          setSuggestions([]);
+        // Only process response if this is still the current inflight query
+        if (inflightQueryRef.current === query.trim()) {
+          if (response.success && response.data) {
+            setSuggestions(response.data.suggestions);
+          } else {
+            setDiscoverError(response.error || 'Discovery failed');
+            setSuggestions([]);
+          }
         }
       } catch (err) {
-        setDiscoverError(
-          err instanceof Error ? err.message : 'Discovery failed'
-        );
-        setSuggestions([]);
+        // Only process error if this is still the current inflight query
+        if (inflightQueryRef.current === query.trim()) {
+          setDiscoverError(
+            err instanceof Error ? err.message : 'Discovery failed'
+          );
+          setSuggestions([]);
+        }
       } finally {
-        setIsDiscovering(false);
+        // Clear inflight tracking only if this is still the current query
+        if (inflightQueryRef.current === query.trim()) {
+          inflightQueryRef.current = null;
+          setIsDiscovering(false);
+        }
       }
     },
     [api]
@@ -107,6 +126,10 @@ export function useSearch(): UseSearchReturn {
     if (pendingQueryRef.current) {
       const queryToExecute = pendingQueryRef.current;
       pendingQueryRef.current = null;
+
+      // Update timestamp immediately when scheduling request, not when executing
+      lastSearchTimeRef.current = Date.now();
+
       performDiscovery(queryToExecute);
     }
   }, [performDiscovery]);
@@ -133,6 +156,7 @@ export function useSearch(): UseSearchReturn {
         setDiscoverError(null);
         setIsDiscovering(false);
         pendingQueryRef.current = null;
+        inflightQueryRef.current = null;
         return;
       }
 
@@ -199,7 +223,7 @@ export function useSearch(): UseSearchReturn {
       clearTimeout(throttleTimeoutRef.current);
     }
 
-    // Reset all state
+    // Reset all state including race condition protection
     setSuggestions([]);
     setIsDiscovering(false);
     setDiscoverError(null);
@@ -207,6 +231,7 @@ export function useSearch(): UseSearchReturn {
     setIsRetrieving(false);
     setRetrieveError(null);
     pendingQueryRef.current = null;
+    inflightQueryRef.current = null;
   }, []);
 
   return {

package/templates/src/layouts/Layout.astro

@@ -273,8 +273,8 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
     }
     <div
       id="loading-indicator"
-      class="bg-myorange fixed left-0 top-0 z-50 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
-      style="opacity: 0.5; filter: blur(0.5px);"
+      class="bg-myorange fixed left-0 top-0 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
+      style="opacity: 0.5; filter: blur(0.5px); z-index: 10070;"
     >
     </div>