From 07f474b1b05a9da5fbdad1312938581b073685b9 Mon Sep 17 00:00:00 2001
From: Samuel <samuferfort@gmail.com>
Date: Sun, 26 Jan 2025 06:45:59 +0100
Subject: [PATCH] feat: implement fuzzy search and optimize sorting

---
 package.json            |   1 +
 pnpm-lock.yaml          |  10 ++++
 src/routes/+page.svelte | 126 ++++++++++++++++++++++------------------
 3 files changed, 81 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index e1d3cab..8cead04 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@upstash/redis": "1.34.0",
     "clsx": "2.1.1",
     "downloadjs": "1.4.7",
+    "fuse.js": "^7.0.0",
     "jszip": "3.10.1",
     "lucide-svelte": "0.445.0",
     "mode-watcher": "0.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05e3471..1553d73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       downloadjs:
         specifier: 1.4.7
         version: 1.4.7
+      fuse.js:
+        specifier: ^7.0.0
+        version: 7.0.0
       jszip:
         specifier: 3.10.1
         version: 3.10.1
@@ -1459,6 +1462,10 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  fuse.js@7.0.0:
+    resolution: {integrity: sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==}
+    engines: {node: '>=10'}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -2296,6 +2303,7 @@ packages:
 
   shikiji-core@0.10.2:
     resolution: {integrity: sha512-9Of8HMlF96usXJHmCL3Gd0Fcf0EcyJUF9m8EoAKKd98mHXi0La2AZl1h6PegSFGtiYcBDK/fLuKbDa1l16r1fA==}
+    deprecated: Shikiji is merged back to Shiki v1.0, please migrate over to get the latest updates
 
   shikiji@0.10.2:
     resolution: {integrity: sha512-wtZg3T0vtYV2PnqusWQs3mDaJBdCPWxFDrBM/SE5LfrX92gjUvfEMlc+vJnoKY6Z/S44OWaCRzNIsdBRWcTAiw==}
@@ -3995,6 +4003,8 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  fuse.js@7.0.0: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a06b2cb..182fcb3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,27 @@
 <script lang="ts">
   import type { iSVG } from '@/types/svg';
   import { cn } from '@/utils/cn';
+  import { onMount } from 'svelte';
   import { queryParam } from 'sveltekit-search-params';
-
+  import Fuse from 'fuse.js';
+  
   // Get all svgs:
   import { svgsData } from '@/data';
   const allSvgs = JSON.parse(JSON.stringify(svgsData));
 
+  // Cache sorted arrays
+  const latestSorted = [...allSvgs].sort((a, b) => b.id! - a.id!);
+  const alphabeticallySorted = [...allSvgs].sort((a, b) => a.title.localeCompare(b.title));
+
+  // Fuzzy search setup:
+  const fuse = new Fuse<iSVG>(allSvgs, {
+    keys: ['title'],
+    threshold: 0.35,
+    ignoreLocation: true,
+    isCaseSensitive: false,
+    shouldSort: true
+  });
+
   // Components:
   import Search from '@/components/search.svelte';
   import Container from '@/components/container.svelte';
@@ -22,73 +37,66 @@
   import { buttonStyles } from '@/ui/styles';
 
   let sorted: boolean = false;
-  let isFirstLoad: boolean = true;
   let showAll: boolean = false;
 
   // Search:
-  let searchTerm = $searchParam || '';
+  let searchTerm = '';
   let filteredSvgs: iSVG[] = [];
+  let displaySvgs: iSVG[] = [];
 
