Add an interactive suggestion for filters

frontend/src/App.svelte

@@ -7,12 +7,22 @@
     import Filter from "./lib/Filter.svelte";
     import ForkMe from "./lib/ForkMe.svelte";
     import TextFilter from "./lib/TextFilter.svelte";
+    import CategoryFilter from "./lib/CategoryFilter.svelte";
 
     export let BUILD_DATE: string;
 
     const t_crates = crates as FullCrate[];
     let t_indexes = indexes as Indexes;
 
+    const filters = Object.fromEntries([
+        "category",
+        "dependencies",
+        "interfaces",
+        "license",
+        "package",
+        "rust_version",
+    ].map((cat) => [cat, Object.keys(t_indexes[cat] as any)]));
+
     let selected_d: number[][] = [];
     let selected_l: number[][] = [];
     let selected_r: number[][] = [];
@@ -59,6 +69,10 @@
         <Filter name="Rust Version" values={t_indexes.rust_version} bind:selected={selected_r}/>
     </div>
 
+    <br/>
+
+    <CategoryFilter indexes={t_indexes}/>
+
     <CrateList crates={t_crates} filter={selected_crates}/>
 
     <div>Page generated at: {BUILD_DATE}</div>

frontend/src/lib/CategoryFilter.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import type {FullCrate, Indexes} from "../crate-db";
+    import Fuse, {type FuseResult} from "fuse.js";
+
+    export let indexes: Indexes;
+
+    let search: string = "";
+
+    const {
+        category,
+        has_dev_board,
+        has_kicad,
+        license,
+        interfaces,
+        rust_version,
+        dependencies,
+        package: pack,
+        ...rest
+    } = indexes;
+    const _is_exhaustive: Required<typeof rest> = {};
+
+    const items = [
+        {"value": "kicad", "filter": "has_kicad"},
+        {"value": "dev board", "filter": "has_dev_board"},
+        {"value": "rust version", "filter": "rust_version"}
+    ].concat(
+        Object.keys(category).map((k) => ({value: k, filter: "category"})),
+        Object.keys(license).map((k) => ({value: k, filter: "license"})),
+        Object.keys(interfaces).map((k) => ({value: k, filter: "interfaces"})),
+        Object.keys(dependencies).map((k) => ({value: k, filter: "dependencies"})),
+        Object.keys(pack).map((k) => ({value: k, filter: "pack"})),
+    );
+
+    const options = {
+        keys: ["value", "filter"],
+    };
+    const fuse = new Fuse(items, options)
+
+    type FuseResultList = FuseResult<{ filter: string, value: string }>[];
+
+    function onlyTop(results: FuseResultList, count: number): FuseResultList {
+        let seen: any = {};
+        return results.filter((v) => {
+            if (seen[v.item.filter] == undefined) {
+                seen[v.item.filter] = 1;
+            } else {
+                seen[v.item.filter] += 1;
+            }
+
+            return seen[v.item.filter] <= count;
+        });
+    }
+
+    $: results = fuse.search(search)
+    $: top_results = onlyTop(results, 3)
+</script>
+
+<label>
+    Search Category:
+    <input type="text" bind:value={search}>
+</label>
+
+<ul>
+    {#each top_results as res}
+        <li>{res.item.filter}: {res.item.value}</li>
+    {/each}
+</ul>

frontend/src/lib/TextFilter.svelte

@@ -27,6 +27,7 @@
     $: selected = search === "" ? [] : [results.map((r) => r.refIndex)]
 </script>
 
-<div>
+<label>
+    Search text:
     <input type="text" bind:value={search}>
-</div>
+</label>