whisper-money/resources/js/components/ui
Víctor Falcón 91ffeb917d
fix(amount-input): allow negative amounts via a sign toggle on iOS (#674)
## Problem

On the create/edit transaction form, the amount field uses
`inputMode="decimal"`. On iOS the numeric keypad that this triggers has
**no minus key**, so users cannot type the leading `-` the input relies
on to record a negative amount (e.g. an outgoing transfer).

## Fix

Add an opt-in `allowNegative` prop to `AmountInput` that renders a small
`+`/`−` sign-toggle button at the **start** of the field. It works with
any keyboard, so it does not depend on the OS keypad. It is enabled only
on the create-transaction amount input; budgets, balances and loan
fields keep their current UI.

- The button turns red with a `−` when the amount is negative, and shows
`+` otherwise (`aria-pressed` reflects the state).
- Toggle fires on `click` (works for both pointer and keyboard);
`onPointerDown` `preventDefault` keeps the input focused to avoid a
blur/reformat race.
- A leading `-` set via the toggle **before** typing is preserved on
focus, so the sign is not silently dropped.
- The currency symbol shifts right when the toggle is present so the two
never overlap; layout is unchanged when `allowNegative` is off.

## Refactor

Extracted the repeated `evaluateMathExpression(x) ?? parseInputValue(x)`
string→cents resolution (previously duplicated across blur, Enter, and
the new toggle) into a single `resolveCents()` helper.

## Tests

`resources/js/components/ui/amount-input.test.tsx` — the toggle is
hidden unless `allowNegative`, flips positive↔negative, and preserves
the sign when focusing after toggling an empty field.

## QA

Manually verified in the running app (create-transaction dialog): typing
an amount and toggling the sign both ways updates the value and the
button state correctly, on both prefix (USD `$`) and suffix (EUR `€`)
currency layouts.
2026-07-14 16:13:39 +00:00
..
ai-sparkle-icon.tsx feat(ai): share AI sparkle icon and mark AI-generated rules (#538) 2026-06-15 18:22:11 +02:00
alert-dialog.tsx Accounts: new pages to list, and see account details (#13) 2025-12-05 14:33:18 +01:00
alert.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
amount-display.tsx refactor(encryption): strip client-side transaction encryption (#514) 2026-06-20 16:13:26 +00:00
amount-input.test.tsx fix(amount-input): allow negative amounts via a sign toggle on iOS (#674) 2026-07-14 16:13:39 +00:00
amount-input.tsx fix(amount-input): allow negative amounts via a sign toggle on iOS (#674) 2026-07-14 16:13:39 +00:00
animated-collapse.tsx feat: expand parent categories inline in breakdowns (#486) 2026-06-04 11:19:21 +02:00
avatar.tsx chore(frontend): add orphan component detection and remove dead components (#181) 2026-03-02 12:43:27 +01:00
badge.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
breadcrumb.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
button-group.tsx Bulk actions on transactions 2025-11-10 10:02:28 +00:00
button.tsx feat(transactions): highlight new transactions since last visit (#609) 2026-06-29 16:08:14 +00:00
card.tsx feat(ui): add glowing effect to all card components (#170) 2026-03-01 10:56:59 +00:00
chart-tooltip-portal.test.tsx fix(chart): stop tooltip render loop crashing the dashboard (PHP-LARAVEL-3B) (#657) 2026-07-07 18:39:09 +00:00
chart.tsx fix(chart): stop tooltip render loop crashing the dashboard (PHP-LARAVEL-3B) (#657) 2026-07-07 18:39:09 +00:00
checkbox.tsx feat: parent/child category tree (#474) 2026-06-03 19:30:12 +02:00
collapsible.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
command.tsx fix: scroll category combobox to top while searching 2026-01-09 10:02:25 +01:00
context-menu.tsx Context menu to tables 2025-11-15 13:57:10 +01:00
create-button.tsx feat: Integrate EnableBanking as open banking provider (#106) 2026-02-12 09:09:28 +01:00
data-table-pagination.tsx feat: Spanish localization (#74) 2026-02-08 11:58:08 +01:00
data-table-view-options.tsx feat: Spanish localization (#74) 2026-02-08 11:58:08 +01:00
data-table.tsx feat(ai): manage AI consent outside onboarding with live backfill (#591) 2026-06-25 10:50:35 +02:00
dialog.tsx ui(fix): add hasKeyboard prop to dialogs 2025-12-30 07:22:19 +01:00
drawer.tsx Import CSV 2025-11-08 14:17:11 +00:00
dropdown-menu.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
glowing-effect.tsx chore(frontend): add orphan component detection and remove dead components (#181) 2026-03-02 12:43:27 +01:00
input-otp.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
input.tsx Add Budgeting Feature to Track and Manage Spending (#36) 2026-01-21 15:25:50 +01:00
kbd.tsx Adapt for mobile screen 2025-12-09 16:44:56 +01:00
label.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
multi-select.tsx feat: parent/child category tree (#474) 2026-06-03 19:30:12 +02:00
password-input.test.tsx feat(auth): show/hide toggle on password fields (#499) 2026-06-06 11:42:20 +02:00
password-input.tsx feat(auth): show/hide toggle on password fields (#499) 2026-06-06 11:42:20 +02:00
popover.tsx fix: keep iOS popovers below the notch (#282) 2026-04-13 15:19:56 +01:00
progress.tsx feat(dashboard): make top spending categories clickable with transaction filter link (#189) 2026-03-03 11:24:50 +00:00
radio-group.tsx Import CSV 2025-11-08 14:17:11 +00:00
select.tsx fix(ui): app icon visible on light wallpapers + country select overflow on mobile (#162) 2026-02-28 13:41:41 +00:00
separator.tsx Bulk actions on transactions 2025-11-10 10:02:28 +00:00
sheet.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
sidebar.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
skeleton.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
spinner.tsx feat: Spanish localization (#74) 2026-02-08 11:58:08 +01:00
stacked-area-chart.tsx Fix net worth chart config UX and color scheme issues (#250) 2026-03-31 11:19:35 +01:00
stacked-bar-chart.test.tsx fix(chart): mask stacked bar edges (#439) 2026-05-26 17:03:06 +02:00
stacked-bar-chart.tsx fix(chart): mask stacked bar edges (#439) 2026-05-26 17:03:06 +02:00
table.tsx Refactor: Transaction Table Layout and Styling Improvements (#26) 2025-12-14 12:56:05 +01:00
textarea.tsx Transactions page 2025-11-08 23:38:35 +00:00
toggle-group.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
toggle.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
tooltip.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00