UI/UX: Add Adjust by Macros button to item edit modal #1462
Description
Feature Request Template
Title:
UI/UX: Add Adjust by Macros button to item edit modal
Description:
Add a new button in the item edit modal that allows users to change an item's quantity by specifying target macro grams (carbs/protein/fat) instead of grams.
Example: a user wants to reduce 20g of carbs from soda; given soda has 10g carbs per 100g, the app should calculate that corresponds to 200g of soda and reduce the item by 200g.
Motivation:
Make it easier for macro-focused users to adjust meals and hit macro targets without manual conversions, reducing friction and mistakes.
Proposed Solution:
- Add a control (button) labeled "Adjust by macros" next to the quantity field in the item edit modal.
- Clicking it toggles a macro-mode UI where the user picks a macro (carbs/protein/fat) and enters grams to add or remove.
- Calculation: gramsToChange = Math.round((targetMacroGrams * 100) / macroPer100g).
- If macroPer100g === 0 for the chosen macro, show a validation message and disable that macro option.
- Show a preview of the resulting item quantity and macro change before confirmation; clamp resulting quantity to [0, currentQuantity].
- Implement the calculation in the domain/use-case layer (not only in UI) and add unit tests for correctness and edge cases.
- Add an E2E test covering the UI flow and keyboard accessibility.
Acceptance Criteria:
- "Adjust by macros" control is visible in the item edit modal and is keyboard accessible.
- Entering a macro and grams displays a preview of the updated quantity and macro delta before confirming.
- Calculation uses the item's per-100g macro composition, handles zero-values, and applies sensible rounding.
- The app prevents reducing more than the available quantity (clamps to zero) and shows a clear message.
- Unit tests for the calculation and an E2E test for the UI flow are added.