ui changes and cs prices

src/routes/projects/money-tracker/+page.svelte

@@ -8,6 +8,9 @@
 	import Download from 'lucide-svelte/icons/download';
 	import X from 'lucide-svelte/icons/x';
 	import MoneyChart from '$lib/money-tracker/MoneyChart.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import {
 		accountBalances,
 		accountColor,
@@ -233,11 +236,9 @@
 			<h1>Money tracker</h1>
 		</div>
 		<div class="header-actions">
-			<button class="button secondary" onclick={() => open('import')}
-				><Upload size={16} /> Import CSV</button
-			><button class="button primary" onclick={() => open('transaction')}
-				><Plus size={16} /> Add transaction</button
-			>
+			<Button variant="outline" onclick={() => open('import')}
+				><Upload size={16} /> Import CSV</Button
+			><Button onclick={() => open('transaction')}><Plus size={16} /> Add transaction</Button>
 		</div>
 	</header>
 
@@ -277,20 +278,19 @@
 					<h2>Wealth over time</h2>
 					<p>Actual balances through today, then the projection.</p>
 				</div>
-				<button
-					class="button secondary"
+				<Button
+					variant="outline"
 					onclick={() => open('projectionSettings', data.projectionSettings ?? {})}
-					>Edit projection</button
+					>Edit projection</Button
 				>
 			</div>
-			<div class="subtabs" role="group" aria-label="Chart view">
-				{#each timelineViews as item (item.id)}<button
-						type="button"
-						class:current={timelineView === item.id}
-						aria-pressed={timelineView === item.id}
-						onclick={() => (timelineView = item.id)}>{item.label}</button
-					>{/each}
-			</div>
+			<Tabs.Root bind:value={timelineView} class="mb-3"
+				><Tabs.List
+					>{#each timelineViews as item (item.id)}<Tabs.Trigger value={item.id}
+							>{item.label}</Tabs.Trigger
+						>{/each}</Tabs.List
+				></Tabs.Root
+			>
 			<MoneyChart
 				series={timeline}
 				title="Actual and projected wealth over time"
@@ -367,12 +367,12 @@
 					<h2>Transactions</h2>
 					<p>{filtered.length} of {data.transactions.length} entries</p>
 				</div>
-				<button class="button secondary" onclick={exportCsv} disabled={!data.transactions.length}
-					><Download size={16} /> Export CSV</button
+				<Button variant="outline" onclick={exportCsv} disabled={!data.transactions.length}
+					><Download size={16} /> Export CSV</Button
 				>
 			</div>
 			<div class="filters">
-				<label class="sr-only" for="transaction-search">Search transactions</label><input
+				<label class="sr-only" for="transaction-search">Search transactions</label><Input
 					id="transaction-search"
 					type="search"
 					placeholder="Search descriptions"