feat: refine month totals and recurring purchase entry

src/ui/components/MonthPieShowcase.test.tsx

@@ -10,6 +10,36 @@ import { monthView } from "../../domain/views.ts";
 import { store } from "../../store/index.ts";
 import { MonthPieShowcase } from "./MonthPieShowcase.tsx";
 
+test("hiding the breakdown stays remembered after remount and leaves its control reachable", () => {
+  localStorage.removeItem("budget2:show-month-breakdown");
+  const data = createSeedDataset("2026-09");
+  const original = { get: store.get, subscribe: store.subscribe };
+  store.get = () => data;
+  store.subscribe = () => () => {};
+  const container = document.createElement("div");
+  let root = createRoot(container);
+  const render = () => root.render(<MonthPieShowcase view={monthView(data, "2026-09")} baseCurrency="DKK" />);
+  try {
+    act(render);
+    const toggle = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(toggle).not.toBeNull();
+    expect(toggle.checked).toBe(true);
+    act(() => toggle.click());
+    expect(container.querySelector('svg[role="img"]')).toBeNull();
+    act(() => root.unmount());
+    root = createRoot(container);
+    act(render);
+    const remembered = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(remembered.checked).toBe(false);
+    act(() => remembered.click());
+    expect(container.querySelector('svg[role="img"]')).not.toBeNull();
+  } finally {
+    act(() => root.unmount());
+    Object.assign(store, original);
+    localStorage.removeItem("budget2:show-month-breakdown");
+  }
+});
+
 test("pie showcase switches between spending and allocations", () => {
   const data = createSeedDataset("2026-09");
   data.posts[0]!.rules = [{ from: "2026-09", rule: { kind: "fixed", amount: { amount: 250, currency: "DKK" } } }];