Improve Edit Transaction UI: Replace inline form with modal #11
Description
Summary
The current Edit Transaction form renders inline at the bottom of the screen when editing a transaction. This creates a cluttered UI and requires scrolling. A modal-based approach would provide a cleaner, more focused editing experience.
Current Behavior
When clicking the edit button (pencil icon) on a transaction:
- The edit form appears at the bottom of the same screen
- This pushes content down and creates duplicate Cancel/Save buttons
- The UI feels cluttered with both the transaction list and edit form visible simultaneously
Proposed Improvement
Replace the inline edit form with a modal dialog:
- Clicking the edit button opens a modal overlay
- The modal contains the Edit Transaction form
- Modal includes Cancel and Save buttons
- Closing the modal returns focus to the transaction list
Benefits
- Cleaner UI: Separates viewing and editing contexts
- Better focus: User attention is directed to the editing task
- Consistent UX: Modal pattern is common for edit operations in mobile apps
- Reduced clutter: Removes duplicate button sets visible in current implementation
- Improved mobile experience: Better use of screen real estate
Implementation Notes
- Consider using existing modal/dialog component from the UI library
- Ensure proper focus management for accessibility
- Add smooth open/close animations for better UX
- Handle backdrop click to close (optional, with confirmation if changes exist)
Labels
enhancement, ui/ux