feat(web): search filter form (#6651)

* refactor: search history box

* filter box component

* start adding forms

* styling

* combo box

* styling

* media types

* album option

* update

* Updated

* refactor: search history box

* filter box component

* start adding forms

* styling

* combo box

* styling

* media types

* album option

* update

* Updated

* Version v1.94.0

* Add people

* add select even for combobox

* Remove unused data

* remove unused code

* remove unused code

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -3,15 +3,18 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { goto } from '$app/navigation';
   import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
-  import { fly } from 'svelte/transition';
   import { clickOutside } from '$lib/utils/click-outside';
-  import { mdiClose, mdiMagnify } from '@mdi/js';
+  import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
+  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
+  import SearchHistoryBox from './search-history-box.svelte';
+  import SearchFilterBox from './search-filter-box.svelte';
   export let value = '';
   export let grayTheme: boolean;
 
   let input: HTMLInputElement;
 
-  let showBigSearchBar = false;
+  let showHistory = false;
+  let showFilter = false;
   $: showClearIcon = value.length > 0;
 
   function onSearch() {
@@ -31,7 +34,7 @@
       smart: smartSearch,
     });
 
-    showBigSearchBar = false;
+    showHistory = false;
     $isSearchEnabled = false;
     goto(`${AppRoute.SEARCH}?${parameters}`, { invalidateAll: true });
   }
@@ -55,7 +58,7 @@
   };
 
   const onFocusIn = () => {
-    showBigSearchBar = true;
+    showHistory = true;
     $isSearchEnabled = true;
   };
 
@@ -64,7 +67,7 @@
       $preventRaceConditionSearchBar = true;
     }
 
-    showBigSearchBar = false;
+    showHistory = false;
     $isSearchEnabled = false;
   };
 </script>
@@ -91,7 +94,7 @@
         name="q"
         class="w-full {grayTheme
           ? 'dark:bg-immich-dark-gray'
-          : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showBigSearchBar
+          : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showHistory || showFilter
           ? 'rounded-t-3xl border  border-gray-200 bg-white dark:border-gray-800'
           : 'rounded-3xl border border-transparent bg-gray-200'}"
         placeholder="Search your photos"
@@ -100,7 +103,16 @@
         bind:value
         bind:this={input}
         on:click={onFocusIn}
+        disabled={showFilter}
       />
+
+      <div class="absolute inset-y-0 right-5 flex items-center pl-6">
+        <div class="dark:text-immich-dark-fg/75">
+          <IconButton on:click={() => (showFilter = !showFilter)} title="Show search options">
+            <Icon path={mdiTune} size="1.5em" />
+          </IconButton>
+        </div>
+      </div>
     </label>
     {#if showClearIcon}
       <div class="absolute inset-y-0 right-0 flex items-center pr-4">
@@ -113,58 +125,20 @@
       </div>
     {/if}
 
-    {#if showBigSearchBar}
-      <div
-        transition:fly={{ y: 25, duration: 250 }}
-        class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
-      >
-        <div class="flex px-5 pt-5 text-left text-sm">
-          <p>
-            Smart search is enabled by default, to search for metadata use the syntax <span
-              class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
-              >m:your-search-term</span
-            >
-          </p>
-        </div>
+    <!-- SEARCH HISTORY BOX -->
+    {#if showHistory}
+      <SearchHistoryBox
+        on:clearAllSearchTerms={clearAllSearchTerms}
+        on:clearSearchTerm={({ detail: searchTerm }) => clearSearchTerm(searchTerm)}
+        on:selectSearchTerm={({ detail: searchTerm }) => {
+          value = searchTerm;
+          onSearch();
+        }}
+      />
+    {/if}
 
-        {#if $savedSearchTerms.length > 0}
-          <div class="flex items-center justify-between px-5 pt-5 text-xs">
-            <p>RECENT SEARCHES</p>
-            <div class="flex w-18 items-center justify-center">
-              <button
-                type="button"
-                class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
-                on:click={clearAllSearchTerms}>Clear all</button
-              >
-            </div>
-          </div>
-        {/if}
-
-        {#each $savedSearchTerms as savedSearchTerm, index (index)}
-          <div
-            class="flex w-full items-center justify-between text-sm text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
-          >
-            <div class="relative w-full items-center">
-              <button
-                type="button"
-                class="relative flex w-full cursor-pointer gap-3 py-3 pl-5"
-                on:click={() => {
-                  value = savedSearchTerm;
-                  onSearch();
-                }}
-              >
-                <Icon path={mdiMagnify} size="1.5em" />
-                {savedSearchTerm}
-              </button>
-              <div class="absolute right-5 top-0 items-center justify-center py-3">
-                <button type="button" on:click={() => clearSearchTerm(savedSearchTerm)}
-                  ><Icon path={mdiClose} size="18" /></button
-                >
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
+    {#if showFilter}
+      <SearchFilterBox />
     {/if}
   </form>
 </div>