Update changelog, bump version

remove dead virtualization code
Use welshman kinds
2026-04-16 11:40:24 -07:00 · 2026-04-16 11:39:11 -07:00 · 2026-04-16 11:34:59 -07:00 · 2026-04-16 10:16:12 -07:00 · 2026-04-16 10:03:01 -07:00 · 2026-04-16 10:03:01 -07:00
157 changed files with 4549 additions and 2456 deletions
@@ -19,5 +19,6 @@ VITE_DEFAULT_SEARCH_RELAYS=relay.ditto.pub,antiprimal.net,relay.vertexlab.io
 VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com,relay.keychat.io,relay.ditto.pub
 VITE_SIGNER_RELAYS=relay.nsec.app,ephemeral.snowflare.cc,bucket.coracle.social
 VITE_VAPID_PUBLIC_KEY=BIt2D4BdgdbCowD_0d3Np6GbrIGHxd7aIEUeZNe3hQuRlHz02OhzvDaai0XSFoJYVzSzdMjdyW-QhvW9_yq8j4Y
+VITE_THUMBNAIL_URL=https://vthumbs.coracle.social
 VITE_GLITCHTIP_API_KEY=
 GLITCHTIP_AUTH_TOKEN=
@@ -1,4 +1,5 @@
 src/assets
+.claude
 target
 build
 .idea
@@ -13,4 +14,4 @@ ios/App/Pods/
 android/capacitor-cordova-android-plugins
 android/app/src/androidTest
 android/app/src/test
-
+node_modules
@@ -28,6 +28,7 @@ node_modules/
 .pnpm-store/
 build/
 .svelte-kit/
+.next/

 # Rust/Tauri
 *target/
@@ -69,7 +70,9 @@ GoogleService-Info.plist
 .roo
 .idea/
 .vscode/
+.claude/

 # OS generated
 .DS_Store
 Thumbs.db
+package-lock.json
@@ -1,5 +1,32 @@
 # Changelog

+# 1.7.3
+
+* Add native share support for space invites
+* Stop sending duplicate requests per room
+* Add more robust thumbnail url generation
+* Make space reordering discoverable with smoother drag animation
+* Improve relay member list
+* Add room mentions and clickable room/relay refs
+* Support native clipboard image paste on mobile
+* publish kind 9 quote after room content creation for cross-client interoperability
+* Improve feed pagination logic and performance
+* Support Aegis URL scheme for NIP-46 login
+* Various UI and bug fixes
+* Raise message size limit in chat
+* Fix realtime updates for room members and admins
+* Add video to calls
+* Remove follow graph building
+* Add start chat FAB
+* Add drafts
+* Redesign toast notifications
+* Remove room/space leave indications
+* Hide report badge for non-admin users
+* Add polls
+* Add search to recent activity page
+* Fix notification badge on mobile nav
+* Change audio devices in call
+
 # 1.7.2

 * Fix race condition in nip 46
