feat: Reorder mobile Log Fuel fields by usage frequency and add decimal keypad #246

New Issue

egullickson · 2026-06-20T03:07:21Z

egullickson commented

2026-06-20 03:07:21 +00:00

Summary

Make the Log Fuel form faster to complete by reordering fields so the most-used inputs come first, de-emphasizing the calculated/auto-filled fields, and triggering the numeric decimal keypad on number inputs. Applies to both mobile and desktop viewports.

Current field order (verified in app at /garage Add Fuel Log)

Select Vehicle (required)
Date & Time (datetime picker, defaults to now)
MPG (read-only, "Calculated from distance / fuel amount")
Trip Distance (numeric, miles) with toggle: Trip Distance / Odometer Reading
Fuel Type (dropdown)
Fuel Grade (dropdown, options filtered by Fuel Type)
Fuel Amount (gallons, numeric)
Cost Per Gallon (numeric, drives total cost)
Location (optional, text)
Notes (optional, text)

Expected field order

Select Vehicle (required)
Mileage -- the existing Trip Distance / Odometer Reading field, REPOSITIONED ONLY. Keep the existing toggle, labels, and all underlying logic unchanged. Do not rename.
Cost Per Gallon
Fuel Amount
Fuel Type
Fuel Grade
Location
MPG (read-only, calculated -- moved below the inputs that feed it)
Notes
Date & Time (defaults to now, moved last)

Decisions captured during scoping

Mileage: reposition only. The Trip Distance / Odometer Reading toggle and its logic are NOT changed or renamed.
Fuel Type stays before Fuel Grade. Grade options are filtered by the selected type, so Grade-before-Type is intentionally NOT followed even though it appeared earlier in the rough draft. Keep the Type then Grade dependency order.
Scope: apply the new order to both mobile and desktop.
Keyboard: set the appropriate inputmode so mobile shows the decimal numeric keypad (inputmode="decimal") on the numeric fields -- Mileage (Trip Distance / Odometer), Fuel Amount, Cost Per Gallon. MPG is read-only and is excluded.

Notes / open considerations

MPG is a calculated, read-only field. Reordering it changes only display position, not behavior.
Date & Time defaults to the current timestamp; moving it last assumes users rarely backdate entries. Confirm this holds if backdating is a common workflow.
Cost Per Gallon is placed before Fuel Amount per the requested order; there is no data dependency between them.

Acceptance criteria

Log Fuel form renders fields in the expected order on mobile (320px, 768px) and desktop (1920px).
Mileage field retains the Trip Distance / Odometer Reading toggle and all existing logic; label unchanged.
Fuel Grade remains filtered by Fuel Type; selecting Type before Grade still works correctly.
Numeric fields (Mileage, Fuel Amount, Cost Per Gallon) trigger the decimal numeric keypad on mobile (inputmode="decimal").
MPG remains read-only and recalculates from distance and fuel amount.
No regression to receipt scan, validation, or total cost calculation.
lint, type-check, and tests pass green.

Out of scope

Any change to Mileage/Trip Distance/Odometer calculation logic.
New fields or removed fields.
Unit system (Imperial/Metric) changes.

## Summary Make the Log Fuel form faster to complete by reordering fields so the most-used inputs come first, de-emphasizing the calculated/auto-filled fields, and triggering the numeric decimal keypad on number inputs. Applies to both mobile and desktop viewports. ## Current field order (verified in app at /garage Add Fuel Log) 1. Select Vehicle (required) 2. Date & Time (datetime picker, defaults to now) 3. MPG (read-only, "Calculated from distance / fuel amount") 4. Trip Distance (numeric, miles) with toggle: Trip Distance / Odometer Reading 5. Fuel Type (dropdown) 6. Fuel Grade (dropdown, options filtered by Fuel Type) 7. Fuel Amount (gallons, numeric) 8. Cost Per Gallon (numeric, drives total cost) 9. Location (optional, text) 10. Notes (optional, text) ## Expected field order 1. Select Vehicle (required) 2. Mileage -- the existing Trip Distance / Odometer Reading field, REPOSITIONED ONLY. Keep the existing toggle, labels, and all underlying logic unchanged. Do not rename. 3. Cost Per Gallon 4. Fuel Amount 5. Fuel Type 6. Fuel Grade 7. Location 8. MPG (read-only, calculated -- moved below the inputs that feed it) 9. Notes 10. Date & Time (defaults to now, moved last) ## Decisions captured during scoping - Mileage: reposition only. The Trip Distance / Odometer Reading toggle and its logic are NOT changed or renamed. - Fuel Type stays before Fuel Grade. Grade options are filtered by the selected type, so Grade-before-Type is intentionally NOT followed even though it appeared earlier in the rough draft. Keep the Type then Grade dependency order. - Scope: apply the new order to both mobile and desktop. - Keyboard: set the appropriate inputmode so mobile shows the decimal numeric keypad (inputmode="decimal") on the numeric fields -- Mileage (Trip Distance / Odometer), Fuel Amount, Cost Per Gallon. MPG is read-only and is excluded. ## Notes / open considerations - MPG is a calculated, read-only field. Reordering it changes only display position, not behavior. - Date & Time defaults to the current timestamp; moving it last assumes users rarely backdate entries. Confirm this holds if backdating is a common workflow. - Cost Per Gallon is placed before Fuel Amount per the requested order; there is no data dependency between them. ## Acceptance criteria - [ ] Log Fuel form renders fields in the expected order on mobile (320px, 768px) and desktop (1920px). - [ ] Mileage field retains the Trip Distance / Odometer Reading toggle and all existing logic; label unchanged. - [ ] Fuel Grade remains filtered by Fuel Type; selecting Type before Grade still works correctly. - [ ] Numeric fields (Mileage, Fuel Amount, Cost Per Gallon) trigger the decimal numeric keypad on mobile (inputmode="decimal"). - [ ] MPG remains read-only and recalculates from distance and fuel amount. - [ ] No regression to receipt scan, validation, or total cost calculation. - [ ] lint, type-check, and tests pass green. ## Out of scope - Any change to Mileage/Trip Distance/Odometer calculation logic. - New fields or removed fields. - Unit system (Imperial/Metric) changes.

egullickson added the

labels 2026-06-20 03:07:21 +00:00

egullickson added

and removed