feat(budgets): top line per currency, sorting places into budgets, projections

Budgets show budgeted, left, spent and spent without a budget per
currency, safe per day and where the month ends. t sorts expenses
without a budget by place, 1 to 9 move a whole place into a budget, u
undoes, and the editor and quick entry remember the place. A suggests
empty amounts from three months. Categories get the same sorting.

src/lib/components/budgets/TopLine.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import Box from "#lib/components/Box.svelte";
+  import { formatMoney, percent } from "#lib/format.js";
+  import type { Top } from "./data.js";
+
+  const CENT = 0.005;
+
+  let { tops, onsort }: { tops: Top[]; onsort: () => void } = $props();
+
+  const free = $derived(
+    tops.some(
+      (top) =>
+        top.available !== null && Math.abs(top.available - top.budgeted) > CENT
+    )
+  );
+  const columns = $derived(
+    [
+      free && "Available",
+      "Budgeted",
+      free && "Left to budget",
+      "Left in budgets",
+      "Spent",
+      "Without a budget",
+    ].filter(Boolean) as string[]
+  );
+
+  const money = (top: Top, amount: number) =>
+    formatMoney({ amount, decimals: 0, symbol: top.cur.symbol });
+</script>
+
+<Box body="px-3 py-3">
+  <div
+    class="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-[3rem_repeat(var(--cols),minmax(0,1fr))] sm:gap-y-2"
+    style:--cols={columns.length}
+  >
+    <span class="max-sm:hidden"></span>
+    {#each columns as label (label)}
+      <span class="text-[12px] text-cladd-fg-soft max-sm:hidden">{label}</span>
+    {/each}
+    {#each tops as top, i (top.cur.code)}
+      <span
+        class="col-span-2 self-center font-semibold text-[13px] text-cladd-fg-soft sm:col-span-1 {i >
+        0
+          ? "max-sm:mt-1 max-sm:border-cladd-outline max-sm:border-t max-sm:pt-3"
+          : ""}"
+        >{top.cur.code}</span
+      >
+      {#if free}
+        {@render stat(
+          "Available",
+          top.available === null ? null : money(top, top.available)
+        )}
+      {/if}
+      {@render stat("Budgeted", top.budgeted ? money(top, top.budgeted) : null)}
+      {#if free}
+        {@const unallocated = (top.available ?? 0) - top.budgeted}
+        {@render stat(
+          "Left to budget",
+          top.available === null ? null : money(top, unallocated),
+          unallocated < 0 ? "text-expense" : ""
+        )}
+      {/if}
+      {@const left = top.budgeted - top.inBudgets}
+      {@render stat(
+        "Left in budgets",
+        top.budgeted ? money(top, left) : null,
+        left < 0 ? "text-expense" : ""
+      )}
+      {@render stat("Spent", money(top, top.spent))}
+      <div class="min-w-0">
+        <span class="text-[12px] text-cladd-fg-soft sm:hidden"
+          >Without a budget</span
+        >
+        {#if top.outside > 0}
+          <button
+            class="block text-left hover:underline"
+            onclick={onsort}
+            title="Sort them into budgets  t"
+            type="button"
+          >
+            <span
+              class="num font-semibold text-[20px] text-brand tracking-[-0.02em] sm:text-[22px]"
+              >{money(top, top.outside)}</span
+            >
+            {#if top.spent > 0}
+              <span class="num ml-1 text-[13px] text-cladd-fg-soft"
+                >{percent(top.outside / top.spent)}</span
+              >
+            {/if}
+          </button>
+        {:else}
+          <span
+            class="num block font-semibold text-[20px] text-cladd-fg-softer sm:text-[22px]"
+            >0</span
+          >
+        {/if}
+      </div>
+    {/each}
+  </div>
+</Box>
+
+{#snippet stat(
+  label: string,
+  value: string | null,
+  tone = ""
+)}
+  <div class="min-w-0">
+    <span class="text-[12px] text-cladd-fg-soft sm:hidden">{label}</span>
+    <span
+      class="num block font-semibold text-[20px] tracking-[-0.02em] sm:text-[22px] {value ===
+      null
+        ? "text-cladd-fg-softer"
+        : tone || "text-cladd-fg"}"
+      >{value ?? "0"}</span
+    >
+  </div>
+{/snippet}