Split ExpenseTable.jsx into typed sub-components

frontend/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Playwright
 test-results

frontend/e2e/breakdown.spec.js

@@ -26,3 +26,13 @@ test("marks an over-budget category in red", async ({ page }) => {
   const rentRow = page.locator("button").filter({ hasText: "Rent" });
   await expect(rentRow.locator("span").filter({ hasText: "$" }).last()).toHaveClass(/text-red-600/);
 });
+
+test("expanding 'view more' categories persists across an Expenses/Income tab switch", async ({ page }) => {
+  await page.getByText(/View \d+ more/).click();
+  await expect(page.getByText("View less")).toBeVisible();
+
+  await page.getByRole("tab", { name: "Income" }).click();
+  await page.getByRole("tab", { name: "Expenses" }).click();
+
+  await expect(page.getByText("View less")).toBeVisible();
+});

frontend/e2e/expenses.spec.js

@@ -23,6 +23,19 @@ test("opens the edit dialog pre-filled with the expense's existing details", asy
   await expect(dialog.getByRole("combobox")).toContainText("Dining");
 });
 
+test("reopening the same expense after Cancel shows its current values, not the unsaved edit", async ({ page }) => {
+  await expenseRow(page, "Gas at Shell").click();
+  const dialog = page.getByRole("dialog");
+  const amountInput = dialog.locator('input[type="number"]');
+  await expect(amountInput).toHaveValue("54.2");
+
+  await amountInput.fill("999");
+  await dialog.getByRole("button", { name: "Cancel" }).click();
+
+  await expenseRow(page, "Gas at Shell").click();
+  await expect(dialog.locator('input[type="number"]')).toHaveValue("54.2");
+});
+
 test("splitting an amount divides it and updates the input", async ({ page }) => {
   await expenseRow(page, "Dinner at Pasta House").click();
   const dialog = page.getByRole("dialog");

frontend/eslint.config.js

@@ -2,14 +2,16 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
   globalIgnores(['dist']),
   {
-    files: ['**/*.{js,jsx}'],
+    files: ['**/*.{js,jsx,ts,tsx}'],
     extends: [
       js.configs.recommended,
+      ...tseslint.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
     ],