Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur

• Styles des liens unifiés en CSS ?
• Dans suggestions : aides_logement ou aide_logement ?

src/lib/components/search/WelcomeSearch.svelte

 <script lang="ts">
-  export let isSearchActive: boolean
-  export let searchQuery: string
+  import type { SearchResult } from "minisearch"
+
+  import { browser } from "$app/environment"
+  import WithLinkedVariablesSearchWorker from "$lib/search/search_worker_variables_with_linked?worker"
+
+  let inProgress = false
+  let pendingQuery: string | null = null
+  let query = ""
+  let results: SearchResult[] = []
+  let worker: Worker | undefined = undefined
+
+  if (browser) {
+    worker = new WithLinkedVariablesSearchWorker()
+    worker.onmessage = function (event) {
+      results = event.data
+
+      // If there's no pending query, we're done!
+      if (pendingQuery === null) {
+        inProgress = false
+      } else {
+        // If we were waiting for results before searching again, run search
+        worker?.postMessage(pendingQuery)
+        pendingQuery = null
+      }
+    }
+  }
+
+  $: if (query.length > 0) {
+    search(query)
+  } else {
+    results = []
+  }
+
+  function search(query: string) {
+    if (worker === undefined) return
+
+    // If search is already running, save the query inside the
+    // pending query variable, awaiting results before searching again
+    if (inProgress) {
+      pendingQuery = query
+      return
+    }
+
+    inProgress = true
+    worker.postMessage(query)
+  }
 </script>
 
 <div
-  class="flex gap-1.5 w-full overflow-hidden rounded-t-md border-2 border-neutral-200 border-b-4 border-b-[#A6A00C] bg-gray-100"
+  class="w-full flex items-center gap-1.5 overflow-hidden rounded-t-md border-2 border-neutral-200 border-b-4 border-b-[#A6A00C] bg-gray-100"
 >
   <iconify-icon
     class="ml-4 self-center p-1 text-xl text-black"
@@ -16,16 +60,18 @@
     id="navbar_search"
     placeholder="impôt sur le revenu, CSG, ..."
     type="search"
-    bind:value={searchQuery}
+    bind:value={query}
   />
-  {#if isSearchActive}
-    <iconify-icon
-      class="md:mx-1 cursor-pointer self-center p-1 text-black"
-      icon="ri-close-line"
-      width="20"
-      height="20"
-      on:click={() => (searchQuery = "")}
-      on:keyup
-    />
+  {#if query.length > 0}
+    <button
+      class="md:mr-2.5 p-2 rounded-full hover:bg-black hover:bg-opacity-10 active:bg-black active:bg-opacity-20 transition-all duration-200 ease-out-back"
+      on:click={() => (query = "")}
+    >
+      <iconify-icon class="block text-xl" icon="ri-close-line" />
+    </button>
   {/if}
 </div>
+
+{#if query.length > 0}
+  <slot {query} {results} />
+{/if}