Money: wish list sorted by tier then price (desc), theme-aware tier colours

src/routes/trackers/money/+page.svelte

@@ -17,6 +17,7 @@
 	import Download from 'lucide-svelte/icons/download';
 	import MoneyChart from '#lib/money-tracker/MoneyChart.svelte';
 	import QuickAdd from '#lib/money-tracker/QuickAdd.svelte';
+	import { sortWishlist, tierClass } from '#lib/money-tracker/wishlist.js';
 	import { Badge } from '#lib/components/ui/badge/index.js';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
@@ -174,6 +175,7 @@
 			count: data.wishlist.filter((item) => item.priority >= tier).length
 		}))
 	);
+	let sortedWishlist = $derived(sortWishlist(data.wishlist));
 	let unpricedWishes = $derived(
 		data.wishlist.filter((item) => item.estimatedCents === null).length
 	);
@@ -702,7 +704,7 @@
 				>
 			</div>
 			<div class="wish-tier-grid">
-				{#each wishTiers as row (row.tier)}<div>
+				{#each wishTiers as row (row.tier)}<div class={tierClass(row.tier)}>
 						<span class="eyebrow">{row.tier === 5 ? 'Tier 5' : `5–${row.tier}`}</span><strong
 							>{amount(row.value)}</strong
 						><small>{row.count} {row.count === 1 ? 'item' : 'items'}</small>
@@ -713,9 +715,9 @@
 					totals.
 				</p>{/if}
 			{#if data.wishlist.length}<ul class="item-list scroll">
-					{#each data.wishlist as row (row.id)}<li>
+					{#each sortedWishlist as row (row.id)}<li class="wish {tierClass(row.priority)}">
 							<span class="item-main"
-								><span class="tier">{row.priority}</span><span
+								><span class="tier" title="Tier {row.priority}">{row.priority}</span><span
 									><strong>{row.name}</strong>{#if row.notes}<small>{row.notes}</small>{/if}</span
 								></span
 							><strong class="item-amount"