From 2a7692b74b87fbdc82a5fb9c847f8785efccf4e0 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 18 Jun 2024 15:55:30 +0200
Subject: [PATCH] Search improvements

---
 frontend/viewer/src/ProjectView.svelte        |  2 +-
 .../viewer/src/lib/layout/EntryList.svelte    | 15 ++++++++--
 .../src/lib/search-bar/SearchBar.svelte       | 29 ++++++++++++++-----
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
index 219bd695f..a8e19f011 100644
--- a/frontend/viewer/src/ProjectView.svelte
+++ b/frontend/viewer/src/ProjectView.svelte
@@ -55,7 +55,7 @@
 
   const connected = writable(false);
   const search = writable<string>('');
-
+  setContext('listSearch', search);
 
   const selectedIndexExemplar = writable<string | undefined>(undefined);
   setContext('selectedIndexExamplar', selectedIndexExemplar);
diff --git a/frontend/viewer/src/lib/layout/EntryList.svelte b/frontend/viewer/src/lib/layout/EntryList.svelte
index f57033848..34ae6685d 100644
--- a/frontend/viewer/src/lib/layout/EntryList.svelte
+++ b/frontend/viewer/src/lib/layout/EntryList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Button, InfiniteScroll, ListItem, TextField } from "svelte-ux";
+  import { Button, Icon, InfiniteScroll, ListItem, TextField } from "svelte-ux";
   import type { IEntry } from "../mini-lcm";
   import { firstDefOrGlossVal, headword } from "../utils";
-  import { mdiArrowExpandLeft, mdiArrowExpandRight, mdiBookOpenVariantOutline, mdiBookSearchOutline, mdiFormatListText } from "@mdi/js";
+  import { mdiArrowExpandLeft, mdiArrowExpandRight, mdiBookOpenVariantOutline, mdiBookSearchOutline, mdiClose, mdiFormatListText } from "@mdi/js";
   import IndexCharacters from "./IndexCharacters.svelte";
   import type { Writable } from "svelte/store";
   import { createEventDispatcher, getContext } from "svelte";
@@ -56,6 +56,7 @@
       <TextField
         bind:value={search}
         placeholder="Filter entries..."
+        clearable
         icon={mdiBookSearchOutline} />
     </div>
     <Button icon={dictionaryMode ? mdiFormatListText : mdiBookOpenVariantOutline} variant="outline"
@@ -77,7 +78,15 @@
         <div class="p-4 text-center opacity-75">
           No entries found
           {#if $selectedCharacter}
-            in '{$selectedCharacter}'
+            in
+            <Button
+              fullWidth
+              class="border mb-2 w-auto inline ml-0.5"
+              on:click={() => $selectedCharacter = undefined}
+              size="sm">
+              {$selectedCharacter}
+              <Icon data={mdiClose} />
+            </Button>
           {/if}
         </div>
       {:else}
diff --git a/frontend/viewer/src/lib/search-bar/SearchBar.svelte b/frontend/viewer/src/lib/search-bar/SearchBar.svelte
index 1f8e6ff97..6b8f7dfa9 100644
--- a/frontend/viewer/src/lib/search-bar/SearchBar.svelte
+++ b/frontend/viewer/src/lib/search-bar/SearchBar.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { mdiBookSearchOutline, mdiMagnifyRemoveOutline } from '@mdi/js';
-  import { Dialog, Field, Icon, ListItem, TextField, cls } from 'svelte-ux';
+  import { Button, Dialog, Field, Icon, ListItem, TextField, cls } from 'svelte-ux';
   import { firstDefOrGlossVal, headword } from '../utils';
   import { useLexboxApi } from '../services/service-provider';
-  import { derived, writable } from 'svelte/store';
+  import { derived, writable, type Writable } from 'svelte/store';
   import { deriveAsync } from '../utils/time';
-  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { createEventDispatcher, getContext, onDestroy } from 'svelte';
   import type { IEntry } from '../mini-lcm';
 
   const dispatch = createEventDispatcher<{
@@ -50,6 +50,9 @@
   const displayedEntries = derived(result, (result) => {
     return result?.entries.slice(0, 5) ?? [];
   });
+
+  const listSearch = getContext<Writable<string | undefined>>('listSearch');
+  const selectedIndexExamplar = getContext<Writable<string | undefined>>('selectedIndexExamplar');
 </script>
 
 <Field
@@ -64,7 +67,7 @@
   </div>
 </Field>
 
-<Dialog bind:open={showSearchDialog} class="w-[700px]" classes={{root: 'items-start', title: 'p-2'}}>
+<Dialog bind:open={showSearchDialog} on:close={() => $search = undefined} class="w-[700px]" classes={{root: 'items-start', title: 'p-2'}}>
   <div slot="title">
     <TextField
       autofocus
@@ -86,7 +89,6 @@
         on:click={() => {
           dispatch('entrySelected', entry);
           showSearchDialog = false;
-          $search = undefined;
         }}
       />
     {/each}
@@ -100,10 +102,23 @@
       </div>
     {/if}
     {#if $result.entries.length > $displayedEntries.length}
-      <div class="p-4 text-center opacity-75 flex">
+      <div class="p-4 text-center opacity-75 flex items-center">
         <span>{$result.entries.length - $displayedEntries.length}</span>
         {#if $result.entries.length === fetchCount}<span>+</span>{/if}
-        <span class="ml-1">more matching entries...</span>
+        <div class="ml-1 flex justify-between items-center gap-2">
+          <span>more matching entries...</span>
+          <Button
+            fullWidth
+            icon={mdiBookSearchOutline}
+            on:click={() => {
+              $listSearch = $search;
+              $selectedIndexExamplar = undefined;
+              showSearchDialog = false;
+            }}
+            class="border w-auto inline ml-0.5">
+            Filter list
+          </Button>
+        </div>
       </div>
     {/if}
   </div>