feat: replace native datetime-local with custom date picker + time inputs

src/views/Entries.vue

@@ -122,10 +122,10 @@
     <!-- Edit Dialog -->
     <div
       v-if="showEditDialog"
-      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="closeEditDialog"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md mx-4 p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Edit Entry</h2>
 
         <form @submit.prevent="handleEdit" class="space-y-4">
@@ -163,14 +163,34 @@
             />
           </div>
 
-          <!-- Start Time -->
+          <!-- Start Date & Time -->
           <div>
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Time</label>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date & Time</label>
-            <input
+            <div class="flex items-center gap-2">
-              v-model="editForm.start_time"
+              <div class="flex-1">
-              type="datetime-local"
+                <AppDatePicker
-              class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                  v-model="editDate"
-            />
+                  placeholder="Date"
+                />
+              </div>
+              <div class="flex items-center gap-1">
+                <input
+                  v-model="editHour"
+                  type="number"
+                  min="0"
+                  max="23"
+                  class="w-12 px-2 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                />
+                <span class="text-text-tertiary text-sm font-mono">:</span>
+                <input
+                  v-model="editMinute"
+                  type="number"
+                  min="0"
+                  max="59"
+                  class="w-12 px-2 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                />
+              </div>
+            </div>
           </div>
 
           <!-- Buttons -->
@@ -256,6 +276,11 @@ const editForm = reactive<TimeEntry>({
   duration: 0
 })
 
+// Split date/time refs for edit dialog
+const editDate = ref('')
+const editHour = ref(0)
+const editMinute = ref(0)
+
 // Duration in minutes (computed for editing)
 const durationMinutes = computed({
   get: () => Math.round(editForm.duration / 60),
@@ -336,8 +361,17 @@ function openEditDialog(entry: TimeEntry) {
   editForm.id = entry.id || 0
   editForm.project_id = entry.project_id
   editForm.description = entry.description || ''
-  editForm.start_time = entry.start_time.slice(0, 16) // Format for datetime-local
   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
 }
 
@@ -350,8 +384,9 @@ function closeEditDialog() {
 // Handle edit submit
 async function handleEdit() {
   if (editingEntry.value) {
-    // Recalculate end_time based on duration
+    // Reconstruct start time from split date/time fields
-    const start = new Date(editForm.start_time)
+    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 = {