feat(subscriptions): paying card set for several at once and kept in Firefly, quieter table

Each runway line says whether its card came from the last payment or
was set by hand; x selects bills and a sets the card for all of them,
stored in the Firefly preference ffui_bill_cards so every device sees
it. Price change moves to the subscription page, per year turns grey,
group sums follow the one-currency mode, key chips fit their buttons and
the panels no longer show a focus ring. Linking found payments is y.

src/lib/components/subscriptions/Calendar.svelte

@@ -128,7 +128,7 @@
           : "text-cladd-fg"}"
       >
         {#each row.need.totals as total, i (total.code)}
-          {i > 0 ? "+" : ""}<Money {...total} />
+          {i > 0 ? "+" : ""}<Money {...total} exact />
         {/each}
       </div>
     {/each}

src/lib/components/subscriptions/CardMenu.svelte

@@ -10,27 +10,32 @@
   import { manualCards } from "#lib/subscriptions/manual.svelte.js";
   import type { Card } from "#lib/subscriptions/runway.js";
 
-  let { billId, cards }: { billId: string; cards: Card[] } = $props();
+  let { billIds, cards }: { billIds: string[]; cards: Card[] } = $props();
 
-  const chosen = $derived(manualCards.get(billId));
+  const chosen = $derived(billIds.map((id) => manualCards.get(id)));
+  const shared = $derived(chosen.every((id) => id === chosen[0]) && chosen[0]);
 </script>
 
 <ContextMenuSub>
-  <ContextMenuSubTrigger>Paying card</ContextMenuSubTrigger>
+  <ContextMenuSubTrigger
+    >{billIds.length > 1
+      ? `Paying card for ${billIds.length}`
+      : "Paying card"}</ContextMenuSubTrigger
+  >
   <ContextMenuSubContent class="max-h-80 w-60">
     {#each cards as card (card.id)}
-      <ContextMenuItem onSelect={() => manualCards.set(billId, card.id)}>
+      <ContextMenuItem onSelect={() => manualCards.set(billIds, card.id)}>
         <span class="flex-1 truncate">{card.name}</span>
         <span class="text-[11px] text-cladd-fg-softer">{card.code}</span>
-        {#if chosen === card.id}
+        {#if shared === card.id}
           <Check class="size-3.5" />
         {/if}
       </ContextMenuItem>
     {/each}
     <ContextMenuSeparator />
     <ContextMenuItem
-      disabled={!chosen}
+      disabled={!chosen.some(Boolean)}
-      onSelect={() => manualCards.set(billId, null)}
+      onSelect={() => manualCards.set(billIds, null)}
       >Card of the last payment</ContextMenuItem
     >
   </ContextMenuSubContent>

src/lib/components/subscriptions/CardPicker.svelte

@@ -7,7 +7,7 @@
 
   const AUTO = "\u0000";
 
-  let { billId, cards }: { billId: string; cards: Card[] } = $props();
+  let { billIds, cards }: { billIds: string[]; cards: Card[] } = $props();
 
   let text = $state("");
   let input = $state<HTMLInputElement>();
@@ -31,21 +31,23 @@
     input?.focus();
   });
 
-  const cancel = () => (manualCards.picking = "");
+  const cancel = () => (manualCards.picking = null);
 </script>
 
 <SuggestInput
   aria-label="Paying card"
   class="w-56"
-  id="bill-card-{billId}"
+  id="bill-card-{billIds[0]}"
   onaccept={(item) => {
-    manualCards.set(billId, item.insert === AUTO ? null : item.insert);
+    manualCards.set(billIds, item.insert === AUTO ? null : item.insert);
     return true;
   }}
   onblur={cancel}
   oncancel={cancel}
   onsubmit={cancel}
-  placeholder="Paying card"
+  placeholder={billIds.length > 1
+    ? `Paying card for ${billIds.length}`
+    : "Paying card"}
   {suggestions}
   bind:input
   bind:value={text}

src/lib/components/subscriptions/Money.svelte

@@ -1,23 +1,52 @@
 <script lang="ts">
   import { formatNumber, toNumber } from "#lib/format.js";
+  import { display } from "#lib/money/display.svelte.js";
 
   let {
     amount,
+    code,
     symbol,
     decimals,
     approx = false,
+    converted = false,
+    exact = false,
     class: className = "",
   }: {
     amount: number | string | null | undefined;
+    code?: string | null;
     symbol?: string | null;
     decimals?: number | null;
     approx?: boolean;
+    converted?: boolean;
+    exact?: boolean;
     class?: string;
   } = $props();
+
+  const value = $derived(Math.abs(toNumber(amount)));
+  const into = $derived(
+    exact || !code || code === display.code
+      ? null
+      : display.convert(value, code)
+  );
+  const shown = $derived(
+    into === null
+      ? { amount: value, decimals, symbol }
+      : { ...display.target, amount: into }
+  );
+  const mark = $derived.by(() => {
+    if (converted || into !== null) {
+      return "≈";
+    }
+    return approx ? "~" : "";
+  });
 </script>
 
-<span class="num {className}"
+<span
+  class="num {className}"
+  title={into === null
+    ? undefined
+    : `${symbol ?? ""}${formatNumber(value, decimals ?? 2)}`}
   ><span class="font-normal text-cladd-fg-softer"
-    >{approx ? "~" : ""}{symbol ?? ""}</span
+    >{mark}{shown.symbol ?? ""}</span
-  >{formatNumber(Math.abs(toNumber(amount)), decimals ?? 2)}</span
+  >{formatNumber(shown.amount, shown.decimals ?? 2)}</span
 >

src/lib/components/subscriptions/Runway.svelte

@@ -24,6 +24,7 @@
   import Calendar from "./Calendar.svelte";
   import CardMenu from "./CardMenu.svelte";
   import Money from "./Money.svelte";
+  import Sums from "./Sums.svelte";
 
   let {
     needs,
@@ -69,8 +70,20 @@
       needs.flatMap((n) => n.dues).find((d) => d.bill.id === id)?.bill ?? null;
   }
 
+  function chosen(due: Due): string {
+    const card = byCurrency && due.card ? `${due.card.name}: ` : "";
+    if (due.manual) {
+      return `${card}set by you`;
+    }
+    if (!due.lastPaid) {
+      return "never paid";
+    }
+    const where = byCurrency ? "" : " here";
+    return `${card}last paid${where} ${formatDate(due.lastPaid, "short")}`;
+  }
+
   const segment = (on: boolean) =>
-    buttonVariants({ size: "xs", variant: on ? "default" : "outline" });
+    buttonVariants({ size: "sm", variant: on ? "default" : "outline" });
 </script>
 
 <section class="cladd-surface cladd-outline mb-3 rounded-cladd-lg">
@@ -122,7 +135,7 @@
     </p>
   {:else}
     <ContextMenu>
-      <ContextMenuTrigger {oncontextmenu}>
+      <ContextMenuTrigger class="outline-none" {oncontextmenu}>
         <div
           class="grid gap-3 p-3 [grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))]"
         >
@@ -143,7 +156,7 @@
                 <div
                   class="font-semibold text-[26px] text-cladd-fg leading-tight"
                 >
-                  <Money {...total} />
+                  <Money {...total} exact />
                 </div>
               {/each}
               {#if need.short && need.currency}
@@ -170,28 +183,33 @@
               {/if}
               <ul class="mt-2 border-cladd-outline border-t pt-1 text-[12px]">
                 {#each need.dues as due, i (`${due.bill.id}:${due.date}:${i}`)}
-                  <li
+                  <li class="py-0.5" data-bill={due.bill.id}>
-                    class="flex h-6 items-center gap-2"
+                    <div class="flex h-5 items-center gap-2">
-                    data-bill={due.bill.id}
+                      <span
-                  >
+                        class="num w-12 shrink-0 {due.overdue
-                    <span
+                          ? "text-expense"
-                      class="num w-12 shrink-0 {due.overdue
+                          : "text-cladd-fg-soft"}"
-                        ? "text-expense"
+                        >{due.overdue
-                        : "text-cladd-fg-soft"}"
+                          ? "overdue"
-                      >{due.overdue
+                          : formatDate(due.date, "short")}</span
-                        ? "overdue"
+                      >
-                        : formatDate(due.date, "short")}</span
+                      <a
+                        class="min-w-0 flex-1 truncate text-cladd-fg hover:underline"
+                        href="/subscriptions/show/{due.bill.id}"
+                        >{due.bill.attributes.name}</a
+                      >
+                      <Money
+                        {...due.pay}
+                        approx={due.approx}
+                        class="font-medium text-cladd-fg"
+                        exact
+                      />
+                    </div>
+                    <div
+                      class="truncate ps-14 text-[11px] text-cladd-fg-softer leading-4"
                     >
-                    <a
+                      {chosen(due)}
-                      class="min-w-0 flex-1 truncate text-cladd-fg hover:underline"
+                    </div>
-                      href="/subscriptions/show/{due.bill.id}"
-                      >{due.bill.attributes.name}</a
-                    >
-                    <Money
-                      {...due.pay}
-                      approx={due.approx}
-                      class="font-medium text-cladd-fg"
-                    />
                   </li>
                 {/each}
               </ul>
@@ -211,7 +229,7 @@
             >Edit</ContextMenuItem
           >
           <ContextMenuSeparator />
-          <CardMenu billId={target.id} {cards} />
+          <CardMenu billIds={[target.id]} {cards} />
         {/if}
       </ContextMenuContent>
     </ContextMenu>
@@ -225,10 +243,7 @@
         >Annual renewals in {RENEWAL_DAYS} days:</span
       >
       <span class="font-semibold text-cladd-fg"
-        >{renewals.length},
+        >{renewals.length}, <Sums inline parts={renewalTotals} /></span
-        {#each renewalTotals as total, i (total.code)}
-          {i > 0 ? " + " : ""}<Money {...total} />
-        {/each}</span
       >
       {#each renewals as due (due.bill.id)}
         <span class="text-cladd-fg-soft"

src/lib/components/subscriptions/Sums.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Money as Part } from "#lib/format.js";
+  import { display } from "#lib/money/display.svelte.js";
+  import Money from "./Money.svelte";
+
+  let { parts, inline = false }: { parts: Part[]; inline?: boolean } = $props();
+
+  const total = $derived(display.total(parts));
+</script>
+
+{#if total}
+  <Money {...total} converted={total.converted} />
+{:else if inline}
+  {#each parts as part, i (part.code ?? i)}
+    {i > 0 ? " + " : ""}<Money {...part} />
+  {/each}
+{:else}
+  {#each parts as part, i (part.code ?? i)}
+    <div><Money {...part} /></div>
+  {/each}
+{/if}

src/lib/subscriptions/manual.svelte.ts

@@ -1,39 +1,79 @@
-const PREFIX = "ffui.bill-card.";
+import { errorText } from "#lib/components/misc/action.svelte.js";
+import { session } from "#lib/session.svelte.js";
 
-function read(): Record<string, string> {
+const PREF = "ffui_bill_cards";
-  const ids: Record<string, string> = {};
+const LEGACY = "ffui.bill-card.";
-  if (typeof localStorage === "undefined") {
+
-    return ids;
+type Choices = Record<string, string>;
-  }
+
-  for (let i = 0; i < localStorage.length; i += 1) {
+function stored(): Choices {
-    const key = localStorage.key(i);
+  const data = session.prefs[PREF];
-    if (key?.startsWith(PREFIX)) {
+  return data && typeof data === "object" && !Array.isArray(data)
-      ids[key.slice(PREFIX.length)] = localStorage.getItem(key) ?? "";
+    ? (data as Choices)
-    }
+    : {};
-  }
+}
-  return ids;
+
+function legacyKeys(): string[] {
+  return Array.from(
+    { length: localStorage.length },
+    (_, i) => localStorage.key(i) ?? ""
+  ).filter((key) => key.startsWith(LEGACY));
 }
 
 class ManualCards {
-  ids = $state<Record<string, string>>(read());
+  pending = $state.raw<Choices | null>(null);
-  picking = $state("");
+  picking = $state<{ at: string; ids: string[] } | null>(null);
+  failure = $state("");
+  ids = $derived(this.pending ?? stored());
 
   get(billId: string): string | null {
     return this.ids[billId] || null;
   }
 
-  set(billId: string, cardId: string | null) {
+  async set(billIds: string[], cardId: string | null) {
-    if (cardId) {
+    const changes = Object.fromEntries(billIds.map((id) => [id, cardId ?? ""]));
-      localStorage.setItem(PREFIX + billId, cardId);
+    this.picking = null;
-    } else {
+    await this.save({ ...this.ids, ...changes });
-      localStorage.removeItem(PREFIX + billId);
+  }
+
+  async migrate() {
+    const keys = legacyKeys();
+    if (keys.length === 0) {
+      return;
     }
-    this.ids = Object.fromEntries(
+    const old = Object.fromEntries(
-      Object.entries({ ...this.ids, [billId]: cardId ?? "" }).filter(
+      keys.map((key) => [
-        ([, id]) => id
+        key.slice(LEGACY.length),
-      )
+        localStorage.getItem(key) ?? "",
+      ])
     );
-    this.picking = "";
+    if (await this.save({ ...old, ...this.ids })) {
+      for (const key of keys) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+
+  private async save(choices: Choices): Promise<boolean> {
+    const next = Object.fromEntries(
+      Object.entries(choices).filter(([, id]) => id)
+    );
+    this.pending = next;
+    this.failure = "";
+    try {
+      await session.setPreference(
+        PREF,
+        Object.keys(next).length > 0 ? next : false
+      );
+      return true;
+    } catch (e) {
+      this.failure = errorText(e);
+      return false;
+    } finally {
+      if (this.pending === next) {
+        this.pending = null;
+      }
+    }
   }
 }
 

src/lib/subscriptions/runway.ts

@@ -52,6 +52,8 @@ export interface Due {
   bill: Item<Bill>;
   card: Card | null;
   date: string;
+  lastPaid: string;
+  manual: boolean;
   native: Sum;
   overdue: boolean;
   pay: Sum;
@@ -238,6 +240,8 @@ export function dues(
         bill,
         card: who.card,
         date,
+        lastPaid: who.last?.date ?? "",
+        manual: who.manual,
         native,
         overdue,
         pay,

src/routes/subscriptions/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import Ban from "@lucide/svelte/icons/ban";
-  import Pin from "@lucide/svelte/icons/pin";
   import Plus from "@lucide/svelte/icons/plus";
   import { createQuery } from "@tanstack/svelte-query";
+  import { onMount } from "svelte";
   import { api } from "#lib/api/client.js";
   import { all, invalidate, lists } from "#lib/api/lists.js";
   import type { Bill, Item } from "#lib/api/types.js";
@@ -12,7 +12,6 @@
     LINK,
     sumByCurrency,
     swapOrder,
-    type Total,
   } from "#lib/components/groups/object-groups.js";
   import { Arm, errorText } from "#lib/components/misc/action.svelte.js";
   import PageHeader from "#lib/components/shell/PageHeader.svelte";
@@ -32,6 +31,7 @@
   import PaidStatus from "#lib/components/subscriptions/PaidStatus.svelte";
   import Runway from "#lib/components/subscriptions/Runway.svelte";
   import Strip from "#lib/components/subscriptions/Strip.svelte";
+  import Sums from "#lib/components/subscriptions/Sums.svelte";
   import { buttonVariants } from "#lib/components/ui/button/button.svelte";
   import {
     ContextMenu,
@@ -44,7 +44,8 @@
     ContextMenuTrigger,
   } from "#lib/components/ui/context-menu/index.js";
   import { addDays, today } from "#lib/dates.js";
-  import { formatDate, formatNumber, toNumber } from "#lib/format.js";
+  import { formatDate, toNumber } from "#lib/format.js";
+  import { useKeys } from "#lib/keys.svelte.js";
   import { ListNav } from "#lib/list-nav.svelte.js";
   import { period } from "#lib/period.svelte.js";
   import { oldUiUrl } from "#lib/spa-paths.js";
@@ -54,7 +55,6 @@
     byBill,
     byCard,
     byCurrency,
-    creep,
     dues,
     HORIZONS,
     type Horizon,
@@ -268,11 +268,21 @@
     say(outcome.errors.length ? `Failed: ${outcome.errors.join("; ")}` : "");
   }
 
-  const pick = (b: Item<Bill> | undefined) => {
+  const activeIds = (items: Item<Bill>[]) =>
-    if (b?.attributes.active) {
+    items.filter((b) => b.attributes.active).map((b) => b.id);
-      manualCards.picking = b.id;
+
+  function pick(targets: Item<Bill>[]) {
+    const ids = activeIds(targets);
+    const here = nav.current?.id ?? "";
+    const at = ids.includes(here) ? here : ids[0];
+    if (at) {
+      manualCards.picking = { at, ids };
     }
-  };
+  }
+
+  onMount(() => {
+    manualCards.migrate();
+  });
 
   const nav: ListNav<Item<Bill>> = new ListNav<Item<Bill>>({
     edit,
@@ -293,12 +303,12 @@
       {
         group: "Subscriptions",
         keys: "a",
-        label: "Set paying card",
+        label: "Set paying card (row or selection)",
-        run: () => pick(nav.current),
+        run: () => pick(nav.targets),
       },
       {
         group: "Subscriptions",
-        keys: "L",
+        keys: "y",
         label: "Link payments found for this subscription",
         run: () => link(nav.current),
       },
@@ -347,13 +357,21 @@
     items: () => rows,
     key: billKey,
     open: show,
+    selectable: true,
   });
-  nav.use();
+  useKeys(() =>
+    nav
+      .bindings()
+      .filter((b) => b.group !== "Selection" || !["J", "K"].includes(b.keys))
+  );
 
-  function rowTone(cursor: boolean, stale: boolean) {
+  function rowTone(cursor: boolean, selected: boolean, stale: boolean) {
     if (cursor) {
       return "bg-row-cursor";
     }
+    if (selected) {
+      return "bg-row-selected";
+    }
     return stale ? "bg-warn/10 hover:bg-row-hover" : "hover:bg-row-hover";
   }
 
@@ -386,22 +404,16 @@
   strip={stripNeeds}
 />
 
-{#snippet sums(
-  totals: Total[]
-)}
-  {#each totals as total (total.code)}
-    <div><Money {...total} /></div>
-  {/each}
-{/snippet}
-
 <Box body="p-0" title="Subscriptions">
   {#snippet tools()}
-    {#if failure}
+    {#if failure || manualCards.failure}
-      <span class="text-[12px] text-expense">{failure}</span>
+      <span class="text-[12px] text-expense"
+        >{failure || manualCards.failure}</span
+      >
     {/if}
     <span class="text-[12px] text-cladd-fg-soft">{period.label}</span>
     <button
-      class={buttonVariants({ size: "xs", variant: "outline" })}
+      class={buttonVariants({ size: "sm", variant: "outline" })}
       onclick={toggleInactive}
       type="button"
     >
@@ -420,14 +432,13 @@
     </p>
   {:else}
     <ContextMenu onOpenChange={(open) => open || (armed = false)}>
-      <ContextMenuTrigger>
+      <ContextMenuTrigger class="block outline-none">
         <div class="overflow-x-auto">
           <table class="w-full text-[13px]">
             <thead>
               <tr class="border-cladd-outline border-b text-left">
                 <th class={head}>Name</th>
                 <th class="{head} text-right">Amount</th>
-                <th class="{head} hidden lg:table-cell">Price change</th>
                 <th class={head}>Paid this period</th>
                 <th class="{head} hidden md:table-cell">Next expected match</th>
                 <th class="{head} hidden md:table-cell">Card</th>
@@ -459,9 +470,8 @@
                     >
                   </td>
                   <td class="{cell} text-right font-semibold text-cladd-fg">
-                    {@render sums(monthTotals)}
+                    <Sums parts={monthTotals} />
                   </td>
-                  <td class="hidden lg:table-cell"></td>
                   <td class="{cell} text-[12px] text-cladd-fg-soft">
                     {monthTotals.length > 0 ? "a month" : ""}
                   </td>
@@ -470,9 +480,9 @@
                   <td class="hidden 2xl:table-cell"></td>
                   <td class="hidden 2xl:table-cell"></td>
                   <td
-                    class="{cell} hidden text-right font-semibold text-cladd-fg lg:table-cell"
+                    class="{cell} hidden text-right font-semibold text-cladd-fg-soft lg:table-cell"
                   >
-                    {@render sums(perYear(section.items))}
+                    <Sums parts={perYear(section.items)} />
                   </td>
                 </tr>
                 {#each section.items as item, j (item.id)}
@@ -481,13 +491,13 @@
                   {@const ends = bill.end_date?.slice(0, 10)}
                   {@const last = lastOf(item)}
                   {@const who = payer(item)}
-                  {@const change = creep(bill, payments.get(item.id) ?? [])}
                   {@const stale = staleSince(bill, last, day)}
                   {@const extra = found.get(item.id) ?? []}
                   {@const armedHere = arm.key?.endsWith(`:${item.id}`)}
                   <tr
                     class="h-7 border-cladd-outline/60 border-t {rowTone(
                       nav.cursor === i,
+                      nav.isSelected(item),
                       stale !== null
                     )} {bill.active ? "text-cladd-fg" : "text-cladd-fg-softer"}"
                     id={nav.rowId(i)}
@@ -527,24 +537,11 @@
                           2}
                         approx={toNumber(bill.amount_max) !==
                           toNumber(bill.amount_min)}
+                        code={bill.currency_code}
                         decimals={bill.currency_decimal_places}
                         symbol={bill.currency_symbol ?? ""}
                       />
                     </td>
-                    <td class="{cell} hidden whitespace-nowrap lg:table-cell">
-                      {#if change}
-                        <span
-                          class="num {change.to > change.from
-                            ? "text-expense"
-                            : "text-income"}"
-                          >{formatNumber(change.from, change.decimals)}
-                          → {formatNumber(change.to, change.decimals)}
-                          <span class="text-cladd-fg-soft"
-                            >since {formatDate(change.since, "short")}</span
-                          ></span
-                        >
-                      {/if}
-                    </td>
                     <td class="{cell} md:whitespace-nowrap">
                       {#if stale !== null}
                         <span class="text-warn"
@@ -565,18 +562,20 @@
                       {bill.active ? formatDate(nextExpected(bill)) : ""}
                     </td>
                     <td class="{cell} hidden whitespace-nowrap md:table-cell">
-                      {#if manualCards.picking === item.id}
+                      {#if manualCards.picking?.at === item.id}
-                        <CardPicker billId={item.id} cards={cardList} />
+                        <CardPicker
+                          billIds={manualCards.picking.ids}
+                          cards={cardList}
+                        />
                       {:else if bill.active}
                         {#if who.card}
                           <span class="text-cladd-fg-soft"
                             >{who.card.name}</span
                           >
                           {#if who.manual}
-                            <Pin
+                            <span class="ms-1 text-[12px] text-cladd-fg-softer"
-                              aria-label="Set by hand"
+                              >set by you</span
-                              class="ms-0.5 inline size-3 align-[-1px] text-cladd-fg-softer"
+                            >
-                            />
                           {/if}
                         {:else}
                           <span class="text-warn">card unknown</span>
@@ -600,7 +599,9 @@
                         {months}
                       />
                     </td>
-                    <td class="{cell} hidden text-right lg:table-cell">
+                    <td
+                      class="{cell} hidden text-right text-cladd-fg-soft lg:table-cell"
+                    >
                       {#if bill.active}
                         <Money {...yearly(bill)} />
                       {/if}
@@ -608,7 +609,7 @@
                   </tr>
                   {#if extra.length > 0 || stale !== null || armedHere}
                     <tr class="border-0">
-                      <td class="px-3 pb-1.5 text-[12px]" colspan="9">
+                      <td class="px-3 pb-1.5 text-[12px]" colspan="8">
                         <div
                           class="flex w-0 min-w-full flex-wrap items-center gap-x-3 gap-y-1 ps-4"
                         >
@@ -636,7 +637,7 @@
                                 ? "it"
                                 : `all ${extra.length}`}<span
                                 class="kbd max-sm:hidden"
-                                >L</span
+                                >y</span
                               >
                             </button>
                             {#if linking[item.id]}
@@ -692,18 +693,17 @@
                     Total, active subscriptions
                   </td>
                   <td class="{cell} text-right font-semibold text-cladd-fg">
-                    {@render sums(perMonth(rows))}
+                    <Sums parts={perMonth(rows)} />
                   </td>
-                  <td class="hidden lg:table-cell"></td>
                   <td class="{cell} text-[12px] text-cladd-fg-soft">a month</td>
                   <td class="hidden md:table-cell"></td>
                   <td class="hidden md:table-cell"></td>
                   <td class="hidden 2xl:table-cell"></td>
                   <td class="hidden 2xl:table-cell"></td>
                   <td
-                    class="{cell} hidden text-right font-semibold text-cladd-fg lg:table-cell"
+                    class="{cell} hidden text-right font-semibold text-cladd-fg-soft lg:table-cell"
                   >
-                    {@render sums(perYear(rows))}
+                    <Sums parts={perYear(rows)} />
                   </td>
                 </tr>
               </tfoot>
@@ -717,7 +717,12 @@
           <ContextMenuItem onSelect={() => show(target)}>Show</ContextMenuItem>
           <ContextMenuItem onSelect={() => edit(target)}>Edit</ContextMenuItem>
           {#if target.attributes.active}
-            <CardMenu billId={target.id} cards={cardList} />
+            <CardMenu
+              billIds={nav.isSelected(target)
+                ? activeIds(nav.selection)
+                : [target.id]}
+              cards={cardList}
+            />
           {/if}
           <ContextMenuSub>
             <ContextMenuSubTrigger>Move to group</ContextMenuSubTrigger>

src/routes/subscriptions/show/[id=id]/+page.svelte

@@ -30,10 +30,16 @@
   import TransactionTable from "#lib/components/transactions/TransactionTable.svelte";
   import { buttonVariants } from "#lib/components/ui/button/button.svelte";
   import { addMonths } from "#lib/dates.js";
-  import { formatDate, formatMoney, toNumber } from "#lib/format.js";
+  import {
+    formatDate,
+    formatMoney,
+    formatNumber,
+    toNumber,
+  } from "#lib/format.js";
   import { useKeys } from "#lib/keys.svelte.js";
   import { period } from "#lib/period.svelte.js";
   import { oldUiUrl } from "#lib/spa-paths.js";
+  import { creep, toPayments } from "#lib/subscriptions/runway.js";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
 
@@ -82,6 +88,14 @@
   );
   type Payment = (typeof payments)[number];
 
+  const change = $derived(
+    bill &&
+      creep(
+        bill,
+        toPayments(transactions.data ?? []).filter((p) => p.billId === id)
+      )
+  );
+
   function averages(list: Payment[]): Total[] {
     return sumByCurrency(list).map((t) => ({
       ...t,
@@ -188,6 +202,7 @@
               <Amount
                 amount={bill.amount_min}
                 decimals={bill.currency_decimal_places}
+                exact
                 symbol={bill.currency_symbol}
                 tone="expense"
               />
@@ -195,6 +210,7 @@
               <Amount
                 amount={bill.amount_max}
                 decimals={bill.currency_decimal_places}
+                exact
                 symbol={bill.currency_symbol}
                 tone="expense"
               />. Repeats {repeats(bill)}.
@@ -216,6 +232,24 @@
               {formatDate(nextExpected(bill)) || "unknown"}
             </td>
           </tr>
+          {#if change}
+            <tr class="border-cladd-outline/60 border-b">
+              <td class={label}>Price change</td>
+              <td class={value}>
+                <span
+                  class="num {change.to > change.from
+                    ? "text-expense"
+                    : "text-income"}"
+                  >{formatNumber(change.from, change.decimals)}
+                  → {formatNumber(change.to, change.decimals)}
+                  {change.code}</span
+                >
+                <span class="text-cladd-fg-soft"
+                  >since {formatDate(change.since, "short")}</span
+                >
+              </td>
+            </tr>
+          {/if}
           <tr class="border-cladd-outline/60 border-b">
             <td class={label}>Group</td>
             <td class={value}>