remove redundant room syncing logic

Co-authored-by: Khushvendra <khushvendras99@gmail.com>
Co-committed-by: Khushvendra <khushvendras99@gmail.com>

.fdignore

@@ -13,4 +13,4 @@ ios/App/Pods/
 android/capacitor-cordova-android-plugins
 android/app/src/androidTest
 android/app/src/test
-
+node_modules

android/app/src/main/java/social/flotilla/notifications/AndroidPushFallbackPlugin.kt

@@ -7,6 +7,7 @@ import androidx.work.ExistingPeriodicWorkPolicy
 import androidx.work.ExistingWorkPolicy
 import androidx.work.NetworkType
 import androidx.work.OneTimeWorkRequest
+import androidx.work.OutOfQuotaPolicy
 import androidx.work.PeriodicWorkRequest
 import androidx.work.WorkManager
 import com.getcapacitor.JSObject
@@ -76,6 +77,7 @@ class AndroidPushFallbackPlugin : Plugin() {
 
     val immediate = OneTimeWorkRequest.Builder(AndroidPushFallbackWorker::class.java)
       .setConstraints(constraints)
+      .setExpedited(OutOfQuotaPolicy.RUN_AS_NON_EXPEDITED_WORK_REQUEST)
       .build()
 
     workManager.enqueueUniquePeriodicWork(

android/app/src/main/java/social/flotilla/notifications/AndroidPushFallbackWorker.kt

@@ -43,7 +43,7 @@ class AndroidPushFallbackWorker(context: Context, params: WorkerParameters) : Wo
     private const val TAG = "PushFallback"
     private const val CHANNEL_ID = "flotilla_fallback"
     private const val CURSOR_PREFIX = "androidPushFallback.cursor."
-    private const val SOCKET_TIMEOUT_SECONDS = 20L
+    private const val SOCKET_TIMEOUT_SECONDS = 30L
     private const val REJECTED = "__REJECTED__"
     private const val KIND_RELAY_AUTH = 22242
     private const val KIND_NIP46_RPC = 24133
@@ -72,6 +72,8 @@ class AndroidPushFallbackWorker(context: Context, params: WorkerParameters) : Wo
   }
 
   override fun doWork(): Result {
+    Log.i(TAG, "doWork() started")
+
     if (isAppInForeground()) {
       return Result.success()
     }
@@ -88,7 +90,7 @@ class AndroidPushFallbackWorker(context: Context, params: WorkerParameters) : Wo
 
       val activeSince = state.optLong("activeSince", 0L)
       val seen = mutableSetOf<String>()
-      var latestPair: Pair<String, JSONObject>? = null
+      val newEvents = mutableListOf<Pair<String, JSONObject>>()
 
       for (sub in subscriptions) {
         val cursorKey = CURSOR_PREFIX + sub.relay + ":" + sub.key
@@ -102,23 +104,19 @@ class AndroidPushFallbackWorker(context: Context, params: WorkerParameters) : Wo
         for (event in result.events) {
           val id = event.optString("id", "")
           if (id.isNotEmpty() && seen.add(id)) {
-            val createdAt = event.optLong("created_at", 0L)
+            newEvents.add(Pair(sub.relay, event))
-            if (latestPair == null || createdAt > latestPair!!.second.optLong("created_at", 0L)) {
-              latestPair = Pair(sub.relay, event)
-            }
           }
         }
       }
 
-      if (latestPair != null) {
+      for ((relay, event) in newEvents) {
-        val (relay, event) = latestPair!!
         postNotification(relay, event)
       }
 
       return Result.success()
     } catch (e: Exception) {
       Log.e(TAG, "Worker failed", e)
-      return Result.success()
+      return Result.retry()
     } finally {
       pool.closeAll()
       client.dispatcher.executorService.shutdown()
@@ -214,7 +212,8 @@ class AndroidPushFallbackWorker(context: Context, params: WorkerParameters) : Wo
       .setContentIntent(pendingIntent)
       .build()
 
-    NotificationManagerCompat.from(context).notify(1, notification)
+    val notificationId = id.hashCode().let { if (it == 0) 1 else it }
+    NotificationManagerCompat.from(context).notify(notificationId, notification)
   }
 
   private fun matchesFilter(filter: JSONObject, event: JSONObject): Boolean {

package.json

@@ -48,6 +48,7 @@
     "@capacitor/android": "^8.0.1",
     "@capacitor/app": "^8.0.0",
     "@capacitor/cli": "^8.0.1",
+    "@capacitor/clipboard": "^8.0.1",
     "@capacitor/core": "^8.0.1",
     "@capacitor/filesystem": "^8.1.0",
     "@capacitor/ios": "^8.0.1",
@@ -63,6 +64,7 @@
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
+    "@tiptap/pm": "^2.27.2",
     "@types/qrcode": "^1.5.6",
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@capacitor/cli':
         specifier: ^8.0.1
         version: 8.0.1
+      '@capacitor/clipboard':
+        specifier: ^8.0.1
+        version: 8.0.1(@capacitor/core@8.0.1)
       '@capacitor/core':
         specifier: ^8.0.1
         version: 8.0.1
@@ -71,6 +74,9 @@ importers:
       '@tiptap/core':
         specifier: ^2.27.2
         version: 2.27.2(@tiptap/pm@2.27.2)
+      '@tiptap/pm':
+        specifier: ^2.27.2
+        version: 2.27.2
       '@types/qrcode':
         specifier: ^1.5.6
         version: 1.5.6
@@ -791,6 +797,11 @@ packages:
     engines: {node: '>=22.0.0'}
     hasBin: true
 
+  '@capacitor/clipboard@8.0.1':
+    resolution: {integrity: sha512-iOlbTi8MojKyLnYE+M27priXid7vHd0PlDwyHohPzkuQ8Rkp6q7ykwZmPEUD+OnU/Ink7Qw/pUOfKgraKmA6Eg==}
+    peerDependencies:
+      '@capacitor/core': '>=8.0.0'
+
   '@capacitor/core@8.0.1':
     resolution: {integrity: sha512-5UqSWxGMp/B8KhYu7rAijqNtYslhcLh+TrbfU48PfdMDsPfaU/VY48sMNzC22xL8BmoFoql/3SKyP+pavTOvOA==}
 
@@ -5969,6 +5980,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@capacitor/clipboard@8.0.1(@capacitor/core@8.0.1)':
+    dependencies:
+      '@capacitor/core': 8.0.1
+
   '@capacitor/core@8.0.1':
     dependencies:
       tslib: 2.8.1

src/app.css

@@ -327,7 +327,7 @@
 
 .note-editor .tiptap {
   --tiptap-object-bg: var(--color-base-200);
-  @apply input rounded-box h-auto min-h-32 p-[.65rem] pb-6;
+  @apply input rounded-box block h-auto min-h-32 w-full p-[.65rem] pb-6;
 }
 
 .input-editor .tiptap {

src/app/components/CalendarEventCreate.svelte

@@ -7,12 +7,13 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
 </script>
 
-<CalendarEventForm {url} {h}>
+<CalendarEventForm {url} {h} {shareToChat}>
   {#snippet header()}
     <ModalHeader>
       <ModalTitle>Create an Event</ModalTitle>

src/app/components/CalendarEventForm.svelte

@@ -3,7 +3,7 @@
   import {writable} from "svelte/store"
   import {randomId, HOUR} from "@welshman/lib"
   import {makeEvent, EVENT_TIME} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import {daysBetween} from "@lib/util"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
@@ -22,7 +22,7 @@
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
 
   type Values = {
     d: string
@@ -36,11 +36,12 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
     header: Snippet
     initialValues?: Values
   }
 
-  let {url, h, header, initialValues}: Props = $props()
+  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`calendar:${url}:${h ?? ""}`)
 
@@ -57,7 +58,7 @@
   const selectFiles = () => editor.then(ed => ed.chain().selectFiles().run())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return
 
     if (!title) {
       return pushToast({
@@ -92,22 +93,42 @@
       ...ed.storage.nostr.getEditorTags(),
     ]
 
-    if (await shouldProtect) {
+    loading = true
-      tags.push(PROTECTED)
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      const event = makeEvent(EVENT_TIME, {content, tags})
+      const calendarThunk = publishThunk({event, relays: [url]})
+      const error = await waitForThunkError(calendarThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: calendarThunk.event, protect})
+      }
+
+      pushToast({message: "Your event has been saved!"})
+    } finally {
+      loading = false
     }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    const event = makeEvent(EVENT_TIME, {content, tags})
-
-    pushToast({message: "Your event has been saved!"})
-    publishThunk({event, relays: [url]})
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   const d = $state(initialValues?.d ?? randomId())
   let title = $state(initialValues?.title ?? "")
   let location = $state(initialValues?.location ?? "")
@@ -158,7 +179,11 @@
           <div class="input-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
-          <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
+          <Button
+            data-tip="Add an image"
+            class="center btn tooltip"
+            onclick={selectFiles}
+            disabled={loading}>
             {#if $uploading}
               <span class="loading loading-spinner loading-xs"></span>
             {:else}
@@ -197,12 +222,12 @@
     </Field>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={$uploading}>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
-      <Spinner loading={$uploading}>Save Event</Spinner>
+      <Spinner loading={$uploading || loading}>Save Event</Spinner>
     </Button>
   </ModalFooter>
 </Modal>

src/app/components/ClassifiedCreate.svelte

@@ -7,12 +7,13 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
 </script>
 
-<ClassifiedForm {url} {h}>
+<ClassifiedForm {url} {h} {shareToChat}>
   {#snippet header()}
     <ModalHeader>
       <ModalTitle>Create a Classified Listing</ModalTitle>

src/app/components/ClassifiedForm.svelte

@@ -2,7 +2,7 @@
   import type {Snippet} from "svelte"
   import {removeUndefined, randomId, uniq} from "@welshman/lib"
   import {makeEvent, CLASSIFIED} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
   import {normalizeTopic} from "@lib/util"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -21,7 +21,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70, uploadFile} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote, uploadFile} from "@app/core/commands"
 
   type Values = {
     d: string
@@ -37,11 +37,12 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
     header: Snippet
     initialValues?: Values
   }
 
-  let {url, h, header, initialValues}: Props = $props()
+  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`classified:${url}:${h ?? ""}`)
 
@@ -87,7 +88,9 @@
         tags.push(["t", topic])
       }
 
-      if (await shouldProtect) {
+      const protect = await shouldProtect
+
+      if (protect) {
         tags.push(PROTECTED)
       }
 
@@ -114,13 +117,23 @@
         }
       }
 
-      publishThunk({
+      const classifiedThunk = publishThunk({
         relays: [url],
         event: makeEvent(CLASSIFIED, {content, tags}),
       })
 
+      const error = await waitForThunkError(classifiedThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
       draftKey.clear()
       history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: classifiedThunk.event, protect})
+      }
     } finally {
       loading = false
     }

