Infer room/protected tag from parent event in reactions and deletes

src/app/commands.ts

@@ -21,6 +21,7 @@ import {
   makeList,
   addToListPublicly,
   removeFromListByPredicate,
+  getTag,
   getListTags,
   getRelayTags,
   isShareableRelayUrl,
@@ -57,6 +58,7 @@ import {
 import type {Thunk} from "@welshman/app"
 import {
   tagRoom,
+  PROTECTED,
   userMembership,
   INDEXER_RELAYS,
   NIP46_PERMS,
@@ -426,14 +428,37 @@ export const sendWrapped = async ({
   )
 }
 
+export const makeDelete = ({event}: {event: TrustedEvent}) => {
+  const tags = [["k", String(event.kind)], ...tagEvent(event)]
+  const groupTag = getTag("h", event.tags)
+
+  if (groupTag) {
+    tags.push(PROTECTED)
+    tags.push(groupTag)
+  }
+
+  return createEvent(DELETE, {tags})
+}
+
+export const publishDelete = ({relays, event}: {relays: string[]; event: TrustedEvent}) =>
+  publishThunk({event: makeDelete({event}), relays})
+
 export type ReactionParams = {
   event: TrustedEvent
   content: string
-  tags?: string[][]
 }
 
-export const makeReaction = ({event, content, tags = []}: ReactionParams) =>
+export const makeReaction = ({event, content}: ReactionParams) => {
-  createEvent(REACTION, {content, tags: [...tags, ...tagReactionTo(event)]})
+  const tags = [["k", String(event.kind)], ...tagReactionTo(event)]
+  const groupTag = getTag("h", event.tags)
+
+  if (groupTag) {
+    tags.push(PROTECTED)
+    tags.push(groupTag)
+  }
+
+  return createEvent(REACTION, {content, tags})
+}
 
 export const publishReaction = ({relays, ...params}: ReactionParams & {relays: string[]}) =>
   publishThunk({event: makeReaction(params), relays})
@@ -472,9 +497,3 @@ export const makeComment = ({event, content, tags = []}: ReplyParams) => {
 
 export const publishComment = ({relays, ...params}: ReplyParams & {relays: string[]}) =>
   publishThunk({event: makeComment(params), relays})
-
-export const makeDelete = ({event}: {event: TrustedEvent}) =>
-  createEvent(DELETE, {tags: [["k", String(event.kind)], ...tagEvent(event)]})
-
-export const publishDelete = ({relays, event}: {relays: string[]; event: TrustedEvent}) =>
-  publishThunk({event: makeDelete({event}), relays})

src/app/components/ChannelMessage.svelte

@@ -20,7 +20,7 @@
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import ChannelMessageMenuMobile from "@app/components/ChannelMessageMenuMobile.svelte"
-  import {colors, tagRoom, PROTECTED} from "@app/state"
+  import {colors} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
   import {pushModal} from "@app/modal"
 
@@ -47,12 +47,7 @@
     if (reaction) {
       publishDelete({relays: [url], event: reaction})
     } else {
-      publishReaction({
+      publishReaction({event, content, relays: [url]})
-        event,
-        content,
-        relays: [url],
-        tags: [tagRoom(room, url), PROTECTED],
-      })
     }
   }
 </script>

src/app/components/ChannelMessageEmojiButton.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
+  import {noop} from "@welshman/lib"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import {tagRoom, PROTECTED} from "@app/state"
   import {publishReaction} from "@app/commands"
 
   export let url, room, event
 
+  // Tell svelte-check to shut up
+  noop(room)
+
   const onEmoji = (emoji: NativeEmoji) =>
-    publishReaction({
+    publishReaction({event, relays: [url], content: emoji.unicode})
-      event,
-      relays: [url],
-      content: emoji.unicode,
-      tags: [tagRoom(room, url), PROTECTED],
-    })
 </script>
 
 <EmojiButton {onEmoji} class="btn join-item btn-xs">

src/app/components/ChannelMessageMenuMobile.svelte

@@ -8,20 +8,13 @@
   import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {publishReaction} from "@app/commands"
   import {pushModal} from "@app/modal"
-  import {tagRoom, PROTECTED} from "@app/state"
 
   export let url
-  export let room
   export let event
 
   const onEmoji = (emoji: NativeEmoji) => {
     history.back()
-    publishReaction({
+    publishReaction({event, relays: [url], content: emoji.unicode})
-      event,
-      relays: [url],
-      content: emoji.unicode,
-      tags: [tagRoom(room, url), PROTECTED],
-    })
   }
 
   const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})

src/app/components/NoteItem.svelte

@@ -8,7 +8,6 @@
   import NoteCard from "@app/components/NoteCard.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
-  import {PROTECTED} from "@app/state"
 
   export let url
   export let event
@@ -19,12 +18,12 @@
     if (reaction) {
       publishDelete({relays: [url], event: reaction})
     } else {
-      publishReaction({event, content, tags: [PROTECTED], relays: [url]})
+      publishReaction({event, content, relays: [url]})
     }
   }
 
   const onEmoji = (emoji: NativeEmoji) =>
-    publishReaction({event, content: emoji.unicode, tags: [PROTECTED], relays: [url]})
+    publishReaction({event, content: emoji.unicode, relays: [url]})
 </script>
 
 <NoteCard {event} class="card2 bg-alt">

src/app/components/ReactionSummary.svelte

@@ -15,8 +15,9 @@
   export let reactionClass = ""
   export let noTooltip = false
 
-  const filters = [{kinds: [REACTION], "#e": [event.id]}]
+  const reactions = deriveEvents(repository, {
-  const reactions = deriveEvents(repository, {filters})
+    filters: [{kinds: [REACTION], "#e": [event.id]}],
+  })
 
   $: groupedReactions = groupBy(
     e => e.content,
@@ -26,7 +27,7 @@
   onMount(() => {
     load({
       relays,
-      filters,
+      filters: [{kinds: [REACTION, DELETE], "#e": [event.id]}],
       onEvent: batch(300, (events: TrustedEvent[]) => {
         load({
           relays,

src/app/components/ThreadActions.svelte

@@ -17,7 +17,6 @@
   import {publishDelete, publishReaction} from "@app/commands"
   import {notifications} from "@app/notifications"
   import {makeSpacePath} from "@app/routes"
-  import {PROTECTED} from "@app/state"
 
   export let url
   export let event
@@ -39,12 +38,12 @@
     if (reaction) {
       publishDelete({relays: [url], event: reaction})
     } else {
-      publishReaction({event, content, tags: [PROTECTED], relays: [url]})
+      publishReaction({event, content, relays: [url]})
     }
   }
 
   const onEmoji = (emoji: NativeEmoji) =>
-    publishReaction({event, content: emoji.unicode, tags: [PROTECTED], relays: [url]})
+    publishReaction({event, content: emoji.unicode, relays: [url]})
 
   let popover: Instance