Rework datetime input

src/lib/components/DateTimeInput.svelte

@@ -1,58 +1,74 @@
 <script lang="ts">
   import {DateInput} from "date-picker-svelte"
+  import {secondsToDate, dateToSeconds} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
 
   interface Props {
-    value?: Date | undefined
+    value?: number | undefined
   }
 
   let {value = $bindable()}: Props = $props()
 
   const pad = (n: number) => ("00" + String(n)).slice(-2)
 
-  const defaultTime = `${pad(new Date().getHours())}:00`
+  const getTime = (d: Date, inheritMinutes: boolean) => {
+    const minutes = inheritMinutes ? pad(d.getMinutes()) : "00"
+
+    return `${pad(d.getHours())}:${minutes}`
+  }
+
+  const setTime = (d: Date, time: string) => {
+    const [hours, minutes] = time.split(":").map(x => parseInt(x))
+    const newDate = new Date(d)
+
+    newDate.setHours(hours, minutes, 0, 0)
+
+    return newDate
+  }
+
+  const onTimeChange = () => {
+    if (time) {
+      date = setTime(date || new Date(), time)
+    }
+  }
 
   const focusDate = () => element.querySelector("input")?.focus()
 
-  const syncTime = (d: Date) => {
-    if (!time) {
-      time = defaultTime
-    }
-
-    const [hours, minutes] = time.split(":").map(x => parseInt(x))
-
-    d.setHours(hours, minutes, 0, 0)
-
-    return d
-  }
-
-  const onchange = () => {
-    if (value) {
-      value = syncTime(value)
-    }
-  }
-
   const clear = () => {
-    value = undefined
-    time = ""
+    date = undefined
+    time = undefined
   }
 
-  let time = $state("")
+  let date: Date | undefined = $state()
+  let time: string | undefined = $state()
   let element: HTMLElement
 
+  // Sync date to time and value
   $effect(() => {
-    if (value) {
-      value = syncTime(value)
+    if (date) {
+      time = getTime(date, false)
+      value = dateToSeconds(date)
+    } else {
+      value = undefined
     }
   })
+
+  // Sync updates to value to date/time
+  $effect(() => {
+    const derivedDate = value ? secondsToDate(value) : undefined
+    const derivedTime = derivedDate ? getTime(derivedDate, true) : undefined
+
+    date = derivedDate
+    time = derivedTime
+  })
 </script>
 
 <div class="relative grid grid-cols-2 gap-2" bind:this={element}>
   <div class="relative">
-    <DateInput format="yyyy-MM-dd" placeholder="" bind:value on:change={onchange} />
+    <DateInput format="yyyy-MM-dd" placeholder="" bind:value={date} />
     <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
-      {#if value}
+      {#if date}
         <Button onclick={clear} class="h-5">
           <Icon icon="close-circle" />
         </Button>
@@ -64,6 +80,12 @@
     </div>
   </div>
   <label class="input input-bordered flex items-center">
-    <input list="time-options" class="grow" type="time" step="300" bind:value={time} {onchange} />
+    <input
+      list="time-options"
+      class="grow"
+      type="time"
+      step="300"
+      bind:value={time}
+      onchange={onTimeChange} />
   </label>
 </div>

src/lib/components/Suggestions.svelte

@@ -8,8 +8,6 @@
   let index = $state(0)
   let items: string[] = $state([])
 
-  $inspect(items)
-
   const populateItems = throttle(300, term => {
     items = search(term).slice(0, 5)
   })