Add search functionality to accounts, receipts, and transactions pages with dynamic filtering. Update UI elements for better responsiveness and user experience.

src/routes/receipts/+page.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
+  import { Input } from "$lib/components/ui/input";
 
   let { data }: { data: { receipts: { id: string }[] } } = $props();
+  let searchQuery = $state("");
+
   const receipts = $derived(data?.receipts ?? []);
+  const filteredReceipts = $derived(
+    (() => {
+      const q = searchQuery.trim().toLowerCase();
+      if (!q) return receipts;
+      return receipts.filter((r) => r.id.toLowerCase().includes(q));
+    })()
+  );
 </script>
 
 <svelte:head>
@@ -12,20 +22,37 @@
 
 <main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
   <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 min-w-0">
       <a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a>
-      <h1 class="text-xl font-semibold sm:text-2xl">Receipts</h1>
+      <h1 class="text-xl font-semibold truncate sm:text-2xl">Receipts</h1>
+    </div>
+    <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-2">
+      <div class="w-full sm:w-64 sm:min-w-0">
+        <Input
+          type="search"
+          placeholder="Search receipts…"
+          bind:value={searchQuery}
+          class="h-11 w-full sm:h-9"
+        />
+      </div>
+      <span class="text-muted-foreground text-sm shrink-0">
+        {filteredReceipts.length}{filteredReceipts.length !== receipts.length ? ` of ${receipts.length}` : ""} receipts
+      </span>
+      <a href="/receipts/new" class="block shrink-0">
+        <Button class="w-full sm:w-auto min-h-11">New receipt</Button>
+      </a>
     </div>
-    <a href="/receipts/new" class="block shrink-0">
-      <Button class="w-full sm:w-auto">New receipt</Button>
-    </a>
   </div>
 
-  {#if receipts.length === 0}
+  {#if filteredReceipts.length === 0}
     <Card>
       <CardContent class="flex flex-col items-center justify-center gap-4 py-12">
-        <p class="text-muted-foreground text-center text-sm">No receipts yet.</p>
-        <p class="text-muted-foreground text-center text-xs">Create a receipt to get started.</p>
+        <p class="text-muted-foreground text-center text-sm">
+          {receipts.length === 0 ? "No receipts yet." : "No receipts match your search."}
+        </p>
+        <p class="text-muted-foreground text-center text-xs">
+          {receipts.length === 0 ? "Create a receipt to get started." : "Try a different search."}
+        </p>
         <a href="/receipts/new">
           <Button variant="outline">New receipt</Button>
         </a>
@@ -36,7 +63,7 @@
     </Card>
   {:else}
     <div class="flex flex-col gap-2">
-      {#each receipts as receipt (receipt.id)}
+      {#each filteredReceipts as receipt (receipt.id)}
         <Card>
           <CardContent class="p-4">
             <a href="/receipts/{receipt.id}" class="font-medium hover:underline">Receipt {receipt.id}</a>