Enhance routing in SvelteKit project by adding new routes for accounts and transactions, updating existing route parameters, and improving type definitions. Refactor component imports and optimize asset handling for better performance and maintainability.

src/routes/HomeWithDialog.svelte

@@ -36,8 +36,8 @@
 
   <div class="flex w-full max-w-xs flex-col gap-3">
     <Button class="h-16 min-h-16 w-full" onclick={() => (scanDialogOpen = true)}>Scan</Button>
-    <a href="/transactions" class="block">
-      <Button class="h-16 min-h-16 w-full" variant="outline">New Transaction</Button>
+    <a href="/transactions/new" class="block">
+      <Button class="h-16 min-h-16 w-full" variant="outline">New transaction</Button>
     </a>
     <a href="/receipts/new" class="block">
       <Button class="h-16 min-h-16 w-full" variant="outline">New receipt</Button>

src/routes/accounts/+page.server.ts

@@ -0,0 +1,5 @@
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+  return { accounts: [] as { id: string }[] };
+};

src/routes/accounts/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
+
+  let { data }: { data: { accounts: { id: string }[] } } = $props();
+  const accounts = $derived(data?.accounts ?? []);
 </script>
 
 <svelte:head>
@@ -8,18 +11,38 @@
 </svelte:head>
 
 <main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
-  <div class="flex items-center gap-3">
-    <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">Accounts</h1>
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div class="flex items-center gap-3">
+      <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">Accounts</h1>
+    </div>
+    <a href="/accounts/new" class="block shrink-0">
+      <Button class="w-full sm:w-auto">New account</Button>
+    </a>
   </div>
 
-  <Card>
-    <CardContent class="flex flex-col items-center justify-center gap-4 py-12">
-      <p class="text-muted-foreground text-center text-sm">No accounts yet.</p>
-      <p class="text-muted-foreground text-center text-xs">Accounts will appear here once this feature is available.</p>
-      <a href="/">
-        <Button variant="outline">Back to home</Button>
-      </a>
-    </CardContent>
-  </Card>
+  {#if accounts.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 accounts yet.</p>
+        <p class="text-muted-foreground text-center text-xs">Create an account to get started.</p>
+        <a href="/accounts/new">
+          <Button variant="outline">New account</Button>
+        </a>
+        <a href="/">
+          <Button variant="ghost">Back to home</Button>
+        </a>
+      </CardContent>
+    </Card>
+  {:else}
+    <div class="flex flex-col gap-2">
+      {#each accounts as account (account.id)}
+        <Card>
+          <CardContent class="p-4">
+            <a href="/accounts/{account.id}" class="font-medium hover:underline">Account {account.id}</a>
+          </CardContent>
+        </Card>
+      {/each}
+    </div>
+  {/if}
 </main>

src/routes/accounts/[id]/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent } from "$lib/components/ui/card";
+
+  let { params }: { params: { id: string } } = $props();
+</script>
+
+<svelte:head>
+  <title>Account – Stackq</title>
+</svelte:head>
+
+<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
+  <div class="flex items-center gap-3">
+    <a href="/accounts" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to accounts">Back</a>
+    <h1 class="text-xl font-semibold sm:text-2xl">Account</h1>
+  </div>
+
+  <Card>
+    <CardContent class="flex flex-col gap-4 py-8">
+      <p class="text-muted-foreground text-sm">Account {params.id}</p>
+      <a href="/accounts">
+        <Button variant="outline">Back to accounts</Button>
+      </a>
+    </CardContent>
+  </Card>
+</main>

src/routes/accounts/new/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent } from "$lib/components/ui/card";
+</script>
+
+<svelte:head>
+  <title>New account – Stackq</title>
+</svelte:head>
+
+<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
+  <div class="flex items-center gap-3">
+    <a href="/accounts" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to accounts">Back</a>
+    <h1 class="text-xl font-semibold sm:text-2xl">New account</h1>
+  </div>
+
+  <Card>
+    <CardContent class="flex flex-col gap-4 py-8">
+      <p class="text-muted-foreground text-center text-sm">Account creation will be available here.</p>
+      <div class="flex justify-center gap-2">
+        <a href="/accounts">
+          <Button variant="outline">Back to accounts</Button>
+        </a>
+        <a href="/">
+          <Button variant="ghost">Home</Button>
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</main>

