From 60d107aed2ae7ab3e8ac13f748fc8e6d164b94b9 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 18 Feb 2025 17:15:41 -0800
Subject: [PATCH] Fix some state stuff, snapshot things in the right places

---
 src/app/components/ChannelMessageMenuMobile.svelte | 10 ++++++++--
 src/app/components/Chat.svelte                     |  8 +++++---
 src/app/components/ChatMessageMenuMobile.svelte    |  2 +-
 src/app/components/EventDeleteConfirm.svelte       | 12 ++++++++----
 src/app/components/ModalContainer.svelte           |  2 +-
 src/app/requests.ts                                |  6 ++++--
 src/routes/spaces/[relay]/[room]/+page.svelte      |  9 ++++++---
 src/routes/spaces/[relay]/threads/+page.svelte     |  4 +---
 8 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/app/components/ChannelMessageMenuMobile.svelte b/src/app/components/ChannelMessageMenuMobile.svelte
index 8a362725..67a5d372 100644
--- a/src/app/components/ChannelMessageMenuMobile.svelte
+++ b/src/app/components/ChannelMessageMenuMobile.svelte
@@ -10,12 +10,18 @@
   import {publishReaction} from "@app/commands"
   import {pushModal} from "@app/modal"
 
-  const {url, event, reply} = $props()
+  type Props = {
+    url: string
+    event: TrustedEvent
+    reply: () => void
+  }
+
+  const {url, event, reply}: Props = $props()
 
   const onEmoji = ((event: TrustedEvent, url: string, emoji: NativeEmoji) => {
     history.back()
     publishReaction({event, relays: [url], content: emoji.unicode})
-  }).bind(undefined, $state.snapshot(event), url)
+  }).bind(undefined, event, url)
 
   const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
 
diff --git a/src/app/components/Chat.svelte b/src/app/components/Chat.svelte
index 4efdb8b7..3cdd35ea 100644
--- a/src/app/components/Chat.svelte
+++ b/src/app/components/Chat.svelte
@@ -42,8 +42,6 @@
   const others = remove($pubkey!, pubkeys)
   const missingInboxes = $derived(pubkeys.filter(pk => !$inboxRelaySelectionsByPubkey.has(pk)))
 
-  const assertEvent = (e: any) => e as TrustedEvent
-
   const showMembers = () =>
     pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
 
@@ -196,7 +194,11 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} {replyTo} />
+        <ChatMessage
+          event={$state.snapshot(value as TrustedEvent)}
+          {pubkeys}
+          {showPubkey}
+          {replyTo} />
       {/if}
     {/each}
     <p
diff --git a/src/app/components/ChatMessageMenuMobile.svelte b/src/app/components/ChatMessageMenuMobile.svelte
index e7c0c3ae..aadd9f0e 100644
--- a/src/app/components/ChatMessageMenuMobile.svelte
+++ b/src/app/components/ChatMessageMenuMobile.svelte
@@ -14,7 +14,7 @@
   const onEmoji = ((event: TrustedEvent, emoji: NativeEmoji) => {
     history.back()
     sendWrapped({template: makeReaction({event, content: emoji.unicode}), pubkeys})
-  }).bind(undefined, $state.snapshot(event))
+  }).bind(undefined, event)
 
   const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
 
diff --git a/src/app/components/EventDeleteConfirm.svelte b/src/app/components/EventDeleteConfirm.svelte
index b13c5c9c..52391430 100644
--- a/src/app/components/EventDeleteConfirm.svelte
+++ b/src/app/components/EventDeleteConfirm.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
   import Confirm from "@lib/components/Confirm.svelte"
   import {publishDelete} from "@app/commands"
   import {clearModals} from "@app/modal"
 
-  const {url, event} = $props()
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
 
   const confirm = async () => {
-    const snapshot = $state.snapshot(event)
-
-    await publishDelete({event: snapshot, relays: [url]})
+    await publishDelete({event, relays: [url]})
 
     clearModals()
   }
diff --git a/src/app/components/ModalContainer.svelte b/src/app/components/ModalContainer.svelte
index 070f1282..b64cfc2c 100644
--- a/src/app/components/ModalContainer.svelte
+++ b/src/app/components/ModalContainer.svelte
@@ -10,7 +10,7 @@
     }
   }
 
-  let modal: any = $state()
+  let modal: any = $state.raw()
   const hash = $derived($page.url.hash.slice(1))
   const hashIsValid = $derived(Boolean($modals[hash]))
 
diff --git a/src/app/requests.ts b/src/app/requests.ts
index 3737b43b..31fb7fa6 100644
--- a/src/app/requests.ts
+++ b/src/app/requests.ts
@@ -322,7 +322,9 @@ export const listenForNotifications = () => {
       relays: [url],
       filters: [
         {kinds: [THREAD], limit: 1},
+        {kinds: [EVENT_TIME], limit: 1},
         {kinds: [COMMENT], "#K": [String(THREAD)], limit: 1},
+        {kinds: [COMMENT], "#K": [String(EVENT_TIME)], limit: 1},
         ...rooms.map(room => ({kinds: [MESSAGE], "#h": [room], limit: 1})),
       ],
     })
@@ -331,8 +333,8 @@ export const listenForNotifications = () => {
       subscribe({
         relays: [url],
         filters: [
-          {kinds: [THREAD], since: now()},
-          {kinds: [COMMENT], "#K": [String(THREAD)], since: now()},
+          {kinds: [THREAD, EVENT_TIME], since: now()},
+          {kinds: [COMMENT], "#K": [String(THREAD), String(EVENT_TIME)], since: now()},
           ...rooms.map(room => ({kinds: [MESSAGE], "#h": [room], since: now()})),
         ],
       }),
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index cbec187f..beeec534 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/src/routes/spaces/[relay]/[room]/+page.svelte
@@ -46,8 +46,6 @@
   const filter = {kinds: [MESSAGE], "#h": [room]}
   const relay = deriveRelay(url)
 
-  const assertEvent = (e: any) => e as TrustedEvent
-
   const joinRoom = async () => {
     if (hasNip29($relay)) {
       joiningRoom = true
@@ -275,7 +273,12 @@
         <Divider>{value}</Divider>
       {:else}
         <div in:slide class:-mt-1={!showPubkey}>
-          <ChannelMessage {url} {room} {replyTo} event={assertEvent(value)} {showPubkey} />
+          <ChannelMessage
+            {url}
+            {room}
+            {replyTo}
+            event={$state.snapshot(value as TrustedEvent)}
+            {showPubkey} />
         </div>
       {/if}
     {/each}
diff --git a/src/routes/spaces/[relay]/threads/+page.svelte b/src/routes/spaces/[relay]/threads/+page.svelte
index cf145d9d..ac45767b 100644
--- a/src/routes/spaces/[relay]/threads/+page.svelte
+++ b/src/routes/spaces/[relay]/threads/+page.svelte
@@ -42,8 +42,6 @@
     return sortBy(e => -max([scores.get(e.id), e.created_at]), threads)
   })
 
-  $inspect({threads, comments, events})
-
   onMount(() => {
     const {cleanup} = makeFeed({
       element: element!,
@@ -98,7 +96,7 @@
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
     {#each events as event (event.id)}
       <div in:fly>
-        <ThreadItem {url} {event} />
+        <ThreadItem {url} event={$state.snapshot(event)} />
       </div>
     {/each}
     <p class="flex h-10 items-center justify-center py-20">