fix(web): focus & clear individual search term (#3452)

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -43,7 +43,7 @@
 <div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 z-[100] w-full bg-transparent">
   <div
     id="asset-selection-app-bar"
-    class={`grid grid-cols-3 justify-between ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
+    class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[20%_60%_20%] lg:grid-cols-3 ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
       forceDark && 'bg-immich-dark-gray text-white'
     }`}
   >

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

@@ -9,10 +9,12 @@
   export let value = '';
   export let grayTheme: boolean;
 
+  let input: HTMLInputElement;
+
   let showBigSearchBar = false;
   $: showClearIcon = value.length > 0;
 
-  function onSearch(saveSearch: boolean) {
+  function onSearch() {
     let clipSearch = 'true';
     let searchValue = value;
 
@@ -21,18 +23,23 @@
       searchValue = value.slice(2);
     }
 
-    if (saveSearch) {
+    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchValue);
-      saveSearchTerm(value);
+    saveSearchTerm(searchValue);
-    }
 
     const params = new URLSearchParams({
       q: searchValue,
       clip: clipSearch,
     });
 
+    showBigSearchBar = false;
     goto(`${AppRoute.SEARCH}?${params}`);
   }
 
+  const clearSearchTerm = (searchTerm: string) => {
+    input.focus();
+    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchTerm);
+  };
+
   const saveSearchTerm = (saveValue: string) => {
     $savedSearchTerms = [saveValue, ...$savedSearchTerms];
 
@@ -41,7 +48,8 @@
     }
   };
 
-  const clearSearchTerm = () => {
+  const clearAllSearchTerms = () => {
+    input.focus();
     $savedSearchTerms = [];
   };
 
@@ -56,19 +64,21 @@
   };
 </script>
 
-<button class="w-full" use:clickOutside on:outclick={onFocusOut} on:click={onFocusIn}>
+<button class="w-full" use:clickOutside on:outclick={onFocusOut}>
   <form
     draggable="false"
     autocomplete="off"
     class="relative select-text text-sm"
     action={AppRoute.SEARCH}
     on:reset={() => (value = '')}
-    on:submit|preventDefault={() => onSearch(true)}
+    on:submit|preventDefault={() => onSearch()}
   >
     <label>
       <div class="absolute inset-y-0 left-0 flex items-center pl-6">
-        <div class="pointer-events-none dark:text-immich-dark-fg/75">
+        <div class="dark:text-immich-dark-fg/75">
-          <Magnify size="1.5em" />
+          <button class="flex items-center">
+            <Magnify size="1.5em" />
+          </button>
         </div>
       </div>
       <input
@@ -83,6 +93,8 @@
         required
         pattern="^(?!m:$).*$"
         bind:value
+        bind:this={input}
+        on:click={onFocusIn}
       />
     </label>
     {#if showClearIcon}
@@ -111,28 +123,39 @@
         </div>
 
         {#if $savedSearchTerms.length > 0}
-          <div class="flex justify-between px-5 pt-5 text-xs">
+          <div class="flex items-center justify-between px-5 pt-5 text-xs">
             <p>RECENT SEARCHES</p>
-            <button
+            <div class="flex w-18 items-center justify-center">
-              type="button"
+              <button
-              class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
+                type="button"
-              on:click={clearSearchTerm}>Clear all</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, i (i)}
-          <button
+          <div
-            type="button"
+            class="flex w-full items-center justify-between text-xs text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
-            class="flex w-full cursor-pointer gap-3 px-5 py-3 text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
-            on:click={() => {
-              value = savedSearchTerm;
-              onSearch(false);
-            }}
           >
-            <Magnify size="1.5em" />
+            <div class="relative w-full items-center">
-            {savedSearchTerm}
+              <button
-          </button>
+                type="button"
+                class="relative flex w-full cursor-pointer gap-3 py-3 pl-5"
+                on:click={() => {
+                  value = savedSearchTerm;
+                  onSearch();
+                }}
+              >
+                <Magnify 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)}><Close size="18" /></button>
+              </div>
+            </div>
+          </div>
         {/each}
       </div>
     {/if}

web/src/routes/(user)/search/+page.svelte

@@ -85,7 +85,7 @@
     </AssetSelectControlBar>
   {:else}
     <ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
-      <div class="w-full max-w-2xl flex-1 pl-4">
+      <div class="w-full flex-1 pl-4">
         <SearchBar grayTheme={false} value={term} />
       </div>
     </ControlAppBar>