Fix bugs, add timehash

src/lib/components/DateTimeInput.svelte

@@ -4,12 +4,10 @@
   import Button from "@lib/components/Button.svelte"
 
   interface Props {
-    initialValue?: Date | undefined
     value?: Date | undefined
   }
 
-  let {initialValue = undefined, value = $bindable<Date | undefined>(initialValue)}: Props =
-    $props()
+  let {value = $bindable()}: Props = $props()
 
   const pad = (n: number) => ("00" + String(n)).slice(-2)
 
@@ -29,7 +27,7 @@
     return d
   }
 
-  const onChange = () => {
+  const onchange = () => {
     if (value) {
       value = syncTime(value)
     }
@@ -40,38 +38,32 @@
     time = ""
   }
 
-  let time = ""
+  let time = $state("")
   let element: HTMLElement
 
-  $: {
+  $effect(() => {
     if (value) {
       value = syncTime(value)
     }
-  }
+  })
 </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 on:change={onchange} />
     <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
       {#if value}
-        <Button on:click={clear} class="h-5">
+        <Button onclick={clear} class="h-5">
           <Icon icon="close-circle" />
         </Button>
       {:else}
-        <Button on:click={focusDate} class="h-5">
+        <Button onclick={focusDate} class="h-5">
           <Icon icon="calendar-minimalistic" />
         </Button>
       {/if}
     </div>
   </div>
   <label class="input input-bordered flex items-center">
-    <input
-      list="time-options"
-      class="grow"
-      type="time"
-      step="300"
-      bind:value={time}
-      on:change={onChange} />
+    <input list="time-options" class="grow" type="time" step="300" bind:value={time} {onchange} />
   </label>
 </div>

src/lib/components/Field.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+
   interface Props {
-    label?: import("svelte").Snippet
-    input?: import("svelte").Snippet
-    info?: import("svelte").Snippet
+    label?: Snippet
+    input?: Snippet
+    info?: Snippet
     [key: string]: any
   }
 
-  const {...props}: Props = $props()
+  const {label, input, info, ...props}: Props = $props()
 </script>
 
 <div class="flex flex-col gap-2 {props.class}">
-  {#if props.label}
+  {#if label}
     <label class="flex items-center gap-2 font-bold">
-      {@render props.label?.()}
+      {@render label()}
     </label>
   {/if}
-  {@render props.input?.()}
-  {#if props.info}
+  {@render input?.()}
+  {#if info}
     <p class="text-sm">
-      {@render props.info?.()}
+      {@render info()}
     </p>
   {/if}
 </div>

src/lib/util.ts

@@ -1,5 +1,6 @@
 import {hexToBytes, bytesToHex} from "@noble/hashes/utils"
 import * as nip19 from "nostr-tools/nip19"
+import {HOUR} from "@welshman/lib"
 
 export const displayList = <T>(xs: T[], conj = "and", n = 6, locale = "en-US") => {
   const stringItems = xs.map(String)
@@ -24,3 +25,36 @@ export const nsecDecode = (nsec: string) => {
 
   return bytesToHex(data)
 }
+
+export const timeHash = (seconds: number, precision = 32) => {
+  const alphabet = "0123456789bcdefghjkmnpqrstuvwxyz"
+  const uint32 = Math.min(seconds >>> 0, 0xffffffff)
+  const binary = uint32.toString(2).padStart(32, "0")
+  const chunks = Math.min(Math.floor(precision / 5), 6)
+
+  let hash = ""
+
+  for (let i = 0; i < chunks * 5; i += 5) {
+    const chunk = binary.slice(i, i + 5)
+    const index = parseInt(chunk, 2)
+
+    hash += alphabet[index]
+  }
+
+  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)
+  const hashes = new Set<string>()
+
+  for (let seconds = start; seconds <= end; seconds += HOUR) {
+    for (const precision of precisions) {
+      hashes.add(timeHash(seconds, precision))
+    }
+  }
+
+  return Array.from(hashes).sort()
+}