feat: filter spending posts and collapse month sections

src/ui/components/Section.test.tsx

@@ -0,0 +1,44 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+if (!GlobalRegistrator.isRegistered) GlobalRegistrator.register();
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { CollapsibleSection } from "./Section.tsx";
+
+test("sections collapse independently, preserve drafts and actions, and remember their state", () => {
+  const budgetKey = "budget2:test-expand-budget";
+  const purchasesKey = "budget2:test-expand-purchases";
+  localStorage.removeItem(budgetKey);
+  localStorage.removeItem(purchasesKey);
+  const container = document.createElement("div");
+  let root = createRoot(container);
+  const render = () => root.render(<>
+    <CollapsibleSection title="Budget" preferenceKey={budgetKey}><input aria-label="Budget draft" defaultValue="" /></CollapsibleSection>
+    <CollapsibleSection title="Purchases" preferenceKey={purchasesKey} action={<button>Add purchase</button>}><p>Purchase rows</p></CollapsibleSection>
+  </>);
+  try {
+    act(render);
+    const input = container.querySelector("input")!;
+    input.value = "Unsaved draft";
+    const collapse = container.querySelector('button[aria-label="Collapse Budget"]') as HTMLButtonElement;
+    act(() => collapse.click());
+    expect(input.closest("[hidden]")).not.toBeNull();
+    expect(container.querySelector('button[aria-label="Collapse Purchases"]')).not.toBeNull();
+    act(() => (container.querySelector('button[aria-label="Expand Budget"]') as HTMLButtonElement).click());
+    expect(input.value).toBe("Unsaved draft");
+    expect(input.closest("[hidden]")).toBeNull();
+    act(() => (container.querySelector('button[aria-label="Collapse Purchases"]') as HTMLButtonElement).click());
+    const add = [...container.querySelectorAll("button")].find(button => button.textContent === "Add purchase")!;
+    expect(add.closest("[hidden]")).toBeNull();
+    act(() => root.unmount());
+    root = createRoot(container);
+    act(render);
+    expect(container.querySelector('button[aria-label="Collapse Budget"]')).not.toBeNull();
+    expect(container.querySelector('button[aria-label="Expand Purchases"]')).not.toBeNull();
+  } finally {
+    act(() => root.unmount());
+    localStorage.removeItem(budgetKey);
+    localStorage.removeItem(purchasesKey);
+  }
+});