src/routes/transactions/+page.server.ts

@@ -0,0 +1,5 @@
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+  return { transactions: [] as { id: string }[] };
+};

src/routes/transactions/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
+
+  let { data }: { data: { transactions: { id: string }[] } } = $props();
+  const transactions = $derived(data?.transactions ?? []);
 </script>
 
 <svelte:head>
@@ -8,18 +11,38 @@
 </svelte:head>
 
 <main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
-  <div class="flex items-center gap-3">
-    <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">Transactions</h1>
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <div class="flex items-center gap-3">
+      <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">Transactions</h1>
+    </div>
+    <a href="/transactions/new" class="block shrink-0">
+      <Button class="w-full sm:w-auto">New transaction</Button>
+    </a>
   </div>
 
-  <Card>
-    <CardContent class="flex flex-col items-center justify-center gap-4 py-12">
-      <p class="text-muted-foreground text-center text-sm">No transactions yet.</p>
-      <p class="text-muted-foreground text-center text-xs">Transactions will appear here once this feature is available.</p>
-      <a href="/">
-        <Button variant="outline">Back to home</Button>
-      </a>
-    </CardContent>
-  </Card>
+  {#if transactions.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 transactions yet.</p>
+        <p class="text-muted-foreground text-center text-xs">Create a transaction to get started.</p>
+        <a href="/transactions/new">
+          <Button variant="outline">New transaction</Button>
+        </a>
+        <a href="/">
+          <Button variant="ghost">Back to home</Button>
+        </a>
+      </CardContent>
+    </Card>
+  {:else}
+    <div class="flex flex-col gap-2">
+      {#each transactions as tx (tx.id)}
+        <Card>
+          <CardContent class="p-4">
+            <a href="/transactions/{tx.id}" class="font-medium hover:underline">Transaction {tx.id}</a>
+          </CardContent>
+        </Card>
+      {/each}
+    </div>
+  {/if}
 </main>

src/routes/transactions/[id]/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent } from "$lib/components/ui/card";
+
+  let { params }: { params: { id: string } } = $props();
+</script>
+
+<svelte:head>
+  <title>Transaction – Stackq</title>
+</svelte:head>
+
+<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
+  <div class="flex items-center gap-3">
+    <a href="/transactions" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to transactions">Back</a>
+    <h1 class="text-xl font-semibold sm:text-2xl">Transaction</h1>
+  </div>
+
+  <Card>
+    <CardContent class="flex flex-col gap-4 py-8">
+      <p class="text-muted-foreground text-sm">Transaction {params.id}</p>
+      <a href="/transactions">
+        <Button variant="outline">Back to transactions</Button>
+      </a>
+    </CardContent>
+  </Card>
+</main>

src/routes/transactions/new/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Card, CardContent } from "$lib/components/ui/card";
+</script>
+
+<svelte:head>
+  <title>New transaction – Stackq</title>
+</svelte:head>
+
+<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
+  <div class="flex items-center gap-3">
+    <a href="/transactions" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to transactions">Back</a>
+    <h1 class="text-xl font-semibold sm:text-2xl">New transaction</h1>
+  </div>
+
+  <Card>
+    <CardContent class="flex flex-col gap-4 py-8">
+      <p class="text-muted-foreground text-center text-sm">Transaction creation will be available here.</p>
+      <div class="flex justify-center gap-2">
+        <a href="/transactions">
+          <Button variant="outline">Back to transactions</Button>
+        </a>
+        <a href="/">
+          <Button variant="ghost">Home</Button>
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</main>