Make thunks global

src/app/components/ChannelConversation.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-  import {writable} from "svelte/store"
   import {assoc, sortBy, append} from "@welshman/lib"
   import type {EventContent, TrustedEvent} from "@welshman/util"
   import {repository} from "@welshman/app"
-  import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
-  import {tagRoom, COMMENT} from "@app/state"
+  import {thunks, tagRoom, COMMENT} from "@app/state"
   import {publishComment} from "@app/commands"
 
   export let url, room, event: TrustedEvent
 
-  const thunks = writable({} as Record<string, Thunk>)
-
   const replies = deriveEvents(repository, {
     filters: [{kinds: [COMMENT], "#E": [event.id]}],
   })
@@ -32,9 +28,9 @@
 
 <div class="col-2">
   <div class="overflow-auto pt-3">
-    <ChannelMessage {url} {room} {event} thunk={$thunks[event.id]} showPubkey isHead inert />
+    <ChannelMessage {url} {room} {event} showPubkey isHead inert />
     {#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
-      <ChannelMessage {url} {room} event={reply} thunk={$thunks[reply.id]} showPubkey inert />
+      <ChannelMessage {url} {room} event={reply} showPubkey inert />
     {/each}
   </div>
   <div class="bottom-0 left-0 right-0">

src/app/components/ChannelMessage.svelte

@@ -16,7 +16,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, deriveEvent, pubkeyLink} from "@app/state"
+  import {colors, thunks, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
   import {pushDrawer, pushModal} from "@app/modal"
 
@@ -27,6 +27,7 @@
   export let isHead = false
   export let inert = false
 
+  const thunk = $thunks[event.id]
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const rootTag = event.tags.find(t => t[0].match(/^e$/i))

src/app/components/Chat.svelte

@@ -9,7 +9,7 @@
 
 <script lang="ts">
   import {onMount} from "svelte"
-  import {derived, writable} from "svelte/store"
+  import {derived} from "svelte/store"
   import {int, assoc, MINUTE, sortBy, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
@@ -20,7 +20,6 @@
     loadInboxRelaySelections,
     tagPubkey,
   } from "@welshman/app"
-  import type {MergedThunk} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -33,7 +32,14 @@
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import {userSettingValues, deriveChat, splitChatId, PLATFORM_NAME, pubkeyLink} from "@app/state"
+  import {
+    thunks,
+    userSettingValues,
+    deriveChat,
+    splitChatId,
+    PLATFORM_NAME,
+    pubkeyLink,
+  } from "@app/state"
   import {pushModal} from "@app/modal"
   import {sendWrapped} from "@app/commands"
 
@@ -42,7 +48,6 @@
   const chat = deriveChat(id)
   const pubkeys = splitChatId(id)
   const others = remove($pubkey!, pubkeys)
-  const thunks = writable({} as Record<string, MergedThunk>)
   const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
     pubkeys.filter(pk => !$m.has(pk)),
   )
@@ -158,9 +163,7 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        {@const event = assertEvent(value)}
+        <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
-        {@const thunk = $thunks[event.id]}
-        <ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
       {/if}
     {/each}
     <p

src/app/components/ChatMessage.svelte

@@ -3,7 +3,6 @@
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
-  import type {MergedThunk} from "@welshman/app"
   import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
@@ -16,15 +15,15 @@
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import ChatMessageMenuMobile from "@app/components/ChatMessageMenuMobile.svelte"
-  import {colors, pubkeyLink} from "@app/state"
+  import {colors, pubkeyLink, thunks} from "@app/state"
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
   import {pushModal} from "@app/modal"
 
   export let event: TrustedEvent
-  export let thunk: MergedThunk
   export let pubkeys: string[]
   export let showPubkey = false
 
+  const thunk = $thunks[event.id]
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]

src/app/components/InfoBunker.svelte

@@ -27,8 +27,11 @@
   <p>
     If you don't have a signer yet, <Link external class="link" href="https://nsec.app/"
       >nsec.app</Link>
-    is a great way to get started. You can find more signers on <Link external class="link" href="https://nostrapps.com#signers"
+    is a great way to get started. You can find more signers on <Link
-      >nostrapps.com</Link>.
+      external
+      class="link"
+      href="https://nostrapps.com#signers">nostrapps.com</Link
+    >.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/LogIn.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {Capacitor} from '@capacitor/core'
+  import {Capacitor} from "@capacitor/core"
   import {getNip07, getNip55, Nip55Signer} from "@welshman/signer"
   import {addSession, type Session} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"

src/app/components/LogInBunker.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import {onDestroy} from 'svelte'
+  import {onDestroy} from "svelte"
   import {Nip46Broker} from "@welshman/signer"
   import {nip46Perms, addSession} from "@welshman/app"
-  import {slideAndFade} from '@lib/transition'
+  import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -96,7 +96,7 @@
     </div>
   </ModalHeader>
   {#if !loading}
-    <div class="m-auto w-xs" out:slideAndFade>
+    <div class="w-xs m-auto" out:slideAndFade>
       <QRCode code={init.nostrconnect} />
     </div>
   {/if}

src/app/state.ts

@@ -1,5 +1,5 @@
 import twColors from "tailwindcss/colors"
-import {get, derived} from "svelte/store"
+import {get, derived, writable} from "svelte/store"
 import {nip19} from "nostr-tools"
 import type {Maybe} from "@welshman/lib"
 import {
@@ -55,7 +55,7 @@ import {
   userFollows,
   ensurePlaintext,
 } from "@welshman/app"
-import type {AppSyncOpts} from "@welshman/app"
+import type {AppSyncOpts, Thunk} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
 import {deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
 
@@ -144,6 +144,8 @@ export const pubkeyLink = (
   relays = ctx.app.router.FromPubkeys([pubkey]).getUrls(),
 ) => entityLink(nip19.nprofileEncode({pubkey, relays}))
 
+export const thunks = writable({} as Record<string, Thunk>)
+
 export const tagRoom = (room: string, url: string) => [ROOM, room, url]
 
 export const getDefaultPubkeys = () => {

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -10,12 +10,10 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {writable} from "svelte/store"
   import {sortBy, ago, assoc, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
   import {formatTimestampAsDate, publishThunk} from "@welshman/app"
-  import type {Thunk} from "@welshman/app"
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -36,6 +34,7 @@
     MESSAGE,
     COMMENT,
     getMembershipRoomsByUrl,
+    thunks,
   } from "@app/state"
   import {subscribePersistent, addRoomMembership, removeRoomMembership} from "@app/commands"
   import {pushDrawer} from "@app/modal"
@@ -45,7 +44,6 @@
   const content = popKey<string>("content") || ""
   const url = decodeRelay($page.params.relay)
   const channel = deriveChannel(makeChannelId(url, room))
-  const thunks = writable({} as Record<string, Thunk>)
 
   const openMenu = () => pushDrawer(MenuSpace, {url})
 
@@ -137,10 +135,8 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        {@const event = assertEvent(value)}
-        {@const thunk = $thunks[event.id]}
         <div in:slide>
-          <ChannelMessage {url} {room} {event} {thunk} {showPubkey} />
+          <ChannelMessage {url} {room} event={assertEvent(value)} {showPubkey} />
         </div>
       {/if}
     {/each}