src/app/components/ComposeMenu.svelte

@@ -22,15 +22,15 @@
 
   const {url, h, onClick}: Props = $props()
 
-  const createGoal = () => pushModal(GoalCreate, {url, h})
+  const createGoal = () => pushModal(GoalCreate, {url, h, shareToChat: true})
 
-  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h})
+  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h, shareToChat: true})
 
-  const createThread = () => pushModal(ThreadCreate, {url, h})
+  const createThread = () => pushModal(ThreadCreate, {url, h, shareToChat: true})
 
-  const createClassified = () => pushModal(ClassifiedCreate, {url, h})
+  const createClassified = () => pushModal(ClassifiedCreate, {url, h, shareToChat: true})
 
-  const createPoll = () => pushModal(PollCreate, {url, h})
+  const createPoll = () => pushModal(PollCreate, {url, h, shareToChat: true})
 
   let ul: Element
 

src/app/components/ContentLinkBlock.svelte

@@ -5,30 +5,32 @@
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
   import {
     dufflepud,
-    PLATFORM_URL,
     IMAGE_CONTENT_TYPES,
+    PLATFORM_URL,
     VIDEO_CONTENT_TYPES,
     THUMBNAIL_URL,
+    isRoomId,
   } from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   let hideImage = $state(false)
 
   const url = value.url.toString()
