perf: task-fix-list-virtualization changes

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

package.json

@@ -48,14 +48,12 @@
     "@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",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/preferences": "^8.0.0",
     "@capacitor/push-notifications": "^8.0.0",
-    "@capacitor/share": "^8.0.1",
     "@capawesome/capacitor-android-dark-mode-support": "^8.0.0",
     "@capawesome/capacitor-badge": "^8.0.0",
     "@getalby/lightning-tools": "^6.1.0",
@@ -65,7 +63,6 @@
     "@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",
@@ -104,9 +101,9 @@
     "onlyBuiltDependencies": [
       "sharp",
       "nostr-signer-capacitor-plugin"
-    ],
-    "overrides": {
-      "sharp": "0.35.0-rc.0"
-    }
+    ]
+  },
+  "overrides": {
+    "sharp": "0.35.0-rc.0"
   }
 }

pnpm-lock.yaml

@@ -26,9 +26,6 @@ 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
@@ -47,9 +44,6 @@ importers:
       '@capacitor/push-notifications':
         specifier: ^8.0.0
         version: 8.0.0(@capacitor/core@8.0.1)
-      '@capacitor/share':
-        specifier: ^8.0.1
-        version: 8.0.1(@capacitor/core@8.0.1)
       '@capawesome/capacitor-android-dark-mode-support':
         specifier: ^8.0.0
         version: 8.0.0(@capacitor/core@8.0.1)
@@ -77,9 +71,6 @@ 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
@@ -800,11 +791,6 @@ 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==}
 
@@ -841,11 +827,6 @@ packages:
     peerDependencies:
       '@capacitor/core': '>=8.0.0'
 
-  '@capacitor/share@8.0.1':
-    resolution: {integrity: sha512-3cSBKBCJVon54rKDROP2rqGyeGks4pBh9TbaEk9S375Kbek/ZHe72N50zIa0Vn9Eac/SuhwgehO/mmA4CsUOiw==}
-    peerDependencies:
-      '@capacitor/core': '>=8.0.0'
-
   '@capacitor/synapse@1.0.4':
     resolution: {integrity: sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==}
 
@@ -5988,10 +5969,6 @@ 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
@@ -6029,10 +6006,6 @@ snapshots:
     dependencies:
       '@capacitor/core': 8.0.1
 
-  '@capacitor/share@8.0.1(@capacitor/core@8.0.1)':
-    dependencies:
-      '@capacitor/core': 8.0.1
-
   '@capacitor/synapse@1.0.4': {}
 
   '@capawesome/capacitor-android-dark-mode-support@8.0.0(@capacitor/core@8.0.1)':

src/app.css

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

src/app/components/CalendarEventCreate.svelte

@@ -7,13 +7,12 @@
   type Props = {
     url: string
     h?: string
-    shareToChat?: boolean
   }
 
-  const {url, h, shareToChat = false}: Props = $props()
+  const {url, h}: Props = $props()
 </script>
 
-<CalendarEventForm {url} {h} {shareToChat}>
+<CalendarEventForm {url} {h}>
   {#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, waitForThunkError} from "@welshman/app"
+  import {publishThunk} 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, publishRoomQuote} from "@app/core/commands"
+  import {canEnforceNip70} from "@app/core/commands"
 
   type Values = {
     d: string
@@ -36,12 +36,11 @@
   type Props = {
     url: string
     h?: string
-    shareToChat?: boolean
     header: Snippet
     initialValues?: Values
   }
 
-  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
+  let {url, h, header, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`calendar:${url}:${h ?? ""}`)
 
@@ -58,7 +57,7 @@
   const selectFiles = () => editor.then(ed => ed.chain().selectFiles().run())
 
   const submit = async () => {
-    if ($uploading || loading) return
+    if ($uploading) return
 
     if (!title) {
       return pushToast({
@@ -93,41 +92,21 @@
       ...ed.storage.nostr.getEditorTags(),
     ]
 
-    loading = true
-
-    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 (await shouldProtect) {
+      tags.push(PROTECTED)
     }
-  }
 
-  let loading = $state(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()
+  }
 
   const d = $state(initialValues?.d ?? randomId())
   let title = $state(initialValues?.title ?? "")
@@ -179,11 +158,7 @@
           <div class="input-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
-          <Button
-            data-tip="Add an image"
-            class="center btn tooltip"
-            onclick={selectFiles}
-            disabled={loading}>
+          <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
             {#if $uploading}
               <span class="loading loading-spinner loading-xs"></span>
             {:else}
@@ -222,12 +197,12 @@
     </Field>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
-      <Spinner loading={$uploading || loading}>Save Event</Spinner>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading}>
+      <Spinner loading={$uploading}>Save Event</Spinner>
     </Button>
   </ModalFooter>
 </Modal>

src/app/components/Chat.svelte

@@ -279,7 +279,7 @@
   </div>
 </PageBar>
 
-<PageContent class="flex flex-col-reverse gap-2 py-4">
+<PageContent class="flex flex-col-reverse gap-2 pt-4">
   {#if missingRelayLists.length > 0}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">

src/app/components/ClassifiedCreate.svelte

@@ -7,13 +7,12 @@
   type Props = {
     url: string
     h?: string
-    shareToChat?: boolean
   }
 
-  const {url, h, shareToChat = false}: Props = $props()
+  const {url, h}: Props = $props()
 </script>
 
-<ClassifiedForm {url} {h} {shareToChat}>
+<ClassifiedForm {url} {h}>
   {#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, waitForThunkError} from "@welshman/app"
+  import {publishThunk} 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, publishRoomQuote, uploadFile} from "@app/core/commands"
+  import {canEnforceNip70, uploadFile} from "@app/core/commands"
 
   type Values = {
     d: string
@@ -37,12 +37,11 @@
   type Props = {
     url: string
     h?: string
-    shareToChat?: boolean
     header: Snippet
     initialValues?: Values
   }
 
-  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
+  let {url, h, header, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`classified:${url}:${h ?? ""}`)
 
@@ -88,9 +87,7 @@
         tags.push(["t", topic])
       }
 
-      const protect = await shouldProtect
-
-      if (protect) {
+      if (await shouldProtect) {
         tags.push(PROTECTED)
       }
 
@@ -117,23 +114,13 @@
         }
       }
 
-      const classifiedThunk = publishThunk({
+      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, shareToChat: true})
+  const createGoal = () => pushModal(GoalCreate, {url, h})
 
-  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h, shareToChat: true})
+  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h})
 
-  const createThread = () => pushModal(ThreadCreate, {url, h, shareToChat: true})
+  const createThread = () => pushModal(ThreadCreate, {url, h})
 
-  const createClassified = () => pushModal(ClassifiedCreate, {url, h, shareToChat: true})
+  const createClassified = () => pushModal(ClassifiedCreate, {url, h})
 
