feat: show every amount in one currency, chosen in the header, $ toggles it

A selector in the header and the palette's Currency group pick the
currency, the primary one by default; the choice persists between pages
and $ switches it on and off. Rates come from Firefly's exchange rates,
then from the owner's own transactions with a foreign amount, walking
through other currencies when there is no direct pair. Amount converts
with a ≈ and keeps the original in its title; Money sums several
currencies into one converted amount.

src/lib/components/Money.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Money } from "#lib/format.js";
+  import { display } from "#lib/money/display.svelte.js";
+  import Amount, { type Tone } from "./Amount.svelte";
+
+  let {
+    parts,
+    tone = "auto",
+    signed = false,
+    inline = false,
+    class: className = "",
+  }: {
+    parts: Money[];
+    tone?: Tone;
+    signed?: boolean;
+    inline?: boolean;
+    class?: string;
+  } = $props();
+
+  const total = $derived(display.total(parts));
+</script>
+
+{#if total}
+  <Amount
+    amount={total.amount}
+    approx={total.converted}
+    class={className}
+    code={total.code}
+    decimals={total.decimals}
+    {signed}
+    symbol={total.symbol}
+    {tone}
+  />
+{:else if inline}
+  {#each parts as part, index (part.code ?? index)}
+    {#if index > 0}
+      <span class="text-cladd-fg-softer"> + </span>
+    {/if}
+    <Amount {...part} class={className} {signed} {tone} />
+  {/each}
+{:else}
+  {#each parts as part, index (part.code ?? index)}
+    <div><Amount {...part} class={className} {signed} {tone} /></div>
+  {/each}
+{/if}