Reuse CategoryPicker in transactions page

backlog/tasks/task-13 - Improve-transaction-category-picker.md

@@ -0,0 +1,47 @@
+---
+id: TASK-13
+title: Improve transaction category picker
+status: In Progress
+assignee: []
+created_date: '2026-06-16 10:08'
+updated_date: '2026-06-16 10:15'
+labels: []
+dependencies: []
+priority: high
+ordinal: 13000
+---
+
+## Description
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+Replace the cramped inline category Select in the transactions table with a polished popover picker that preserves row height, supports search, and groups categories.
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+- [ ] #1 Clicking a transaction category badge opens a compact popover instead of the current narrow Select.
+- [x] #2 The picker supports client-side category search and groups income, fixed expense, and variable expense categories.
+- [ ] #3 Long category names are truncated cleanly without increasing table row height.
+- [ ] #4 Selecting a category updates the transaction, closes the popover, and reports failures with a toast.
+- [x] #5 The project builds successfully.
+<!-- AC:END -->
+
+## Implementation Plan
+
+<!-- SECTION:PLAN:BEGIN -->
+1. Extract category grouping/search helpers and cover them with tests
+2. Replace inline category Select with a stable Popover picker
+3. Wire async update handling and failure toast
+4. Verify build and relevant tests
+<!-- SECTION:PLAN:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+Implemented CategoryPicker popover with search, grouped category options, selected-state checkmark, truncation, and async update error toast.
+Verification: categoryPickerModel test passes; npm run build passes.
+Lint: changed files pass with one existing TanStack React Compiler warning in TransactionsPage; full npm run lint still fails on pre-existing unrelated project errors.
+Manual browser verification is still open because the in-app browser redirects to /login without the user session.
+
+Final verification: npx vitest run src/components/transactions/categoryPickerModel.test.ts passed (2 tests); npm run build passed; targeted eslint on changed files exited 0 with the existing TanStack useReactTable compiler warning only.
+<!-- SECTION:NOTES:END -->