feat: upgrade to flexsearch for better keyword search performance

package.json

@@ -81,7 +81,6 @@
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-svelte": "^8.5.2",
     "flexsearch": "^0.8.147",
-    "fuse.js": "^7.1.0",
     "idb": "^8.0.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",

src/interface/components/store/Backgrounds.svelte

@@ -2,7 +2,7 @@
   import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
   import Spinner from '../Spinner.svelte';
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
-  import Fuse from 'fuse.js';
+  import { Index } from 'flexsearch';
   import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
   import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
 
@@ -20,19 +20,12 @@
   let savedBackgrounds = $state<string[]>([]);
   let installingBackgrounds = $state<Set<string>>(new Set());
   let debugInfo = $state<string>('');
+  let searchIndex = $state<Index | null>(null);
 
   // New state variables
   let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
   let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
 
-  // Add Fuse.js options
-  const fuseOptions = {
-    keys: ['name', 'description'],
-    threshold: 0.4,
-    ignoreLocation: true
-  };
-  let fuse: Fuse<Background>;
-
   // Existing functions
   const loadStore = async () => {
     try {
@@ -43,7 +36,19 @@
       }
       const data = await response.json();
       backgrounds = data.backgrounds;
-      fuse = new Fuse(backgrounds, fuseOptions);
+      
+      // Initialize FlexSearch index
+      const index = new Index({
+        tokenize: "forward",
+        preset: "score"
+      });
+      
+      // Add backgrounds to the index
+      backgrounds.forEach((bg, i) => {
+        index.add(i, bg.name + " " + bg.description);
+      });
+      
+      searchIndex = index;
       debugInfo = `Loaded ${backgrounds.length} backgrounds`;
       await loadSavedBackgrounds();
     } catch (e) {
@@ -74,14 +79,10 @@
   let filteredBackgrounds = $derived((() => {
     let filtered = backgrounds;
     
-    // Use Fuse.js search if there's a search term
+    // Use FlexSearch if there's a search term
-    if (searchTerm.trim()) {
+    if (searchTerm.trim() && searchIndex) {
-      // @ts-ignore
+      const results = searchIndex.search(searchTerm) as number[];
-      if (fuse) {
+      filtered = results.map(i => backgrounds[i]);
-        filtered = fuse.search(searchTerm).map((result: any) => result.item) ?? [];
-      } else {
-        filtered = backgrounds.filter(bg => bg.name.toLowerCase().includes(searchTerm.toLowerCase()));
-      }
     }
 
     // Apply category filtering

src/plugins/built-in/globalSearch/SearchBar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
-  import Fuse from 'fuse.js';
+  import { Index } from 'flexsearch';
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import { fade, scale } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
@@ -62,15 +62,22 @@
     }
   ];
 
-  const fuse = new Fuse(commandItems, {
+  // Create a FlexSearch index
-    includeScore: true,
+  const searchIndex = new Index({
-    keys: ['text', 'keybind']
+    tokenize: "forward",
+    preset: "score"
+  });
+  
+  // Add command items to the index
+  commandItems.forEach((item, i) => {
+    searchIndex.add(i, item.text + " " + item.keybind.join(" "));
   });
 
   // Replace reactive block with $effect
   $effect(() => {
     if (searchTerm.trim()) {
-      filteredItems = fuse.search(searchTerm).map(r => r.item);
+      const results = searchIndex.search(searchTerm) as number[];
+      filteredItems = results.map(i => commandItems[i]);
     } else {
       filteredItems = commandItems;
     }