Merge remote-tracking branch 'upstream/dev' into feat/space-invite-share

## Summary

This PR fixes a bug where deleting a room succeeded on the relay, but the room could still appear in space navigation (including after refresh).

Fixes #194.

## Root Cause

Room list derivation did not consistently treat delete events as authoritative in edge cases:
- Delete timestamp aggregation could involve an undefined prior value.
- Room meta events with the same second-level timestamp as a delete event were still considered active.

## Changes

- Updated room delete timestamp aggregation logic to handle first delete event safely.
- Updated room filtering condition so a room is excluded when its meta timestamp is less than or equal to the delete timestamp.
- This ensures deleted rooms are not shown in navigation immediately or after reload.

## Validation

- `pnpm run check` passed.
- `pnpm run lint` passed.

## Testing

- [x] In a NIP-29 space, create a temporary room.
- [x] Delete the room from room details.
- [x] Confirm it disappears from navigation immediately.
- [x] Hard refresh and confirm it does not reappear.
- [x] Reopen app/session and confirm it remains absent.
- [x] Repeat by creating/deleting another room quickly (same-minute timestamp edge case).

.fdignore

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

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

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

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

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

package.json

@@ -48,12 +48,14 @@
     "@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",
@@ -63,6 +65,7 @@
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
+    "@tiptap/pm": "^2.27.2",
     "@types/qrcode": "^1.5.6",
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@capacitor/cli':
         specifier: ^8.0.1
         version: 8.0.1
+      '@capacitor/clipboard':
+        specifier: ^8.0.1
+        version: 8.0.1(@capacitor/core@8.0.1)
       '@capacitor/core':
         specifier: ^8.0.1
         version: 8.0.1
@@ -44,6 +47,9 @@ 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)
@@ -71,6 +77,9 @@ importers:
       '@tiptap/core':
         specifier: ^2.27.2
         version: 2.27.2(@tiptap/pm@2.27.2)
+      '@tiptap/pm':
+        specifier: ^2.27.2
+        version: 2.27.2
       '@types/qrcode':
         specifier: ^1.5.6
         version: 1.5.6
@@ -791,6 +800,11 @@ packages:
     engines: {node: '>=22.0.0'}
     hasBin: true
 
+  '@capacitor/clipboard@8.0.1':
+    resolution: {integrity: sha512-iOlbTi8MojKyLnYE+M27priXid7vHd0PlDwyHohPzkuQ8Rkp6q7ykwZmPEUD+OnU/Ink7Qw/pUOfKgraKmA6Eg==}
+    peerDependencies:
+      '@capacitor/core': '>=8.0.0'
+
   '@capacitor/core@8.0.1':
     resolution: {integrity: sha512-5UqSWxGMp/B8KhYu7rAijqNtYslhcLh+TrbfU48PfdMDsPfaU/VY48sMNzC22xL8BmoFoql/3SKyP+pavTOvOA==}
 
@@ -827,6 +841,11 @@ 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==}
 
@@ -5969,6 +5988,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@capacitor/clipboard@8.0.1(@capacitor/core@8.0.1)':
+    dependencies:
+      '@capacitor/core': 8.0.1
+
   '@capacitor/core@8.0.1':
     dependencies:
       tslib: 2.8.1