-  const createPoll = () => pushModal(PollCreate, {url, h, shareToChat: true})
+  const createPoll = () => pushModal(PollCreate, {url, h})
 
   let ul: Element
 

src/app/components/ContentLinkBlock.svelte

@@ -5,32 +5,30 @@
   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,
-    IMAGE_CONTENT_TYPES,
     PLATFORM_URL,
+    IMAGE_CONTENT_TYPES,
     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 isRoomOrRelay = isRoomId(url) || isRelayUrl(url)
+  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 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)}`
@@ -56,52 +54,46 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-{#if isRoomOrRelay}
-  <div>
-    <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
+<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>
-{: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}
+</Link>

src/app/components/ContentLinkInline.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
-  import {displayUrl} from "@welshman/lib"
-  import {getTagValue} from "@welshman/util"
+  import {call, displayUrl} from "@welshman/lib"
+  import {isRelayUrl, 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 {IMAGE_CONTENT_TYPES} from "@app/core/state"
+  import {PLATFORM_URL, 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>
@@ -27,5 +34,8 @@
     {displayUrl(url)}
   </a>
 {:else}
-  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
+  <Link {external} {href} class="link-content whitespace-nowrap">
+    <Icon icon={LinkRound} size={3} class="inline-block" />
+    {displayUrl(url)}
+  </Link>
 {/if}

src/app/components/ContentLinkUrl.svelte

@@ -1,59 +0,0 @@
-<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 noShadow event={$quote} {url} class="bg-alt rounded-box p-4">
+      <NoteCard 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 + 60}px`
+      spacer!.style.minHeight = `${form!.offsetHeight}px`
     })
 
     observer.observe(form!)
@@ -84,7 +84,7 @@
   in:fly
   bind:this={form}
   onsubmit={preventDefault(submit)}
-  class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
+  class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
   <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, waitForThunkError} from "@welshman/app"
+  import {publishThunk} 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,7 +10,6 @@
   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"
@@ -22,7 +21,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
+  import {canEnforceNip70} from "@app/core/commands"
 
   type Values = {
     title: string
@@ -34,10 +33,9 @@
     url: string
     h?: string
     initialValues?: Values
-    shareToChat?: boolean
   }
 
-  let {url, h, initialValues, shareToChat = false}: Props = $props()
+  let {url, h, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`goal:${url}:${h ?? ""}`)
 
@@ -54,7 +52,7 @@
   const selectFiles = () => editor.then(ed => ed.commands.selectFiles())
 
   const submit = async () => {
-    if ($uploading || loading) return
+    if ($uploading) return
 
     if (!title) {
       return pushToast({
@@ -80,42 +78,22 @@
       ["relays", url],
     ]
 
-    loading = true
-
-    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 (await shouldProtect) {
+      tags.push(PROTECTED)
     }
-  }
 
-  let loading = $state(false)
+    if (h) {
+      tags.push(["h", h])
+    }
+
+    publishThunk({
+      relays: [url],
+      event: makeEvent(ZAP_GOAL, {content: title, tags}),
+    })
+
+    draftKey.clear()
+    history.back()
+  }
 
   let title = $state(initialValues?.title ?? "")
   let amount = $state(initialValues?.amount ?? 1000)
@@ -176,8 +154,7 @@
         <Button
           data-tip="Add an image"
           class="tooltip tooltip-left absolute bottom-1 right-2"
-          onclick={selectFiles}
-          disabled={loading}>
+          onclick={selectFiles}>
           {#if $uploading}
             <span class="loading loading-spinner loading-xs"></span>
           {:else}
@@ -192,16 +169,16 @@
           {/snippet}
           {#snippet input()}
             <div class="flex grow justify-end">
-              <label class="input input-bordered flex w-auto items-center gap-2">
+              <label class="input input-bordered flex items-center gap-2">
                 <Icon icon={Bolt} />
-                <input bind:value={amount} type="number" class="w-28 grow" />
-                <p class="shrink-0 opacity-50">sats</p>
+                <input bind:value={amount} type="number" class="w-28" />
+                <p class="opacity-50">sats</p>
               </label>
             </div>
           {/snippet}
         </FieldInline>
         <input
-          class="range range-primary -mt-2 w-full"
+          class="range range-primary -mt-2"
           type="range"
           min="1000"
           max="100000"
@@ -211,12 +188,10 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
-      <Spinner {loading}>Create Goal</Spinner>
-    </Button>
+    <Button type="submit" class="btn btn-primary">Create Goal</Button>
   </ModalFooter>
 </Modal>

src/app/components/LogInBunker.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {Capacitor} from "@capacitor/core"
   import {onMount, onDestroy} from "svelte"
   import type {Nip46ResponseWithResult} from "@welshman/signer"
   import {Nip46Broker} from "@welshman/signer"
@@ -104,16 +103,10 @@
     mode = "connect"
   }
 
-  const openSigner = () => {
-    controller.launchSigner()
-  }
-
   const selectBunker = () => {
     mode = "bunker"
   }
 
-  const isIos = Capacitor.getPlatform() === "ios"
-
   let mode: string = $state("bunker")
 
   $effect(() => {
@@ -145,9 +138,6 @@
       <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,7 +16,6 @@
     children,
     minimal = false,
     hideProfile = false,
-    noShadow = false,
     url,
     ...restProps
   }: {
@@ -24,7 +23,6 @@
     children: Snippet
     minimal?: boolean
     hideProfile?: boolean
-    noShadow?: boolean
     url?: string
     class?: string
   } = $props()
@@ -36,7 +34,7 @@
   let muted = $state($isEventMuted(event))
 </script>
 
-<div class="flex flex-col gap-2 {restProps.class}" class:shadow-md={!noShadow}>
+<div class="flex flex-col gap-2 shadow-md {restProps.class}">
   {#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, waitForThunkError} from "@welshman/app"
+  import {publishThunk} 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,7 +13,6 @@
   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"
@@ -22,7 +21,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
-  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
+  import {canEnforceNip70} from "@app/core/commands"
   import {DraftKey} from "@app/util/drafts"
   import type {PollType} from "@app/util/polls"
 
@@ -41,10 +40,9 @@
   type Props = {
     url: string
     h?: string
-    shareToChat?: boolean
   }
 
-  const {url, h, shareToChat = false}: Props = $props()
+  const {url, h}: Props = $props()
   const draftKey = new DraftKey<Values>(`poll:${url}:${h ?? ""}`)
   const initialValues = draftKey.get()
 
@@ -104,8 +102,6 @@
   }
 
   const submit = async () => {
-    if (loading) return
-
     if (!title.trim()) {
       return pushToast({theme: "error", message: "Please provide a title for your poll."})
     }
@@ -134,38 +130,18 @@
       tags.push(["h", h])
     }
 
-    loading = true
-
-    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
+    if (await shouldProtect) {
+      tags.push(PROTECTED)
     }
-  }
 
-  let loading = $state(false)
+    publishThunk({
+      relays: [url],
+      event: makeEvent(Poll, {content: title.trim(), tags}),
+    })
+
+    draftKey.clear()
+    history.back()
+  }
 
   let draggedOptionId = $state<string | undefined>()
   let title = $state(initialValues?.title ?? "")
@@ -270,12 +246,10 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back} disabled={loading}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner {loading}>Create Poll</Spinner>
-    </Button>
+    <Button type="submit" class="btn btn-primary">Create Poll</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, MESSAGE} from "@welshman/util"
+  import {NOTE, ROOMS, COMMENT} 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} from "@app/core/state"
+  import {deriveGroupList, getSpaceUrlsFromGroupList, MESSAGE_KINDS} 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]},
+        {authors: [pubkey], limit: 1, kinds: [NOTE, COMMENT, ...MESSAGE_KINDS]},
       ],
       relays: Router.get().FromPubkeys([pubkey]).getUrls(),
     })

