Change the way threads are displayed

src/app/components/ChannelMessage.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import {readable} from "svelte/store"
-  import {hash, ellipsize, uniqBy, groupBy} from "@welshman/lib"
+  import {hash, uniqBy, groupBy} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
   import type {Thunk} from "@welshman/app"
-  import {REACTION, ZAP_RESPONSE} from "@welshman/util"
+  import {REACTION} from "@welshman/util"
   import {repository} from "@welshman/app"
   import {slideAndFade, conditionalTransition} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -18,7 +18,7 @@
   import ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
-  import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
+  import {REPLY, colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
   import {pushModal, pushDrawer} from "@app/modal"
 
@@ -27,12 +27,12 @@
   export let event: TrustedEvent
   export let thunk: Thunk
   export let showPubkey = false
-  export let hideParent = false
+  export let isThread = false
 
   const profile = deriveProfile(event.pubkey)
   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 = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
   const rootTag = event.tags.find(t => t[0].match(/^e$/i))
   const rootId = rootTag?.[1]
   const rootHints = [rootTag?.[2]].filter(Boolean) as string[]
@@ -63,10 +63,6 @@
       })
     }
   }
-
-  $: rootPubkey = $rootEvent?.pubkey || rootTag?.[4]
-  $: rootProfile = deriveProfile(rootPubkey || "")
-  $: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
 </script>
 
 <Delay>
@@ -75,18 +71,6 @@
     on:click={openThread}
     type="button"
     class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
-    {#if $rootEvent && !hideParent}
-      <div class="flex items-center gap-1 pl-12 text-xs">
-        <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 items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
-          {ellipsize($rootEvent.content, 30)}
-        </p>
-      </div>
-    {/if}
     <div class="flex w-full gap-3">
       {#if showPubkey}
         <Button on:click={showProfile}>
@@ -115,14 +99,20 @@
         </div>
       </div>
     </div>
-    {#if $reactions.length > 0 || $zaps.length > 0}
-      <div class="ml-12 text-xs">
+    {#if $reactions.length > 0 || $replies.length > 0}
+      <div class="ml-12 flex flex-wrap gap-2 text-xs">
+        {#if $replies.length > 0 && !isThread}
+          <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
+            <Icon icon="reply" />
+            {$replies.length}
+          </div>
+        {/if}
         {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [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="flex-inline btn btn-neutral btn-xs gap-1 rounded-full"
             class:border={isOwn}
             class:border-solid={isOwn}
             class:border-primary={isOwn}

src/app/components/ChannelMessageEmojiButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {throttle} from "throttle-debounce"
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {between} from "@welshman/lib"
@@ -24,13 +25,13 @@
     popover.hide()
   }
 
-  const onMouseMove = ({clientX, clientY}: any) => {
+  const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
     const {x, y, width, height} = popover.popper.getBoundingClientRect()
 
-    if (!between([x, x + width], clientX) || !between([y, y + height + 30], clientY)) {
+    if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
       popover.hide()
     }
-  }
+  })
 
   let popover: Instance
 </script>

src/app/components/ChannelThread.svelte

@@ -50,9 +50,9 @@
 
 <div class="col-2">
   <div class="overflow-auto pt-3">
-    <ChannelMessage {url} {room} {event} thunk={$thunks[event.id]} showPubkey />
+    <ChannelMessage {url} {room} {event} thunk={$thunks[event.id]} showPubkey isThread />
     {#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
-      <ChannelMessage {url} {room} event={reply} thunk={$thunks[reply.id]} showPubkey hideParent />
+      <ChannelMessage {url} {room} event={reply} thunk={$thunks[reply.id]} showPubkey />
     {/each}
   </div>
   <div class="bottom-0 left-0 right-0">

src/app/components/ChatMessageEmojiButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {throttle} from "throttle-debounce"
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {between} from "@welshman/lib"
@@ -21,13 +22,13 @@
     popover.hide()
   }
 
-  const onMouseMove = ({clientX, clientY}: any) => {
+  const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
     const {x, y, width, height} = popover.popper.getBoundingClientRect()
 
-    if (!between([x, x + width], clientX) || !between([y, y + height + 30], clientY)) {
+    if (!between([x, x + width], clientX) || !between([y - 30, y + height + 30], clientY)) {
       popover.hide()
     }
-  }
+  })
 
   let popover: Instance
 </script>

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

@@ -33,6 +33,7 @@
     GENERAL,
     tagRoom,
     MESSAGE,
+    REPLY,
     getMembershipRoomsByUrl,
   } from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
@@ -64,6 +65,10 @@
     let previousPubkey
 
     for (const {event} of sortBy(m => m.event.created_at, $channel?.messages || [])) {
+      if (event.kind === REPLY) {
+        continue
+      }
+
       const {id, pubkey, created_at} = event
       const date = formatTimestampAsDate(created_at)
 

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

@@ -78,8 +78,8 @@
     </p>
   </div>
   <Button
-    class="tooltip tooltip-left fixed bottom-16 right-2 z-feature p-1 md:bottom-4 md:right-4"
-    data-tip="Create an Event"
+    class="tooltip tooltip-left fixed bottom-16 right-4 z-feature p-1 sm:right-8 md:bottom-4 md:right-4"
+    data-tip="Create a Thread"
     on:click={createThread}>
     <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">
       <Icon icon="notes-minimalistic" />