Remove chat comments and conversation pane

src/app/components/ChannelConversation.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import {sortBy, append} from "@welshman/lib"
-  import type {EventContent, TrustedEvent} from "@welshman/util"
-  import {repository} from "@welshman/app"
-  import {deriveEvents} from "@welshman/store"
-  import ChannelMessage from "@app/components/ChannelMessage.svelte"
-  import ChannelCompose from "@app/components/ChannelCompose.svelte"
-  import {tagRoom, COMMENT} from "@app/state"
-  import {publishComment} from "@app/commands"
-
-  export let url, room, event: TrustedEvent
-
-  const replies = deriveEvents(repository, {
-    filters: [{kinds: [COMMENT], "#E": [event.id]}],
-  })
-
-  const onSubmit = ({content, tags}: EventContent) =>
-    publishComment({
-      event,
-      content,
-      tags: append(tagRoom(room, url), tags),
-      relays: [url],
-    })
-</script>
-
-<div class="col-2">
-  <div class="overflow-auto pt-3">
-    <ChannelMessage {url} {room} {event} showPubkey isHead inert />
-    {#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
-      <ChannelMessage {url} {room} event={reply} showPubkey inert />
-    {/each}
-  </div>
-  <div class="bottom-0 left-0 right-0">
-    <ChannelCompose {onSubmit} />
-  </div>
-</div>

src/app/components/ChannelMessage.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {readable} from "svelte/store"
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {
@@ -17,40 +16,27 @@
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
-  import ReplySummary from "@app/components/ReplySummary.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
-  import ChannelConversation from "@app/components/ChannelConversation.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import ChannelMessageMenuMobile from "@app/components/ChannelMessageMenuMobile.svelte"
-  import {colors, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
+  import {colors, tagRoom, pubkeyLink} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
-  import {pushDrawer, pushModal} from "@app/modal"
+  import {pushModal} from "@app/modal"
 
   export let url, room
   export let event: TrustedEvent
   export let replyTo: any = undefined
   export let showPubkey = false
-  export let isHead = false
   export let inert = false
 
   const thunk = $thunks[event.id]
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
-  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 [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
   const reply = () => replyTo(event)
 
-  const onClick = () => {
-    const root = $rootEvent || event
-
-    pushDrawer(ChannelConversation, {url, room, event: root})
-  }
-
   const onLongPress = () => pushModal(ChannelMessageMenuMobile, {url, event})
 
   const onReactionClick = (content: string, events: TrustedEvent[]) => {
@@ -71,11 +57,8 @@
 
 <LongPress
   data-event={event.id}
-  on:click={isMobile || inert ? null : onClick}
   onLongPress={inert ? null : onLongPress}
-  class="group relative flex w-full flex-col p-2 pb-3 text-left transition-colors {inert
-    ? 'hover:bg-base-300'
-    : ''}">
+  class="group relative flex w-full cursor-default flex-col p-2 pb-3 text-left hover:z-feature">
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}
       <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">
@@ -106,9 +89,6 @@
     </div>
   </div>
   <div class="row-2 ml-10 mt-1">
-    {#if !isHead}
-      <ReplySummary relays={[url]} {event} on:click={onClick} />
-    {/if}
     <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-right" />
   </div>
   <button

src/app/components/ChannelMessageMenuMobile.svelte

@@ -5,10 +5,9 @@
   import Icon from "@lib/components/Icon.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
-  import ChannelConversation from "@app/components/ChannelConversation.svelte"
   import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {publishReaction} from "@app/commands"
-  import {pushModal, pushDrawer} from "@app/modal"
+  import {pushModal} from "@app/modal"
   import {tagRoom} from "@app/state"
 
   export let url
@@ -27,9 +26,6 @@
 
   const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
 
-  const showConversation = () =>
-    pushDrawer(ChannelConversation, {url, room, event}, {replaceState: true})
-
   const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
 
   const showDelete = () => pushModal(ConfirmDelete, {url, event})
@@ -40,10 +36,6 @@
     <Icon size={4} icon="smile-circle" />
     Send Reaction
   </Button>
-  <Button class="btn btn-neutral w-full" on:click={showConversation}>
-    <Icon size={4} icon="reply" />
-    View Conversation
-  </Button>
   <Button class="btn btn-neutral" on:click={showInfo}>
     <Icon size={4} icon="code-2" />
     Message Details

src/app/components/ChatMessage.svelte

@@ -16,7 +16,6 @@
   import LongPress from "@lib/components/LongPress.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Content from "@app/components/Content.svelte"
-  import ReplySummary from "@app/components/ReplySummary.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
@@ -119,7 +118,6 @@
       </div>
     </LongPress>
     <div class="row-2 z-feature -mt-1 ml-4">
-      <ReplySummary {event} />
       <ReactionSummary {event} {onReactionClick} noTooltip />
     </div>
   </div>

src/app/components/ContentQuote.svelte

@@ -3,14 +3,11 @@
   import {goto} from "$app/navigation"
   import {ctx, nthEq} from "@welshman/lib"
   import {Address, DIRECT_MESSAGE} from "@welshman/util"
-  import {repository} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import ChannelConversation from "@app/components/ChannelConversation.svelte"
   import {deriveEvent, entityLink, MESSAGE, THREAD} from "@app/state"
   import {makeThreadPath} from "@app/routes"
-  import {pushDrawer} from "@app/modal"
 
   export let value
   export let event
@@ -44,16 +41,6 @@
     return Boolean(element)
   }
 
-  const openMessage = (url: string, room: string, id: string) => {
-    const event = repository.getEvent(id)
-
-    if (event) {
-      return pushDrawer(ChannelConversation, {url, room, event})
-    }
-
-    return Boolean(event)
-  }
-
   const onClick = (e: Event) => {
     if ($quote) {
       if ($quote.kind === DIRECT_MESSAGE) {
@@ -68,7 +55,7 @@
         }
 
         if ($quote.kind === MESSAGE) {
-          return scrollToEvent($quote.id) || openMessage(url, room, $quote.id)
+          return scrollToEvent($quote.id)
         }
 
         const kind = $quote.tags.find(nthEq(0, "K"))?.[1]
@@ -80,7 +67,7 @@
           }
 
           if (parseInt(kind) === MESSAGE) {
-            return scrollToEvent(id) || openMessage(url, room, id)
+            return scrollToEvent(id)
           }
         }
       }

src/app/components/ReplySummary.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {deriveEvents} from "@welshman/store"
-  import {repository, load} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
-  import {COMMENT} from "@app/state"
-
-  export let event
-  export let relays: string[] = []
-
-  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
-  const replies = deriveEvents(repository, {filters})
-
-  onMount(() => {
-    load({relays, filters})
-  })
-</script>
-
-{#if $replies.length > 0}
-  <button type="button" on:click class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
-    <Icon icon="reply" />
-    {$replies.length}
-  </button>
-{/if}

src/app/state.ts

@@ -396,7 +396,7 @@ export const readMessage = (event: TrustedEvent): Maybe<ChannelMessage> => {
 }
 
 export const channelMessages = deriveEventsMapped<ChannelMessage>(repository, {
-  filters: [{kinds: [MESSAGE, COMMENT]}],
+  filters: [{kinds: [MESSAGE]}],
   eventToItem: readMessage,
   itemToEvent: item => item.event,
 })

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

@@ -37,7 +37,6 @@
     GENERAL,
     tagRoom,
     MESSAGE,
-    COMMENT,
     getMembershipRoomsByUrl,
   } from "@app/state"
   import {setChecked} from "@app/notifications"
@@ -82,10 +81,6 @@
     let previousPubkey
 
     for (const {event} of sortBy(m => m.event.created_at, $channel?.messages || [])) {
-      if (event.kind === COMMENT) {
-        continue
-      }
-
       const {id, pubkey, created_at} = event
       const date = formatTimestampAsDate(created_at)
 
@@ -127,7 +122,7 @@
 
     unsub = subscribePersistent({
       relays: [url],
-      filters: [{kinds: [MESSAGE, COMMENT], "#~": [room], since: now()}],
+      filters: [{kinds: [MESSAGE], "#~": [room], since: now()}],
     })
   })