2.4 KiB
id, title, status, assignee, created_date, updated_date, labels, dependencies, priority, ordinal
| id | title | status | assignee | created_date | updated_date | labels | dependencies | priority | ordinal |
|---|---|---|---|---|---|---|---|---|---|
| TASK-13 | Improve transaction category picker | Done | 2026-06-16 10:08 | 2026-06-23 09:45 | high | 13000 |
Description
Replace the cramped inline category Select in the transactions table with a polished popover picker that preserves row height, supports search, and groups categories.
Acceptance Criteria
- #1 Clicking a transaction category badge opens a compact popover instead of the current narrow Select.
- #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.
- #5 The project builds successfully.
Implementation Plan
- Extract category grouping/search helpers and cover them with tests
- Replace inline category Select with a stable Popover picker
- Wire async update handling and failure toast
- Verify build and relevant tests
Implementation Notes
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.
Final Summary
Shipped a reusable inline CategoryPicker popover for transaction category changes, with grouped searchable categories, truncation for long labels, async update handling, and a regression test for grouping/search behavior.