🚀 Upgrade search component to Svelte 5 + add `onChange` parameter

src/components/search.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import { inputStyles } from '@/ui/styles';
   import { Command, SearchIcon } from 'lucide-svelte';
-  export let searchTerm: string;
-  export let placeholder: string = 'Search...';
-  export let clearSearch: () => void;
-  import { X } from 'lucide-svelte';
+  import { inputStyles } from '@/ui/styles';
+  import { cn } from '@/utils/cn';
+
+  interface Props {
+    searchTerm?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+  }
 
   let inputElement;
+  let { searchTerm = $bindable(), placeholder = 'Search...', onChange }: Props = $props();
 
   function focusInput(node: HTMLElement) {
     const handleKeydown = (event: KeyboardEvent) => {
@@ -16,62 +19,35 @@
         node.focus();
       }
     };
-
     window.addEventListener('keydown', handleKeydown);
-
     return {
       destroy() {
         window.removeEventListener('keydown', handleKeydown);
       }
     };
   }
-
-  let searchParams = {} as { [key: string]: string };
-
-  $: {
-    if ($page) {
-      searchParams = Object.fromEntries($page.url.searchParams);
-      if (!searchParams?.search) {
-        clearSearch();
-      }
-    }
-  }
 </script>
 
 <div class="sticky top-[63px] z-50">
   <div class="relative w-full text-[16px]">
     <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
-      <div class="pointer-events-none">
-        <SearchIcon size={20} strokeWidth={searchTerm ? 2.5 : 1.5} />
-      </div>
+      <SearchIcon size={20} class="pointer-events-none" strokeWidth={searchTerm ? 2.5 : 1.5} />
     </div>
     <input
-      type="text"
-      {placeholder}
+      type="search"
       autocomplete="off"
-      class={inputStyles}
+      class={cn(inputStyles, 'py-3 pr-[54px] text-[16px]')}
+      {placeholder}
       bind:value={searchTerm}
-      on:input
-      use:focusInput
       bind:this={inputElement}
+      use:focusInput
+      oninput={(event) => onChange(event.currentTarget.value)}
     />
-    {#if searchTerm.length > 0}
-      <div class="absolute inset-y-0 right-0 flex items-center pr-3">
-        <button
-          type="button"
-          class="focus:outline-none focus:ring-1 focus:ring-neutral-300"
-          on:click={clearSearch}
-        >
-          <X size={18} />
-        </button>
-      </div>
-    {:else}
     <div class="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-500">
-        <div class="flex h-full items-center pointer-events-none gap-x-1 font-mono">
+      <div class="pointer-events-none flex h-full items-center gap-x-1 font-mono">
         <Command size={16} />
         <span>K</span>
       </div>
     </div>
-    {/if}
   </div>
 </div>

src/routes/+page.svelte

@@ -1,17 +1,30 @@
 <script lang="ts">
   import type { iSVG } from '@/types/svg';
-  import { cn } from '@/utils/cn';
+
   import { onMount } from 'svelte';
   import { queryParam } from 'sveltekit-search-params';
+  import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon, TrashIcon } from 'lucide-svelte';
   import Fuse from 'fuse.js';
 
+  // Styles:
+  import { cn } from '@/utils/cn';
+  import { buttonStyles } from '@/ui/styles';
+
+  // Components:
+  import Search from '@/components/search.svelte';
+  import Container from '@/components/container.svelte';
+  import SvgCard from '@/components/svgCard.svelte';
+  import Grid from '@/components/grid.svelte';
+  import NotFound from '@/components/notFound.svelte';
+
   // Get all svgs:
   import { svgsData } from '@/data';
-  const allSvgs = JSON.parse(JSON.stringify(svgsData));
 
-  // Cache sorted arrays
+  // Settings:
+  const allSvgs = JSON.parse(JSON.stringify(svgsData));
   const latestSorted = [...allSvgs].sort((a, b) => b.id! - a.id!);
   const alphabeticallySorted = [...allSvgs].sort((a, b) => a.title.localeCompare(b.title));
+  const maxSvgsToShow = 30;
 
   // Fuzzy search setup:
   const fuse = new Fuse<iSVG>(allSvgs, {
@@ -22,35 +35,20 @@
     shouldSort: true
   });
 
