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/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>