Get threads working reasonably well

src/app/commands.ts

@@ -17,7 +17,7 @@ import {
   tagEvent,
   tagReactionTo,
 } from "@welshman/app"
-import {ROOM, MEMBERSHIPS, INDEXER_RELAYS} from "@app/state"
+import {tagRoom, MEMBERSHIPS, INDEXER_RELAYS} from "@app/state"
 
 // Utils
 
@@ -99,7 +99,7 @@ export const addSpaceMembership = (url: string) =>
 
 export const addRoomMembership = (url: string, room: string) =>
   updateList(MEMBERSHIPS, (tags: string[][]) =>
-    uniqBy(t => t.join(""), [...tags, [ROOM, room, url]]),
+    uniqBy(t => t.join(""), [...tags, tagRoom(room, url)]),
   )
 
 export const removeSpaceMembership = (url: string) =>
@@ -108,7 +108,7 @@ export const removeSpaceMembership = (url: string) =>
   )
 
 export const removeRoomMembership = (url: string, room: string) =>
-  updateList(MEMBERSHIPS, (tags: string[][]) => tags.filter(t => !equals([ROOM, room, url], t)))
+  updateList(MEMBERSHIPS, (tags: string[][]) => tags.filter(t => !equals(tagRoom(room, url), t)))
 
 // Actions
 

src/app/components/ChatCompose.svelte

@@ -8,24 +8,21 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {getEditorOptions, getEditorTags, addFile} from "@lib/editor"
-  import {ROOM, MESSAGE, GENERAL} from "@app/state"
+  import {MESSAGE} from "@app/state"
   import {getPubkeyHints} from "@app/commands"
 
-  export let url
-  export let room = GENERAL
+  export let onSubmit
 
   const loading = writable(false)
 
   let editor: Readable<Editor>
 
   const submit = () => {
-    const event = createEvent(MESSAGE, {
+    onSubmit({
       content: $editor.getText(),
-      tags: [[ROOM, room], ...getEditorTags($editor)],
+      tags: getEditorTags($editor),
     })
 
-    publishThunk(makeThunk({event, relays: [url]}))
-
     $editor.chain().clearContent().run()
   }
 
@@ -34,8 +31,7 @@
   })
 </script>
 
-<div
-  class="shadow-top-xl relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100 p-2">
+<div class="relative z-feature flex gap-2 p-2">
   <Button
     data-tip="Add an image"
     class="center tooltip h-10 w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"

src/app/components/ChatMessage.svelte

@@ -5,7 +5,7 @@
   import twColors from "tailwindcss/colors"
   import type {Readable} from "svelte/store"
   import {readable, derived} from "svelte/store"
-  import {hash, uniqBy, groupBy, now} from "@welshman/lib"
+  import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {PublishStatus} from "@welshman/net"
@@ -23,23 +23,21 @@
   import type {PublishStatusData} from "@welshman/app"
   import {REACTION, DELETE, ZAP_RESPONSE, createEvent, displayRelayUrl, getAncestorTags} from "@welshman/util"
   import {repository} from "@welshman/app"
-  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
-  import Drawer from "@lib/components/Drawer.svelte"
   import Content from "@app/components/Content.svelte"
+  import ChatThread from '@app/components/ChatThread.svelte'
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
-  import ChatMessageReplies from "@app/components/ChatMessageReplies.svelte"
-  import ChatMessageReply from "@app/components/ChatMessageReply.svelte"
-  import {ROOM, REPLY, deriveEvent, displayReaction} from "@app/state"
+  import {tagRoom, REPLY, deriveEvent, displayReaction} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
+  import {pushModal} from '@app/modal'
 
   export let url
   export let room
   export let event: TrustedEvent
-  export let showPubkey: boolean
-  export let isReply = false
+  export let showPubkey = false
+  export let hideParent = false
 
   const colors = [
     ["amber", twColors.amber[600]],
@@ -67,16 +65,21 @@
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
   const zaps = deriveEvents(repository, {filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}]})
-  const {replies} = getAncestorTags(event.tags)
-  const parentId = replies[0]?.[1]
-  const parentHints = [replies[0]?.[2]].filter(Boolean)
-  const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
+  const rootTag = event.tags.find(t => t[0].match(/^e$/i))
+  const rootId = rootTag?.[1]
+  const rootHints = [rootTag?.[2]].filter(Boolean) as string[]
+  const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
   const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
 
   const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
     $ps.find(({status}) => statuses.includes(status))
 
+  const openThread = () => {
+    const root = $rootEvent || event
+
+    pushModal(ChatThread, {url, room, event: root}, {drawer: true})
+  }
 
   const onReactionClick = (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
@@ -88,37 +91,32 @@
         event,
         content,
         relays: [url],
-        tags: [[ROOM, room, url]],
+        tags: [tagRoom(room, url)],
       })
     }
   }
 
   let drawer: SvelteComponent
 
