feat: every page follows the one-currency mode

Totals, info boxes, section headers, group subtotals, shares and the per-currency charts on the dashboard, transactions, search, accounts, merchants, statement, budgets, categories, tags, groups, piggy banks, reports and the category, tag, budget and merchant pages sum into one converted amount when the mode is on; charts split by currency merge into one lane. Inputs, reconciliation and the Foreign column stay exact. Money moved to or from a debt, loan or mortgage no longer counts as income or spending in the transaction list boxes; it shows as From debts and To debts. The running balance of an incoming foreign-currency transfer shows in the account's currency.
2026-10-16 18:49:16 +00:00
1 parent 94466d9be9
commit 617a4700e2
@@ -22,7 +22,9 @@
    curOf,
    isOpen,
    type Line,
+    lineMoney,
    loadBudgetPage,
+    mergeLines,
    pace,
    projection,
    safePerDay,
@@ -45,9 +47,10 @@
  import { setParam } from "#lib/components/categories/url.js";
  import PageHeader from "#lib/components/shell/PageHeader.svelte";
  import { Button } from "#lib/components/ui/button/index.js";
-  import { formatMoney, formatRange } from "#lib/format.js";
+  import { formatRange } from "#lib/format.js";
  import { type Binding, useKeys } from "#lib/keys.svelte.js";
  import { ListNav } from "#lib/list-nav.svelte.js";
+  import { display } from "#lib/money/display.svelte.js";
  import { period } from "#lib/period.svelte.js";
  import { session } from "#lib/session.svelte.js";
  import { oldUiUrl } from "#lib/spa-paths.js";
@@ -189,6 +192,16 @@
    return [...lines, ...more];
  }

+  function shownLines(row: BudgetRow): Line[] {
+    const lines = linesOf(row);
+    const open =
+      adding?.budgetId === row.budget.id ||
+      lines.some(
+        (line) => line.key === editKey || suggestionFor(row, line) !== null
+      );
+    return open ? lines : mergeLines(lines, period.range);
+  }
+
  const pending = $derived(
    rows.flatMap((row) =>
      linesOf(row).flatMap((line) => {
@@ -371,13 +384,6 @@
        ]
      : []),
  ]);
-
-  const money = (line: Line, amount: number) =>
-    formatMoney({
-      amount,
-      decimals: line.cur.decimals,
-      symbol: line.cur.symbol,
-    });
 </script>

 <PageHeader crumbs={[{ label: "Budgets" }]} title="Budgets">
