Add zaps

src/app/components/ReactionSummary.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Snippet} from "svelte"
-  import {groupBy, uniq, uniqBy, batch, displayList} from "@welshman/lib"
+  import {groupBy, sum, uniq, uniqBy, batch, displayList} from "@welshman/lib"
   import {
     REACTION,
+    ZAP_RESPONSE,
     getReplyFilters,
     getEmojiTags,
     getEmojiTag,
@@ -11,10 +12,10 @@
     REPORT,
     DELETE,
   } from "@welshman/util"
-  import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
+  import type {TrustedEvent, EventContent, Zap} from "@welshman/util"
+  import {deriveEvents, deriveEventsMapped} from "@welshman/store"
   import {load} from "@welshman/net"
-  import {pubkey, repository, displayProfileByPubkey} from "@welshman/app"
+  import {pubkey, repository, getValidZap, displayProfileByPubkey} from "@welshman/app"
   import {isMobile, preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
@@ -49,6 +50,12 @@
     filters: [{kinds: [REACTION], "#e": [event.id]}],
   })
 
+  const zaps = deriveEventsMapped<Zap>(repository, {
+    filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
+    itemToEvent: item => item.response,
+    eventToItem: (response: TrustedEvent) => getValidZap(response, event),
+  })
+
   const onReactionClick = (events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
 
@@ -77,6 +84,13 @@
     ),
   )
 
+  const groupedZaps = $derived(
+    groupBy(
+      e => getReactionKey(e.request),
+      uniqBy(e => `${e.request.pubkey}${getReactionKey(e.request)}`, $zaps),
+    ),
+  )
+
   onMount(() => {
     const controller = new AbortController()
 
@@ -84,7 +98,7 @@
       load({
         relays: [url],
         signal: controller.signal,
-        filters: getReplyFilters([event], {kinds: [REACTION, REPORT, DELETE]}),
+        filters: getReplyFilters([event], {kinds: [REACTION, REPORT, DELETE, ZAP_RESPONSE]}),
         onEvent: batch(300, (events: TrustedEvent[]) => {
           load({
             relays: [url],
@@ -100,7 +114,7 @@
   })
 </script>
 
-{#if $reactions.length > 0 || $reports.length > 0}
+{#if $reactions.length > 0 || $zaps.length || $reports.length > 0}
   <div class="flex min-w-0 flex-wrap gap-2">
     {#if url && $reports.length > 0}
       <button
@@ -113,6 +127,24 @@
         <span>{$reports.length}</span>
       </button>
     {/if}
+    {#each groupedZaps.entries() as [key, zaps]}
+      {@const amount = sum(zaps.map(zap => zap.invoiceAmount))}
+      {@const pubkeys = zaps.map(zap => zap.request.pubkey)}
+      {@const isOwn = $pubkey && pubkeys.includes($pubkey)}
+      {@const info = displayList(pubkeys.map(pubkey => displayProfileByPubkey(pubkey)))}
+      {@const tooltip = `${info} zapped`}
+      <button
+        type="button"
+        data-tip={tooltip}
+        class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full {reactionClass}"
+        class:tooltip={!noTooltip && !isMobile}
+        class:border={isOwn}
+        class:border-solid={isOwn}
+        class:border-primary={isOwn}>
+        <Reaction event={zaps[0].request} />
+        <span>{amount}</span>
+      </button>
+    {/each}
     {#each groupedReactions.entries() as [key, events]}
       {@const pubkeys = events.map(e => e.pubkey)}
       {@const isOwn = $pubkey && pubkeys.includes($pubkey)}