@@ -8,8 +8,8 @@ android {
        applicationId "social.flotilla"
        minSdk rootProject.ext.minSdkVersion
        targetSdk rootProject.ext.targetSdkVersion
-        versionCode 44
-        versionName "1.7.2"
+        versionCode 45
+        versionName "1.7.3"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -12,10 +12,12 @@ dependencies {
    implementation project(':aparajita-capacitor-secure-storage')
    implementation project(':capacitor-community-safe-area')
    implementation project(':capacitor-app')
+    implementation project(':capacitor-clipboard')
    implementation project(':capacitor-filesystem')
    implementation project(':capacitor-keyboard')
    implementation project(':capacitor-preferences')
    implementation project(':capacitor-push-notifications')
+    implementation project(':capacitor-share')
    implementation project(':capawesome-capacitor-android-dark-mode-support')
    implementation project(':capawesome-capacitor-badge')
    implementation project(':nostr-signer-capacitor-plugin')
@@ -44,4 +44,7 @@
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+    <uses-permission android:name="android.permission.CAMERA" />
+
+    <uses-feature android:name="android.hardware.camera.any" android:required="false" />
 </manifest>
@@ -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(
@@ -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 {
@@ -11,6 +11,9 @@ project(':capacitor-community-safe-area').projectDir = new File('../node_modules
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/.pnpm/@capacitor+app@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/app/android')

+include ':capacitor-clipboard'
+project(':capacitor-clipboard').projectDir = new File('../node_modules/.pnpm/@capacitor+clipboard@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/clipboard/android')
+
 include ':capacitor-filesystem'
 project(':capacitor-filesystem').projectDir = new File('../node_modules/.pnpm/@capacitor+filesystem@8.1.0_@capacitor+core@8.0.1/node_modules/@capacitor/filesystem/android')

@@ -23,6 +26,9 @@ project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@
 include ':capacitor-push-notifications'
 project(':capacitor-push-notifications').projectDir = new File('../node_modules/.pnpm/@capacitor+push-notifications@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/push-notifications/android')

+include ':capacitor-share'
+project(':capacitor-share').projectDir = new File('../node_modules/.pnpm/@capacitor+share@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/share/android')
+
 include ':capawesome-capacitor-android-dark-mode-support'
 project(':capawesome-capacitor-android-dark-mode-support').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-android-dark-mode-support@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-android-dark-mode-support/android')

@@ -358,14 +358,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 35;
+				CURRENT_PROJECT_VERSION = 36;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.3;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -385,14 +385,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 35;
+				CURRENT_PROJECT_VERSION = 36;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.3;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
@@ -24,8 +24,10 @@
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSCameraUsageDescription</key>
+	<string>Flotilla uses the camera when you enable it in a voice room.</string>
 	<key>NSMicrophoneUsageDescription</key>
-	<string>Flotilla uses the microphone for voice chat in rooms.</string>
+	<string>Flotilla uses the microphone when you enable it in a voice room.</string>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>remote-notification</string>
@@ -14,10 +14,12 @@ def capacitor_pods
  pod 'AparajitaCapacitorSecureStorage', :path => '../../node_modules/.pnpm/@aparajita+capacitor-secure-storage@8.0.0/node_modules/@aparajita/capacitor-secure-storage'
  pod 'CapacitorCommunitySafeArea', :path => '../../node_modules/.pnpm/@capacitor-community+safe-area@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor-community/safe-area'
  pod 'CapacitorApp', :path => '../../node_modules/.pnpm/@capacitor+app@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/app'
+  pod 'CapacitorClipboard', :path => '../../node_modules/.pnpm/@capacitor+clipboard@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/clipboard'
  pod 'CapacitorFilesystem', :path => '../../node_modules/.pnpm/@capacitor+filesystem@8.1.0_@capacitor+core@8.0.1/node_modules/@capacitor/filesystem'
  pod 'CapacitorKeyboard', :path => '../../node_modules/.pnpm/@capacitor+keyboard@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/keyboard'
  pod 'CapacitorPreferences', :path => '../../node_modules/.pnpm/@capacitor+preferences@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/preferences'
  pod 'CapacitorPushNotifications', :path => '../../node_modules/.pnpm/@capacitor+push-notifications@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/push-notifications'
+  pod 'CapacitorShare', :path => '../../node_modules/.pnpm/@capacitor+share@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/share'
  pod 'CapawesomeCapacitorBadge', :path => '../../node_modules/.pnpm/@capawesome+capacitor-badge@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-badge'
  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_2704ecccfd05fcfb1ad8852744422b7c/node_modules/nostr-signer-capacitor-plugin'
 end
@@ -1,6 +1,6 @@
 {
  "name": "flotilla",
-  "version": "1.7.2",
+  "version": "1.7.3",
  "private": true,
  "scripts": {
    "dev": "vite dev",
@@ -22,6 +22,7 @@
    "@eslint/js": "^9.39.2",
    "@sveltejs/kit": "^2.50.1",
    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@tailwindcss/postcss": "^4.2.2",
    "@tauri-apps/cli": "^2.9.6",
    "@types/eslint": "^9.6.1",
    "autoprefixer": "^10.4.23",
@@ -35,7 +36,7 @@
    "prettier-plugin-svelte": "^3.4.1",
    "svelte": "^5.48.0",
    "svelte-check": "^4.3.5",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.2",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.53.1",
    "vite": "^5.4.21"
@@ -47,37 +48,40 @@
    "@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",
    "@getalby/sdk": "^5.1.2",
    "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.2.2",
+    "@pomade/core": "^0.2.3",
    "@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",
    "@vite-pwa/sveltekit": "^0.6.8",
-    "@welshman/app": "^0.8.12",
-    "@welshman/content": "^0.8.12",
-    "@welshman/editor": "^0.8.12",
-    "@welshman/feeds": "^0.8.12",
-    "@welshman/lib": "^0.8.12",
-    "@welshman/net": "^0.8.12",
-    "@welshman/router": "^0.8.12",
-    "@welshman/signer": "^0.8.12",
-    "@welshman/store": "^0.8.12",
-    "@welshman/util": "^0.8.12",
+    "@welshman/app": "^0.8.13",
+    "@welshman/content": "^0.8.13",
+    "@welshman/editor": "^0.8.13",
+    "@welshman/feeds": "^0.8.13",
+    "@welshman/lib": "^0.8.13",
+    "@welshman/net": "^0.8.13",
+    "@welshman/router": "^0.8.13",
+    "@welshman/signer": "^0.8.13",
+    "@welshman/store": "^0.8.13",
+    "@welshman/util": "^0.8.13",
    "compressorjs-next": "^1.1.2",
-    "daisyui": "^4.12.24",
+    "daisyui": "^5.5.19",
    "date-picker-svelte": "^2.17.0",
    "dotenv": "^16.6.1",
    "emoji-picker-element": "^1.28.1",
@@ -87,7 +91,7 @@
    "livekit-client": "^2.17.2",
    "nostr-signer-capacitor-plugin": "github:coracle-social/nostr-signer-capacitor-plugin#main",
    "nostr-tools": "^2.19.4",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.2",
    "qr-scanner": "^1.4.2",
    "qrcode": "^1.5.4",
    "throttle-debounce": "^5.0.2",
@@ -104,5 +108,6 @@
    "overrides": {
      "sharp": "0.35.0-rc.0"
    }
-  }
+  },
+  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
 }
@@ -1,6 +1,5 @@
 export default {
  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
  },
 }
@@ -1,45 +1,25 @@
-@import "@welshman/editor/index.css";
+@import "tailwindcss";

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@config "../tailwind.config.js";

-/* Fonts */
-
-@font-face {
-  font-family: "Satoshis";
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local(""),
-    url("/fonts/Satoshi Symbol.ttf") format("truetype");
+@utility pt-sai {
+  padding-top: var(--sait);
 }

-@font-face {
-  font-family: "Lato";
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local(""),
-    url("/fonts/Lato-Regular.ttf") format("truetype");
+@utility pr-sai {
+  padding-right: var(--sair);
 }

-@font-face {
-  font-family: "Lato";
-  font-style: bold;
-  font-weight: 600;
-  src:
-    local(""),
-    url("/fonts/Lato-Bold.ttf") format("truetype");
+@utility pb-sai {
+  padding-bottom: var(--saib);
 }

-@font-face {
-  font-family: "Lato";
-  font-style: italic;
-  font-weight: 400;
-  src:
-    local(""),
-    url("/fonts/Italic.ttf") format("truetype");
+@utility pl-sai {
+  padding-left: var(--sail);
+}
+
+@utility px-sai {
+  @apply pl-sai pr-sai;
 }

 /* root */
@@ -50,101 +30,226 @@
  --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
  --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
  --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
-  --video-call-panel-bg: #181e24;
 }

-[data-theme] {
-  @apply bg-base-300;
-  --base-100: oklch(var(--b1));
-  --base-200: oklch(var(--b2));
-  --base-300: oklch(var(--b3));
-  --base-content: oklch(var(--bc));
-  --primary: oklch(var(--p));
-  --primary-content: oklch(var(--pc));
-  --secondary: oklch(var(--s));
-  --secondary-content: oklch(var(--sc));
-  --neutral: oklch(var(--n));
-  --neutral-content: oklch(var(--nc));
+@utility py-sai {
+  @apply pt-sai pb-sai;
 }

-.mobile [data-tip]::before {
-  display: none !important;
+@utility p-sai {
+  @apply py-sai px-sai;
 }

-/* safe area insets */
+@utility mt-sai {
+  margin-top: var(--sait);
+}

-@layer components {
-  .pt-sai {
-    padding-top: var(--sait);
+@utility mr-sai {
+  margin-right: var(--sair);
+}
+
+@utility mb-sai {
+  margin-bottom: var(--saib);
+}
+
+@utility ml-sai {
+  margin-left: var(--sail);
+}
+
+@utility mx-sai {
+  @apply ml-sai mr-sai;
+}
+
+@utility my-sai {
+  @apply mt-sai mb-sai;
+}
+
+@utility m-sai {
+  @apply my-sai mx-sai;
+}
+
+@utility top-sai {
+  top: var(--sait);
+}
+
+@utility right-sai {
+  right: var(--sair);
+}
+
+@utility bottom-sai {
+  bottom: var(--saib);
+}
+
+@utility left-sai {
+  left: var(--sail);
+}
+
+@utility card2 {
+  @apply rounded-box text-base-content p-4 sm:p-6;
+}
+
+@utility column {
+  @apply flex flex-col;
+}
+
+@utility center {
+  @apply flex items-center justify-center;
+}
+
+@utility row-2 {
+  @apply flex items-center gap-2;
+}
+
+@utility row-3 {
+  @apply flex items-center gap-3;
+}
+
+@utility row-4 {
+  @apply flex items-center gap-4;
+}
+
+@utility col-2 {
+  @apply flex flex-col gap-2;
+}
+
+@utility col-3 {
+  @apply flex flex-col gap-3;
+}
+
+@utility col-4 {
+  @apply flex flex-col gap-4;
+}
+
+@utility col-8 {
+  @apply flex flex-col gap-8;
+}
+
+@utility ellipsize {
+  @apply overflow-hidden text-ellipsis;
+}
+
+@utility content-padding-x {
+  @apply px-4 sm:px-8 md:px-12;
+}
+
+@utility content-padding-t {
+  @apply pt-4 sm:pt-8 md:pt-12;
+}
+
+@utility content-padding-b {
+  @apply pb-4 sm:pb-8 md:pb-12;
+}
+
+@utility content-padding-y {
+  @apply pt-4 pb-4 sm:pt-8 sm:pb-8 md:pt-12 md:pb-12;
+}
+
+@utility content-sizing {
+  @apply m-auto w-full max-w-3xl;
+}
+
+@utility content {
+  @apply m-auto w-full max-w-3xl px-4 pt-4 pb-4 sm:px-8 sm:pt-8 sm:pb-8 md:px-12 md:pt-12 md:pb-12;
+}
+
+@utility heading {
+  @apply text-center text-2xl;
+}
+
+@utility subheading {
+  @apply text-center text-xl;
+}
+
+@utility superheading {
+  @apply text-center text-4xl;
+}
+
+@utility link {
+  @apply text-primary cursor-pointer underline;
+}
+
+/* content visibility */
+
+@utility cv {
+  content-visibility: auto;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer utilities {
+  /* Fonts */
+
+  @font-face {
+    font-family: "Satoshis";
+    font-style: normal;
+    font-weight: 400;
+    src:
+      local(""),
+      url("/fonts/Satoshi Symbol.ttf") format("truetype");
  }

-  .pr-sai {
-    padding-right: var(--sair);
+  @font-face {
+    font-family: "Lato";
+    font-style: normal;
+    font-weight: 400;
+    src:
+      local(""),
+      url("/fonts/Lato-Regular.ttf") format("truetype");
  }

-  .pb-sai {
-    padding-bottom: var(--saib);
+  @font-face {
+    font-family: "Lato";
+    font-style: bold;
+    font-weight: 600;
+    src:
+      local(""),
+      url("/fonts/Lato-Bold.ttf") format("truetype");
  }

-  .pl-sai {
-    padding-left: var(--sail);
+  @font-face {
+    font-family: "Lato";
+    font-style: italic;
+    font-weight: 400;
+    src:
+      local(""),
+      url("/fonts/Italic.ttf") format("truetype");
  }

-  .px-sai {
-    @apply pl-sai pr-sai;
+  /* root */
+
+  :root {
+    font-family: Lato;
+    --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
+    --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
+    --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
+    --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
  }

-  .py-sai {
-    @apply pt-sai pb-sai;
+  [data-theme] {
+    @apply bg-base-300;
  }

-  .p-sai {
-    @apply py-sai px-sai;
+  .mobile [data-tip]::before {
+    display: none !important;
  }

-  .mt-sai {
-    margin-top: var(--sait);
-  }
-
-  .mr-sai {
-    margin-right: var(--sair);
-  }
-
-  .mb-sai {
-    margin-bottom: var(--saib);
-  }
-
-  .ml-sai {
-    margin-left: var(--sail);
-  }
-
-  .mx-sai {
-    @apply ml-sai mr-sai;
-  }
-
-  .my-sai {
-    @apply mt-sai mb-sai;
-  }
-
-  .m-sai {
-    @apply my-sai mx-sai;
-  }
-
-  .top-sai {
-    top: var(--sait);
-  }
-
-  .right-sai {
-    right: var(--sair);
-  }
-
-  .bottom-sai {
-    bottom: var(--saib);
-  }
-
-  .left-sai {
-    left: var(--sail);
-  }
+  /* safe area insets */
 }

 /* utilities */
@@ -166,110 +271,18 @@
  @apply bg-base-300 text-base-content transition-colors;
 }

-.card2 {
-  @apply rounded-box p-4 text-base-content sm:p-6;
-}
-
 .card2.card2-sm {
-  @apply p-2 text-base-content sm:p-4;
-}
-
-.column {
-  @apply flex flex-col;
-}
-
-.center {
-  @apply flex items-center justify-center;
-}
-
-.row-2 {
-  @apply flex items-center gap-2;
-}
-
-.row-3 {
-  @apply flex items-center gap-3;
-}
-
-.row-4 {
-  @apply flex items-center gap-4;
-}
-
-.col-2 {
-  @apply flex flex-col gap-2;
-}
-
-.col-3 {
-  @apply flex flex-col gap-3;
-}
-
-.col-4 {
-  @apply flex flex-col gap-4;
-}
-
-.col-8 {
-  @apply flex flex-col gap-8;
-}
-
-.badge {
-  @apply justify-start overflow-hidden text-ellipsis whitespace-nowrap;
-}
-
-.ellipsize {
-  @apply overflow-hidden text-ellipsis;
+  @apply text-base-content p-2 sm:p-4;
 }

 [data-tip]::before {
-  @apply ellipsize;
-}
-
-.content-padding-x {
-  @apply px-4 sm:px-8 md:px-12;
-}
-
-.content-padding-t {
-  @apply pt-4 sm:pt-8 md:pt-12;
-}
-
-.content-padding-b {
-  @apply pb-4 sm:pb-8 md:pb-12;
-}
-
-.content-padding-y {
-  @apply content-padding-t content-padding-b;
-}
-
-.content-sizing {
-  @apply m-auto w-full max-w-3xl;
-}
-
-.content {
-  @apply content-sizing content-padding-x content-padding-y;
-}
-
-.heading {
-  @apply text-center text-2xl;
-}
-
-.subheading {
-  @apply text-center text-xl;
-}
-
-.superheading {
-  @apply text-center text-4xl;
-}
-
-.link {
-  @apply cursor-pointer text-primary underline;
+  @apply overflow-hidden text-ellipsis;
 }

 .input input::placeholder {
  opacity: 0.5;
 }

-.shadow-top-xl {
-  @apply shadow-[0_20px_25px_-5px_rgb(0,0,0,0.1)_0_8px_10px_-6px_rgb(0,0,0,0.1)];
-}
-
 /* tiptap */

 .input-editor,
@@ -279,21 +292,21 @@
 }

 .tiptap {
-  --tiptap-object-bg: var(--neutral);
-  --tiptap-object-fg: var(--neutral-content);
-  --tiptap-active-bg: var(--primary);
-  --tiptap-active-fg: var(--primary-content);
+  --tiptap-object-bg: var(--color-neutral);
+  --tiptap-object-fg: var(--color-neutral-content);
+  --tiptap-active-bg: var(--color-primary);
+  --tiptap-active-fg: var(--color-primary-content);
 }

 .tiptap-suggestions {
-  --tiptap-object-bg: var(--base-100);
-  --tiptap-object-fg: var(--base-content);
-  --tiptap-active-bg: var(--base-300);
-  --tiptap-active-fg: var(--base-content);
+  --tiptap-object-bg: var(--color-base-100);
+  --tiptap-object-fg: var(--color-base-content);
+  --tiptap-active-bg: var(--color-base-300);
+  --tiptap-active-fg: var(--color-base-content);
 }

 .tiptap-suggestions__item {
-  @apply border-l-2 border-solid border-base-100;
+  @apply border-base-100 border-l-2 border-solid;
 }

 .tiptap-suggestions__selected {
@@ -313,13 +326,13 @@
 }

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

 .input-editor .tiptap {
-  --tiptap-object-bg: var(--base-200);
-  @apply input input-bordered h-auto p-[.65rem];
+  --tiptap-object-bg: var(--color-base-200);
+  @apply input h-auto p-[.65rem];
 }

 /* link-content, based on tiptap */
@@ -331,8 +344,8 @@
  white-space: nowrap;
  border-radius: 3px;
  padding: 0 0.25rem;
-  background-color: var(--base-100);
-  color: var(--base-content);
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
 }

 /* content rendered by welshman/content */
@@ -348,23 +361,31 @@
 /* date input */

 .picker {
-  --date-picker-foreground: var(--base-content);
-  --date-picker-background: var(--base-300);
-  --date-picker-highlight-border: var(--primary);
-  --date-picker-selected-color: var(--primary-content);
-  --date-picker-selected-background: var(--primary);
+  --date-picker-foreground: var(--color-base-content);
+  --date-picker-background: var(--color-base-300);
+  --date-picker-highlight-border: var(--color-primary);
+  --date-picker-selected-color: var(--color-primary-content);
+  --date-picker-selected-background: var(--color-primary);
 }

 .date-time-field {
-  @apply input input-bordered rounded-lg px-0;
+  @apply input rounded-lg px-0;
 }

 .date-time-field input {
-  @apply !h-full !w-full !rounded-lg !border-none !bg-inherit !px-4 !text-inherit;
+  @apply h-full! w-full! rounded-lg! border-none! bg-inherit! px-4! text-inherit!;
 }

 /* tippy popover */

+.tippy-target {
+  @apply z-tooltip pointer-events-none fixed inset-0;
+}
+
+.tippy-target > * {
+  pointer-events: auto;
+}
+
 .tippy-box {
  @apply rounded-box shadow-xl;
 }
@@ -372,15 +393,15 @@
 /* emoji picker */

 emoji-picker {
-  --background: var(--base-100);
-  --border-color: var(--base-100);
+  --background: var(--color-base-100);
+  --border-color: var(--color-base-100);
  --border-radius: var(--rounded-box);
-  --button-active-background: var(--base-content);
-  --button-hover-background: var(--base-content);
-  --indicator-color: var(--base-content);
-  --input-border-color: var(--base-100);
-  --input-font-color: var(--base-content);
-  --outline-color: var(--base-100);
+  --button-active-background: var(--color-base-content);
+  --button-hover-background: var(--color-base-content);
+  --indicator-color: var(--color-base-content);
+  --input-border-color: var(--color-base-100);
+  --input-font-color: var(--color-base-content);
+  --outline-color: var(--color-base-100);
 }

 /* progress */
@@ -391,57 +412,12 @@ progress[value]::-webkit-progress-value {

 /* content width for fixed elements */

-.cw {
-  @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
-}
-
-.cw-video-call-content {
-  @apply w-full md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-/* Voice: desktop split — plain CSS so / in calc is not parsed as Tailwind slash syntax */
-.cw-split-video {
-  width: 100%;
-}
-
-.cw-split-chat {
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .cw-split-video {
-    left: 18.5rem;
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-
-  .cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
-.cw-full {
-  @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
-}
-
-.cb {
-  @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
-}
-
-.ct {
-  @apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)];
+.left-content {
+  @apply md:left-[calc(18.5rem+var(--sail))];
 }

 /* Keyboard open state adjustments */

-body.keyboard-open .cb {
-  @apply bottom-sai;
-}
-
 body.keyboard-open .hide-on-keyboard {
  display: none;
 }
@@ -449,36 +425,13 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */

 .chat__compose {
-  @apply cb cw fixed z-compose;
+  @apply z-compose relative mb-14 shrink-0 md:mb-0;
 }

-.chat__compose-zone {
-  @apply cb cw fixed z-compose;
-}
-
-.chat__compose-zone .chat__compose-inner {
+.chat__compose .chat__compose-inner {
  @apply min-w-0;
 }

-.chat__compose-zone.cw-video-call-content {
-  @apply md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-@media (min-width: 768px) {
-  .chat__compose-zone.cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
 .chat__scroll-down {
-  @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
-}
-
-/* content visibility */
-
-.cv {
-  content-visibility: auto;
+  @apply pb-sai z-feature fixed right-4 bottom-28 md:bottom-16;
 }
@@ -0,0 +1,57 @@
+import {Room as LiveKitRoom} from "livekit-client"
+import {derived, writable} from "svelte/store"
+import {type Room} from "@app/core/state"
+
+export type VoiceSession = {
+  url: string
+  h: string
+  room: LiveKitRoom
+  muted: boolean
+  cameraOn: boolean
+  screenShareOn: boolean
+}
+
+export type Pubkey = string
+
+export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
+
+export enum VoiceState {
+  Joining = "joining",
+  Connected = "connected",
+  Disconnected = "disconnected",
+}
+
+export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
+
+export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
+
+export const currentVoiceRoom = writable<Room | undefined>(undefined)
+
+export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
+
+export const pubkeyFromLiveKitIdentity = (identity: string): string | undefined =>
+  /^[a-f0-9]{64}$/.test(identity.slice(0, 64)) ? identity.slice(0, 64) : undefined
+
+export const participantFromLiveKitIdentity = (identity: string): VoiceParticipant => {
+  const pk = pubkeyFromLiveKitIdentity(identity)
+  return pk ? {pubkey: pk, identity} : {identity}
+}
+
+export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
+
+export const speakingParticipants = writable<VoiceParticipant[]>([])
+
+export const isParticipantSpeaking = derived(
+  speakingParticipants,
+  $participants => (p: VoiceParticipant) =>
+    $participants.some(sp => participantKey(sp) === participantKey(p)),
+)
+
+export const isLocalSpeaking = derived(
+  [currentVoiceSession, speakingParticipants],
+  ([$session, $speaking]) => {
+    if (!$session?.room) return false
+    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
+    return $speaking.some(sp => participantKey(sp) === participantKey(local))
+  },
+)
@@ -0,0 +1,99 @@
+import {Track} from "livekit-client"
+import {MediaQuery} from "svelte/reactivity"
+import {derived, get, writable} from "svelte/store"
+import {currentVoiceSession, VoiceState, type VoiceSession, voiceState} from "@app/call/stores"
+import {pushToast} from "@app/util/toast"
+
+export enum VideoCallLayout {
+  Chat = "chat",
+  Video = "video",
+  Split = "split",
+}
+
+export const isDesktopLayout = new MediaQuery("min-width: 768px", false)
+
+export enum ViewportSize {
+  Desktop = "desktop",
+  Mobile = "mobile",
+}
+
+export const videoCallViewportSync = {
+  previousLayout: undefined as ViewportSize | undefined,
+}
+
+export const videoCallLayout = writable<VideoCallLayout>(VideoCallLayout.Split)
+
+export const resetVideoCallLayout = () => {
+  videoCallViewportSync.previousLayout = undefined
+  videoCallLayout.set(VideoCallLayout.Chat)
+}
+
+export const videoPrimaryTileKey = writable<string | undefined>(undefined)
+
+export const toggleVideoPrimaryTile = (key: string) => {
+  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
+}
+
+const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
+
+const countLiveVisualFeeds = (session: VoiceSession): number => {
+  const room = session.room
+  let n = 0
+  const lp = room.localParticipant
+  if (session.cameraOn) {
+    const pub = lp.getTrackPublication(Track.Source.Camera)
+    if (pub?.track) n += 1
+  }
+  if (session.screenShareOn) {
+    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
+    if (pub?.track) n += 1
+  }
+  for (const rp of room.remoteParticipants.values()) {
+    for (const source of VISUAL_SOURCES) {
+      const pub = rp.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) n += 1
+    }
+  }
+  return n
+}
+
+export const triggerVideoFeedCount = () => {
+  currentVoiceSession.update(s => (s ? {...s} : s))
+}
+
+export const videoTileCount = derived([currentVoiceSession, voiceState], ([$session, $state]) => {
+  if ($state !== VoiceState.Connected || !$session) return 0
+  return countLiveVisualFeeds($session)
+})
+
+export const toggleCamera = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const cameraOn = !session.cameraOn
+  try {
+    await session.room.localParticipant.setCameraEnabled(cameraOn)
+    currentVoiceSession.set({...session, cameraOn})
+  } catch {
+    pushToast({
+      theme: "error",
+      message: cameraOn ? "Could not access camera" : "Could not turn off camera",
+    })
+  }
+}
+
+export const toggleScreenShare = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const screenShareOn = !session.screenShareOn
+  try {
+    await session.room.localParticipant.setScreenShareEnabled(screenShareOn)
+    currentVoiceSession.set({...session, screenShareOn})
+  } catch {
+    pushToast({
+      theme: "error",
+      message: screenShareOn ? "Could not start screen sharing" : "Could not stop screen sharing",
+    })
+  }
+}
@@ -12,14 +12,27 @@ import {
  supportsAudioOutputSelection,
  type AudioCaptureOptions,
 } from "livekit-client"
-import {derived, get, writable} from "svelte/store"
+import {derived, get} from "svelte/store"
 import {map, removeUndefined, uniqBy} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
 import {signer} from "@welshman/app"
 import {getLivekitEndpoint} from "$lib/livekit"
 import {AbortError, whenAborted, whenTimeout} from "$lib/util"
-import {deriveLatestEventForUrl, deriveRoom, makeRoomId, type Room} from "@app/core/state"
+import {
+  currentVoiceRoom,
+  currentVoiceSession,
+  participantFromLiveKitIdentity,
+  participantKey,
+  participantPubkeyMap,
+  pubkeyFromLiveKitIdentity,
+  speakingParticipants,
+  VoiceState,
+  type VoiceParticipant,
+  voiceState,
+} from "@app/call/stores"
+import {resetVideoCallLayout, triggerVideoFeedCount, videoPrimaryTileKey} from "@app/call/video"
+import {deriveLatestEventForUrl, deriveRoom, makeRoomId} from "@app/core/state"
 import {pushToast} from "@app/util/toast"

 export const LIVEKIT_PARTICIPANTS = 39004
@@ -28,27 +41,6 @@ export {checkRelayHasLivekit} from "$lib/livekit"

 export {supportsAudioOutputSelection}

-export type VoiceSession = {
-  url: string
-  h: string
-  room: LiveKitRoom
-  muted: boolean
-  cameraOn: boolean
-  screenShareOn: boolean
-}
-
-export type Pubkey = string
-
-export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
-
-export enum VoiceState {
-  Joining = "joining",
-  Connected = "connected",
-  Disconnected = "disconnected",
-}
-
-export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
-
 const LIVEKIT_DEFAULT_DEVICE_ID = "default"

 export enum DeviceKind {
@@ -83,35 +75,6 @@ export const switchVoiceActiveDevice = async (
  }
 }

-export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
-
-export const currentVoiceRoom = writable<Room | undefined>(undefined)
-
-/** Mobile room UI: full-screen chat vs video (see VoiceWidget layout toggle). */
-export const voiceMobileRoomPanel = writable<"chat" | "video">("chat")
-
-/** Desktop room UI: messages only, video only, or split (see VoiceWidget layout toggle). */
-export const voiceDesktopRoomPanel = writable<"chat" | "video" | "split">("split")
-
-const resetVoiceRoomPanels = () => {
-  voiceMobileRoomPanel.set("chat")
-  voiceDesktopRoomPanel.set("chat")
-}
-
-export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
-
-/** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
-export const videoCallLayoutRevision = writable(0)
-
-/** Spotlight tile id — must match VideoCallContent `tileKey` (identity + source, not trackSid). */
-export const videoPrimaryTileKey = writable<string | undefined>(undefined)
-
-export const toggleVideoPrimaryTile = (key: string) => {
-  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
-}
-
-const bumpVideoCallLayoutRevision = () => videoCallLayoutRevision.update(n => n + 1)
-
 const addParticipant = (identity: string) => {
  participantPubkeyMap.update(m => {
    const next = new Map(m)
@@ -128,34 +91,6 @@ const deleteParticipant = (identity: string) => {
  })
 }

-export const pubkeyFromLiveKitIdentity = (identity: string): string | undefined =>
-  /^[a-f0-9]{64}$/.test(identity.slice(0, 64)) ? identity.slice(0, 64) : undefined
-
-export const participantFromLiveKitIdentity = (identity: string): VoiceParticipant => {
-  const pk = pubkeyFromLiveKitIdentity(identity)
-  return pk ? {pubkey: pk, identity} : {identity}
-}
-
-export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
-
-export const speakingParticipants = writable<VoiceParticipant[]>([])
-
-export const isParticipantSpeaking = derived(
-  speakingParticipants,
-  $participants => (p: VoiceParticipant) =>
-    $participants.some(sp => participantKey(sp) === participantKey(p)),
-)
-
-/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
-export const isLocalSpeaking = derived(
-  [currentVoiceSession, speakingParticipants],
-  ([$session, $speaking]) => {
-    if (!$session?.room) return false
-    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
-    return $speaking.some(sp => participantKey(sp) === participantKey(local))
-  },
-)
-
 const fetchLivekitToken = async (
  url: string,
  groupId: string,
@@ -237,10 +172,9 @@ const setUpMicrophone = async (
 }

 const onRoomDisconnected = (reason?: DisconnectReason) => {
-  videoCallLayoutRevision.set(0)
  videoPrimaryTileKey.set(undefined)
  currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
+  resetVideoCallLayout()
  if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
    voiceState.set(VoiceState.Disconnected)
    const message =
@@ -260,14 +194,14 @@ const onTrackSubscribed = (track: Track) => {
    document.body.appendChild(element)
    element.play().catch(() => {})
  } else if (track.kind === Track.Kind.Video) {
-    bumpVideoCallLayoutRevision()
+    triggerVideoFeedCount()
  }
 }

 const onTrackUnsubscribed = (track: Track) => {
  track.detach().forEach(el => el.remove())
  if (track.kind === Track.Kind.Video) {
-    bumpVideoCallLayoutRevision()
+    triggerVideoFeedCount()
  }
 }

@@ -298,7 +232,6 @@ const onLocalTrackUnpublished = (
  if (!session || participant.identity !== session.room.localParticipant.identity) return
  if (!session.screenShareOn) return
  currentVoiceSession.set({...session, screenShareOn: false})
-  bumpVideoCallLayoutRevision()
 }

 let joinAbortController: AbortController | undefined
@@ -344,7 +277,7 @@ export const joinVoiceRoom = async (
    try {
      await Promise.race([
        liveKitRoom.connect(server_url, participant_token, {maxRetries: 0}),
-        whenTimeout(5_000, {
+        whenTimeout(15_000, {
          message: "Connection timed out. Please check your network and try again.",
        }),
        whenAborted(signal),
@@ -392,7 +325,7 @@ export const leaveVoiceRoom = async () => {
    try {
      await session.room.localParticipant.setCameraEnabled(false)
    } catch {
-      /* pass */
+      pushToast({theme: "error", message: "Error turning off camera."})
    }
  }

@@ -400,15 +333,14 @@ export const leaveVoiceRoom = async () => {
    try {
      await session.room.localParticipant.setScreenShareEnabled(false)
    } catch {
-      /* pass */
+      pushToast({theme: "error", message: "Error turning off screen sharing."})
    }
  }

  voiceState.set(VoiceState.Disconnected)
-  videoCallLayoutRevision.set(0)
  videoPrimaryTileKey.set(undefined)
  currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
+  resetVideoCallLayout()
  session.room.disconnect()
  speakingParticipants.set([])
  participantPubkeyMap.set(new Map())
@@ -439,76 +371,3 @@ export const toggleMute = async () => {
    pushToast({theme: "error", message: "Could not access microphone"})
  }
 }
-
-const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
-
-const countLiveVisualFeeds = (session: VoiceSession): number => {
-  const room = session.room
-  let n = 0
-  const lp = room.localParticipant
-  if (session.cameraOn) {
-    const pub = lp.getTrackPublication(Track.Source.Camera)
-    if (pub?.track) n += 1
-  }
-  if (session.screenShareOn) {
-    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
-    if (pub?.track) n += 1
-  }
-  for (const rp of room.remoteParticipants.values()) {
-    for (const source of VISUAL_SOURCES) {
-      const pub = rp.getTrackPublication(source)
-      if (pub?.isSubscribed && pub.track) n += 1
-    }
-  }
-  return n
-}
-
-export const videoTileCount = derived(
-  [currentVoiceSession, voiceState, videoCallLayoutRevision],
-  ([$session, $state, _rev]) => {
-    if ($state !== VoiceState.Connected || !$session) return 0
-    return countLiveVisualFeeds($session)
-  },
-)
-
-export const toggleCamera = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const cameraOn = !session.cameraOn
-  if (!cameraOn) {
-    session.room.localParticipant.setCameraEnabled(false)
-    currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setCameraEnabled(true)
-    currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not access camera"})
-  }
-}
-
-export const toggleScreenShare = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const screenShareOn = !session.screenShareOn
-  if (!screenShareOn) {
-    session.room.localParticipant.setScreenShareEnabled(false)
-    currentVoiceSession.set({...session, screenShareOn})
-    bumpVideoCallLayoutRevision()
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setScreenShareEnabled(true)
-    currentVoiceSession.set({...session, screenShareOn})
-    bumpVideoCallLayoutRevision()
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not start screen sharing"})
-  }
-}
@@ -38,7 +38,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -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>
@@ -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"
@@ -20,24 +20,34 @@
  import EditorContent from "@app/editor/EditorContent.svelte"
  import {PROTECTED} from "@app/core/state"
  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
+    title: string
+    content: string | object
+    location: string
+    start?: number
+    end?: number
+  }

  type Props = {
    url: string
    h?: string
+    shareToChat?: boolean
    header: Snippet
-    initialValues?: {
-      d: string
-      title: string
-      content: string
-      location: string
-      start: number
-      end: number
-    }
+    initialValues?: Values
  }

-  const {url, h, header, initialValues}: Props = $props()
+  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
+
+  const draftKey = new DraftKey<Values>(`calendar:${url}:${h ?? ""}`)
+
+  if (!initialValues) {
+    initialValues = draftKey.get()
+  }

  const shouldProtect = canEnforceNip70(url)

@@ -48,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({
@@ -74,38 +84,68 @@
    const ed = await editor
    const content = ed.getText({blockSeparator: "\n"}).trim()
    const tags = [
-      ["d", initialValues?.d || randomId()],
+      ["d", d],
      ["title", title],
-      ["location", location || ""],
+      ["location", location],
      ["start", start.toString()],
      ["end", end.toString()],
      ...daysBetween(start, end).map(D => ["D", D.toString()]),
      ...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]})
-    history.back()
  }

-  const content = initialValues?.content || ""
-  const editor = makeEditor({url, submit, uploading, content})
+  let loading = $state(false)

-  let title = $state(initialValues?.title || "")
-  let location = $state(initialValues?.location || "")
+  const d = $state(initialValues?.d ?? randomId())
+  let title = $state(initialValues?.title ?? "")
+  let location = $state(initialValues?.location ?? "")
  let start: number | undefined = $state(initialValues?.start)
  let end: number | undefined = $state(initialValues?.end)
-  let endDirty = Boolean(initialValues?.end)
+  let endDirty = $state(Boolean(initialValues?.end))
+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
+  const editor = makeEditor({url, submit, uploading, onChange, content})
+
+  $effect(() => {
+    draftKey.set({d, title, location, start, end, content})
+  })

  $effect(() => {
    if (!endDirty && start) {
@@ -136,10 +176,14 @@
      {#snippet input()}
        <div
          class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
-          <div class="input-editor flex-grow overflow-hidden">
+          <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}
@@ -178,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>
@@ -19,7 +19,7 @@
  const end = $derived(parseInt(meta.end))
 </script>

-<div class="flex flex-grow flex-wrap justify-between gap-2">
+<div class="flex grow flex-wrap justify-between gap-2">
  <p class="text-xl">{meta.title || meta.name}</p>
  {#if !isNaN(start) && !isNaN(end)}
    {@const startDateDisplay = formatTimestampAsDate(start)}
@@ -23,7 +23,7 @@
  {#if meta.location}
    <span class="flex items-start gap-1">
      <Icon icon={MapPoint} class="mt-[2px]" size={4} />
-      <span class="break-words">{meta.location}</span>
+      <span class="wrap-break-word">{meta.location}</span>
    </span>
  {/if}
 </div>
@@ -55,6 +55,7 @@
  import ThunkToast from "@app/components/ThunkToast.svelte"
  import {userSettingsValues, deriveChat} from "@app/core/state"
  import {pushModal} from "@app/util/modal"
+  import {DraftKey} from "@app/util/drafts"
  import {makeDelete, prependParent} from "@app/core/commands"
  import {pushToast} from "@app/util/toast"

@@ -66,6 +67,7 @@
  const {pubkeys, info}: Props = $props()

  const chat = deriveChat(pubkeys)
+  const draftKey = new DraftKey<{content?: string | object}>(`dm:${$chat?.id}`)
  const others = remove($pubkey!, pubkeys)
  const missingRelayLists = $derived(others.filter(pk => !$messagingRelayListsByPubkey.has(pk)))

@@ -196,8 +198,6 @@
  let compose: ChatCompose | undefined = $state()
  let parent: TrustedEvent | undefined = $state()
  let eventToEdit: TrustedEvent | undefined = $state()
-  let chatCompose: HTMLElement | undefined = $state()
-  let dynamicPadding: HTMLElement | undefined = $state()

  const elements = $derived.by(() => {
    const elements = []
@@ -233,20 +233,6 @@
    for (const pubkey of others) {
      loadMessagingRelayList(pubkey)
    }
-
-    const observer = new ResizeObserver(() => {
-      if (dynamicPadding && chatCompose) {
-        dynamicPadding.style.minHeight = `${chatCompose.offsetHeight}px`
-      }
-    })
-
-    observer.observe(chatCompose!)
-    observer.observe(dynamicPadding!)
-
-    return () => {
-      observer.unobserve(chatCompose!)
-      observer.unobserve(dynamicPadding!)
-    }
  })

  setTimeout(() => {
@@ -293,8 +279,7 @@
  </div>
 </PageBar>

-<PageContent class="flex flex-col-reverse gap-2 pt-4">
-  <div bind:this={dynamicPadding}></div>
+<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">
@@ -335,9 +320,10 @@
    </Spinner>
    {@render info?.()}
  </p>
+  <div class="h-screen"></div>
 </PageContent>

-<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+<div class="chat__compose bg-base-200">
  <div>
    {#if parent}
      <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
@@ -352,7 +338,8 @@
      {onSubmit}
      {onEscape}
      {onEditPrevious}
-      content={eventToEdit?.content}
+      initialValues={eventToEdit}
+      draftKey={eventToEdit ? undefined : draftKey}
      disabled={Boolean(missingRelayLists.length)} />
  {/key}
 </div>
@@ -10,23 +10,40 @@
  import Button from "@lib/components/Button.svelte"
  import EditorContent from "@app/editor/EditorContent.svelte"
  import {makeEditor} from "@app/editor"
+  import {type DraftKey} from "@app/util/drafts"
+
+  type Values = {
+    content?: string | object
+  }

  type Props = {
-    content?: string
    disabled?: boolean
+    draftKey?: DraftKey<Values>
    onEscape?: () => void
    onEditPrevious?: () => void
    onSubmit: (event: EventContent) => void
+    initialValues?: Values
  }

-  const {content, disabled = false, onEscape, onEditPrevious, onSubmit}: Props = $props()
+  let {
+    initialValues,
+    disabled = false,
+    draftKey,
+    onEscape,
+    onEditPrevious,
+    onSubmit,
+  }: Props = $props()
+
+  if (!initialValues) {
+    initialValues = draftKey?.get()
+  }

  const autofocus = !isMobile && !disabled

  const uploading = writable(false)

  const editorClass = $derived(
-    cx("chat-editor flex-grow overflow-hidden", {
+    cx("chat-editor grow overflow-hidden", {
      "pointer-events-none opacity-50": disabled,
    }),
  )
@@ -59,18 +76,29 @@

    onSubmit({content, tags})

+    draftKey?.clear()
    ed.chain().clearContent().run()
  }

+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
  const editor = makeEditor({
    content,
-    autofocus,
    submit,
    uploading,
+    onChange,
    aggressive: true,
    encryptFiles: true,
  })

+  $effect(() => {
+    draftKey?.set({content})
+  })
+
  onMount(async () => {
    const ed = await editor
    ed.view.dom.addEventListener("keydown", handleKeyDown)
@@ -95,7 +123,7 @@
    {/if}
  </Button>
  <div class={editorClass} aria-disabled={disabled}>
-    <EditorContent {editor} />
+    <EditorContent {autofocus} {editor} />
  </div>
  <Button
    data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
@@ -35,7 +35,7 @@

 <Button class="flex flex-col justify-start gap-1 w-full" onclick={openChat}>
  <div
-    class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {props.class}"
+    class="cursor-pointer border-t border-solid border-base-100 px-3 py-2 transition-colors hover:bg-base-100 {props.class}"
    class:bg-base-100={active}>
    <div class="flex flex-col justify-start gap-1">
      <div class="flex items-center justify-between gap-2">
@@ -1,6 +1,5 @@
 <script lang="ts">
  import {assoc} from "@welshman/lib"
-  import ChatSquare from "@assets/icons/chat-square.svg?dataurl"
  import Check from "@assets/icons/check.svg?dataurl"
  import Bell from "@assets/icons/bell.svg?dataurl"
  import BellOff from "@assets/icons/bell-off.svg?dataurl"
@@ -8,13 +7,9 @@
  import Button from "@lib/components/Button.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ChatStart from "@app/components/ChatStart.svelte"
  import {setChecked} from "@app/util/notifications"
-  import {pushModal} from "@app/util/modal"
  import {notificationSettings} from "@app/core/state"

-  const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
-
  const markAsRead = () => {
    setChecked("/chat/*")
    history.back()
@@ -28,10 +23,6 @@
 <Modal>
  <ModalBody>
    <div class="flex flex-col gap-2">
-      <Button class="btn btn-primary" onclick={startChat}>
-        <Icon size={5} icon={ChatSquare} />
-        Start chat
-      </Button>
      <Button class="btn btn-neutral" onclick={markAsRead}>
        <Icon size={5} icon={Check} />
        Mark all read
@@ -42,7 +42,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -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>
@@ -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"
@@ -20,25 +20,35 @@
  import {pushToast} from "@app/util/toast"
  import {PROTECTED} from "@app/core/state"
  import {makeEditor} from "@app/editor"
-  import {canEnforceNip70, uploadFile} from "@app/core/commands"
+  import {DraftKey} from "@app/util/drafts"
+  import {canEnforceNip70, publishRoomQuote, uploadFile} from "@app/core/commands"
+
+  type Values = {
+    d: string
+    title: string
+    content: string | object
+    price: number
+    currency: string
+    images: (string | File)[]
+    status: string
+    topics: string[]
+  }

  type Props = {
    url: string
    h?: string
+    shareToChat?: boolean
    header: Snippet
-    initialValues?: {
-      d?: string
-      title?: string
-      content?: string
-      price?: number
-      currency?: string
-      images?: string[]
-      status?: string
-      topics?: string[]
-    }
+    initialValues?: Values
  }

-  const {url, h, header, initialValues}: Props = $props()
+  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
+
+  const draftKey = new DraftKey<Values>(`classified:${url}:${h ?? ""}`)
+
+  if (!initialValues) {
+    initialValues = draftKey.get()
+  }

  const shouldProtect = canEnforceNip70(url)

@@ -66,7 +76,7 @@
      }

      const tags = [
-        ["d", initialValues?.d || randomId()],
+        ["d", d],
        ["title", title],
        ["summary", content],
        ["price", String(price), currency],
@@ -78,7 +88,9 @@
        tags.push(["t", topic])
      }

-      if (await shouldProtect) {
+      const protect = await shouldProtect
+
+      if (protect) {
        tags.push(PROTECTED)
      }

@@ -105,27 +117,47 @@
        }
      }

-      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
    }
  }

-  const content = initialValues?.content || ""
-  const editor = makeEditor({url, submit, content})
-
  let loading = $state(false)
-  let title = $state(initialValues?.title || "")
-  let status = $state(initialValues?.status || "active")
-  let price = $state(Number(initialValues?.price || 0))
-  let currency = $state(initialValues?.currency || "SAT")
-  let images = $state<(string | File)[]>(initialValues?.images || [])
-  let topics = $state(uniq(removeUndefined((initialValues?.topics || []).map(normalizeTopic))))
+  const d = $state(initialValues?.d ?? randomId())
+  let title = $state(initialValues?.title ?? "")
+  let status = $state(initialValues?.status ?? "active")
+  let price = $state(initialValues?.price ?? 0)
+  let currency = $state(initialValues?.currency ?? "SAT")
+  let images = $state(initialValues?.images ?? [])
+  let topics = $state(uniq(removeUndefined(initialValues?.topics?.map(normalizeTopic) ?? [])))
+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
+  const editor = makeEditor({url, submit, onChange, content})
+
+  $effect(() => {
+    draftKey.set({d, title, status, price, currency, images, topics, content})
+  })
 </script>

 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -153,7 +185,7 @@
          <p>Description*</p>
        {/snippet}
        {#snippet input()}
-          <div class="note-editor flex-grow overflow-hidden">
+          <div class="note-editor grow overflow-hidden">
            <EditorContent {editor} />
          </div>
        {/snippet}
@@ -28,7 +28,7 @@
 </script>

 <div class="flex flex-wrap items-center justify-between gap-2">
-  <div class="flex flex-grow flex-wrap justify-end gap-2">
+  <div class="flex grow flex-wrap justify-end gap-2">
    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
    <ThunkStatusOrDeleted {event} />
    {#if showActivity}
@@ -4,6 +4,7 @@
  import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic.svg?dataurl"
  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
  import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Revote from "@assets/icons/revote.svg?dataurl"
  import Button from "@lib/components/Button.svelte"
  import Icon from "@lib/components/Icon.svelte"
  import {pushModal} from "@app/util/modal"
@@ -11,6 +12,7 @@
  import ThreadCreate from "@app/components/ThreadCreate.svelte"
  import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
  import GoalCreate from "@app/components/GoalCreate.svelte"
+  import PollCreate from "@app/components/PollCreate.svelte"

  type Props = {
    url: string
@@ -20,13 +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, shareToChat: true})

  let ul: Element

@@ -60,4 +64,10 @@
      Create Thread
    </Button>
  </li>
+  <li>
+    <Button onclick={createPoll}>
+      <Icon size={4} icon={Revote} />
+      Ask a Question
+    </Button>
+  </li>
 </ul>
@@ -150,7 +150,7 @@
    </div>
  {:else}
    <div
-      class="overflow-hidden text-ellipsis break-words"
+      class="overflow-hidden text-ellipsis wrap-break-word"
      style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
      {#each shortContent as parsed, i}
        {#if isNewline(parsed) && !isBlock(i - 1)}
@@ -1,27 +1,44 @@
 <script lang="ts">
  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
  import {isRelayUrl, getTagValue} from "@welshman/util"
+  import {Capacitor} from "@capacitor/core"
  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, VIDEO_CONTENT_TYPES} from "@app/core/state"
-  import {makeSpacePath} from "@app/util/routes"
+  import {
+    dufflepud,
+    IMAGE_CONTENT_TYPES,
+    PLATFORM_URL,
+    VIDEO_CONTENT_TYPES,
+    THUMBNAIL_URL,
+    isRoomId,
+  } from "@app/core/state"

  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)}`
+    }
+
+    return undefined
+  }
+
  const loadPreview = async () => {
    const json = await postJson(dufflepud("link/preview"), {url})

@@ -39,41 +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} 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}
@@ -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}
@@ -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>
@@ -101,7 +101,7 @@
      </p>
    </div>
  {:else}
-    <div class="overflow-hidden text-ellipsis break-words">
+    <div class="overflow-hidden text-ellipsis wrap-break-word">
      {#each shortContent as parsed, i}
        {#if isNewline(parsed)}
          <ContentNewline value={parsed.value} />
@@ -45,11 +45,11 @@
    {#if $quote.kind === MESSAGE}
      <div
        class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
-        style="background-color: color-mix(in srgb, var(--primary) 10%, var(--base-300) 90%);">
+        style="background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-300) 90%);">
        <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}
@@ -101,7 +101,7 @@
    {/if}
    <div class="relative">
      <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
-      <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
+      <p class="absolute right-2 top-2 flex grow items-center justify-between">
        <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
          <Icon icon={Copy} /> Copy
        </Button>
@@ -109,6 +109,6 @@
    </div>
  </ModalBody>
  <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary grow" onclick={() => history.back()}>Got it</Button>
  </ModalFooter>
 </Modal>
@@ -10,13 +10,19 @@
  import {publishComment, canEnforceNip70} from "@app/core/commands"
  import {PROTECTED} from "@app/core/state"
  import {makeEditor} from "@app/editor"
+  import {DraftKey} from "@app/util/drafts"
  import {pushToast} from "@app/util/toast"

+  type Values = {
+    content?: string | object
+  }
+
  const {url, event, onClose, onSubmit} = $props()
-
+  const draftKey = new DraftKey<Values>(`reply:${event.id}`)
+  const initialValues = draftKey.get()
  const shouldProtect = canEnforceNip70(url)
-
  const uploading = writable(false)
+  const autofocus = !isMobile

  const selectFiles = () => editor.then(ed => ed.commands.selectFiles())

@@ -38,13 +44,23 @@
      })
    }

+    draftKey.clear()
    onSubmit(publishComment({event, content, tags, relays: [url]}))
  }

-  const editor = makeEditor({url, submit, uploading, autofocus: !isMobile})
-
  let form: HTMLElement
  let spacer: HTMLElement
+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
+  const editor = makeEditor({url, submit, uploading, content, onChange})
+
+  $effect(() => {
+    draftKey.set({content})
+  })

  onMount(() => {
    setTimeout(() => {
@@ -52,7 +68,7 @@
    })

    const observer = new ResizeObserver(() => {
-      spacer!.style.minHeight = `${form!.offsetHeight}px`
+      spacer!.style.minHeight = `${form!.offsetHeight + 60}px`
    })

    observer.observe(form!)
@@ -64,11 +80,15 @@
 </script>

 <div bind:this={spacer}></div>
-<form in:fly bind:this={form} onsubmit={preventDefault(submit)} class="cb cw fixed z-feature pt-3">
+<form
+  in:fly
+  bind:this={form}
+  onsubmit={preventDefault(submit)}
+  class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
  <div class="card2 mx-2 my-2 bg-alt shadow-md">
    <div class="relative">
-      <div class="note-editor flex-grow overflow-hidden">
-        <EditorContent {editor} />
+      <div class="note-editor grow overflow-hidden">
+        <EditorContent {autofocus} {editor} />
      </div>
      <Button
        data-tip="Add an image"
@@ -30,7 +30,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -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"
@@ -20,14 +21,29 @@
  import {pushToast} from "@app/util/toast"
  import {PROTECTED} from "@app/core/state"
  import {makeEditor} from "@app/editor"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {DraftKey} from "@app/util/drafts"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
+
+  type Values = {
+    title: string
+    content: string | object
+    amount: number
+  }

  type Props = {
    url: string
    h?: string
+    initialValues?: Values
+    shareToChat?: boolean
  }

-  const {url, h}: Props = $props()
+  let {url, h, initialValues, shareToChat = false}: Props = $props()
+
+  const draftKey = new DraftKey<Values>(`goal:${url}:${h ?? ""}`)
+
+  if (!initialValues) {
+    initialValues = draftKey.get()
+  }

  const shouldProtect = canEnforceNip70(url)

@@ -38,9 +54,9 @@
  const selectFiles = () => editor.then(ed => ed.commands.selectFiles())

  const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return

-    if (!content) {
+    if (!title) {
      return pushToast({
        theme: "error",
        message: "Please provide a title for your funding goal.",
@@ -48,9 +64,9 @@
    }

    const ed = await editor
-    const summary = ed.getText({blockSeparator: "\n"}).trim()
+    const content = ed.getText({blockSeparator: "\n"}).trim()

-    if (!summary.trim()) {
+    if (!content.trim()) {
      return pushToast({
        theme: "error",
        message: "Please provide details about your funding goal.",
@@ -59,31 +75,68 @@

    const tags = [
      ...ed.storage.nostr.getEditorTags(),
-      ["summary", summary],
+      ["summary", content],
      ["amount", String(amount)],
      ["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, tags}),
-    })
-
-    history.back()
  }

-  const editor = makeEditor({url, submit, uploading, placeholder: "What's on your mind?"})
+  let loading = $state(false)

-  let content = $state("")
-  let amount = $state(1000)
+  let title = $state(initialValues?.title ?? "")
+  let amount = $state(initialValues?.amount ?? 1000)
+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    onChange,
+    placeholder: "What's on your mind?",
+    content,
+  })
+
+  $effect(() => {
+    draftKey.update({title, content, amount})
+  })
 </script>

 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -102,7 +155,7 @@
            <!-- svelte-ignore a11y_autofocus -->
            <input
              autofocus={!isMobile}
-              bind:value={content}
+              bind:value={title}
              class="grow"
              type="text"
              placeholder="What do funds go towards?" />
@@ -115,7 +168,7 @@
            <p>Details*</p>
          {/snippet}
          {#snippet input()}
-            <div class="note-editor flex-grow overflow-hidden">
+            <div class="note-editor grow overflow-hidden">
              <EditorContent {editor} />
            </div>
          {/snippet}
@@ -123,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}
@@ -137,17 +191,17 @@
            Goal Amount (sats)*
          {/snippet}
          {#snippet input()}
-            <div class="flex flex-grow justify-end">
-              <label class="input input-bordered flex items-center gap-2">
+            <div class="flex grow justify-end">
+              <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"
@@ -157,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>
@@ -23,7 +23,7 @@
      <ModalTitle>Unable to Zap</ModalTitle>
    </ModalHeader>
    <p>
-      Zapping <ProfileLink {pubkey} class="!text-primary" /> isn't possible right now because
+      Zapping <ProfileLink {pubkey} class="text-primary!" /> isn't possible right now because
      {#if $zapper}
        their zap receiver isn't correctly set up.
      {:else}
@@ -97,10 +97,10 @@
          tabindex="-1"
          onmousedown={stopPropagation(onClear)}
          ontouchstart={stopPropagation(onClear)}>
-          <Icon icon={CloseCircle} class="scale-150 !bg-base-300" />
+          <Icon icon={CloseCircle} class="scale-150 bg-base-300!" />
        </span>
      {:else}
-        <Icon icon={AddCircle} class="scale-150 !bg-base-300" />
+        <Icon icon={AddCircle} class="scale-150 bg-base-300!" />
      {/if}
    </div>
    {#if !url}
@@ -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>
@@ -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">
@@ -1,10 +1,11 @@
 <script lang="ts">
  import type {ComponentProps} from "svelte"
-  import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
+  import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED, POLL} from "@welshman/util"
  import NoteContentEventTime from "@app/components/NoteContentEventTime.svelte"
  import NoteContentThread from "@app/components/NoteContentThread.svelte"
  import NoteContentClassified from "@app/components/NoteContentClassified.svelte"
  import NoteContentGoal from "@app/components/NoteContentGoal.svelte"
+  import NoteContentPoll from "@app/components/NoteContentPoll.svelte"
  import Content from "@app/components/Content.svelte"

  const props: ComponentProps<typeof Content> = $props()
@@ -19,6 +20,8 @@
    <NoteContentClassified {...props} />
  {:else if props.event.kind === ZAP_GOAL}
    <NoteContentGoal {...props} />
+  {:else if props.event.kind === POLL}
+    <NoteContentPoll {...props} />
  {:else}
    <Content {...props} />
  {/if}
@@ -9,10 +9,10 @@

 <div class="flex items-start gap-4">
  <CalendarEventDate event={props.event} />
-  <div class="flex flex-grow flex-col">
+  <div class="flex grow flex-col">
    <CalendarEventHeader event={props.event} />
    <div class="flex py-2 opacity-50">
-      <div class="h-px flex-grow bg-base-content opacity-25"></div>
+      <div class="h-px grow bg-base-content opacity-25"></div>
    </div>
    <Content {...props} />
  </div>
@@ -1,10 +1,11 @@
 <script lang="ts">
  import type {ComponentProps} from "svelte"
-  import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
+  import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED, POLL} from "@welshman/util"
  import NoteContentMinimalEventTime from "@app/components/NoteContentMinimalEventTime.svelte"
  import NoteContentMinimalThread from "@app/components/NoteContentMinimalThread.svelte"
  import NoteContentMinimalClassified from "@app/components/NoteContentMinimalClassified.svelte"
  import NoteContentMinimalGoal from "@app/components/NoteContentMinimalGoal.svelte"
+  import NoteContentMinimalPoll from "@app/components/NoteContentMinimalPoll.svelte"
  import ContentMinimal from "@app/components/ContentMinimal.svelte"

  const props: ComponentProps<typeof ContentMinimal> = $props()
@@ -19,6 +20,8 @@
    <NoteContentMinimalClassified {...props} />
  {:else if props.event.kind === ZAP_GOAL}
    <NoteContentMinimalGoal {...props} />
+  {:else if props.event.kind === POLL}
+    <NoteContentMinimalPoll {...props} />
  {:else}
    <ContentMinimal {...props} />
  {/if}
@@ -17,7 +17,7 @@
 </script>

 <div class="flex flex-col">
-  <div class="flex flex-grow flex-wrap justify-between gap-2">
+  <div class="flex grow flex-wrap justify-between gap-2">
    <p class="text-sm">{meta.title || meta.name}</p>
    {#if !isNaN(start) && !isNaN(end)}
      {@const startDateDisplay = formatTimestampAsDate(start)}
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {derived} from "svelte/store"
+  import {POLL_RESPONSE} from "@welshman/util"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+  import {deriveEvents} from "@app/core/state"
+  import {getPollResults} from "@app/util/polls"
+
+  const props: ComponentProps<typeof ContentMinimal> = $props()
+
+  const responses = deriveEvents([{kinds: [POLL_RESPONSE], "#e": [props.event.id]}])
+
+  const results = derived(responses, $responses => getPollResults(props.event, $responses))
+</script>
+
+<div class="flex flex-col gap-0">
+  <ContentMinimal {...props} />
+  <span class="text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</span>
+</div>
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {onMount} from "svelte"
+  import {request} from "@welshman/net"
+  import {POLL_RESPONSE} from "@welshman/util"
+  import PollVotes from "@app/components/PollVotes.svelte"
+  import Content from "@app/components/Content.svelte"
+
+  const props: ComponentProps<typeof Content> = $props()
+
+  onMount(() => {
+    if (!props.url) {
+      return
+    }
+
+    request({
+      relays: [props.url],
+      filters: [{kinds: [POLL_RESPONSE], "#e": [props.event.id]}],
+    })
+  })
+</script>
+
+<div class="flex flex-col gap-3">
+  <Content event={props.event} showEntire url={props.url} />
+
+  {#if props.url}
+    <PollVotes url={props.url} event={props.event} />
+  {/if}
+</div>
@@ -0,0 +1,280 @@
+<script lang="ts">
+  import {insertAt, now, randomId, removeAt, removeUndefined} from "@welshman/lib"
+  import {makeEvent, POLL} from "@welshman/util"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
+  import {isMobile, preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import HamburgerMenu from "@assets/icons/hamburger-menu.svg?dataurl"
+  import PlusCircle from "@assets/icons/add-circle.svg?dataurl"
+  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  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"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {PROTECTED} from "@app/core/state"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
+  import {DraftKey} from "@app/util/drafts"
+  import type {PollType} from "@app/util/polls"
+
+  type Option = {
+    id: string
+    value: string
+  }
+
+  type Values = {
+    title: string
+    pollType: PollType
+    endsAt?: number
+    options: Option[]
+  }
+
+  type Props = {
+    url: string
+    h?: string
+    shareToChat?: boolean
+  }
+
+  const {url, h, shareToChat = false}: Props = $props()
+  const draftKey = new DraftKey<Values>(`poll:${url}:${h ?? ""}`)
+  const initialValues = draftKey.get()
+
+  const shouldProtect = canEnforceNip70(url)
+
+  const back = () => history.back()
+
+  const addOption = () => {
+    options = [...options, {id: randomId(), value: ""}]
+  }
+
+  const removeOption = (id: string) => {
+    options = options.filter(option => option.id !== id)
+  }
+
+  const updateOption = (id: string, value: string) => {
+    options = options.map(option => (option.id === id ? {...option, value} : option))
+  }
+
+  const reorderOptions = (targetId: string) => {
+    if (!draggedOptionId) {
+      return
+    }
+
+    const sourceIndex = options.findIndex(option => option.id === draggedOptionId)
+    const targetIndex = options.findIndex(option => option.id === targetId)
+
+    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+      return
+    }
+
+    options = insertAt(targetIndex, options[sourceIndex], removeAt(sourceIndex, options))
+  }
+
+  const onDragStart = (e: DragEvent, id: string) => {
+    draggedOptionId = id
+
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move"
+      e.dataTransfer.setData("text/plain", id)
+    }
+  }
+
+  const onDragOver = (e: DragEvent, targetId: string) => {
+    e.preventDefault()
+    reorderOptions(targetId)
+  }
+
+  const onDrop = (e: DragEvent, targetId: string) => {
+    e.preventDefault()
+    reorderOptions(targetId)
+    draggedOptionId = undefined
+  }
+
+  const onDragEnd = () => {
+    draggedOptionId = undefined
+  }
+
+  const submit = async () => {
+    if (loading) return
+
+    if (!title.trim()) {
+      return pushToast({theme: "error", message: "Please provide a title for your poll."})
+    }
+
+    const nonEmptyOptions = removeUndefined(options.map(option => option.value.trim() || undefined))
+
+    if (nonEmptyOptions.length < 2) {
+      return pushToast({theme: "error", message: "Please provide at least two options."})
+    }
+
+    if (endsAt && endsAt <= now()) {
+      return pushToast({theme: "error", message: "End time must be in the future."})
+    }
+
+    const tags: string[][] = [
+      ...nonEmptyOptions.map(option => ["option", randomId(), option]),
+      ["polltype", pollType],
+      ["relay", url],
+    ]
+
+    if (endsAt) {
+      tags.push(["endsAt", String(endsAt)])
+    }
+
+    if (h) {
+      tags.push(["h", h])
+    }
+
+    loading = true
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      const pollThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(POLL, {content: title.trim(), tags}),
+      })
+
+      const error = await waitForThunkError(pollThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: pollThunk.event, protect})
+      }
+    } finally {
+      loading = false
+    }
+  }
+
+  let loading = $state(false)
+
+  let draggedOptionId = $state<string | undefined>()
+  let title = $state(initialValues?.title ?? "")
+  let pollType = $state<PollType>(initialValues?.pollType ?? "singlechoice")
+  let endsAt = $state<number | undefined>(initialValues?.endsAt)
+  let options = $state<Option[]>(
+    initialValues?.options ?? [
+      {id: randomId(), value: "Yes"},
+      {id: randomId(), value: "No"},
+    ],
+  )
+
+  $effect(() => {
+    draftKey.set({title, pollType, endsAt, options})
+  })
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Create a Poll</ModalTitle>
+      <ModalSubtitle>Ask a question and collect votes right in the feed.</ModalSubtitle>
+    </ModalHeader>
+    <div class="col-8 relative">
+      <Field>
+        {#snippet label()}
+          <p>Question*</p>
+        {/snippet}
+        {#snippet input()}
+          <label class="input input-bordered flex w-full items-center gap-2">
+            <!-- svelte-ignore a11y_autofocus -->
+            <input
+              autofocus={!isMobile}
+              bind:value={title}
+              class="grow"
+              type="text"
+              placeholder="What would you like to ask?" />
+          </label>
+        {/snippet}
+      </Field>
+
+      <Field>
+        {#snippet label()}
+          <p>Options*</p>
+        {/snippet}
+        {#snippet input()}
+          <div class="flex flex-col gap-2" role="list">
+            {#each options as option, index (option.id)}
+              <div
+                class="flex items-center gap-2"
+                draggable="true"
+                role="listitem"
+                ondragstart={e => onDragStart(e, option.id)}
+                ondragover={e => onDragOver(e, option.id)}
+                ondrop={e => onDrop(e, option.id)}
+                ondragend={onDragEnd}>
+                <div class="cursor-move opacity-70" aria-label="Drag handle">
+                  <Icon icon={HamburgerMenu} size={4} />
+                </div>
+                <label class="input input-bordered flex w-full items-center gap-2">
+                  <input
+                    value={option.value}
+                    class="grow"
+                    type="text"
+                    placeholder={`Option ${index + 1}`}
+                    oninput={e => updateOption(option.id, e.currentTarget.value)} />
+                </label>
+                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(option.id)}>
+                  <Icon icon={MinusCircle} size={4} />
+                </Button>
+              </div>
+            {/each}
+            <Button class="btn btn-outline btn-sm self-end" onclick={addOption}>
+              <Icon icon={PlusCircle} size={4} />
+              Add option
+            </Button>
+          </div>
+        {/snippet}
+      </Field>
+
+      <div class="flex flex-col gap-2">
+        <FieldInline>
+          {#snippet label()}
+            Poll type
+          {/snippet}
+          {#snippet input()}
+            <select class="select select-bordered w-full max-w-xs" bind:value={pollType}>
+              <option value="singlechoice">Single choice</option>
+              <option value="multiplechoice">Multiple choice</option>
+            </select>
+          {/snippet}
+        </FieldInline>
+        <FieldInline>
+          {#snippet label()}
+            Ends at
+          {/snippet}
+          {#snippet input()}
+            <DateTimeInput bind:value={endsAt} />
+          {/snippet}
+        </FieldInline>
+      </div>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Create Poll</Spinner>
+    </Button>
+  </ModalFooter>
+</Modal>
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
+  import Link from "@lib/components/Link.svelte"
+  import NoteContent from "@app/components/NoteContent.svelte"
+  import CommentActions from "@app/components/CommentActions.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
+  import {makePollPath} from "@app/util/routes"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const h = getTagValue("h", event.tags)
+</script>
+
+<Link
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
+  href={makePollPath(url, event.id)}>
+  <NoteContent {event} {url} />
+  <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
+      Posted by <ProfileLink pubkey={event.pubkey} {url} />
+      {#if h}
+        in <RoomLink {url} {h} />
+      {/if}
+    </span>
+    <CommentActions segment="polls" showActivity {url} {event} />
+  </div>
+</Link>
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import {tweened} from "svelte/motion"
+  import type {TrustedEvent} from "@welshman/util"
+  import {noop} from "@welshman/lib"
+  import {stopPropagation} from "@lib/html"
+  import {getPollType, isPollClosed} from "@app/util/polls"
+
+  type Props = {
+    event: TrustedEvent
+    option: {id: string; label: string}
+    results: {voters: number; options: {id: string; votes: number}[]}
+    selectedIds: string[]
+    setSingleChoice: (id: string) => void
+    toggleMultipleChoice: (id: string) => void
+  }
+
+  const {event, option, results, selectedIds, setSingleChoice, toggleMultipleChoice}: Props =
+    $props()
+
+  const pollType = getPollType(event)
+  const closed = isPollClosed(event)
+
+  const selected = $derived(
+    pollType === "singlechoice" ? selectedIds[0] === option.id : selectedIds.includes(option.id),
+  )
+  const onselect = () =>
+    pollType === "singlechoice" ? setSingleChoice(option.id) : toggleMultipleChoice(option.id)
+
+  const votes = $derived(results.options.find(r => r.id === option.id)?.votes || 0)
+  const maxVotes = $derived(Math.max(...results.options.map(r => r.votes), 1))
+
+  const tweenedVotes = tweened(votes, {duration: 300})
+  const tweenedMax = tweened(maxVotes, {duration: 300})
+
+  $effect(() => {
+    tweenedVotes.set(votes)
+  })
+
+  $effect(() => {
+    tweenedMax.set(maxVotes)
+  })
+</script>
+
+<div class="flex flex-col gap-2 card2 card2-sm bg-alt">
+  <div class="flex items-center justify-between gap-2">
+    <label class="flex min-w-0 grow items-center gap-2">
+      {#if !closed}
+        {#if pollType === "singlechoice"}
+          <input
+            name={event.id}
+            type="radio"
+            class="radio radio-primary radio-sm"
+            checked={selected}
+            onclick={stopPropagation(noop)}
+            onchange={onselect} />
+        {:else}
+          <input
+            type="checkbox"
+            class="checkbox checkbox-primary checkbox-sm"
+            checked={selected}
+            onclick={stopPropagation(noop)}
+            onchange={onselect} />
+        {/if}
+      {/if}
+      <span class="truncate">{option.label}</span>
+    </label>
+    <span class="whitespace-nowrap text-xs opacity-75">{votes} vote{votes === 1 ? "" : "s"}</span>
+  </div>
+  <progress class="progress progress-primary" value={$tweenedVotes} max={$tweenedMax}></progress>
+</div>
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import {onDestroy} from "svelte"
+  import type {TrustedEvent} from "@welshman/util"
+  import {POLL_RESPONSE} from "@welshman/util"
+  import {pubkey, publishThunk, abortThunk} from "@welshman/app"
+  import {formatTimestampRelative} from "@welshman/lib"
+  import {deriveEvents} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+  import {makePollResponse} from "@app/core/commands"
+  import PollOption from "@app/components/PollOption.svelte"
+  import {
+    getPollEndsAt,
+    getPollOptions,
+    getPollResponseSelections,
+    getPollResults,
+    getPollType,
+    isPollClosed,
+  } from "@app/util/polls"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const responses = deriveEvents([{kinds: [POLL_RESPONSE], "#e": [event.id]}])
+
+  const pollType = getPollType(event)
+  const options = getPollOptions(event)
+  const closed = isPollClosed(event)
+  const endsAt = getPollEndsAt(event)
+  const publishDelay = pollType === "multiplechoice" ? 10_000 : undefined
+
+  const getOwnResponse = (responses: TrustedEvent[]) => {
+    let latest: TrustedEvent | undefined
+
+    for (const response of responses) {
+      if (response.pubkey !== $pubkey) {
+        continue
+      }
+
+      if (!latest || response.created_at > latest.created_at) {
+        latest = response
+      }
+    }
+
+    return latest
+  }
+
+  const publishSelection = (selection: string[]) => {
+    if (activeThunk) {
+      abortThunk(activeThunk)
+    }
+
+    if (selection.length === 0) {
+      activeThunk = undefined
+      return
+    }
+
+    activeThunk = publishThunk({
+      relays: [url],
+      event: makePollResponse({event, selectedIds: selection}),
+      delay: publishDelay,
+    })
+  }
+
+  const publishCurrentSelection = () => {
+    const selection = pollType === "singlechoice" ? selectedIds.slice(0, 1) : selectedIds
+
+    if (selection.length === 0) {
+      return pushToast({theme: "error", message: "Please select at least one option."})
+    }
+
+    publishSelection(selection)
+  }
+
+  const results = $derived(getPollResults(event, $responses))
+  const ownResponse = $derived(getOwnResponse($responses))
+
+  const setSingleChoice = (id: string) => {
+    selectedIds = [id]
+    publishCurrentSelection()
+  }
+
+  const toggleMultipleChoice = (id: string) => {
+    selectedIds = selectedIds.includes(id)
+      ? selectedIds.filter(selectedId => selectedId !== id)
+      : [...selectedIds, id]
+
+    publishCurrentSelection()
+  }
+
+  let selectedIds = $state<string[]>([])
+  let activeThunk: ReturnType<typeof publishThunk> | undefined
+
+  $effect(() => {
+    if (ownResponse) {
+      selectedIds = getPollResponseSelections(ownResponse, pollType)
+    }
+  })
+
+  onDestroy(() => {
+    if (activeThunk) {
+      abortThunk(activeThunk)
+    }
+  })
+</script>
+
+<div class="flex flex-col gap-2">
+  {#each options as option (option.id)}
+    <PollOption {event} {option} {results} {selectedIds} {setSingleChoice} {toggleMultipleChoice} />
+  {/each}
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <div class="text-sm opacity-75">
+      {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
+      {#if endsAt}
+        {#if closed}
+          • Ended {formatTimestampRelative(endsAt)}
+        {:else}
+          • Ends {formatTimestampRelative(endsAt)}
+        {/if}
+      {/if}
+    </div>
+    <div class="text-sm opacity-75">{results.voters} vote{results.voters === 1 ? "" : "s"}</div>
+  </div>
+</div>
@@ -32,18 +32,14 @@
 </script>

 <div
-  class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
+  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 shrink-0 bg-base-200 pt-2 md:block">
  <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
    <PrimaryNavSpaces />
    {#if PLATFORM_RELAYS.length > 0}
      <Divider />
    {/if}
-    <div>
-      <PrimaryNavItem
-        title="Settings"
-        href="/settings/profile"
-        prefix="/settings"
-        class="tooltip-right">
+    <div class="flex flex-col">
+      <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings">
        {#if $userProfile?.picture}
          <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
        {:else}
@@ -53,11 +49,10 @@
      <PrimaryNavItem
        title="Messages"
        onclick={chatHandler}
-        class="tooltip-right"
        notification={$notifications.has("/chat")}>
        <ImageIcon alt="Messages" src={Letter} size={8} />
      </PrimaryNavItem>
-      <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
+      <PrimaryNavItem title="Search" href="/people">
        <ImageIcon alt="Search" src={Magnifier} size={8} />
      </PrimaryNavItem>
    </div>
@@ -67,11 +62,10 @@
 {@render children?.()}

 <!-- a little extra something for ios -->
-<div
-  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
+<div class="hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-(--saib) bg-base-100 md:hidden">
 </div>
 <div
-  class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
  <div class="content-padding-x content-sizing flex justify-between px-2">
    <div class="flex gap-2 sm:gap-6">
      <PrimaryNavItem title="Search" href="/people">
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {displayRelayUrl} from "@welshman/util"
+  import {deriveRelayDisplay} from "@welshman/app"
  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
  import RelayIcon from "@app/components/RelayIcon.svelte"
  import {makeSpacePath, goToSpace} from "@app/util/routes"
@@ -12,11 +12,13 @@
  const {url}: Props = $props()

  const onClick = () => goToSpace(url)
+
+  const display = $derived(deriveRelayDisplay(url))
 </script>

 <PrimaryNavItem
  onclick={onClick}
-  title={displayRelayUrl(url)}
+  title={$display}
  class="tooltip-right"
  notification={$notifications.has(makeSpacePath(url))}>
  <RelayIcon {url} size={10} class="rounded-full" />
@@ -12,7 +12,7 @@

  const itemHeight = 56
  const navPadding = 8 * itemHeight
-  const itemLimit = $derived((windowHeight - navPadding) / itemHeight)
+  const itemLimit = $derived(Math.max(0, (windowHeight - navPadding) / itemHeight))
  const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, $userSpaceUrls))
  const otherSpaceNotifications = $derived(secondarySpaceUrls.some(p => $notifications.has(p)))
 </script>
@@ -23,7 +23,7 @@
  {#each PLATFORM_RELAYS as url (url)}
    <PrimaryNavItemSpace {url} />
  {:else}
-    <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
+    <PrimaryNavItem title="Home" href="/home">
      <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
    </PrimaryNavItem>
    <Divider />
@@ -33,7 +33,6 @@
    <PrimaryNavItem
      href="/spaces"
      title="All Spaces"
-      class="tooltip-right"
      prefix="no-highlight"
      notification={otherSpaceNotifications}>
      <ImageIcon alt="All Spaces" src={Widget} size={8} />
@@ -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(),
    })
@@ -1,6 +1,6 @@
 <script lang="ts">
  import type {Profile} from "@welshman/util"
-  import {getTag, makeProfile} from "@welshman/util"
+  import {makeProfile} from "@welshman/util"
  import {pubkey, profilesByPubkey, waitForThunkError} from "@welshman/app"
  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
  import {errorMessage} from "@lib/util"
@@ -10,26 +10,18 @@
  import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
  import {clearModals} from "@app/util/modal"
  import {pushToast} from "@app/util/toast"
-  import {PROTECTED} from "@app/core/state"
  import {updateProfile} from "@app/core/commands"

  const profile = $profilesByPubkey.get($pubkey!) || makeProfile()
-  const shouldBroadcast = !getTag(PROTECTED, profile.event?.tags || [])
-  const initialValues = {profile, shouldBroadcast}
+  const initialValues = {profile}

  const back = () => history.back()

-  const onsubmit = async ({
-    profile,
-    shouldBroadcast,
-  }: {
-    profile: Profile
-    shouldBroadcast: boolean
-  }) => {
+  const onsubmit = async ({profile}: {profile: Profile}) => {
    loading = true

    try {
-      const error = await waitForThunkError(updateProfile({profile, shouldBroadcast}))
+      const error = await waitForThunkError(updateProfile({profile}))

      if (error) {
        pushToast({
@@ -6,7 +6,6 @@
  import MapPoint from "@assets/icons/map-point.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Field from "@lib/components/Field.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
  import Button from "@lib/components/Button.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
@@ -17,7 +16,6 @@

  type Values = {
    profile: Profile
-    shouldBroadcast: boolean
  }

  type Props = {
@@ -77,7 +75,7 @@
      {/snippet}
      {#snippet input()}
        <textarea
-          class="textarea textarea-bordered leading-4"
+          class="textarea textarea-bordered leading-4 w-full"
          rows="5"
          bind:value={values.profile.about}></textarea>
      {/snippet}
@@ -104,25 +102,6 @@
        {/snippet}
      </Field>
    {/if}
-    {#if !isSignup}
-      <FieldInline>
-        {#snippet label()}
-          <p>Broadcast Profile</p>
-        {/snippet}
-        {#snippet input()}
-          <input
-            type="checkbox"
-            class="toggle toggle-primary"
-            bind:checked={values.shouldBroadcast} />
-        {/snippet}
-        {#snippet info()}
-          <p>
-            If enabled, changes will be published to the broader nostr network in addition to spaces
-            you are a member of.
-          </p>
-        {/snippet}
-      </FieldInline>
-    {/if}
  </ModalBody>
  <ModalFooter>
    {@render footer()}
@@ -25,10 +25,10 @@
 <div class="flex flex-col gap-2">
  {#each spaceUrls as url (url)}
    <div class="card2 bg-alt flex flex-row items-center gap-2">
-      <div class="flex-shrink-0">
+      <div class="shrink-0">
        <RelayIcon {url} size={12} />
      </div>
-      <div class="flex flex-grow flex-col">
+      <div class="flex grow flex-col">
        <RelayName {url} />
        <div class="text-sm opacity-75">
          {url}
@@ -23,7 +23,7 @@
  import Icon from "@lib/components/Icon.svelte"
  import Reaction from "@app/components/Reaction.svelte"
  import ReportDetails from "@app/components/ReportDetails.svelte"
-  import {REACTION_KINDS} from "@app/core/state"
+  import {REACTION_KINDS, deriveUserIsSpaceAdmin} from "@app/core/state"
  import {pushModal} from "@app/util/modal"

  interface Props {
@@ -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)
+        }
+      },
    }),
  )

@@ -78,6 +92,8 @@
    }
  }

+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+
  const onReportClick = () => pushModal(ReportDetails, {url, event})

  const reportReasons = $derived(uniq(map(e => getTag("e", e.tags)?.[2], $reports.values())))
@@ -118,7 +134,7 @@

 {#if $reactions.length > 0 || $zaps.length || $reports.length > 0 || children}
  <div class="flex min-w-0 flex-wrap gap-2">
-    {#if url && $reports.length > 0}
+    {#if url && $reports.length > 0 && $userIsAdmin}
      <button
        type="button"
        data-tip={`This content has been reported as "${displayList(reportReasons)}".`}
@@ -121,6 +121,6 @@
    </div>
  </ModalBody>
  <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
  </ModalFooter>
 </Modal>
@@ -26,8 +26,8 @@
  type="button"
  class="btn font-normal flex h-[unset] w-full flex-nowrap py-4 text-left items-start justify-between"
  {onclick}>
-  <div class="flex flex-grow flex-row items-start gap-4">
-    <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center">
+  <div class="flex grow flex-row items-start gap-4">
+    <div class="flex h-7 w-7 shrink-0 items-center justify-center">
      <Icon {icon} />
    </div>
    <div class="flex flex-col gap-1">
@@ -23,7 +23,7 @@
      <div class="relative">
        <div class="avatar relative">
          <div
-            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            class="center flex! h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
            <RelayIcon {url} />
          </div>
        </div>
@@ -12,18 +12,29 @@
  import ComposeMenu from "@app/components/ComposeMenu.svelte"
  import EditorContent from "@app/editor/EditorContent.svelte"
  import {makeEditor} from "@app/editor"
+  import {DraftKey} from "@app/util/drafts"
  import {onDestroy, onMount} from "svelte"

+  type Values = {
+    content?: string | object
+  }
+
  type Props = {
    url?: string
    h?: string
-    content?: string
    onEscape?: () => void
    onEditPrevious?: () => void
    onSubmit: (event: EventContent) => void
+    initialValues?: Values
  }

-  const {url, h, content, onEscape, onEditPrevious, onSubmit}: Props = $props()
+  let {url, h, initialValues, onEscape, onEditPrevious, onSubmit}: Props = $props()
+
+  const draftKey = url || h ? new DraftKey<Values>(`room:${url ?? ""}:${h ?? ""}`) : undefined
+
+  if (!initialValues) {
+    initialValues = draftKey?.get()
+  }

  const autofocus = !isMobile

@@ -61,12 +72,29 @@

    onSubmit({content, tags})

+    draftKey?.clear()
    ed.chain().clearContent().run()
  }

-  const editor = makeEditor({url, content, autofocus, submit, uploading, aggressive: true})
-
  let popover: Instance | undefined = $state()
+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
+  const editor = makeEditor({
+    url,
+    content,
+    submit,
+    uploading,
+    onChange,
+    aggressive: true,
+  })
+
+  $effect(() => {
+    draftKey?.set({content})
+  })

  onMount(async () => {
    const ed = await editor
@@ -104,8 +132,8 @@
      </Button>
    </Tippy>
  </div>
-  <div class="chat-editor flex-grow overflow-hidden">
-    <EditorContent {editor} />
+  <div class="chat-editor grow overflow-hidden">
+    <EditorContent {autofocus} {editor} />
  </div>
  <Button
    data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
@@ -22,6 +22,7 @@
  import Button from "@lib/components/Button.svelte"
  import Popover from "@lib/components/Popover.svelte"
  import Confirm from "@lib/components/Confirm.svelte"
+  import Tooltip from "@lib/components/Tooltip.svelte"
  import Modal from "@lib/components/Modal.svelte"
  import ModalBody from "@lib/components/ModalBody.svelte"
  import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -206,43 +207,43 @@
      <strong class="text-lg">Room Permissions</strong>
      <div class="flex gap-2 flex-wrap">
        {#if $room?.isRestricted}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="Only members can send messages.">
-            <Icon size={4} icon={Microphone} /> Restricted
-          </Button>
+          <Tooltip content="Only members can send messages.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Microphone} /> Restricted
+            </Button>
+          </Tooltip>
        {/if}
        {#if $room?.isPrivate}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="Only members can view messages.">
-            <Icon size={4} icon={Lock} /> Private
-          </Button>
+          <Tooltip content="Only members can view messages.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Lock} /> Private
+            </Button>
+          </Tooltip>
        {/if}
        {#if $room?.isHidden}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="This room is not visible to non-members.">
-            <Icon size={4} icon={EyeClosed} /> Hidden
-          </Button>
+          <Tooltip content="This room is not visible to non-members.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={EyeClosed} /> Hidden
+            </Button>
+          </Tooltip>
        {/if}
        {#if $room?.isClosed}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="Requests to join this room will be ignored.">
-            <Icon size={4} icon={MinusCircle} /> Closed
-          </Button>
+          <Tooltip content="Requests to join this room will be ignored.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={MinusCircle} /> Closed
+            </Button>
+          </Tooltip>
        {/if}
        {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="This room has no additional access controls.">
-            <Icon size={4} icon={Eye} /> Public
-          </Button>
+          <Tooltip content="This room has no additional access controls.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Eye} /> Public
+            </Button>
+          </Tooltip>
        {/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>
@@ -250,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>
@@ -131,7 +131,7 @@
        <p>Icon</p>
      {/snippet}
      {#snippet input()}
-        <div class="flex flex-grow items-center justify-between gap-4">
+        <div class="flex grow items-center justify-between gap-4">
          {#if imagePreview}
            <div class="flex items-center gap-2">
              <span class="text-sm opacity-75">Selected:</span>
@@ -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"
@@ -37,7 +45,7 @@
    event: TrustedEvent
    replyTo?: (event: TrustedEvent) => void
    showPubkey?: boolean
-    inert?: boolean
+    addSpaceBelow?: boolean
    canEdit: (event: TrustedEvent) => boolean
    onEdit: (event: TrustedEvent) => void
  }
@@ -47,7 +55,7 @@
    event,
    replyTo = undefined,
    showPubkey = false,
-    inert = false,
+    addSpaceBelow = false,
    canEdit,
    onEdit,
  }: Props = $props()
@@ -58,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
@@ -76,20 +92,23 @@

 <TapTarget
  data-event={event.id}
-  onTap={inert ? null : onTap}
-  class="group relative flex w-full cursor-default flex-col p-2 pb-3 text-left hover:bg-base-100/50">
+  {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},
+  )}>
  <div class="flex w-full gap-3 overflow-auto">
    {#if showPubkey}
-      <Button onclick={openProfile} class="flex items-start">
+      <Button onclick={openProfile} class="flex items-start pt-1.5 justify-center w-8 shrink-0">
        <ProfileCircle
          pubkey={event.pubkey}
          class="border border-solid border-base-content"
          size={8} />
      </Button>
    {:else}
-      <div class="w-8 min-w-8 max-w-8"></div>
+      <div class="w-8 shrink-0"></div>
    {/if}
-    <div class="min-w-0 flex-grow pr-1">
+    <div class="min-w-0 grow pr-1">
      {#if showPubkey}
        <div class="flex items-center gap-2">
          <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
@@ -106,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}
@@ -119,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`}
@@ -133,14 +153,14 @@
            "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}
  </div>
  {#if !isMobile}
    <button
-      class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
+      class="join absolute right-2 top-0.5 border border-solid border-neutral text-xs opacity-0 transition-all pr-2"
      class:group-hover:opacity-100={!isMobile}>
      {#if ENABLE_ZAPS}
        <RoomItemZapButton {url} {event} />
@@ -8,16 +8,17 @@
  import {getRoomItemPath} from "@app/util/routes"

  const props: ComponentProps<typeof NoteContent> = $props()
-
  const path = getRoomItemPath(props.url!, props.event)
+  const minLength = 5000
+  const maxLength = 5500
 </script>

 <div class={cx("text-sm", {"card2 card2-sm bg-alt": props.event.kind !== MESSAGE})}>
  {#if path && !isMobile}
    <Link href={path}>
-      <NoteContent {...props} />
+      <NoteContent {...props} {minLength} {maxLength} />
    </Link>
  {:else}
-    <NoteContent {...props} />
+    <NoteContent {...props} {minLength} {maxLength} />
  {/if}
 </div>
@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
-  import {getPubkeyTagValues} from "@welshman/util"
-  import ProfileLink from "@app/components/ProfileLink.svelte"
-
-  type Props = {
-    url: string
-    event: TrustedEvent
-  }
-
-  const {url, event}: Props = $props()
-</script>
-
-{#each getPubkeyTagValues(event.tags) as pubkey}
-  <div class="py-1 text-center text-xs opacity-75">
-    <ProfileLink unstyled class="text-primary" {url} {pubkey} /> left the room
-  </div>
-{/each}
@@ -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>
@@ -56,6 +56,11 @@
  }

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

@@ -11,8 +11,8 @@
  const {url, h, ...props}: Props = $props()
 </script>

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

  const profile = getKey<Profile>("signup.profile")!

-  const initialValues = {profile, shouldBroadcast: false}
+  const initialValues = {profile}

  const back = () => history.back()

@@ -27,7 +27,7 @@
    <Button onclick={back} class="place-self-start pr-3 md:hidden">
      <Icon icon={ArrowLeft} size={7} />
    </Button>
-    <div class="ellipsize whitespace-nowrap flex flex-grow items-center justify-between gap-4">
+    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
      <div class="flex flex-col">
        <div class="flex gap-2 items-center">
          {@render title?.()}
@@ -42,7 +42,7 @@
        <div class="relative">
          <div class="avatar relative">
            <div
-              class="center !flex h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
+              class="center flex! h-16 w-16 min-w-16 rounded-full border-2 border-solid border-base-300 bg-base-300">
              <RelayIcon {url} size={10} />
            </div>
          </div>
@@ -134,7 +134,7 @@
        <p>Icon</p>
      {/snippet}
      {#snippet input()}
-        <div class="flex items-center gap-4 justify-between flex-grow">
+        <div class="flex items-center gap-4 justify-between grow">
          {#if imagePreview}
            <div class="flex items-center gap-2">
              <span class="text-sm opacity-75">Selected:</span>
@@ -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 Upload from "@assets/icons/upload.svg?dataurl"
  import Copy from "@assets/icons/copy.svg?dataurl"
  import Spinner from "@lib/components/Spinner.svelte"
  import Field from "@lib/components/Field.svelte"
@@ -25,34 +27,54 @@
  const authError = deriveRelayAuthError(url)

  const back = () => history.back()
-
  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)
-
  let invite = $state("")

  $effect(() => {
    const relay = displayRelayUrl(url)
    const params = new URLSearchParams({r: relay, c: claim}).toString()
-
    invite = PLATFORM_URL + "/join?" + params
  })

  onMount(async () => {
-    const [[event]] = await Promise.all([
-      request({
-        relays: [url],
-        autoClose: true,
-        signal: AbortSignal.timeout(3000),
-        filters: [{kinds: [RELAY_INVITE]}],
-      }),
-      sleep(2000),
-    ])
+    try {
+      const {value} = await Share.canShare()
+      canShare = value
+    } catch {
+      canShare = false
+    }

-    claim = getTagValue("claim", event?.tags || []) || ""
-    loading = false
+    try {
+      const [[event]] = await Promise.all([
+        request({
+          relays: [url],
+          autoClose: true,
+          signal: AbortSignal.timeout(10000),
+          filters: [{kinds: [RELAY_INVITE]}],
+        }),
+        sleep(2000),
+      ])
+
+      claim = getTagValue("claim", event?.tags || []) || ""
+    } catch {
+      claim = ""
+    } finally {
+      loading = false
+    }
  })
 </script>

@@ -74,16 +96,28 @@
        <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={Upload} />
+                  </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>
@@ -100,6 +134,6 @@
    </div>
  </ModalBody>
  <ModalFooter>
-    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
  </ModalFooter>
 </Modal>
@@ -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>
@@ -1,7 +1,7 @@
 <script lang="ts">
  import {derived} from "svelte/store"
-  import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
-  import {deriveRelay, createSearch, pubkey} from "@welshman/app"
+  import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED, POLL} from "@welshman/util"
+  import {deriveRelay, deriveRelayDisplay, createSearch, pubkey} from "@welshman/app"
  import {fly} from "@lib/transition"
  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
@@ -17,6 +17,7 @@
  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
  import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Revote from "@assets/icons/revote.svg?dataurl"
  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
  import Bell from "@assets/icons/bell.svg?dataurl"
@@ -64,11 +65,13 @@
  const {url} = $props()

  const relay = deriveRelay(url)
+  const display = deriveRelayDisplay(url)
  const chatPath = makeSpacePath(url, "chat")
  const goalsPath = makeSpacePath(url, "goals")
  const threadsPath = makeSpacePath(url, "threads")
  const classifiedsPath = makeSpacePath(url, "classifieds")
  const calendarPath = makeSpacePath(url, "calendar")
+  const pollsPath = makeSpacePath(url, "polls")
  const userRooms = deriveUserRooms(url)
  const otherRooms = deriveOtherRooms(url)
  const otherVoiceRooms = deriveOtherVoiceRooms(url)
@@ -136,12 +139,14 @@

 <div bind:this={element} class="flex min-h-0 flex-1 flex-col">
  <SecondaryNavSection class="min-h-0 flex-1 flex flex-col overflow-hidden pb-0">
-    <div class="flex-shrink-0">
+    <div class="shrink-0">
      <Button
        class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
        onclick={openMenu}>
        <div class="flex items-center justify-between">
-          <strong class="flex items-center gap-1 relative">
+          <strong
+            class="flex items-center gap-1 relative tooltip tooltip-right"
+            data-tip={$display}>
            <RelayName {url} class="ellipsize" />
            <div
              class="absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary transition-all opacity-0"
@@ -175,7 +180,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}
@@ -257,16 +266,21 @@
          <Icon icon={CalendarMinimalistic} /> Calendar
        </SecondaryNavItem>
      {/if}
+      {#if $spaceKinds.has(POLL)}
+        <SecondaryNavItem href={pollsPath}>
+          <Icon icon={Revote} /> Polls
+        </SecondaryNavItem>
+      {/if}
      {#if hasNip29($relay)}
        {#if $userRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
          <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
        {/if}
        {#each $userRooms as h (h)}
          <SpaceMenuRoomItem {url} {h} />
        {/each}
        {#if $otherRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
          <SecondaryNavHeader>
            {#if $userRooms.length > 0}
              Other Rooms
@@ -285,7 +299,7 @@
          <SpaceMenuRoomItem {url} {h} />
        {/each}
        {#if $otherVoiceRooms.length > 0}
-          <div class="h-2 flex-shrink-0"></div>
+          <div class="h-2 shrink-0"></div>
          <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
          {#each $otherVoiceRooms as h (h)}
            <SpaceMenuRoomItem {url} {h} />
@@ -298,11 +312,11 @@
          </SecondaryNavItem>
        {/if}
      {/if}
-      <div class="h-5 flex-shrink-0"></div>
+      <div class="h-5 shrink-0"></div>
    </div>
  </SecondaryNavSection>
  <div
-    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
+    class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
    <VoiceWidget />
    <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
      <SocketStatusIndicator {url} />
@@ -24,12 +24,13 @@
  const shouldNotifyForRoom = deriveShouldNotify(url, h)
  const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
  const notification = $derived($shouldNotifyForRoom ? $notifications.has(path) : false)
+  const roomName = $derived($room?.name || h)
 </script>

 {#if roomType === RoomType.Voice}
  <VoiceRoomItem {url} {h} {replaceState} {notification} />
 {:else}
-  <SecondaryNavItem href={path} {replaceState} {notification}>
+  <SecondaryNavItem href={path} title={roomName} {replaceState} {notification}>
    <RoomNameWithImage {url} {h} />
    {#if showDifferenceIcon}
      <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
@@ -130,76 +130,74 @@
  }
 </script>

-<div>
-  <button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={open}>
-    <Icon size={4} icon={Magnifier} />
-  </button>
-  {#if show}
-    <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={close}></button>
-    <div class="fixed cw top-0 right-0 z-feature p-2">
-      <div
-        class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
-        transition:fly={{y: -40, duration: 150}}>
-        <div class="flex justify-between">
-          <strong>Search</strong>
-          <Button onclick={clear}>
-            <Icon icon={CloseCircle} />
-          </Button>
-        </div>
-        <label class="input input-sm input-bordered flex w-full items-center gap-2">
-          <Icon size={4} icon={Magnifier} />
-          <input
-            bind:this={input}
-            bind:value={term}
-            class="min-w-0 grow"
-            type="text"
-            placeholder={h ? "Search this room..." : "Search this space..."}
-            oninput={onInput} />
-        </label>
-        <div class="max-h-[65vh] overflow-y-auto">
-          <p class="mb-2 text-xs opacity-70">{relayStatus}</p>
-          {#if !term}
-            <p class="text-sm opacity-70">
-              {h ? "Search for content in this room." : "Search for content in this space."}
-            </p>
-          {:else if loading}
-            <p class="text-sm opacity-70">Searching...</p>
-          {:else if eventsByAge.size === 0}
-            <p class="text-sm opacity-70">No results found.</p>
-          {:else}
-            <div class="col-2">
-              {#each eventsByAge as [key, events] (key)}
+<button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={open}>
+  <Icon size={4} icon={Magnifier} />
+</button>
+{#if show}
+  <button class="fixed inset-0 z-feature" aria-label="Close search" onclick={close}></button>
+  <div class="fixed top-sai right-sai left-content z-feature p-2">
+    <div
+      class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
+      transition:fly={{y: -40, duration: 150}}>
+      <div class="flex justify-between">
+        <strong>Search</strong>
+        <Button onclick={clear}>
+          <Icon icon={CloseCircle} />
+        </Button>
+      </div>
+      <label class="input input-sm input-bordered flex w-full items-center gap-2">
+        <Icon size={4} icon={Magnifier} />
+        <input
+          bind:this={input}
+          bind:value={term}
+          class="min-w-0 grow"
+          type="text"
+          placeholder={h ? "Search this room..." : "Search this space..."}
+          oninput={onInput} />
+      </label>
+      <div class="max-h-[65vh] overflow-y-auto">
+        <p class="mb-2 text-xs opacity-70">{relayStatus}</p>
+        {#if !term}
+          <p class="text-sm opacity-70">
+            {h ? "Search for content in this room." : "Search for content in this space."}
+          </p>
+        {:else if loading}
+          <p class="text-sm opacity-70">Searching...</p>
+        {:else if eventsByAge.size === 0}
+          <p class="text-sm opacity-70">No results found.</p>
+        {:else}
+          <div class="col-2">
+            {#each eventsByAge as [key, events] (key)}
+              <div class="col-2">
+                <p class="text-xs uppercase tracking-wide opacity-60">
+                  {#if key === "day"}
+                    Last 24 Hours
+                  {:else if key === "week"}
+                    Last 7 Days
+                  {:else}
+                    Older
+                  {/if}
+                </p>
                <div class="col-2">
-                  <p class="text-xs uppercase tracking-wide opacity-60">
-                    {#if key === "day"}
-                      Last 24 Hours
-                    {:else if key === "week"}
-                      Last 7 Days
-                    {:else}
-                      Older
-                    {/if}
-                  </p>
-                  <div class="col-2">
-                    {#each events as event (event.id)}
-                      <button
-                        class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
-                        onclick={() => onRoomSearchResultClick(event)}>
-                        <p class="line-clamp-2 text-sm">
-                          {event.content.trim() || "(No text content)"}
-                        </p>
-                        <div class="row-2 text-xs opacity-70">
-                          <span>{getAgeLabel(event.created_at)}</span>
-                          <span>{formatTimestampAsDate(event.created_at)}</span>
-                        </div>
-                      </button>
-                    {/each}
-                  </div>
+                  {#each events as event (event.id)}
+                    <button
+                      class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
+                      onclick={() => onRoomSearchResultClick(event)}>
+                      <p class="line-clamp-2 text-sm">
+                        {event.content.trim() || "(No text content)"}
+                      </p>
+                      <div class="row-2 text-xs opacity-70">
+                        <span>{getAgeLabel(event.created_at)}</span>
+                        <span>{formatTimestampAsDate(event.created_at)}</span>
+                      </div>
+                    </button>
+                  {/each}
                </div>
-              {/each}
-            </div>
-          {/if}
-        </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
      </div>
    </div>
-  {/if}
-</div>
+  </div>
+{/if}
@@ -30,7 +30,7 @@
    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>

-<div class="flex flex-grow flex-wrap justify-end gap-2">
+<div class="flex grow flex-wrap justify-end gap-2">
  {#if h && showRoom}
    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
      Posted in #<RoomName {h} {url} />
@@ -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"
@@ -18,15 +19,23 @@
  import {pushToast} from "@app/util/toast"
  import {PROTECTED} from "@app/core/state"
  import {makeEditor} from "@app/editor"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {DraftKey} from "@app/util/drafts"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
+
+  type Values = {
+    content?: string | object
+    title?: string
+  }

  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)

  const uploading = writable(false)
@@ -36,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({
@@ -57,25 +66,62 @@

    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}),
-    })
-
-    history.back()
  }

-  const editor = makeEditor({url, submit, uploading, placeholder: "What's on your mind?"})
+  let loading = $state(false)

-  let title: string = $state("")
+  let title = $state(initialValues?.title ?? "")
+  let content = $state(initialValues?.content ?? "")
+
+  const onChange = (json: object) => {
+    content = json
+  }
+
+  const editor = makeEditor({
+    url,
+    submit,
+    uploading,
+    onChange,
+    placeholder: "What's on your mind?",
+    content,
+  })
+
+  $effect(() => {
+    draftKey.update({title, content})
+  })
 </script>

 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -106,7 +152,7 @@
          <p>Message*</p>
        {/snippet}
        {#snippet input()}
-          <div class="note-editor flex-grow overflow-hidden">
+          <div class="note-editor grow overflow-hidden">
            <EditorContent {editor} />
          </div>
        {/snippet}
@@ -114,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}
@@ -124,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>
@@ -1,28 +1,98 @@
 <script lang="ts">
  import {parse, renderAsHtml} from "@welshman/content"
+  import Close from "@assets/icons/close.svg?dataurl"
  import {fly} from "@lib/transition"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import {toast, popToast} from "@app/util/toast"

+  let touchStartY = 0
+  let touchStartTime = 0
+  let dragY = $state(0)
+  let isSettling = $state(false)
+  let containerEl = $state<HTMLDivElement | undefined>(undefined)
+
+  $effect(() => {
+    if ($toast) {
+      dragY = 0
+      isSettling = false
+    }
+  })
+
+  $effect(() => {
+    if (!containerEl) return
+    containerEl.addEventListener("touchmove", onTouchMove, {passive: false})
+    return () => containerEl!.removeEventListener("touchmove", onTouchMove)
+  })
+
  const onActionClick = () => {
    $toast!.action!.onclick()
    popToast($toast!.id)
  }
+
+  const onClose = () => popToast($toast!.id)
+
+  const onTouchStart = (e: TouchEvent) => {
+    touchStartY = e.touches[0].clientY
+    touchStartTime = Date.now()
+    dragY = 0
+    isSettling = false
+  }
+
+  const onTouchMove = (e: TouchEvent) => {
+    const delta = e.touches[0].clientY - touchStartY
+    if (delta < 0) {
+      e.preventDefault()
+      isSettling = false
+      dragY = delta
+    } else {
+      dragY = 0
+    }
+  }
+
+  const onTouchEnd = (e: TouchEvent) => {
+    const delta = e.changedTouches[0].clientY - touchStartY
+    const duration = Date.now() - touchStartTime
+    const isQuickFlick = duration < 400 && delta < 0
+    const isSlowDismiss = delta < -40
+
+    if (isQuickFlick || isSlowDismiss) {
+      dragY = 0
+      popToast($toast!.id)
+    } else {
+      isSettling = true
+      dragY = 0
+      setTimeout(() => {
+        isSettling = false
+      }, 200)
+    }
+  }
 </script>

 {#if $toast}
  {@const theme = $toast.theme || "info"}
-  <div transition:fly class="bottom-sai right-sai toast z-toast">
+  <div
+    bind:this={containerEl}
+    transition:fly={{y: -20}}
+    class="fixed z-toast top-[calc(var(--sait)+0.5rem)] left-[calc(var(--sail)+0.5rem)] right-[calc(var(--sair)+0.5rem)] flex flex-col gap-2 md:right-4 md:bottom-4 md:top-auto md:left-auto md:w-80"
+    style={dragY !== 0 || isSettling
+      ? `transform: translateY(${dragY}px)${isSettling ? "; transition: transform 200ms ease-out" : ""}`
+      : ""}
+    ontouchstart={onTouchStart}
+    ontouchend={onTouchEnd}>
    {#key $toast.id}
      <div
        role="alert"
-        class="alert flex justify-center whitespace-normal text-left"
+        class="alert relative flex justify-center whitespace-normal text-left"
        class:bg-base-100={theme === "info"}
        class:text-base-content={theme === "info"}
        class:alert-error={theme === "error"}>
-        <p class:welshman-content-error={theme === "error"}>
+        <Button
+          class="absolute -top-2 -right-2 btn btn-circle btn-neutral btn-xs hidden md:inline-flex flex justify-center items-center"
+          onclick={onClose}>
+          <Icon icon={Close} size={4} />
+        </Button>
+        <p class="md:pr-6" class:welshman-content-error={theme === "error"}>
          {#if $toast.message}
            {@html renderAsHtml(parse({content: $toast.message}))}
            {#if $toast.action}
@@ -35,9 +105,6 @@
            <Component toast={$toast} {...props} />
          {/if}
        </p>
-        <Button class="flex items-center opacity-75" onclick={() => popToast($toast.id)}>
-          <Icon icon={CloseCircle} />
-        </Button>
      </div>
    {/key}
  </div>
@@ -6,73 +6,96 @@
  import Button from "@lib/components/Button.svelte"
  import Icon from "@lib/components/Icon.svelte"
  import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
+  import VideoCallTile from "@app/components/VideoCallTile.svelte"
  import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import {get} from "svelte/store"
  import {
-    currentVoiceSession,
-    currentVoiceRoom,
-    videoCallLayoutRevision,
-    videoPrimaryTileKey,
+    VideoCallLayout,
+    isDesktopLayout,
    toggleVideoPrimaryTile,
-    pubkeyFromLiveKitIdentity,
-  } from "@app/voice"
-
-  type Variant = "mobile" | "desktop-split" | "desktop-full"
+    videoCallLayout,
+    videoCallViewportSync,
+    ViewportSize,
+    videoPrimaryTileKey,
+  } from "@app/call/video"
+  import {currentVoiceSession, currentVoiceRoom, pubkeyFromLiveKitIdentity} from "@app/call/stores"

  type Props = {
-    variant: Variant
+    layout: VideoCallLayout
+    mobile?: boolean
    url: string
    h: string
-    visible?: boolean
    class?: string
  }

-  type Tile = {
+  type VideoTileData = {
    identity: string
    isLocal: boolean
    trackSid: string
-    attachable: Track | undefined
+    track: Track | undefined
    source: Track.Source.Camera | Track.Source.ScreenShare
  }

  type TileLayout = "spotlight" | "default" | "strip"

-  const {variant, url, h, visible = true, class: className = ""}: Props = $props()
+  const {layout, mobile = false, url, h, class: className = ""}: Props = $props()

-  const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
+  $effect(() => {
+    const currentLayout = isDesktopLayout.current ? ViewportSize.Desktop : ViewportSize.Mobile
+    const {previousLayout} = videoCallViewportSync
+    if (previousLayout === undefined) {
+      videoCallViewportSync.previousLayout = currentLayout
+      return
+    }
+    if (previousLayout === currentLayout) return
+    const p = get(videoCallLayout)
+    if (previousLayout === ViewportSize.Desktop && currentLayout === ViewportSize.Mobile) {
+      if (p === VideoCallLayout.Split) videoCallLayout.set(VideoCallLayout.Video)
+    } else if (previousLayout === ViewportSize.Mobile && currentLayout === ViewportSize.Desktop) {
+      if (p === VideoCallLayout.Chat) videoCallLayout.set(VideoCallLayout.Split)
+    }
+    videoCallViewportSync.previousLayout = currentLayout
+  })

-  const showPanel = $derived(visible && roomMatches)
+  const isViewingCurrentCallRoom = $derived(
+    $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+  )

-  const tiles = $derived.by(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
-    $videoCallLayoutRevision
+  const showVideoContent = $derived(
+    isViewingCurrentCallRoom &&
+      (mobile
+        ? layout === VideoCallLayout.Video
+        : layout === VideoCallLayout.Split || layout === VideoCallLayout.Video),
+  )
+
+  const videoTiles = $derived.by(() => {
    const session = $currentVoiceSession
    if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) {
      return []
    }

    const room = session.room
-    const out: Tile[] = []
-    const lp = room.localParticipant
+    const videoTiles: VideoTileData[] = []
+    const user = room.localParticipant

    if (session.cameraOn) {
-      const localPub = lp.getTrackPublication(Track.Source.Camera)
-      out.push({
-        identity: lp.identity,
+      const localPub = user.getTrackPublication(Track.Source.Camera)
+      videoTiles.push({
+        identity: user.identity,
        isLocal: true,
        trackSid: localPub?.trackSid ?? "local-camera",
-        attachable: localPub?.track,
+        track: localPub?.track,
        source: Track.Source.Camera,
      })
    }

    if (session.screenShareOn) {
-      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
-      out.push({
-        identity: lp.identity,
+      const localPub = user.getTrackPublication(Track.Source.ScreenShare)
+      videoTiles.push({
+        identity: user.identity,
        isLocal: true,
        trackSid: localPub?.trackSid ?? "local-screen",
-        attachable: localPub?.track,
+        track: localPub?.track,
        source: Track.Source.ScreenShare,
      })
    }
@@ -80,70 +103,70 @@
    for (const rp of room.remoteParticipants.values()) {
      const camPub = rp.getTrackPublication(Track.Source.Camera)
      if (camPub?.isSubscribed && camPub.track) {
-        out.push({
+        videoTiles.push({
          identity: rp.identity,
          isLocal: false,
          trackSid: camPub.trackSid,
-          attachable: camPub.track,
+          track: camPub.track,
          source: Track.Source.Camera,
        })
      }
      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
      if (screenPub?.isSubscribed && screenPub.track) {
-        out.push({
+        videoTiles.push({
          identity: rp.identity,
          isLocal: false,
          trackSid: screenPub.trackSid,
-          attachable: screenPub.track,
+          track: screenPub.track,
          source: Track.Source.ScreenShare,
        })
      }
    }

-    return out
+    return videoTiles
  })

  /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
-  const tileKey = (t: Tile) => `${t.identity}\x1f${t.source}`
+  const tileKey = (t: VideoTileData) => `${t.identity}\x1f${t.source}`

  const primaryTile = $derived.by(() => {
    const k = $videoPrimaryTileKey
    if (k === undefined) return undefined
-    return tiles.find(t => tileKey(t) === k)
+    return videoTiles.find(t => tileKey(t) === k)
  })

  const secondaryTiles = $derived.by(() => {
    const p = primaryTile
-    if (p === undefined) return tiles
+    if (p === undefined) return videoTiles
    const pk = tileKey(p)
-    return tiles.filter(t => tileKey(t) !== pk)
+    return videoTiles.filter(t => tileKey(t) !== pk)
  })

  const useSpotlightLayout = $derived(primaryTile !== undefined)
-  const useMultiGrid = $derived(!useSpotlightLayout && tiles.length > 2)
+  const useMultiGrid = $derived(!useSpotlightLayout && videoTiles.length > 2)

  $effect(() => {
    const k = $videoPrimaryTileKey
    if (k === undefined) return
-    if (!tiles.some(t => tileKey(t) === k)) {
+    if (!videoTiles.some(t => tileKey(t) === k)) {
      videoPrimaryTileKey.set(undefined)
    }
  })

  $effect(() => {
-    for (const t of tiles) {
+    for (const t of videoTiles) {
      const pk = pubkeyFromLiveKitIdentity(t.identity)
      if (pk) loadProfile(pk)
    }
  })

-  const labelFor = (identity: string, source: Tile["source"]) => {
+  const labelFor = (identity: string, source: VideoTileData["source"]) => {
    const pk = pubkeyFromLiveKitIdentity(identity)
    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
    return source === Track.Source.ScreenShare ? `${name} · screen` : name
  }

-  const showTileGrid = $derived(tiles.length > 0)
+  const showTileGrid = $derived(videoTiles.length > 0)

  const spotlightHandlerFor = (key: string) => () => {
    toggleVideoPrimaryTile(key)
@@ -151,18 +174,16 @@

  const panelChrome = $derived(
    cx(
-      variant === "mobile" &&
-        "cb top-[calc(var(--sait)+6rem)] cw z-compose bg-[var(--video-call-panel-bg)] fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 pb-2 pt-1 md:hidden",
-      variant === "desktop-split" &&
-        "cb ct cw-split-video z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
-      variant === "desktop-full" &&
-        "cb ct cw z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+      mobile &&
+        "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-base-200 px-2 pt-4 md:hidden pb-[calc(3.5rem+var(--saib))]",
+      !mobile &&
+        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
      className,
    ),
  )
 </script>

-{#snippet videoTile(tile: Tile, layout: TileLayout)}
+{#snippet videoTile(tile: VideoTileData, layout: TileLayout)}
  <div
    class={cx(
      "relative isolate overflow-hidden rounded-box shadow-sm",
@@ -171,9 +192,9 @@
      layout === "strip" && "aspect-video w-44 shrink-0",
      tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
    )}>
-    {#if tile.attachable}
-      <VideoCallVideo
-        track={tile.attachable}
+    {#if tile.track}
+      <VideoCallTile
+        track={tile.track}
        muted={tile.isLocal}
        fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
        class="pointer-events-none absolute inset-0" />
@@ -186,7 +207,7 @@
      class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
      {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
    </span>
-    {#if tiles.length > 1}
+    {#if videoTiles.length > 1}
      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
      <Button
        data-tip={pinned ? "Exit spotlight" : "Spotlight"}
@@ -219,13 +240,13 @@
    {:else if useMultiGrid}
      <div
        class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
-        {#each tiles as tile (tileKey(tile))}
+        {#each videoTiles as tile (tileKey(tile))}
          {@render videoTile(tile, "default")}
        {/each}
      </div>
    {:else}
      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-        {#each tiles as tile (tileKey(tile))}
+        {#each videoTiles as tile (tileKey(tile))}
          {@render videoTile(tile, "default")}
        {/each}
      </div>
@@ -239,14 +260,14 @@
  {/if}
 {/snippet}

-{#if showPanel}
+{#if showVideoContent}
  <div class={panelChrome}>
-    {#if variant === "mobile"}
+    {#if mobile}
      <div class="flex min-h-0 flex-1 flex-col gap-2">
        <div class="min-h-0 flex-1 overflow-hidden">
          {@render videoPanelBody()}
        </div>
-        <div class="shrink-0">
+        <div class="shrink-0 pb-2">
          <VoiceWidget />
        </div>
      </div>
@@ -11,21 +11,21 @@

  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()

-  let el = $state<HTMLVideoElement | undefined>()
+  let videoElement = $state<HTMLVideoElement | undefined>()

  $effect(() => {
-    const v = el
-    const t = track
-    if (!v) return
-    t.attach(v)
+    const element = videoElement
+    const activeTrack = track
+    if (!element) return
+    activeTrack.attach(element)
    return () => {
-      t.detach(v)
+      activeTrack.detach(element)
    }
  })
 </script>

 <video
-  bind:this={el}
+  bind:this={videoElement}
  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
  playsinline
  {muted}></video>
@@ -7,13 +7,8 @@
  import ModalHeader from "@lib/components/ModalHeader.svelte"
  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import {
-    currentVoiceSession,
-    DeviceKind,
-    supportsAudioOutputSelection,
-    switchVoiceActiveDevice,
-    type VoiceSession,
-  } from "@app/voice"
+  import {currentVoiceSession, type VoiceSession} from "@app/call/stores"
+  import {DeviceKind, supportsAudioOutputSelection, switchVoiceActiveDevice} from "@app/call/voice"
  import {popModal} from "@app/util/modal"

  const selectValueForActiveDevice = (session: VoiceSession, kind: DeviceKind): string => {
@@ -46,16 +41,9 @@
  }

  $effect(() => {
-    void loadDevices()
-    const md = navigator.mediaDevices
-    if (!md?.addEventListener) return
-    const onDeviceChange = () => {
-      void loadDevices()
-    }
-    md.addEventListener("devicechange", onDeviceChange)
-    return () => {
-      md.removeEventListener("devicechange", onDeviceChange)
-    }
+    loadDevices()
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
  })

  $effect(() => {
@@ -12,14 +12,13 @@
  import {makeRoomId} from "@app/core/state"
  import {
    VoiceState,
-    deriveVoiceParticipants,
-    cancelJoinVoiceRoom,
    currentVoiceRoom,
-    voiceState,
    isParticipantSpeaking,
    participantKey,
+    voiceState,
    type VoiceParticipant,
-  } from "@app/voice"
+  } from "@app/call/stores"
+  import {cancelJoinVoiceRoom, deriveVoiceParticipants} from "@app/call/voice"

  interface Props {
    url: string
@@ -64,7 +63,7 @@
  {replaceState}
  {notification}
  onclick={handleClick}
-  class={cx("!items-start", isActive && "!bg-base-100 !text-base-content")}>
+  class={cx("items-start!", isActive && "bg-base-100! text-base-content!")}>
  <div class="flex w-full min-w-0 flex-col gap-2">
    <div class="flex gap-2 items-center">
      {#if isJoining}
@@ -14,7 +14,7 @@
  import ModalTitle from "@lib/components/ModalTitle.svelte"
  import {AbortError, TimeoutError} from "$lib/util"
  import {displayRoom} from "@app/core/state"
-  import {joinVoiceRoom} from "@app/voice"
+  import {joinVoiceRoom} from "@app/call/voice"
  import {popModal} from "@app/util/modal"
  import {pushToast} from "@app/util/toast"

@@ -1,7 +1,6 @@
 <script lang="ts">
  import {readable} from "svelte/store"
  import {fade, fly} from "svelte/transition"
-  import {browser} from "$app/environment"
  import {goto} from "$app/navigation"
  import {page} from "$app/stores"
  import cx from "classnames"
@@ -15,6 +14,7 @@
  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
  import Settings from "@assets/icons/settings.svg?dataurl"
+  import {Capacitor} from "@capacitor/core"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
@@ -30,20 +30,21 @@
  import {pushModal} from "@app/util/modal"
  import {notifications} from "@app/util/notifications"
  import {makeRoomPath} from "@app/util/routes"
+  import {
+    VideoCallLayout,
+    isDesktopLayout,
+    toggleCamera,
+    toggleScreenShare,
+    videoCallLayout,
+  } from "@app/call/video"
  import {
    VoiceState,
    currentVoiceSession,
    currentVoiceRoom,
    voiceState,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
    isLocalSpeaking,
-    leaveVoiceRoom,
-    toggleMute,
-    toggleCamera,
-    toggleScreenShare,
-    cancelJoinVoiceRoom,
-  } from "@app/voice"
+  } from "@app/call/stores"
+  import {cancelJoinVoiceRoom, leaveVoiceRoom, toggleMute} from "@app/call/voice"

  const {relay, h} = $derived($page.params)
  const url = $derived(relay ? decodeRelay(relay) : undefined)
@@ -52,6 +53,14 @@
  )
  const routeDisplayedRoom = $derived($displayedRoomStore)

+  const isViewingCurrentVoiceRoom = $derived(
+    $currentVoiceRoom !== undefined &&
+      url !== undefined &&
+      typeof h === "string" &&
+      $currentVoiceRoom.url === url &&
+      $currentVoiceRoom.h === h,
+  )
+
  const targetRoom = $derived.by((): Room | undefined => {
    if ($voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected) {
      return $currentVoiceRoom
@@ -89,42 +98,25 @@
    pushModal(VoiceCallAudioSettingsDialog)
  }

-  let isMd = $state(
-    typeof window !== "undefined" && window.matchMedia("(min-width: 768px)").matches,
+  const showChatButton = $derived($voiceState === VoiceState.Connected && isViewingCurrentVoiceRoom)
+
+  const isChatPanelActive = $derived(
+    showChatButton &&
+      (isDesktopLayout.current
+        ? $videoCallLayout === VideoCallLayout.Split
+        : $videoCallLayout === VideoCallLayout.Chat),
  )

-  $effect(() => {
-    if (!browser) return
-    const mq = window.matchMedia("(min-width: 768px)")
-    const sync = () => {
-      isMd = mq.matches
-    }
-    sync()
-    mq.addEventListener("change", sync)
-    return () => mq.removeEventListener("change", sync)
-  })
-
-  const showVoiceLayoutToggle = $derived(
-    $voiceState === VoiceState.Connected &&
-      targetRoom !== undefined &&
-      getRoomType(targetRoom) === RoomType.Voice &&
-      typeof h === "string" &&
-      relay !== undefined &&
-      decodeRelay(relay) === targetRoom.url &&
-      h === targetRoom.h,
-  )
-
-  const layoutToggleActive = $derived(
-    showVoiceLayoutToggle &&
-      ((!isMd && $voiceMobileRoomPanel === "chat") || (isMd && $voiceDesktopRoomPanel === "split")),
-  )
-
-  const onLayoutToggle = () => {
-    if (!showVoiceLayoutToggle) return
-    if (isMd) {
-      voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split"))
+  const onChatToggle = () => {
+    if (!showChatButton) return
+    if (isDesktopLayout.current) {
+      videoCallLayout.update(p =>
+        p === VideoCallLayout.Split ? VideoCallLayout.Video : VideoCallLayout.Split,
+      )
    } else {
-      voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
+      videoCallLayout.update(p =>
+        p === VideoCallLayout.Video ? VideoCallLayout.Chat : VideoCallLayout.Video,
+      )
    }
  }

@@ -135,17 +127,6 @@
  const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>

-{#snippet mutedSlash(show: boolean)}
-  {#if show}
-    <span
-      class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
-      aria-hidden="true">
-      <span class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
-      ></span>
-    </span>
-  {/if}
-{/snippet}
-
 {#if targetRoom}
  <div
    in:fly={{y: 60, duration: 350}}
@@ -170,15 +151,15 @@
          </span>
        </div>
      </button>
-      {#if showVoiceLayoutToggle}
+      {#if showChatButton}
        <Button
          data-tip="Toggle Chat"
          class={cx(
            mediaToggleClass,
            "relative shrink-0 overflow-visible",
-            layoutToggleActive && "text-primary",
+            isChatPanelActive && "text-primary",
          )}
-          onclick={onLayoutToggle}>
+          onclick={onChatToggle}>
          <span class="relative inline-flex">
            <Icon icon={ChatRound} size={4} />
            {#if chatUnread}
@@ -213,7 +194,15 @@
          onclick={toggleMute}>
          <span class="relative inline-flex items-center justify-center overflow-visible">
            <Icon icon={Microphone} size={4} />
-            {@render mutedSlash($currentVoiceSession.muted)}
+            {#if $currentVoiceSession.muted}
+              <span
+                class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
+                aria-hidden="true">
+                <span
+                  class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
+                ></span>
+              </span>
+            {/if}
          </span>
        </Button>
        <Button
@@ -222,12 +211,14 @@
          onclick={toggleCamera}>
          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
        </Button>
-        <Button
-          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
-          class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
-          onclick={toggleScreenShare}>
-          <Icon icon={Monitor} size={4} />
-        </Button>
+        {#if !Capacitor.isNativePlatform()}
+          <Button
+            data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+            class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
+            onclick={toggleScreenShare}>
+            <Icon icon={Monitor} size={4} />
+          </Button>
+        {/if}
        <Button
          data-tip="Call settings"
          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
@@ -70,7 +70,7 @@
            Amount (satoshis)
          {/snippet}
          {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
              <label class="input input-bordered flex items-center gap-2">
                <Icon icon={Bolt} />
                <input
@@ -80,7 +80,7 @@
            Amount (satoshis)
          {/snippet}
          {#snippet input()}
-            <div class="flex flex-grow justify-end">
+            <div class="flex grow justify-end">
              <label class="input input-bordered flex items-center gap-2">
                <Icon icon={Bolt} />
                <input bind:value={sats} type="number" class="w-14" placeholder="0" />
@@ -1,7 +1,7 @@
 <style>
  .wot-background {
    fill: transparent;
-    stroke: var(--base-content);
+    stroke: var(--color-base-content);
    opacity: 30%;
  }

@@ -32,7 +32,7 @@
  const normalizedScore = $derived(clamp([0, max], $score) / max)
  const dashOffset = $derived(100 - 44 * normalizedScore)
  const style = $derived(`transform: rotate(${135 - normalizedScore * 180}deg)`)
-  const stroke = $derived(active ? "var(--primary)" : "var(--base-content)")
+  const stroke = $derived(active ? "var(--color-primary)" : "var(--color-base-content)")
 </script>

 <div class="relative h-[14px] w-[14px]">
@@ -118,26 +118,26 @@
  <ModalBody>
    <ModalHeader>
      <ModalTitle>Send a Zap</ModalTitle>
-      <ModalSubtitle>To <ProfileLink {pubkey} class="!text-primary" /></ModalSubtitle>
+      <ModalSubtitle>To <ProfileLink {pubkey} class="text-primary!" /></ModalSubtitle>
    </ModalHeader>
-    <FieldInline class="!grid-cols-3">
+    <FieldInline class="grid-cols-3!">
      {#snippet label()}
        Emoji Reaction
      {/snippet}
      {#snippet input()}
-        <div class="flex flex-grow items-center justify-end gap-4">
+        <div class="flex grow items-center justify-end gap-4">
          <EmojiButton {onEmoji} class="btn btn-neutral">
            {content}
          </EmojiButton>
        </div>
      {/snippet}
    </FieldInline>
-    <FieldInline class="!grid-cols-3">
+    <FieldInline class="grid-cols-3!">
      {#snippet label()}
        Amount
      {/snippet}
      {#snippet input()}
-        <div class="flex flex-grow justify-end">
+        <div class="flex grow justify-end">
          <label class="input input-bordered flex items-center gap-2">
            <Icon icon={Bolt} />
            <input bind:value={amount} type="number" class="w-24" />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jon Staab	61e93d4071	Update changelog, bump version Docker / build-and-push-image (push) Successful in 19m16s Details	2026-04-16 11:40:24 -07:00
Jon Staab	1e4a4e43dc	remove dead virtualization code	2026-04-16 11:39:11 -07:00
Jon Staab	e1a7b051bd	Use welshman kinds	2026-04-16 11:34:59 -07:00
sakshamjain	7a7af58f5c	feat: add native share support for space invites	2026-04-16 10:16:12 -07:00
Jon Staab	016ae86d50	Stop sending duplicate requests per room	2026-04-16 10:03:01 -07:00
Jon Staab	2bff060a5e	Add thumbnail url	2026-04-16 10:03:01 -07:00
userAdityaa	68231504d0	fix: modal close button stacking above emoji picker on mobile (#211 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-16 15:38:25 +00:00
DeveshSingh	0658a8ee44	bug: fixed calender modal stacking issue (#209 ) Co-authored-by: deveshanim3 <deveshsingh6986@gmail.com> Co-committed-by: deveshanim3 <deveshsingh6986@gmail.com>	2026-04-16 14:55:37 +00:00
priyanshu_bharti	43fb3d35e6	Fix #202 slow-network invite timeout handling (#207 ) Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>	2026-04-15 22:01:00 +00:00
Khushvendra	4cc1cc95ca	Fix voice call cold-start timeout and preserve custom timeout message (#174 ) (#203 ) Co-authored-by: 1amKhush <khushvendras99@gmail.com> Co-committed-by: 1amKhush <khushvendras99@gmail.com>	2026-04-15 20:37:03 +00:00
Prat_09	964ef441ec	Update relay description (#195 ) (#197 ) Co-authored-by: Pratyush Mohanty <prat_09@noreply.coracle.social> Co-committed-by: Pratyush Mohanty <prat_09@noreply.coracle.social>	2026-04-14 15:09:46 +00:00
priyanshu_bharti	796f37d320	Make space reordering discoverable with smoother drag animation (#171 ) Co-authored-by: Priyanshu Bharti <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshu Bharti <bhartipriyanshustm@gmail.com>	2026-04-13 22:38:02 +00:00
nayan9617	b46fd94578	Use relay-provided member lists as source of truth (#191 ) Co-authored-by: Nayan Patidar <nayan9617@noreply.coracle.social> Co-committed-by: Nayan Patidar <nayan9617@noreply.coracle.social>	2026-04-13 21:12:49 +00:00
Jon Staab	bdc8e75640	Fix search input width	2026-04-13 12:08:11 -07:00
Jon Staab	ef08821796	remove VirtualItem	2026-04-13 10:35:26 -07:00
Jon Staab	9f386f6968	remove redundant room syncing logic	2026-04-11 10:20:50 -07:00
Khushvendra	ec0b6a99e2	add room mentions and clickable room/relay refs	2026-04-11 10:13:23 -07:00
Khushvendra	f6d9e52c6e	fix: support native clipboard image paste on mobile (#181 ) Co-authored-by: Khushvendra <khushvendras99@gmail.com> Co-committed-by: Khushvendra <khushvendras99@gmail.com>	2026-04-11 16:38:06 +00:00
Jon Staab	90f86b833d	Handle quotes in RoomItem. Fixes #188	2026-04-10 15:27:36 -07:00
userAdityaa	29bb33c26c	publish kind 9 quote after room content creation for cross-client interoperability	2026-04-10 14:20:24 -07:00
Jon Staab	c740bd21d4	Fix space page layout on Android by adding visible prop to SecondaryNav	2026-04-10 13:26:14 -07:00
Jon Staab	1d92709c76	perf: task-fix-list-virtualization changes	2026-04-10 12:44:01 -07:00
Jon Staab	a42e1df1a7	Fix feed pagination logic	2026-04-10 12:40:28 -07:00
Jon Staab	e33beee17d	perf: task-fix-raf-derived-to-effect changes	2026-04-10 12:30:25 -07:00
Jon Staab	b10ea04cb3	Fix Android push fallback: show all notifications, retry on failure	2026-04-10 12:23:32 -07:00
priyanshu_bharti	e8c94177ca	Support Aegis URL scheme for NIP-46 login (#161 ) Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>	2026-04-10 19:04:34 +00:00
Jon Staab	f1f2083c88	Remove unnecessary snapshots, format	2026-04-10 11:09:26 -07:00
Jon Staab	f42889c3c2	Improve performance #182 : increase profile timer and chat search throttle delays reduce GC pressure in derived stores use requestIdleCallback for non-critical storage writes batch repository update processing in feeds	2026-04-10 10:39:38 -07:00
Jon Staab	a75e1f96eb	Add .claude to gitignore	2026-04-10 10:14:01 -07:00
priyanshu_bharti	85c5293082	Raise message size limit in chat (#186 ) Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>	2026-04-10 16:37:23 +00:00
Jon Staab	37efa6a62c	Bump pomade	2026-04-10 09:24:22 -07:00
userAdityaa	1d5f91fb6c	fix: realtime updates for room members and admins (#178 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-09 21:05:30 +00:00
userAdityaa	ef18655776	make close button / backdrop work on direct invite link page (#177 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-09 20:03:08 +00:00
sakshamjain	b786e858d9	correct inverted arrow icon in advanced section toggle (#180 ) Co-authored-by: Saksham Jain <reach2saksham2004@gmail.com> Co-committed-by: Saksham Jain <reach2saksham2004@gmail.com>	2026-04-09 19:57:15 +00:00
mplorentz	f4ebc4e99e	Video in calls (#135 ) #135 This PR adds basic video functionality to our voice rooms. Again I followed the Discord UX for inspiration, so all video calls start as voice-only calls that gracefully upgrade (and downgrade) when someone turns on a video or starts screen sharing. When a video feed is detected the Room page will change to display a grid of feeds. The grid logic is very basic, that's definitely an area to improve in the future. You can open the chat part of the room with a new button on the VoiceWidget - on the desktop layout this creates a split view with video on the left and chat on the right, but on mobile it switches to chat fullscreen. I also added a little pin icon you can use to focus on a single video feed (useful for screen sharing). There is a lot of tailwind I don't understand here, but it seems to work well enough. I moved voice.ts into a new `call` folder and moved some of its stores into `call/stores.ts` which allowed me to keep most of the video logic in `call/video.ts`. It's not a perfect encapsulation as voice.ts does subscribe to some of the hooks for the livekit calls and passes some of the signals onto `video.ts`. This could probably be broken up better but for this PR I'd rather not focus on making it perfect if that's ok. Partly for the sake of time but also because I envision another PR that renames/reorganizes things and I think a larger UX evaluation is necessary and should include real user feedback. I'm not confident tha""t the Voice Room concept as a whole will stick going forward. Maybe all rooms in a livekit enabled server should be able to host a call (like a slack huddle), maybe users want to be able to schedule calls as events, or even have them start with an ad-hoc set of participants completely outside of a NIP-29 group, etc. Co-authored-by: mplorentz <mplorentz@noreply.gitea.coracle.social> Reviewed-on: #135 Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social> Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>	2026-04-08 17:10:20 +00:00
Jon Staab	65ca8a7fd8	Remove follow graph building	2026-04-08 09:46:56 -07:00
nayan9617	7f1e98dcb2	Fix fallback pull race after abort (#167 ) Co-authored-by: nayan9617 <nayanp4925@gmail.com> Co-committed-by: nayan9617 <nayanp4925@gmail.com>	2026-04-08 16:43:04 +00:00
priyanshu_bharti	4c19ee823b	73-video-thumbnails (#142 ) This PR implements video thumbnails for `.mov`, `.webm`, and `.mp4` files in the `ContentLinkBlock` component. Changes: - Added the `poster` attribute to the `<video>` tag. - Set the poster source to `{url}#t=1` to capture a clear preview frame at the 1-second mark. - Verified locally that thumbnails are now correctly displayed instead of a black/empty box. Closes #73 Reviewed-on: #142 Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>	2026-04-08 16:07:11 +00:00
Jon Staab	8e2dd8b278	Upgrade daisyui/tailwind	2026-04-07 15:31:35 -07:00
Jon Staab	8d35b3aad2	Chat tweaks	2026-04-07 10:40:45 -07:00
Prat_09	613cad31c0	add start chat FAB (#152 ) Co-authored-by: Pratyush Mohanty <prat_09@noreply.coracle.social> Co-committed-by: Pratyush Mohanty <prat_09@noreply.coracle.social>	2026-04-07 17:02:40 +00:00
Jon Staab	3779a90f26	Tweak to chat item menu buttons	2026-04-07 09:51:25 -07:00
theAnuragMishra	7470f28f31	fix spacing around messages (#159 ) Co-authored-by: theAnuragMishra <theanuragmishra@noreply.coracle.social> Co-committed-by: theAnuragMishra <theanuragmishra@noreply.coracle.social>	2026-04-07 16:50:53 +00:00
hodlbod	17fb4e780b	Clean up drafts implementation (#164 )	2026-04-07 13:06:29 +00:00
userAdityaa	30c2a6ef79	persist drafts in memory (#155 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-07 12:06:29 +00:00
Jon Staab	0547e9513f	Small css tweak	2026-04-06 09:21:59 -07:00
nayan9617	70e5172f1b	fix/tooltip-clipping (#156 ) Co-authored-by: nayan9617 <nayanp4925@gmail.com> Co-committed-by: nayan9617 <nayanp4925@gmail.com>	2026-04-06 16:14:08 +00:00
Jon Staab	61c568a112	Formatting	2026-04-06 09:09:01 -07:00
Jon Staab	ae2ba6f44d	Tweak toast close button	2026-04-06 09:08:26 -07:00
Jon Staab	f84006fbe4	Tweak button on profile page	2026-04-06 09:08:26 -07:00
priyanshu_bharti	fed34a2747	show space name on hover in primary nav (#129 ) (#136 ) Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com> Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>	2026-04-06 16:08:02 +00:00
userAdityaa	80df16f97b	feat: redesign toast notifications for UX (#148 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-04 16:45:49 +00:00
junaiddshaukat	18cb245599	Remove room/space leave indications (#149 ) Co-authored-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social> Co-committed-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social>	2026-04-04 16:28:11 +00:00
Jon Staab	fd6cc84be6	Simplify chat compose layout	2026-04-04 09:02:52 -07:00
Jon Staab	9311cab3b2	Move away from fixed positioned page elements because they act squirrely on android	2026-04-03 17:16:47 -07:00
userAdityaa	fceccf47be	fix(ui): hide report badge for non-admin users (#147 ) Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com> Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>	2026-04-03 23:54:20 +00:00
Jon Staab	fe20fbfd28	Add polls	2026-04-03 10:56:00 -07:00
junaiddshaukat	4f3a2a1660	Add space search to recent activity page (#59 ) (#119 ) Co-authored-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social> Co-committed-by: junaiddshaukat <junaiddshaukat@noreply.coracle.social>	2026-04-03 16:58:35 +00:00