-  $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
-  $: parentProfile = deriveProfile(parentPubkey || "")
-  $: parentProfileDisplay = deriveProfileDisplay(parentPubkey || "")
+  $: rootPubkey = $rootEvent?.pubkey || rootTag?.[4]
+  $: rootProfile = deriveProfile(rootPubkey || "")
+  $: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
   $: isPublished = findStatus($ps, [PublishStatus.Success])
   $: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
   $: failure =
     !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
 </script>
 
-<div
-  in:fly
-  class="group relative flex flex-col gap-1 p-2 transition-colors"
-  class:hover:bg-base-300={!isReply}
-  class:mt-4={isReply}>
-  {#if event.kind === REPLY}
+<button type="button" on:click={openThread} class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300 text-left w-full">
+  {#if $rootEvent && !hideParent}
     <div class="flex items-center gap-1 pl-12 text-xs">
-      <Icon icon="arrow-right" />
-      <Avatar src={$parentProfile?.picture} size={4} />
-      <p class="text-primary">{$parentProfileDisplay}</p>
-      <p></p>
+      <Icon icon="square-share-line" size={3} />
+      <p>In reply to</p>
+      <Avatar src={$rootProfile?.picture} size={4} />
+      <p class="text-primary">{$rootProfileDisplay}</p>
       <p
-        class="flex cursor-pointer items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
-        <Icon icon="square-share-line" size={3} />
-        {$parentEvent?.content || "View note"}
+        class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
+        {ellipsize($rootEvent.content, 30)}
       </p>
     </div>
   {/if}
@@ -157,33 +155,29 @@
   {#if $reactions.length > 0 || $zaps.length > 0}
     <div class="ml-12 text-xs">
       {#each groupBy(e => e.content, uniqBy(e => e.pubkey + e.content, $reactions)).entries() as [content, events]}
-        <Button class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full" on:click={() => onReactionClick(content, events)}>
+        {@const isOwn = events.some(e => e.pubkey === $pubkey)}
+        {@const onClick = () => onReactionClick(content, events)}
+        <button
+          type="button"
+          class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
+          class:border={isOwn}
+          class:border-solid={isOwn}
+          class:border-primary={isOwn}
+          on:click|stopPropagation={onClick}>
           <span>{displayReaction(content)}</span>
           {#if events.length > 1}
             <span>{events.length}</span>
           {/if}
-        </Button>
+        </button>
       {/each}
     </div>
   {/if}
-  <div
-    class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100">
-    {#if !isReply}
-      <button class="btn join-item btn-xs" on:click={() => drawer.open()}>
-        <Icon icon="reply" size={4} />
-      </button>
-    {/if}
+  <button
+    class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
+    on:click|stopPropagation>
     <ChatMessageEmojiButton {url} {room} {event} />
     <button class="btn join-item btn-xs">
       <Icon icon="menu-dots" size={4} />
     </button>
-  </div>
-</div>
-
-{#if !isReply}
-  <Drawer bind:this={drawer}>
-    <svelte:self {...$$props} isReply />
-    <ChatMessageReplies {url} {room} {event} />
-    <ChatMessageReply {url} {room} {event} />
-  </Drawer>
-{/if}
+  </button>
+</button>

src/app/components/ChatMessageEmojiButton.svelte

@@ -6,7 +6,7 @@
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
-  import {ROOM} from '@app/state'
+  import {tagRoom} from '@app/state'
   import {publishReaction} from '@app/commands'
 
   export let url, room, event
@@ -18,7 +18,7 @@
       event,
       relays: [url],
       content: emoji.unicode,
-      tags: [[ROOM, room, url]],
+      tags: [tagRoom(room, url)],
     })
 
     popover.hide()

src/app/components/ChatMessageReplies.svelte

@@ -1 +0,0 @@
-hi

src/app/components/ChatMessageReply.svelte

@@ -1 +0,0 @@
-hi

src/app/components/ChatThread.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {sortBy, append, range} from '@welshman/lib'
+  import {createEvent} from '@welshman/util'
+  import type {EventContent, TrustedEvent} from '@welshman/util'
+  import {repository, makeThunk, publishThunk} from '@welshman/app'
+  import {deriveEvents} from '@welshman/store'
+  import ChatMessage from '@app/components/ChatMessage.svelte'
+  import ChatCompose from '@app/components/ChatCompose.svelte'
+  import {tagRoom, REPLY} from '@app/state'
+
+  export let url, room, event: TrustedEvent
+
+  const replies = deriveEvents(repository, {
+    filters: [{kinds: [REPLY], '#E': [event.id]}],
+  })
+
+  const onSubmit = ({content, tags}: EventContent) => {
+    const seenRoots = new Set<string>()
+
+    for (const [raw, ...tag] of event.tags.filter(t => t[0].match(/^K|E|A|I$/i))) {
+      const T = raw.toUpperCase()
+      const t = raw.toLowerCase()
+
+      if (seenRoots.has(T)) {
+        tags.push([t, ...tag])
+      } else {
+        tags.push([T, ...tag])
+        seenRoots.add(T)
+      }
+    }
+
+    if (seenRoots.size === 0) {
+      tags.push(['K', String(event.kind)])
+      tags.push(['E', event.id])
+    } else {
+      tags.push(['k', String(event.kind)])
+      tags.push(['e', event.id])
+    }
+
+    const reply = createEvent(REPLY, {content, tags: append(tagRoom(room, url), tags)})
+
+    publishThunk(makeThunk({event: reply, relays: [url]}))
+  }
+</script>
+
+<div class="fixed flex flex-col max-h-screen w-full gap-2">
+  <div class="overflow-auto pt-3">
+    <ChatMessage {url} {room} {event} showPubkey />
+    {#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
+      <ChatMessage {url} {room} event={reply} showPubkey hideParent />
+    {/each}
+  </div>
+  <div class="bottom-0 left-0 right-0">
+    <ChatCompose {onSubmit} />
+  </div>
+</div>

src/app/modal.ts

@@ -6,11 +6,15 @@ export const emitter = new Emitter()
 
 export const modals = new Map()
 
-export const pushModal = (component: ComponentType, props: Record<string, any> = {}) => {
+export type ModalOptions = {
+  drawer?: boolean
+}
+
+export const pushModal = (component: ComponentType, props: Record<string, any> = {}, options: ModalOptions = {}) => {
   const id = randomId()
 
   // TODO: fix memory leak here by listening to history somehow
-  modals.set(id, {component, props})
+  modals.set(id, {component, props, options})
   goto("#" + id)
 
   return id

src/app/state.ts

@@ -73,6 +73,8 @@ export const imgproxy = (url: string, {w = 640, h = 1024} = {}) => {
 
 export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 
+export const tagRoom = (room: string, url: string) => [ROOM, room, url]
+
 setContext({
   net: getDefaultNetContext(),
   app: getDefaultAppContext({

src/lib/components/Drawer.svelte

@@ -31,7 +31,7 @@
   </div>
   <div class="drawer-side z-modal">
     <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu bg-base-200 text-base-content min-h-full w-80">
+    <div class="menu bg-base-200 text-base-content min-h-full w-80 p-0">
       <slot />
   </div>
   </div>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import "@src/app.css"
   import {onMount} from "svelte"
+  import type {SvelteComponent} from "svelte"
   import {get} from "svelte/store"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
@@ -24,6 +25,7 @@
   } from "@welshman/app"
   import * as app from "@welshman/app"
   import ModalBox from "@lib/components/ModalBox.svelte"
+  import Drawer from "@lib/components/Drawer.svelte"
   import Toast from "@app/components/Toast.svelte"
   import Landing from "@app/components/Landing.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
@@ -35,6 +37,7 @@
 
   let ready: Promise<unknown>
   let dialog: HTMLDialogElement
+  let drawer: SvelteComponent
   let prev: any
 
   $: modalId = $page.url.hash.slice(1)
@@ -52,9 +55,15 @@
 
   $: {
     if (modal) {
-      dialog?.showModal()
       prev = modal
+
+      if (prev.options.drawer) {
+        drawer?.open()
+      } else {
+        dialog?.showModal()
+      }
     } else {
+      drawer?.close()
       dialog?.close()
     }
   }
@@ -101,7 +110,7 @@
       <slot />
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
-      {#if prev}
+      {#if prev && !prev.options.drawer}
         {#key prev}
           <ModalBox {...prev} />
         {/key}
@@ -113,6 +122,13 @@
         </form>
       {/if}
     </dialog>
+    <Drawer bind:this={drawer}>
+      {#if prev && prev.options.drawer}
+        {#key prev}
+          <svelte:component this={prev.component} {...prev.props} />
+        {/key}
+      {/if}
+    </Drawer>
     <Toast />
   </div>
 {/await}

src/routes/spaces/[nrelay]/[[room]]/+page.svelte

@@ -9,16 +9,18 @@
 
 <script lang="ts">
   import {page} from "$app/stores"
-  import {sortBy} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
-  import {formatTimestampAsDate} from "@welshman/app"
+  import {sortBy, append} from "@welshman/lib"
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {createEvent} from "@welshman/util"
+  import {formatTimestampAsDate, makeThunk, publishThunk} from "@welshman/app"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
-  import {userMembership, decodeNRelay, makeChatId, deriveChat, GENERAL} from "@app/state"
+  import {userMembership, decodeNRelay, makeChatId, deriveChat, GENERAL, tagRoom, MESSAGE} from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
 
   const {nrelay, room = GENERAL} = $page.params
@@ -27,6 +29,12 @@
 
   const assertEvent = (e: any) => e as TrustedEvent
 
+  const onSubmit = ({content, tags}: EventContent) => {
+    const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
+
+    publishThunk(makeThunk({event, relays: [url]}))
+  }
+
   let loading = true
   let elements: Element[] = []
 
@@ -93,7 +101,9 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <ChatMessage {url} {room} event={assertEvent(value)} {showPubkey} />
+        <div in:fly>
+          <ChatMessage {url} {room} event={assertEvent(value)} {showPubkey} />
+        </div>
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
@@ -106,5 +116,7 @@
       </Spinner>
     </p>
   </div>
-  <ChatCompose {url} {room} />
+  <div class="shadow-top-xl border-t border-solid border-base-100 bg-base-100">
+    <ChatCompose {onSubmit} />
+  </div>
 </div>