Start working on threads page

src/app/components/ThreadCard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {displayPubkey} from '@welshman/util'
+  import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
+  import Avatar from '@lib/components/Avatar.svelte'
+  import {getChatViewOptions} from '@app/editor'
+
+  export let root
+  export let replies
+
+  const profile = deriveProfile(root.pubkey)
+  const profileDisplay = deriveProfileDisplay(root.pubkey)
+
+  let editor: Readable<Editor>
+
+  onMount(() => {
+    editor = createEditor(getChatViewOptions(root.content))
+  })
+</script>
+
+<div>
+  <div class="card2 flex flex-col gap-2">
+    <div class="flex justify-between items-center gap-2">
+      <div class="flex gap-2">
+        <div class="py-1">
+          <Avatar src={$profile?.picture} size={10} />
+        </div>
+        <div class="flex flex-col">
+          <div class="text-bold">{$profileDisplay}</div>
+          <div class="text-sm opacity-75">{displayPubkey(root.pubkey)}</div>
+        </div>
+      </div>
+      <span class="text-sm opacity-75">{formatTimestamp(root.created_at)}</span>
+    </div>
+    <div class="ml-12">
+      <EditorContent editor={$editor} />
+    </div>
+  </div>
+  {#if replies.length > 0}
+    Show {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
+  {/if}
+</div>

src/app/components/ThreadCreate.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {writable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {NProfileExtension, ImageExtension} from "nostr-editor"
+  import {randomId} from "@welshman/lib"
+  import {createEvent, NOTE} from "@welshman/util"
+  import {publishThunk, makeThunk, dateToSeconds} from "@welshman/app"
+  import {findNodes} from "@lib/tiptap"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
+  import {makeMention, makeIMeta} from "@app/commands"
+  import {getNoteEditorOptions, addFile, uploadFiles} from "@app/editor"
+  import {pushModal, clearModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+
+  export let url
+
+  const submit = () => uploadFiles($editor)
+
+  const back = () => history.back()
+
+  const uploading = writable(false)
+
+  const sendMessage = () => {
+    const json = $editor.getJSON()
+    const mentionTags = findNodes(NProfileExtension.name, json).map(m =>
+      makeMention(m.attrs!.pubkey, m.attrs!.relays),
+    )
+    const imetaTags = findNodes(ImageExtension.name, json).map(({attrs: {src, sha256: x}}: any) =>
+      makeIMeta(src, {x, ox: x}),
+    )
+
+    const event = createEvent(NOTE, {
+      content: $editor.getText(),
+      tags: [
+        ...mentionTags,
+        ...imetaTags,
+      ],
+    })
+
+    publishThunk(makeThunk({event, relays: [url]}))
+    clearModal()
+  }
+
+  let editor: Readable<Editor>
+
+  onMount(() => {
+    editor = createEditor(getNoteEditorOptions({uploading, sendMessage}))
+  })
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={submit}>
+  <div class="py-2">
+    <h1 class="heading">Create a Thread</h1>
+    <p class="text-center">Share your thoughts, or start a discussion.</p>
+  </div>
+  <div class="relative">
+    <div class="flex-grow overflow-hidden note-editor">
+      <EditorContent editor={$editor} />
+    </div>
+    <Button
+      data-tip="Add an image"
+      class="tooltip tooltip-left absolute right-2 bottom-1"
+      on:click={() => addFile($editor)}>
+      {#if $uploading}
+        <span class="loading loading-spinner loading-xs"></span>
+      {:else}
+        <Icon icon="paperclip" size={3} />
+      {/if}
+    </Button>
+  </div>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary">
+      Create Thread
+    </Button>
+  </div>
+</form>
+

src/app/editor.ts

@@ -206,3 +206,4 @@ export const getNoteEditorOptions = ({uploading, sendMessage}: EditorOptions) =>
     }),
   ],
 })
+

src/app/state.ts

@@ -1,9 +1,10 @@
 import {nip19} from "nostr-tools"
 import {get, derived} from "svelte/store"
 import type {Maybe} from "@welshman/lib"
-import {setContext, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
+import {setContext, partition, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
 import {
   getIdFilters,
+  NOTE,
   RELAYS,
   REACTION,
   ZAP_RESPONSE,
@@ -11,6 +12,8 @@ import {
   EVENT_TIME,
   getRelayTagValues,
   isShareableRelayUrl,
+  getAncestorTags,
+  getAncestorTagValues,
 } from "@welshman/util"
 import type {TrustedEvent} from "@welshman/util"
 import {
@@ -93,7 +96,7 @@ export const readMembership = (event: TrustedEvent): PublishedMembership => {
     roomsByUrl.set(tag[1], [])
   }
 
-  for (const tag of event.tags.filter(nthEq(0, "t"))) {
+  for (const tag of event.tags.filter(nthEq(0, "~"))) {
     pushToMapKey(roomsByUrl, tag[2], tag[1])
   }
 
@@ -191,7 +194,7 @@ export const {
   },
 })
 
-// Calendar vents
+// Calendar events
 
 export const events = deriveEvents(repository, {filters: [{kinds: [EVENT_DATE, EVENT_TIME]}]})
 
@@ -207,6 +210,43 @@ export const eventsByUrl = derived([trackerStore, events], ([$tracker, $events])
   return eventsByUrl
 })
 
+// Threads
+
+export type Thread = {
+  root: TrustedEvent
+  replies: TrustedEvent[]
+}
+
+export const notes = deriveEvents(repository, {filters: [{kinds: [NOTE]}]})
+
+export const threadsByUrl = derived([trackerStore, notes], ([$tracker, $notes]) => {
+  const threadsByUrl = new Map<string, Thread[]>()
+  const [parents, children] = partition(e => getAncestorTags(e.tags).replies.length === 0, $notes)
+
+  for (const event of parents) {
+    for (const url of $tracker.getRelays(event.id)) {
+      pushToMapKey(threadsByUrl, url, {root: event, replies: []})
+    }
+  }
+
+  for (const event of children) {
+    const [id] = getAncestorTagValues(event.tags).replies
+
+    for (const url of $tracker.getRelays(event.id)) {
+      const threads = threadsByUrl.get(url) || []
+      const thread = threads.find(thread => thread.root.id === id)
+
+      if (!thread) {
+        continue
+      }
+
+      thread.replies.push(event)
+    }
+  }
+
+  return threadsByUrl
+})
+
 // Rooms
 
 export const roomsByUrl = derived(chats, $chats => {