src/app/components/ReactionSummary.svelte

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

src/app/components/RoomDetail.svelte

@@ -243,7 +243,7 @@
         {/if}
       </div>
     </div>
-    {#if $members !== undefined && $members.length > 0}
+    {#if $members.length > 0}
       <div class="card2 card2-sm bg-alt flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
           <span>Members:</span>
@@ -251,10 +251,6 @@
         </div>
         <Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
       </div>
-    {:else if $members === undefined}
-      <div class="card2 card2-sm bg-base-200 flex items-center gap-4">
-        <span class="text-error">Member list not available from this relay</span>
-      </div>
     {/if}
     <div class="card2 card2-sm bg-alt col-4">
       <strong class="text-lg">Room Settings</strong>

src/app/components/RoomItem.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">
   import cx from "classnames"
-  import {readable} from "svelte/store"
-  import {
-    hash,
-    gte,
-    now,
-    displayList,
-    formatTimestampAsTime,
-    formatTimestampAsDate,
-  } from "@welshman/lib"
+  import {hash, now, displayList, formatTimestampAsTime, formatTimestampAsDate} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {MESSAGE, COMMENT, getTag} from "@welshman/util"
+  import {MESSAGE, COMMENT} from "@welshman/util"
   import {
     thunks,
     pubkey,
@@ -35,7 +27,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, deriveEvent} from "@app/core/state"
+  import {colors, ENABLE_ZAPS, deriveEventsForUrl} from "@app/core/state"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {getRoomItemPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
@@ -46,6 +38,7 @@
     replyTo?: (event: TrustedEvent) => void
     showPubkey?: boolean
     addSpaceBelow?: boolean
+    inert?: boolean
     canEdit: (event: TrustedEvent) => boolean
     onEdit: (event: TrustedEvent) => void
   }
@@ -56,6 +49,7 @@
     replyTo = undefined,
     showPubkey = false,
     addSpaceBelow = false,
+    inert = false,
     canEdit,
     onEdit,
   }: Props = $props()
@@ -66,15 +60,7 @@
   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 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 comments = deriveEventsForUrl(url, [{kinds: [COMMENT], "#e": [event.id]}])
 
   const reply = () => replyTo!(event)
   const edit = canEdit(event) ? () => onEdit(event) : undefined
@@ -92,7 +78,7 @@
 
 <TapTarget
   data-event={event.id}
-  {onTap}
+  onTap={inert ? null : 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},
@@ -125,7 +111,7 @@
         </div>
       {/if}
       <div class:mt-2={showPubkey && event.kind !== MESSAGE}>
-        <RoomItemContent {url} event={$innerEvent ?? event} />
+        <RoomItemContent {url} {event} />
         {#if thunk}
           <ThunkFailure showToastOnRetry {thunk} class="mt-2 text-sm" />
         {/if}
@@ -138,10 +124,9 @@
       {event}
       {deleteReaction}
       {createReaction}
-      reactionClass="tooltip-right"
-      innerEvent={$innerEvent} />
-    {#if path && $innerComments.length > 0}
-      {@const pubkeys = $innerComments.map(e => e.pubkey)}
+      reactionClass="tooltip-right" />
+    {#if path && $comments.length > 0}
+      {@const pubkeys = $comments.map(e => e.pubkey)}
       {@const isOwn = $pubkey && pubkeys.includes($pubkey)}
       {@const info = displayList(pubkeys.map(pubkey => displayProfileByPubkey(pubkey)))}
       {@const tooltip = `${info} commented`}
@@ -153,7 +138,7 @@
             "btn-primary": isOwn,
           })}>
           <Icon icon={ReplyAlt} />
-          <span>{$innerComments.length} comment{$innerComments.length === 1 ? "" : "s"}</span>
+          <span>{$comments.length} comment{$comments.length === 1 ? "" : "s"}</span>
         </Link>
       </div>
     {/if}

src/app/components/RoomItemContent.svelte

@@ -8,9 +8,14 @@
   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 = 5000
-  const maxLength = 5500
+  const minLength =
+    props.minLength ?? (props.event.kind === MESSAGE ? MESSAGE_MIN_LENGTH : undefined)
+  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/RoomMembers.svelte

@@ -73,44 +73,34 @@
       </ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-2">
-      {#if $members === undefined}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-error">Member list not available from this relay</span>
-        </div>
-      {:else if $members.length === 0}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-base-content/70">No members yet</span>
-        </div>
-      {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              <div class="relative">
-                <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
-                  <Icon icon={MenuDots} />
-                </Button>
-                {#if menuPubkey === pubkey}
-                  <Popover hideOnClick onClose={closeMenu}>
-                    <ul
-                      transition:fly
-                      class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                      <li>
-                        <Button class="text-error" onclick={() => removeMember(pubkey)}>
-                          <Icon icon={MinusCircle} />
-                          Remove Member
-                        </Button>
-                      </li>
-                    </ul>
-                  </Popover>
-                {/if}
-              </div>
+      {#each $members as pubkey (pubkey)}
+        <div class="card2 bg-alt relative">
+          <div class="flex items-center justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <Profile {pubkey} {url} />
+            </div>
+            <div class="relative">
+              <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+                <Icon icon={MenuDots} />
+              </Button>
+              {#if menuPubkey === pubkey}
+                <Popover hideOnClick onClose={closeMenu}>
+                  <ul
+                    transition:fly
+                    class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                    <li>
+                      <Button class="text-error" onclick={() => removeMember(pubkey)}>
+                        <Icon icon={MinusCircle} />
+                        Remove Member
+                      </Button>
+                    </li>
+                  </ul>
+                </Popover>
+              {/if}
             </div>
           </div>
-        {/each}
-      {/if}
+        </div>
+      {/each}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/RoomMembersAdd.svelte

@@ -56,11 +56,6 @@
   }
 
   const onSubmit = async () => {
-    if (!$spaceMembers) {
-      addMembers()
-      return
-    }
-
     const pubkeysSnapshot = $state.snapshot(pubkeys)
     const nonSpaceMembers = pubkeysSnapshot.filter(pubkey => !$spaceMembers.includes(pubkey))
 

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-2">
+  <div class="flex items-center gap-3">
     <RoomImage {url} {h} />
     <div class="min-w-0 overflow-hidden text-ellipsis">
       <RoomName {url} {h} />

src/app/components/SpaceInvite.svelte

@@ -3,9 +3,7 @@
   import {sleep} from "@welshman/lib"
   import {request} from "@welshman/net"
   import {displayRelayUrl, getTagValue, RELAY_INVITE} from "@welshman/util"
-  import {Share} from "@capacitor/share"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
-  import NativeShare from "@assets/icons/native-share.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import Spinner from "@lib/components/Spinner.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -30,17 +28,6 @@
 
   const copyInvite = () => clip(invite)
 
-  const shareInvite = async () => {
-  if (!canShare) return
-
-  try {
-    await Share.share({url: invite})
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-  let canShare = $state(false)
   let claim = $state("")
   let loading = $state(true)
 
@@ -54,13 +41,6 @@
   })
 
   onMount(async () => {
-  try {
-    const {value} = await Share.canShare()
-    canShare = value
-  } catch {
-    canShare = false
-  }
-
     const [[event]] = await Promise.all([
       request({
         relays: [url],
@@ -94,37 +74,17 @@
         <p class="center">Oops! It looks like you're not a member of this relay.</p>
       {:else}
         <div class="flex flex-col items-center gap-6">
-          <div class="w-48">
-            <QRCode code={invite} />
-          </div>
+          <QRCode code={invite} />
           <Field>
             {#snippet input()}
-              <div class="flex w-full gap-2">
-                {#if canShare}
-                  <Button 
-                    class="input input-bordered flex shrink-0 w-12 items-center justify-center p-0" 
-                    onclick={shareInvite}
-                  >
-                    <Icon icon={NativeShare} />
-                  </Button>
-                {/if}
-
-                <label class="input input-bordered flex min-w-0 flex-1 items-center gap-2">
-                  <Icon icon={LinkRound} class="shrink-0" />
-                  <input 
-                    bind:value={invite} 
-                    class="min-w-0 flex-1 truncate" 
-                    type="text" 
-                    readonly 
-                  />
-                  
-                  <Button class="shrink-0" onclick={copyInvite}>
-                    <Icon icon={Copy} />
-                  </Button>
-                </label>
-              </div>
+              <label class="input input-bordered flex w-full items-center gap-2">
+                <Icon icon={LinkRound} />
+                <input bind:value={invite} class="grow" type="text" />
+                <Button onclick={copyInvite}>
+                  <Icon icon={Copy} />
+                </Button>
+              </label>
             {/snippet}
-            
             {#snippet info()}
               <p>
                 This invite link can be used by clicking "Add Space" and pasting it there.

src/app/components/SpaceMembers.svelte

@@ -112,58 +112,46 @@
       {/if}
     {/if}
     <div class="flex flex-col gap-2">
-      {#if $members === undefined}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-error">Member list not available from this space</span>
-        </div>
-      {:else if $members.length === 0}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-base-content/70">No members yet</span>
-        </div>
-      {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 card2-sm bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              {#if canBan || canUnallow}
-                <div class="relative">
-                  <Button
-                    class="btn btn-circle btn-ghost btn-sm"
-                    onclick={() => toggleMenu(pubkey)}>
-                    <Icon icon={MenuDots} />
-                  </Button>
-                  {#if menuPubkey === pubkey}
-                    <Popover hideOnClick onClose={closeMenu}>
-                      <ul
-                        transition:fly
-                        class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                        {#if canUnallow}
-                          <li>
-                            <Button onclick={() => unallowMember(pubkey)}>
-                              <Icon icon={UserMinus} />
-                              Remove User
-                            </Button>
-                          </li>
-                        {/if}
-                        {#if canBan}
-                          <li>
-                            <Button class="text-error" onclick={() => banMember(pubkey)}>
-                              <Icon icon={MinusCircle} />
-                              Ban User
-                            </Button>
-                          </li>
-                        {/if}
-                      </ul>
-                    </Popover>
-                  {/if}
-                </div>
-              {/if}
+      {#each $members as pubkey (pubkey)}
+        <div class="card2 card2-sm bg-alt relative">
+          <div class="flex items-center justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <Profile {pubkey} {url} />
             </div>
+            {#if canBan || canUnallow}
+              <div class="relative">
+                <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+                  <Icon icon={MenuDots} />
+                </Button>
+                {#if menuPubkey === pubkey}
+                  <Popover hideOnClick onClose={closeMenu}>
+                    <ul
+                      transition:fly
+                      class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                      {#if canUnallow}
+                        <li>
+                          <Button onclick={() => unallowMember(pubkey)}>
+                            <Icon icon={UserMinus} />
+                            Remove User
+                          </Button>
+                        </li>
+                      {/if}
+                      {#if canBan}
+                        <li>
+                          <Button class="text-error" onclick={() => banMember(pubkey)}>
+                            <Icon icon={MinusCircle} />
+                            Ban User
+                          </Button>
+                        </li>
+                      {/if}
+                    </ul>
+                  </Popover>
+                {/if}
+              </div>
+            {/if}
           </div>
-        {/each}
-      {/if}
+        </div>
+      {/each}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/SpaceMenu.svelte

@@ -181,11 +181,7 @@
             <li>
               <Button onclick={showMembers}>
                 <Icon icon={UserRounded} />
-                {#if $members === undefined}
-                  View Members
-                {:else}
-                  View Members ({$members.length})
-                {/if}
+                View Members ({$members.length})
               </Button>
             </li>
             {#if $userIsAdmin}

src/app/components/ThreadCreate.svelte

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

src/app/core/commands.ts

@@ -22,7 +22,6 @@ import {PollResponse} from "nostr-tools/kinds"
 import {
   DELETE,
   REPORT,
-  MESSAGE,
   PROFILE,
   MESSAGING_RELAYS,
   RELAYS,
@@ -123,34 +122,6 @@ 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[]) => {
@@ -766,10 +737,9 @@ export const addSpaceMembers = async (
   pubkeys: string[],
 ): Promise<string | undefined> => {
   const spaceMembers = get(deriveSpaceMembers(url))
-
   const results = await Promise.all(
     pubkeys
-      .filter(pubkey => !spaceMembers || !spaceMembers.includes(pubkey))
+      .filter(pubkey => !spaceMembers.includes(pubkey))
       .map(pubkey =>
         manageRelay(url, {
           method: ManagementMethod.AllowPubkey,

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: async () => {
+    onScroll: () => {
       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)) {
-        await loadTimeframe(since, until)
+        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: async () => {
+    onScroll: () => {
       const [since, until] = forwardWindow
 
       forwardWindow = [until, until + interval]
@@ -181,7 +181,7 @@ export const makeFeed = ({
       insertEvents(buffer.splice(0, 30))
 
       if (until < now()) {
-        await loadTimeframe(since, until)
+        loadTimeframe(since, until)
       } else if (!buffer.some(e => e.created_at > at)) {
         forwardScroller.stop()
         onForwardExhausted?.()

src/app/core/state.ts

@@ -329,6 +329,8 @@ 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
@@ -593,8 +595,6 @@ 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) =>
@@ -615,12 +615,7 @@ export const roomsByUrl = derived(roomMetaEventsByIdByUrl, roomMetaEventsByIdByU
 
     for (const event of deleteEvents) {
       for (const h of getTagValues("h", event.tags)) {
-        const deletedAt = deletedByH.get(h)
-
-        deletedByH.set(
-          h,
-          deletedAt === undefined ? event.created_at : max([deletedAt, event.created_at]),
-        )
+        deletedByH.set(h, max([deletedByH.get(h), event.created_at]))
       }
     }
 
@@ -628,9 +623,8 @@ export const roomsByUrl = derived(roomMetaEventsByIdByUrl, roomMetaEventsByIdByU
 
     for (const event of metaEvents) {
       const meta = tryCatch(() => readRoomMeta(event))
-      const deletedAt = meta ? deletedByH.get(meta.h) : undefined
 
-      if (!meta || (deletedAt !== undefined && !gt(meta.event.created_at, deletedAt))) {
+      if (!meta || gt(deletedByH.get(meta.h), meta.event.created_at)) {
         continue
       }
 
@@ -814,49 +808,36 @@ export const deriveOtherRooms = (url: string) =>
 
 // Space/room memberships
 
-export const deriveSpaceMembers = (url: string) =>
-  derived(deriveRelaySignedEvents(url, [{kinds: [RELAY_MEMBERS]}]), ([event]) =>
-    uniq(getTagValues("member", event?.tags ?? [])),
-  )
+const getSpaceMembers = (_url: string, events: TrustedEvent[]) => {
+  const members = new Set<string>()
 
-export const deriveRoomMembers = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_MEMBERS], "#d": [h]}]
+  for (const event of sortEventsAsc(events)) {
+    if (event.kind === RELAY_MEMBERS) {
+      members.clear()
 
-  return derived(deriveEventsForUrl(url, filters), ([event]) =>
-    uniq(getPubkeyTagValues(event?.tags ?? [])),
-  )
-}
+      for (const pubkey of uniq(getTagValues("member", event.tags))) {
+        members.add(pubkey)
+      }
 
-export type BannedPubkeyItem = {
-  pubkey: string
-  reason: string
-}
-
-export const spaceBannedPubkeyItems = new Map<string, BannedPubkeyItem[]>()
-
-export const deriveSpaceBannedPubkeyItems = (url: string) => {
-  const store = writable(spaceBannedPubkeyItems.get(url) || [])
-
-  manageRelay(url, {method: ManagementMethod.ListBannedPubkeys, params: []}).then(res => {
-    spaceBannedPubkeyItems.set(url, res.result)
-    store.set(res.result)
-  })
-
-  return store
-}
-
-export const deriveRoomAdmins = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_ADMINS], "#d": [h]}]
-
-  return derived(deriveEventsForUrl(url, filters), $events => {
-    const adminsEvent = first($events)
-
-    if (adminsEvent) {
-      return getPubkeyTagValues(adminsEvent.tags)
+      continue
     }
 
-    return []
-  })
+    const pubkeys = getPubkeyTagValues(event.tags)
+
+    if (event.kind === RELAY_ADD_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.add(pubkey)
+      }
+    }
+
+    if (event.kind === RELAY_REMOVE_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.delete(pubkey)
+      }
+    }
+  }
+
+  return Array.from(members)
 }
 
 const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
@@ -895,6 +876,53 @@ const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
   return Array.from(members)
 }
 
+export const deriveSpaceMembers = (url: string) =>
+  derived(
+    deriveRelaySignedEvents(url, [{kinds: [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER, RELAY_MEMBERS]}]),
+    $events => getSpaceMembers(url, $events),
+  )
+
+export type BannedPubkeyItem = {
+  pubkey: string
+  reason: string
+}
+
+export const spaceBannedPubkeyItems = new Map<string, BannedPubkeyItem[]>()
+
+export const deriveSpaceBannedPubkeyItems = (url: string) => {
+  const store = writable(spaceBannedPubkeyItems.get(url) || [])
+
+  manageRelay(url, {method: ManagementMethod.ListBannedPubkeys, params: []}).then(res => {
+    spaceBannedPubkeyItems.set(url, res.result)
+    store.set(res.result)
+  })
+
+  return store
+}
+
+export const deriveRoomMembers = (url: string, h: string) => {
+  const filters: Filter[] = [
+    {kinds: [ROOM_MEMBERS], "#d": [h]},
+    {kinds: [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]},
+  ]
+
+  return derived(deriveEventsForUrl(url, filters), $events => getRoomMembers(url, h, $events))
+}
+
+export const deriveRoomAdmins = (url: string, h: string) => {
+  const filters: Filter[] = [{kinds: [ROOM_ADMINS], "#d": [h]}]
+
+  return derived(deriveEventsForUrl(url, filters), $events => {
+    const adminsEvent = first($events)
+
+    if (adminsEvent) {
+      return getPubkeyTagValues(adminsEvent.tags)
+    }
+
+    return []
+  })
+}
+
 // Action items (admin review queue)
 // const pendingJoins: TrustedEvent[] = []
 
@@ -991,49 +1019,19 @@ export const deriveUserIsSpaceAdmin = memoize((url?: string) => {
 })
 
 export const deriveUserSpaceMembershipStatus = (url: string) => {
-  // Fetch member list and user add/remove events directly in this derivation.
-  const memberListFilters: Filter[] = [{kinds: [RELAY_MEMBERS]}]
-  const userEventFilters: Filter[] = [{kinds: [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]}]
+  const filters: Filter[] = [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]
 
   return derived(
     [
       pubkey,
-      deriveRelaySignedEvents(url, memberListFilters),
-      deriveRelaySignedEvents(url, userEventFilters),
-      deriveEventsForUrl(url, [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]),
+      deriveSpaceMembers(url),
+      deriveEventsForUrl(url, filters),
       deriveUserIsSpaceAdmin(url),
     ],
-    ([$pubkey, $memberListEvents, $userAddRemoveEvents, $joinLeaveEvents, $isAdmin]) => {
-      // If admin, always granted.
-      if ($isAdmin) {
-        return MembershipStatus.Granted
-      }
+    ([$pubkey, $members, $events, $isAdmin]) => {
+      const isMember = $members.includes($pubkey!) || $isAdmin
 
-      const membersEvent = $memberListEvents.find(spec({kind: RELAY_MEMBERS}))
-      const memberList = membersEvent ? uniq(getTagValues("member", membersEvent.tags)) : undefined
-
-      let isMember = false
-
-      if (memberList) {
-        // Member list exists - check if user is in it.
-        isMember = memberList.includes($pubkey!)
-      } else {
-        // No member list available - replay the user's add/remove history.
-        for (const event of sortBy(e => e.created_at, $userAddRemoveEvents)) {
-          if (event.pubkey !== $pubkey) {
-            continue
-          }
-
-          if (event.kind === RELAY_ADD_MEMBER) {
-            isMember = true
-          } else if (event.kind === RELAY_REMOVE_MEMBER) {
-            isMember = false
-          }
-        }
-      }
-
-      for (const event of $joinLeaveEvents) {
-        // Join events indicate pending or granted status, leave resets to initial.
+      for (const event of $events) {
         if (event.pubkey !== $pubkey) {
           continue
         }
@@ -1059,46 +1057,19 @@ export const deriveUserIsRoomAdmin = (url: string, h: string) =>
   )
 
 export const deriveUserRoomMembershipStatus = (url: string, h: string) => {
-  // Fetch the room member list and the current user's add/remove events.
-  const userEventFilters: Filter[] = [{kinds: [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]}]
-  const joinLeaveFilters: Filter[] = [{kinds: [ROOM_JOIN, ROOM_LEAVE], "#h": [h]}]
+  const filters: Filter[] = [{kinds: [ROOM_JOIN, ROOM_LEAVE], "#h": [h]}]
 
   return derived(
     [
       pubkey,
       deriveRoomMembers(url, h),
-      deriveEventsForUrl(url, userEventFilters),
-      deriveEventsForUrl(url, joinLeaveFilters),
+      deriveEventsForUrl(url, filters),
       deriveUserIsRoomAdmin(url, h),
     ],
-    ([$pubkey, $memberList, $userAddRemoveEvents, $joinLeaveEvents, $isAdmin]) => {
-      // If admin of this room's space, always granted.
-      if ($isAdmin) {
-        return MembershipStatus.Granted
-      }
+    ([$pubkey, $members, $events, $isAdmin]) => {
+      const isMember = $members.includes($pubkey!) || $isAdmin
 
-      let isMember = false
-
-      if ($memberList) {
-        // Member list exists - check if user is in it.
-        isMember = $memberList.includes($pubkey!)
-      } else {
-        // No member list available - replay the user's add/remove history.
-        for (const event of sortEventsAsc($userAddRemoveEvents)) {
-          if (event.pubkey !== $pubkey) {
-            continue
-          }
-
-          if (event.kind === ROOM_ADD_MEMBER) {
-            isMember = true
-          } else if (event.kind === ROOM_REMOVE_MEMBER) {
-            isMember = false
-          }
-        }
-      }
-
-      for (const event of $joinLeaveEvents) {
-        // Join events indicate pending or granted status, leave resets to initial.
+      for (const event of $events) {
         if (event.pubkey !== $pubkey) {
           continue
         }

src/app/core/sync.ts

@@ -19,7 +19,6 @@ import {
   RELAY_MEMBERS,
   RELAY_ADD_MEMBER,
   RELAY_REMOVE_MEMBER,
-  MESSAGE,
   isSignedEvent,
   unionFilters,
   getTagValue,
@@ -44,6 +43,7 @@ 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) => {
+const syncSpace = (url: string, rooms: string[]) => {
   const since = ago(WEEK)
   const seen = new Set<string>()
   const controller = new AbortController()
@@ -281,10 +281,10 @@ const syncSpace = (url: string) => {
         signal: controller.signal,
         filters: [
           {kinds: [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS], "#d": [room]},
-          {kinds: [MESSAGE, ...CONTENT_KINDS], since, "#h": [room]},
+          {kinds: MESSAGE_KINDS, since, "#h": [room]},
           makeCommentFilter(CONTENT_KINDS, {since, "#h": [room]}),
           {
-            kinds: [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE],
+            kinds: [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
             "#h": [room],
           },
           {kinds: [PollResponse], since},
@@ -293,15 +293,19 @@ const syncSpace = (url: string) => {
     }
   }
 
-  const relayKinds = [RELAY_MEMBERS]
+  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 roomDeleteKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE]
+  const roomMemberKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]
 
   pullAndListen({
     url,
     signal: controller.signal,
     filters: [
-      {kinds: [...relayKinds, ...roomMetaKinds, ...roomDeleteKinds, ...CONTENT_KINDS, MESSAGE]},
+      {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...MESSAGE_KINDS]},
       makeCommentFilter(CONTENT_KINDS, {since}),
       {kinds: [PollResponse], since},
     ],
@@ -324,6 +328,7 @@ const syncSpace = (url: 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))
@@ -337,15 +342,28 @@ const syncSpaces = () => {
     for (const [url, unsubscribe] of unsubscribersByUrl.entries()) {
       if (!urls.has(url)) {
         unsubscribersByUrl.delete(url)
+        roomsByUrl.delete(url)
         unsubscribe()
       }
     }
 
-    // Start syncing for new spaces
+    // Start or restart syncing for each space
     for (const url of urls) {
-      if (!unsubscribersByUrl.has(url)) {
-        unsubscribersByUrl.set(url, syncSpace(url))
+      const rooms = getSpaceRoomsFromGroupList(url, $userGroupList)
+
+      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

@@ -1,42 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,17 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-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, RoomMeta} from "@welshman/util"
+import type {PublishedProfile} from "@welshman/util"
 import {
   createSearch,
   profiles,
@@ -14,27 +14,12 @@ import {
   getWotGraph,
 } from "@welshman/app"
 import type {FileAttributes} from "@welshman/editor"
-import {
-  Editor,
-  MentionSuggestion,
-  TippySuggestion,
-  WelshmanExtension,
-  editorProps,
-} from "@welshman/editor"
+import {Editor, MentionSuggestion, 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,
-  makeRoomId,
-  splitRoomId,
-  userSpaceUrls,
-  roomsByUrl,
-} from "@app/core/state"
+import {deriveSpaceMembers} from "@app/core/state"
 import {pushToast} from "@app/util/toast"
 
 export const makeEditor = async ({
@@ -79,7 +64,7 @@ export const makeEditor = async ({
         getValue: (profile: PublishedProfile) => profile.event.pubkey,
         sortFn: ({score = 1, item}) => {
           const wotScore = getWotGraph().get(item.event.pubkey) || 0
-          const membershipScale = $spaceMembers?.includes(item.event.pubkey) ? 2 : 1
+          const membershipScale = $spaceMembers.includes(item.event.pubkey) ? 2 : 1
 
           return dec(score) * inc(wotScore / getMaxWot()) * membershipScale
         },
@@ -97,36 +82,11 @@ 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: {
@@ -168,29 +128,6 @@ 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
                     },
                   }),
@@ -200,7 +137,6 @@ export const makeEditor = async ({
           },
         },
       }),
-      NativeClipboardPasteExtension,
     ],
     onUpdate({editor}) {
       wordCount?.set(editor.storage.wordCount.words)

src/app/util/nip46.ts

@@ -1,4 +1,4 @@
-import {get, writable} from "svelte/store"
+import {writable} from "svelte/store"
 import type {Nip46ResponseWithResult} from "@welshman/signer"
 import {Nip46Broker} from "@welshman/signer"
 import {makeSecret} from "@welshman/util"
@@ -11,22 +11,6 @@ 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("")
@@ -70,22 +54,6 @@ 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, MESSAGE} from "@welshman/util"
+import {sortEventsDesc, getTagValue} from "@welshman/util"
 import {makeSpacePath, makeRoomPath, makeSpaceChatPath, makeChatPath} from "@app/util/routes"
 import {
-  CONTENT_KINDS,
+  MESSAGE_KINDS,
   notificationSettings,
   chatsById,
   userGroupList,
@@ -85,7 +85,7 @@ export const allNotifications = derived(
         deriveEventsByIdByUrl({
           tracker,
           repository,
-          filters: [{kinds: [MESSAGE, ...CONTENT_KINDS]}, makeCommentFilter(CONTENT_KINDS)],
+          filters: [{kinds: MESSAGE_KINDS}, makeCommentFilter(MESSAGE_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,10 +45,7 @@ export type PushPermissionResult = {
 }
 
 export const onNotification = call(() => {
-  const allFilters = [
-    {kinds: [MESSAGE, ...CONTENT_KINDS, ...DM_KINDS]},
-    makeCommentFilter(CONTENT_KINDS),
-  ]
+  const allFilters = [{kinds: [...MESSAGE_KINDS, ...DM_KINDS]}, makeCommentFilter(MESSAGE_KINDS)]
   const filters = allFilters.map(assoc("since", now()))
   const subscribers: Subscriber<TrustedEvent>[] = []
 
@@ -161,7 +158,7 @@ export const syncRelaySubscriptions = (
     userSettingsValues,
   ]).subscribe(
     throttle(3000, ([$userSpaceUrls, {spaces, mentions}, {alerts}]) => {
-      const baseFilters = [{kinds: [MESSAGE, ...CONTENT_KINDS]}, makeCommentFilter(CONTENT_KINDS)]
+      const baseFilters = [{kinds: MESSAGE_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, {replaceState: true})
+    goto(prevPath)
   } else if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
-    goto(makeSpacePath(url, "recent"), {replaceState: true})
+    goto(makeSpacePath(url, "recent"))
   } else {
-    goto(makeSpacePath(url), {replaceState: true})
+    goto(makeSpacePath(url))
   }
 }
 

src/assets/icons/drag-handle.svg

@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="9" cy="6" r="1.5" fill="#000000"/>
-<circle cx="15" cy="6" r="1.5" fill="#000000"/>
-<circle cx="9" cy="12" r="1.5" fill="#000000"/>
-<circle cx="15" cy="12" r="1.5" fill="#000000"/>
-<circle cx="9" cy="18" r="1.5" fill="#000000"/>
-<circle cx="15" cy="18" r="1.5" fill="#000000"/>
-</svg>

src/assets/icons/native-share.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.17933 3.72734L7.41899 1.39855V9.76536C7.41899 10.0954 7.67913 10.3425 7.97911 10.3425C8.29941 10.3425 8.53924 10.0745 8.53924 9.76536V1.41957L10.7789 3.72734C10.8992 3.8513 11.039 3.89235 11.1789 3.89235C11.3187 3.89235 11.4789 3.83037 11.5788 3.72734C11.7992 3.50033 11.7992 3.13007 11.5788 2.88213L9.35938 0.574361C8.69927 -0.187929 7.37983 -0.187929 6.63916 0.553433L4.3791 2.90303C4.15879 3.13003 4.15879 3.5003 4.3791 3.74824C4.5994 3.97444 4.95952 3.97444 5.17905 3.72731L5.17933 3.72734Z" fill="#A6ADBB"/>
-<path d="M13.8789 4.61365H11.2197C10.8994 4.61365 10.6596 4.8817 10.6596 5.19081C10.6596 5.49991 10.9197 5.76796 11.2197 5.76796H13.8797C14.4195 5.76796 14.8593 6.22115 14.8593 6.77737V12.7944C14.8593 13.3506 14.4195 13.8038 13.8797 13.8038L2.12025 13.8046C1.58044 13.8046 1.14063 13.3514 1.14063 12.7952L1.13985 6.79816C1.13985 6.24194 1.56014 5.78876 2.11947 5.78876H4.7795C5.0998 5.78876 5.33963 5.5207 5.33963 5.2116C5.33963 4.90169 5.0998 4.61353 4.7795 4.61353H2.12027C0.939881 4.61353 0 5.56177 0 6.79827V12.8153C0 14.0307 0.939781 15 2.12027 15H13.8797C15.0593 15 16 14.0317 16 12.8153L15.9992 6.79827C15.9992 5.56185 15.0594 4.61365 13.8789 4.61365Z" fill="#A6ADBB"/>
-</svg>

src/lib/components/Button.svelte

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

src/lib/components/SecondaryNav.svelte

@@ -4,17 +4,15 @@
 
   interface Props {
     class?: string
-    visible?: boolean
     children?: Snippet
   }
 
-  const {children, visible = false, ...props}: Props = $props()
+  const {children, ...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",
-    visible ? "flex" : "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 hidden md:flex",
     props.class,
   )}>
   {@render children?.()}

src/lib/components/VirtualItem.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  let {
+    children,
+    root,
+    initiallyVisible = false,
+    estimatedHeight = 48,
+  }: {
+    children: Snippet
+    root?: HTMLElement
+    initiallyVisible?: boolean
+    estimatedHeight?: number
+  } = $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,21 +78,6 @@
       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/people/+page.svelte

@@ -40,7 +40,7 @@
 <Page>
   <ContentSearch>
     {#snippet input()}
-      <label class="row-2 input input-bordered w-full">
+      <label class="row-2 input input-bordered">
         <Icon icon={Magnifier} />
         <!-- svelte-ignore a11y_autofocus -->
         <input

src/routes/settings/relays/+page.svelte

@@ -58,14 +58,14 @@
     <RelaySettingsItem
       icon={Inbox}
       title="Inbox Relays"
-      subtitle="Where other people should send notes intended for you. Be sure to select relays that will accept notes that tag you."
+      subtitle="Where you send your public notes. Be sure to select relays that will accept your notes, and which will let people who follow you read them."
       relays={readRelayUrls}
       addRelay={addReadRelay}
       removeRelay={removeReadRelay} />
     <RelaySettingsItem
       icon={Plane}
       title="Outbox Relays"
-      subtitle="Where you send your public notes. Be sure to select relays that will accept your notes, and which will let people who follow you read them."
+      subtitle="Where other people should send notes intended for you. Be sure to select relays that will accept notes that tag you."
       relays={writeRelayUrls}
       addRelay={addWriteRelay}
       removeRelay={removeWriteRelay} />

src/routes/spaces/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
   import {onMount, tick} from "svelte"
-  import {flip} from "svelte/animate"
-  import {cubicOut} from "svelte/easing"
   import {derived as _derived} from "svelte/store"
   import {dec, insertAt, removeAt, sleep} from "@welshman/lib"
   import type {RelayProfile} from "@welshman/util"
@@ -9,7 +7,6 @@
   import {relays, createSearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
-  import DragHandle from "@assets/icons/drag-handle.svg?dataurl"
   import Widget from "@assets/icons/widget-4.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
@@ -101,8 +98,6 @@
   const onDragStart = (e: DragEvent, url: string) => {
     draggedUrl = url
     dragStartOrder = [...orderedSpaceUrls]
-    lastDragTarget = undefined
-    didDrop = false
 
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = "move"
@@ -110,25 +105,15 @@
     }
   }
 
-  const onDragOver = (e: DragEvent) => {
+  const onDragOver = (e: DragEvent, targetUrl: string) => {
     e.preventDefault()
-  }
-
-  const onDragEnter = (e: DragEvent, targetUrl: string) => {
-    e.preventDefault()
-
-    if (lastDragTarget === targetUrl) return
-
-    lastDragTarget = targetUrl
     reorderSpaceUrls(targetUrl)
   }
 
   const onDrop = (e: DragEvent, targetUrl: string) => {
     e.preventDefault()
     reorderSpaceUrls(targetUrl)
-    didDrop = true
     draggedUrl = undefined
-    lastDragTarget = undefined
 
     if (dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
       void setSpaceMembershipOrder(orderedSpaceUrls).catch(console.error)
@@ -138,14 +123,8 @@
   }
 
   const onDragEnd = () => {
-    if (!didDrop && dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
-      orderedSpaceUrls = dragStartOrder
-    }
-
     draggedUrl = undefined
     dragStartOrder = undefined
-    lastDragTarget = undefined
-    didDrop = false
   }
 
   $effect(() => {
@@ -164,8 +143,6 @@
   let orderedSpaceUrls = $state<string[]>([])
   let draggedUrl = $state<string | undefined>()
   let dragStartOrder = $state<string[] | undefined>()
-  let lastDragTarget = $state<string | undefined>()
-  let didDrop = $state(false)
 
   const openSearch = () => {
     showSearch = true
@@ -270,25 +247,17 @@
             <Divider>Your spaces</Divider>
             {#each filteredUserUrls as url (url)}
               <div
-                animate:flip={{duration: 300, easing: cubicOut}}
-                class="transition-opacity duration-200 {draggedUrl === url ? 'opacity-50' : ''}"
+                class:opacity-60={draggedUrl === url}
                 draggable="true"
                 role="listitem"
                 ondragstart={e => onDragStart(e, url)}
-                ondragover={onDragOver}
-                ondragenter={e => onDragEnter(e, url)}
+                ondragover={e => onDragOver(e, url)}
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
                 <Button
-                  class="group card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative min-w-0"
+                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative"
                   onclick={() => openSpace(url)}>
-                  <div class="flex w-full items-start gap-2">
-                    <div
-                      class="mt-4 flex cursor-grab p-1 text-base-content/30 transition-colors group-hover:text-base-content/60">
-                      <Icon icon={DragHandle} />
-                    </div>
-                    <RelaySummary hideFavorites {url} />
-                  </div>
+                  <RelaySummary hideFavorites {url} />
                   {#if $notifications.has(makeSpacePath(url))}
                     <div class="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary"></div>
                   {/if}

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 = parseFloat(theme.screens.md) * 16
+  const md = parseInt(theme.screens.md, 10)
 
   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 visible class="w-auto grow pb-16">
+  <SecondaryNav class="flex! 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,6 +38,7 @@
     deriveRoom,
     deriveUserRoomMembershipStatus,
     getRoomType,
+    MESSAGE_KINDS,
     MembershipStatus,
     PROTECTED,
     RoomType,
@@ -348,13 +350,9 @@
 
     elements.reverse()
 
-    return elements
-  })
+    requestAnimationFrame(manageScrollPosition)
 
-  $effect(() => {
-    if (elements.length > 0) {
-      requestAnimationFrame(manageScrollPosition)
-    }
+    return elements
   })
 
   const start = () => {
@@ -364,7 +362,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [MESSAGE, ROOM_ADD_MEMBER], "#h": [h]}],
+      filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER], "#h": [h]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -485,21 +483,23 @@
           {:else if type === "date"}
             <Divider>{value}</Divider>
           {:else if shouldVirtualize}
-            {@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 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} from "@app/core/state"
+  import {userSettingsValues, decodeRelay, PROTECTED, MESSAGE_KINDS} from "@app/core/state"
   import {prependParent, canEnforceNip70, publishDelete} from "@app/core/commands"
   import {checked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -241,13 +242,9 @@
 
     elements.reverse()
 
-    return elements
-  })
+    requestAnimationFrame(manageScrollPosition)
 
-  $effect(() => {
-    if (elements.length > 0) {
-      requestAnimationFrame(manageScrollPosition)
-    }
+    return elements
   })
 
   const start = () => {
@@ -257,7 +254,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [MESSAGE, RELAY_ADD_MEMBER]}],
+      filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -323,21 +320,23 @@
     {:else if type === "date"}
       <Divider>{value}</Divider>
     {:else if shouldVirtualize}
-      {@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 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}