@@ -484,7 +490,7 @@
          <tbody {...props}>
            {#each rows as row, i (row.budget.id)}
              {@const extra = addingLine(row)}
-              {@const lines = linesOf(row)}
+              {@const lines = shownLines(row)}
              {#each lines as line, j (line.key)}
                {@const p = pace(line)}
                {@const safe = safePerDay(line)}
@@ -519,13 +525,17 @@
                          >
                            auto
                            <span class="num"
-                              >{formatMoney({
-                                amount:
-                                  row.budget.attributes.auto_budget_amount,
-                                decimals:
-                                  row.budget.attributes.currency_decimal_places,
-                                symbol: row.budget.attributes.currency_symbol,
-                              })}</span
+                              >{display.text([
+                                {
+                                  amount:
+                                    row.budget.attributes.auto_budget_amount,
+                                  code: row.budget.attributes.currency_code,
+                                  decimals:
+                                    row.budget.attributes
+                                      .currency_decimal_places,
+                                  symbol: row.budget.attributes.currency_symbol,
+                                },
+                              ])}</span
                            >
                            {PERIOD_WORDS[
                              row.budget.attributes.auto_budget_period ?? ""
@@ -602,6 +612,8 @@
                    {#if line !== extra}
                      <Amount
                        amount={line.spent}
+                        approx={line.approx}
+                        code={line.cur.code}
                        decimals={line.cur.decimals}
                        symbol={line.cur.symbol}
                      />
@@ -613,7 +625,7 @@
                        class="num {line.amount + line.spent < 0
                          ? "text-expense"
                          : "text-cladd-fg"}"
-                        >{money(line, line.amount + line.spent)}</span
+                        >{lineMoney(line, line.amount + line.spent)}</span
                      >
                    {/if}
                  </td>
@@ -622,7 +634,7 @@
                      {#if safe !== null}
                        <span
                          class={safe > 0 ? "text-cladd-fg" : "text-expense"}
-                          >{money(line, safe)}</span
+                          >{lineMoney(line, safe)}</span
                        >
                      {/if}
                    </td>
@@ -632,7 +644,7 @@
                          class={line.amount && ends > line.amount
                            ? "text-expense"
                            : "text-cladd-fg-soft"}
-                          >~{money(line, ends)}</span
+                          >~{lineMoney(line, ends).replace("≈", "")}</span
                        >
                      {/if}
                    </td>
@@ -652,7 +664,7 @@
                          >
                        {:else if p && p.over > 0}
                          <span class="num text-[12px] text-warn"
-                            >{money(line, p.over)}
+                            >{lineMoney(line, p.over)}
                            over pace</span
                          >
                        {:else if p}
@@ -19,7 +19,7 @@
  } from "#lib/components/categories/data.js";
  import ListMenu from "#lib/components/categories/ListMenu.svelte";
  import MoneyList from "#lib/components/categories/MoneyList.svelte";
-  import { amountIn } from "#lib/components/categories/sums.js";
+  import { amountIn, type Sum } from "#lib/components/categories/sums.js";
  import { setParam } from "#lib/components/categories/url.js";
  import PageHeader from "#lib/components/shell/PageHeader.svelte";
  import { Button } from "#lib/components/ui/button/index.js";
@@ -27,6 +27,7 @@
  import { fuzzyFilter } from "#lib/fuzzy.js";
  import { type Binding, useKeys } from "#lib/keys.svelte.js";
  import { ListNav } from "#lib/list-nav.svelte.js";
+  import { display } from "#lib/money/display.svelte.js";
  import { period } from "#lib/period.svelte.js";
  import { session } from "#lib/session.svelte.js";
  import { oldUiUrl } from "#lib/spa-paths.js";
@@ -56,17 +57,20 @@
  const primary = $derived(session.primary?.code ?? "");

  const main = $derived.by(() => {
+    if (display.active) {
+      return display.code;
+    }
    const codes = new Set(
      (query.data?.rows ?? []).flatMap((r) => r.spent.map((s) => s.code))
    );
    return codes.has(primary) ? primary : ([...codes][0] ?? primary);
  });
+  const measure = (sums: Sum[]) =>
+    display.total(sums)?.amount ?? amountIn(sums, main);
  const totalSpent = $derived(
    -(
-      (query.data?.rows ?? []).reduce(
-        (sum, r) => sum + amountIn(r.spent, main),
-        0
-      ) + amountIn(query.data?.spent ?? [], main)
+      (query.data?.rows ?? []).reduce((sum, r) => sum + measure(r.spent), 0) +
+      measure(query.data?.spent ?? [])
    )
  );
  const share = (spent: number) => (totalSpent > 0 ? -spent / totalSpent : 0);
@@ -86,11 +90,9 @@
    if (sort === "name") {
      sorted.sort((a, b) => name(a).localeCompare(name(b)));
    } else if (sort === "spent") {
-      sorted.sort((a, b) => amountIn(a.spent, main) - amountIn(b.spent, main));
+      sorted.sort((a, b) => measure(a.spent) - measure(b.spent));
    } else if (sort === "earned") {
-      sorted.sort(
-        (a, b) => amountIn(b.earned, main) - amountIn(a.earned, main)
-      );
+      sorted.sort((a, b) => measure(b.earned) - measure(a.earned));
    } else {
      sorted.sort((a, b) =>
        (b.item.attributes.last_activity ?? "").localeCompare(
@@ -280,7 +282,10 @@
              </button>
            </th>
            {#if column.key === "earned"}
-              <th class="w-[22%] px-3 font-medium">Share of {main} spending</th>
+              <th class="w-[22%] px-3 font-medium">
+                Share of {display.active ? "≈" : ""}{main}
+                spending
+              </th>
            {/if}
          {/each}
        </tr>
@@ -331,7 +336,7 @@
                <MoneyList sums={query.data?.earned ?? []} />
              </td>
              <td class="px-3">
-                {@render bar(amountIn(query.data?.spent ?? [], main))}
+                {@render bar(measure(query.data?.spent ?? []))}
              </td>
              <td class="hidden md:table-cell"></td>
            </tr>
@@ -359,7 +364,7 @@
                <td class="px-3 text-right">
                  <MoneyList sums={row.earned} />
                </td>
-                <td class="px-3">{@render bar(amountIn(row.spent, main))}</td>
+                <td class="px-3">{@render bar(measure(row.spent))}</td>
                <td
                  class="num hidden px-3 text-right text-[12px] text-cladd-fg-soft md:table-cell"
                >
@@ -32,8 +32,9 @@
    ContextMenuSeparator,
    ContextMenuTrigger,
  } from "#lib/components/ui/context-menu/index.js";
-  import { formatDate, formatMoney, percent, toNumber } from "#lib/format.js";
+  import { formatDate, percent, toNumber } from "#lib/format.js";
  import { ListNav } from "#lib/list-nav.svelte.js";
+  import { display } from "#lib/money/display.svelte.js";
  import { oldUiUrl } from "#lib/spa-paths.js";
  import { goto } from "$app/navigation";

@@ -310,21 +311,25 @@
                    <td class="{cell} {wide} text-right">
                      {#if toNumber(p.target_amount) > 0}
                        <span class="num"
-                          >{formatMoney(piggyMoney(p, p.target_amount))}</span
+                          >{display.text([
+                            piggyMoney(p, p.target_amount),
+                          ])}</span
                        >
                      {/if}
                    </td>
                    <td class="{cell} {wide} text-right">
                      {#if toNumber(p.left_to_save) > 0}
                        <span class="num"
-                          >{formatMoney(piggyMoney(p, p.left_to_save))}</span
+                          >{display.text([piggyMoney(p, p.left_to_save)])}</span
                        >
                      {/if}
                    </td>
                    <td class="{cell} hidden text-right lg:table-cell">
                      {#if p.target_date && toNumber(p.save_per_month) > 0}
                        <span class="num"
-                          >{formatMoney(piggyMoney(p, p.save_per_month))}</span
+                          >{display.text([
+                            piggyMoney(p, p.save_per_month),
+                          ])}</span
                        >
                      {/if}
                    </td>
@@ -442,7 +447,7 @@
              </td>
              <td class="{cell} {wide} text-right">
                <span class="num"
-                  >{formatMoney({ ...money, amount: targets })}</span
+                  >{display.text([{ ...money, amount: targets }])}</span
                >
              </td>
              <td class="{cell} {wide} text-right">
@@ -450,10 +455,9 @@
              </td>
              <td class="{cell} {wide} text-right">
                <span class="num"
-                  >{formatMoney({
-                    ...money,
-                    amount: Math.max(0, targets - r.earmarked),
-                  })}</span
+                  >{display.text([
+                    { ...money, amount: Math.max(0, targets - r.earmarked) },
+                  ])}</span
                >
              </td>
            </tr>
@@ -33,6 +33,7 @@
    toNumber,
  } from "#lib/format.js";
  import { useKeys } from "#lib/keys.svelte.js";
+  import { display } from "#lib/money/display.svelte.js";
  import { oldUiUrl } from "#lib/spa-paths.js";
  import { goto } from "$app/navigation";
  import { page } from "$app/state";
@@ -89,6 +90,22 @@
    e.attributes.created_at ||
    "";

+  const rate = $derived(
+    piggy?.currency_code === display.code
+      ? null
+      : display.rate(piggy?.currency_code)
+  );
+  const unit = $derived(
+    rate === null
+      ? {
+          approx: "",
+          decimals: piggy?.currency_decimal_places,
+          symbol: piggy?.currency_symbol,
+        }
+      : { ...display.target, approx: "≈" }
+  );
+  const chartMoney = (amount: number) => formatMoney({ ...unit, amount });
+
  const history = $derived(
    [...(events.data ?? [])].sort((a, b) => when(b).localeCompare(when(a)))
  );
@@ -109,8 +126,9 @@
    const [from] = [start, first, addDays(today(), -MIN_DAYS)].sort();
    byDay.set(from, 0);
    byDay.set(today(), running);
+    const scale = rate ?? 1;
    return [...byDay]
-      .map(([x, y]) => ({ x, y }))
+      .map(([x, y]) => ({ x, y: y * scale }))
      .sort((a, b) => a.x.localeCompare(b.x));
  });

@@ -200,13 +218,13 @@
        {:else}
          <LineChart
            area
-            axisFormat={(v) => formatMoney(piggyMoney(piggy, v))}
+            axisFormat={chartMoney}
            height={260}
            label="Saved over time"
            series={[
              {
                color: tones.income,
-                format: (v) => formatMoney(piggyMoney(piggy, v)),
+                format: (v) => `${unit.approx}${chartMoney(v)}`,
                key: "saved",
                label: "Saved so far",
                points,
@@ -256,7 +274,7 @@
              <td class={label}>Target amount</td>
              <td class="{value} num">
                {target > 0
-                  ? formatMoney(piggyMoney(piggy, piggy.target_amount))
+                  ? display.text([piggyMoney(piggy, piggy.target_amount)])
                  : "No target"}
              </td>
            </tr>
@@ -286,7 +304,7 @@
              <tr class={row}>
                <td class={label}>Left to save</td>
                <td class="{value} num">
-                  {formatMoney(piggyMoney(piggy, piggy.left_to_save))}
+                  {display.text([piggyMoney(piggy, piggy.left_to_save)])}
                </td>
              </tr>
            {/if}
@@ -306,7 +324,7 @@
              <tr class={row}>
                <td class={label}>Suggested monthly amount to save</td>
                <td class="{value} num">
-                  {formatMoney(piggyMoney(piggy, piggy.save_per_month))}
+                  {display.text([piggyMoney(piggy, piggy.save_per_month)])}
                </td>
              </tr>
            {/if}
@@ -381,7 +399,9 @@
                  >
                    {amount < 0 ? "Removed" : "Added"}
                    <span class="num"
-                      >{formatMoney(piggyMoney(piggy, Math.abs(amount)))}</span
+                      >{display.text([
+                        piggyMoney(piggy, Math.abs(amount)),
+                      ])}</span
                    >
                  </td>
                </tr>
@@ -147,6 +147,7 @@
            <div>
              <Amount
                amount={split.amount}
+                code={split.currency_code}
                decimals={split.currency_decimal_places}
                symbol={split.currency_symbol}
                tone={toneOf(r.type)}
@@ -258,6 +258,7 @@
                <td class={tdNum}>
                  <Amount
                    amount={tx.amount}
+                    code={tx.currency_code}
                    decimals={tx.currency_decimal_places}
                    symbol={tx.currency_symbol}
                    tone={toneOf(r.type)}
@@ -266,7 +267,9 @@
                    <span class="text-cladd-fg-soft">
                      (<Amount
                        amount={tx.foreign_amount}
+                        code={tx.foreign_currency_code}
                        decimals={tx.foreign_currency_decimal_places}
+                        exact
                        symbol={tx.foreign_currency_symbol}
                        tone="neutral"
                      />)
@@ -50,6 +50,7 @@
  import { formatDate, formatDateTime, formatMoney } from "#lib/format.js";
  import { useKeys } from "#lib/keys.svelte.js";
  import { ListNav } from "#lib/list-nav.svelte.js";
+  import { display } from "#lib/money/display.svelte.js";
  import { oldUiUrl } from "#lib/spa-paths.js";
  import { type Patch, updateGroups } from "#lib/transactions/mass.js";
  import {
@@ -168,15 +169,17 @@
      side === "destination" &&
      type === "transfer" &&
      Boolean(first.foreign_currency_code);
-    return formatMoney({
-      amount:
-        side === "destination" ? Math.max(...values) : Math.min(...values),
-      code: foreign ? first.foreign_currency_code : first.currency_code,
-      decimals: foreign
-        ? first.foreign_currency_decimal_places
-        : first.currency_decimal_places,
-      symbol: foreign ? first.foreign_currency_symbol : first.currency_symbol,
-    });
+    return display.text([
+      {
+        amount:
+          side === "destination" ? Math.max(...values) : Math.min(...values),
+        code: foreign ? first.foreign_currency_code : first.currency_code,
+        decimals: foreign
+          ? first.foreign_currency_decimal_places
+          : first.currency_decimal_places,
+        symbol: foreign ? first.foreign_currency_symbol : first.currency_symbol,
+      },
+    ]);
  }

  const balances = $derived(
@@ -203,6 +206,13 @@
    return [...sums.values()];
  });

+  const totalApprox = $derived(
+    approxOf(
+      sumByCurrency(splits),
+      foreignTotals.find((sum) => sum.code === display.code)?.code
+    )
+  );
+
  const counterSide = $derived<"source" | "destination" | null>(
    { deposit: "source", withdrawal: "destination" }[type as string] as
      | "source"
@@ -261,6 +271,14 @@
    linking = "";
  }

+  function approxOf(parts: Signed[], foreign?: string | null) {
+    const total = display.total(parts);
+    if (!total?.converted || foreign === display.code) {
+      return "";
+    }
+    return `≈${formatMoney(total, parts[0]?.tone !== "transfer")}`;
+  }
+
  function dateLabel(value: string | undefined) {
    if (!value) {
      return "";
@@ -273,10 +291,11 @@

  function billPrice(bill: Item<Bill>) {
    const a = bill.attributes;
-    const value = formatMoney(
-      billMoney(a, isRange(a) ? average(a) : Number(a.amount_min))
-    );
-    return `${isRange(a) ? "~" : ""}${value} ${repeats(a)}`;
+    const value = display.text([
+      billMoney(a, isRange(a) ? average(a) : Number(a.amount_min)),
+    ]);
+    const rough = isRange(a) && !value.startsWith("≈");
+    return `${rough ? "~" : ""}${value} ${repeats(a)}`;
  }

  async function remove() {
@@ -357,6 +376,19 @@
  >
 {/snippet}

+{#snippet approx(
+  parts: Signed[],
+  foreign?: string | null
+)}
+  {@const text = approxOf(parts, foreign)}
+  {#if text}
+    <span
+      class="num ml-1.5 text-[max(12px,0.55em)] font-medium text-cladd-fg-soft"
+      >{text}</span
+    >
+  {/if}
+{/snippet}
+
 {#snippet account(
  split: Split,
  side: "source" | "destination"
@@ -402,6 +434,7 @@
        >{formatMoney(foreign)}</span
      >
    {/if}
+    {@render approx([signedAmount(split)], foreign?.code)}
  {:else if field === "source" || field === "destination"}
    {@render account(split, field)}
  {:else if field === "category"}
@@ -713,6 +746,11 @@
                  >{formatMoney(sum)}</span
                >
              {/each}
+              {#if totalApprox}
+                <span class="num font-medium text-[15px] text-cladd-fg-soft"
+                  >{totalApprox}</span
+                >
+              {/if}
            {:else}
              {@render cell("amount", 0)}
            {/if}