Clean up reactions/replies/thread actions

src/app/components/ChannelMessage.svelte

@@ -10,7 +10,8 @@
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
-  import Reactions from "@app/components/Reactions.svelte"
+  import ReplySummary from "@app/components/ReplySummary.svelte"
+  import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
@@ -67,7 +68,7 @@
     class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
     <div class="flex w-full gap-3">
       {#if showPubkey}
-        <Button on:click={showProfile}>
+        <Button on:click={showProfile} class="flex items-start">
           <Avatar
             src={$profile?.picture}
             class="border border-solid border-base-content"
@@ -93,7 +94,12 @@
         </div>
       </div>
     </div>
-    <Reactions {event} {onReactionClick} showReplies={!isThread} />
+    <div class="ml-12 row-2">
+      {#if !isThread}
+        <ReplySummary {event} />
+      {/if}
+      <ReactionSummary {event} {onReactionClick} />
+    </div>
     <button
       class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
       on:click|stopPropagation>

src/app/components/ChatMessage.svelte

@@ -9,7 +9,8 @@
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
-  import Reactions from "@app/components/Reactions.svelte"
+  import ReplySummary from "@app/components/ReplySummary.svelte"
+  import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
@@ -99,6 +100,9 @@
         </div>
       </div>
     </div>
-    <Reactions {event} {onReactionClick} />
+    <div class="ml-12 row-2">
+      <ReplySummary {event} />
+      <ReactionSummary {event} {onReactionClick} />
+    </div>
   </div>
 </div>

src/app/components/ReactionSummary.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {groupBy, uniqBy} from "@welshman/lib"
+  import {REACTION} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
+  import {pubkey, repository} from "@welshman/app"
+  import {displayReaction} from "@app/state"
+
+  export let event
+  export let onReactionClick
+
+  const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
+
+  $: groupedReactions = groupBy(e => e.content, uniqBy(e => e.pubkey + e.content, $reactions))
+</script>
+
+{#each groupedReactions.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 gap-1 rounded-full"
+    class:border={isOwn}
+    class:border-solid={isOwn}
+    class:border-primary={isOwn}
+    on:click|stopPropagation|preventDefault={onClick}>
+    <span>{displayReaction(content)}</span>
+    {#if events.length > 1}
+      <span>{events.length}</span>
+    {/if}
+  </button>
+{/each}

src/app/components/Reactions.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import {groupBy, uniqBy} from "@welshman/lib"
-  import {REACTION} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
-  import {pubkey, repository} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
-  import {REPLY, displayReaction} from "@app/state"
-
-  export let event
-  export let onReactionClick
-  export let showReplies = false
-
-  const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
-  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
-</script>
-
-{#if $reactions.length > 0 || $replies.length > 0}
-  <div class="ml-12 flex flex-wrap gap-2 text-xs">
-    {#if $replies.length > 0 && showReplies}
-      <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 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>
-    {/each}
-  </div>
-{/if}

src/app/components/ReplySummary.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import {groupBy, uniqBy} from "@welshman/lib"
+  import {REACTION} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
+  import {pubkey, repository} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import {REPLY} from "@app/state"
+
+  export let event
+
+  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
+</script>
+
+{#if $replies.length > 0}
+  <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
+    <Icon icon="reply" />
+    {$replies.length}
+  </div>
+{/if}

src/app/components/ThreadActions.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
-  import {pubkey} from "@welshman/app"
+  import {max} from "@welshman/lib"
+  import {deriveEvents} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
+  import {pubkey, repository, formatTimestampRelative} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
-  import Reactions from "@app/components/Reactions.svelte"
+  import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThreadMenu from "@app/components/ThreadMenu.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
+  import {REPLY} from "@app/state"
 
   export let url
   export let event
+  export let showActivity = false
+
+  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
 
   const showPopover = () => popover.show()
 
@@ -32,22 +38,35 @@
     publishReaction({event, relays: [url], content: emoji.unicode})
 
   let popover: Instance
+
+  $: lastActive = max([...$replies, event].map(e => e.created_at))
 </script>
 
-<div class="flex items-center justify-between">
-  <div>
-    <Reactions {event} {onReactionClick} />
+<div class="flex items-center justify-between flex-wrap gap-2">
+  <div class="flex gap-2">
+    <ReactionSummary {event} {onReactionClick} />
   </div>
-  <div class="join">
-    <EmojiButton {onEmoji} class="join-item btn-neutral" />
-    <Tippy
-      bind:popover
-      component={ThreadMenu}
-      props={{url, event, onClick: hidePopover}}
-      params={{trigger: "manual", interactive: true}}>
-      <Button class="btn btn-neutral btn-xs join-item" on:click={showPopover}>
-        <Icon icon="menu-dots" size={4} />
-      </Button>
-    </Tippy>
+  <div class="flex gap-2 flex-grow justify-end">
+    {#if showActivity}
+      <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
+        <Icon icon="reply" />
+        <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
+      </div>
+      <div class="btn btn-neutral btn-xs rounded-full hidden sm:flex">
+        Active {formatTimestampRelative(lastActive)}
+      </div>
+    {/if}
+    <button type="button" class="join rounded-full" on:click|stopPropagation>
+      <EmojiButton {onEmoji} class="join-item btn-neutral" />
+      <Tippy
+        bind:popover
+        component={ThreadMenu}
+        props={{url, event, onClick: hidePopover}}
+        params={{trigger: "manual", interactive: true}}>
+        <Button class="btn btn-neutral btn-xs join-item" on:click={showPopover}>
+          <Icon icon="menu-dots" size={4} />
+        </Button>
+      </Tippy>
+    </button>
   </div>
 </div>

src/app/components/ThreadItem.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
-  import {max} from "@welshman/lib"
   import {formatTimestamp, formatTimestampRelative} from "@welshman/app"
-  import {deriveEvents} from "@welshman/store"
-  import {repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
   import Profile from "@app/components/Profile.svelte"
+  import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeThreadPath} from "@app/routes"
   import {REPLY} from "@app/state"
 
   export let url
   export let event
-
-  const replies = deriveEvents(repository, {filters: [{kinds: [REPLY], "#E": [event.id]}]})
-
-  $: lastActive = max([...$replies, event].map(e => e.created_at))
 </script>
 
 <Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeThreadPath(url, event.id)}>
@@ -27,14 +21,6 @@
   </div>
   <div class="col-4 w-full pl-12">
     <Content {event} />
-    <div class="row-2 justify-end">
-      <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
-        <Icon icon="reply" />
-        <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
-      </div>
-      <div class="btn btn-neutral btn-xs rounded-full">
-        Active {formatTimestampRelative(lastActive)}
-      </div>
-    </div>
+    <ThreadActions showActivity {url} {event} />
   </div>
 </Link>

src/app/components/ThreadMenu.svelte

@@ -7,11 +7,14 @@
   import ThreadShare from "@app/components/ThreadShare.svelte"
   import {publishDelete} from "@app/commands"
   import {pushModal} from "@app/modal"
+  import {REPLY} from "@app/state"
 
   export let url
   export let event
   export let onClick
 
+  const isRoot = event.kind !== REPLY
+
   const showInfo = () => {
     onClick()
     pushModal(EventInfo, {event})
@@ -40,12 +43,14 @@
 </script>
 
 <ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
-  <li>
-    <Button on:click={share}>
-      <Icon size={4} icon="share-circle" />
-      Share to Chat
-    </Button>
-  </li>
+  {#if isRoot}
+    <li>
+      <Button on:click={share}>
+        <Icon size={4} icon="share-circle" />
+        Share to Chat
+      </Button>
+    </li>
+  {/if}
   <li>
     <Button on:click={showInfo}>
       <Icon size={4} icon="code-2" />