```
**Step 2: Verify it builds**
Run: `npm run build`
Expected: builds with no errors
**Step 3: Commit**
```bash
git add src/components/AppNumberInput.vue
git commit -m "feat: add AppNumberInput component with press-and-hold repeat"
```
---
### Task 6: Replace all native number inputs with AppNumberInput
**Files:**
- Modify: `src/views/Settings.vue` (hourly rate)
- Modify: `src/views/Projects.vue` (hourly rate in dialog)
- Modify: `src/views/Entries.vue` (duration in edit dialog)
- Modify: `src/views/Invoices.vue` (tax rate, discount)
**Step 1: Replace in each file**
Import in each file:
```typescript
import AppNumberInput from '../components/AppNumberInput.vue'
```
**Settings.vue — Default Hourly Rate:**
Replace the `` for hourly rate with:
```html
```
Remove the `$` span that was before the input.
**Projects.vue — Hourly Rate in dialog:**
Replace the `` for hourly rate with:
```html
```
**Entries.vue — Duration in edit dialog:**
Replace the `` for duration with:
```html
```
Note: `durationMinutes` is already a computed with getter/setter, and `AppNumberInput` emits numbers, so this works directly.
**Invoices.vue — Tax Rate and Discount:**
Replace tax rate input:
```html
```
Replace discount input:
```html
```
**Step 2: Verify it builds**
Run: `npm run build`
Expected: builds with no errors
**Step 3: Commit**
```bash
git add src/views/Settings.vue src/views/Projects.vue src/views/Entries.vue src/views/Invoices.vue
git commit -m "feat: replace native number inputs with AppNumberInput across all views"
```
---
### Task 7: Custom datetime picker for Entries edit dialog
**Files:**
- Modify: `src/views/Entries.vue`
**Step 1: Replace datetime-local input with AppDatePicker + time inputs**
In the edit dialog, replace the `` block with:
```html
:
```
Add new refs for the split date/time:
```typescript
const editDate = ref('')
const editHour = ref(0)
const editMinute = ref(0)
```
In `openEditDialog`, split the start_time:
```typescript
function openEditDialog(entry: TimeEntry) {
editingEntry.value = entry
editForm.id = entry.id || 0
editForm.project_id = entry.project_id
editForm.description = entry.description || ''
editForm.duration = entry.duration
// Split start_time into date and time parts
const dt = new Date(entry.start_time)
const y = dt.getFullYear()
const m = String(dt.getMonth() + 1).padStart(2, '0')
const d = String(dt.getDate()).padStart(2, '0')
editDate.value = `${y}-${m}-${d}`
editHour.value = dt.getHours()
editMinute.value = dt.getMinutes()
showEditDialog.value = true
}
```
In `handleEdit`, reconstruct the start_time:
```typescript
async function handleEdit() {
if (editingEntry.value) {
const [y, m, d] = editDate.value.split('-').map(Number)
const start = new Date(y, m - 1, d, editHour.value, editMinute.value)
const end = new Date(start.getTime() + editForm.duration * 1000)
const updatedEntry: TimeEntry = {
id: editForm.id,
project_id: editForm.project_id,
description: editForm.description || undefined,
start_time: start.toISOString(),
end_time: end.toISOString(),
duration: editForm.duration
}
await entriesStore.updateEntry(updatedEntry)
closeEditDialog()
}
}
```
Remove the old `editForm.start_time` usage since we now use `editDate`/`editHour`/`editMinute`.
**Step 2: Verify it builds**
Run: `npm run build`
Expected: builds with no errors
**Step 3: Commit**
```bash
git add src/views/Entries.vue
git commit -m "feat: replace native datetime-local with custom date picker + time inputs"
```
---
### Task 8: Fix modal viewport margins across all dialogs
**Files:**
- Modify: `src/views/Clients.vue`
- Modify: `src/views/Projects.vue`
- Modify: `src/views/Entries.vue`
- Modify: `src/views/Invoices.vue`
- Modify: `src/views/Settings.vue`
**Step 1: Add padding to all modal overlays**
In every file, find each `class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"` and add `p-4` to the class list:
```
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
```
Then on each modal content `div` inside, ensure `max-h` accounts for the padding. Replace any `max-h-[85vh]` with `max-h-[calc(100vh-2rem)]`. For modals that don't have a `max-h` yet, add `max-h-[calc(100vh-2rem)] overflow-y-auto`.
**Inventory of dialogs to update:**
1. **Clients.vue** — Create/Edit dialog (already has `max-h-[85vh]`), Delete dialog
2. **Projects.vue** — Create/Edit dialog, Delete dialog
3. **Entries.vue** — Edit dialog, Delete dialog
4. **Invoices.vue** — Detail dialog (already has `max-h-[90vh]`), Delete dialog
5. **Settings.vue** — Clear Data dialog
For each: add `p-4` to the overlay, ensure the inner modal has `max-h-[calc(100vh-2rem)] overflow-y-auto`. Remove the separate `mx-4` from the inner modal since the overlay `p-4` now provides horizontal spacing too.
**Step 2: Verify it builds**
Run: `npm run build`
Expected: builds with no errors
**Step 3: Commit**
```bash
git add src/views/
git commit -m "fix: add viewport margin to all modal dialogs"
```
---
### Task 9: Fix default hourly rate in Projects.vue
**Files:**
- Modify: `src/views/Projects.vue`
**Step 1: Read default hourly rate from settings**
Import the settings store:
```typescript
import { useSettingsStore } from '../stores/settings'
```
Add to the setup:
```typescript
const settingsStore = useSettingsStore()
```
In `openCreateDialog()`, replace `formData.hourly_rate = 0` with:
```typescript
formData.hourly_rate = parseFloat(settingsStore.settings.hourly_rate) || 0
```
In `onMounted`, add `settingsStore.fetchSettings()` to the `Promise.all`:
```typescript
onMounted(async () => {
await Promise.all([
projectsStore.fetchProjects(),
clientsStore.fetchClients(),
settingsStore.fetchSettings()
])
})
```
**Step 2: Verify it builds**
Run: `npm run build`
Expected: builds with no errors
**Step 3: Commit**
```bash
git add src/views/Projects.vue
git commit -m "fix: apply default hourly rate from settings when creating new projects"
```
---
### Task 10: Build and verify end-to-end
**Step 1: Full build check**
Run: `npm run build`
Expected: builds with no errors
**Step 2: Verify no regressions**
Run greps to confirm:
- No remaining `'en-US'` hardcoded locale strings in views: `grep -r "en-US" src/views/`
- No remaining `${{` hardcoded currency in views: `grep -rn '\${{' src/views/`
- No remaining `type="number"` in views (except reminder interval in Settings): `grep -rn 'type="number"' src/views/`
- No remaining `type="datetime-local"`: `grep -rn 'datetime-local' src/views/`
**Step 3: Final commit if any fixups needed**
```bash
git add -A
git commit -m "feat: complete UI improvements batch — locale, number input, datetime, modals"
```