Search: refactoring searching for themes, refactor allThemesGui, incidentally fix #1679

src/UI/Base/Searchbar.svelte

@@ -6,6 +6,7 @@
   import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ariaLabel } from "../../Utils/ariaLabel"
   import { Translation } from "../i18n/Translation"
+  import Backspace from "@babeard/svelte-heroicons/outline/Backspace"
 
   export let value: UIEventSource<string>
   let _value = value.data ?? ""
@@ -23,8 +24,8 @@
     if (focussed) {
       requestAnimationFrame(() => {
         if (document.activeElement !== inputElement) {
-          inputElement.focus()
-          inputElement.select()
+          inputElement?.focus()
+          inputElement?.select()
         }
       })
     }
@@ -38,15 +39,17 @@
   on:submit|preventDefault={() => dispatch("search")}
 >
   <label
-    class="neutral-label normal-background flex w-full items-center rounded-full border-2 border-black box-shadow"
+    class="neutral-label normal-background flex w-full items-center rounded-full border border-black box-shadow"
   >
+    <SearchIcon aria-hidden="true" class="h-8 w-8 ml-2" />
+
     <input
       bind:this={inputElement}
       on:focus={() => {isFocused?.setData(true)}}
       on:blur={() => {isFocused?.setData(false)}}
       type="search"
       style=" --tw-ring-color: rgb(0 0 0 / 0) !important;"
-      class="ml-4 pl-1 w-full outline-none border-none"
+      class="px-0 ml-1 w-full outline-none border-none"
       on:keypress={(keypr) => {
           return keypr.key === "Enter" ? dispatch("search") : undefined
         }}
@@ -54,7 +57,11 @@
       use:set_placeholder={placeholder}
       use:ariaLabel={placeholder}
     />
-    <SearchIcon aria-hidden="true" class="h-8 w-8 mx-3" />
 
+    {#if $value.length > 0}
+      <Backspace on:click={() => value.set("")} color="var(--button-background)" class="w-6 h-6 mr-3 cursor-pointer" />
+    {:else}
+      <div class="w-6 mr-3" />
+    {/if}
   </label>
 </form>