---
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 -->