From d800b90d3ad9bbd16683b8545cc4bd57a7385255 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Tue, 17 Sep 2024 09:20:03 +0200
Subject: [PATCH 1/3] Improved filters slightly

---
 frontend/src/app.css           | 23 +++++++++----
 frontend/src/lib/Filter.svelte | 60 ++++++++++++++++++++++++++--------
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 694adc5..3768f9f 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -200,7 +200,7 @@ label {
     position: absolute;
     background-color: var(--color-background);
     border: 1px solid black;
-    min-height: 15rem;
+    min-height: 10rem;
     height: fit-content;
     max-height: 30rem;
     width: 20rem;
@@ -211,7 +211,7 @@ label {
       display: none;
     }
 
-    .filter-top {
+    .filter-bottom {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -219,6 +219,8 @@ label {
       width: 100%;
       background-color: lightgray;
       gap: 0.5rem;
+      margin-top: 0.5rem;
+      font-size: 14px;
 
       .sort-item {
         display: flex;
@@ -243,9 +245,9 @@ label {
 
     .filter-list {
       padding: 0rem 0rem;
-      overflow-y: scroll;
-      max-height: calc(30rem - 2.5rem - 2.75rem);
-      min-height: calc(15rem - 2.5rem - 2.75rem);
+      overflow-y: auto;
+      max-height: calc(28.5rem - 2.5rem - 2.75rem);
+      min-height: calc(10.75rem - 2.5rem - 2.75rem);
 
       label {
         display: flex;
@@ -255,13 +257,20 @@ label {
 
     .filter-search {
       display: flex;
-      border-top: 1px solid gray;
+      border: 0px;
       height: 2.75rem;
-      width: 100%;
+      width: auto;
       position: relative;
       padding: 5px;
       align-items: center;
       gap: 0.5rem;
+      margin: 0.5rem 0.5rem 0 0.5rem;
+
+      button {
+        font-size: 25px;
+        border: 0px;
+        background-color: inherit;
+      }
     }
   }
 
diff --git a/frontend/src/lib/Filter.svelte b/frontend/src/lib/Filter.svelte
index 7437f28..609dc91 100644
--- a/frontend/src/lib/Filter.svelte
+++ b/frontend/src/lib/Filter.svelte
@@ -16,6 +16,30 @@
     let sort_by: SortType = SortType.Name;
     let sort_direction: boolean = true;
 
+    function clickOutside(node, { enabled: initialEnabled, cb }) {
+        const handleOutsideClick = ({ target }) => {
+          if (!node.contains(target)) {
+            cb();
+          }
+        };
+
+        function update({enabled}) {
+          if (enabled) {
+            window.addEventListener('click', handleOutsideClick);
+          } else {
+            window.removeEventListener('click', handleOutsideClick);
+          }
+        }
+
+        update({ enabled: initialEnabled });
+        return {
+          update,
+          destroy() {
+            window.removeEventListener( 'click', handleOutsideClick );
+          }
+        };
+    }
+
     function sort(items: { [key: string]: number[] }, sort_by: SortType, sort_direction: boolean) {
         let checked = Object.entries(items).filter((i) => selected.includes(i[1]));
         let unchecked = Object.entries(items).filter((i) => !selected.includes(i[1]));
@@ -55,24 +79,21 @@
     $: open = $open_filter == name;
 </script>
 
-<div class={open ? 'filter open' : 'filter'}>
+<div class={open ? 'filter open' : 'filter'} use:clickOutside={{ enabled: open, cb: () => open = false }} >
     <button class="filter-box" on:click={() => $open_filter === name ? $open_filter = "" : $open_filter = name}>
         <span class="filter-name">{name}</span>
         {#if count > 0}<span class="filter-count">{count}</span>{/if}
         <span class="filter-wedge">❮</span>
     </button>
     <div class={open ? 'filter-popup' : 'filter-popup hidden'}>
-        <div class="filter-top">
-            <button class={ sort_by === SortType.Name ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
-                    on:click={() => update_sort(SortType.Name)}>Name
-            </button>
-            <button class={ sort_by === SortType.Count ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
-                    on:click={() => update_sort(SortType.Count)}>Count
-            </button>
 
-            <button on:click={select_all}>All</button>
-            <button on:click={select_none}>None</button>
+        {#if Object.entries(values).length > 10}
+        <div class="filter-search">
+            🔍 <input type="text" bind:value={filter} placeholder="Search { name }" />
+            <!--<button on:click={() => filter = ""}>𐄂</button>-->
         </div>
+        {/if}
+
 
         <div class="filter-list">
             {#each sorted_values as [key, value]}
@@ -84,9 +105,22 @@
                 {/if}
             {/each}
         </div>
-        <div class="filter-search">
-            🔍 <input type="text" bind:value={filter}/>
-            <button on:click={() => filter = ""}>Clear</button>
+
+        {#if Object.entries(values).length > 5}
+        <div class="filter-bottom">
+            Sort by
+            <button class={ sort_by === SortType.Name ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
+                    on:click={() => update_sort(SortType.Name)}>Name
+            </button>
+            <button class={ sort_by === SortType.Count ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
+                    on:click={() => update_sort(SortType.Count)}>Count
+            </button>
+
+            Select
+            <button on:click={select_all}>🗹</button>
+            <button on:click={select_none}>☐</button>
         </div>
+        {/if}
+
     </div>
 </div>

From 4b109dc7aefcf206b2fd71c174eda9aea35819ed Mon Sep 17 00:00:00 2001
From: Tamme Dittrich <tamme@tweedegolf.com>
Date: Wed, 18 Sep 2024 09:55:34 +0200
Subject: [PATCH 2/3] Add types and update formatting

---
 frontend/src/lib/Filter.svelte | 68 +++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/frontend/src/lib/Filter.svelte b/frontend/src/lib/Filter.svelte
index 609dc91..1c44939 100644
--- a/frontend/src/lib/Filter.svelte
+++ b/frontend/src/lib/Filter.svelte
@@ -16,27 +16,27 @@
     let sort_by: SortType = SortType.Name;
     let sort_direction: boolean = true;
 
-    function clickOutside(node, { enabled: initialEnabled, cb }) {
-        const handleOutsideClick = ({ target }) => {
-          if (!node.contains(target)) {
-            cb();
-          }
+    function clickOutside(node: HTMLElement, {enabled: initialEnabled, cb}: { enabled: boolean, cb: Function }) {
+        const handleOutsideClick = ({target}: MouseEvent) => {
+            if (target instanceof Node && !node.contains(target)) {
+                cb();
+            }
         };
 
-        function update({enabled}) {
-          if (enabled) {
-            window.addEventListener('click', handleOutsideClick);
-          } else {
-            window.removeEventListener('click', handleOutsideClick);
-          }
+        function update({enabled}: { enabled: boolean }) {
+            if (enabled) {
+                window.addEventListener('click', handleOutsideClick);
+            } else {
+                window.removeEventListener('click', handleOutsideClick);
+            }
         }
 
-        update({ enabled: initialEnabled });
+        update({enabled: initialEnabled});
         return {
-          update,
-          destroy() {
-            window.removeEventListener( 'click', handleOutsideClick );
-          }
+            update,
+            destroy() {
+                window.removeEventListener('click', handleOutsideClick);
+            }
         };
     }
 
@@ -79,7 +79,7 @@
     $: open = $open_filter == name;
 </script>
 
-<div class={open ? 'filter open' : 'filter'} use:clickOutside={{ enabled: open, cb: () => open = false }} >
+<div class={open ? 'filter open' : 'filter'} use:clickOutside={{ enabled: open, cb: () => open = false }}>
     <button class="filter-box" on:click={() => $open_filter === name ? $open_filter = "" : $open_filter = name}>
         <span class="filter-name">{name}</span>
         {#if count > 0}<span class="filter-count">{count}</span>{/if}
@@ -88,10 +88,10 @@
     <div class={open ? 'filter-popup' : 'filter-popup hidden'}>
 
         {#if Object.entries(values).length > 10}
-        <div class="filter-search">
-            🔍 <input type="text" bind:value={filter} placeholder="Search { name }" />
-            <!--<button on:click={() => filter = ""}>𐄂</button>-->
-        </div>
+            <div class="filter-search">
+                🔍 <input type="text" bind:value={filter} placeholder="Search { name }"/>
+                <!--<button on:click={() => filter = ""}>𐄂</button>-->
+            </div>
         {/if}
 
 
@@ -107,19 +107,19 @@
         </div>
 
         {#if Object.entries(values).length > 5}
-        <div class="filter-bottom">
-            Sort by
-            <button class={ sort_by === SortType.Name ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
-                    on:click={() => update_sort(SortType.Name)}>Name
-            </button>
-            <button class={ sort_by === SortType.Count ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
-                    on:click={() => update_sort(SortType.Count)}>Count
-            </button>
-
-            Select
-            <button on:click={select_all}>🗹</button>
-            <button on:click={select_none}>☐</button>
-        </div>
+            <div class="filter-bottom">
+                Sort by
+                <button class={ sort_by === SortType.Name ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
+                        on:click={() => update_sort(SortType.Name)}>Name
+                </button>
+                <button class={ sort_by === SortType.Count ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
+                        on:click={() => update_sort(SortType.Count)}>Count
+                </button>
+
+                Select
+                <button on:click={select_all}>🗹</button>
+                <button on:click={select_none}>☐</button>
+            </div>
         {/if}
 
     </div>

From 43f6bb6d5705965c2e5024110f8dde306bff7c64 Mon Sep 17 00:00:00 2001
From: Bram Tweedegolf <bram@tweedegolf.com>
Date: Fri, 1 Nov 2024 10:43:34 +0100
Subject: [PATCH 3/3] Fix filter

---
 frontend/src/lib/Filter.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/Filter.svelte b/frontend/src/lib/Filter.svelte
index d78ef6a..26f5a25 100644
--- a/frontend/src/lib/Filter.svelte
+++ b/frontend/src/lib/Filter.svelte
@@ -108,11 +108,11 @@
         {#if Object.entries(values).length > 5}
             <div class="filter-bottom">
                 Sort by
-                <button class={ sort_by === SortType.Name ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
-                        on:click={() => update_sort(SortType.Name)}>Name
+                <button class={ sort_by === NAME ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
+                        on:click={() => update_sort(NAME)}>Name
                 </button>
-                <button class={ sort_by === SortType.Count ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
-                        on:click={() => update_sort(SortType.Count)}>Count
+                <button class={ sort_by === COUNT ? sort_direction ? "sort-item sorted asc" : 'sort-item sorted desc' : "sort-item"}
+                        on:click={() => update_sort(COUNT)}>Count
                 </button>
 
                 Select