From bdf0f9f15ed2ae97c59a8660c9181526348fe394 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Fri, 1 Nov 2024 14:01:29 +0100
Subject: [PATCH 1/3] Combined text search and sorting

---
 frontend/src/lib/CrateList.svelte     | 19 +++++++++++++++++-
 frontend/src/lib/SortFilter.svelte    |  4 ++++
 frontend/src/lib/TextFilter.svelte    | 29 ++++++++++++++++++++-------
 frontend/src/store/FilterStore.svelte |  3 +++
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/CrateList.svelte b/frontend/src/lib/CrateList.svelte
index 5a5de57..1939351 100644
--- a/frontend/src/lib/CrateList.svelte
+++ b/frontend/src/lib/CrateList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
     import Crate from "./Crate.svelte";
-    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by, scores} from '../store/FilterStore.svelte';
 
     export let crates: FullCrate[];
 
@@ -10,6 +10,7 @@
     let filtered_crates: FullCrate[];
 
     $ : filtered_crates = crates.filter((_, i) => filter.includes(i)).sort((a, b) => {
+
       if ($sort_by == 'all_downloads') {
         return b.downloads - a.downloads;
       }
@@ -23,8 +24,24 @@
         return b.updated_at > a.updated_at ? 1 : 0;
       }
 
+      // Sort by text search score
+      else if ($sort_by == 'score') {
+        const score_a = $scores.find((s) => s.name == a.name);
+        const score_b = $scores.find((s) => s.name == b.name);
+        if (score_a && score_b) {
+          return score_a.score - score_b.score;
+        } else if (score_a) {
+          return 0 - score_a.score;
+        } else if (score_b) {
+          return score_b.score;
+        } else {
+          return 0;
+        }
+      }
+
       return b.name < a.name ? 1 : 0;
     });
+
 </script>
 
 <ol>
diff --git a/frontend/src/lib/SortFilter.svelte b/frontend/src/lib/SortFilter.svelte
index efafcbf..241d650 100644
--- a/frontend/src/lib/SortFilter.svelte
+++ b/frontend/src/lib/SortFilter.svelte
@@ -41,6 +41,7 @@
     $: recent_downloads_open = $sort_by == 'recent_downloads';
     $: newly_added_open = $sort_by == 'newly_added';
     $: recently_updated_open = $sort_by == 'recently_updated';
+    $: text_score = $sort_by == 'score';
 
 </script>
 
@@ -68,6 +69,9 @@
             <label>
                 <input type="checkbox" on:click={() => update_sort('recently_updated')} bind:checked={recently_updated_open}> Recently updated
             </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('score')} bind:checked={text_score}> Text search
+            </label>
         </div>
     </div>
 </div>
diff --git a/frontend/src/lib/TextFilter.svelte b/frontend/src/lib/TextFilter.svelte
index d5ef970..141b154 100644
--- a/frontend/src/lib/TextFilter.svelte
+++ b/frontend/src/lib/TextFilter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
+    import {sort_by, scores} from '../store/FilterStore.svelte';
     import Fuse from "fuse.js";
 
     export let crates: FullCrate[];
@@ -11,22 +12,36 @@
         keys: [
             "description",
             "manufacturer",
-            "name",
+            {
+                name: "name",
+                weight: 10,
+            },
             "names",
             "part_numbers",
             "resources.title",
         ],
         includeMatches: true,
         includeScore: true,
-        useExtendedSearch: true,
+        useExtendedSearch: false,
     };
-    const index = Fuse.createIndex(options.keys, crates)
-    const fuse = new Fuse(crates, options, index)
+    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)]
+    // Store the scores in the FilterStore on changes
+    // and force sorting by score
+    $ : {
+      if (search.length > 0) {
+        $sort_by = 'score';
+        $scores = fuse.search(search).map((r) => ({ score: r.score, name: r.item.name }));
+      } else {
+        $sort_by = 'alphanumeric';
+      }
+    }
+
+    $: results = fuse.search(search);
+    $: selected = search === "" ? [] : [results.map((r) => r.refIndex)];
 </script>
 
 <div>
     <input type="text" bind:value={search}>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/store/FilterStore.svelte b/frontend/src/store/FilterStore.svelte
index b8e6df1..9d6be8e 100644
--- a/frontend/src/store/FilterStore.svelte
+++ b/frontend/src/store/FilterStore.svelte
@@ -8,4 +8,7 @@
     // The results are sorted by
     export let sort_by = writable("alphanumeric");
 
+    // Results of text search
+    export let scores = writable([]);
+
 </script>

From cddec5abf417af0b9d96b7c007a526a7fc0d1295 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Fri, 1 Nov 2024 14:38:11 +0100
Subject: [PATCH 2/3] Fixed type issuse

---
 frontend/src/App.svelte               |  2 +-
 frontend/src/app.css                  |  5 +++++
 frontend/src/lib/CrateList.svelte     | 11 ++++++++---
 frontend/src/lib/Filter.svelte        |  2 +-
 frontend/src/lib/SortFilter.svelte    |  2 +-
 frontend/src/lib/TextFilter.svelte    | 11 ++++++++---
 frontend/src/store/FilterStore.svelte | 14 --------------
 frontend/src/store/FilterStore.ts     | 16 ++++++++++++++++
 frontend/tsconfig.json                |  3 ++-
 9 files changed, 42 insertions(+), 24 deletions(-)
 delete mode 100644 frontend/src/store/FilterStore.svelte
 create mode 100644 frontend/src/store/FilterStore.ts

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 50da466..a4d90b7 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 
     import {crates, indexes} from './full-crate-db.json'
-    import {open_filter} from './store/FilterStore.svelte';
+    import {open_filter} from './store/FilterStore.ts';
     import CrateList from "./lib/CrateList.svelte";
     import type {FullCrate, Indexes} from "./crate-db";
     import Filter from "./lib/Filter.svelte";
