Money tracker: vertical month/year gridlines on wealth chart, keep range in ?range= URL param

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

@@ -19,6 +19,8 @@
 	import QuickAdd from '#lib/money-tracker/QuickAdd.svelte';
 	import { Badge } from '#lib/components/ui/badge/index.js';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { replaceState } from '$app/navigation';
 	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';
@@ -28,6 +30,7 @@
 		clipSeries,
 		type HistoryRange,
 		historyStart,
+		parseHistoryRange,
 		monthlyCents,
 		type TimelineView,
 		utilityEstimate,
@@ -146,7 +149,15 @@
 		{ id: '3y', label: '3 years' },
 		{ id: 'all', label: 'All' }
 	];
-	let historyRange = $state<HistoryRange>('1y');
+	// The range lives in ?range= so it survives reloads; 1y is the default.
+	let historyRange = $state<HistoryRange>(parseHistoryRange(page.url.searchParams.get('range')));
+	function setHistoryRange(value: string) {
+		historyRange = parseHistoryRange(value);
+		const url = new URL(window.location.href);
+		url.searchParams.set('range', historyRange);
+		// Shallow routing: rewrites the current history entry without a load, reload or scroll.
+		replaceState(url, page.state);
+	}
 	let timeline = $derived(
 		clipSeries(
 			wealthTimeline(data.accounts, actualTransactions, projection, data.today, timelineView),
@@ -327,7 +338,7 @@
 							>{/each}</Tabs.List
 					></Tabs.Root
 				>
-				<Tabs.Root bind:value={historyRange} aria-label="History range"
+				<Tabs.Root value={historyRange} onValueChange={setHistoryRange} aria-label="History range"
 					><Tabs.List
 						>{#each historyRanges as item (item.id)}<Tabs.Trigger value={item.id}
 								>{item.label}</Tabs.Trigger
@@ -339,6 +350,7 @@
 				series={timeline}
 				title="Actual and projected wealth over time"
 				marker={{ date: data.today, label: 'Today' }}
+				grid={historyRange === 'all' ? 'years' : 'months'}
 			/>
 			<div class="projection-totals" aria-label="Projected balances at end of period">
 				<div>