Add front-end recipe searching

src/routes/dashboard/+page.svelte

@@ -5,6 +5,12 @@
 
     let {data} = $props();
     let uploadInput = $state();
+    let query = $state("");
+    let recipes = $derived.by(()=>{
+        const term = query.trim().toLowerCase();
+        if(!term) return data.recipes;
+        return data.recipes.filter((recipe)=>recipe.name.toLowerCase().includes(term));
+    });
 
     const uploadRecipe = async ()=>{
         const file = uploadInput.files[0];
@@ -53,14 +59,28 @@
         </div>
     </div>
 
+    <input
+        class="search"
+        type="search"
+        placeholder="Search recipes"
+        aria-label="Search recipes"
+        bind:value={query}
+    >
+
     <div class="recipes">
-        {#each data.recipes as r}
+        {#each recipes as r}
             <a href="/recipe/{r.id}" class="recipe">
                 <p class="name">{r.name}</p>
                 <p class="date">{r.updatedAt ? new Date(r.updatedAt).toLocaleDateString() : ""}</p>
             </a>
         {:else}
-            <p class="empty">No recipes yet. Create your first one.</p>
+            <p class="empty">
+                {#if data.recipes.length === 0}
+                    No recipes yet. Create your first one.
+                {:else}
+                    No recipes match your search.
+                {/if}
+            </p>
         {/each}
     </div>
 </div>
@@ -194,6 +214,23 @@
         background: var(--color-surface-alt);
     }
 
+    .search{
+        width: 100%;
+        margin: 0 0 1rem;
+        border: 1px solid var(--color-border);
+        outline: none;
+        background: var(--color-surface);
+        color: var(--color-text);
+        border-radius: 10px;
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+        font-family: inherit;
+    }
+
+    .search:focus{
+        border-color: var(--color-primary);
+    }
+
     .recipes{
         display: flex;
         flex-direction: column;
@@ -265,7 +302,8 @@
     @media (pointer: coarse){
         .shareToggle,
         .shareMenu button,
-        .shareMenu a{
+        .shareMenu a,
+        .search{
             min-height: 44px;
         }
     }