-  // Order by last added:
-  if (searchTerm.length === 0) {
-    filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
-      return b.id! - a.id!;
-    });
-  }
-
-  const loadSvgs = () => {
-    if (isFirstLoad || showAll) {
-      filteredSvgs = allSvgs;
-      isFirstLoad = false;
-    } else {
-      filteredSvgs = allSvgs.slice(0, 30);
-    }
+  const updateDisplaySvgs = () => {
+    displaySvgs = showAll ? filteredSvgs : filteredSvgs.slice(0, 30);
   };
 
-  // Search svgs:
+  // Hybrid search strategy:
+  // - Simple string matching for queries < 3 chars
+  // - Fuzzy search for longer queries (handle typos and partial matches)
   const searchSvgs = () => {
     $searchParam = searchTerm || null;
-    loadSvgs();
-    filteredSvgs = allSvgs.filter((svg: iSVG) => {
-      let svgTitle = svg.title.toLowerCase();
-      return svgTitle.includes(searchTerm.toLowerCase());
-    });
+
+    if (!searchTerm) {
+      filteredSvgs = sorted ? alphabeticallySorted : latestSorted;
+      updateDisplaySvgs();
+      return;
+    }
+
+    if (searchTerm.length < 3) {
+      filteredSvgs = allSvgs.filter((svg: iSVG) =>
+        svg.title.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    } else {
+      filteredSvgs = fuse.search(searchTerm).map((result) => result.item);
+    }
+
+    updateDisplaySvgs();
   };
 
   // Clear search:
   const clearSearch = () => {
     searchTerm = '';
-    searchSvgs();
+    // Use current sort state to determine order
+    filteredSvgs = sorted ? alphabeticallySorted : latestSorted;
+    updateDisplaySvgs();
   };
 
   // Sort:
   const sort = () => {
-    if (sorted) {
-      sortByLatest();
-    } else {
-      sortAlphabetically();
-    }
     sorted = !sorted;
+    filteredSvgs = sorted ? alphabeticallySorted : latestSorted;
+    updateDisplaySvgs();
   };
 
-  // Sort alphabetically:
-  const sortAlphabetically = () => {
-    filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
-      return a.title.localeCompare(b.title);
-    });
-  };
-
-  // Sort by latest:
-  const sortByLatest = () => {
-    filteredSvgs = filteredSvgs.sort((a: iSVG, b: iSVG) => {
-      return b.id! - a.id!;
-    });
-  };
-
-  if ($searchParam) {
+  onMount(() => {
+    if ($searchParam) {
+      searchTerm = $searchParam;
+    }
     searchSvgs();
-  } else {
-    loadSvgs();
+  });
+
+  $: {
+    if (showAll || filteredSvgs) {
+      updateDisplaySvgs();
+    }
   }
 </script>
 
@@ -100,15 +108,15 @@
   bind:searchTerm
   on:input={searchSvgs}
   clearSearch={() => clearSearch()}
-  placeholder={`Search ${filteredSvgs.length} logos...`}
+  placeholder={`Search ${allSvgs.length} logos...`}
 />
 
 <Container>
-  <div class={cn('flex items-center mb-4 justify-end', searchTerm.length > 0 && 'justify-between')}>
+  <div class={cn('mb-4 flex items-center justify-end', searchTerm.length > 0 && 'justify-between')}>
     {#if searchTerm.length > 0}
       <button
         class={cn(
-          'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
+          'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 transition-opacity hover:opacity-100',
           filteredSvgs.length === 0 && 'hidden'
         )}
         on:click={() => clearSearch()}
@@ -119,7 +127,7 @@
     {/if}
     <button
       class={cn(
-        'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
+        'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 transition-opacity hover:opacity-100',
         filteredSvgs.length === 0 && 'hidden'
       )}
       on:click={() => sort()}
@@ -129,18 +137,24 @@
       {:else}
         <ArrowUpDownIcon size={16} strokeWidth={2} class="mr-1" />
       {/if}
-      <span>{sorted ? 'Sort by latest' : 'Sort alphabetically'}</span>
+      <span>{sorted ? 'Sort by latest' : 'Sort A-Z'}</span>
     </button>
   </div>
   <Grid>
-    {#each filteredSvgs.slice(0, showAll ? undefined : 30) as svg}
-      <SvgCard svgInfo={svg} searchTerm={searchTerm} />
+    {#each displaySvgs as svg}
+      <SvgCard svgInfo={svg} {searchTerm} />
     {/each}
   </Grid>
   {#if filteredSvgs.length > 30 && !showAll}
-    <div class="flex items-center justify-center mt-4">
-      <button class={buttonStyles} on:click={() => (showAll = true)}>
-        <div class="flex items-center space-x-2 relative">
+    <div class="mt-4 flex items-center justify-center">
+      <button
+        class={buttonStyles}
+        on:click={() => {
+          showAll = true;
+          updateDisplaySvgs();
+        }}
+      >
+        <div class="relative flex items-center space-x-2">
           <ArrowDown size={16} strokeWidth={2} />
           <span>Load All SVGs</span>
           <span class="opacity-70">