Use publishThunks

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm run lint
+npm run check

package-lock.json

@@ -26,6 +26,7 @@
         "@tiptap/extension-placeholder": "^2.9.1",
         "@tiptap/extension-text": "^2.6.6",
         "@tiptap/suggestion": "^2.6.4",
+        "@types/qrcode": "^1.5.5",
         "@types/throttle-debounce": "^5.0.2",
         "@vite-pwa/assets-generator": "^0.2.6",
         "@vite-pwa/sveltekit": "^0.6.6",
@@ -43,6 +44,7 @@
         "dotenv": "^16.4.5",
         "emoji-picker-element": "^1.22.8",
         "fuse.js": "^7.0.0",
+        "husky": "^9.1.6",
         "idb": "^8.0.0",
         "nostr-editor": "^0.0.3",
         "nostr-tools": "^2.7.2",
@@ -3764,6 +3766,15 @@
       "integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
       "dev": true
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -6555,6 +6566,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/husky": {
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.6.tgz",
+      "integrity": "sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==",
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ico-endec": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/ico-endec/-/ico-endec-0.1.6.tgz",

package.json

@@ -9,7 +9,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "prepare": "husky"
   },
   "devDependencies": {
     "@sveltejs/kit": "^2.0.0",
@@ -51,6 +52,7 @@
     "@tiptap/extension-placeholder": "^2.9.1",
     "@tiptap/extension-text": "^2.6.6",
     "@tiptap/suggestion": "^2.6.4",
+    "@types/qrcode": "^1.5.5",
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
@@ -68,6 +70,7 @@
     "dotenv": "^16.4.5",
     "emoji-picker-element": "^1.22.8",
     "fuse.js": "^7.0.0",
+    "husky": "^9.1.6",
     "idb": "^8.0.0",
     "nostr-editor": "^0.0.3",
     "nostr-tools": "^2.7.2",

src/app/commands.ts

@@ -30,7 +30,7 @@ import {
   signer,
   repository,
   publishThunk,
-  mergeThunks,
+  publishThunks,
   loadProfile,
   loadInboxRelaySelections,
   profilesByPubkey,
@@ -335,15 +335,13 @@ export const sendWrapped = async ({
 }) => {
   const nip59 = Nip59.fromSigner(signer.get()!)
 
-  return mergeThunks(
+  return publishThunks(
     await Promise.all(
-      uniq(pubkeys).map(async recipient =>
+      uniq(pubkeys).map(async recipient => ({
-        publishThunk({
+        event: await nip59.wrap(recipient, stamp(template)),
-          event: await nip59.wrap(recipient, stamp(template)),
+        relays: ctx.app.router.PubkeyInbox(recipient).getUrls(),
-          relays: ctx.app.router.PubkeyInbox(recipient).getUrls(),
+        delay,
-          delay,
+      })),
-        }),
-      ),
     ),
   )
 }

src/app/components/ChannelConversation.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import {assoc, sortBy, append} from "@welshman/lib"
+  import {sortBy, append} from "@welshman/lib"
   import type {EventContent, TrustedEvent} from "@welshman/util"
   import {repository} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
-  import {thunks, tagRoom, COMMENT} from "@app/state"
+  import {tagRoom, COMMENT} from "@app/state"
   import {publishComment} from "@app/commands"
 
   export let url, room, event: TrustedEvent
@@ -14,16 +14,13 @@
     filters: [{kinds: [COMMENT], "#E": [event.id]}],
   })
 
-  const onSubmit = ({content, tags}: EventContent) => {
+  const onSubmit = ({content, tags}: EventContent) =>
-    const thunk = publishComment({
+    publishComment({
       event,
       content,
       tags: append(tagRoom(room, url), tags),
       relays: [url],
     })
-
-    thunks.update(assoc(thunk.event.id, thunk))
-  }
 </script>
 
 <div class="col-2">

src/app/components/ChannelMessage.svelte

@@ -2,8 +2,13 @@
   import {readable} from "svelte/store"
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
+  import {
-  import type {Thunk} from "@welshman/app"
+    thunks,
+    deriveProfile,
+    deriveProfileDisplay,
+    formatTimestampAsTime,
+    pubkey,
+  } from "@welshman/app"
   import {isMobile} from "@lib/html"
   import LongPress from "@lib/components/LongPress.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
@@ -16,13 +21,12 @@
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import ChannelMessageMenuMobile from "@app/components/ChannelMessageMenuMobile.svelte"
-  import {colors, thunks, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
+  import {colors, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
   import {pushDrawer, pushModal} from "@app/modal"
 
   export let url, room
   export let event: TrustedEvent
-  export let thunk: Thunk
   export let showPubkey = false
   export let isHead = false
   export let inert = false
@@ -90,7 +94,7 @@
       <div class="text-sm">
         <Content {event} />
         {#if thunk}
-          <ThunkStatus {thunk} />
+          <ThunkStatus {thunk} class="mt-2" />
         {/if}
       </div>
     </div>

src/app/components/Chat.svelte

@@ -10,7 +10,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
-  import {int, assoc, MINUTE, sortBy, remove} from "@welshman/lib"
+  import {int, MINUTE, sortBy, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
   import {
@@ -32,14 +32,7 @@
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import {
+  import {userSettingValues, deriveChat, splitChatId, PLATFORM_NAME, pubkeyLink} from "@app/state"
-    thunks,
-    userSettingValues,
-    deriveChat,
-    splitChatId,
-    PLATFORM_NAME,
-    pubkeyLink,
-  } from "@app/state"
   import {pushModal} from "@app/modal"
   import {sendWrapped} from "@app/commands"
 
@@ -61,10 +54,12 @@
 
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
-    const template = createEvent(DIRECT_MESSAGE, {content, tags})
-    const thunk = await sendWrapped({template, pubkeys, delay: $userSettingValues.send_delay})
 
-    thunks.update(assoc(thunk.thunks[0].event.id, thunk))
+    await sendWrapped({
+      pubkeys,
+      template: createEvent(DIRECT_MESSAGE, {content, tags}),
+      delay: $userSettingValues.send_delay,
+    })
   }
 
   let loading = true

src/app/components/ChatMessage.svelte

@@ -2,7 +2,13 @@
   import {type Instance} from "tippy.js"
   import {hash} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
+  import {
+    thunks,
+    deriveProfile,
+    deriveProfileDisplay,
+    formatTimestampAsTime,
+    pubkey,
+  } from "@welshman/app"
   import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
@@ -15,7 +21,7 @@
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import ChatMessageMenuMobile from "@app/components/ChatMessageMenuMobile.svelte"
-  import {colors, pubkeyLink, thunks} from "@app/state"
+  import {colors, pubkeyLink} from "@app/state"
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
   import {pushModal} from "@app/modal"
 

src/app/components/QRCode.svelte

@@ -6,9 +6,10 @@
 
   export let code
 
-  let canvas, wrapper
+  let canvas: Element
+  let wrapper: Element
   let scale = 0.1
-  let height = null
+  let height: number
 
   onMount(() => {
     QRCode.toCanvas(canvas, code)

src/app/components/ThreadActions.svelte

@@ -4,12 +4,13 @@
   import {max} from "@welshman/lib"
   import {deriveEvents, deriveIsDeleted} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
-  import {pubkey, repository, formatTimestampRelative} from "@welshman/app"
+  import {thunks, pubkey, repository, formatTimestampRelative} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
+  import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ThreadMenu from "@app/components/ThreadMenu.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {COMMENT} from "@app/state"
@@ -18,8 +19,8 @@
   export let event
   export let showActivity = false
 
+  const thunk = $thunks[event.id]
   const deleted = deriveIsDeleted(repository, event)
-
   const replies = deriveEvents(repository, {filters: [{kinds: [COMMENT], "#E": [event.id]}]})
 
   const showPopover = () => popover.show()
@@ -49,6 +50,8 @@
   <div class="flex flex-grow flex-wrap justify-end gap-2">
     {#if $deleted}
       <div class="btn btn-error btn-xs rounded-full">Deleted</div>
+    {:else if thunk}
+      <ThunkStatus {thunk} />
     {/if}
     {#if showActivity}
       <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">

src/app/components/ThunkStatus.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {get} from "svelte/store"
   import {PublishStatus} from "@welshman/net"
   import {mergeThunks, publishThunk} from "@welshman/app"
   import type {Thunk, MergedThunk} from "@welshman/app"
@@ -21,7 +22,7 @@
       : publishThunk((thunk as Thunk).request)
   }
 
-  let isPending = true
+  let isPending = Object.values(get(thunk.status)).some(s => s.status == Pending)
 
   $: status = throttled(300, thunk.status)
   $: ps = Object.values($status)
@@ -31,7 +32,7 @@
 
   $: {
     // Delay updating isPending so users can see that the message is sent
-    if (isFailure || !ps.some(s => s.status == Pending)) {
+    if (!ps.some(s => s.status == Pending)) {
       setTimeout(() => {
         isPending = false
       }, 2000)
@@ -39,25 +40,25 @@
   }
 </script>
 
-<div class="flex justify-end px-1 text-xs">
+<div class="flex justify-end px-1 text-xs {$$props.class}">
-  {#if canCancel || isPending}
+  {#if isFailure && failure}
-    <span class="mt-2 flex items-center gap-1">
+    {@const [url, {message, status}] = failure}
+    <Tippy
+      component={ThunkStatusDetail}
+      props={{url, message, status, retry}}
+      params={{interactive: true}}>
+      <span class="tooltip flex cursor-pointer items-center gap-1">
+        <Icon icon="danger" size={3} />
+        <span class="opacity-50">Failed to send!</span>
+      </span>
+    </Tippy>
+  {:else if canCancel || isPending}
+    <span class="flex items-center gap-1">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
       <span class="opacity-50">Sending...</span>
       {#if canCancel}
         <Button class="link" on:click={abort}>Cancel</Button>
       {/if}
     </span>
-  {:else if isFailure && failure}
-    {@const [url, {message, status}] = failure}
-    <Tippy
-      component={ThunkStatusDetail}
-      props={{url, message, status, retry}}
-      params={{interactive: true}}>
-      <span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
-        <Icon icon="danger" size={3} />
-        <span class="opacity-50">Failed to send!</span>
-      </span>
-    </Tippy>
   {/if}
 </div>

src/app/state.ts

@@ -1,5 +1,5 @@
 import twColors from "tailwindcss/colors"
-import {get, derived, writable} from "svelte/store"
+import {get, derived} 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, Thunk} from "@welshman/app"
+import type {AppSyncOpts} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
 import {deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
 
@@ -144,8 +144,6 @@ 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/lib/components/LongPress.svelte

@@ -21,7 +21,7 @@
   const onTouchEnd = () => clearTimeout(timeout)
 
   let touch: Touch
-  let timeout: number
+  let timeout: any
 </script>
 
 <div

src/lib/html.ts

@@ -16,7 +16,7 @@ export const copyToClipboard = (text: string) => {
   return result
 }
 
-type ScrollerOpts = {
+export type ScrollerOpts = {
   onScroll: () => any
   element: Element
   threshold?: number
@@ -24,6 +24,11 @@ type ScrollerOpts = {
   delay?: number
 }
 
+export type Scroller = {
+  check: () => Promise<void>
+  stop: () => void
+}
+
 export const createScroller = ({
   onScroll,
   element,

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

@@ -10,7 +10,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, ago, assoc, append} from "@welshman/lib"
+  import {sortBy, ago, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
   import {formatTimestampAsDate, publishThunk} from "@welshman/app"
@@ -34,7 +34,6 @@
     MESSAGE,
     COMMENT,
     getMembershipRoomsByUrl,
-    thunks,
   } from "@app/state"
   import {subscribePersistent, addRoomMembership, removeRoomMembership} from "@app/commands"
   import {pushDrawer} from "@app/modal"
@@ -49,12 +48,12 @@
 
   const assertEvent = (e: any) => e as TrustedEvent
 
-  const onSubmit = ({content, tags}: EventContent) => {
+  const onSubmit = ({content, tags}: EventContent) =>
-    const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
+    publishThunk({
-    const thunk = publishThunk({event, relays: [url], delay: $userSettingValues.send_delay})
+      relays: [url],
-
+      event: createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)}),
-    thunks.update(assoc(thunk.event.id, thunk))
+      delay: $userSettingValues.send_delay,
-  }
+    })
 
   let loading = true
   let elements: Element[] = []

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

@@ -7,7 +7,7 @@
   import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
   import {nthEq} from "@welshman/lib"
   import {createFeedController, userMutes} from "@welshman/app"
-  import {createScroller} from "@lib/html"
+  import {createScroller, type Scroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -32,7 +32,7 @@
   let limit = 5
   let loading = true
   let element: Element
-  let scroller
+  let scroller: Scroller
 
   onMount(() => {
     let unmounted = false