-  // Components:
-  import Search from '@/components/search.svelte';
-  import Container from '@/components/container.svelte';
-  import SvgCard from '@/components/svgCard.svelte';
-  import Grid from '@/components/grid.svelte';
-  import NotFound from '@/components/notFound.svelte';
-
   // URL params
   const searchParam = queryParam('search');
 
-  // Icons:
-  import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon, TrashIcon } from 'lucide-svelte';
-  import { buttonStyles } from '@/ui/styles';
-
-  let sorted: boolean = false;
-  let showAll: boolean = false;
-
-  // Search:
-  let searchTerm = '';
-  let filteredSvgs: iSVG[] = [];
-  let displaySvgs: iSVG[] = [];
+  // States:
+  let sorted = $state<boolean>(false);
+  let showAll = $state<boolean>(false);
+  let searchTerm = $state<string>('');
+  let filteredSvgs = $state<iSVG[]>([]);
+  let displaySvgs = $state<iSVG[]>([]);
 
   const updateDisplaySvgs = () => {
     displaySvgs = showAll ? filteredSvgs : filteredSvgs.slice(0, 30);
   };
 
-  // Hybrid search strategy:
-  // - Simple string matching for queries < 3 chars
-  // - Fuzzy search for longer queries (handle typos and partial matches)
   const searchSvgs = () => {
     $searchParam = searchTerm || null;
 
@@ -74,7 +72,6 @@
   // Clear search:
   const clearSearch = () => {
     searchTerm = '';
-    // Use current sort state to determine order
     filteredSvgs = sorted ? alphabeticallySorted : latestSorted;
     updateDisplaySvgs();
   };
@@ -93,11 +90,11 @@
     searchSvgs();
   });
 
-  $: {
+  $effect.pre(() => {
     if (showAll || filteredSvgs) {
       updateDisplaySvgs();
     }
-  }
+  });
 </script>
 
 <svelte:head>
@@ -105,10 +102,13 @@
 </svelte:head>
 
 <Search
-  bind:searchTerm
-  on:input={searchSvgs}
-  clearSearch={() => clearSearch()}
+  {searchTerm}
   placeholder={`Search ${allSvgs.length} logos...`}
+  onChange={(value) => {
+    searchParam.set(value);
+    searchTerm = value;
+    searchSvgs();
+  }}
 />
 
 <Container>
@@ -119,7 +119,7 @@
           'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 transition-opacity hover:opacity-100',
           filteredSvgs.length === 0 && 'hidden'
         )}
-        on:click={() => clearSearch()}
+        onclick={() => clearSearch()}
       >
         <TrashIcon size={16} strokeWidth={2} class="mr-1" />
         <span>Clear results</span>
@@ -130,7 +130,7 @@
         'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 transition-opacity hover:opacity-100',
         filteredSvgs.length === 0 && 'hidden'
       )}
-      on:click={() => sort()}
+      onclick={() => sort()}
     >
       {#if sorted}
         <ArrowDownUpIcon size={16} strokeWidth={2} class="mr-1" />
@@ -145,11 +145,11 @@
       <SvgCard svgInfo={svg} {searchTerm} />
     {/each}
   </Grid>
-  {#if filteredSvgs.length > 30 && !showAll}
+  {#if filteredSvgs.length > maxSvgsToShow && !showAll}
     <div class="mt-4 flex items-center justify-center">
       <button
         class={buttonStyles}
-        on:click={() => {
+        onclick={() => {
           showAll = true;
           updateDisplaySvgs();
         }}
@@ -158,7 +158,7 @@
           <ArrowDown size={16} strokeWidth={2} />
           <span>Load All SVGs</span>
           <span class="opacity-70">
-            ({filteredSvgs.length - 30} more)
+            ({filteredSvgs.length - maxSvgsToShow} more)
           </span>
         </div>
       </button>

src/routes/directory/[slug]/+page.svelte

@@ -52,13 +52,16 @@
 <Container>
   <Search
     bind:searchTerm
-    on:input={searchSvgs}
-    clearSearch={() => clearSearch()}
     placeholder={`Search ${filteredSvgs.length} ${category} logos...`}
+    onChange={(value) => {
+      searchParam.set(value);
+      searchTerm = value;
+      searchSvgs();
+    }}
   />
   <Grid>
     {#each filteredSvgs as svg}
-      <SvgCard svgInfo={svg} />
+      <SvgCard svgInfo={svg} {searchTerm} />
     {/each}
   </Grid>
   {#if filteredSvgs.length === 0}