feat(web): increase usage of CircleIconButton (#9256)

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

@@ -1,20 +1,23 @@
 <script lang="ts">
   import { mdiClose, mdiMagnify } from '@mdi/js';
-  import Icon from './icon.svelte';
   import { createEventDispatcher } from 'svelte';
   import type { SearchOptions } from '$lib/utils/dipatch';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let name: string;
   export let roundedBottom = true;
   export let showLoadingSpinner: boolean;
   export let placeholder: string;
 
+  let inputRef: HTMLElement;
+
   const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
 
   const resetSearch = () => {
     name = '';
     dispatch('reset');
+    inputRef?.focus();
   };
 
   const handleSearch = (event: KeyboardEvent) => {
@@ -29,16 +32,19 @@
     ? 'rounded-2xl'
     : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
 >
-  <button type="button" on:click={() => dispatch('search', { force: true })}>
-    <div class="w-fit">
-      <Icon path={mdiMagnify} size="24" />
-    </div>
-  </button>
+  <CircleIconButton
+    icon={mdiMagnify}
+    title="Search"
+    size="16"
+    padding="2"
+    on:click={() => dispatch('search', { force: true })}
+  />
   <input
     class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
     type="text"
     {placeholder}
     bind:value={name}
+    bind:this={inputRef}
     on:keydown={handleSearch}
     on:input={() => dispatch('search', { force: false })}
   />
@@ -48,8 +54,6 @@
     </div>
   {/if}
   {#if name}
-    <button on:click={resetSearch}>
-      <Icon path={mdiClose} />
-    </button>
+    <CircleIconButton icon={mdiClose} title="Clear value" size="16" padding="2" on:click={resetSearch} />
   {/if}
 </div>