Add receipt dialog functionality to +page.svelte for improved user experience

src/routes/+page.svelte

@@ -1,16 +1,39 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import ReceiptForm from "./receipts/ReceiptForm.svelte";
+  import { goto } from "$app/navigation";
+
+  let receiptDialogOpen = $state(false);
+
+  function onReceiptSuccess() {
+    receiptDialogOpen = false;
+    goto("/receipts");
+  }
 </script>
 
 <main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-6 p-6">
   <h1 class="text-2xl font-semibold">Stackq</h1>
-  <p class="text-muted-foreground text-center text-sm">Receipts</p>
   <div class="flex w-full max-w-xs flex-col gap-3">
-    <a href="/receipts/new" class="block">
+    <Button class="h-12 min-h-12 w-full" variant="outline" onclick={() => (receiptDialogOpen = true)}>
-      <Button class="h-12 min-h-12 w-full" variant="outline">New receipt</Button>
+      New receipt
-    </a>
+    </Button>
     <a href="/receipts" class="block">
       <Button class="h-12 min-h-12 w-full" variant="outline">Receipts</Button>
     </a>
   </div>
 </main>
+
+<Dialog.Root bind:open={receiptDialogOpen}>
+  <Dialog.Content class="flex min-h-0 max-h-[90dvh] w-[calc(100vw-2rem)] max-w-[500px] flex-col overflow-hidden rounded-lg sm:w-full">
+    <Dialog.Header class="shrink-0">
+      <Dialog.Title>New receipt</Dialog.Title>
+      <Dialog.Description>Scan or attach a receipt image. You can add details later.</Dialog.Description>
+    </Dialog.Header>
+    <ReceiptForm
+      action="/receipts?/create"
+      submitLabel="Create"
+      onSuccess={onReceiptSuccess}
+    />
+  </Dialog.Content>
+</Dialog.Root>