diff --git a/docs/plans/2026-02-17-ui-improvements-batch-design.md b/docs/plans/2026-02-17-ui-improvements-batch-design.md new file mode 100644 index 0000000..f30db83 --- /dev/null +++ b/docs/plans/2026-02-17-ui-improvements-batch-design.md @@ -0,0 +1,122 @@ +# UI Improvements Batch Design + +**Goal:** Five improvements — locale-aware formatting (worldwide), custom datetime picker, modal margin fix, default hourly rate bug fix, and custom number input component. + +--- + +## 1. Locale-Aware Formatting (Worldwide) + +### New Settings (General tab) + +**Locale** — searchable dropdown with ALL locales the browser supports. Use `Intl.supportedValuesOf('collation')` pattern to enumerate, or provide a hardcoded comprehensive list of ~100+ BCP 47 locale tags with display names. Group by region. Include a "System Default" option that reads `navigator.language`. Stored as `locale` setting. + +**Currency** — searchable dropdown with ALL ISO 4217 currency codes. Use `Intl.supportedValuesOf('currency')` to get the full list (~160 currencies). Display as "USD — US Dollar", "EUR — Euro", etc. using `Intl.DisplayNames` for native names. Stored as `currency` setting. Default: detect from locale or fall back to USD. + +### Searchable AppSelect + +The existing `AppSelect` dropdown can't handle 160+ items. Add a **search/filter** input at the top of the dropdown panel. When the user types, filter options by label match. This is a modification to `AppSelect.vue` — add an optional `searchable` prop. + +### Locale Helpers + +Create `src/utils/locale.ts` with formatting functions that read from the settings store: + +```typescript +// Uses Intl APIs with the user's chosen locale + currency +formatDate(dateString: string): string // "Feb 17, 2026" or "17 Feb 2026" etc. +formatDateTime(dateString: string): string // includes time +formatCurrency(amount: number): string // "$50.00" or "50,00 €" etc. +formatNumber(amount: number, decimals?): string // "1,234.56" or "1.234,56" +``` + +### Files to Update (replace hardcoded `en-US` and `$`) + +- **Entries.vue** — `formatDate()` function (line ~219) +- **Invoices.vue** — `formatDate()` function, all `${{ }}` currency displays (~8 occurrences) +- **Reports.vue** — `${{ }}` currency in summary stats and breakdown (~4 occurrences) +- **Timer.vue** — `formatDate()` function +- **Projects.vue** — `${{ project.hourly_rate.toFixed(2) }}/hr` display +- **Dashboard.vue** — any date/currency displays +- **AppDatePicker.vue** — month/day labels use `en-US`, should use locale + +--- + +## 2. Custom DateTime Picker for Edit Entry + +Replace `` in Entries.vue edit dialog with a composite layout: + +``` +[AppDatePicker for date] [HH] : [MM] +``` + +- Reuse existing `AppDatePicker` for the date portion +- Two small styled `` fields for hour (0-23) and minute (0-59), separated by a `:` label +- Parse `editForm.start_time` into separate date and time parts on dialog open +- Reconstruct ISO string on submit + +No new component needed — just inline the date picker + two inputs in Entries.vue. + +--- + +## 3. Modal Viewport Margin + +**Problem:** Clients.vue dialog has `max-h-[85vh]` but no guaranteed margin from viewport edges when window is very small. + +**Fix:** On ALL modal dialogs across the app, ensure the overlay container uses `p-4` (16px padding on all sides) so the modal can never touch the viewport edge. Change from `flex items-center justify-center` to `flex items-center justify-center p-4` on the overlay `div`. The modal itself keeps `max-h-[calc(100vh-2rem)]` with `overflow-y-auto`. + +**Files:** Clients.vue, Projects.vue, Entries.vue (2 dialogs), Invoices.vue (2 dialogs), Settings.vue (1 dialog) — every `fixed inset-0` modal overlay. + +--- + +## 4. Default Hourly Rate Bug Fix + +**Problem:** `Projects.vue` `openCreateDialog()` sets `formData.hourly_rate = 0` instead of reading the default from settings. + +**Fix:** Import `useSettingsStore`, read `parseFloat(settingsStore.settings.hourly_rate) || 0` in `openCreateDialog()`. Also need to ensure settings are fetched on mount (add to the `Promise.all`). + +--- + +## 5. AppNumberInput Component + +### Design + +A reusable `src/components/AppNumberInput.vue`: + +``` +[ - ] [ value display ] [ + ] +``` + +- `Minus` / `Plus` buttons styled like the UI Scale buttons in Settings (bordered, rounded-lg, icon) +- Center shows formatted value with optional prefix/suffix +- Direct text editing: clicking the value makes it editable (input field) + +### Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `modelValue` | `number` | required | v-model binding | +| `min` | `number` | `0` | Minimum value | +| `max` | `number` | `Infinity` | Maximum value | +| `step` | `number` | `1` | Increment/decrement amount | +| `precision` | `number` | `0` | Decimal places for display | +| `prefix` | `string` | `''` | Shown before value (e.g. "$") | +| `suffix` | `string` | `''` | Shown after value (e.g. "%", "min") | + +### Press-and-Hold Behavior + +On `mousedown` of +/- button: +1. Immediately fire one increment/decrement +2. After 400ms delay, start repeating every 80ms +3. On `mouseup` or `mouseleave`, clear all timers +4. Also handle `touchstart`/`touchend` for touch devices + +### Locations to Replace + +| View | Field | Props | +|------|-------|-------| +| Settings.vue | Default Hourly Rate | `prefix="$"` `step=1` `min=0` `precision=2` | +| Projects.vue | Hourly Rate (create/edit) | `prefix="$"` `step=1` `min=0` `precision=2` | +| Entries.vue | Duration (edit dialog) | `suffix="min"` `step=1` `min=1` | +| Invoices.vue | Tax Rate (create form) | `suffix="%"` `step=0.5` `min=0` `max=100` `precision=2` | +| Invoices.vue | Discount (create form) | `prefix="$"` `step=1` `min=0` `precision=2` | + +**NOT replaced:** Reminder Interval in Settings (stays as plain input per user request).