Implement basic text search

frontend/package.json

@@ -21,5 +21,7 @@
     "vite": "^5.4.10",
     "prettier": "^3.3.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "fuse.js": "^7.0.0"
+  }
 }

frontend/src/App.svelte

@@ -6,6 +6,7 @@
     import type {FullCrate, Indexes} from "./crate-db";
     import Filter from "./lib/Filter.svelte";
     import ForkMe from "./lib/ForkMe.svelte";
+    import TextFilter from "./lib/TextFilter.svelte";
 
     export let BUILD_DATE: string;
 
@@ -16,6 +17,7 @@
     let selected_l: number[][] = [];
     let selected_r: number[][] = [];
     let selected_i: number[][] = [];
+    let selected_f: number[][] = [];
 
     function combine_filters(crate_length: number, selected: any): number[] {
         let selected_crates = Array.from({length: crate_length}, (_, i) => i + 1);
@@ -39,7 +41,7 @@
         }
     }
 
-    $: selected_crates = combine_filters(t_crates.length, [selected_d, selected_l, selected_r, selected_i]);
+    $: selected_crates = combine_filters(t_crates.length, [selected_d, selected_l, selected_r, selected_i, selected_f]);
 
 </script>
 
@@ -49,8 +51,8 @@
 
 <h1>{selected_crates.length} awesome drivers waiting for you!</h1>
 <main>
-
     <div class="filters">
+        <TextFilter crates={t_crates} bind:selected={selected_f}/>
         <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
         <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
         <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>

frontend/src/lib/TextFilter.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type {FullCrate} from "../crate-db";
+    import Fuse from "fuse.js";
+
+    export let crates: FullCrate[];
+    export let selected: number[][];
+
+    let search: string = "";
+
+    const options = {
+        keys: [
+            "description",
+            "manufacturer",
+            "name",
+            "names",
+            "part_numbers",
+            "resources.title",
+        ],
+        includeMatches: true,
+        includeScore: true,
+        useExtendedSearch: true,
+    };
+    const index = Fuse.createIndex(options.keys, crates)
+    const fuse = new Fuse(crates, options, index)
+
+    $: results = fuse.search(search)
+    $: selected = search === "" ? [] : [results.map((r) => r.refIndex)]
+</script>
+
+<div>
+    <input type="text" bind:value={search}>
+</div>