@@ -6006,6 +6029,10 @@ 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 h-auto min-h-32 p-[.65rem] pb-6;
+  @apply input rounded-box block h-auto min-h-32 w-full p-[.65rem] pb-6;
 }
 
 .input-editor .tiptap {

src/app/components/CalendarEventCreate.svelte

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

src/app/components/CalendarEventForm.svelte

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

src/app/components/ClassifiedForm.svelte

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

src/app/components/ComposeMenu.svelte

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

src/app/components/ContentLinkBlock.svelte

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

src/app/components/ContentLinkInline.svelte

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

src/app/components/ContentLinkUrl.svelte

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

src/app/components/ContentQuote.svelte

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

src/app/components/EventReply.svelte

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

src/app/components/GoalCreate.svelte

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

src/app/components/LogInBunker.svelte

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

src/app/components/NoteCard.svelte

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

src/app/components/PollCreate.svelte

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

src/app/components/ProfileBadges.svelte

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

src/app/components/ReactionSummary.svelte

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

src/app/components/RoomDetail.svelte

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

src/app/components/RoomItemContent.svelte

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

src/app/components/RoomMembers.svelte

@@ -73,34 +73,44 @@
       </ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-2">
-      {#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}
+      {#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>
             </div>
           </div>
-        </div>
-      {/each}
+        {/each}
+      {/if}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/RoomMembersAdd.svelte

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

src/app/components/SpaceInvite.svelte

@@ -3,7 +3,9 @@
   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"
@@ -28,6 +30,17 @@
 
   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)
 
@@ -41,6 +54,13 @@
   })
 
   onMount(async () => {
+  try {
+    const {value} = await Share.canShare()
+    canShare = value
+  } catch {
+    canShare = false
+  }
+
     const [[event]] = await Promise.all([
       request({
         relays: [url],
@@ -74,17 +94,37 @@
         <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">
-          <QRCode code={invite} />
+          <div class="w-48">
+            <QRCode code={invite} />
+          </div>
           <Field>
             {#snippet input()}
-              <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>
+              <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>
             {/snippet}
+            
             {#snippet info()}
               <p>
                 This invite link can be used by clicking "Add Space" and pasting it there.

src/app/components/SpaceMembers.svelte

@@ -112,46 +112,58 @@
       {/if}
     {/if}
     <div class="flex flex-col gap-2">
-      {#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>
+      {#if $members === undefined}
+        <div class="card2 bg-base-200 p-4">
+          <span class="text-error">Member list not available from this space</span>
         </div>
-      {/each}
+      {: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}
+            </div>
+          </div>
+        {/each}
+      {/if}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/SpaceMenu.svelte

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

src/app/components/ThreadCreate.svelte

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

src/app/core/commands.ts

@@ -22,6 +22,7 @@ import {PollResponse} from "nostr-tools/kinds"
 import {
   DELETE,
   REPORT,
+  MESSAGE,
   PROFILE,
   MESSAGING_RELAYS,
   RELAYS,
@@ -122,6 +123,34 @@ export const prependParent = (
   return {content, tags}
 }
 
+export const publishRoomQuote = ({
+  url,
+  h,
+  parent,
+  protect,
+  delay,
+}: {
+  url: string
+  h?: string
+  parent: TrustedEvent
+  protect: boolean
+  delay?: number
+}) => {
+  const tags: string[][] = []
+
+  if (h) {
+    tags.push(["h", h])
+  }
+
+  if (protect) {
+    tags.push(PROTECTED)
+  }
+
+  const event = makeEvent(MESSAGE, prependParent(parent, {content: "", tags}, url))
+
+  return publishThunk({relays: [url], event, delay})
+}
+
 // Synchronization
 
 export const broadcastUserData = async (relays: string[]) => {
@@ -737,9 +766,10 @@ export const addSpaceMembers = async (
   pubkeys: string[],
 ): Promise<string | undefined> => {
   const spaceMembers = get(deriveSpaceMembers(url))
+
   const results = await Promise.all(
     pubkeys
-      .filter(pubkey => !spaceMembers.includes(pubkey))
+      .filter(pubkey => !spaceMembers || !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: () => {
+    onScroll: async () => {
       const [since, until] = backwardWindow
 
       backwardWindow = [since - interval, since]
@@ -160,7 +160,7 @@ export const makeFeed = ({
       insertEvents(buffer.splice(0, 30))
 
       if (until > now() - int(2, YEAR)) {
-        loadTimeframe(since, until)
+        await loadTimeframe(since, until)
       } else if (!buffer.some(e => e.created_at < at)) {
         backwardScroller.stop()
         onBackwardExhausted?.()
@@ -173,7 +173,7 @@ export const makeFeed = ({
     reverse: true,
     delay: 300,
     threshold: 5000,
-    onScroll: () => {
+    onScroll: async () => {
       const [since, until] = forwardWindow
 
       forwardWindow = [until, until + interval]
@@ -181,7 +181,7 @@ export const makeFeed = ({
       insertEvents(buffer.splice(0, 30))
 
       if (until < now()) {
-        loadTimeframe(since, until)
+        await loadTimeframe(since, until)
       } else if (!buffer.some(e => e.created_at > at)) {
         forwardScroller.stop()
         onForwardExhausted?.()

src/app/core/state.ts

@@ -329,8 +329,6 @@ if (ENABLE_ZAPS) {
 
 export const CONTENT_KINDS = [ZAP_GOAL, EVENT_TIME, THREAD, CLASSIFIED, Poll]
 
-export const MESSAGE_KINDS = [...CONTENT_KINDS, MESSAGE]
-
 export const DM_KINDS = [DIRECT_MESSAGE, DIRECT_MESSAGE_FILE]
 
 // Settings
@@ -595,6 +593,8 @@ export const getRoomType = (room: RoomMeta): RoomType =>
 
 export const makeRoomId = (url: string, h: string) => `${url}'${h}`
 
+export const isRoomId = (id: string) => id.includes("'")
+
 export const splitRoomId = (id: string) => id.split("'")
 
 export const hasNip29 = (relay?: RelayProfile) =>
@@ -615,7 +615,12 @@ export const roomsByUrl = derived(roomMetaEventsByIdByUrl, roomMetaEventsByIdByU
 
     for (const event of deleteEvents) {
       for (const h of getTagValues("h", event.tags)) {
-        deletedByH.set(h, max([deletedByH.get(h), event.created_at]))
+        const deletedAt = deletedByH.get(h)
+
+        deletedByH.set(
+          h,
+          deletedAt === undefined ? event.created_at : max([deletedAt, event.created_at]),
+        )
       }
     }
 
@@ -623,8 +628,9 @@ 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 || gt(deletedByH.get(meta.h), meta.event.created_at)) {
+      if (!meta || (deletedAt !== undefined && !gt(meta.event.created_at, deletedAt))) {
         continue
       }
 
@@ -808,36 +814,49 @@ export const deriveOtherRooms = (url: string) =>
 
 // Space/room memberships
 
-const getSpaceMembers = (_url: string, events: TrustedEvent[]) => {
-  const members = new Set<string>()
+export const deriveSpaceMembers = (url: string) =>
+  derived(deriveRelaySignedEvents(url, [{kinds: [RELAY_MEMBERS]}]), ([event]) =>
+    uniq(getTagValues("member", event?.tags ?? [])),
+  )
 
-  for (const event of sortEventsAsc(events)) {
-    if (event.kind === RELAY_MEMBERS) {
-      members.clear()
+export const deriveRoomMembers = (url: string, h: string) => {
+  const filters: Filter[] = [{kinds: [ROOM_MEMBERS], "#d": [h]}]
 
-      for (const pubkey of uniq(getTagValues("member", event.tags))) {
-        members.add(pubkey)
-      }
+  return derived(deriveEventsForUrl(url, filters), ([event]) =>
+    uniq(getPubkeyTagValues(event?.tags ?? [])),
+  )
+}
 
-      continue
+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)
     }
 
-    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)
+    return []
+  })
 }
 
 const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
@@ -876,53 +895,6 @@ 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[] = []
 
@@ -1019,19 +991,49 @@ export const deriveUserIsSpaceAdmin = memoize((url?: string) => {
 })
 
 export const deriveUserSpaceMembershipStatus = (url: string) => {
-  const filters: Filter[] = [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]
+  // 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]}]
 
   return derived(
     [
       pubkey,
-      deriveSpaceMembers(url),
-      deriveEventsForUrl(url, filters),
+      deriveRelaySignedEvents(url, memberListFilters),
+      deriveRelaySignedEvents(url, userEventFilters),
+      deriveEventsForUrl(url, [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]),
       deriveUserIsSpaceAdmin(url),
     ],
-    ([$pubkey, $members, $events, $isAdmin]) => {
-      const isMember = $members.includes($pubkey!) || $isAdmin
+    ([$pubkey, $memberListEvents, $userAddRemoveEvents, $joinLeaveEvents, $isAdmin]) => {
+      // If admin, always granted.
+      if ($isAdmin) {
+        return MembershipStatus.Granted
+      }
 
-      for (const event of $events) {
+      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.
         if (event.pubkey !== $pubkey) {
           continue
         }
@@ -1057,19 +1059,46 @@ export const deriveUserIsRoomAdmin = (url: string, h: string) =>
   )
 
 export const deriveUserRoomMembershipStatus = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_JOIN, ROOM_LEAVE], "#h": [h]}]
+  // 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]}]
 
   return derived(
     [
       pubkey,
       deriveRoomMembers(url, h),
-      deriveEventsForUrl(url, filters),
+      deriveEventsForUrl(url, userEventFilters),
+      deriveEventsForUrl(url, joinLeaveFilters),
       deriveUserIsRoomAdmin(url, h),
     ],
-    ([$pubkey, $members, $events, $isAdmin]) => {
-      const isMember = $members.includes($pubkey!) || $isAdmin
+    ([$pubkey, $memberList, $userAddRemoveEvents, $joinLeaveEvents, $isAdmin]) => {
+      // If admin of this room's space, always granted.
+      if ($isAdmin) {
+        return MembershipStatus.Granted
+      }
 
-      for (const event of $events) {
+      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.
         if (event.pubkey !== $pubkey) {
           continue
         }

src/app/core/sync.ts

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

src/app/editor/RoomReferenceExtension.ts

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

src/app/editor/RoomReferenceNodeView.ts

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

src/app/editor/RoomSuggestion.svelte

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

src/app/editor/clipboard.ts

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

src/app/editor/index.ts

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

src/app/util/nip46.ts

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

src/app/util/notifications.ts

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

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

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

src/app/util/routes.ts

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

src/assets/icons/drag-handle.svg

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

@@ -0,0 +1,4 @@
+<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 ${restProps.class}`)
+  const className = $derived(`text-left cursor-pointer ${restProps.class}`)
 
   const onClick = (e: Event) => {
     e.preventDefault()

src/lib/components/SecondaryNav.svelte

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

src/routes/+layout.svelte

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

src/routes/people/+page.svelte

@@ -40,7 +40,7 @@
 <Page>
   <ContentSearch>
     {#snippet input()}
-      <label class="row-2 input input-bordered">
+      <label class="row-2 input input-bordered w-full">
         <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 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={readRelayUrls}
       addRelay={addReadRelay}
       removeRelay={removeReadRelay} />
     <RelaySettingsItem
       icon={Plane}
       title="Outbox 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={writeRelayUrls}
       addRelay={addWriteRelay}
       removeRelay={removeWriteRelay} />

src/routes/spaces/+page.svelte

@@ -1,5 +1,7 @@
 <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"
@@ -7,6 +9,7 @@
   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"
@@ -98,6 +101,8 @@
   const onDragStart = (e: DragEvent, url: string) => {
     draggedUrl = url
     dragStartOrder = [...orderedSpaceUrls]
+    lastDragTarget = undefined
+    didDrop = false
 
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = "move"
@@ -105,15 +110,25 @@
     }
   }
 
-  const onDragOver = (e: DragEvent, targetUrl: string) => {
+  const onDragOver = (e: DragEvent) => {
     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)
@@ -123,8 +138,14 @@
   }
 
   const onDragEnd = () => {
+    if (!didDrop && dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
+      orderedSpaceUrls = dragStartOrder
+    }
+
     draggedUrl = undefined
     dragStartOrder = undefined
+    lastDragTarget = undefined
+    didDrop = false
   }
 
   $effect(() => {
@@ -143,6 +164,8 @@
   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
@@ -247,17 +270,25 @@
             <Divider>Your spaces</Divider>
             {#each filteredUserUrls as url (url)}
               <div
-                class:opacity-60={draggedUrl === url}
+                animate:flip={{duration: 300, easing: cubicOut}}
+                class="transition-opacity duration-200 {draggedUrl === url ? 'opacity-50' : ''}"
                 draggable="true"
                 role="listitem"
                 ondragstart={e => onDragStart(e, url)}
-                ondragover={e => onDragOver(e, url)}
+                ondragover={onDragOver}
+                ondragenter={e => onDragEnter(e, url)}
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
                 <Button
-                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative"
+                  class="group card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative min-w-0"
                   onclick={() => openSpace(url)}>
-                  <RelaySummary hideFavorites {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>
                   {#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 = parseInt(theme.screens.md, 10)
+  const md = parseFloat(theme.screens.md) * 16
 
   let width = $state(0)
 
@@ -25,7 +25,7 @@
   <div class="ml-sai mt-sai mb-sai relative z-nav w-14 shrink-0 bg-base-200 pt-2">
     <PrimaryNavSpaces />
   </div>
-  <SecondaryNav class="flex! w-auto! grow pb-16">
+  <SecondaryNav visible class="w-auto grow pb-16">
     <SpaceMenu {url} />
   </SecondaryNav>
 {/if}

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

@@ -37,7 +37,6 @@
     deriveRoom,
     deriveUserRoomMembershipStatus,
     getRoomType,
-    MESSAGE_KINDS,
     MembershipStatus,
     PROTECTED,
     RoomType,
@@ -105,6 +104,7 @@
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const shouldVirtualize = $derived(isNaN(at))
 
   const showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
@@ -348,11 +348,15 @@
 
     elements.reverse()
 
-    requestAnimationFrame(manageScrollPosition)
-
     return elements
   })
 
+  $effect(() => {
+    if (elements.length > 0) {
+      requestAnimationFrame(manageScrollPosition)
+    }
+  })
+
   const start = () => {
     cleanup?.()
 
@@ -360,7 +364,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [...MESSAGE_KINDS, ROOM_ADD_MEMBER], "#h": [h]}],
+      filters: [{kinds: [MESSAGE, ROOM_ADD_MEMBER], "#h": [h]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -468,7 +472,7 @@
             <Spinner loading={loadingForward}>Looking for messages...</Spinner>
           </p>
         {/if}
-        {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+        {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
           {#if type === "new-messages"}
             <div
               {id}
@@ -480,6 +484,22 @@
             </div>
           {: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}
           {:else}
             {@const event = value as TrustedEvent}
             {#if event.kind === ROOM_ADD_MEMBER}

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

@@ -25,7 +25,7 @@
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
-  import {userSettingsValues, decodeRelay, PROTECTED, MESSAGE_KINDS} from "@app/core/state"
+  import {userSettingsValues, decodeRelay, PROTECTED} from "@app/core/state"
   import {prependParent, canEnforceNip70, publishDelete} from "@app/core/commands"
   import {checked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -37,6 +37,7 @@
   const url = decodeRelay($page.params.relay!)
   const shouldProtect = canEnforceNip70(url)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const shouldVirtualize = $derived(isNaN(at))
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
@@ -240,11 +241,15 @@
 
     elements.reverse()
 
-    requestAnimationFrame(manageScrollPosition)
-
     return elements
   })
 
+  $effect(() => {
+    if (elements.length > 0) {
+      requestAnimationFrame(manageScrollPosition)
+    }
+  })
+
   const start = () => {
     cleanup?.()
 
@@ -252,7 +257,7 @@
       url,
       at: at || now(),
       element: element!,
-      filters: [{kinds: [...MESSAGE_KINDS, RELAY_ADD_MEMBER]}],
+      filters: [{kinds: [MESSAGE, RELAY_ADD_MEMBER]}],
       onBackwardExhausted: () => {
         loadingBackward = false
       },
@@ -305,7 +310,7 @@
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>
     </p>
   {/if}
-  {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+  {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
     {#if type === "new-messages"}
       <div
         {id}
@@ -317,6 +322,22 @@
       </div>
     {: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}
     {:else}
       {@const event = value as TrustedEvent}
       {#if event.kind === RELAY_ADD_MEMBER}