-  const fileType = getTagValue("file-type", event.tags) || ""
+  const isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
   const [href, external] = call(() => {
-    if (isRelayUrl(url)) return [makeSpacePath(url), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
 
     return [url, true]
   })
 
+  const fileType = getTagValue("file-type", event.tags) || ""
+
   const getVideoPoster = (videoUrl: string): string | undefined => {
     if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
       return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
@@ -54,46 +56,52 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-<Link {external} {href} class="my-2 block">
+{#if isRoomOrRelay}
-  <div class="overflow-hidden rounded-box">
+  <div>
-    {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
+    <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
-      <video
-        controls
-        src={url}
-        poster={getVideoPoster(url)}
-        preload="metadata"
-        class="max-h-96 rounded-box object-contain object-center">
-        <track kind="captions" />
-      </video>
-    {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
-      <button type="button" onclick={stopPropagation(preventDefault(expand))}>
-        <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
-      </button>
-    {:else}
-      {#await loadPreview()}
-        <div class="center my-12 w-full">
-          <span class="loading loading-spinner"></span>
-        </div>
-      {:then preview}
-        <div class="bg-alt flex max-w-xl flex-col leading-normal">
-          {#if preview.image && !hideImage}
-            <img
-              alt=""
-              onerror={onError}
-              src={preview.image}
-              class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
-          {/if}
-          <div class="flex flex-col gap-2 p-4">
-            <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
-              >{preview.title || displayUrl(url)}</strong>
-            <p>{ellipsize(preview.description, 140)}</p>
-          </div>
-        </div>
-      {:catch}
-        <p class="bg-alt p-12 text-center leading-normal">
-          Unable to load a preview for {url}
-        </p>
-      {/await}
-    {/if}
   </div>
-</Link>
+{:else}
+  <Link {external} {href} class="my-2 block">
+    <div class="overflow-hidden rounded-box">
+      {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
+        <video
+          controls
+          src={url}
+          poster={getVideoPoster(url)}
+          preload="metadata"
+          class="max-h-96 rounded-box object-contain object-center">
+          <track kind="captions" />
+        </video>
+      {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
+        <button type="button" onclick={stopPropagation(preventDefault(expand))}>
+          <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
+        </button>
+      {:else}
+        {#await loadPreview()}
+          <div class="center my-12 w-full">
+            <span class="loading loading-spinner"></span>
+          </div>
+        {:then preview}
+          <div class="bg-alt flex max-w-xl flex-col leading-normal">
+            {#if preview.image && !hideImage}
+              <img
+                alt=""
+                onerror={onError}
+                src={preview.image}
+                class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
+            {/if}
+            <div class="flex flex-col gap-2 p-4">
+              <strong class="overflow-hidden text-ellipsis whitespace-nowrap"
+                >{preview.title || displayUrl(url)}</strong>
+              <p>{ellipsize(preview.description, 140)}</p>
+            </div>
+          </div>
+        {:catch}
+          <p class="bg-alt p-12 text-center leading-normal">
+            Unable to load a preview for {url}
+          </p>
+        {/await}
+      {/if}
+    </div>
+  </Link>
+{/if}

src/app/components/ContentLinkInline.svelte

@@ -1,25 +1,18 @@
 <script lang="ts">
-  import {call, displayUrl} from "@welshman/lib"
+  import {displayUrl} from "@welshman/lib"
-  import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import ContentLinkUrl from "@app/components/ContentLinkUrl.svelte"
   import {pushModal} from "@app/util/modal"
-  import {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
+  import {IMAGE_CONTENT_TYPES} from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   const url = value.url.toString()
   const fileType = getTagValue("file-type", event.tags) || ""
-  const [href, external] = call(() => {
-    if (isRelayUrl(url)) return [makeSpacePath(url), false]
-    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
-
-    return [url, true]
-  })
 
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
@@ -34,8 +27,5 @@
     {displayUrl(url)}
   </a>
 {:else}
-  <Link {external} {href} class="link-content whitespace-nowrap">
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
-    <Icon icon={LinkRound} size={3} class="inline-block" />
-    {displayUrl(url)}
-  </Link>
 {/if}

src/app/components/ContentLinkUrl.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import {call, displayUrl} from "@welshman/lib"
+  import {displayRelayUrl, isRelayUrl, normalizeRelayUrl} from "@welshman/util"
+  import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import {PLATFORM_URL, displayRoom, isRoomId, splitRoomId} from "@app/core/state"
+  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
+
+  const {
+    url,
+    class: className = "",
+  }: {
+    url: string
+    class?: string
+  } = $props()
+
+  const roomReference = call(() => {
+    if (!isRoomId(url)) {
+      return undefined
+    }
+
+    const [roomUrl, h] = splitRoomId(url)
+
+    if (!roomUrl || !h || !isRelayUrl(roomUrl)) {
+      return undefined
+    }
+
+    return {url: normalizeRelayUrl(roomUrl), h}
+  })
+
+  const relayReference = call(() => {
+    if (roomReference || !isRelayUrl(url)) {
+      return undefined
+    }
+
+    return normalizeRelayUrl(url)
+  })
+
+  const [href, external] = call(() => {
+    if (roomReference) return [makeRoomPath(roomReference.url, roomReference.h), false]
+    if (relayReference) return [makeSpacePath(relayReference), false]
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
+</script>
+
+<Link {external} {href} class={className}>
+  {#if roomReference}
+    ~<span class="text-primary">{displayRelayUrl(roomReference.url)}</span> /
+    {displayRoom(roomReference.url, roomReference.h)}
+  {:else if relayReference}
+    <span class="text-primary">{displayRelayUrl(relayReference)}</span>
+  {:else}
+    <Icon icon={LinkRound} size={3} class="inline-block" />
+    {displayUrl(url)}
+  {/if}
+</Link>

src/app/components/ContentQuote.svelte

@@ -49,7 +49,7 @@
         <NoteContentMinimal trimParent {url} event={$quote} />
       </div>
     {:else}
-      <NoteCard event={$quote} {url} class="bg-alt rounded-box p-4">
+      <NoteCard noShadow event={$quote} {url} class="bg-alt rounded-box p-4">
         <NoteContentMinimal {url} event={$quote} />
       </NoteCard>
     {/if}

src/app/components/EventReply.svelte

@@ -68,7 +68,7 @@
     })
 
     const observer = new ResizeObserver(() => {
-      spacer!.style.minHeight = `${form!.offsetHeight}px`
+      spacer!.style.minHeight = `${form!.offsetHeight + 60}px`
     })
 
     observer.observe(form!)
@@ -84,7 +84,7 @@
   in:fly
   bind:this={form}
   onsubmit={preventDefault(submit)}
-  class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
+  class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
   <div class="card2 mx-2 my-2 bg-alt shadow-md">
     <div class="relative">
       <div class="note-editor grow overflow-hidden">

src/app/components/GoalCreate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {writable} from "svelte/store"
   import {makeEvent, ZAP_GOAL} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
@@ -10,6 +10,7 @@
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
@@ -21,7 +22,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
 
   type Values = {
     title: string
@@ -33,9 +34,10 @@
     url: string
     h?: string
     initialValues?: Values
+    shareToChat?: boolean
   }
 
-  let {url, h, initialValues}: Props = $props()
+  let {url, h, initialValues, shareToChat = false}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`goal:${url}:${h ?? ""}`)
 
@@ -52,7 +54,7 @@
   const selectFiles = () => editor.then(ed => ed.commands.selectFiles())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return
 
     if (!title) {
       return pushToast({
@@ -78,23 +80,43 @@
       ["relays", url],
     ]
 
-    if (await shouldProtect) {
+    loading = true
-      tags.push(PROTECTED)
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      const goalThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(ZAP_GOAL, {content: title, tags}),
+      })
+
+      const error = await waitForThunkError(goalThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: goalThunk.event, protect})
+      }
+    } finally {
+      loading = false
     }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(ZAP_GOAL, {content: title, tags}),
-    })
-
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   let title = $state(initialValues?.title ?? "")
   let amount = $state(initialValues?.amount ?? 1000)
   let content = $state(initialValues?.content ?? "")
@@ -154,7 +176,8 @@
         <Button
           data-tip="Add an image"
           class="tooltip tooltip-left absolute bottom-1 right-2"
-          onclick={selectFiles}>
+          onclick={selectFiles}
+          disabled={loading}>
           {#if $uploading}
             <span class="loading loading-spinner loading-xs"></span>
           {:else}
@@ -169,16 +192,16 @@
           {/snippet}
           {#snippet input()}
             <div class="flex grow justify-end">
-              <label class="input input-bordered flex items-center gap-2">
+              <label class="input input-bordered flex w-auto items-center gap-2">
                 <Icon icon={Bolt} />
-                <input bind:value={amount} type="number" class="w-28" />
+                <input bind:value={amount} type="number" class="w-28 grow" />
-                <p class="opacity-50">sats</p>
+                <p class="shrink-0 opacity-50">sats</p>
               </label>
             </div>
           {/snippet}
         </FieldInline>
         <input
-          class="range range-primary -mt-2"
+          class="range range-primary -mt-2 w-full"
           type="range"
           min="1000"
           max="100000"
@@ -188,10 +211,12 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Goal</Button>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
+      <Spinner {loading}>Create Goal</Spinner>
+    </Button>
   </ModalFooter>
 </Modal>

src/app/components/LogInBunker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {Capacitor} from "@capacitor/core"
   import {onMount, onDestroy} from "svelte"
   import type {Nip46ResponseWithResult} from "@welshman/signer"
   import {Nip46Broker} from "@welshman/signer"
@@ -103,10 +104,16 @@
     mode = "connect"
   }
 
+  const openSigner = () => {
+    controller.launchSigner()
+  }
+
   const selectBunker = () => {
     mode = "bunker"
   }
 
+  const isIos = Capacitor.getPlatform() === "ios"
+
   let mode: string = $state("bunker")
 
   $effect(() => {
@@ -138,6 +145,9 @@
       <BunkerUrl {controller} />
       <Button class="btn {$bunker ? 'btn-neutral' : 'btn-primary'}" onclick={selectConnect}
         >Log in with a QR code instead</Button>
+      {#if isIos}
+        <Button class="btn btn-neutral" onclick={openSigner}>Open in Signer</Button>
+      {/if}
     {/if}
   </ModalBody>
   <ModalFooter>

src/app/components/NoteCard.svelte

@@ -16,6 +16,7 @@
     children,
     minimal = false,
     hideProfile = false,
+    noShadow = false,
     url,
     ...restProps
   }: {
@@ -23,6 +24,7 @@
     children: Snippet
     minimal?: boolean
     hideProfile?: boolean
+    noShadow?: boolean
     url?: string
     class?: string
   } = $props()
@@ -34,7 +36,7 @@
   let muted = $state($isEventMuted(event))
 </script>
 
-<div class="flex flex-col gap-2 shadow-md {restProps.class}">
+<div class="flex flex-col gap-2 {restProps.class}" class:shadow-md={!noShadow}>
   {#if muted}
     <div class="flex items-center justify-between">
       <div class="row-2 relative">

src/app/components/PollCreate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {insertAt, now, randomId, removeAt, removeUndefined} from "@welshman/lib"
   import {makeEvent} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {Poll} from "nostr-tools/kinds"
   import {isMobile, preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -13,6 +13,7 @@
   import FieldInline from "@lib/components/FieldInline.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
@@ -21,7 +22,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
   import {DraftKey} from "@app/util/drafts"
   import type {PollType} from "@app/util/polls"
 
@@ -40,9 +41,10 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
   const draftKey = new DraftKey<Values>(`poll:${url}:${h ?? ""}`)
   const initialValues = draftKey.get()
 
@@ -102,6 +104,8 @@
   }
 
   const submit = async () => {
+    if (loading) return
+
     if (!title.trim()) {
       return pushToast({theme: "error", message: "Please provide a title for your poll."})
     }
@@ -130,19 +134,39 @@
       tags.push(["h", h])
     }
 
-    if (await shouldProtect) {
+    loading = true
-      tags.push(PROTECTED)
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      const pollThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(Poll, {content: title.trim(), tags}),
+      })
+
+      const error = await waitForThunkError(pollThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: pollThunk.event, protect})
+      }
+    } finally {
+      loading = false
     }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(Poll, {content: title.trim(), tags}),
-    })
-
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   let draggedOptionId = $state<string | undefined>()
   let title = $state(initialValues?.title ?? "")
   let pollType = $state<PollType>(initialValues?.pollType ?? "singlechoice")
@@ -246,10 +270,12 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Poll</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Create Poll</Spinner>
+    </Button>
   </ModalFooter>
 </Modal>

src/app/components/ProfileBadges.svelte

@@ -5,11 +5,11 @@
   import type {Filter} from "@welshman/util"
   import {deriveEventsDesc, deriveEventsById} from "@welshman/store"
   import {formatTimestampRelative} from "@welshman/lib"
-  import {NOTE, ROOMS, COMMENT} from "@welshman/util"
+  import {NOTE, ROOMS, COMMENT, MESSAGE} from "@welshman/util"
   import {repository, loadRelayList} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import ProfileSpaces from "@app/components/ProfileSpaces.svelte"
-  import {deriveGroupList, getSpaceUrlsFromGroupList, MESSAGE_KINDS} from "@app/core/state"
+  import {deriveGroupList, getSpaceUrlsFromGroupList} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
 
@@ -36,7 +36,7 @@
     load({
       filters: [
         {authors: [pubkey], kinds: [ROOMS]},
-        {authors: [pubkey], limit: 1, kinds: [NOTE, COMMENT, ...MESSAGE_KINDS]},
+        {authors: [pubkey], limit: 1, kinds: [NOTE, COMMENT, MESSAGE]},
       ],
       relays: Router.get().FromPubkeys([pubkey]).getUrls(),
     })

src/app/components/ReactionSummary.svelte

@@ -33,6 +33,7 @@
     url?: string
     reactionClass?: string
     noTooltip?: boolean
+    innerEvent?: TrustedEvent
     children?: Snippet
   }
 
@@ -43,23 +44,36 @@
     url = "",
     reactionClass = "",
     noTooltip = false,
+    innerEvent = undefined,
     children,
   }: Props = $props()
 
+  const eventIds = innerEvent ? [event.id, innerEvent.id] : [event.id]
+
   const reports = deriveArray(
     deriveEventsById({repository, filters: [{kinds: [REPORT], "#e": [event.id]}]}),
   )
 
   const reactions = deriveArray(
-    deriveEventsById({repository, filters: [{kinds: [REACTION], "#e": [event.id]}]}),
+    deriveEventsById({repository, filters: [{kinds: [REACTION], "#e": eventIds}]}),
   )
 
   const zaps = deriveArray(
     deriveItemsByKey<Zap>({
       repository,
       getKey: zap => zap.response.id,
-      filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
+      filters: [{kinds: [ZAP_RESPONSE], "#e": eventIds}],
-      eventToItem: (response: TrustedEvent) => getValidZap(response, event),
+      eventToItem: (response: TrustedEvent) => {
+        const zap = getValidZap(response, event)
+
+        if (zap) {
+          return zap
+        }
+
+        if (innerEvent) {
+          return getValidZap(response, innerEvent)
+        }
+      },
     }),
   )
 

src/app/components/RoomItem.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
   import cx from "classnames"
-  import {hash, now, displayList, formatTimestampAsTime, formatTimestampAsDate} from "@welshman/lib"
+  import {readable} from "svelte/store"
+  import {
+    hash,
+    gte,
+    now,
+    displayList,
+    formatTimestampAsTime,
+    formatTimestampAsDate,
+  } from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {MESSAGE, COMMENT} from "@welshman/util"
+  import {MESSAGE, COMMENT, getTag} from "@welshman/util"
   import {
     thunks,
     pubkey,
@@ -27,7 +35,7 @@
   import RoomItemMenuButton from "@app/components/RoomItemMenuButton.svelte"
   import RoomItemMenuMobile from "@app/components/RoomItemMenuMobile.svelte"
   import RoomItemContent from "@app/components/RoomItemContent.svelte"
-  import {colors, ENABLE_ZAPS, deriveEventsForUrl} from "@app/core/state"
+  import {colors, ENABLE_ZAPS, deriveEventsForUrl, deriveEvent} from "@app/core/state"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {getRoomItemPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
@@ -38,7 +46,6 @@
     replyTo?: (event: TrustedEvent) => void
     showPubkey?: boolean
     addSpaceBelow?: boolean
-    inert?: boolean
     canEdit: (event: TrustedEvent) => boolean
     onEdit: (event: TrustedEvent) => void
   }
@@ -49,7 +56,6 @@
     replyTo = undefined,
     showPubkey = false,
     addSpaceBelow = false,
-    inert = false,
     canEdit,
     onEdit,
   }: Props = $props()
@@ -60,7 +66,15 @@
   const profileDisplay = deriveProfileDisplay(event.pubkey, [url])
   const thunk = mergeThunks($thunks.filter(t => t.event.id === event.id))
   const [_, colorValue] = colors[hash(event.pubkey) % colors.length]
-  const comments = deriveEventsForUrl(url, [{kinds: [COMMENT], "#e": [event.id]}])
+
+  const qTag = getTag("q", event.tags)
+  const isQuoteOnly = Boolean(
+    gte(qTag?.length, 2) && event.content.trim().match(/^nostr:n(event|addr)1\w+\s*$/),
+  )
+  const innerComments = isQuoteOnly
+    ? deriveEventsForUrl(url, [{kinds: [COMMENT], "#e": [qTag![1]]}])
+    : readable([])
+  const innerEvent = isQuoteOnly ? deriveEvent(qTag![1], [url]) : readable(undefined)
 
   const reply = () => replyTo!(event)
   const edit = canEdit(event) ? () => onEdit(event) : undefined
@@ -78,7 +92,7 @@
 
 <TapTarget
   data-event={event.id}
-  onTap={inert ? null : onTap}
+  {onTap}
   class={cx(
     "group relative flex w-full cursor-default flex-col px-2 py-0.5 text-left hover:bg-base-100/50",
     {"mt-1.5": showPubkey, "mb-1.5": addSpaceBelow},
@@ -111,7 +125,7 @@
         </div>
       {/if}
       <div class:mt-2={showPubkey && event.kind !== MESSAGE}>
-        <RoomItemContent {url} {event} />
+        <RoomItemContent {url} event={$innerEvent ?? event} />
         {#if thunk}
           <ThunkFailure showToastOnRetry {thunk} class="mt-2 text-sm" />
         {/if}
@@ -124,9 +138,10 @@
       {event}
       {deleteReaction}
       {createReaction}
-      reactionClass="tooltip-right" />
+      reactionClass="tooltip-right"
-    {#if path && $comments.length > 0}
+      innerEvent={$innerEvent} />
-      {@const pubkeys = $comments.map(e => e.pubkey)}
+    {#if path && $innerComments.length > 0}
+      {@const pubkeys = $innerComments.map(e => e.pubkey)}
       {@const isOwn = $pubkey && pubkeys.includes($pubkey)}
       {@const info = displayList(pubkeys.map(pubkey => displayProfileByPubkey(pubkey)))}
       {@const tooltip = `${info} commented`}
@@ -138,7 +153,7 @@
             "btn-primary": isOwn,
           })}>
           <Icon icon={ReplyAlt} />
-          <span>{$comments.length} comment{$comments.length === 1 ? "" : "s"}</span>
+          <span>{$innerComments.length} comment{$innerComments.length === 1 ? "" : "s"}</span>
         </Link>
       </div>
     {/if}

src/app/components/RoomItemContent.svelte

@@ -8,14 +8,9 @@
   import {getRoomItemPath} from "@app/util/routes"
 
   const props: ComponentProps<typeof NoteContent> = $props()
-  const MESSAGE_MIN_LENGTH = 5000
-  const MESSAGE_MAX_LENGTH = 5500
-
   const path = getRoomItemPath(props.url!, props.event)
-  const minLength =
+  const minLength = 5000
-    props.minLength ?? (props.event.kind === MESSAGE ? MESSAGE_MIN_LENGTH : undefined)
+  const maxLength = 5500
-  const maxLength =
-    props.maxLength ?? (props.event.kind === MESSAGE ? MESSAGE_MAX_LENGTH : undefined)
 </script>
 
 <div class={cx("text-sm", {"card2 card2-sm bg-alt": props.event.kind !== MESSAGE})}>

src/app/components/RoomNameWithImage.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div class="flex grow items-center justify-between gap-4 {props.class}">
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-2">
     <RoomImage {url} {h} />
     <div class="min-w-0 overflow-hidden text-ellipsis">
       <RoomName {url} {h} />

src/app/components/ThreadCreate.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import {writable} from "svelte/store"
   import {makeEvent, THREAD} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
@@ -19,7 +20,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
 
   type Values = {
     content?: string | object
@@ -29,9 +30,10 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
   const draftKey = new DraftKey<Values>(`thread:${url}:${h ?? ""}`)
   const initialValues = draftKey.get()
   const shouldProtect = canEnforceNip70(url)
@@ -43,7 +45,7 @@
   const selectFiles = () => editor.then(ed => ed.commands.selectFiles())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return
 
     if (!title) {
       return pushToast({
@@ -64,23 +66,43 @@
 
     const tags = [...ed.storage.nostr.getEditorTags(), ["title", title]]
 
-    if (await shouldProtect) {
+    loading = true
-      tags.push(PROTECTED)
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      const threadThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(THREAD, {content, tags}),
+      })
+
+      const error = await waitForThunkError(threadThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: threadThunk.event, protect})
+      }
+    } finally {
+      loading = false
     }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(THREAD, {content, tags}),
-    })
-
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   let title = $state(initialValues?.title ?? "")
   let content = $state(initialValues?.content ?? "")
 
@@ -138,7 +160,8 @@
       <Button
         data-tip="Add an image"
         class="tooltip tooltip-left absolute bottom-1 right-2"
-        onclick={selectFiles}>
+        onclick={selectFiles}
+        disabled={loading}>
         {#if $uploading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}
@@ -148,10 +171,12 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Thread</Button>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
+      <Spinner {loading}>Create Thread</Spinner>
+    </Button>
   </ModalFooter>
 </Modal>

src/app/core/commands.ts

@@ -22,6 +22,7 @@ import {PollResponse} from "nostr-tools/kinds"
 import {
   DELETE,
   REPORT,
+  MESSAGE,
   PROFILE,
   MESSAGING_RELAYS,
   RELAYS,
@@ -122,6 +123,34 @@ export const prependParent = (
   return {content, tags}
 }
 
+export const publishRoomQuote = ({
+  url,
+  h,
+  parent,
+  protect,
+  delay,
+}: {
+  url: string
+  h?: string
+  parent: TrustedEvent
+  protect: boolean
+  delay?: number
+}) => {
+  const tags: string[][] = []
+
+  if (h) {
+    tags.push(["h", h])
+  }
+
+  if (protect) {
+    tags.push(PROTECTED)
+  }
+
+  const event = makeEvent(MESSAGE, prependParent(parent, {content: "", tags}, url))
+
+  return publishThunk({relays: [url], event, delay})
+}
+
 // Synchronization
 
 export const broadcastUserData = async (relays: string[]) => {

src/app/core/requests.ts

@@ -60,7 +60,7 @@ export const makeFeed = ({
 
   const insertIntoBuffer = (event: TrustedEvent) => {
     for (let i = 0; i < buffer.length; i++) {
-      if (buffer[i].created_at > event.created_at) {
+      if (buffer[i].created_at < event.created_at) {
         buffer.splice(i, 0, event)
         return
       }
@@ -152,7 +152,7 @@ export const makeFeed = ({
     element,
     delay: 300,
     threshold: 5000,
-    onScroll: () => {
+    onScroll: async () => {
       const [since, until] = backwardWindow
 
       backwardWindow = [since - interval, since]
@@ -160,7 +160,7 @@ export const makeFeed = ({
       insertEvents(buffer.splice(0, 30))
 
       if (until > now() - int(2, YEAR)) {
-        loadTimeframe(since, until)
+        await loadTimeframe(since, until)
       } else if (!buffer.some(e => e.created_at < at)) {
         backwardScroller.stop()
         onBackwardExhausted?.()
@@ -173,7 +173,7 @@ export const makeFeed = ({
     reverse: true,
     delay: 300,
     threshold: 5000,
-    onScroll: () => {
+    onScroll: async () => {
       const [since, until] = forwardWindow
 
       forwardWindow = [until, until + interval]
@@ -181,7 +181,7 @@ export const makeFeed = ({
       insertEvents(buffer.splice(0, 30))
 
       if (until < now()) {
-        loadTimeframe(since, until)
+        await loadTimeframe(since, until)
       } else if (!buffer.some(e => e.created_at > at)) {
         forwardScroller.stop()
         onForwardExhausted?.()

src/app/core/state.ts

@@ -329,8 +329,6 @@ if (ENABLE_ZAPS) {
 
 export const CONTENT_KINDS = [ZAP_GOAL, EVENT_TIME, THREAD, CLASSIFIED, Poll]
 
-export const MESSAGE_KINDS = [...CONTENT_KINDS, MESSAGE]
-
 export const DM_KINDS = [DIRECT_MESSAGE, DIRECT_MESSAGE_FILE]
 
 // Settings
@@ -595,6 +593,8 @@ export const getRoomType = (room: RoomMeta): RoomType =>
 
 export const makeRoomId = (url: string, h: string) => `${url}'${h}`
 
+export const isRoomId = (id: string) => id.includes("'")
+
 export const splitRoomId = (id: string) => id.split("'")
 
 export const hasNip29 = (relay?: RelayProfile) =>

src/app/core/sync.ts

@@ -19,6 +19,7 @@ import {
   RELAY_MEMBERS,
   RELAY_ADD_MEMBER,
   RELAY_REMOVE_MEMBER,
+  MESSAGE,
   isSignedEvent,
   unionFilters,
   getTagValue,
@@ -43,7 +44,6 @@ import {
 } from "@welshman/app"
 import {
   REACTION_KINDS,
-  MESSAGE_KINDS,
   CONTENT_KINDS,
   INDEXER_RELAYS,
   loadSettings,
@@ -268,7 +268,7 @@ const syncUserData = () => {
 
 // Spaces
 
-const syncSpace = (url: string, rooms: string[]) => {
+const syncSpace = (url: string) => {
   const since = ago(WEEK)
   const seen = new Set<string>()
   const controller = new AbortController()
@@ -281,7 +281,7 @@ const syncSpace = (url: string, rooms: string[]) => {
         signal: controller.signal,
         filters: [
           {kinds: [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS], "#d": [room]},
-          {kinds: MESSAGE_KINDS, since, "#h": [room]},
+          {kinds: [MESSAGE, ...CONTENT_KINDS], since, "#h": [room]},
           makeCommentFilter(CONTENT_KINDS, {since, "#h": [room]}),
           {
             kinds: [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
@@ -293,10 +293,6 @@ const syncSpace = (url: string, rooms: string[]) => {
     }
   }
 
-  for (const room of rooms) {
-    pullRoomContent(room)
-  }
-
   const relayKinds = [RELAY_MEMBERS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]
   const roomMetaKinds = [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS, LIVEKIT_PARTICIPANTS]
   const roomMemberKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]
@@ -305,7 +301,7 @@ const syncSpace = (url: string, rooms: string[]) => {
     url,
     signal: controller.signal,
     filters: [
-      {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...MESSAGE_KINDS]},
+      {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...CONTENT_KINDS, MESSAGE]},
       makeCommentFilter(CONTENT_KINDS, {since}),
       {kinds: [PollResponse], since},
     ],
@@ -328,7 +324,6 @@ const syncSpace = (url: string, rooms: string[]) => {
 const syncSpaces = () => {
   const store = merged([userGroupList, page])
   const unsubscribersByUrl = new Map<string, Unsubscriber>()
-  const roomsByUrl = new Map<string, string>()
 
   const unsubscribe = store.subscribe(([$userGroupList, $page]) => {
     const urls = new Set(getSpaceUrlsFromGroupList($userGroupList))
@@ -342,28 +337,15 @@ const syncSpaces = () => {
     for (const [url, unsubscribe] of unsubscribersByUrl.entries()) {
       if (!urls.has(url)) {
         unsubscribersByUrl.delete(url)
-        roomsByUrl.delete(url)
         unsubscribe()
       }
     }
 
-    // Start or restart syncing for each space
+    // Start syncing for new spaces
     for (const url of urls) {
-      const rooms = getSpaceRoomsFromGroupList(url, $userGroupList)
+      if (!unsubscribersByUrl.has(url)) {
-
+        unsubscribersByUrl.set(url, syncSpace(url))
-      if (currentUrl === url && $page.params.h && !rooms.includes($page.params.h)) {
-        rooms.push($page.params.h)
       }
-
-      const roomsKey = rooms.join(",")
-
-      if (unsubscribersByUrl.has(url) && roomsByUrl.get(url) === roomsKey) continue
-
-      // Tear down existing sync if rooms changed
-      unsubscribersByUrl.get(url)?.()
-
-      roomsByUrl.set(url, roomsKey)
-      unsubscribersByUrl.set(url, syncSpace(url, rooms))
     }
   })
 

src/app/editor/RoomReferenceExtension.ts

@@ -0,0 +1,42 @@
+import {mergeAttributes, Node} from "@tiptap/core"
+import {RoomReferenceNodeView} from "@app/editor/RoomReferenceNodeView"
+
+export const RoomReferenceExtension = Node.create({
+  name: "roomref",
+
+  atom: true,
+
+  inline: true,
+
+  group: "inline",
+
+  selectable: true,
+
+  priority: 1000,
+
+  addAttributes() {
+    return {
+      url: {default: undefined},
+      h: {default: undefined},
+    }
+  },
+
+  parseHTML() {
+    return [{tag: `span[data-type="${this.name}"]`}]
+  },
+
+  renderHTML({HTMLAttributes}) {
+    return ["span", mergeAttributes(HTMLAttributes, {"data-type": this.name}), "~"]
+  },
+
+  renderText({node}) {
+    const url = typeof node.attrs.url === "string" ? node.attrs.url : ""
+    const h = typeof node.attrs.h === "string" ? node.attrs.h : ""
+
+    return `${url}'${h}`
+  },
+
+  addNodeView() {
+    return RoomReferenceNodeView
+  },
+})

src/app/editor/RoomReferenceNodeView.ts

@@ -0,0 +1,29 @@
+import type {NodeViewRendererProps} from "@tiptap/core"
+import {displayRelayUrl} from "@welshman/util"
+import {deriveRoom} from "@app/core/state"
+
+export const RoomReferenceNodeView = ({node}: NodeViewRendererProps) => {
+  const dom = document.createElement("span")
+  const url = typeof node.attrs.url === "string" ? node.attrs.url : ""
+  const h = typeof node.attrs.h === "string" ? node.attrs.h : ""
+  const room = deriveRoom(url, h)
+
+  dom.classList.add("tiptap-object")
+
+  const unsubRoom = room.subscribe($room => {
+    dom.textContent = `~${displayRelayUrl(url)} / ${$room.name || h}`
+  })
+
+  return {
+    dom,
+    destroy: () => {
+      unsubRoom()
+    },
+    selectNode() {
+      dom.classList.add("tiptap-active")
+    },
+    deselectNode() {
+      dom.classList.remove("tiptap-active")
+    },
+  }
+}

src/app/editor/RoomSuggestion.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import {displayRelayUrl} from "@welshman/util"
+  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import {splitRoomId} from "@app/core/state"
+
+  type Props = {
+    value: string
+  }
+
+  const {value}: Props = $props()
+  const [url = "", h = ""] = splitRoomId(value)
+</script>
+
+<div class="max-w-full overflow-hidden text-ellipsis flex flex-col">
+  <RoomNameWithImage {url} {h} />
+  <span class="text-primary text-sm">{displayRelayUrl(url)}<span> </span></span>
+</div>

src/app/editor/clipboard.ts

@@ -0,0 +1,81 @@
+import {Clipboard} from "@capacitor/clipboard"
+import {Capacitor} from "@capacitor/core"
+import {Extension} from "@tiptap/core"
+import {Plugin, PluginKey} from "@tiptap/pm/state"
+
+const nativeClipboardAvailable = () =>
+  Capacitor.isNativePlatform() && Capacitor.isPluginAvailable("Clipboard")
+
+const hasStandardPastePayload = (event: ClipboardEvent) => {
+  const clipboardData = event.clipboardData
+
+  if (!clipboardData) {
+    return false
+  }
+
+  if (Array.from(clipboardData.items).some(item => item.kind === "file")) {
+    return true
+  }
+
+  if (clipboardData.types.includes("text/html")) {
+    return true
+  }
+
+  return clipboardData.getData("text/plain") !== ""
+}
+
+const getNativeClipboardImage = async () => {
+  try {
+    const {type, value} = await Clipboard.read()
+
+    if (!type.startsWith("image/") || value === "") {
+      return undefined
+    }
+
+    const imageData = value.startsWith("data:") ? value : `data:${type};base64,${value}`
+    const blob = await fetch(imageData).then(res => res.blob())
+
+    if (!blob.type.startsWith("image/")) {
+      return undefined
+    }
+
+    const extension = type.split("/")[1]?.split("+")[0] || "png"
+
+    return new File([blob], `clipboard-image.${extension}`, {type: blob.type || type})
+  } catch {
+    return undefined
+  }
+}
+
+export const NativeClipboardPasteExtension = Extension.create({
+  name: "nativeClipboardPaste",
+
+  addProseMirrorPlugins() {
+    const editor = this.editor
+
+    return [
+      new Plugin({
+        key: new PluginKey("nativeClipboardPaste"),
+        props: {
+          handlePaste: (_view, event) => {
+            if (!nativeClipboardAvailable() || hasStandardPastePayload(event)) {
+              return false
+            }
+
+            event.preventDefault()
+
+            void getNativeClipboardImage().then(file => {
+              if (!file) {
+                return
+              }
+
+              editor.commands.addFile(file, editor.state.selection.from + 1)
+            })
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})

src/app/editor/index.ts

@@ -4,7 +4,7 @@ import {get, derived} from "svelte/store"
 import {Router} from "@welshman/router"
 import {dec, inc} from "@welshman/lib"
 import {throttled} from "@welshman/store"
-import type {PublishedProfile} from "@welshman/util"
+import type {PublishedProfile, RoomMeta} from "@welshman/util"
 import {
   createSearch,
   profiles,
@@ -14,12 +14,27 @@ import {
   getWotGraph,
 } from "@welshman/app"
 import type {FileAttributes} from "@welshman/editor"
-import {Editor, MentionSuggestion, WelshmanExtension, editorProps} from "@welshman/editor"
+import {
+  Editor,
+  MentionSuggestion,
+  TippySuggestion,
+  WelshmanExtension,
+  editorProps,
+} from "@welshman/editor"
 import {escapeHtml} from "@lib/html"
 import {makeMentionNodeView} from "@app/editor/MentionNodeView"
 import ProfileSuggestion from "@app/editor/ProfileSuggestion.svelte"
+import {RoomReferenceExtension} from "@app/editor/RoomReferenceExtension"
+import RoomSuggestion from "@app/editor/RoomSuggestion.svelte"
+import {NativeClipboardPasteExtension} from "@app/editor/clipboard"
 import {uploadFile} from "@app/core/commands"
-import {deriveSpaceMembers} from "@app/core/state"
+import {
+  deriveSpaceMembers,
+  makeRoomId,
+  splitRoomId,
+  userSpaceUrls,
+  roomsByUrl,
+} from "@app/core/state"
 import {pushToast} from "@app/util/toast"
 
 export const makeEditor = async ({
@@ -82,11 +97,36 @@ export const makeEditor = async ({
     },
   )
 
+  const roomReferenceSearch = derived(
+    [throttled(800, userSpaceUrls), throttled(800, roomsByUrl)],
+    ([$userSpaceUrls, $roomsByUrl]) => {
+      const roomIdByMeta = new WeakMap<RoomMeta, string>()
+      const options: RoomMeta[] = []
+
+      for (const roomUrl of $userSpaceUrls) {
+        for (const room of $roomsByUrl.get(roomUrl) || []) {
+          roomIdByMeta.set(room, makeRoomId(roomUrl, room.h))
+          options.push(room)
+        }
+      }
+
+      return createSearch(options, {
+        getValue: item => roomIdByMeta.get(item) || item.h,
+        fuseOptions: {
+          keys: ["name", "h"],
+          threshold: 0.3,
+          shouldSort: false,
+        },
+      })
+    },
+  )
+
   const ed = new Editor({
     content: typeof content === "string" ? escapeHtml(content) : content,
     editorProps,
     element: document.createElement("div"),
     extensions: [
+      RoomReferenceExtension,
       WelshmanExtension.configure({
         submit,
         extensions: {
@@ -128,6 +168,29 @@ export const makeEditor = async ({
 
                       mount(ProfileSuggestion, {target, props: {value, url}})
 
+                      return target
+                    },
+                  }),
+                  TippySuggestion({
+                    char: "~",
+                    name: "roomref",
+                    editor: (this as any).editor,
+                    search: (term: string) => get(roomReferenceSearch).searchValues(term),
+                    updateSignal: roomReferenceSearch,
+                    select: (id: string, props) => {
+                      const [roomUrl, h] = splitRoomId(id)
+
+                      if (!roomUrl || !h) {
+                        return
+                      }
+
+                      return props.command({url: roomUrl, h})
+                    },
+                    createSuggestion: (value: string) => {
+                      const target = document.createElement("div")
+
+                      mount(RoomSuggestion, {target, props: {value}})
+
                       return target
                     },
                   }),
@@ -137,6 +200,7 @@ export const makeEditor = async ({
           },
         },
       }),
+      NativeClipboardPasteExtension,
     ],
     onUpdate({editor}) {
       wordCount?.set(editor.storage.wordCount.words)

src/app/util/nip46.ts

@@ -1,4 +1,4 @@
-import {writable} from "svelte/store"
+import {get, writable} from "svelte/store"
 import type {Nip46ResponseWithResult} from "@welshman/signer"
 import {Nip46Broker} from "@welshman/signer"
 import {makeSecret} from "@welshman/util"
@@ -11,6 +11,22 @@ import {
 } from "@app/core/state"
 import {pushToast} from "@app/util/toast"
 
+const APP_SCHEME = "social.flotilla"
+
+const makeSignerCallbackUrl = (path: string) => `${APP_SCHEME}://x-callback-url/${path}`
+
+const makeSignerLaunchUrl = (nostrconnectUrl: string) => {
+  const params = new URLSearchParams({
+    method: "connect",
+    nostrconnect: nostrconnectUrl,
+    "x-source": APP_SCHEME,
+    "x-success": makeSignerCallbackUrl("authSuccess"),
+    "x-error": makeSignerCallbackUrl("authError"),
+  })
+
+  return `nostrsigner://x-callback-url/auth/nip46?${params.toString()}`
+}
+
 export class Nip46Controller {
   url = writable("")
   bunker = writable("")
@@ -54,6 +70,22 @@ export class Nip46Controller {
     }
   }
 
+  launchSigner() {
+    const nostrconnectUrl = get(this.url)
+    const signerUrl = nostrconnectUrl && makeSignerLaunchUrl(nostrconnectUrl)
+
+    if (!signerUrl) {
+      pushToast({
+        theme: "error",
+        message: "Unable to open signer app right now. Please try again.",
+      })
+
+      return
+    }
+
+    window.location.href = signerUrl
+  }
+
   stop() {
     this.broker.cleanup()
     this.abortController.abort()

src/app/util/notifications.ts

@@ -5,10 +5,10 @@ import {pubkey, tracker, repository, relaysByUrl} from "@welshman/app"
 import {assoc, prop, first, identity, groupBy, now} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {deriveEventsByIdByUrl} from "@welshman/store"
-import {sortEventsDesc, getTagValue} from "@welshman/util"
+import {sortEventsDesc, getTagValue, MESSAGE} from "@welshman/util"
 import {makeSpacePath, makeRoomPath, makeSpaceChatPath, makeChatPath} from "@app/util/routes"
 import {
-  MESSAGE_KINDS,
+  CONTENT_KINDS,
   notificationSettings,
   chatsById,
   userGroupList,
@@ -85,7 +85,7 @@ export const allNotifications = derived(
         deriveEventsByIdByUrl({
           tracker,
           repository,
-          filters: [{kinds: MESSAGE_KINDS}, makeCommentFilter(MESSAGE_KINDS)],
+          filters: [{kinds: [MESSAGE, ...CONTENT_KINDS]}, makeCommentFilter(CONTENT_KINDS)],
         }),
       ],
       identity,

src/app/util/push/adapters/common.ts

@@ -17,13 +17,13 @@ import {
   getRelaysFromList,
   getTagValue,
   matchFilters,
+  MESSAGE,
   type Filter,
   type TrustedEvent,
 } from "@welshman/util"
 import {
   DM_KINDS,
   CONTENT_KINDS,
-  MESSAGE_KINDS,
   notificationSettings,
   pushState,
   shouldNotify,
@@ -45,7 +45,10 @@ export type PushPermissionResult = {
 }
 
 export const onNotification = call(() => {
-  const allFilters = [{kinds: [...MESSAGE_KINDS, ...DM_KINDS]}, makeCommentFilter(MESSAGE_KINDS)]
+  const allFilters = [
+    {kinds: [MESSAGE, ...CONTENT_KINDS, ...DM_KINDS]},
+    makeCommentFilter(CONTENT_KINDS),
+  ]
   const filters = allFilters.map(assoc("since", now()))
   const subscribers: Subscriber<TrustedEvent>[] = []
 
@@ -158,7 +161,7 @@ export const syncRelaySubscriptions = (
     userSettingsValues,
   ]).subscribe(
     throttle(3000, ([$userSpaceUrls, {spaces, mentions}, {alerts}]) => {
-      const baseFilters = [{kinds: MESSAGE_KINDS}, makeCommentFilter(CONTENT_KINDS)]
+      const baseFilters = [{kinds: [MESSAGE, ...CONTENT_KINDS]}, makeCommentFilter(CONTENT_KINDS)]
 
       for (const url of $userSpaceUrls) {
         const {notify = true, exceptions = []} = alerts.find(spec({url})) || {}

src/app/util/routes.ts

@@ -63,11 +63,11 @@ export const goToSpace = async (url: string) => {
   const prevPath = lastPageBySpaceUrl.get(encodeRelay(url))
 
   if (prevPath && prevPath !== makeSpacePath(url)) {
-    goto(prevPath)
+    goto(prevPath, {replaceState: true})
   } else if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
-    goto(makeSpacePath(url, "recent"))
+    goto(makeSpacePath(url, "recent"), {replaceState: true})
   } else {
-    goto(makeSpacePath(url))
+    goto(makeSpacePath(url), {replaceState: true})
   }
 }
 

src/lib/components/Button.svelte

@@ -17,7 +17,7 @@
     "aria-pressed"?: boolean
   } = $props()
 
-  const className = $derived(`text-left ${restProps.class}`)
+  const className = $derived(`text-left cursor-pointer ${restProps.class}`)
 
   const onClick = (e: Event) => {
     e.preventDefault()

src/lib/components/SecondaryNav.svelte

@@ -4,15 +4,17 @@
 
   interface Props {
     class?: string
+    visible?: boolean
     children?: Snippet
   }
 
-  const {children, ...props}: Props = $props()
+  const {children, visible = false, ...props}: Props = $props()
 </script>
 
 <div
   class={cx(
-    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "mt-sai mb-sai max-h-screen w-60 min-h-0 shrink-0 flex-col gap-1 bg-base-300 z-nav",
+    visible ? "flex" : "hidden md:flex",
     props.class,
   )}>
   {@render children?.()}

src/lib/components/VirtualItem.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  type Props = {
+    children: Snippet
+    root?: HTMLElement
+    initiallyVisible?: boolean
+    estimatedHeight?: number
+  }
+
+  const {children, root, initiallyVisible = false, estimatedHeight = 48}: Props = $props()
+
+  let visible = $state(initiallyVisible)
+  let height = $state(estimatedHeight)
+  let el: HTMLElement | undefined = $state()
+  let hasMeasured = false
+
+  $effect(() => {
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          visible = true
+        } else {
+          // Measure actual height before hiding content
+          if (el) {
+            const h = el.offsetHeight
+            if (h > 0) {
+              height = h
+              hasMeasured = true
+            }
+          }
+          if (hasMeasured) {
+            visible = false
+          }
+        }
+      },
+      {root: root || null, rootMargin: "1000px 0px"},
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  })
+</script>
+
+<div bind:this={el}>
+  {#if visible}
+    {@render children()}
+  {:else}
+    <div style:height="{height}px"></div>
+  {/if}
+</div>

src/routes/+layout.svelte

@@ -78,6 +78,21 @@
       return
     }
 
+    if (url.host === "x-callback-url") {
+      if (url.pathname === "/authError") {
+        const errorMessage = url.searchParams.get("errorMessage")
+
+        pushToast({
+          theme: "error",
+          message: errorMessage || "Signer authorization failed.",
+        })
+      }
+
+      if (["/authSuccess", "/authError"].includes(url.pathname)) {
+        return
+      }
+    }
+
     const target = `${url.pathname}${url.search}${url.hash}`
     goto(target, {replaceState: false, noScroll: false})
   })

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

@@ -8,7 +8,7 @@
   import SpaceMenu from "@app/components/SpaceMenu.svelte"
 
   const url = decodeRelay($page.params.relay!)
-  const md = parseInt(theme.screens.md, 10)
+  const md = parseFloat(theme.screens.md) * 16
 
   let width = $state(0)
 
@@ -25,7 +25,7 @@
   <div class="ml-sai mt-sai mb-sai relative z-nav w-14 shrink-0 bg-base-200 pt-2">
     <PrimaryNavSpaces />
   </div>
-  <SecondaryNav class="flex! w-auto! grow pb-16">
+  <SecondaryNav visible class="w-auto grow pb-16">
     <SpaceMenu {url} />
   </SecondaryNav>
 {/if}

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

@@ -30,6 +30,7 @@
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
+  import VirtualItem from "@lib/components/VirtualItem.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
   import {
@@ -37,7 +38,6 @@
     deriveRoom,
     deriveUserRoomMembershipStatus,
     getRoomType,
-    MESSAGE_KINDS,
     MembershipStatus,
     PROTECTED,
     RoomType,
@@ -105,6 +105,7 @@
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const shouldVirtualize = $derived(isNaN(at))
 
   const showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
@@ -348,11 +349,15 @@
 
     elements.reverse()
 
-    requestAnimationFrame(manageScrollPosition)
-
     return elements
   })
 
+  $effect(() => {
+    if (elements.length > 0) {
+      requestAnimationFrame(manageScrollPosition)
+    }
+  })
+
   const start = () => {
     cleanup?.()
 
@@ -360,7 +365,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER], "#h": [h]}],
+      filters: [{kinds: [MESSAGE, ROOM_ADD_MEMBER], "#h": [h]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -468,7 +473,7 @@
             <Spinner loading={loadingForward}>Looking for messages...</Spinner>
           </p>
         {/if}
-        {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+        {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
           {#if type === "new-messages"}
             <div
               {id}
@@ -480,6 +485,24 @@
             </div>
           {:else if type === "date"}
             <Divider>{value}</Divider>
+          {:else if shouldVirtualize}
+            <VirtualItem root={element} initiallyVisible={i < 25}>
+              {@const event = value as TrustedEvent}
+              {#if event.kind === ROOM_ADD_MEMBER}
+                <RoomItemAddMember {url} {event} />
+              {:else}
+                <div class="cv">
+                  <RoomItem
+                    {url}
+                    {event}
+                    {replyTo}
+                    {showPubkey}
+                    {addSpaceBelow}
+                    canEdit={canEditEvent}
+                    onEdit={onEditEvent} />
+                </div>
+              {/if}
+            </VirtualItem>
           {:else}
             {@const event = value as TrustedEvent}
             {#if event.kind === ROOM_ADD_MEMBER}

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

@@ -21,11 +21,12 @@
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
+  import VirtualItem from "@lib/components/VirtualItem.svelte"
 
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
-  import {userSettingsValues, decodeRelay, PROTECTED, MESSAGE_KINDS} from "@app/core/state"
+  import {userSettingsValues, decodeRelay, PROTECTED} from "@app/core/state"
   import {prependParent, canEnforceNip70, publishDelete} from "@app/core/commands"
   import {checked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -37,6 +38,7 @@
   const url = decodeRelay($page.params.relay!)
   const shouldProtect = canEnforceNip70(url)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const shouldVirtualize = $derived(isNaN(at))
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
@@ -240,11 +242,15 @@
 
     elements.reverse()
 
-    requestAnimationFrame(manageScrollPosition)
-
     return elements
   })
 
+  $effect(() => {
+    if (elements.length > 0) {
+      requestAnimationFrame(manageScrollPosition)
+    }
+  })
+
   const start = () => {
     cleanup?.()
 
@@ -252,7 +258,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER]}],
+      filters: [{kinds: [MESSAGE, RELAY_ADD_MEMBER]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -305,7 +311,7 @@
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>
     </p>
   {/if}
-  {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+  {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
     {#if type === "new-messages"}
       <div
         {id}
@@ -317,6 +323,24 @@
       </div>
     {:else if type === "date"}
       <Divider>{value}</Divider>
+    {:else if shouldVirtualize}
+      <VirtualItem root={element} initiallyVisible={i < 25}>
+        {@const event = value as TrustedEvent}
+        {#if event.kind === RELAY_ADD_MEMBER}
+          <RoomItemAddMember {url} {event} />
+        {:else}
+          <div>
+            <RoomItem
+              {url}
+              {event}
+              {replyTo}
+              {showPubkey}
+              canEdit={canEditEvent}
+              onEdit={onEditEvent}
+              {addSpaceBelow} />
+          </div>
+        {/if}
+      </VirtualItem>
     {:else}
       {@const event = value as TrustedEvent}
       {#if event.kind === RELAY_ADD_MEMBER}