Rework datetime input

src/app/components/EventCreate.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import {writable} from "svelte/store"
-  import {randomId} from "@welshman/lib"
+  import {randomId, HOUR} from "@welshman/lib"
   import {createEvent, EVENT_TIME} from "@welshman/util"
-  import {publishThunk, dateToSeconds} from "@welshman/app"
+  import {publishThunk} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import {timeHashesBetween} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
@@ -39,18 +39,15 @@
       })
     }
 
-    const startTs = dateToSeconds(start)
-    const endTs = dateToSeconds(end)
-
     const event = createEvent(EVENT_TIME, {
       content: editor.getText({blockSeparator: "\n"}).trim(),
       tags: [
         ["d", randomId()],
         ["title", title],
         ["location", location],
-        ["start", startTs.toString()],
-        ["end", endTs.toString()],
-        ...timeHashesBetween(startTs, endTs).map(T => ["T", T]),
+        ["start", start.toString()],
+        ["end", end.toString()],
+        ...timeHashesBetween(start, end).map(T => ["T", T]),
         ...editor.storage.nostr.getEditorTags(),
         PROTECTED,
       ],
@@ -64,8 +61,8 @@
 
   let title = $state("")
   let location = $state("")
-  let start: Date | undefined = $state()
-  let end: Date | undefined = $state()
+  let start: number | undefined = $state()
+  let end: number | undefined = $state()
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(submit)}>

src/app/components/EventItem.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
-  import {
-    formatTimestamp,
-    formatTimestampAsDate,
-    formatTimestampAsTime,
-  } from "@welshman/app"
+  import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -24,8 +20,6 @@
   const isSingleDay = $derived(startDateDisplay === endDateDisplay)
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
-
-  $inspect(event)
 </script>
 
 <div class="card2 bg-alt col-2">

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)
   })

src/lib/html.ts

@@ -21,7 +21,6 @@ export type ScrollerOpts = {
   onScroll: () => any
   element: Element
   threshold?: number
-  reverse?: boolean
   delay?: number
 }
 
@@ -35,7 +34,6 @@ export const createScroller = ({
   element,
   delay = 1000,
   threshold = 2000,
-  reverse = false,
 }: ScrollerOpts) => {
   let done = false
 

src/lib/util.ts

@@ -1,6 +1,6 @@
 import {hexToBytes, bytesToHex} from "@noble/hashes/utils"
 import * as nip19 from "nostr-tools/nip19"
-import {HOUR} from "@welshman/lib"
+import {HOUR, MONTH, DAY} from "@welshman/lib"
 
 export const displayList = <T>(xs: T[], conj = "and", n = 6, locale = "en-US") => {
   const stringItems = xs.map(String)
@@ -44,10 +44,7 @@ export const timeHash = (seconds: number, precision = 32) => {
   return hash
 }
 
-export const timeHashesBetween = (a: number, b: number) => {
-  const precisions = [10, 15, 20]
-  const start = Math.min(a, b) >>> 0
-  const end = Math.min(Math.max(a, b) >>> 0, 0xffffffff)
+export const timeHashesBetween = (start: number, end: number, precisions = [10, 15, 20]) => {
   const hashes = new Set<string>()
 
   for (let seconds = start; seconds <= end; seconds += HOUR) {
@@ -58,3 +55,12 @@ export const timeHashesBetween = (a: number, b: number) => {
 
   return Array.from(hashes).sort()
 }
+
+export const timeHashesForFilter = (start: number, end: number) => {
+  const diff = end - start
+
+  if (diff < 3 * DAY) return timeHashesBetween(start, end, [20])
+  if (diff < 3 * MONTH) return timeHashesBetween(start, end, [15])
+
+  return timeHashesBetween(start, end, [10])
+}

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, last, ago} from "@welshman/lib"
+  import {sortBy, now, int, MONTH, last} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {EVENT_DATE, EVENT_TIME} from "@welshman/util"
+  import {EVENT_DATE, EVENT_TIME, getTagValue} from "@welshman/util"
   import {subscribe, formatTimestampAsDate} from "@welshman/app"
+  import {timeHashesForFilter} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -24,10 +25,9 @@
 
   const createEvent = () => pushModal(EventCreate, {url})
 
-  const getEnd = (event: TrustedEvent) => parseInt(event.tags.find(t => t[0] === "end")?.[1] || "")
+  const getEnd = (event: TrustedEvent) => parseInt(getTagValue("end", event.tags) || "")
 
-  const getStart = (event: TrustedEvent) =>
-    parseInt(event.tags.find(t => t[0] === "start")?.[1] || "")
+  const getStart = (event: TrustedEvent) => parseInt(getTagValue("start", event.tags) || "")
 
   const limit = 5
   let loading = $state(true)
@@ -38,7 +38,7 @@
   }
 
   const items = $derived(
-    sortBy(e => -getStart(e), $events)
+    sortBy(e => getStart(e), $events)
       .reduce<Item[]>((r, event) => {
         const end = getEnd(event)
         const start = getStart(event)
@@ -56,9 +56,10 @@
   )
 
   onMount(() => {
-    const sub = subscribe({filters: [{kinds, since: ago(30)}]})
+    const sub = subscribe({filters: [{kinds, since: now()}]})
+    const hashes = timeHashesForFilter(now() - int(3, MONTH), now() + int(3, MONTH))
 
-    pullConservatively({filters: [{kinds}], relays: [url]})
+    pullConservatively({filters: [{kinds, "#T": hashes}], relays: [url]})
 
     return () => sub.close()
   })