feat(web): enhance search functionality with scoring system (#146)

Author: leonardcser

apps/web/src/hooks/use-search.ts

@@ -6,74 +6,160 @@ export interface UseSearchOptions<T> {
   searchFields: (item: T) => string[];
 }
 
+// Scoring constants used to rank matches
+const SCORE = {
+  normalizedExact: 1000,
+  exact: 900,
+  startsWith: 700,
+  wordBoundary: 500,
+  contains: 300,
+  normalizedContains: 100,
+  phraseExact: 2500,
+  phraseNormalized: 2200,
+  phraseStartsWith: 300,
+} as const;
+
+interface FieldData {
+  lowerFields: string[];
+  normalizedFields: string[];
+  weights: number[];
+  searchableText: string;
+  normalizedText: string;
+}
+
 export function useSearch<T>({
   items,
   searchQuery,
   searchFields,
 }: UseSearchOptions<T>) {
   return useMemo(() => {
-    if (!searchQuery.trim()) {
-      return items;
-    }
+    const trimmedQuery = searchQuery.trim();
+    if (!trimmedQuery) return items;
 
-    const query = searchQuery.toLowerCase().trim();
+    const query = trimmedQuery.toLowerCase();
 
     // Split by spaces and dashes to create search terms
     const searchTerms = query
       .split(/[\s-]+/)
       .filter((term) => term.length > 0)
       .map((term) => term.toLowerCase());
 
-    if (searchTerms.length === 0) {
-      return items;
-    }
+    if (searchTerms.length === 0) return items;
 
-    return items.filter((item) => {
-      // Get searchable fields for this item
-      const searchableFields = searchFields(item).map((field) =>
-        field.toLowerCase()
-      );
+    // Helpers
+    const escapeRegex = (value: string) =>
+      value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const normalizeCompact = (value: string) => value.replace(/[\s-_]/g, "");
 
-      const searchableText = searchableFields.join(" ");
+    const buildFieldData = (fields: string[]): FieldData => {
+      const lowerFields = fields.map((f) => f.toLowerCase());
+      const normalizedFields = lowerFields.map((f) => normalizeCompact(f));
+      const weights = fields.map((_, index) => fields.length - index);
+      return {
+        lowerFields,
+        normalizedFields,
+        weights,
+        searchableText: lowerFields.join(" "),
+        normalizedText: normalizedFields.join(" "),
+      };
+    };
 
-      // Create normalized versions (without spaces, dashes, underscores) for better matching
-      const normalizedFields = searchableFields.map((field) =>
-        field.replace(/[\s-_]/g, "").toLowerCase()
-      );
-      const normalizedSearchableText = normalizedFields.join(" ");
+    const normalizedQuery = normalizeCompact(query);
 
-      // Check if all search terms are found (AND logic for better precision)
+    const matchesAllTerms = (data: FieldData): boolean => {
       return searchTerms.every((term) => {
-        const normalizedTerm = term.replace(/[\s-_]/g, "").toLowerCase();
-
-        // Check direct substring match in any field
-        if (searchableText.includes(term)) {
-          return true;
-        }
+        const normalizedTerm = normalizeCompact(term);
+        if (data.searchableText.includes(term)) return true;
+        if (data.normalizedText.includes(normalizedTerm)) return true;
 
-        // Check normalized match (handles "tostring" matching "To String")
-        if (normalizedSearchableText.includes(normalizedTerm)) {
+        const wordBoundaryRegex = new RegExp(`\\b${escapeRegex(term)}`, "i");
+        if (data.lowerFields.some((field) => wordBoundaryRegex.test(field))) {
           return true;
         }
 
-        // Check if term matches word boundaries (more precise matching)
-        const wordBoundaryRegex = new RegExp(
-          `\\b${term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`,
+        const normWordBoundaryRegex = new RegExp(
+          `\\b${escapeRegex(normalizedTerm)}`,
           "i"
         );
-        if (searchableFields.some((field) => wordBoundaryRegex.test(field))) {
-          return true;
+        return data.normalizedFields.some((field) =>
+          normWordBoundaryRegex.test(field)
+        );
+      });
+    };
+
+    const computeItemScore = (data: FieldData): number => {
+      let totalScore = 0;
+
+      for (const term of searchTerms) {
+        const normalizedTerm = normalizeCompact(term);
+        for (let i = 0; i < data.lowerFields.length; i++) {
+          const field = data.lowerFields[i];
+          const normField = data.normalizedFields[i];
+          const weight = data.weights[i];
+
+          if (normField === normalizedTerm) {
+            totalScore += SCORE.normalizedExact * weight;
+            continue;
+          }
+          if (field === term) {
+            totalScore += SCORE.exact * weight;
+            continue;
+          }
+          if (field.startsWith(term)) {
+            totalScore += SCORE.startsWith * weight;
+            continue;
+          }
+          const wordBoundaryRegex = new RegExp(`\\b${escapeRegex(term)}`, "i");
+          if (wordBoundaryRegex.test(field)) {
+            totalScore += SCORE.wordBoundary * weight;
+            continue;
+          }
+          if (field.includes(term)) {
+            totalScore += SCORE.contains * weight;
+            continue;
+          }
+          if (normField.includes(normalizedTerm)) {
+            totalScore += SCORE.normalizedContains * weight;
+            continue;
+          }
         }
+      }
 
-        // Check normalized word boundaries for individual fields
-        const normalizedWordBoundaryRegex = new RegExp(
-          `\\b${normalizedTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`,
-          "i"
-        );
-        return normalizedFields.some((field) =>
-          normalizedWordBoundaryRegex.test(field)
-        );
+      for (let i = 0; i < data.lowerFields.length; i++) {
+        const field = data.lowerFields[i];
+        const normField = data.normalizedFields[i];
+        const weight = data.weights[i];
+
+        if (field.includes(query)) {
+          totalScore += SCORE.phraseExact * weight;
+        } else if (normField.includes(normalizedQuery)) {
+          totalScore += SCORE.phraseNormalized * weight;
+        }
+
+        if (field.startsWith(query)) {
+          totalScore += SCORE.phraseStartsWith * weight;
+        }
+      }
+
+      return totalScore;
+    };
+
+    // First, determine which items match (AND across terms), then rank them
+    const scoredMatches = items
+      .map((item, index) => {
+        const fields = searchFields(item);
+        const fieldData = buildFieldData(fields);
+        const score = matchesAllTerms(fieldData)
+          ? computeItemScore(fieldData)
+          : 0;
+        return { item, score, index };
+      })
+      .filter(({ score }) => score > 0)
+      .sort((a, b) => {
+        if (b.score !== a.score) return b.score - a.score;
+        return a.index - b.index;
       });
-    });
+
+    return scoredMatches.map(({ item }) => item);
   }, [items, searchQuery, searchFields]);
 }