From c7925abf78c530b0a3f6a3c56a808d2bcb085f65 Mon Sep 17 00:00:00 2001
From: Chaichontat Sriworarat <34997334+chaichontat@users.noreply.github.com>
Date: Wed, 21 Jun 2023 09:35:15 -0400
Subject: [PATCH] Group filter select

Signed-off-by: Chaichontat Sriworarat <34997334+chaichontat@users.noreply.github.com>
---
 src/lib/sidebar/searchbox/SearchList.svelte   | 35 ++++++-----
 .../sidebar/searchbox/featureSearchBox.svelte | 58 ++++++++++++++++++-
 2 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/src/lib/sidebar/searchbox/SearchList.svelte b/src/lib/sidebar/searchbox/SearchList.svelte
index 00d92b4..b503e25 100644
--- a/src/lib/sidebar/searchbox/SearchList.svelte
+++ b/src/lib/sidebar/searchbox/SearchList.svelte
@@ -12,6 +12,7 @@
   let fzf: [string | null, Fzf<readonly string[]>][];
 
   export let featureGroup: FeatureGroupList[] | undefined = $allFeatures;
+  export let selectedGroup: string;
   export let showSearch = false;
   export let set:
     | ((v: SimpleHS<FeatureAndGroup>) => void)
@@ -22,7 +23,7 @@
   const dispatch = createEventDispatcher();
 
   let cl =
-    'bg-neutral-800/95 backdrop-blur-lg absolute top-12 z-40 flex w-full flex-col gap-y-1 rounded-lg px-2 pt-2 pb-4 shadow-lg shadow-neutral-600/50';
+    'bg-neutral-800/95 backdrop-blur-lg absolute top-12 z-40 flex w-[90%] flex-col gap-y-1 rounded-lg px-2 pt-2 mt-4 pb-2 shadow-lg shadow-neutral-600/50 border border-neutral-200/30';
   export { cl as class };
 
   let candidates: {
@@ -36,19 +37,21 @@
   }
 
   $: if (featureGroup) {
-    fzf = featureGroup.map((f) => {
-      const config: ConstructorParameters<typeof Fzf>[1] = {
-        limit: 100,
-        casing: 'case-insensitive'
-      };
-      if (f.weights) {
-        config.tiebreakers = [
-          (a: FzfResultItem<string>, b: FzfResultItem<string>) =>
-            f.weights![f.names[a.item] - f.weights![f.names[b.item]]]
-        ];
-      }
-      return [f.group, new Fzf(f.features, config)];
-    });
+    fzf = featureGroup
+      .filter((f) => f.group === selectedGroup)
+      .map((f) => {
+        const config: ConstructorParameters<typeof Fzf>[1] = {
+          limit: 100,
+          casing: 'case-insensitive'
+        };
+        if (f.weights) {
+          config.tiebreakers = [
+            (a: FzfResultItem<string>, b: FzfResultItem<string>) =>
+              f.weights![f.names[a.item] - f.weights![f.names[b.item]]]
+          ];
+        }
+        return [f.group, new Fzf(f.features, config)];
+      });
   }
 
   $: if (fzf) {
@@ -90,9 +93,9 @@
   {#each candidates as { group, values }, i}
     {#if values.length > 0 && (limit < 0 || i < limit)}
       <div class="flex flex-col sticky">
-        <span class="px-2 pt-1.5 pb-0.5 font-medium capitalize text-yellow-300">
+        <!-- <span class="px-2 pt-1.5 pb-0.5 font-medium capitalize text-yellow-300">
           {group ?? 'Misc.'}
-        </span>
+        </span> -->
         {#each values as v}
           <HoverableFeature
             {set}
diff --git a/src/lib/sidebar/searchbox/featureSearchBox.svelte b/src/lib/sidebar/searchbox/featureSearchBox.svelte
index 15829b0..1d1429c 100644
--- a/src/lib/sidebar/searchbox/featureSearchBox.svelte
+++ b/src/lib/sidebar/searchbox/featureSearchBox.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
+  import {
+    Listbox,
+    ListboxButton,
+    ListboxOption,
+    ListboxOptions
+  } from '@rgossiaux/svelte-headlessui';
   import { oneLRU } from '../../lru';
-  import { hoverSelect, overlaysFeature, setHoverSelect, sOverlay } from '../../store';
+  import { hoverSelect, overlaysFeature, sOverlay, setHoverSelect } from '../../store';
   import type { FeatureGroupList } from '../searchBox';
   import SearchList from './SearchList.svelte';
 
+  import { ChevronDown } from '@steeze-ui/heroicons';
+  import { Icon } from '@steeze-ui/svelte-icon';
+
   export let featureGroup: FeatureGroupList[] | undefined;
   export let displaySelection = false; // Start with empty search box.
 
@@ -21,9 +30,51 @@
   sOverlay.subscribe((ov) => {
     if (ov) search = $overlaysFeature[ov]?.feature ?? '';
   });
+
+  let groups: string[] | undefined = [];
+  let selectedGroup = groups[0];
+  $: {
+    groups = featureGroup?.map((f) => f.group ?? 'Misc.');
+    if (!selectedGroup && groups && groups.length) selectedGroup = groups[0];
+  }
 </script>
 
-<div class="relative w-full">
+<div class="flex gap-x-1 w-full">
+  {#if featureGroup && featureGroup.length > 1}
+    <Listbox
+      bind:value={selectedGroup}
+      class="relative cursor-pointer overflow-visible max-w-[35%]"
+    >
+      <span class="inline-block w-full rounded-md shadow-sm">
+        <ListboxButton
+          class="relative w-full py-2 pl-3 pr-8 text-left transition duration-150 ease-in-out bg-neutral-800 border border-neutral-400 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 "
+        >
+          <span class="block truncate">{selectedGroup}</span>
+          <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+            <Icon class="w-4 h-4 translate-y-[0.25] text-neutral-400" src={ChevronDown} />
+          </span>
+        </ListboxButton>
+      </span>
+
+      <div
+        class="absolute mt-1 bg-neutral-800 rounded-md overflow-visible shadow-lg shadow-neutral-600/50 border border-neutral-200/30"
+      >
+        <ListboxOptions>
+          <div class="py-1">
+            {#each groups as group}
+              <ListboxOption
+                value={group}
+                class="bg-neutral-800 hover:bg-neutral-700 py-1 px-3 rounded-md"
+              >
+                {group}
+              </ListboxOption>
+            {/each}
+          </div>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+  {/if}
+
   <input
     type="text"
     class="w-full rounded-md border border-neutral-400 bg-neutral-100 py-[5px] px-3 shadow transition-colors dark:border-neutral-600 dark:bg-neutral-800"
@@ -32,13 +83,14 @@
       ev.currentTarget.select();
       showSearch = true;
       displaySelection = true;
+      if (selectedGroup !== $hoverSelect.active?.group) search = '';
     }}
     on:input={() => (showSearch = true)}
     placeholder={noFeature ? 'No feature' : 'Search features'}
     disabled={noFeature}
   />
 
-  <SearchList {search} bind:showSearch {featureGroup} set={setHoverSelect} />
+  <SearchList {search} {selectedGroup} bind:showSearch {featureGroup} set={setHoverSelect} />
 </div>
 
 <style lang="postcss">