feat: highlight fuzzy search matches on app cards

Show orange highlights on matching text in card name, description, and
author. Only highlight spans of 2+ characters to avoid noisy single
letter matches. Match data flows from the search worker.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/Apps.jsx

@@ -29,8 +29,59 @@ import { useApps } from '../context/AppsContext';
 import { useAuth } from '../context/AuthContext';
 import InstallModal from '../components/InstallModal';
 
+/**
+ * Render text with highlighted match ranges from Fuse.js.
+ * indices is an array of [start, end] pairs.
+ */
+function HighlightText({ text, indices }) {
+  if (!text) return null;
+  if (!indices || indices.length === 0) return text;
+
+  // Only keep matches that span at least 2 characters
+  const significant = indices.filter(([start, end]) => end - start >= 1);
+  if (significant.length === 0) return text;
+
+  // Merge overlapping / adjacent ranges and sort
+  const sorted = [...significant].sort((a, b) => a[0] - b[0]);
+  const merged = [sorted[0]];
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = merged[merged.length - 1];
+    if (sorted[i][0] <= prev[1] + 1) {
+      prev[1] = Math.max(prev[1], sorted[i][1]);
+    } else {
+      merged.push(sorted[i]);
+    }
+  }
+
+  const parts = [];
+  let cursor = 0;
+  for (const [start, end] of merged) {
+    if (cursor < start) {
+      parts.push(<span key={`t${cursor}`}>{text.slice(cursor, start)}</span>);
+    }
+    parts.push(
+      <span
+        key={`h${start}`}
+        style={{
+          backgroundColor: 'rgba(255, 149, 0, 0.18)',
+          color: '#b36b00',
+          borderRadius: 2,
+          padding: '0 1px',
+        }}
+      >
+        {text.slice(start, end + 1)}
+      </span>
+    );
+    cursor = end + 1;
+  }
+  if (cursor < text.length) {
+    parts.push(<span key={`t${cursor}`}>{text.slice(cursor)}</span>);
+  }
+  return <>{parts}</>;
+}
+
 // App Card Component (memoized to avoid re-renders when only search changes)
-const AppCard = memo(function AppCard({ app, onInstallClick, isLiked, onToggleLike, isLoggedIn }) {
+const AppCard = memo(function AppCard({ app, onInstallClick, isLiked, onToggleLike, isLoggedIn, matchData }) {
   const isOfficial = app.isOfficial;
   const isPythonApp = app.extra?.isPythonApp !== false; // Default to true for backwards compatibility
   const cardData = app.extra?.cardData || {};
@@ -126,7 +177,7 @@ const AppCard = memo(function AppCard({ app, onInstallClick, isLiked, onToggleLi
                   whiteSpace: 'nowrap',
                 }}
               >
-                {author}
+                <HighlightText text={author} indices={matchData?._searchAuthor} />
               </Typography>
             </Box>
           )}
@@ -247,7 +298,10 @@ const AppCard = memo(function AppCard({ app, onInstallClick, isLiked, onToggleLi
               flex: 1,
             }}
           >
-            {app.name || app.id?.split('/').pop()}
+            <HighlightText
+              text={app.name || app.id?.split('/').pop()}
+              indices={matchData?.name}
+            />
           </Typography>
           
           <Typography
@@ -277,7 +331,10 @@ const AppCard = memo(function AppCard({ app, onInstallClick, isLiked, onToggleLi
             flex: 1,
           }}
         >
-          {cardData.short_description || app.description || 'No description'}
+          <HighlightText
+            text={cardData.short_description || app.description || 'No description'}
+            indices={matchData?._searchDescription}
+          />
         </Typography>
         
         {/* Date + Install Button */}
@@ -535,7 +592,6 @@ export default function Apps() {
       const scoreMap = new Map(searchResults.map((r) => [r.id, r.score]));
       const matchedIds = new Set(searchResults.map((r) => r.id));
       result = result.filter((app) => matchedIds.has(app.id));
-      // Sort by relevance (best score first)
       result.sort((a, b) => (scoreMap.get(a.id) || 1) - (scoreMap.get(b.id) || 1));
       return result;
     }
@@ -546,6 +602,16 @@ export default function Apps() {
     return result;
   }, [apps, officialOnly, selectedCategory, searchResults]);
 
+  // Build a map of app ID → match highlight data
+  const matchDataMap = useMemo(() => {
+    if (!searchResults) return null;
+    const map = new Map();
+    for (const r of searchResults) {
+      map.set(r.id, r.matches);
+    }
+    return map;
+  }, [searchResults]);
+
   const isFiltered = searchResults !== null || officialOnly || selectedCategory;
 
   return (
@@ -955,6 +1021,7 @@ export default function Apps() {
                 isLiked={isSpaceLiked(app.id)}
                 onToggleLike={handleToggleLike}
                 isLoggedIn={isLoggedIn}
+                matchData={matchDataMap?.get(app.id) || null}
               />
             ))}
           </Box>

src/workers/searchWorker.js

@@ -13,6 +13,7 @@ const FUSE_OPTIONS = {
   threshold: 0.35,
   ignoreLocation: true,
   includeScore: true,
+  includeMatches: true,
 };
 
 /**
@@ -37,10 +38,23 @@ function buildIndex(apps) {
 /**
  * Search and return ordered list of matching app IDs with scores.
  */
+/**
+ * Search and return ordered list of matching app IDs with scores and match indices.
+ * Matches are keyed by field name for easy highlight rendering.
+ */
 function search(query) {
   if (!fuse || !query.trim()) return [];
   const results = fuse.search(query.trim());
-  return results.map((r) => ({ id: r.item.id, score: r.score }));
+  return results.map((r) => {
+    // Convert Fuse matches array into a map: fieldName → [[start, end], ...]
+    const matches = {};
+    if (r.matches) {
+      for (const m of r.matches) {
+        matches[m.key] = m.indices;
+      }
+    }
+    return { id: r.item.id, score: r.score, matches };
+  });
 }
 
 // Handle messages from the main thread