docs: add UI improvements batch design (locale, datetime picker, number input, etc.)

2026-02-17 23:17:00 +02:00
parent d33159594d
commit 4a40c22515
1 changed files with 122 additions and 0 deletions
--- a/docs/plans/2026-02-17-ui-improvements-batch-design.md
+++ 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 `<input type="datetime-local">` in Entries.vue edit dialog with a composite layout:
+
+```
+[AppDatePicker for date]  [HH] : [MM]
+```
+
+- Reuse existing `AppDatePicker` for the date portion
+- Two small styled `<input>` 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).