diff --git a/frontend/src/app.css b/frontend/src/app.css
index fba62a3..5d35c55 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -153,6 +153,11 @@ label {
   display: flex;
   gap: 1rem;
   margin-bottom: 1rem;
+
+  input[type="text"] {
+    min-height: 54px;
+  }
+
 }
 
 .filter {
diff --git a/frontend/src/lib/CrateList.svelte b/frontend/src/lib/CrateList.svelte
index 1939351..9ddc630 100644
--- a/frontend/src/lib/CrateList.svelte
+++ b/frontend/src/lib/CrateList.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
     import Crate from "./Crate.svelte";
-    import {open_filter, sort_by, scores} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by, scores} from '../store/FilterStore.ts';
+
+    interface Score {
+      name: String;
+      score: number;
+    }
 
     export let crates: FullCrate[];
 
@@ -26,8 +31,8 @@
 
       // Sort by text search score
       else if ($sort_by == 'score') {
-        const score_a = $scores.find((s) => s.name == a.name);
-        const score_b = $scores.find((s) => s.name == b.name);
+        const score_a = $scores.find((s : Score) => s.name == a.name);
+        const score_b = $scores.find((s : Score) => s.name == b.name);
         if (score_a && score_b) {
           return score_a.score - score_b.score;
         } else if (score_a) {
diff --git a/frontend/src/lib/Filter.svelte b/frontend/src/lib/Filter.svelte
index 26f5a25..2c06e9a 100644
--- a/frontend/src/lib/Filter.svelte
+++ b/frontend/src/lib/Filter.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import {open_filter} from '../store/FilterStore.svelte';
+    import {open_filter} from '../store/FilterStore.ts';
 
     export let name: string;
     export let values: { [key: string]: number[] };
diff --git a/frontend/src/lib/SortFilter.svelte b/frontend/src/lib/SortFilter.svelte
index 241d650..e686e1c 100644
--- a/frontend/src/lib/SortFilter.svelte
+++ b/frontend/src/lib/SortFilter.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by} from '../store/FilterStore.ts';
 
     export let name: string;
 
diff --git a/frontend/src/lib/TextFilter.svelte b/frontend/src/lib/TextFilter.svelte
index 141b154..70a3855 100644
--- a/frontend/src/lib/TextFilter.svelte
+++ b/frontend/src/lib/TextFilter.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
-    import {sort_by, scores} from '../store/FilterStore.svelte';
+    import {sort_by, scores} from '../store/FilterStore.ts';
     import Fuse from "fuse.js";
 
     export let crates: FullCrate[];
     export let selected: number[][];
 
+    interface Score {
+      name: String;
+      score: number;
+    }
+
     let search: string = "";
 
     const options = {
@@ -32,7 +37,7 @@
     $ : {
       if (search.length > 0) {
         $sort_by = 'score';
-        $scores = fuse.search(search).map((r) => ({ score: r.score, name: r.item.name }));
+        $scores = (fuse.search(search).map((r) => ({ score: r.score, name: r.item.name } as Score))) as Score[];
       } else {
         $sort_by = 'alphanumeric';
       }
@@ -43,5 +48,5 @@
 </script>
 
 <div>
-    <input type="text" bind:value={search}>
+    <input type="text" placeholder="Search" bind:value={search}>
 </div>
diff --git a/frontend/src/store/FilterStore.svelte b/frontend/src/store/FilterStore.svelte
deleted file mode 100644
index 9d6be8e..0000000
--- a/frontend/src/store/FilterStore.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script context="module">
-
-    import {writable} from 'svelte/store';
-
-    // Which filter is currenly opened
-    export let open_filter = writable("");
-
-    // The results are sorted by
-    export let sort_by = writable("alphanumeric");
-
-    // Results of text search
-    export let scores = writable([]);
-
-</script>
diff --git a/frontend/src/store/FilterStore.ts b/frontend/src/store/FilterStore.ts
new file mode 100644
index 0000000..a611f1e
--- /dev/null
+++ b/frontend/src/store/FilterStore.ts
@@ -0,0 +1,16 @@
+import {writable} from 'svelte/store';
+
+export interface Score {
+  name: String;
+  score: number;
+}
+
+// Which filter is currenly opened
+export let open_filter = writable("");
+
+// The results are sorted by
+export let sort_by = writable("alphanumeric");
+
+// Results of text search
+export let scores = writable<Score[]>([]);
+
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index a10ccc3..d449b61 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -13,7 +13,8 @@
      */
     "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "allowImportingTsExtensions": true
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [

From c6af90d0833e54a8197c92f1e9d599ab592f0150 Mon Sep 17 00:00:00 2001
From: Tamme Dittrich <tamme@tweedegolf.com>
Date: Fri, 1 Nov 2024 14:41:58 +0100
Subject: [PATCH 3/3] run formatter

---
 frontend/src/app.css              | 1 -
 frontend/src/store/FilterStore.ts | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 5d35c55..192c724 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -157,7 +157,6 @@ label {
   input[type="text"] {
     min-height: 54px;
   }
-
 }
 
 .filter {
diff --git a/frontend/src/store/FilterStore.ts b/frontend/src/store/FilterStore.ts
index a611f1e..6d2c80e 100644
--- a/frontend/src/store/FilterStore.ts
+++ b/frontend/src/store/FilterStore.ts
@@ -1,4 +1,4 @@
-import {writable} from 'svelte/store';
+import { writable } from "svelte/store";
 
 export interface Score {
   name: String;
@@ -13,4 +13,3 @@ export let sort_by = writable("alphanumeric");
 
 // Results of text search
 export let scores = writable<Score[]>([]);
-