Add settings page to manage hidden accounts and deleted budgets; implement data loading from the database.

src/lib/db.js

@@ -148,6 +148,24 @@ export async function getBudgets() {
     return budgets
 }
 
+export async function getDeletedBudgets() {
+    const budgets = await db`
+        select
+        budget.id as id,
+        budget.name as name,
+        budget.amount as amount,
+        budget.notes as notes
+        from budget 
+        WHERE budget.delete is true
+    `
+    if (!budgets) {
+        await createBudgetTable();
+        return await getBudgets()
+    }
+    // budgets = Result [{ name: "Walter", age: 80 }, { name: 'Murray', age: 68 }, ...]
+    return budgets
+}
+
 export async function getAccounts(age) {
   const accounts = await db`
     select

src/routes/+layout.svelte

@@ -84,6 +84,8 @@
 					</a>
 				</li>
 			{/each}
+			<li><div class="divider"></div></li>
+            <li><a href="/settings">Settings</a></li>
 		</ul>
 	</div>
 </div>

src/routes/account/[slug]/+page.svelte

@@ -1,12 +1,12 @@
 <script>
 	let { data } = $props();
     console.log(data);
-	let trans = $state(data.transactions);
+	let trans = $derived(data.transactions);
 	let notes = $state('');
 	let currentTransaction = $state(null);
-    let account = $state(data.accounts.find((a) => a.id == data.slug) || {});
-	let hide = $state(account?.hide || false);
-	let inTotal = $state(account?.in_total || false);
+    let account = $derived(data.accounts.find((a) => a.id == data.slug) || {});
+	let hide = $derived(account?.hide || false);
+	let inTotal = $derived(account?.in_total || false);
 
 	function editNotes(transaction) {
 		my_modal_3.showModal();

src/routes/settings/+page.server.js

@@ -0,0 +1,9 @@
+import { getHiddenAccounts, getDeletedBudgets } from "$lib/db";
+import { get } from "svelte/store";
+
+export async function load({ params }) {
+    let accounts = await getHiddenAccounts();
+    let budgets = await getDeletedBudgets();
+
+    return { accounts, budgets };
+}

src/routes/settings/+page.svelte

@@ -0,0 +1,34 @@
+<script>
+    let { data } = $props();
+    let accounts = $derived(data.accounts || []);
+    let budgets = $derived(data.budgets || []);
+</script>
+
+<div class="flex flex-col gap-4">
+    <h1 class="text-2xl font-bold">Settings</h1>
+    <div class="mb-4">
+        <h2 class="text-xl font-semibold">Hidden Accounts</h2>
+        {#if accounts.length > 0}
+            <ul>
+                {#each accounts as account}
+                    <li><a href={`/account/${account.id}`}>{account.name}</a></li>
+                {/each}
+            </ul>
+        {:else}
+            <p>No hidden accounts.</p>
+        {/if}
+    </div>
+
+    <div class="mb-4">
+        <h2 class="text-xl font-semibold">Deleted Budgets</h2>
+        {#if budgets.length > 0}
+            <ul>
+                {#each budgets as budget}
+                    <li><a href={`/budget/${budget.id}`}>{budget.name}</a> </li>
+                {/each}
+            </ul>
+        {:else}
+            <p>No deleted budgets.</p>
+        {/if}
+    </div>
+    </div>