From 7901581a5895ceb2e3fcf0b536869a3fd9263093 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Wed, 18 Oct 2023 17:06:00 +0900
Subject: [PATCH 1/2] Show 0 reactions

---
 web/src/routes/[slug=note]/+page.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/[slug=note]/+page.svelte b/web/src/routes/[slug=note]/+page.svelte
index c48376af5..72ce02524 100644
--- a/web/src/routes/[slug=note]/+page.svelte
+++ b/web/src/routes/[slug=note]/+page.svelte
@@ -209,7 +209,7 @@
 	<span class="count">{repostEventItems.length}</span>
 	<ProfileIconList metadataList={repostMetadataList} />
 </section>
-{#each [...reactionMetadataMap] as [content, items]}
+{#each [...reactionMetadataMap] as [content, metadataList]}
 	<section class="reaction counter card">
 		<span class="icon" class:heart={content === '+'}>
 			{#if content === '+'}
@@ -220,7 +220,15 @@
 				<span>{content}</span>
 			{/if}
 		</span>
-		<span class="count">{items.length}</span>
+		<span class="count">{metadataList.length}</span>
+		<ProfileIconList metadataList={metadataList.map(item => $metadataStore.get(item.event.pubkey))} />
+	</section>
+{:else}
+	<section class="reaction counter card">
+		<span class="icon heart">
+			<IconHeart />
+		</span>
+		<span class="count">0</span>
 		<ProfileIconList metadataList={items.map(item => $metadataStore.get(item.event.pubkey))} />
 	</section>
 {/each}

From f81837c555cfb411962dd1f59072b0c53abed4df Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Wed, 18 Oct 2023 17:52:23 +0900
Subject: [PATCH 2/2] Zap users

---
 web/src/routes/[slug=note]/+page.svelte | 48 +++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/web/src/routes/[slug=note]/+page.svelte b/web/src/routes/[slug=note]/+page.svelte
index 72ce02524..56c73df20 100644
--- a/web/src/routes/[slug=note]/+page.svelte
+++ b/web/src/routes/[slug=note]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Event } from 'nostr-typedef';
 	import { createRxOneshotReq, filterKind, uniq, type LazyFilter } from 'rx-nostr';
 	import { tap } from 'rxjs';
 	import { rxNostr, referencesReqEmit } from '$lib/timelines/MainTimeline';
@@ -17,6 +18,7 @@
 	import CustomEmoji from '../content/CustomEmoji.svelte';
 	import IconRepeat from '@tabler/icons-svelte/dist/svelte/icons/IconRepeat.svelte';
 	import IconHeart from '@tabler/icons-svelte/dist/svelte/icons/IconHeart.svelte';
+	import IconBolt from '@tabler/icons-svelte/dist/svelte/icons/IconBolt.svelte';
 
 	export let data: PageData;
 
@@ -34,6 +36,7 @@
 	let repliedToEventItems: EventItem[] = [];
 	let repostEventItems: EventItem[] = [];
 	let reactionEventItems: EventItem[] = [];
+	let zapEventItems: EventItem[] = [];
 
 	let customEmojiShortcode = new Map<string, string>();
 
@@ -69,6 +72,11 @@
 		return map;
 	}, new Map<string, EventItem[]>());
 
+	$: zapMetadataList =
+		zapEventItems
+			.map((x) => $metadataStore.get(x.event.pubkey))
+			.filter((x): x is Metadata => x !== undefined);
+
 	$: if (eventId !== data.eventId) {
 		eventId = data.eventId;
 		console.log('[thread event id]', eventId);
@@ -126,6 +134,34 @@
 			reactionEventItems.push(eventItem);
 			reactionEventItems = reactionEventItems;
 		});
+
+		// Zap
+		observable.pipe(filterKind(9735)).subscribe(packet => {
+			console.log('[thread kind 9735]', packet);
+
+			let event: Event | undefined;
+			const description = packet.event.tags
+				.find(([tagName, tagContent]) => tagName === 'description' && tagContent !== undefined)
+				?.at(1);
+			if (description !== undefined) {
+				console.log('[thread kind 9734]', description);
+				try {
+					event = JSON.parse(description) as Event;
+					referencesReqEmit(event, true);
+				} catch (error) {
+					console.log('[zap description parse error]', description);
+				}
+			}
+
+			if (event === undefined) {
+				return;
+			}
+
+			const eventItem = new EventItem(event);
+			zapEventItems.sort(chronologicalItem);
+			zapEventItems.push(eventItem);
+			zapEventItems = zapEventItems;
+		});
 	}
 
 	$: if (item !== undefined) {
@@ -175,6 +211,7 @@
 		repliedToEventItems = [];
 		repostEventItems = [];
 		reactionEventItems = [];
+		zapEventItems = [];
 		customEmojiShortcode = new Map<string, string>();
 	}
 </script>
@@ -232,6 +269,13 @@
 		<ProfileIconList metadataList={items.map(item => $metadataStore.get(item.event.pubkey))} />
 	</section>
 {/each}
+<section class="zap counter card">
+	<span class="icon"><IconBolt /></span>
+	{#if zapMetadataList.length === 0}
+		<span class="count">-</span>
+	{/if}
+	<ProfileIconList metadataList={zapMetadataList} />
+</section>
 {#if $author !== undefined && item !== undefined}
 	<div class="mute">
 		<MuteButton tagName="e" tagContent={rootId === undefined ? item.event.id : rootId} />
@@ -278,6 +322,10 @@
 		color: var(--red);
 	}
 
+	.zap .icon {
+		color: var(--yellow);
+	}
+
 	.mute {
 		margin-top: 16px;
 		display: flex;