feat(subscriptions,piggy-banks,groups): grouped subscriptions with yearly cost, inline piggy money, object groups

src/lib/components/subscriptions/PaidStatus.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { formatDate } from "#lib/format.js";
+  import { STATUS_TONE, type Status, statusText } from "./bills.js";
+
+  let { state }: { state: Status } = $props();
+</script>
+
+{#if state.kind === "paid"}
+  <span class="inline-flex flex-wrap gap-x-2">
+    {#each state.paid as paid (paid.transaction_journal_id)}
+      <a
+        class="text-income hover:underline"
+        href="/transactions/show/{paid.transaction_group_id}"
+        >✓ {formatDate(paid.date, "short")}</a
+      >
+    {/each}
+  </span>
+{:else}
+  <span class={STATUS_TONE[state.kind]}>{statusText(state)}</span>
+{/if}