feat(web): rework combobox and add clear button (#7317)

* feat(web): rework combobox

* simplify statement and use transition-all

web/src/lib/components/shared-components/combobox.svelte

@@ -1,12 +1,7 @@
 <script lang="ts" context="module">
-  // Necessary for eslint
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  type T = any;
-
-  export type Type = 'button' | 'submit' | 'reset';
   export type ComboBoxOption = {
     label: string;
-    value: T;
+    value: string;
   };
 </script>
 
@@ -15,34 +10,32 @@
 
   import Icon from '$lib/components/elements/icon.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
-  import { mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
+  import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
+  import IconButton from '../elements/buttons/icon-button.svelte';
 
-  export let type: Type = 'button';
+  export let id: string | undefined = undefined;
   export let options: ComboBoxOption[] = [];
-  export let selectedOption: ComboBoxOption | undefined = undefined;
+  export let selectedOption: ComboBoxOption | undefined;
   export let placeholder = '';
-  export const label = '';
-  export let noLabel = false;
 
   let isOpen = false;
-  let searchQuery = '';
+  let searchQuery = selectedOption?.label || '';
 
   $: filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
 
   const dispatch = createEventDispatcher<{
-    select: ComboBoxOption;
+    select: ComboBoxOption | undefined;
     click: void;
   }>();
 
-  let handleClick = () => {
+  const handleClick = () => {
     searchQuery = '';
-    isOpen = !isOpen;
+    isOpen = true;
     dispatch('click');
   };
 
   let handleOutClick = () => {
-    searchQuery = '';
     isOpen = false;
   };
 
@@ -51,49 +44,77 @@
     dispatch('select', option);
     isOpen = false;
   };
+
+  const onClear = () => {
+    selectedOption = undefined;
+    searchQuery = '';
+    dispatch('select', selectedOption);
+  };
 </script>
 
 <div class="relative" use:clickOutside on:outclick={handleOutClick}>
-  <button {type} class="immich-form-input text-sm text-left w-full min-h-[48px] transition-all" on:click={handleClick}
-    >{#if !noLabel}
-      {selectedOption?.label || ''}
+  <div>
+    {#if isOpen}
+      <div class="absolute inset-y-0 left-0 flex items-center pl-3">
+        <div class="dark:text-immich-dark-fg/75">
+          <Icon path={mdiMagnify} />
+        </div>
+      </div>
     {/if}
-    <div class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between">
-      <Icon path={mdiUnfoldMoreHorizontal} />
+
+    <input
+      {id}
+      {placeholder}
+      role="combobox"
+      aria-expanded={isOpen}
+      aria-controls={id}
+      class="immich-form-input text-sm text-left w-full !pr-12 transition-all"
+      class:!pl-8={isOpen}
+      class:!rounded-b-none={isOpen}
+      class:cursor-pointer={!isOpen}
+      value={isOpen ? '' : selectedOption?.label || ''}
+      on:input={(e) => (searchQuery = e.currentTarget.value)}
+      on:focus={handleClick}
+    />
+
+    <div
+      class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between"
+      class:pr-2={selectedOption}
+      class:pointer-events-none={!selectedOption}
+    >
+      {#if selectedOption}
+        <IconButton color="transparent-gray" on:click={onClear} title="Clear value">
+          <Icon path={mdiClose} />
+        </IconButton>
+      {:else if !isOpen}
+        <Icon path={mdiUnfoldMoreHorizontal} />
+      {/if}
     </div>
-  </button>
+  </div>
 
   {#if isOpen}
     <div
-      transition:fly={{ y: -25, duration: 250 }}
-      class="absolute w-full top-full mt-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-900 z-10"
+      role="listbox"
+      transition:fly={{ duration: 250 }}
+      class="absolute text-left w-full max-h-64 overflow-y-auto bg-white dark:bg-gray-800 rounded-b-lg border border-t-0 border-gray-300 dark:border-gray-900 z-10"
     >
-      <div class="relative border-b flex">
-        <div class="absolute inset-y-0 left-0 flex items-center pl-3">
-          <div class="dark:text-immich-dark-fg/75">
-            <button {type} class="flex items-center">
-              <Icon path={mdiMagnify} />
-            </button>
-          </div>
-        </div>
-
-        <!-- svelte-ignore a11y-autofocus -->
-        <input bind:value={searchQuery} autofocus {placeholder} class="ml-9 grow bg-transparent py-2" />
-      </div>
-      <div class="h-64 overflow-y-auto">
-        {#each filteredOptions as option (option.label)}
-          <button
-            {type}
-            class="block text-left w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all
-           ${option.label === selectedOption?.label ? 'bg-gray-300 dark:bg-gray-600' : ''}
-          "
-            class:bg-gray-300={option.label === selectedOption?.label}
-            on:click={() => handleSelect(option)}
-          >
-            {option.label}
-          </button>
-        {/each}
-      </div>
+      {#if filteredOptions.length === 0}
+        <div class="px-4 py-2 font-medium">No results</div>
+      {/if}
+      {#each filteredOptions as option (option.label)}
+        {@const selected = option.label === selectedOption?.label}
+        <button
+          type="button"
+          role="option"
+          aria-selected={selected}
+          class="text-left w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all"
+          class:bg-gray-300={selected}
+          class:dark:bg-gray-600={selected}
+          on:click={() => handleSelect(option)}
+        >
+          {option.label}
+        </button>
+      {/each}
     </div>
   {/if}
 </div>