Fix bugs, add timehash

src/app/components/ChannelCompose.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount, onDestroy} from "svelte"
+  import {onMount} from "svelte"
   import {writable} from "svelte/store"
   import {isMobile, preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
@@ -40,10 +40,6 @@
   onMount(() => {
     editor.chain().setContent(content).run()
   })
-
-  onDestroy(() => {
-    editor.destroy()
-  })
 </script>
 
 <form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>

src/app/components/EventCreate.svelte

@@ -4,6 +4,7 @@
   import {createEvent, EVENT_TIME} from "@welshman/util"
   import {publishThunk, dateToSeconds} from "@welshman/app"
   import {preventDefault} from "@lib/html"
+  import {timeHashesBetween} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -38,14 +39,18 @@
       })
     }
 
+    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", dateToSeconds(start).toString()],
-        ["end", dateToSeconds(end).toString()],
+        ["start", startTs.toString()],
+        ["end", endTs.toString()],
+        ...timeHashesBetween(startTs, endTs).map(T => ["T", T]),
         ...editor.storage.nostr.getEditorTags(),
         PROTECTED,
       ],
@@ -106,7 +111,7 @@
   </Field>
   <Field>
     {#snippet label()}
-      Start
+      Start*
     {/snippet}
     {#snippet input()}
       <DateTimeInput bind:value={start} />
@@ -114,7 +119,7 @@
   </Field>
   <Field>
     {#snippet label()}
-      End
+      End*
     {/snippet}
     {#snippet input()}
       <DateTimeInput bind:value={end} />

src/app/editor/EditorContent.svelte

@@ -6,16 +6,17 @@
   let element: HTMLElement
 
   onMount(() => {
-    if (element) {
-      element.append(...(Array.from(editor.options.element.childNodes) as any))
-      editor.setOptions({element})
-      editor.contentElement = element
+    if (editor.options.element) {
+      element?.append(editor.options.element)
+    }
+
+    if (editor.options.autofocus) {
+      ;(element?.querySelector("[contenteditable]") as HTMLElement)?.focus()
     }
   })
 
   onDestroy(() => {
-    editor.contentElement = null
-    editor.setOptions({element: null})
+    editor.destroy()
   })
 </script>
 

src/app/editor/index.ts

@@ -50,6 +50,7 @@ export const makeEditor = ({
   new Editor({
     content,
     autofocus,
+    element: document.createElement("div"),
     extensions: [
       WelshmanExtension.configure({
         submit,

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