Bump version

After using the voice rooms more since we removed the option for voice-only rooms I think you were right to suggest a dialog box before joining rooms. It felt far to clunky to have to join the voice call any time you just wanted to try to view room members, edit room settings, or just view the recent text chat.

This adds a dialog that allows the user to decline to join the call but still access the text part of the room along with associated settings and controls. It also acts as another confirmation step before turning on the user's microphone, and allows them to choose an audio input so they don't have to mess with the (generally terrible) browser controls for doing so. We should probably have controls to change your audio input and output from within the call as well, but I think this is enough for an MVP.

![Screenshot 2026-03-27 at 11.10.53 AM.png](/attachments/3ac271a6-5d17-4063-9ac6-3e5bdef10ccf)

Co-authored-by: mplorentz <mplorentz@noreply.gitea.coracle.social>
Reviewed-on: coracle/flotilla#109
Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

.env.template

@@ -1,6 +1,6 @@
 VITE_DEFAULT_PUBKEYS=06639a386c9c1014217622ccbcf40908c4f1a0c33e23f8d6d68f4abf655f8f71,266815e0c9210dfa324c6cba3573b14bee49da4209a9456f9484e5106cd408a5,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,55f04590674f3648f4cdc9dc8ce32da2a282074cd0b020596ee033d12d385185,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9,6389be6491e7b693e9f368ece88fcd145f07c068d2c1bbae4247b9b5ef439d32,63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed,6e75f7972397ca3295e0f4ca0fbc6eb9cc79be85bafdd56bd378220ca8eee74e,76c71aae3a491f1d9eec47cba17e229cda4113a0bbb6e6ae1776d7643e29cafa,7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3
 VITE_DEFAULT_BLOSSOM_SERVERS=https://blossom.primal.net/
-VITE_POMADE_SIGNERS=
+VITE_POMADE_SIGNERS=https://pomade.coracle.social,https://pomade.fiatjaf.com,https://pomade.nostrver.se,https://pomade.scuttle.works
 VITE_PLATFORM_URL=https://app.flotilla.social
 VITE_PLATFORM_TERMS=https://flotilla.social/terms
 VITE_PLATFORM_PRIVACY=https://flotilla.social/privacy
@@ -15,7 +15,8 @@ VITE_PUSH_BRIDGE=wss://npb.coracle.social/
 VITE_BLOCKED_RELAYS=brb.io,relay.nostr.band,nostr.mutinywallet.com,feeds.nostr.band,nostr.zbd.gg,wot.utxo.one,blastr.f7z.xyz,relay.current.fyi
 VITE_INDEXER_RELAYS=purplepag.es,relay.damus.io,indexer.coracle.social
 VITE_DEFAULT_RELAYS=relay.damus.io,relay.primal.net,nostr.mom
-VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com
+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_GLITCHTIP_API_KEY=

.gitea/workflows/docker-publish.yml

@@ -6,7 +6,7 @@ on:
 
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
+  IMAGE_NAME: coracle-social/flotilla
 
 jobs:
   build-and-push-image:

.gitignore

@@ -1,5 +1,6 @@
 # Env
 .env
+.env.local
 
 # Vite
 vite.config.js.timestamp-*
@@ -24,6 +25,7 @@ android/app/src/main/assets/public/
 
 # Web/JavaScript
 node_modules/
+.pnpm-store/
 build/
 .svelte-kit/
 

AGENTS.md

@@ -169,6 +169,7 @@ src/
 - When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
 - Do not define svelte event handlers inline, instead name them and put them in the script section of templates
 - Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
+- Instead of `getTag(tagName, event.tags)?.[1] || ""`, use `getTagValue(tagName, event.tags)`
 
 **Human-First Simplicity (Jon Staab Style):**
 

CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+# 1.7.1
+
+* Fix pomade registration fallback in case of offline signer
+
+# 1.7.0
+
+* Enable email/password login
+* Add up/edit to direct messages
+* Fix a number of UI bugs
+* Improve navigation on mobile
+* Improve performance and syncing reliability
+* Add proof of work to DMs
+* Detect blossom support using supported_nips
+* Improve notification badges
+* Add voice rooms (@mplorentz)
+* Re-design relay onboarding and settings
+* Add android fallback for push notifications
+* Fix file uploads on android
+
+# 1.6.5
+
+* Attempt to fix permission grant for notifications
+* Make sync logic more robust
+* Add unban/unallow support
+* Improve support for downloading/opening protected images
+* Add manual send/receive to wallet
+* Show wallet status when wallet is unreachable
+* Update nostr signer capacitor plugin
+* Fix some safe area insets
+* Update NIP 55 signer plugin (fixes Primal login)
+* Refine space join dialogs and discover page
+* Reopen the last DM that was open when navigating back to chat
+* Get rid of ChatEnable interstitial
+* Enable auth for relays we're publishing to
+* Drag and drop space icons
+* Add better muting support
+* Add back button to settings menu
+* Add page titles
+* Improve scroll to event behavior
+* Add in-memory search to rooms
+* Fix editing messages with html tags
+* Fix DM media detection
+* Clean up reporting dialogs
+* Improve room detail
+
 # 1.6.4
 
 * Clean up modal design

Dockerfile

@@ -4,6 +4,8 @@
 
 FROM node:20-bookworm AS builder
 
+RUN apt-get update && apt-get install -y --no-install-recommends curl
+
 RUN npm install -g pnpm@latest
 
 WORKDIR /app
@@ -20,7 +22,6 @@ ENV VITE_BUILD_HASH=${VITE_BUILD_HASH}
 ENV NODE_OPTIONS=--max_old_space_size=16384
 RUN pnpm run build
 
-# Stage 2: Runtime
 FROM node:20-alpine
 
 WORKDIR /app
@@ -28,4 +29,4 @@ WORKDIR /app
 # Copy only the built output - no source, no .env, no dev deps
 COPY --from=builder /app/build ./build
 
-CMD ["npx", "serve", "build"]
+CMD ["npx", "serve", "-s", "build"]

README.md

@@ -6,7 +6,7 @@ If you would like to be interoperable with Flotilla, please check out this guide
 
 ## Environment
 
-You can also optionally create an `.env` file and populate it with the following environment variables (see `.env` for examples):
+You can also optionally create an `.env.local` file and populate it with the following environment variables (see `.env.template` for examples):
 
 - `VITE_DEFAULT_PUBKEYS` - A comma-separated list of hex pubkeys for bootstrapping web of trust
 - `VITE_PLATFORM_URL` - The url where the app will be hosted
@@ -29,7 +29,7 @@ To run your own Flotilla, it's as simple as:
 ```sh
 pnpm install
 pnpm run build
-npx serve build
+npx serve -s build
 ```
 
 Or, if you prefer to use a container:

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
 
 android {
     namespace = "social.flotilla"
@@ -7,8 +8,8 @@ android {
         applicationId "social.flotilla"
         minSdk rootProject.ext.minSdkVersion
         targetSdk rootProject.ext.targetSdkVersion
-        versionCode 40
+        versionCode 43
-        versionName "1.6.4"
+        versionName "1.7.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -35,6 +36,10 @@ dependencies {
     implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
     implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
     implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation "androidx.work:work-runtime:2.10.3"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    implementation "com.squareup.okhttp3:okhttp:4.12.0"
+    implementation "fr.acinq.secp256k1:secp256k1-kmp-jni-android:0.22.0"
     implementation project(':capacitor-android')
     testImplementation "junit:junit:$junitVersion"
     androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"

android/app/capacitor.build.gradle

@@ -9,6 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':aparajita-capacitor-secure-storage')
     implementation project(':capacitor-community-safe-area')
     implementation project(':capacitor-app')
     implementation project(':capacitor-filesystem')

android/app/src/main/AndroidManifest.xml

@@ -42,4 +42,6 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <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" />
 </manifest>

android/app/src/main/java/social/flotilla/MainActivity.java

@@ -1,5 +1,15 @@
 package social.flotilla;
 
+import android.os.Bundle;
+
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+import social.flotilla.notifications.AndroidPushFallbackPlugin;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    registerPlugin(AndroidPushFallbackPlugin.class);
+    super.onCreate(savedInstanceState);
+  }
+}

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

@@ -0,0 +1,99 @@
+package social.flotilla.notifications
+
+import android.content.Context
+import android.content.SharedPreferences
+import androidx.work.Constraints
+import androidx.work.ExistingPeriodicWorkPolicy
+import androidx.work.ExistingWorkPolicy
+import androidx.work.NetworkType
+import androidx.work.OneTimeWorkRequest
+import androidx.work.PeriodicWorkRequest
+import androidx.work.WorkManager
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import org.json.JSONArray
+import org.json.JSONException
+import org.json.JSONObject
+import java.util.concurrent.TimeUnit
+
+@CapacitorPlugin(name = "AndroidPushFallback")
+class AndroidPushFallbackPlugin : Plugin() {
+  companion object {
+    const val PREFS_NAME = "CapacitorStorage"
+    const val KEY_STATE = "androidPushFallback.state"
+    const val UNIQUE_PERIODIC_WORK = "androidPushFallback.periodic"
+    const val UNIQUE_IMMEDIATE_WORK = "androidPushFallback.immediate"
+  }
+
+  private fun getPrefs(): SharedPreferences {
+    return context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE)
+  }
+
+  @PluginMethod
+  fun syncState(call: PluginCall) {
+    val state: JSObject? = call.getObject("state")
+
+    if (state != null) {
+      getPrefs().edit().putString(KEY_STATE, state.toString()).apply()
+
+      if (isEnabled(state.toString())) {
+        scheduleWork()
+      } else {
+        cancelWork()
+      }
+    }
+
+    call.resolve()
+  }
+
+  private fun isEnabled(rawState: String?): Boolean {
+    if (rawState == null || rawState.isEmpty()) {
+      return false
+    }
+
+    return try {
+      val state = JSONObject(rawState)
+      val subscriptions: JSONArray? = state.optJSONArray("subscriptions")
+      subscriptions != null && subscriptions.length() > 0
+    } catch (_: JSONException) {
+      false
+    }
+  }
+
+  private fun scheduleWork() {
+    val constraints = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build()
+
+    val workManager = WorkManager.getInstance(context)
+
+    val periodic = PeriodicWorkRequest.Builder(
+      AndroidPushFallbackWorker::class.java,
+      15,
+      TimeUnit.MINUTES,
+    ).setConstraints(constraints).build()
+
+    val immediate = OneTimeWorkRequest.Builder(AndroidPushFallbackWorker::class.java)
+      .setConstraints(constraints)
+      .build()
+
+    workManager.enqueueUniquePeriodicWork(
+      UNIQUE_PERIODIC_WORK,
+      ExistingPeriodicWorkPolicy.UPDATE,
+      periodic,
+    )
+
+    workManager.enqueueUniqueWork(
+      UNIQUE_IMMEDIATE_WORK,
+      ExistingWorkPolicy.REPLACE,
+      immediate,
+    )
+  }
+
+  private fun cancelWork() {
+    val workManager = WorkManager.getInstance(context)
+    workManager.cancelUniqueWork(UNIQUE_IMMEDIATE_WORK)
+    workManager.cancelUniqueWork(UNIQUE_PERIODIC_WORK)
+  }
+}

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

@@ -0,0 +1,862 @@
+package social.flotilla.notifications
+
+import android.Manifest
+import android.app.NotificationChannel
+import android.app.NotificationManager
+import android.util.Log
+import android.app.PendingIntent
+import android.content.Context
+import android.content.Intent
+import android.app.ActivityManager
+import android.content.SharedPreferences
+import android.content.pm.PackageManager
+import android.database.Cursor
+import android.net.Uri
+import android.os.Build
+import androidx.core.app.NotificationCompat
+import androidx.core.app.NotificationManagerCompat
+import androidx.core.content.ContextCompat
+import androidx.work.Worker
+import androidx.work.WorkerParameters
+import fr.acinq.secp256k1.Secp256k1
+import okhttp3.OkHttpClient
+import okhttp3.Request
+import okhttp3.Response
+import okhttp3.WebSocket
+import okhttp3.WebSocketListener
+import org.json.JSONArray
+import org.json.JSONObject
+import social.flotilla.notifications.AndroidPushFallbackPlugin.Companion.KEY_STATE
+import social.flotilla.notifications.AndroidPushFallbackPlugin.Companion.PREFS_NAME
+import java.nio.charset.StandardCharsets
+import java.security.MessageDigest
+import java.security.SecureRandom
+import java.util.Arrays
+import java.util.UUID
+import java.util.concurrent.ConcurrentHashMap
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.TimeUnit
+import android.util.Base64
+
+class AndroidPushFallbackWorker(context: Context, params: WorkerParameters) : Worker(context, params) {
+  companion object {
+    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 REJECTED = "__REJECTED__"
+    private const val KIND_RELAY_AUTH = 22242
+    private const val KIND_NIP46_RPC = 24133
+    private val SECP = Secp256k1.get()
+  }
+
+  private val prefs: SharedPreferences =
+    context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE)
+  private val client: OkHttpClient = OkHttpClient.Builder().build()
+
+  // ---- Socket pool ----
+
+  // Opens each relay URL at most once; caller must invoke closeAll() when done.
+  private inner class SocketPool {
+    private val sockets = ConcurrentHashMap<String, WebSocket>()
+
+    fun open(url: String, listener: WebSocketListener): WebSocket =
+      sockets.getOrPut(url) {
+        client.newWebSocket(Request.Builder().url(url).build(), listener)
+      }
+
+    fun closeAll() {
+      for ((_, ws) in sockets) ws.close(1000, "done")
+      sockets.clear()
+    }
+  }
+
+  override fun doWork(): Result {
+    if (isAppInForeground()) {
+      return Result.success()
+    }
+
+    val pool = SocketPool()
+    try {
+      val rawState = prefs.getString(KEY_STATE, "") ?: ""
+      if (rawState.isEmpty()) return Result.success()
+
+      val state = JSONObject(rawState)
+      val sessionInfo = getSessionInfo(state)
+      val subscriptions = parseSubscriptions(state)
+      if (subscriptions.isEmpty()) return Result.success()
+
+      val activeSince = state.optLong("activeSince", 0L)
+      val seen = mutableSetOf<String>()
+      var latestPair: Pair<String, JSONObject>? = null
+
+      for (sub in subscriptions) {
+        val cursorKey = CURSOR_PREFIX + sub.relay + ":" + sub.key
+        val since = maxOf(prefs.getLong(cursorKey, 0L), activeSince)
+        val result = pollRelay(sub, since, sessionInfo, pool)
+
+        if (result.lastCursor > prefs.getLong(cursorKey, 0L)) {
+          prefs.edit().putLong(cursorKey, result.lastCursor).apply()
+        }
+
+        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)
+            }
+          }
+        }
+      }
+
+      if (latestPair != null) {
+        val (relay, event) = latestPair!!
+        postNotification(relay, event)
+      }
+
+      return Result.success()
+    } catch (e: Exception) {
+      Log.e(TAG, "Worker failed", e)
+      return Result.success()
+    } finally {
+      pool.closeAll()
+      client.dispatcher.executorService.shutdown()
+    }
+  }
+
+  private fun isAppInForeground(): Boolean {
+    val am = applicationContext.getSystemService(ActivityManager::class.java) ?: return false
+    val tasks = am.getRunningAppProcesses() ?: return false
+    val pkg = applicationContext.packageName
+    return tasks.any { it.processName == pkg && it.importance == ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND }
+  }
+
+  private fun getSessionInfo(state: JSONObject): SessionInfo {
+    val session = state.optJSONObject("session") ?: return SessionInfo("anonymous", "", JSONObject())
+    return SessionInfo(
+      session.optString("method", "anonymous"),
+      session.optString("pubkey", ""),
+      session,
+    )
+  }
+
+  private fun parseSubscriptions(state: JSONObject): List<Subscription> {
+    val result = mutableListOf<Subscription>()
+    val arr = state.optJSONArray("subscriptions") ?: return result
+
+    for (i in 0 until arr.length()) {
+      val item = arr.optJSONObject(i) ?: continue
+      val relay = item.optString("relay", "").trim()
+
+      if (!relay.startsWith("wss://") && !relay.startsWith("ws://")) continue
+
+      val filters = item.optJSONArray("filters")
+      if (filters == null || filters.length() == 0) continue
+
+      val key = item.optString("key", "").trim()
+      result.add(Subscription(relay, key, filters, item.optJSONArray("ignore")))
+    }
+
+    return result
+  }
+
+  private fun pollRelay(sub: Subscription, since: Long, sessionInfo: SessionInfo, pool: SocketPool): RelayResult {
+    val result = RelayResult()
+    val latch = CountDownLatch(1)
+
+    val listener = RelayListener(sub, since, sessionInfo, result, latch, pool)
+    pool.open(sub.relay, listener)
+
+    if (!latch.await(SOCKET_TIMEOUT_SECONDS, TimeUnit.SECONDS)) {
+      Log.d(TAG, "Relay ${sub.relay} timed out")
+    }
+
+    return result
+  }
+
+  private fun postNotification(relay: String, event: JSONObject) {
+    val context = applicationContext
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU &&
+      ContextCompat.checkSelfPermission(context, Manifest.permission.POST_NOTIFICATIONS) != PackageManager.PERMISSION_GRANTED
+    ) return
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      val manager = context.getSystemService(NotificationManager::class.java)
+      if (manager != null && manager.getNotificationChannel(CHANNEL_ID) == null) {
+        val channel = NotificationChannel(CHANNEL_ID, "Fallback Notifications", NotificationManager.IMPORTANCE_DEFAULT)
+        channel.description = "Notifications delivered by Android background fallback"
+        manager.createNotificationChannel(channel)
+      }
+    }
+
+    val id = event.optString("id", "")
+    val encodedRelay = Uri.encode(relay)
+    val url = "https://app.flotilla.social/?relay=$encodedRelay&id=$id"
+    val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
+    intent.setPackage(context.packageName)
+    intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TOP
+
+    val pendingIntent = PendingIntent.getActivity(
+      context, 0, intent,
+      PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE,
+    )
+
+    val body = "New activity"
+
+    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
+      .setSmallIcon(android.R.drawable.stat_notify_chat)
+      .setContentTitle("Flotilla")
+      .setContentText(body)
+      .setAutoCancel(true)
+      .setPriority(NotificationCompat.PRIORITY_DEFAULT)
+      .setContentIntent(pendingIntent)
+      .build()
+
+    NotificationManagerCompat.from(context).notify(1, notification)
+  }
+
+  private fun matchesFilter(filter: JSONObject, event: JSONObject): Boolean {
+    val kinds = filter.optJSONArray("kinds")
+    if (kinds != null && kinds.length() > 0) {
+      val kind = event.optInt("kind", -1)
+      var found = false
+      for (i in 0 until kinds.length()) {
+        if (kinds.optInt(i, -1) == kind) { found = true; break }
+      }
+      if (!found) return false
+    }
+
+    val tags = event.optJSONArray("tags")
+    val iter = filter.keys()
+    while (iter.hasNext()) {
+      val key = iter.next()
+      if (!key.startsWith("#")) continue
+      val tagName = key.substring(1)
+      val allowed = filter.optJSONArray(key) ?: continue
+      if (allowed.length() == 0) continue
+
+      val allowedValues = mutableSetOf<String>()
+      for (i in 0 until allowed.length()) {
+        val v = allowed.optString(i, "")
+        if (v.isNotEmpty()) allowedValues.add(v)
+      }
+
+      var matched = false
+      if (tags != null) {
+        for (i in 0 until tags.length()) {
+          val tag = tags.optJSONArray(i) ?: continue
+          if (tag.optString(0, "") == tagName && allowedValues.contains(tag.optString(1, ""))) {
+            matched = true; break
+          }
+        }
+      }
+      if (!matched) return false
+    }
+
+    return true
+  }
+
+  // ---- Crypto helpers ----
+
+  private fun computeEventId(event: JSONObject): String {
+    return try {
+      val serialized = JSONArray()
+      serialized.put(0)
+      serialized.put(event.optString("pubkey", ""))
+      serialized.put(event.optLong("created_at", 0))
+      serialized.put(event.optInt("kind", 0))
+      serialized.put(event.optJSONArray("tags") ?: JSONArray())
+      serialized.put(event.optString("content", ""))
+      // JSONObject escapes forward slashes (/ -> \/), but NIP-01 event ID hashing
+      // requires unescaped slashes. Replace them before hashing.
+      val serializedStr = serialized.toString().replace("\\/", "/")
+      bytesToHex(sha256(serializedStr.toByteArray(StandardCharsets.UTF_8)))
+    } catch (_: Exception) {
+      ""
+    }
+  }
+
+  private fun deriveXOnlyPubkey(secretHex: String): String {
+    val secret = hexToBytes(secretHex)
+    if (secret.size != 32 || !SECP.secKeyVerify(secret)) return ""
+    val pubkey65 = try { SECP.pubkeyCreate(secret) } catch (_: Exception) { return "" }
+    if (pubkey65.size != 65) return ""
+    return bytesToHex(Arrays.copyOfRange(pubkey65, 1, 33))
+  }
+
+  private fun schnorrSign(secretHex: String, messageHex: String): String {
+    val sk = hexToBytes(secretHex)
+    val msg = hexToBytes(messageHex)
+    if (sk.size != 32 || msg.size != 32 || !SECP.secKeyVerify(sk)) return ""
+    val aux = ByteArray(32).also { SecureRandom().nextBytes(it) }
+    val sig = try { SECP.signSchnorr(msg, sk, aux) } catch (_: Exception) { return "" }
+    if (sig.size != 64) return ""
+    return bytesToHex(sig)
+  }
+
+  private fun sha256(input: ByteArray): ByteArray =
+    try { MessageDigest.getInstance("SHA-256").digest(input) } catch (_: Exception) { ByteArray(32) }
+
+  private fun hexToBytes(hex: String?): ByteArray {
+    var s = hex?.trim()?.lowercase() ?: ""
+    if (s.startsWith("0x")) s = s.substring(2)
+    if (s.length % 2 == 1) s = "0$s"
+    val bytes = ByteArray(s.length / 2)
+    var i = 0
+    while (i < s.length) {
+      val hi = Character.digit(s[i], 16)
+      val lo = Character.digit(s[i + 1], 16)
+      if (hi < 0 || lo < 0) return ByteArray(0)
+      bytes[i / 2] = ((hi shl 4) + lo).toByte()
+      i += 2
+    }
+    return bytes
+  }
+
+  private fun bytesToHex(bytes: ByteArray): String {
+    val hex = "0123456789abcdef".toCharArray()
+    val chars = CharArray(bytes.size * 2)
+    for (i in bytes.indices) {
+      val v = bytes[i].toInt() and 0xFF
+      chars[i * 2] = hex[v ushr 4]
+      chars[i * 2 + 1] = hex[v and 0x0F]
+    }
+    return String(chars)
+  }
+
+  // ---- NIP-44 encryption (v2: ECDH + HKDF + ChaCha20 + HMAC-SHA256) ----
+
+  private fun nip44ConversationKey(clientSecret: String, theirPubkey: String): ByteArray {
+    val sk = hexToBytes(clientSecret)
+    val pk = hexToBytes("02$theirPubkey")
+    if (sk.size != 32 || pk.size != 33) return ByteArray(0)
+    val shared = try { SECP.pubKeyTweakMul(pk, sk) } catch (_: Exception) { return ByteArray(0) }
+    if (shared.size != 65) return ByteArray(0)
+    val sharedX = Arrays.copyOfRange(shared, 1, 33)
+    return hkdfExtract(sharedX, "nip44-v2".toByteArray(StandardCharsets.UTF_8))
+  }
+
+  private fun hkdfExtract(ikm: ByteArray, salt: ByteArray): ByteArray {
+    val mac = javax.crypto.Mac.getInstance("HmacSHA256")
+    mac.init(javax.crypto.spec.SecretKeySpec(salt, "HmacSHA256"))
+    return mac.doFinal(ikm)
+  }
+
+  private fun hkdfExpand(prk: ByteArray, info: ByteArray, length: Int): ByteArray {
+    val mac = javax.crypto.Mac.getInstance("HmacSHA256")
+    val result = ByteArray(length)
+    var prev = ByteArray(0)
+    var offset = 0
+    var counter = 1
+    while (offset < length) {
+      mac.init(javax.crypto.spec.SecretKeySpec(prk, "HmacSHA256"))
+      mac.update(prev)
+      mac.update(info)
+      mac.update(counter.toByte())
+      prev = mac.doFinal()
+      val toCopy = minOf(prev.size, length - offset)
+      System.arraycopy(prev, 0, result, offset, toCopy)
+      offset += toCopy
+      counter++
+    }
+    return result
+  }
+
+  private fun hmacSha256(key: ByteArray, vararg parts: ByteArray): ByteArray {
+    val mac = javax.crypto.Mac.getInstance("HmacSHA256")
+    mac.init(javax.crypto.spec.SecretKeySpec(key, "HmacSHA256"))
+    for (part in parts) mac.update(part)
+    return mac.doFinal()
+  }
+
+  // ChaCha20 block function per RFC 8439
+  private fun chacha20Block(key: ByteArray, counter: Int, nonce: ByteArray): ByteArray {
+    fun Int.rotl(n: Int) = (this shl n) or (this ushr (32 - n))
+    val state = IntArray(16)
+    state[0] = 0x61707865; state[1] = 0x3320646e; state[2] = 0x79622d32; state[3] = 0x6b206574
+    for (i in 0..7) state[4 + i] = (key[i*4].toInt() and 0xFF) or
+      ((key[i*4+1].toInt() and 0xFF) shl 8) or
+      ((key[i*4+2].toInt() and 0xFF) shl 16) or
+      ((key[i*4+3].toInt() and 0xFF) shl 24)
+    state[12] = counter
+    for (i in 0..2) state[13 + i] = (nonce[i*4].toInt() and 0xFF) or
+      ((nonce[i*4+1].toInt() and 0xFF) shl 8) or
+      ((nonce[i*4+2].toInt() and 0xFF) shl 16) or
+      ((nonce[i*4+3].toInt() and 0xFF) shl 24)
+    val working = state.copyOf()
+    repeat(10) {
+      fun quarterRound(a: Int, b: Int, c: Int, d: Int) {
+        working[a] += working[b]; working[d] = (working[d] xor working[a]).rotl(16)
+        working[c] += working[d]; working[b] = (working[b] xor working[c]).rotl(12)
+        working[a] += working[b]; working[d] = (working[d] xor working[a]).rotl(8)
+        working[c] += working[d]; working[b] = (working[b] xor working[c]).rotl(7)
+      }
+      quarterRound(0,4,8,12); quarterRound(1,5,9,13); quarterRound(2,6,10,14); quarterRound(3,7,11,15)
+      quarterRound(0,5,10,15); quarterRound(1,6,11,12); quarterRound(2,7,8,13); quarterRound(3,4,9,14)
+    }
+    val out = ByteArray(64)
+    for (i in 0..15) {
+      val v = working[i] + state[i]
+      out[i*4]   = v.toByte()
+      out[i*4+1] = (v ushr 8).toByte()
+      out[i*4+2] = (v ushr 16).toByte()
+      out[i*4+3] = (v ushr 24).toByte()
+    }
+    return out
+  }
+
+  private fun chacha20(key: ByteArray, nonce: ByteArray, data: ByteArray): ByteArray {
+    val out = ByteArray(data.size)
+    var counter = 0
+    var offset = 0
+    while (offset < data.size) {
+      val block = chacha20Block(key, counter, nonce)
+      val len = minOf(64, data.size - offset)
+      for (i in 0 until len) out[offset + i] = (data[offset + i].toInt() xor block[i].toInt()).toByte()
+      offset += len
+      counter++
+    }
+    return out
+  }
+
+  private fun nip44CalcPaddedLen(len: Int): Int {
+    if (len <= 32) return 32
+    val nextPower = 1 shl (Math.floor(Math.log((len - 1).toDouble()) / Math.log(2.0)).toInt() + 1)
+    val chunk = if (nextPower <= 256) 32 else nextPower / 8
+    return chunk * ((len - 1) / chunk + 1)
+  }
+
+  private fun nip44Pad(plaintext: String): ByteArray {
+    val unpadded = plaintext.toByteArray(StandardCharsets.UTF_8)
+    val len = unpadded.size
+    val padded = ByteArray(2 + nip44CalcPaddedLen(len))
+    padded[0] = (len ushr 8).toByte()
+    padded[1] = len.toByte()
+    System.arraycopy(unpadded, 0, padded, 2, len)
+    return padded
+  }
+
+  private fun nip44Unpad(padded: ByteArray): String {
+    val len = ((padded[0].toInt() and 0xFF) shl 8) or (padded[1].toInt() and 0xFF)
+    if (len == 0 || len > padded.size - 2) return ""
+    return String(padded, 2, len, StandardCharsets.UTF_8)
+  }
+
+  private fun encryptNip44(plaintext: String, conversationKey: ByteArray): String {
+    return try {
+      val nonce = ByteArray(32).also { SecureRandom().nextBytes(it) }
+      val keys = hkdfExpand(conversationKey, nonce, 76)
+      val chachaKey = keys.sliceArray(0 until 32)
+      val chachaNonce = keys.sliceArray(32 until 44)
+      val hmacKey = keys.sliceArray(44 until 76)
+      val padded = nip44Pad(plaintext)
+      val ciphertext = chacha20(chachaKey, chachaNonce, padded)
+      val mac = hmacSha256(hmacKey, nonce, ciphertext)
+      val payload = ByteArray(1 + 32 + ciphertext.size + 32)
+      payload[0] = 2
+      System.arraycopy(nonce, 0, payload, 1, 32)
+      System.arraycopy(ciphertext, 0, payload, 33, ciphertext.size)
+      System.arraycopy(mac, 0, payload, 33 + ciphertext.size, 32)
+      Base64.encodeToString(payload, Base64.NO_WRAP)
+    } catch (_: Exception) {
+      ""
+    }
+  }
+
+  private fun decryptNip44(payload: String, conversationKey: ByteArray): String {
+    return try {
+      if (payload.isEmpty() || payload[0] == '#') return ""
+      val data = Base64.decode(payload, Base64.NO_WRAP)
+      if (data.size < 99 || data[0] != 2.toByte()) return ""
+      val nonce = data.sliceArray(1 until 33)
+      val ciphertext = data.sliceArray(33 until data.size - 32)
+      val mac = data.sliceArray(data.size - 32 until data.size)
+      val keys = hkdfExpand(conversationKey, nonce, 76)
+      val chachaKey = keys.sliceArray(0 until 32)
+      val chachaNonce = keys.sliceArray(32 until 44)
+      val hmacKey = keys.sliceArray(44 until 76)
+      val expectedMac = hmacSha256(hmacKey, nonce, ciphertext)
+      if (!expectedMac.contentEquals(mac)) return ""
+      val padded = chacha20(chachaKey, chachaNonce, ciphertext)
+      nip44Unpad(padded)
+    } catch (_: Exception) {
+      ""
+    }
+  }
+
+  // ---- Signing ----
+
+  private fun signWithNip01Secret(secretHex: String, eventJson: String, expectedPubkey: String): String {
+    return try {
+      val secret = hexToBytes(secretHex)
+      if (secret.size != 32) return ""
+
+      val event = JSONObject(eventJson)
+      var pubkey = event.optString("pubkey", expectedPubkey)
+      if (pubkey.isEmpty()) pubkey = deriveXOnlyPubkey(secretHex)
+      if (pubkey.isEmpty()) return ""
+
+      event.put("pubkey", pubkey)
+      val id = computeEventId(event)
+      if (id.isEmpty()) return ""
+
+      val sig = schnorrSign(secretHex, id)
+      if (sig.isEmpty()) return ""
+
+      event.put("id", id)
+      event.put("sig", sig)
+      event.toString()
+    } catch (_: Exception) {
+      ""
+    }
+  }
+
+  private fun signWithNip55ContentResolver(packageName: String, eventJson: String, pubkey: String): String {
+    val uri = Uri.parse("content://$packageName.SIGN_EVENT")
+    var cursor: Cursor? = null
+    return try {
+      cursor = applicationContext.contentResolver.query(uri, arrayOf(eventJson, "", pubkey), "1", null, null)
+      if (cursor == null || !cursor.moveToFirst()) return ""
+      val rejIdx = cursor.getColumnIndex("rejected")
+      if (rejIdx >= 0) {
+        val v = cursor.getString(rejIdx)
+        if (v == "1" || v.equals("true", ignoreCase = true)) return REJECTED
+      }
+      val eventIdx = cursor.getColumnIndex("event")
+      if (eventIdx >= 0) cursor.getString(eventIdx) ?: "" else ""
+    } catch (_: Exception) {
+      ""
+    } finally {
+      cursor?.close()
+    }
+  }
+
+  // ---- Data types ----
+
+  private data class SessionInfo(
+    val method: String,
+    val pubkey: String,
+    val session: JSONObject,
+  )
+
+  private data class Subscription(
+    val relay: String,
+    val key: String,
+    val filters: JSONArray,
+    val ignore: JSONArray?,
+  )
+
+  private class RelayResult {
+    val events = mutableListOf<JSONObject>()
+    var lastCursor = 0L
+  }
+
+  // ---- Relay listener ----
+
+  private inner class RelayListener(
+    private val sub: Subscription,
+    private val since: Long,
+    private val sessionInfo: SessionInfo,
+    private val result: RelayResult,
+    private val latch: CountDownLatch,
+    private val pool: SocketPool,
+  ) : WebSocketListener() {
+    private val subId = UUID.randomUUID().toString().replace("-", "")
+    private var done = false
+    private var authed = false
+    private var authEventId = ""
+    private var nip46InFlight = false
+    private var pendingDone = false
+
+    override fun onOpen(webSocket: WebSocket, response: Response) {
+      sendReq(webSocket)
+    }
+
+    private fun sendReq(webSocket: WebSocket) {
+      val req = JSONArray()
+      req.put("REQ")
+      req.put(subId)
+
+      for (i in 0 until sub.filters.length()) {
+        val filter = sub.filters.optJSONObject(i) ?: continue
+        val shaped = JSONObject(filter.toString())
+        if (since > 0) shaped.put("since", since + 1)
+        shaped.put("limit", 1)
+        req.put(shaped)
+      }
+
+      if (req.length() <= 2) { finish(); return }
+
+      send(webSocket, req.toString())
+    }
+
+    override fun onMessage(webSocket: WebSocket, text: String) {
+      try {
+        val message = JSONArray(text)
+        Log.d(TAG, "Received message from ${sub.relay}: $text")
+        when (message.optString(0, "")) {
+          "EVENT" -> {
+            val event = message.optJSONObject(2) ?: return
+            if (!matchesAnyFilter(sub.filters, event)) return
+            if (isIgnored(event)) return
+            result.events.add(event)
+            val createdAt = event.optLong("created_at", 0L)
+            if (createdAt > result.lastCursor) result.lastCursor = createdAt
+          }
+          "AUTH" -> {
+            // Only auth once per connection
+            if (!authed) {
+              authed = true
+              tryAuth(webSocket, message.optString(1, ""))
+            }
+          }
+          "OK" -> {
+            val okId = message.optString(1, "")
+            val accepted = message.optBoolean(2, false)
+            if (accepted && okId == authEventId) sendReq(webSocket)
+          }
+          "EOSE" -> {
+            send(webSocket, JSONArray().apply { put("CLOSE"); put(subId) }.toString())
+            finish()
+          }
+        }
+      } catch (_: Exception) {
+        finish()
+      }
+    }
+
+    override fun onFailure(webSocket: WebSocket, t: Throwable, response: Response?) = finish()
+    override fun onClosed(webSocket: WebSocket, code: Int, reason: String) = finish()
+
+    private fun finish() {
+      if (done) return
+      if (nip46InFlight) { pendingDone = true; return }
+      done = true
+      latch.countDown()
+    }
+
+    private fun isIgnored(event: JSONObject): Boolean {
+      val ignore = sub.ignore ?: return false
+      for (i in 0 until ignore.length()) {
+        val filter = ignore.optJSONObject(i) ?: continue
+        if (matchesFilter(filter, event)) return true
+      }
+      return false
+    }
+
+    private fun matchesAnyFilter(filters: JSONArray, event: JSONObject): Boolean {
+      for (i in 0 until filters.length()) {
+        val filter = filters.optJSONObject(i) ?: continue
+        if (matchesFilter(filter, event)) return true
+      }
+      return false
+    }
+
+    // ---- NIP-42 auth ----
+
+    private fun tryAuth(webSocket: WebSocket, challenge: String) {
+      if (challenge.isEmpty()) return
+      when (sessionInfo.method) {
+        "nip01" -> tryNip01Auth(webSocket, challenge)
+        "nip55" -> tryNip55Auth(webSocket, challenge)
+        "nip46" -> tryNip46Auth(webSocket, challenge)
+        // Pomade background auth is not supported: properly delegating to the Pomade signer
+        // from a background worker is complex, usage is rare, and relays that require auth
+        // may still be readable without it.
+      }
+    }
+
+    private fun buildAuthEvent(challenge: String): JSONObject {
+      return JSONObject().apply {
+        put("kind", KIND_RELAY_AUTH)
+        put("pubkey", sessionInfo.pubkey)
+        put("created_at", System.currentTimeMillis() / 1000L)
+        put("content", "")
+        put("id", "")
+        put("sig", "")
+        put("tags", JSONArray().apply {
+          put(JSONArray().apply { put("relay"); put(sub.relay) })
+          put(JSONArray().apply { put("challenge"); put(challenge) })
+        })
+      }
+    }
+
+    private fun sendAuthMessage(webSocket: WebSocket, signedEventJson: String): Boolean {
+      if (signedEventJson.isEmpty() || signedEventJson == REJECTED) return false
+      return try {
+        val event = JSONObject(signedEventJson)
+        authEventId = event.optString("id", "")
+        send(webSocket, JSONArray().apply { put("AUTH"); put(event) }.toString())
+      } catch (_: Exception) {
+        false
+      }
+    }
+
+    private fun send(webSocket: WebSocket, message: String): Boolean {
+      Log.d(TAG, "Sending message to ${webSocket.request().url}: $message")
+      return webSocket.send(message)
+    }
+
+    private fun tryNip01Auth(webSocket: WebSocket, challenge: String): Boolean {
+      val secret = sessionInfo.session.optString("secret", "")
+      if (secret.isEmpty()) return false
+      val signed = signWithNip01Secret(secret, buildAuthEvent(challenge).toString(), sessionInfo.pubkey)
+      return sendAuthMessage(webSocket, signed)
+    }
+
+    private fun tryNip55Auth(webSocket: WebSocket, challenge: String): Boolean {
+      val signerPackage = sessionInfo.session.optString("signer", "")
+      if (signerPackage.isEmpty()) return false
+      val signed = signWithNip55ContentResolver(signerPackage, buildAuthEvent(challenge).toString(), sessionInfo.pubkey)
+      return sendAuthMessage(webSocket, signed)
+    }
+
+    private fun tryNip46Auth(webSocket: WebSocket, challenge: String): Boolean {
+      val handler = sessionInfo.session.optJSONObject("handler") ?: return false
+      val clientSecret = sessionInfo.session.optString("secret", "")
+      val signerPubkey = handler.optString("pubkey", "")
+      val relays = handler.optJSONArray("relays")
+
+      if (clientSecret.isEmpty() || signerPubkey.isEmpty() || relays == null || relays.length() == 0) return false
+
+      val clientPubkey = deriveXOnlyPubkey(clientSecret)
+      if (clientPubkey.isEmpty()) return false
+
+      val authEventJson = buildAuthEvent(challenge).toString()
+
+      nip46InFlight = true
+      var success = false
+      try {
+        for (i in 0 until relays.length()) {
+          val signerRelay = relays.optString(i, "").trim()
+          if (!signerRelay.startsWith("wss://") && !signerRelay.startsWith("ws://")) continue
+          if (tryNip46ViaRelay(webSocket, signerRelay, clientSecret, clientPubkey, signerPubkey, authEventJson)) { success = true; break }
+        }
+      } finally {
+        nip46InFlight = false
+        if (pendingDone) finish()
+      }
+
+      return success
+    }
+
+    private fun tryNip46ViaRelay(
+      relaySocket: WebSocket,
+      signerRelay: String,
+      clientSecret: String,
+      clientPubkey: String,
+      signerPubkey: String,
+      authEventJson: String,
+    ): Boolean {
+      val localLatch = CountDownLatch(1)
+      val signedEvent = StringBuilder()
+      val requestId = UUID.randomUUID().toString().replace("-", "")
+
+      val signerSocket = pool.open(signerRelay, object : WebSocketListener() {
+        private var done = false
+
+        override fun onOpen(webSocket: WebSocket, response: Response) {
+          try {
+            val rpcEnvelope = JSONObject().apply {
+              put("kind", KIND_NIP46_RPC)
+              put("pubkey", clientPubkey)
+              put("created_at", System.currentTimeMillis() / 1000L)
+              put("content", encryptNip44(
+                JSONObject().apply {
+                  put("id", requestId)
+                  put("method", "sign_event")
+                  put("params", JSONArray().apply { put(authEventJson) })
+                }.toString(),
+                nip44ConversationKey(clientSecret, signerPubkey),
+              ))
+              put("id", "")
+              put("sig", "")
+              put("tags", JSONArray().apply { put(JSONArray().apply { put("p"); put(signerPubkey) }) })
+            }
+
+            val signedEnvelope = signWithNip01Secret(clientSecret, rpcEnvelope.toString(), clientPubkey)
+            if (signedEnvelope.isEmpty()) { finish(); return }
+
+            val sentAt = System.currentTimeMillis() / 1000L
+            send(webSocket, JSONArray().apply { put("EVENT"); put(JSONObject(signedEnvelope)) }.toString())
+            send(webSocket, JSONArray().apply {
+              put("REQ")
+              put(requestId)
+              put(JSONObject().apply {
+                put("#p", JSONArray().apply { put(clientPubkey) })
+                put("kinds", JSONArray().apply { put(KIND_NIP46_RPC) })
+                put("since", sentAt)
+                put("limit", 10)
+              })
+            }.toString())
+          } catch (_: Exception) {
+            finish()
+          }
+        }
+
+        override fun onMessage(webSocket: WebSocket, text: String) {
+          try {
+            val message = JSONArray(text)
+            val msgType = message.optString(0, "")
+            Log.d(TAG, "NIP-46 signer message: $msgType from ${webSocket.request().url}")
+            if (msgType != "EVENT") return
+            val event = message.optJSONObject(2) ?: return
+
+            val tags = event.optJSONArray("tags")
+            var hasP = false
+            if (tags != null) {
+              for (i in 0 until tags.length()) {
+                val tag = tags.optJSONArray(i) ?: continue
+                if (tag.optString(0, "") == "p" && tag.optString(1, "") == clientPubkey) { hasP = true; break }
+              }
+            }
+            if (!hasP) { Log.d(TAG, "NIP-46 event missing p tag for client"); return }
+
+            val decryptedContent = decryptNip44(event.optString("content", ""), nip44ConversationKey(clientSecret, signerPubkey))
+            Log.d(TAG, "NIP-46 decrypted response: $decryptedContent")
+            if (decryptedContent.isEmpty()) return
+            val payload = JSONObject(decryptedContent)
+            if (requestId == payload.optString("id", "")) {
+              val result = payload.optString("result", "")
+              if (result.isNotEmpty()) {
+                signedEvent.setLength(0)
+                signedEvent.append(result)
+                finish()
+              }
+            }
+          } catch (e: Exception) {
+            Log.e(TAG, "NIP-46 signer message error", e)
+          }
+        }
+
+        override fun onFailure(webSocket: WebSocket, t: Throwable, response: Response?) = finish()
+        override fun onClosed(webSocket: WebSocket, code: Int, reason: String) = finish()
+
+        private fun finish() {
+          if (!done) { done = true; localLatch.countDown() }
+        }
+      })
+
+      try {
+        localLatch.await(5, TimeUnit.SECONDS)
+      } catch (_: InterruptedException) {
+        return false
+      }
+
+      if (signedEvent.isEmpty()) return false
+
+      val authEvent = JSONObject(signedEvent.toString())
+      authEventId = authEvent.optString("id", "")
+      val authMessage = JSONArray().apply { put("AUTH"); put(authEvent) }.toString()
+      Log.d(TAG, "NIP-46 sending AUTH to relay ${relaySocket.request().url}: $authMessage")
+      return try {
+        relaySocket.send(authMessage)
+      } catch (e: Exception) {
+        Log.e(TAG, "NIP-46 failed to send AUTH", e)
+        false
+      }
+    }
+  }
+}

android/build.gradle

@@ -1,6 +1,7 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
+    ext.kotlin_version = '2.2.20'
     
     repositories {
         google()
@@ -9,6 +10,7 @@ buildscript {
     dependencies {
         classpath 'com.android.tools.build:gradle:8.13.2'
         classpath 'com.google.gms:google-services:4.4.4'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/capacitor.settings.gradle

@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/android/capacitor')
 
+include ':aparajita-capacitor-secure-storage'
+project(':aparajita-capacitor-secure-storage').projectDir = new File('../node_modules/.pnpm/@aparajita+capacitor-secure-storage@8.0.0/node_modules/@aparajita/capacitor-secure-storage/android')
+
 include ':capacitor-community-safe-area'
 project(':capacitor-community-safe-area').projectDir = new File('../node_modules/.pnpm/@capacitor-community+safe-area@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor-community/safe-area/android')
 

build.sh

@@ -5,8 +5,8 @@ temp_env=$(declare -p -x)
 if [ -f .env.template ]; then
   source .env.template
 fi
-if [ -f .env ]; then
+if [ -f .env.local ]; then
-  source .env
+  source .env.local
 fi
 
 # Avoid overwriting env vars provided directly

capacitor.config.ts

@@ -4,6 +4,9 @@ const config: CapacitorConfig = {
   appId: "social.flotilla",
   appName: "Flotilla",
   webDir: "build",
+  ios: {
+    scheme: "Flotilla Chat",
+  },
   android: {
     adjustMarginsForEdgeToEdge: true,
   },

ios/App/App.xcodeproj/project.pbxproj

@@ -358,14 +358,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 31;
+				CURRENT_PROJECT_VERSION = 34;
 				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.6.4;
+				MARKETING_VERSION = 1.7.1;
 				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 = 31;
+				CURRENT_PROJECT_VERSION = 34;
 				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.6.4;
+				MARKETING_VERSION = 1.7.1;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

ios/App/App/Info.plist

@@ -20,8 +20,16 @@
 	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>ITSAppUsesNonExemptEncryption</key>
+	<false/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>Flotilla uses the microphone for voice chat in rooms.</string>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>remote-notification</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
@@ -47,11 +55,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
-	<key>ITSAppUsesNonExemptEncryption</key>
-	<false/>
-	<key>UIBackgroundModes</key>
-	<array>
-		<string>remote-notification</string>
-	</array>
 </dict>
 </plist>

ios/App/Podfile

@@ -11,6 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/.pnpm/@capacitor+ios@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/.pnpm/@capacitor+ios@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/ios'
+  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 'CapacitorFilesystem', :path => '../../node_modules/.pnpm/@capacitor+filesystem@8.1.0_@capacitor+core@8.0.1/node_modules/@capacitor/filesystem'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flotilla",
-  "version": "1.6.4",
+  "version": "1.7.1",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -11,7 +11,7 @@
     "tauri:info": "tauri info",
     "tauri:icons": "tauri icon assets/logo.png --output src-tauri/icons",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "./check.sh",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check src && eslint src",
     "format": "git diff head --name-only --diff-filter d | grep -E '(js|ts|svelte|css)$' | xargs -r prettier --write",
     "format:all": "prettier --write src",
@@ -42,6 +42,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@aparajita/capacitor-secure-storage": "^8.0.0",
     "@capacitor-community/safe-area": "^8.0.1",
     "@capacitor/android": "^8.0.1",
     "@capacitor/app": "^8.0.0",
@@ -57,7 +58,7 @@
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
     "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.1.1",
+    "@pomade/core": "^0.2.2",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
@@ -65,16 +66,16 @@
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.8",
-    "@welshman/app": "^0.8.7",
+    "@welshman/app": "^0.8.10",
-    "@welshman/content": "^0.8.7",
+    "@welshman/content": "^0.8.10",
-    "@welshman/editor": "^0.8.7",
+    "@welshman/editor": "^0.8.10",
-    "@welshman/feeds": "^0.8.7",
+    "@welshman/feeds": "^0.8.10",
-    "@welshman/lib": "^0.8.7",
+    "@welshman/lib": "^0.8.10",
-    "@welshman/net": "^0.8.7",
+    "@welshman/net": "^0.8.10",
-    "@welshman/router": "^0.8.7",
+    "@welshman/router": "^0.8.10",
-    "@welshman/signer": "^0.8.7",
+    "@welshman/signer": "^0.8.10",
-    "@welshman/store": "^0.8.7",
+    "@welshman/store": "^0.8.10",
-    "@welshman/util": "^0.8.7",
+    "@welshman/util": "^0.8.10",
     "compressorjs-next": "^1.1.2",
     "daisyui": "^4.12.24",
     "date-picker-svelte": "^2.17.0",
@@ -83,6 +84,7 @@
     "fuse.js": "^7.1.0",
     "husky": "^9.1.7",
     "idb": "^8.0.3",
+    "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",

pwa-assets.config.js

@@ -1,7 +1,7 @@
 import dotenv from "dotenv"
 import {defineConfig, minimalPreset as preset} from "@vite-pwa/assets-generator/config"
 
-dotenv.config({path: ".env"})
+dotenv.config({path: ".env.local"})
 dotenv.config({path: ".env.template"})
 
 export default defineConfig({

src/app.css

@@ -422,6 +422,14 @@ body.keyboard-open .hide-on-keyboard {
   @apply cb cw fixed z-compose;
 }
 
+.chat__compose-zone {
+  @apply cb cw fixed z-compose;
+}
+
+.chat__compose-zone .chat__compose-inner {
+  @apply min-w-0;
+}
+
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }

src/app/components/AppContainer.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {page} from "$app/stores"
   import {pubkey} from "@welshman/app"
   import Dialog from "@lib/components/Dialog.svelte"
   import Landing from "@app/components/Landing.svelte"
   import Toast from "@app/components/Toast.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
-  import {modals} from "@app/util/modal"
+  import {modal} from "@app/util/modal"
 
   interface Props {
     children: Snippet
@@ -20,8 +19,8 @@
     <PrimaryNav>
       {@render children?.()}
     </PrimaryNav>
-  {:else if !$modals[$page.url.hash.slice(1)]}
+  {:else if !$modal}
-    <Dialog children={{component: Landing, props: {}}} />
+    <Dialog noEscape children={{component: Landing, props: {}}} />
   {/if}
 </div>
 <Toast />

src/app/components/Chat.svelte

@@ -2,9 +2,11 @@
   import type {Snippet} from "svelte"
   import {onMount} from "svelte"
   import {
+    ago,
     int,
     ms,
     partition,
+    ifLet,
     spec,
     nthEq,
     nthNe,
@@ -32,25 +34,27 @@
     messagingRelayListsByPubkey,
   } from "@welshman/app"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
+  import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Button from "@lib/components/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMembers from "@app/components/ChatMembers.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
+  import ChatComposeEdit from "@app/components/ChatComposeEdit.svelte"
   import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
-  import {userSettingsValues, PLATFORM_NAME, deriveChat} from "@app/core/state"
+  import {userSettingsValues, deriveChat} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
-  import {prependParent} from "@app/core/commands"
+  import {makeDelete, prependParent} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
 
   type Props = {
@@ -62,13 +66,15 @@
 
   const chat = deriveChat(pubkeys)
   const others = remove($pubkey!, pubkeys)
-  const missingRelayLists = $derived(pubkeys.filter(pk => !$messagingRelayListsByPubkey.has(pk)))
+  const missingRelayLists = $derived(others.filter(pk => !$messagingRelayListsByPubkey.has(pk)))
 
   const showMembers = () =>
     others.length === 1
       ? pushModal(ProfileDetail, {pubkey: others[0]})
       : pushModal(ChatMembers, {pubkeys: others})
 
+  const back = () => history.back()
+
   const replyTo = (event: TrustedEvent) => {
     parent = event
     compose?.focus()
@@ -78,73 +84,117 @@
     parent = undefined
   }
 
-  const onSubmit = async (params: EventContent) => {
+  const clearEventToEdit = () => {
-    const ptags = remove($pubkey!, pubkeys).map(tagPubkey)
+    eventToEdit = undefined
-
-    // Remove p tags since they result in forking the conversation
-    params.tags = params.tags.filter(nthNe(0, "p"))
-
-    // Add our reply quote to content
-    params = prependParent(parent, params)
-
-    const [imetaTags, tags] = partition(nthEq(0, "imeta"), params.tags)
-    const imetas = getTags("imeta", imetaTags).map(tagsFromIMeta)
-    const templates: EventTemplate[] = []
-    const buffer = []
-
-    const addTemplate = (kind: number, content: string, tags: string[][]) => {
-      content = content.trim()
-
-      if (content) {
-        templates.push(makeEvent(kind, {content, tags: [...tags, ...ptags]}))
-      }
-    }
-
-    for (const p of parse(params)) {
-      const imeta = isLink(p)
-        ? imetas.find(tags => tags.find(spec(["url", p.value.url.toString()])))
-        : undefined
-
-      if (isLink(p) && imeta) {
-        addTemplate(DIRECT_MESSAGE, buffer.splice(0).join(""), tags)
-        addTemplate(
-          DIRECT_MESSAGE_FILE,
-          p.value.url.toString(),
-          imeta.slice(1).filter(nthNe(0, "url")),
-        )
-      } else {
-        buffer.push(p.raw)
-      }
-    }
-
-    addTemplate(DIRECT_MESSAGE, buffer.splice(0).join(""), tags)
-
-    // Split the message into multiple pieces so that we can use kind 15 to send images per nip 17
-    // Sleep 1 second between each one to make sure timestamps are distinct
-    const thunks = await Promise.all(
-      Array.from(enumerate(templates)).map(([i, event]) =>
-        sendWrapped({
-          event,
-          recipients: pubkeys,
-          delay: $userSettingsValues.send_delay + ms(i),
-        }),
-      ),
-    )
-
-    pushToast({
-      timeout: 30_000,
-      children: {
-        component: ThunkToast,
-        props: {thunk: mergeThunks(thunks)},
-      },
-    })
-
-    clearParent()
   }
 
+  const onSubmit = async (params: EventContent) => {
+    try {
+      const ptags = remove($pubkey!, pubkeys).map(tagPubkey)
+
+      // Remove p tags since they result in forking the conversation
+      params.tags = params.tags.filter(nthNe(0, "p"))
+
+      // Add our reply quote to content
+      params = prependParent(parent, params)
+
+      if (eventToEdit) {
+        if (eventToEdit.content === params.content) {
+          return
+        }
+
+        await sendWrapped({
+          event: makeDelete({event: eventToEdit, protect: false}),
+          recipients: pubkeys,
+          pow: 16,
+        })
+      }
+
+      const [imetaTags, tags] = partition(nthEq(0, "imeta"), params.tags)
+      const imetas = getTags("imeta", imetaTags).map(tagsFromIMeta)
+      const templates: EventTemplate[] = []
+      const buffer = []
+
+      const addTemplate = (kind: number, content: string, tags: string[][]) => {
+        content = content.trim()
+
+        if (content) {
+          templates.push(
+            makeEvent(kind, {
+              content,
+              tags: [...tags, ...ptags],
+              created_at: eventToEdit?.created_at,
+            }),
+          )
+        }
+      }
+
+      for (const p of parse(params)) {
+        const imeta = isLink(p)
+          ? imetas.find(tags => tags.find(spec(["url", p.value.url.toString()])))
+          : undefined
+
+        if (isLink(p) && imeta) {
+          addTemplate(DIRECT_MESSAGE, buffer.splice(0).join(""), tags)
+          addTemplate(
+            DIRECT_MESSAGE_FILE,
+            p.value.url.toString(),
+            imeta.slice(1).filter(nthNe(0, "url")),
+          )
+        } else {
+          buffer.push(p.raw)
+        }
+      }
+
+      addTemplate(DIRECT_MESSAGE, buffer.splice(0).join(""), tags)
+
+      // Split the message into multiple pieces so that we can use kind 15 to send images per nip 17
+      // Sleep 1 second between each one to make sure timestamps are distinct
+      const thunks = await Promise.all(
+        Array.from(enumerate(templates)).map(([i, event]) =>
+          sendWrapped({
+            event,
+            recipients: pubkeys,
+            delay: $userSettingsValues.send_delay + ms(i),
+            pow: 16,
+          }),
+        ),
+      )
+
+      pushToast({
+        timeout: 30_000,
+        children: {
+          component: ThunkToast,
+          props: {thunk: mergeThunks(thunks)},
+        },
+      })
+    } finally {
+      clearParent()
+      clearEventToEdit()
+    }
+  }
+
+  const onEscape = () => {
+    clearParent()
+    clearEventToEdit()
+  }
+
+  const canEditEvent = (event: TrustedEvent) =>
+    event.pubkey === $pubkey &&
+    event.kind === DIRECT_MESSAGE &&
+    event.created_at >= ago(500, MINUTE)
+
+  const onEditEvent = (event: TrustedEvent) => {
+    clearParent()
+    eventToEdit = event
+  }
+
+  const onEditPrevious = () => ifLet($chat?.messages.toReversed().find(canEditEvent), onEditEvent)
+
   let loading = $state(true)
   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()
 
@@ -204,75 +254,59 @@
 </script>
 
 <PageBar>
-  {#snippet title()}
+  <div class="flex">
-    <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
+    <Button onclick={back} class="place-self-start pr-3 md:hidden flex items-center">
-      {#if others.length === 0}
+      <Icon icon={ArrowLeft} size={7} />
-        <div class="row-2">
-          <ProfileCircle pubkey={$pubkey!} size={5} />
-          <ProfileName pubkey={$pubkey!} />
-        </div>
-      {:else if others.length === 1}
-        <div class="row-2">
-          <ProfileCircle pubkey={others[0]} size={5} />
-          <ProfileName pubkey={others[0]} />
-        </div>
-      {:else}
-        <div class="flex items-center gap-2">
-          <ProfileCircles pubkeys={others} size={5} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-            <ProfileName pubkey={others[0]} />
-            and
-            {#if others.length === 2}
-              <ProfileName pubkey={others[1]} />
-            {:else}
-              {others.length - 1}
-              {others.length > 2 ? "others" : "other"}
-            {/if}
-          </p>
-        </div>
-      {/if}
     </Button>
-  {/snippet}
+    <div class="flex items-center justify-between gap-4">
-  {#snippet action()}
+      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
-    {#if remove($pubkey, missingRelayLists).length > 0}
+        <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
-      {@const count = remove($pubkey, missingRelayLists).length}
+          {#if others.length === 0}
-      {@const label = count > 1 ? "lists are" : "list is"}
+            <div class="row-2">
-      <div
+              <ProfileCircle pubkey={$pubkey!} size={5} />
-        class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+              <ProfileName pubkey={$pubkey!} />
-        data-tip="{count} messaging {label} not configured.">
+            </div>
-        <Icon icon={Danger} />
+          {:else if others.length === 1}
-        {count}
+            <div class="row-2">
+              <ProfileCircle pubkey={others[0]} size={5} />
+              <ProfileName pubkey={others[0]} />
+            </div>
+          {:else}
+            <div class="flex items-center gap-2">
+              <ProfileCircles pubkeys={others} size={5} />
+              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+                <ProfileName pubkey={others[0]} />
+                and
+                {#if others.length === 2}
+                  <ProfileName pubkey={others[1]} />
+                {:else}
+                  {others.length - 1}
+                  {others.length > 2 ? "others" : "other"}
+                {/if}
+              </p>
+            </div>
+          {/if}
+        </Button>
       </div>
-    {/if}
+    </div>
-  {/snippet}
+  </div>
 </PageBar>
 
 <PageContent class="flex flex-col-reverse gap-2 pt-4">
   <div bind:this={dynamicPadding}></div>
-  {#if missingRelayLists.includes($pubkey!)}
+  {#if missingRelayLists.length > 0}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
         <p class="row-2 text-lg text-error">
           <Icon icon={Danger} />
-          Your messaging relays are not configured.
+          Direct messages are not enabled
         </p>
         <p>
-          In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
+          Ask
-          your <Link class="link" href="/settings/relays">relay settings page</Link> to receive messages.
+          {#each missingRelayLists as pubkey (pubkey)}
-        </p>
+            <ProfileLink {pubkey} />
-      </div>
+          {/each}
-    </div>
+          to enable direct messaging by opening this conversation in their app.
-  {:else if missingRelayLists.length > 0}
-    <div class="py-12">
-      <div class="card2 col-2 m-auto max-w-md items-center text-center">
-        <p class="row-2 text-lg text-error">
-          <Icon icon={Danger} />
-          {missingRelayLists.length} messaging
-          {missingRelayLists.length > 1 ? "lists are" : "list is"} not configured.
-        </p>
-        <p>
-          In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please make
-          sure everyone in this conversation has set up their messaging relays.
         </p>
       </div>
     </div>
@@ -285,7 +319,9 @@
         event={$state.snapshot(value as TrustedEvent)}
         {pubkeys}
         {showPubkey}
-        {replyTo} />
+        {replyTo}
+        canEdit={canEditEvent}
+        onEdit={onEditEvent} />
     {/if}
   {/each}
   <p class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
@@ -305,6 +341,17 @@
     {#if parent}
       <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
     {/if}
+    {#if eventToEdit}
+      <ChatComposeEdit clear={clearEventToEdit} />
+    {/if}
   </div>
-  <ChatCompose bind:this={compose} {onSubmit} />
+  {#key eventToEdit}
+    <ChatCompose
+      bind:this={compose}
+      {onSubmit}
+      {onEscape}
+      {onEditPrevious}
+      content={eventToEdit?.content}
+      disabled={Boolean(missingRelayLists.length)} />
+  {/key}
 </div>

src/app/components/ChatCompose.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import {onDestroy, onMount} from "svelte"
   import {writable} from "svelte/store"
+  import cx from "classnames"
   import type {EventContent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
@@ -10,21 +12,44 @@
   import {makeEditor} from "@app/editor"
 
   type Props = {
+    content?: string
+    disabled?: boolean
+    onEscape?: () => void
+    onEditPrevious?: () => void
     onSubmit: (event: EventContent) => void
   }
 
-  const {onSubmit}: Props = $props()
+  const {content, disabled = false, onEscape, onEditPrevious, onSubmit}: Props = $props()
 
-  const autofocus = !isMobile
+  const autofocus = !isMobile && !disabled
 
   const uploading = writable(false)
 
+  const editorClass = $derived(
+    cx("chat-editor flex-grow overflow-hidden", {
+      "pointer-events-none opacity-50": disabled,
+    }),
+  )
+
   export const focus = () => editor.then(ed => ed.chain().focus().run())
 
+  export const canEnterEditPrevious = () =>
+    editor.then(ed => ed.getText({blockSeparator: "\n"}) === "")
+
+  const handleKeyDown = async (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      onEscape?.()
+    }
+
+    if (event.key === "ArrowUp" && (await canEnterEditPrevious())) {
+      onEditPrevious?.()
+    }
+  }
+
   const uploadFiles = () => editor.then(ed => ed.chain().selectFiles().run())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || disabled) return
 
     const ed = await editor
     const content = ed.getText({blockSeparator: "\n"}).trim()
@@ -38,19 +63,30 @@
   }
 
   const editor = makeEditor({
+    content,
     autofocus,
     submit,
     uploading,
     aggressive: true,
     encryptFiles: true,
   })
+
+  onMount(async () => {
+    const ed = await editor
+    ed.view.dom.addEventListener("keydown", handleKeyDown)
+  })
+
+  onDestroy(async () => {
+    const ed = await editor
+    ed?.view?.dom.removeEventListener("keydown", handleKeyDown)
+  })
 </script>
 
 <form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>
   <Button
     data-tip="Add an image"
     class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
-    disabled={$uploading}
+    disabled={$uploading || disabled}
     onclick={uploadFiles}>
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
@@ -58,13 +94,13 @@
       <Icon icon={GallerySend} />
     {/if}
   </Button>
-  <div class="chat-editor flex-grow overflow-hidden">
+  <div class={editorClass} aria-disabled={disabled}>
     <EditorContent {editor} />
   </div>
   <Button
     data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
     class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
-    disabled={$uploading}
+    disabled={$uploading || disabled}
     onclick={submit}>
     <Icon icon={Plane} />
   </Button>

src/app/components/ChatComposeEdit.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import {slide} 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"
+
+  const {
+    clear,
+  }: {
+    clear: () => void
+  } = $props()
+</script>
+
+<div
+  class="relative flex h-8 items-center justify-between border-l-2 border-solid border-primary bg-base-300 px-2 pr-7 text-xs"
+  transition:slide>
+  <p class="text-primary">Editing message</p>
+  <Button onclick={clear} class="flex items-center">
+    <Icon icon={CloseCircle} />
+  </Button>
+</div>

src/app/components/ChatEnable.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import {getRelaysFromList} from "@welshman/util"
+  import {waitForThunkError, setMessagingRelays, userRelayList, setRelays} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {DEFAULT_RELAYS, DEFAULT_MESSAGING_RELAYS} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    next: () => void
+  }
+
+  const {next}: Props = $props()
+
+  let loading = $state(false)
+
+  const back = () => history.back()
+
+  const enable = async () => {
+    loading = true
+
+    try {
+      if (getRelaysFromList($userRelayList).length === 0) {
+        const error = await waitForThunkError(await setRelays(DEFAULT_RELAYS.map(r => ["r", r])))
+
+        if (error) {
+          pushToast({theme: "error", message: error})
+          return
+        }
+      }
+
+      const error = await waitForThunkError(await setMessagingRelays(DEFAULT_MESSAGING_RELAYS))
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+        return
+      }
+
+      await next()
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(enable)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Enable direct messaging?</ModalTitle>
+    </ModalHeader>
+    <p>Direct messaging isn't currently enabled. Would you like to turn it on?</p>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Enable direct messaging</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/ChatItem.svelte

@@ -5,11 +5,11 @@
   import type {TrustedEvent} from "@welshman/util"
   import {pubkey, loadMessagingRelayList} from "@welshman/app"
   import {fade} from "@lib/transition"
-  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import {makeChatPath} from "@app/util/routes"
+  import {makeChatPath, goToChat} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
 
   interface Props {
@@ -24,6 +24,7 @@
   const others = uniq(remove($pubkey!, props.pubkeys))
   const active = $derived($page.params.chat === props.id)
   const path = makeChatPath(props.pubkeys)
+  const openChat = () => goToChat(props.pubkeys)
 
   onMount(() => {
     for (const pk of others) {
@@ -32,7 +33,7 @@
   })
 </script>
 
-<Link class="flex flex-col justify-start gap-1" href={makeChatPath(props.pubkeys)}>
+<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:bg-base-100={active}>
@@ -71,4 +72,4 @@
       </p>
     </div>
   </div>
-</Link>
+</Button>

src/app/components/ChatMessage.svelte

@@ -23,11 +23,13 @@
   interface Props {
     event: TrustedEvent
     replyTo: (event: TrustedEvent) => void
+    canEdit?: (event: TrustedEvent) => boolean
+    onEdit?: (event: TrustedEvent) => void
     pubkeys: string[]
     showPubkey?: boolean
   }
 
-  const {event, replyTo, pubkeys, showPubkey = false}: Props = $props()
+  const {event, replyTo, canEdit, onEdit, pubkeys, showPubkey = false}: Props = $props()
 
   const isOwn = event.pubkey === $pubkey
   const profileDisplay = deriveProfileDisplay(event.pubkey)
@@ -35,16 +37,21 @@
   const [_, colorValue] = colors[hash(event.pubkey) % colors.length]
 
   const reply = () => replyTo(event)
+  const edit = canEdit?.(event) ? () => onEdit?.(event) : undefined
 
   const deleteReaction = (event: TrustedEvent) =>
-    sendWrapped({event: makeDelete({event, protect: false}), recipients: pubkeys})
+    sendWrapped({event: makeDelete({event, protect: false}), recipients: pubkeys, pow: 16})
 
   const createReaction = (template: EventContent) =>
-    sendWrapped({event: makeReaction({event, protect: false, ...template}), recipients: pubkeys})
+    sendWrapped({
+      event: makeReaction({event, protect: false, ...template}),
+      recipients: pubkeys,
+      pow: 16,
+    })
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 
-  const showMobileMenu = () => pushModal(ChatMessageMenuMobile, {event, pubkeys, reply})
+  const showMobileMenu = () => pushModal(ChatMessageMenuMobile, {event, pubkeys, reply, edit})
 
   const togglePopover = () => {
     if (popoverIsVisible) {
@@ -71,7 +78,7 @@
     <Tippy
       bind:popover
       component={ChatMessageMenu}
-      props={{event, pubkeys, popover, replyTo}}
+      props={{event, pubkeys, popover, replyTo, edit}}
       params={{
         interactive: true,
         trigger: "manual",
@@ -93,7 +100,7 @@
   {/if}
   <div class="flex min-w-0 flex-col" class:items-end={isOwn}>
     <TapTarget
-      class="bg-alt chat-bubble mx-1 mb-2 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
+      class="bg-alt chat-bubble mx-1 mb-2 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl min-w-[100px]"
       onTap={showMobileMenu}>
       {#if showPubkey}
         <div class="flex items-center gap-2">

src/app/components/ChatMessageEmojiButton.svelte

@@ -18,6 +18,7 @@
     sendWrapped({
       event: makeReaction({event, content: emoji.unicode, protect: false}),
       recipients: pubkeys,
+      pow: 16,
     })
 </script>
 

src/app/components/ChatMessageMenu.svelte

@@ -4,12 +4,14 @@
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/util/modal"
+  import Pen from "@assets/icons/pen.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
 
-  const {event, pubkeys, popover, replyTo} = $props()
+  const {event, pubkeys, popover, replyTo, edit} = $props()
 
   const reply = () => replyTo(event)
+  const onEdit = () => edit?.()
 
   const showInfo = () => {
     popover.hide()
@@ -24,6 +26,11 @@
       <Icon size={4} icon={Reply} />
     </Button>
   {/if}
+  {#if edit}
+    <Button class="btn join-item btn-xs" onclick={onEdit}>
+      <Icon size={4} icon={Pen} />
+    </Button>
+  {/if}
   <Button class="btn join-item btn-xs" onclick={showInfo}>
     <Icon size={4} icon={Code2} />
   </Button>

src/app/components/ChatMessageMenuMobile.svelte

@@ -3,6 +3,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
   import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import Pen from "@assets/icons/pen.svg?dataurl"
   import Reply from "@assets/icons/reply-2.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
@@ -20,15 +21,17 @@
     pubkeys: string[]
     event: TrustedEvent
     reply: () => void
+    edit?: () => void
   }
 
-  const {event, pubkeys, reply}: Props = $props()
+  const {event, pubkeys, reply, edit}: Props = $props()
 
   const onEmoji = ((event: TrustedEvent, pubkeys: string[], emoji: NativeEmoji) => {
     history.back()
     sendWrapped({
       event: makeReaction({event, content: emoji.unicode, protect: false}),
       recipients: pubkeys,
+      pow: 16,
     })
   }).bind(undefined, event, pubkeys)
 
@@ -39,6 +42,11 @@
     reply()
   }
 
+  const sendEdit = () => {
+    history.back()
+    edit?.()
+  }
+
   const copyText = () => {
     history.back()
     clip(event.content)
@@ -62,6 +70,12 @@
         <Icon size={4} icon={Reply} />
         Send Reply
       </Button>
+      {#if edit}
+        <Button class="btn btn-neutral w-full" onclick={sendEdit}>
+          <Icon size={4} icon={Pen} />
+          Edit Message
+        </Button>
+      {/if}
       <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
         <Icon size={4} icon={SmileCircle} />
         Send Reaction

src/app/components/ChatStart.svelte

@@ -2,7 +2,6 @@
   import * as nip19 from "nostr-tools/nip19"
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
-  import {goto} from "$app/navigation"
   import {tryCatch, uniq} from "@welshman/lib"
   import {fromNostrURI} from "@welshman/util"
   import {loadMessagingRelayList} from "@welshman/app"
@@ -19,11 +18,11 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
-  import {makeChatPath} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   const back = () => history.back()
 
-  const onSubmit = () => goto(makeChatPath(pubkeys))
+  const onSubmit = () => goToChat(pubkeys)
 
   const addPubkey = (pubkey: string) => {
     pubkeys = uniq([...pubkeys, pubkey])

src/app/components/ClassifiedItem.svelte

@@ -20,7 +20,7 @@
 
   const title = getTagValue("title", event.tags)
   const h = getTagValue("h", event.tags)
-  const images = getTagValues("image", event.tags)
+  const images = new Set(getTagValues("image", event.tags))
   const [_, price = 0, currency = "SAT"] = getTag("price", event.tags) || []
 </script>
 

src/app/components/IconPickerModal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import IconPicker from "@app/components/IconPicker.svelte"
+
+  type Props = {
+    onSelect: (iconUrl: string) => void
+  }
+
+  const {onSelect}: Props = $props()
+</script>
+
+<Modal>
+  <ModalBody>
+    <IconPicker {onSelect} />
+  </ModalBody>
+</Modal>

src/app/components/KeyRecoveryConfirm.svelte

@@ -15,10 +15,10 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import KeyDownload from "@app/components/KeyDownload.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal, clearModals} from "@app/util/modal"
-  import {POMADE_SIGNERS} from "@app/core/state"
 
   type Props = {
     peersByPrefix: Map<string, string>
@@ -32,18 +32,6 @@
   } = $session as SessionPomade
 
   const confirmRecovery = async () => {
-    const otps = input
-      .split(/\n/)
-      .map(x => x.trim())
-      .filter(x => x.match(/^[0-9]{8}$/))
-
-    if (otps.length < 2) {
-      return pushToast({
-        theme: "error",
-        message: "Failed to recover, not enough valid recovery codes were provided.",
-      })
-    }
-
     const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
 
     if (!request.ok) {
@@ -82,7 +70,7 @@
   const back = () => history.back()
 
   let loading = $state(false)
-  let input = $state("")
+  let otps = $state<string[]>([])
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -94,19 +82,16 @@
     <p>Your recovery codes have been sent!</p>
     <p>
       For security reasons, you may receive three or more emails with recovery codes in them. Please
-      paste <strong>all</strong> recovery codes into the text box below, on separate lines.
+      paste <strong>all</strong> recovery codes into the text box below.
     </p>
-    <textarea
+    <StringMultiInput bind:value={otps} placeholder="Enter your recovery codes..." />
-      rows={POMADE_SIGNERS.length + 1}
-      class="textarea textarea-bordered leading-4"
-      bind:value={input}></textarea>
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 2}>
       <Spinner {loading}>Confirm recovery</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogIn.svelte

@@ -34,7 +34,6 @@
 
   const onSuccess = async (session: Session) => {
     addSession(session)
-    pushToast({message: "Successfully logged in!"})
     setChecked("*")
     clearModals()
   }

src/app/components/LogInEmail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -17,6 +17,8 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTP from "@app/components/LogInOTP.svelte"
+  import LogInSelect from "@app/components/LogInSelect.svelte"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
   import {pushModal, clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -37,7 +39,7 @@
     try {
       const {ok, options, messages, clientSecret} = await Client.loginWithPassword(email, password)
 
-      if (!ok) {
+      if (!ok || options.length === 0) {
         console.error(messages)
 
         return pushToast({
@@ -46,21 +48,25 @@
         })
       }
 
-      const [client, peers] = options[0]!
+      if (uniq(options.map(o => o.pubkey)).length > 1) {
-      const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
+        pushModal(LogInSelect, {email, options, clientSecret})
-
-      if (res.ok && clientOptions) {
-        loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
-        pushToast({message: "Successfully logged in!"})
-        setChecked("*")
-        clearModals()
       } else {
-        console.error(res.messages)
+        const {client, peers} = options[0]
+        const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
-        pushToast({
+        if (res.ok && clientOptions) {
-          theme: "error",
+          loginWithPomade(clientOptions, email)
-          message: "Sorry, we were unable to log you in.",
+          deleteDeactivatedPomadeSessions()
-        })
+          setChecked("*")
+          clearModals()
+        } else {
+          console.error(res.messages)
+
+          pushToast({
+            theme: "error",
+            message: "Sorry, we were unable to log you in.",
+          })
+        }
       }
     } finally {
       loading = false

src/app/components/LogInKey.svelte

@@ -57,7 +57,6 @@
       }
 
       loginWithNip01(secret)
-      pushToast({message: "Successfully logged in!"})
       setChecked("*")
       clearModals()
     } catch (e) {

src/app/components/LogInOTPConfirm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -13,10 +13,12 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {clearModals} from "@app/util/modal"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
-  import {setChecked} from "@app/util/notifications"
+  import LogInSelect from "@app/components/LogInSelect.svelte"
   import {pushToast} from "@app/util/toast"
-  import {POMADE_SIGNERS} from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+  import {pushModal, clearModals} from "@app/util/modal"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
 
   type Props = {
     email: string
@@ -28,18 +30,6 @@
   const back = () => history.back()
 
   const onSubmit = async () => {
-    const otps = input
-      .split(/\n/)
-      .map(x => x.trim())
-      .filter(x => x.match(/^[0-9]{8}$/))
-
-    if (otps.length < 2) {
-      return pushToast({
-        theme: "error",
-        message: "Failed to recover, not enough valid recovery codes were provided.",
-      })
-    }
-
     loading = true
 
     try {
@@ -49,7 +39,7 @@
         otps,
       )
 
-      if (!ok) {
+      if (!ok || options.length === 0) {
         console.error(messages)
 
         return pushToast({
@@ -58,28 +48,32 @@
         })
       }
 
-      const [client, peers] = options[0]!
+      if (uniq(options.map(o => o.pubkey)).length > 1) {
-      const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
+        pushModal(LogInSelect, {email, options, clientSecret})
-
-      if (res.ok && clientOptions) {
-        loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
-        pushToast({message: "Successfully logged in!"})
-        setChecked("*")
-        clearModals()
       } else {
-        console.error(res.messages)
+        const {client, peers} = options[0]
+        const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
-        pushToast({
+        if (res.ok && clientOptions) {
-          theme: "error",
+          loginWithPomade(clientOptions, email)
-          message: "Sorry, we were unable to log you in.",
+          deleteDeactivatedPomadeSessions()
-        })
+          setChecked("*")
+          clearModals()
+        } else {
+          console.error(res.messages)
+
+          pushToast({
+            theme: "error",
+            message: "Sorry, we were unable to log you in.",
+          })
+        }
       }
     } finally {
       loading = false
     }
   }
 
-  let input = $state("")
+  let otps = $state<string[]>([])
   let loading = $state(false)
 </script>
 
@@ -92,19 +86,16 @@
     <p>Your login codes have been sent!</p>
     <p>
       For security reasons, you may receive three or more emails with login codes in them. Please
-      paste <strong>all</strong> login codes into the text box below, on separate lines.
+      paste <strong>all</strong> login codes into the text box below.
     </p>
-    <textarea
+    <StringMultiInput bind:value={otps} placeholder="Enter your login codes..." />
-      rows={POMADE_SIGNERS.length + 1}
-      class="textarea textarea-bordered leading-4"
-      bind:value={input}></textarea>
   </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}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 3}>
       <Spinner {loading}>Log In</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogInSelect.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type {AccountOption} from "@pomade/core"
+  import {Client} from "@pomade/core"
+  import {uniqBy} from "@welshman/lib"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.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 Profile from "@app/components/Profile.svelte"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
+  import {setChecked} from "@app/util/notifications"
+  import {clearModals} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  interface Props {
+    email: string
+    options: AccountOption[]
+    clientSecret: string
+  }
+
+  const {email, options, clientSecret}: Props = $props()
+
+  let loading = $state(false)
+
+  const back = () => history.back()
+
+  const selectAccount = async ({client, peers}: AccountOption) => {
+    loading = true
+
+    try {
+      const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
+
+      if (res.ok && clientOptions) {
+        loginWithPomade(clientOptions, email)
+        deleteDeactivatedPomadeSessions()
+        setChecked("*")
+        clearModals()
+      } else {
+        console.error(res.messages)
+
+        pushToast({
+          theme: "error",
+          message: "Sorry, we were unable to log you in.",
+        })
+      }
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Select Account</ModalTitle>
+      <ModalSubtitle
+        >Multiple accounts are associated with {email}. Please select one to continue.</ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-2">
+      {#each uniqBy(o => o.pubkey, options) as option (option.pubkey)}
+        <Button
+          onclick={() => selectAccount(option)}
+          disabled={loading}
+          class="card2 bg-alt flex w-full items-center p-3 text-left">
+          <Profile pubkey={option.pubkey} />
+        </Button>
+      {/each}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Spinner {loading} />
+  </ModalFooter>
+</Modal>

src/app/components/LogOut.svelte

@@ -9,8 +9,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {Push} from "@app/util/notifications"
+  import {logout} from "@app/util/logout"
-  import {kv, db} from "@app/core/storage"
 
   const back = () => history.back()
 
@@ -18,13 +17,7 @@
     loading = true
 
     try {
-      await Push.disable()
+      await logout()
-      await kv.clear()
-      await db.clear()
-
-      localStorage.clear()
-
-      window.location.href = "/"
     } catch (e) {
       console.error(e)
       loading = false

src/app/components/MenuSettings.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import {Capacitor} from "@capacitor/core"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {pubkey} from "@welshman/app"
-  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
-  import Moon from "@assets/icons/moon.svg?dataurl"
+  import GalleryMinimalistic from "@assets/icons/gallery-minimalistic.svg?dataurl"
-  import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import Shield from "@assets/icons/shield-minimalistic.svg?dataurl"
-  import Code2 from "@assets/icons/code-2.svg?dataurl"
-  import Exit from "@assets/icons/logout-3.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import Wallet from "@assets/icons/wallet.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -14,120 +11,69 @@
   import Button from "@lib/components/Button.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
-  import CardButton from "@lib/components/CardButton.svelte"
+  import Profile from "@app/components/Profile.svelte"
   import LogOut from "@app/components/LogOut.svelte"
-  import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {theme} from "@app/util/theme"
 
-  const back = () => history.back()
   const logout = () => pushModal(LogOut)
   const toggleTheme = () => theme.set($theme === "dark" ? "light" : "dark")
 </script>
 
 <Modal>
   <ModalBody>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-8 items-center py-12 max-w-[16rem] m-auto w-full">
-      <Link replaceState href="/settings/profile">
+      {#if $pubkey}
-        <CardButton class="btn-neutral">
+        <Link replaceState href="/settings/profile">
-          {#snippet icon()}
+          <Profile inert pubkey={$pubkey} />
-            <div><Icon icon={UserRounded} size={7} /></div>
-          {/snippet}
-          {#snippet title()}
-            <div>Profile</div>
-          {/snippet}
-          {#snippet info()}
-            <div>Customize your user profile</div>
-          {/snippet}
-        </CardButton>
-      </Link>
-      <Link replaceState href="/settings/alerts">
-        <CardButton class="btn-neutral">
-          {#snippet icon()}
-            <div><Icon icon={Bell} size={7} /></div>
-          {/snippet}
-          {#snippet title()}
-            <div>Alerts</div>
-          {/snippet}
-          {#snippet info()}
-            <div>Set up email digests and push notifications</div>
-          {/snippet}
-        </CardButton>
-      </Link>
-      {#if Capacitor.getPlatform() !== "ios"}
-        <Link replaceState href="/settings/wallet">
-          <CardButton class="btn-neutral">
-            {#snippet icon()}
-              <div><Icon icon={Wallet} size={7} /></div>
-            {/snippet}
-            {#snippet title()}
-              <div>Wallet</div>
-            {/snippet}
-            {#snippet info()}
-              <div>Connect a bitcoin wallet for sending social tips</div>
-            {/snippet}
-          </CardButton>
         </Link>
       {/if}
-      <Link replaceState href="/settings/relays">
+      <div class="grid grid-cols-3 gap-3 w-full">
-        <CardButton class="btn-neutral">
+        <Link
-          {#snippet icon()}
+          replaceState
-            <div><Icon icon={Server} size={7} /></div>
+          href="/settings/alerts"
-          {/snippet}
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          {#snippet title()}
+          <Icon icon={Bell} size={5} />
-            <div>Relays</div>
+          Alerts
-          {/snippet}
+        </Link>
-          {#snippet info()}
+        {#if Capacitor.getPlatform() !== "ios"}
-            <div>Control how {PLATFORM_NAME} talks to the network</div>
+          <Link
-          {/snippet}
+            replaceState
-        </CardButton>
+            href="/settings/wallet"
-      </Link>
+            class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-      <Link replaceState href="/settings/content">
+            <Icon icon={Wallet} size={5} />
-        <CardButton class="btn-neutral">
+            Wallet
-          {#snippet icon()}
+          </Link>
-            <div><Icon icon={Settings} size={7} /></div>
+        {/if}
-          {/snippet}
+        <Link
-          {#snippet title()}
+          replaceState
-            <div>Settings</div>
+          href="/settings/relays"
-          {/snippet}
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          {#snippet info()}
+          <Icon icon={Server} size={5} />
-            <div>Get into the details about how {PLATFORM_NAME} works</div>
+          Relays
-          {/snippet}
+        </Link>
-        </CardButton>
+        <Link
-      </Link>
+          replaceState
-      <Button onclick={toggleTheme}>
+          href="/settings/content"
-        <CardButton class="btn-neutral">
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          {#snippet icon()}
+          <Icon icon={GalleryMinimalistic} size={5} />
-            <div><Icon icon={Moon} size={7} /></div>
+          Content
-          {/snippet}
+        </Link>
-          {#snippet title()}
+        <Link
-            <div>Theme</div>
+          replaceState
-          {/snippet}
+          href="/settings/privacy"
-          {#snippet info()}
+          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-            <div>Switch between light and dark mode</div>
+          <Icon icon={Shield} size={5} />
-          {/snippet}
+          Privacy
-        </CardButton>
+        </Link>
-      </Button>
+      </div>
-      <Link replaceState href="/settings/about">
+      <div class="flex gap-3 items-center opacity-75 text-sm">
-        <CardButton class="btn-neutral">
+        <Button onclick={toggleTheme}>Theme</Button>
-          {#snippet icon()}
+        /
-            <div><Icon icon={Code2} size={7} /></div>
+        <Link replaceState href="/settings/about">About</Link>
-          {/snippet}
+        /
-          {#snippet title()}
+        <Button onclick={logout}>Log Out</Button>
-            <div>About</div>
+      </div>
-          {/snippet}
-          {#snippet info()}
-            <div>Learn about {PLATFORM_NAME} and support the developer</div>
-          {/snippet}
-        </CardButton>
-      </Link>
-      <Button onclick={logout} class="btn btn-neutral">
-        <Icon icon={Exit} /> Log Out
-      </Button>
-      <Button class="btn btn-link w-full md:hidden" onclick={back}>
-        <Icon icon={AltArrowLeft} />
-        Go back
-      </Button>
     </div>
   </ModalBody>
 </Modal>

src/app/components/ModalContainer.svelte

@@ -2,38 +2,47 @@
   import {onMount, mount, unmount} from "svelte"
   import Drawer from "@lib/components/Drawer.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
-  import {modal, clearModals} from "@app/util/modal"
+  import {modal, modalStack, popModal} from "@app/util/modal"
 
-  const closeModals = () => {
+  const closeModal = () => {
     if ($modal && !$modal.options.noEscape) {
-      clearModals()
+      popModal()
     }
   }
 
   const onKeyDown = (e: any) => {
     if (e.code === "Escape" && e.target === document.body) {
-      closeModals()
+      closeModal()
     }
   }
 
   let element: HTMLElement
-  let instance: any | undefined
+  const instances: Record<string, any> = {}
 
   onMount(() => {
-    return modal.subscribe($modal => {
+    return modalStack.subscribe($modalStack => {
-      if (instance) {
+      const ids = $modalStack.map(({id}) => id)
-        unmount(instance, {outro: true})
+
-        instance = undefined
+      for (const [id, instance] of Object.entries(instances)) {
+        if (!ids.includes(id)) {
+          unmount(instance, {outro: true})
+          delete instances[id]
+        }
       }
 
-      if ($modal) {
+      for (const item of $modalStack) {
-        const {options, component, props} = $modal
+        if (instances[item.id]) {
+          continue
+        }
+
+        const {options, component, props} = item
         const wrapper = options.drawer ? Drawer : Dialog
 
-        instance = mount(wrapper as any, {
+        instances[item.id] = mount(wrapper as any, {
           target: element,
           props: {
-            onClose: closeModals,
+            onClose: closeModal,
+            noEscape: options.noEscape,
             fullscreen: options.fullscreen,
             children: {component, props},
           },

src/app/components/NewNotificationSound.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {notificationSettings} from "@app/core/state"
-  import {onNotification} from "@app/util/notifications"
+  import {onNotification} from "@app/util/push"
 
   let audioElement: HTMLAudioElement
 

src/app/components/NoteContentClassified.svelte

@@ -22,8 +22,8 @@
   {#if props.event.content}
     <Content {...props} />
   {/if}
-  <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9">
+  <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9 gap-2">
-    {#each images as image (image)}
+    {#each images as image, i (i + image)}
       <ContentLinkBlock event={props.event} value={{url: image}} />
     {/each}
   </div>

src/app/components/PasswordReset.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import {Client} from "@pomade/core"
+  import type {SessionPomade} from "@welshman/app"
+  import {session} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.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 StringMultiInput from "@lib/components/StringMultiInput.svelte"
+  import PasswordResetConfirm from "@app/components/PasswordResetConfirm.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {pushModal} from "@app/util/modal"
+  import {getPomadeClient} from "@app/util/pomade"
+
+  type Props = {
+    peersByPrefix: Map<string, string>
+  }
+
+  const {peersByPrefix}: Props = $props()
+
+  const {email} = $session as SessionPomade
+
+  const confirmRecovery = async () => {
+    const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
+
+    if (!request.ok) {
+      console.log(request.messages)
+
+      return pushToast({
+        theme: "error",
+        message: `Failed to validate email ownership: ${request.messages[0]?.res?.message.toLowerCase()}`,
+      })
+    }
+
+    const client = await getPomadeClient()
+
+    if (!client) {
+      throw new Error("Unable to get client during password reset flow")
+    }
+
+    const result = await Client.selectRecovery(
+      request.clientSecret,
+      await client.getPubkey(),
+      client.peers,
+    )
+
+    if (!result.ok) {
+      console.log(result.messages)
+
+      return pushToast({
+        theme: "error",
+        message: `Failed to validate email ownership: ${result.messages[0]?.res?.message.toLowerCase()}`,
+      })
+    }
+
+    pushModal(PasswordResetConfirm, {userSecret: result.userSecret})
+  }
+
+  const submit = async () => {
+    loading = true
+
+    try {
+      await confirmRecovery()
+    } finally {
+      loading = false
+    }
+  }
+
+  const back = () => history.back()
+
+  let loading = $state(false)
+  let otps = $state<string[]>([])
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Update your Password</ModalTitle>
+      <ModalSubtitle>Confirm your Email</ModalSubtitle>
+    </ModalHeader>
+    <p>Let's start by confirming your email.</p>
+    <p>
+      For security reasons, you may receive three or more emails with confirmation codes in them.
+      Please paste <strong>all</strong> confirmation codes into the text box below.
+    </p>
+    <StringMultiInput bind:value={otps} placeholder="Enter your confirmation codes..." />
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 2}>
+      <Spinner {loading}>Continue</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/PasswordResetConfirm.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import {Client} from "@pomade/core"
+  import {session} from "@welshman/app"
+  import type {SessionPomade} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  import Key from "@assets/icons/key.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.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 {loginWithPomade, deleteCurrentPomadeSession} from "@app/util/pomade"
+  import {clearModals} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    userSecret: string
+  }
+
+  const {userSecret}: Props = $props()
+
+  const {email} = $session as SessionPomade
+
+  const back = () => history.back()
+
+  const onSubmit = async () => {
+    if (password.trim().length < 12) {
+      return pushToast({
+        theme: "error",
+        message: "Password must be at least 12 characters long.",
+      })
+    }
+
+    loading = true
+
+    try {
+      pushToast({
+        timeout: 60_000,
+        message: "Registering your new password, please wait...",
+      })
+
+      const {clientOptions, ...registerRes} = await Client.register(2, 3, userSecret)
+
+      if (!registerRes.ok) {
+        return pushToast({
+          theme: "error",
+          message: "Failed to register your new password! Please try again.",
+        })
+      }
+
+      const setupRes = await new Client(clientOptions).setupRecovery(email, password)
+
+      if (!setupRes.ok) {
+        const message = setupRes.messages[0]?.res?.message || "Please try again."
+
+        return pushToast({
+          theme: "error",
+          message: `Failed to register your new password! ${message}.`,
+        })
+      }
+
+      await deleteCurrentPomadeSession()
+
+      pushToast({message: "Your password has been updated!"})
+      loginWithPomade(clientOptions, email)
+      clearModals()
+    } catch (e) {
+      console.error(e)
+
+      pushToast({
+        theme: "error",
+        message: "Failed to register your new password! Please try again.",
+      })
+    } finally {
+      loading = false
+    }
+  }
+
+  let password = $state("")
+  let loading = $state(false)
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(onSubmit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Update your Password</ModalTitle>
+      <ModalSubtitle>Please provide your new password.</ModalSubtitle>
+    </ModalHeader>
+    <FieldInline>
+      {#snippet label()}
+        <p>New Password*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <Icon icon={Key} />
+          <input type="password" bind:value={password} />
+        </label>
+      {/snippet}
+    </FieldInline>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit" disabled={loading || !password}>
+      <Spinner {loading}>Continue</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/PomadeSessions.svelte

@@ -1,51 +1,30 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import {Client} from "@pomade/core"
-  import type {SessionItem} from "@pomade/core"
   import {session, isPomadeSession} from "@welshman/app"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import {pushToast} from "@app/util/toast"
-  import {onMount} from "svelte"
+  import {loadOtherPomadeSessions} from "@app/util/pomade"
+  import type {PomadeSessionWithPeers} from "@app/util/pomade"
 
-  type SessionWithPeers = SessionItem & {peers: string[]}
+  const toggleMenu = (client: string) => {
-
+    menuClient = menuClient === client ? "" : client
-  let sessions = $state<SessionWithPeers[]>([])
-  let deletingSession = $state<string | null>(null)
-
-  const loadSessions = async () => {
-    if (!isPomadeSession($session)) return
-
-    const client = new Client($session.clientOptions)
-    const result = await client.listSessions()
-    const pubkey = await client.getPubkey()
-
-    if (result.ok) {
-      // Group sessions by client pubkey and collect peers
-      const sessionMap = new Map<string, SessionWithPeers>()
-
-      for (const message of result.messages) {
-        if (!message.res?.items) continue
-
-        for (const item of message.res.items) {
-          const existing = sessionMap.get(item.client)
-
-          if (existing) {
-            existing.peers.push(message.url)
-          } else if (item.client !== pubkey) {
-            sessionMap.set(item.client, {...item, peers: [message.url]})
-          }
-        }
-      }
-
-      sessions = Array.from(sessionMap.values())
-    }
   }
 
-  const deleteSession = async (sessionItem: SessionWithPeers) => {
+  const closeMenu = () => {
-    if (!isPomadeSession($session)) return
+    menuClient = ""
+  }
 
-    deletingSession = sessionItem.client
+  let menuClient = $state("")
+  let sessions = $state<PomadeSessionWithPeers[]>([])
+
+  const deleteSession = async (sessionItem: PomadeSessionWithPeers) => {
+    if (!isPomadeSession($session)) return
 
     try {
       const client = new Client($session.clientOptions)
@@ -70,8 +49,6 @@
         theme: "error",
         message: "Failed to delete session",
       })
-    } finally {
-      deletingSession = null
     }
   }
 
@@ -85,7 +62,9 @@
   }
 
   onMount(() => {
-    loadSessions()
+    loadOtherPomadeSessions().then(_sessions => {
+      sessions = _sessions || []
+    })
   })
 </script>
 
@@ -93,28 +72,46 @@
   <div class="flex flex-col gap-4 border-t border-solid border-base-100 pt-4">
     <strong>Other Sessions</strong>
     {#each sessions as sessionItem (sessionItem.client)}
-      <div class="flex justify-between text-sm">
+      <div class="flex flex-col gap-2">
-        <div class="flex flex-col gap-1">
+        <div class="flex justify-between items-center">
-          <span>{sessionItem.client.slice(0, 8)}</span>
+          <div class="flex gap-3 items-center text-sm">
-          <div class="flex gap-1">
+            <span>Session {sessionItem.client.slice(0, 8)}</span>
-            <div class="badge badge-neutral">
+            <span class="opacity-75">
-              Created {formatDate(sessionItem.created_at)}
+              {#if sessionItem.deactivated_at}
-            </div>
+                Deactivated
-            <div class="badge badge-neutral">
+              {/if}
-              Last active: {formatDate(sessionItem.last_activity)}
+            </span>
-            </div>
+          </div>
+          <div class="relative">
+            <Button
+              class="btn btn-circle btn-ghost btn-sm"
+              onclick={() => toggleMenu(sessionItem.client)}>
+              <Icon icon={MenuDots} />
+            </Button>
+            {#if menuClient === sessionItem.client}
+              <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 onclick={() => deleteSession(sessionItem)}>
+                      <Icon icon={TrashBin2} />
+                      Delete Session
+                    </Button>
+                  </li>
+                </ul>
+              </Popover>
+            {/if}
+          </div>
+        </div>
+        <div class="flex gap-1">
+          <div class="badge badge-neutral">
+            Created {formatDate(sessionItem.created_at)}
+          </div>
+          <div class="badge badge-neutral">
+            Active {formatDate(sessionItem.last_activity)}
           </div>
         </div>
-        <Button
-          class="btn btn-error btn-sm"
-          disabled={deletingSession !== null}
-          onclick={() => deleteSession(sessionItem)}>
-          {#if deletingSession === sessionItem.client}
-            <span class="loading loading-spinner"></span>
-          {:else}
-            <Icon icon={TrashBin2} />
-          {/if}
-        </Button>
       </div>
     {/each}
   </div>

src/app/components/PrimaryNav.svelte

@@ -1,24 +1,20 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {splitAt} from "@welshman/lib"
   import {userProfile} from "@welshman/app"
-  import Widget from "@assets/icons/widget.svg?dataurl"
-  import Compass from "@assets/icons/compass.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
+  import Planet from "@assets/icons/planet-3.svg?dataurl"
-  import SettingsMinimalistic from "@assets/icons/settings-minimalistic.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
   import Divider from "@lib/components/Divider.svelte"
-  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
-  import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
+  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
-  import {userSpaceUrls, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/core/state"
+  import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
+  import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
-  import {goToLastChat} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   type Props = {
     children?: Snippet
@@ -26,46 +22,17 @@
 
   const {children}: Props = $props()
 
+  const chatHandler = () => goToChat()
+
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  let windowHeight = $state(0)
-
-  const itemHeight = 56
-  const navPadding = 8 * itemHeight
-  const itemLimit = $derived((windowHeight - navPadding) / itemHeight)
-  const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, $userSpaceUrls))
   const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
-  const otherSpaceNotifications = $derived(secondarySpaceUrls.some(p => $notifications.has(p)))
 </script>
 
-<svelte:window bind:innerHeight={windowHeight} />
-
 <div
   class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
   <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
-    <div>
+    <PrimaryNavSpaces />
-      {#each PLATFORM_RELAYS as url (url)}
-        <PrimaryNavItemSpace {url} />
-      {:else}
-        <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
-          <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
-        </PrimaryNavItem>
-        <Divider />
-        {#each primarySpaceUrls as url (url)}
-          <PrimaryNavItemSpace {url} />
-        {/each}
-        <PrimaryNavItem
-          href="/spaces"
-          title="All Spaces"
-          class="tooltip-right"
-          notification={otherSpaceNotifications}>
-          <ImageIcon alt="All Spaces" src={Widget} size={8} />
-        </PrimaryNavItem>
-        <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
-          <ImageIcon alt="Add a Space" src={Compass} size={8} />
-        </PrimaryNavItem>
-      {/each}
-    </div>
     {#if PLATFORM_RELAYS.length > 0}
       <Divider />
     {/if}
@@ -83,7 +50,7 @@
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        onclick={goToLastChat}
+        onclick={chatHandler}
         class="tooltip-right"
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
@@ -105,18 +72,19 @@
   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">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-6">
-      <PrimaryNavItem title="Home" href="/home">
+      <PrimaryNavItem title="Search" href="/people">
-        <ImageIcon alt="Home" src={HomeSmile} size={8} />
+        <ImageIcon alt="Search" src={Magnifier} size={8} />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        onclick={goToLastChat}
+        href="/chat"
+        onclick={chatHandler}
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
-          <ImageIcon alt="Spaces" src={SettingsMinimalistic} size={8} />
+          <ImageIcon alt="Spaces" src={Planet} size={8} />
         </PrimaryNavItem>
       {/if}
     </div>

src/app/components/PrimaryNavSpaces.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import {splitAt} from "@welshman/lib"
+  import Widget from "@assets/icons/widget.svg?dataurl"
+  import Compass from "@assets/icons/compass.svg?dataurl"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
+  import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
+  import {userSpaceUrls, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/core/state"
+  import {notifications} from "@app/util/notifications"
+
+  let windowHeight = $state(0)
+
+  const itemHeight = 56
+  const navPadding = 8 * itemHeight
+  const itemLimit = $derived((windowHeight - navPadding) / itemHeight)
+  const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, $userSpaceUrls))
+  const otherSpaceNotifications = $derived(secondarySpaceUrls.some(p => $notifications.has(p)))
+</script>
+
+<svelte:window bind:innerHeight={windowHeight} />
+
+<div>
+  {#each PLATFORM_RELAYS as url (url)}
+    <PrimaryNavItemSpace {url} />
+  {:else}
+    <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
+      <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
+    </PrimaryNavItem>
+    <Divider />
+    {#each primarySpaceUrls as url (url)}
+      <PrimaryNavItemSpace {url} />
+    {/each}
+    <PrimaryNavItem
+      href="/spaces"
+      title="All Spaces"
+      class="tooltip-right"
+      notification={otherSpaceNotifications}>
+      <ImageIcon alt="All Spaces" src={Widget} size={8} />
+    </PrimaryNavItem>
+    <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
+      <ImageIcon alt="Add a Space" src={Compass} size={8} />
+    </PrimaryNavItem>
+  {/each}
+</div>

src/app/components/Profile.svelte

@@ -17,28 +17,43 @@
     url?: string
     showPubkey?: boolean
     avatarSize?: number
+    inert?: boolean
   }
 
-  const {pubkey, url, showPubkey, avatarSize = 10}: Props = $props()
+  const {pubkey, url, showPubkey, inert, avatarSize = 10}: Props = $props()
 
   const relays = removeUndefined([url])
   const profileDisplay = deriveProfileDisplay(pubkey, relays)
   const handle = deriveHandleForPubkey(pubkey)
 
-  const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
+  const openProfile = () => {
+    pushModal(ProfileDetail, {pubkey, url})
+  }
 
   const copyPubkey = () => clip(nip19.npubEncode(pubkey))
 </script>
 
 <div class="flex max-w-full items-start gap-3">
-  <Button onclick={openProfile} class="py-1">
+  {#if inert}
-    <ProfileCircle {pubkey} size={avatarSize} />
+    <span class="py-1">
-  </Button>
+      <ProfileCircle {pubkey} size={avatarSize} />
+    </span>
+  {:else}
+    <Button onclick={openProfile} class="py-1">
+      <ProfileCircle {pubkey} size={avatarSize} />
+    </Button>
+  {/if}
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
-      <Button onclick={openProfile} class="text-bold overflow-hidden text-ellipsis">
+      {#if inert}
-        {$profileDisplay}
+        <span class="text-bold overflow-hidden text-ellipsis">
-      </Button>
+          {$profileDisplay}
+        </span>
+      {:else}
+        <Button onclick={openProfile} class="text-bold overflow-hidden text-ellipsis">
+          {$profileDisplay}
+        </Button>
+      {/if}
       <WotScore {pubkey} />
     </div>
     {#if $handle}

src/app/components/ProfileCircle.svelte

@@ -6,7 +6,7 @@
   import ImageIcon from "@lib/components/ImageIcon.svelte"
 
   type Props = {
-    pubkey: string
+    pubkey?: string
     class?: string
     size?: number
     url?: string

src/app/components/ProfileDelete.svelte

@@ -23,9 +23,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {INDEXER_RELAYS, PLATFORM_NAME, userSpaceUrls} from "@app/core/state"
-  import {kv, db} from "@app/core/storage"
   import {pushToast} from "@app/util/toast"
-  import {Push} from "@app/util/notifications"
+  import {logout} from "@app/util/logout"
 
   let progress: number | undefined = $state(undefined)
   let confirmText = $state("")
@@ -88,13 +87,7 @@
     await sleep(2000)
 
     // Goodbye forever!
-    await Push.disable()
+    await logout()
-    await kv.clear()
-    await db.clear()
-
-    localStorage.clear()
-
-    window.location.href = "/"
   }
 
   const confirm = async () => {

src/app/components/ProfileDetail.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {goto} from "$app/navigation"
   import {removeUndefined} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
   import {
@@ -30,9 +29,10 @@
   import EventInfo from "@app/components/EventInfo.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import {pubkeyLink, deriveUserIsSpaceAdmin, deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import {addSpaceMembers} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {makeChatPath} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   export type Props = {
     pubkey: string
@@ -51,11 +51,9 @@
 
   const back = () => history.back()
 
-  const chatPath = makeChatPath([pubkey])
-
   const showInfo = () => pushModal(EventInfo, {url, event: $profile!.event})
 
-  const openChat = () => goto(chatPath)
+  const openChat = () => goToChat([pubkey])
 
   const toggleMenu = (pubkey: string) => {
     showMenu = !showMenu
@@ -85,10 +83,7 @@
     })
 
   const restoreMember = async () => {
-    const {error} = await manageRelay(url!, {
+    const error = await addSpaceMembers(url!, [pubkey])
-      method: ManagementMethod.AllowPubkey,
-      params: [pubkey],
-    })
 
     if (error) {
       pushToast({theme: "error", message: error})

src/app/components/ProfileEdit.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import type {Profile} from "@welshman/util"
   import {getTag, makeProfile} from "@welshman/util"
-  import {pubkey, profilesByPubkey} from "@welshman/app"
+  import {pubkey, profilesByPubkey, waitForThunkError} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
   import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -17,11 +19,33 @@
 
   const back = () => history.back()
 
-  const onsubmit = ({profile, shouldBroadcast}: {profile: Profile; shouldBroadcast: boolean}) => {
+  const onsubmit = async ({
-    updateProfile({profile, shouldBroadcast})
+    profile,
-    pushToast({message: "Your profile has been updated!"})
+    shouldBroadcast,
-    clearModals()
+  }: {
+    profile: Profile
+    shouldBroadcast: boolean
+  }) => {
+    loading = true
+
+    try {
+      const error = await waitForThunkError(updateProfile({profile, shouldBroadcast}))
+
+      if (error) {
+        pushToast({
+          theme: "error",
+          message: `Failed to update your profile: ${errorMessage(error)}`,
+        })
+      } else {
+        pushToast({message: "Your profile has been updated!"})
+        clearModals()
+      }
+    } finally {
+      loading = false
+    }
   }
+
+  let loading = $state(false)
 </script>
 
 <ProfileEditForm {initialValues} {onsubmit}>
@@ -30,6 +54,9 @@
       <Icon icon={AltArrowLeft} />
       Go Back
     </Button>
-    <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading} />
+      Save Changes
+    </Button>
   {/snippet}
 </ProfileEditForm>

src/app/components/RelayAdd.svelte

@@ -1,30 +1,70 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {SvelteSet} from "svelte/reactivity"
   import type {Readable} from "svelte/store"
   import {tryCatch} from "@welshman/lib"
-  import {isShareableRelayUrl, normalizeRelayUrl} from "@welshman/util"
+  import {isShareableRelayUrl, isIPAddress, normalizeRelayUrl} from "@welshman/util"
-  import {relaySearch} from "@welshman/app"
+  import type {Thunk} from "@welshman/app"
+  import {waitForThunkError, relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
+  import {errorMessage} from "@lib/util"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RelayItem from "@app/components/RelayItem.svelte"
+  import {pushToast} from "@app/util/toast"
 
   interface Props {
     relays: Readable<string[]>
-    addRelay: (url: string) => void
+    addRelay: (url: string) => Promise<Thunk>
+    matchRelay?: (url: string) => boolean
   }
 
-  const {relays, addRelay}: Props = $props()
+  const {relays, addRelay, matchRelay}: Props = $props()
+
+  const back = () => history.back()
+
+  const customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
+
+  const add = async (url: string) => {
+    loading.add(url)
+
+    try {
+      const error = await waitForThunkError(await addRelay(url))
+
+      if (error) {
+        pushToast({
+          theme: "error",
+          message: `Failed to add relay: ${errorMessage(error)}`,
+        })
+      }
+    } finally {
+      loading.delete(url)
+    }
+  }
 
   let term = $state("")
   let limit = $state(20)
   let element: Element | undefined = $state()
 
-  const customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
+  const loading = $state(new SvelteSet<string>())
+
+  const searchResults = $derived(
+    $relaySearch
+      .searchValues(term)
+      .filter(url => {
+        if (matchRelay?.(url) === false) return false
+        if ($relays.includes(url)) return false
+        if (isIPAddress(url)) return false
+
+        return true
+      })
+      .slice(0, limit),
+  )
 
   onMount(() => {
     const scroller = createScroller({
@@ -52,23 +92,35 @@
         <RelayItem url={term}>
           <Button
             class="btn btn-outline btn-sm flex items-center"
-            onclick={() => addRelay(customUrl)}>
+            disabled={loading.has(customUrl)}
-            <Icon icon={AddCircle} />
+            onclick={() => add(customUrl)}>
+            {#if loading.has(customUrl)}
+              <span class="loading loading-spinner loading-sm"></span>
+            {:else}
+              <Icon icon={AddCircle} />
+            {/if}
             Add Relay
           </Button>
         </RelayItem>
       {/if}
-      {#each $relaySearch
+      {#each searchResults as url (url)}
-        .searchValues(term)
-        .filter(url => !$relays.includes(url))
-        .slice(0, limit) as url (url)}
         <RelayItem {url}>
-          <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
+          <Button
-            <Icon icon={AddCircle} />
+            class="btn btn-outline btn-sm flex items-center"
+            disabled={loading.has(url)}
+            onclick={() => add(url)}>
+            {#if loading.has(url)}
+              <span class="loading loading-spinner loading-sm"></span>
+            {:else}
+              <Icon icon={AddCircle} />
+            {/if}
             Add Relay
           </Button>
         </RelayItem>
       {/each}
     </div>
   </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-primary flex-grow" onclick={back}>Done</Button>
+  </ModalFooter>
 </Modal>

src/app/components/RelayList.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type {Readable} from "svelte/store"
+  import {SvelteSet} from "svelte/reactivity"
+  import {waitForThunkError} from "@welshman/app"
+  import type {Thunk} from "@welshman/app"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
+  import {errorMessage} from "@lib/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import RelayAdd from "@app/components/RelayAdd.svelte"
+  import RelayItem from "@app/components/RelayItem.svelte"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  interface Props {
+    title: string
+    subtitle: string
+    relays: Readable<string[]>
+    addRelay: (url: string) => Promise<Thunk>
+    removeRelay: (url: string) => Promise<Thunk>
+    matchRelay?: (url: string) => boolean
+  }
+
+  const {title, subtitle, relays, addRelay, removeRelay, matchRelay}: Props = $props()
+
+  const back = () => history.back()
+
+  const add = () => pushModal(RelayAdd, {relays, addRelay, matchRelay})
+
+  const remove = async (url: string) => {
+    loading.add(url)
+
+    try {
+      const error = await waitForThunkError(await removeRelay(url))
+
+      if (error) {
+        pushToast({
+          theme: "error",
+          message: `Failed to remove relay: ${errorMessage(error)}`,
+        })
+      }
+    } finally {
+      loading.delete(url)
+    }
+  }
+
+  const loading = $state(new SvelteSet<string>())
+</script>
+
+<Modal>
+  <ModalBody>
+    <h2 class="text-xl">{title}</h2>
+    <p class="text-sm">{subtitle}</p>
+    {#each $relays.toSorted() as url (url)}
+      <RelayItem {url}>
+        <Button
+          class="btn btn-sm btn-neutral"
+          disabled={loading.has(url)}
+          onclick={() => remove(url)}>
+          {#if loading.has(url)}
+            <span class="loading loading-spinner loading-sm"></span>
+          {:else}
+            <Icon icon={CloseCircle} />
+          {/if}
+          Remove
+        </Button>
+      </RelayItem>
+    {:else}
+      <p class="text-center py-12 flex justify-center items-center gap-2">
+        <Icon icon={DangerTriangle} />
+        No relay selections found.
+      </p>
+    {/each}
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" onclick={add}>
+      Add Relays
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/RelaySettingsHealthCheck.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import Stars from "@assets/icons/stars.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import type {HealthCheck} from "@app/util/health"
+  import {applyHealthCheck} from "@app/util/health"
+
+  type Props = {
+    healthCheck: HealthCheck
+  }
+
+  const {healthCheck}: Props = $props()
+
+  const apply = () => applyHealthCheck(healthCheck)
+</script>
+
+<div class="card2 card2-sm bg-alt flex justify-between">
+  <div class="flex flex-col gap-1">
+    <strong>{healthCheck.title}</strong>
+    <p class="text-sm">{healthCheck.description}</p>
+  </div>
+  <Button class="btn btn-neutral btn-sm" onclick={apply}>
+    <Icon icon={Stars} />
+    {healthCheck.action}
+  </Button>
+</div>

src/app/components/RelaySettingsHealthChecks.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Stars from "@assets/icons/stars.svg?dataurl"
+  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
+  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
+  import Stethoscope from "@assets/icons/stethoscope.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import RelaySettingsHealthCheck from "@app/components/RelaySettingsHealthCheck.svelte"
+  import {PLATFORM_NAME} from "@app/core/state"
+  import {pendingHealthChecks, applyHealthCheck} from "@app/util/health"
+
+  const applyAll = () => {
+    for (const healthCheck of $pendingHealthChecks) {
+      applyHealthCheck(healthCheck)
+    }
+  }
+</script>
+
+<div class="card2 bg-alt flex flex-col gap-4 shadow-md">
+  <div class="flex justify-between items-center">
+    <strong class="flex items-center gap-3 text-lg">
+      <Icon icon={Stethoscope} />
+      Health Check
+    </strong>
+    <span class="flex items-center gap-2 text-sm">
+      <Icon icon={$pendingHealthChecks.length === 0 ? CheckCircle : DangerTriangle} />
+      {$pendingHealthChecks.length} Issue{$pendingHealthChecks.length === 1 ? "" : "s"} Detected
+    </span>
+  </div>
+  <p>
+    {PLATFORM_NAME} actively checks your connection to the network in the background to discover relays
+    that are offline, that you don't have access to, or are otherwise causing trouble.
+  </p>
+  {#each $pendingHealthChecks as healthCheck}
+    <RelaySettingsHealthCheck {healthCheck} />
+  {/each}
+  {#if $pendingHealthChecks.length > 0}
+    <Button class="btn btn-primary" onclick={applyAll}>
+      <Icon icon={Stars} />
+      Apply All Recommendations
+    </Button>
+  {/if}
+</div>

src/app/components/RelaySettingsItem.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type {Readable} from "svelte/store"
+  import Check from "@assets/icons/check.svg?dataurl"
+  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import RelayList from "@app/components/RelayList.svelte"
+  import {pushModal} from "@app/util/modal"
+
+  interface Props {
+    icon: string
+    title: string
+    subtitle: string
+    relays: Readable<string[]>
+    addRelay: (url: string) => unknown
+    removeRelay: (url: string) => unknown
+    matchRelay?: (url: string) => boolean
+  }
+
+  const {icon, title, relays, subtitle, addRelay, removeRelay, matchRelay}: Props = $props()
+
+  const onclick = () =>
+    pushModal(RelayList, {title, subtitle, relays, addRelay, removeRelay, matchRelay})
+</script>
+
+<button
+  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">
+      <Icon {icon} />
+    </div>
+    <div class="flex flex-col gap-1">
+      <p class="text-lg">
+        {title}
+      </p>
+      <p class="text-sm">
+        {subtitle}
+      </p>
+    </div>
+  </div>
+  <div class="flex items-center justify-end gap-1">
+    {#if $relays.length <= 1}
+      <Icon icon={DangerTriangle} />
+    {:else}
+      <Icon icon={Check} />
+    {/if}
+    {$relays.length}
+  </div>
+</button>

src/app/components/ReportDetails.svelte

@@ -26,7 +26,7 @@
 
   const back = () => history.back()
 
-  const onDelete = () => {
+  const onResolved = () => {
     if ($reports.size === 0) {
       back()
     }
@@ -40,7 +40,7 @@
       <ModalSubtitle>All reports for this event are shown below.</ModalSubtitle>
     </ModalHeader>
     {#each $reports.values() as report (report.id)}
-      <ReportItem {url} event={report} {onDelete} />
+      <ReportItem {url} event={report} {onResolved} />
     {/each}
   </ModalBody>
   <ModalFooter>

src/app/components/ReportItem.svelte

@@ -15,10 +15,10 @@
   type Props = {
     url: string
     event: TrustedEvent
-    onDelete?: () => void
+    onResolved?: () => void
   }
 
-  const {url, event, onDelete}: Props = $props()
+  const {url, event, onResolved}: Props = $props()
 
   const etag = getTag("e", event.tags)
   const ptag = getTag("p", event.tags)
@@ -45,7 +45,7 @@
         {/if}
       </span>
     </div>
-    <ReportMenu {url} {event} {onDelete} />
+    <ReportMenu {url} {event} {onResolved} />
   </div>
   {#if event.content}
     <div class="border-l-2 border-primary pl-3">

src/app/components/ReportMenu.svelte

@@ -20,10 +20,10 @@
   type Props = {
     url: string
     event: TrustedEvent
-    onDelete?: () => void
+    onResolved?: () => void
   }
 
-  const {url, event, onDelete}: Props = $props()
+  const {url, event, onResolved}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
@@ -40,7 +40,7 @@
 
   const deleteReport = async () => {
     publishDelete({event, relays: [url], protect: await shouldProtect})
-    onDelete?.()
+    onResolved?.()
   }
 
   const dismissReport = async () => {
@@ -54,7 +54,7 @@
     } else {
       pushToast({message: "Content has successfully been deleted!"})
       repository.removeEvent(event.id)
-      onDelete?.()
+      onResolved?.()
     }
   }
 
@@ -77,7 +77,7 @@
           repository.removeEvent(event.id)
           repository.removeEvent(id)
           history.back()
-          setTimeout(() => onDelete?.())
+          setTimeout(() => onResolved?.())
         }
       },
     })
@@ -101,7 +101,7 @@
           pushToast({message: "User has successfully been banned!"})
           repository.removeEvent(event.id)
           history.back()
-          setTimeout(() => onDelete?.())
+          setTimeout(() => onResolved?.())
         }
       },
     })

src/app/components/RoomDetail.svelte

@@ -16,7 +16,7 @@
   import Lock from "@assets/icons/lock.svg?dataurl"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -255,7 +255,7 @@
       <strong class="text-lg">Room Settings</strong>
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-2">
-          <Icon icon={VolumeLoud} />
+          <Icon icon={Bell} />
           <span>Notifications</span>
         </div>
         <input

src/app/components/RoomForm.svelte

@@ -5,6 +5,7 @@
   import {waitForThunkError, createRoom, editRoom, joinRoom} from "@welshman/app"
   import StickerSmileSquare from "@assets/icons/sticker-smile-square.svg?dataurl"
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
+  import Volume from "@assets/icons/volume.svg?dataurl"
   import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
   import {preventDefault} from "@lib/html"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -15,6 +16,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {pushToast} from "@app/util/toast"
   import {uploadFile} from "@app/core/commands"
+  import {deriveHasLivekit, getRoomType, RoomType} from "@app/core/state"
 
   type Props = {
     url: string
@@ -27,12 +29,25 @@
   const {url, header, footer, onsubmit, initialValues = makeRoomMeta()}: Props = $props()
 
   const values = $state(initialValues)
+  const relayHasLivekit = deriveHasLivekit(url)
 
   const submit = async () => {
     const room = $state.snapshot(values)
 
+    if (roomType === RoomType.Voice && !$relayHasLivekit) {
+      return pushToast({
+        theme: "error",
+        message: "This relay does not support voice rooms.",
+      })
+    }
+
+    room.livekit = roomType === RoomType.Voice
+
     if (imageFile) {
-      const {error, result} = await uploadFile(imageFile, {maxWidth: 256, maxHeight: 256})
+      const {error, result} = await uploadFile(imageFile, {
+        maxWidth: 256,
+        maxHeight: 256,
+      })
 
       if (error) {
         return pushToast({theme: "error", message: error})
@@ -76,6 +91,7 @@
   let loading = $state(false)
   let imageFile = $state<File | undefined>()
   let imagePreview = $state(initialValues.picture)
+  let roomType = $state(getRoomType(initialValues))
 
   const handleImageUpload = async (event: Event) => {
     const file = (event.target as HTMLInputElement).files?.[0]
@@ -145,7 +161,7 @@
           {#if imagePreview}
             <ImageIcon src={imagePreview} alt="" class="rounded-lg" />
           {:else}
-            <Icon icon={Hashtag} />
+            <Icon icon={roomType === RoomType.Voice ? Volume : Hashtag} />
           {/if}
           <input bind:value={values.name} class="grow" type="text" />
         </label>
@@ -161,6 +177,22 @@
         </label>
       {/snippet}
     </FieldInline>
+    {#if $relayHasLivekit}
+      <FieldInline>
+        {#snippet label()}
+          <p>Room type</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={roomType}
+            aria-label="Room type">
+            <option value={RoomType.Text}>Text</option>
+            <option value={RoomType.Voice}>Voice</option>
+          </select>
+        {/snippet}
+      </FieldInline>
+    {/if}
     <strong class="md:hidden">Permissions</strong>
     <div class="flex items-center gap-2">
       <input type="checkbox" class="checkbox" bind:checked={values.isRestricted} />
@@ -176,7 +208,7 @@
     </div>
     <div class="flex items-center gap-2">
       <input type="checkbox" class="checkbox" bind:checked={values.isClosed} />
-      <span class="text-sm opacity-75">Ignore requests to join</span>
+      <span class="text-sm opacity-75">Membership requires approval</span>
     </div>
   </ModalBody>
   {@render footer({loading})}

src/app/components/RoomImage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
+  import Volume from "@assets/icons/volume.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
   import {deriveRoom} from "@app/core/state"
@@ -8,15 +9,25 @@
     h: string
     url: string
     size?: number
+    fallbackIcon?: string
   }
 
-  const {url, h, size = 5}: Props = $props()
+  const {url, h, size = 5, fallbackIcon = Hashtag}: Props = $props()
 
   const room = deriveRoom(url, h)
+  const isVoiceRoom = $derived($room.livekit)
 </script>
 
-{#if $room.picture}
+{#if isVoiceRoom}
+  <div class="flex shrink-0 items-center gap-1.5">
+    <Icon size={size + 1} icon={Volume} />
+    {#if $room.picture}
+      <span class="text-base">/</span>
+      <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
+    {/if}
+  </div>
+{:else if $room.picture}
   <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
 {:else}
-  <Icon icon={Hashtag} {size} />
+  <Icon icon={fallbackIcon} {size} />
 {/if}

src/app/components/RoomJoinItem.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import {getTagValue, ManagementMethod} from "@welshman/util"
+  import type {TrustedEvent, PublishedRoomMeta} from "@welshman/util"
+  import {repository, manageRelay} from "@welshman/app"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+  import {deriveRoom} from "@app/core/state"
+  import {addRoomMembers} from "@app/core/commands"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+    onResolved?: () => void
+  }
+
+  const {url, event, onResolved}: Props = $props()
+
+  const h = getTagValue("h", event.tags) || ""
+  const room = deriveRoom(url, h)
+
+  const showProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey, url})
+
+  const dismiss = async () => {
+    loading = true
+
+    try {
+      const {error} = await manageRelay(url, {
+        method: ManagementMethod.BanEvent,
+        params: [event.id, "Join request dismissed"],
+      })
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+      } else {
+        pushToast({message: "Join request has been dismissed."})
+        repository.removeEvent(event.id)
+        onResolved?.()
+      }
+    } finally {
+      loading = false
+    }
+  }
+
+  const accept = async () => {
+    loading = true
+
+    try {
+      const error = await addRoomMembers(url, $room as PublishedRoomMeta, [event.pubkey])
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+      } else {
+        pushToast({message: "Member has been added to the room!"})
+        onResolved?.()
+      }
+    } finally {
+      loading = false
+    }
+  }
+
+  let loading = $state(false)
+</script>
+
+<div class="column gap-4 card2 card2-sm bg-alt">
+  <div class="flex justify-between gap-2">
+    <div>
+      <Button class="inline text-primary" onclick={showProfile}>
+        <ProfileName pubkey={event.pubkey} {url} />
+      </Button>
+      <span>
+        requested membership in #<RoomName {url} {h} />
+      </span>
+    </div>
+    <div class="flex gap-2">
+      <Button class="btn btn-neutral btn-sm" onclick={dismiss} disabled={loading}>Dismiss</Button>
+      <Button class="btn btn-primary btn-sm" onclick={accept} disabled={loading}>Accept</Button>
+    </div>
+  </div>
+</div>

src/app/components/RoomMembersAdd.svelte

@@ -2,9 +2,8 @@
   import {onMount} from "svelte"
   import {setKey, popKey} from "@lib/implicit"
   import {sleep} from "@welshman/lib"
-  import {ManagementMethod} from "@welshman/util"
+  import {displayProfileByPubkey} from "@welshman/app"
-  import {manageRelay} from "@welshman/app"
+  import type {PublishedRoomMeta} from "@welshman/util"
-  import {addRoomMember, displayProfileByPubkey, waitForThunkError} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -22,6 +21,7 @@
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
   import {deriveRoom, deriveSpaceMembers} from "@app/core/state"
+  import {addRoomMembers} from "@app/core/commands"
 
   interface Props {
     url: string
@@ -42,35 +42,14 @@
       // Show loading for auto submit callback
       await sleep(500)
 
-      const results = await Promise.all(
+      const error = await addRoomMembers(url, $room as PublishedRoomMeta, pubkeys)
-        pubkeys
-          .filter(pubkey => !$spaceMembers.includes(pubkey))
-          .map(pubkey =>
-            manageRelay(url, {
-              method: ManagementMethod.AllowPubkey,
-              params: [pubkey],
-            }),
-          ),
-      )
 
-      for (const {error} of results) {
+      if (error) {
-        if (error) {
+        pushToast({theme: "error", message: error})
-          return pushToast({theme: "error", message: error})
+      } else {
-        }
+        pushToast({message: "Members have successfully been added!"})
+        back()
       }
-
-      const errors = await Promise.all(
-        pubkeys.map(pubkey => waitForThunkError(addRoomMember(url, $room, pubkey))),
-      )
-
-      for (const error of errors) {
-        if (error) {
-          return pushToast({theme: "error", message: errors[0]})
-        }
-      }
-
-      pushToast({message: "Members have successfully been added!"})
-      back()
     } finally {
       loading = false
     }

src/app/components/RoomName.svelte

@@ -12,6 +12,6 @@
   const room = deriveRoom(url, h)
 </script>
 
-<span class="ellipsize {props.class}">
+<span class="ellipsize min-w-0 {props.class}">
   {$room?.name || h}
 </span>

src/app/components/SignUp.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
   import type {ClientOptions} from "@pomade/core"
   import type {Profile} from "@welshman/util"
-  import {
+  import {makeProfile, makeSecret, RELAYS, MESSAGING_RELAYS, makeEvent} from "@welshman/util"
-    makeProfile,
+  import {loginWithNip01, publishThunk} from "@welshman/app"
-    makeSecret,
-    getPubkey,
-    RELAYS,
-    MESSAGING_RELAYS,
-    makeEvent,
-  } from "@welshman/util"
-  import {loginWithNip01, loginWithPomade, publishThunk} from "@welshman/app"
   import Key from "@assets/icons/key-minimalistic.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import {getKey, setKey} from "@lib/implicit"
@@ -23,8 +16,6 @@
   import SignUpEmail from "@app/components/SignUpEmail.svelte"
   import SignUpProfile from "@app/components/SignUpProfile.svelte"
   import SignUpComplete from "@app/components/SignUpComplete.svelte"
-  import {setChecked} from "@app/util/notifications"
-  import {pushModal, clearModals} from "@app/util/modal"
   import {initProfile} from "@app/core/commands"
   import {
     POMADE_SIGNERS,
@@ -33,6 +24,9 @@
     DEFAULT_RELAYS,
     DEFAULT_MESSAGING_RELAYS,
   } from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+  import {loginWithPomade} from "@app/util/pomade"
+  import {pushModal, clearModals} from "@app/util/modal"
 
   setKey("signup.email", "")
   setKey("signup.secret", makeSecret())
@@ -73,10 +67,9 @@
       complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
-        const secret = getKey<string>("signup.secret")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
 
-        loginWithPomade(getPubkey(secret), email, clientOptions)
+        loginWithPomade(clientOptions, email)
         completeSignup()
       },
     },

src/app/components/SignUpEmail.svelte

@@ -18,7 +18,7 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
-  import {pushToast} from "@app/util/toast"
+  import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
@@ -40,6 +40,11 @@
     loading = true
 
     try {
+      const toastId = pushToast({
+        timeout: 60_000,
+        message: "Creating your account, please wait...",
+      })
+
       const secret = getKey<string>("signup.secret")!
       const {clientOptions, ...registerRes} = await Client.register(2, 3, secret)
 
@@ -54,7 +59,8 @@
       const setupRes = await client.setupRecovery(email, password)
 
       if (!setupRes.ok) {
-        const message = setupRes.messages[0]?.res?.message || "Please try again."
+        const message =
+          setupRes.messages.find(m => m.res && !m.res?.ok)?.res?.message || "Please try again."
 
         return pushToast({
           theme: "error",
@@ -74,6 +80,7 @@
       setKey("signup.email", email)
       setKey("signup.clientOptions", clientOptions)
 
+      popToast(toastId)
       pushModal(SignUpEmailConfirm, {next})
     } catch (e) {
       console.error(e)

src/app/components/SpaceActionItems.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.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 ReportItem from "@app/components/ReportItem.svelte"
+  import RoomJoinItem from "@app/components/RoomJoinItem.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import {REPORT} from "@welshman/util"
+  import {deriveSpaceActionItems} from "@app/core/state"
+
+  interface Props {
+    url: string
+  }
+
+  const {url}: Props = $props()
+
+  const actionItems = deriveSpaceActionItems(url)
+
+  const back = () => history.back()
+
+  const onResolved = () => {
+    if ($actionItems.length === 0) {
+      back()
+    }
+  }
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Action Items</ModalTitle>
+      <ModalSubtitle>on <RelayName {url} class="text-primary" /></ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-2">
+      {#each $actionItems as event (event.id)}
+        {#if event.kind === REPORT}
+          <ReportItem {url} {event} {onResolved} />
+        {:else}
+          <RoomJoinItem {url} {event} {onResolved} />
+        {/if}
+      {:else}
+        <p class="py-12 text-center">No action items found.</p>
+      {/each}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/SpaceBar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import {displayRelayUrl} from "@welshman/util"
+  import ArrowLeft from "@assets/icons/arrow-left.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import {decodeRelay} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
+
+  interface Props {
+    back?: () => unknown
+    title?: Snippet
+    action?: Snippet
+    [key: string]: any
+  }
+
+  const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
+
+  const url = decodeRelay($page.params.relay!)
+</script>
+
+<PageBar {...props}>
+  <div class="flex">
+    <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="flex flex-col">
+        <div class="flex gap-2 items-center">
+          {@render title?.()}
+        </div>
+        <div class="text-xs text-primary md:hidden">
+          {displayRelayUrl(url)}
+        </div>
+      </div>
+      <div class="flex gap-2 items-start">
+        {@render action?.()}
+      </div>
+    </div>
+  </div>
+</PageBar>

src/app/components/SpaceEdit.svelte

@@ -3,7 +3,7 @@
   import {displayRelayUrl, ManagementMethod} from "@welshman/util"
   import {manageRelay, forceLoadRelay} from "@welshman/app"
   import StickerSmileSquare from "@assets/icons/sticker-smile-square.svg?dataurl"
-  import SettingsMinimalistic from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import Planet from "@assets/icons/planet-3.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
   import {preventDefault} from "@lib/html"
@@ -164,7 +164,7 @@
           {#if imagePreview}
             <ImageIcon src={imagePreview} alt="" />
           {:else}
-            <Icon icon={SettingsMinimalistic} />
+            <Icon icon={Planet} />
           {/if}
           <input bind:value={values.name} class="grow" type="text" />
         </label>

src/app/components/SpaceInviteAccept.svelte

@@ -60,7 +60,7 @@
         } else {
           const permissions = await Push.request()
 
-          if (permissions === "granted") {
+          if (permissions.startsWith("granted")) {
             await setSpaceNotifications(url, true)
           }
         }

src/app/components/SpaceJoin.svelte

@@ -48,7 +48,7 @@
         } else {
           const permissions = await Push.request()
 
-          if (permissions === "granted") {
+          if (permissions.startsWith("granted")) {
             await setSpaceNotifications(url, true)
           }
         }

src/app/components/SpaceMembers.svelte

@@ -159,9 +159,11 @@
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button class="btn btn-primary" onclick={addMember}>
+    {#if $userIsAdmin}
-      <Icon icon={AddCircle} />
+      <Button class="btn btn-primary" onclick={addMember}>
-      Add members
+        <Icon icon={AddCircle} />
-    </Button>
+        Add members
+      </Button>
+    {/if}
   </ModalFooter>
 </Modal>

src/app/components/SpaceMembersAdd.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {displayRelayUrl, ManagementMethod} from "@welshman/util"
+  import {displayRelayUrl} from "@welshman/util"
-  import {manageRelay} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -13,6 +12,7 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
+  import {addSpaceMembers} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
 
   interface Props {
@@ -27,23 +27,14 @@
     loading = true
 
     try {
-      const results = await Promise.all(
+      const error = await addSpaceMembers(url, pubkeys)
-        pubkeys.map(pubkey =>
-          manageRelay(url, {
-            method: ManagementMethod.AllowPubkey,
-            params: [pubkey],
-          }),
-        ),
-      )
 
-      for (const {error} of results) {
+      if (error) {
-        if (error) {
+        pushToast({theme: "error", message: error})
-          return pushToast({theme: "error", message: error})
+      } else {
-        }
+        pushToast({message: "Members have successfully been added!"})
+        back()
       }
-
-      pushToast({message: "Members have successfully been added!"})
-      back()
     } finally {
       loading = false
     }

src/app/components/SpaceMembersBanned.svelte

@@ -17,6 +17,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {deriveSpaceBannedPubkeyItems, deriveSupportedMethods} from "@app/core/state"
+  import {addSpaceMembers} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
 
   interface Props {
@@ -55,10 +56,7 @@
   }
 
   const restoreMember = async (pubkey: string) => {
-    const {error} = await manageRelay(url, {
+    const error = await addSpaceMembers(url, [pubkey])
-      method: ManagementMethod.AllowPubkey,
-      params: [pubkey],
-    })
 
     if (error) {
       pushToast({theme: "error", message: error})

src/app/components/SpaceMenu.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {onMount} from "svelte"
   import {derived} from "svelte/store"
-  import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED, REPORT} from "@welshman/util"
+  import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
   import {deriveRelay, createSearch, pubkey} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
@@ -20,8 +19,8 @@
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import ChatRound from "@assets/icons/chat-round.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
-  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -35,9 +34,10 @@
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import SpaceMembers from "@app/components/SpaceMembers.svelte"
-  import SpaceReports from "@app/components/SpaceReports.svelte"
+  import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import {
     ENABLE_ZAPS,
@@ -45,18 +45,21 @@
     deriveSpaceMembers,
     deriveUserRooms,
     deriveOtherRooms,
+    deriveOtherVoiceRooms,
     userSpaceUrls,
     hasNip29,
     deriveUserCanCreateRoom,
     deriveUserIsSpaceAdmin,
     deriveEventsForUrl,
+    deriveSpaceActionItems,
     notificationSettings,
     deriveShouldNotify,
     displayRoom,
   } from "@app/core/state"
   import {setSpaceNotifications} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
-  import {makeSpacePath, makeChatPath} from "@app/util/routes"
+  import {makeSpacePath, goToChat} from "@app/util/routes"
+  import {notifications} from "@app/util/notifications"
 
   const {url} = $props()
 
@@ -68,9 +71,10 @@
   const calendarPath = makeSpacePath(url, "calendar")
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
+  const otherVoiceRooms = deriveOtherVoiceRooms(url)
   const members = deriveSpaceMembers(url)
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
-  const reports = deriveEventsForUrl(url, [{kinds: [REPORT]}])
+  const actionItems = deriveSpaceActionItems(url)
 
   const spaceKinds = derived(
     deriveEventsForUrl(url, [{kinds: CONTENT_KINDS}]),
@@ -95,21 +99,23 @@
     showMenu = !showMenu
   }
 
-  const showDetail = () => pushModal(SpaceDetail, {url}, {replaceState})
+  const showDetail = () => pushModal(SpaceDetail, {url})
 
-  const showMembers = () => pushModal(SpaceMembers, {url}, {replaceState})
+  const showMembers = () => pushModal(SpaceMembers, {url})
 
-  const showReports = () => pushModal(SpaceReports, {url}, {replaceState})
+  const showActionItems = () => pushModal(SpaceActionItems, {url})
 
   const canCreateRoom = deriveUserCanCreateRoom(url)
 
-  const createInvite = () => pushModal(SpaceInvite, {url}, {replaceState})
+  const createInvite = () => pushModal(SpaceInvite, {url})
 
-  const leaveSpace = () => pushModal(SpaceExit, {url}, {replaceState})
+  const leaveSpace = () => pushModal(SpaceExit, {url})
 
-  const joinSpace = () => pushModal(SpaceJoin, {url}, {replaceState})
+  const joinSpace = () => pushModal(SpaceJoin, {url})
 
-  const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
+  const addRoom = () => pushModal(RoomCreate, {url})
+
+  const contactOwner = () => goToChat([$relay!.pubkey!])
 
   const shouldNotify = deriveShouldNotify(url)
 
@@ -125,25 +131,24 @@
 
   let term = $state("")
   let showMenu = $state(false)
-  let replaceState = $state(false)
   let element: Element | undefined = $state()
-
-  onMount(() => {
-    replaceState = Boolean(element?.closest(".drawer"))
-  })
 </script>
 
-<div bind:this={element} class="flex h-full flex-col justify-between">
+<div bind:this={element} class="flex min-h-0 flex-1 flex-col">
-  <SecondaryNavSection class="pb-0">
+  <SecondaryNavSection class="min-h-0 flex-1 flex flex-col overflow-hidden pb-0">
-    <div>
+    <div class="flex-shrink-0">
       <Button
-        class="flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
+        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="ellipsize flex items-center gap-1">
+          <strong class="flex items-center gap-1 relative">
-            <RelayName {url} />
+            <RelayName {url} class="ellipsize" />
+            <div
+              class="absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary transition-all opacity-0"
+              class:opacity-100={$userIsAdmin && $actionItems.length > 0}>
+            </div>
             {#if $notificationSettings.push && !$shouldNotify}
-              <Icon icon={VolumeCross} size={3} class="opacity-50" />
+              <Icon icon={BellOff} size={3} class="opacity-50" />
             {/if}
           </strong>
           <Icon icon={AltArrowDown} />
@@ -175,29 +180,32 @@
             </li>
             {#if $userIsAdmin}
               <li>
-                <Button onclick={showReports}>
+                <Button onclick={showActionItems}>
                   <Icon icon={Danger} />
-                  View Reports ({$reports.length})
+                  Action Items ({$actionItems.length})
+                  {#if $actionItems.length > 0}
+                    <div class="h-2 w-2 rounded-full bg-primary"></div>
+                  {/if}
                 </Button>
               </li>
             {/if}
             {#if $relay?.pubkey && $relay.pubkey !== $pubkey}
               <li>
-                <Link href={makeChatPath([$relay.pubkey])}>
+                <Button onclick={contactOwner}>
                   <Icon icon={Letter} />
                   Contact Owner
-                </Link>
+                </Button>
               </li>
             {/if}
             <li>
               {#if $notificationSettings.push}
                 <Button onclick={toggleSpaceNotifications}>
-                  <Icon icon={$shouldNotify ? VolumeLoud : VolumeCross} />
+                  <Icon icon={$shouldNotify ? Bell : BellOff} />
                   {$shouldNotify ? "Turn off" : "Turn on"} notifications
                 </Button>
               {:else}
                 <Link href="/settings/alerts">
-                  <Icon icon={VolumeLoud} />
+                  <Icon icon={Bell} />
                   Enable notifications
                 </Link>
               {/if}
@@ -219,47 +227,46 @@
         </Popover>
       {/if}
     </div>
-    <div
+    <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-auto overflow-x-hidden">
-      class="flex max-h-[calc(100vh-150px)] min-h-0 flex-col gap-1 overflow-auto overflow-x-hidden">
       {#if hasNip29($relay)}
-        <SecondaryNavItem {replaceState} href={makeSpacePath(url, "recent")}>
+        <SecondaryNavItem href={makeSpacePath(url, "recent")}>
           <Icon icon={History} /> Recent Activity
         </SecondaryNavItem>
       {:else}
-        <SecondaryNavItem {replaceState} href={chatPath}>
+        <SecondaryNavItem href={chatPath} notification={$notifications.has(chatPath)}>
           <Icon icon={ChatRound} /> Chat
         </SecondaryNavItem>
       {/if}
       {#if ENABLE_ZAPS && $spaceKinds.has(ZAP_GOAL)}
-        <SecondaryNavItem {replaceState} href={goalsPath}>
+        <SecondaryNavItem href={goalsPath}>
           <Icon icon={StarFallMinimalistic} /> Goals
         </SecondaryNavItem>
       {/if}
       {#if $spaceKinds.has(THREAD)}
-        <SecondaryNavItem {replaceState} href={threadsPath}>
+        <SecondaryNavItem href={threadsPath}>
           <Icon icon={NotesMinimalistic} /> Threads
         </SecondaryNavItem>
       {/if}
       {#if $spaceKinds.has(CLASSIFIED)}
-        <SecondaryNavItem {replaceState} href={classifiedsPath}>
+        <SecondaryNavItem href={classifiedsPath}>
           <Icon icon={CaseMinimalistic} /> Classifieds
         </SecondaryNavItem>
       {/if}
       {#if $spaceKinds.has(EVENT_TIME)}
-        <SecondaryNavItem {replaceState} href={calendarPath}>
+        <SecondaryNavItem href={calendarPath}>
           <Icon icon={CalendarMinimalistic} /> Calendar
         </SecondaryNavItem>
       {/if}
       {#if hasNip29($relay)}
         {#if $userRooms.length > 0}
-          <div class="h-2"></div>
+          <div class="h-2 flex-shrink-0"></div>
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         {/if}
-        {#each $userRooms as h, i (h)}
+        {#each $userRooms as h (h)}
-          <SpaceMenuRoomItem notify {replaceState} {url} {h} />
+          <SpaceMenuRoomItem {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
-          <div class="h-2"></div>
+          <div class="h-2 flex-shrink-0"></div>
           <SecondaryNavHeader>
             {#if $userRooms.length > 0}
               Other Rooms
@@ -274,19 +281,29 @@
             <input bind:value={term} onblur={clearTerm} class="grow" />
           </label>
         {/if}
-        {#each $roomSearch.searchValues(term) as h, i (h)}
+        {#each $roomSearch.searchValues(term) as h (h)}
-          <SpaceMenuRoomItem {replaceState} {url} {h} />
+          <SpaceMenuRoomItem {url} {h} />
         {/each}
+        {#if $otherVoiceRooms.length > 0}
+          <div class="h-2 flex-shrink-0"></div>
+          <SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
+          {#each $otherVoiceRooms as h (h)}
+            <SpaceMenuRoomItem {url} {h} />
+          {/each}
+        {/if}
         {#if $canCreateRoom}
-          <SecondaryNavItem {replaceState} onclick={addRoom}>
+          <SecondaryNavItem onclick={addRoom}>
             <Icon icon={AddCircle} />
             Create room
           </SecondaryNavItem>
         {/if}
       {/if}
+      <div class="h-5 flex-shrink-0"></div>
     </div>
   </SecondaryNavSection>
-  <div class="flex flex-col gap-2 pb-2 p-4 pt-0">
+  <div
+    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+3rem)] md:pb-2 z-nav">
+    <VoiceWidget />
     <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
       <SocketStatusIndicator {url} />
     </Button>

src/app/components/SpaceMenuButton.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import SpaceMenu from "@app/components/SpaceMenu.svelte"
-  import {notifications} from "@app/util/notifications"
-  import {makeSpacePath} from "@app/util/routes"
-  import {pushDrawer} from "@app/util/modal"
-  import {deriveSocketStatus} from "@app/core/state"
-
-  const {url} = $props()
-
-  const path = makeSpacePath(url) + ":mobile"
-
-  const status = deriveSocketStatus(url)
-
-  const openMenu = () => pushDrawer(SpaceMenu, {url})
-</script>
-
-<Button onclick={openMenu} class="btn btn-neutral btn-sm relative md:hidden btn-square">
-  <Icon icon={MenuDots} />
-  {#if $status.theme !== "success"}
-    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-{$status.theme}"></div>
-  {:else if $notifications.has(path)}
-    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary"></div>
-  {/if}
-</Button>

src/app/components/SpaceMenuRoomItem.svelte

@@ -1,34 +1,38 @@
 <script lang="ts">
-  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
-  import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import VoiceRoomItem from "@app/components/VoiceRoomItem.svelte"
+  import {deriveRoom, deriveShouldNotify, getRoomType, RoomType} from "@app/core/state"
   import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
-  import {deriveShouldNotify} from "@app/core/state"
 
   interface Props {
     url: any
     h: any
-    notify?: boolean
     replaceState?: boolean
   }
 
-  const {url, h, notify = false, replaceState = false}: Props = $props()
+  const {url, h, replaceState = false}: Props = $props()
 
+  const room = deriveRoom(url, h)
+  const roomType = $derived(getRoomType($room))
   const path = makeRoomPath(url, h)
   const shouldNotifyForSpace = deriveShouldNotify(url)
   const shouldNotifyForRoom = deriveShouldNotify(url, h)
   const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
+  const notification = $derived($shouldNotifyForRoom ? $notifications.has(path) : false)
 </script>
 
-<SecondaryNavItem
+{#if roomType === RoomType.Voice}
-  href={path}
+  <VoiceRoomItem {url} {h} {replaceState} {notification} />
-  {replaceState}
+{:else}
-  notification={notify ? $notifications.has(path) : false}>
+  <SecondaryNavItem href={path} {replaceState} {notification}>
-  <RoomNameWithImage {url} {h} />
+    <RoomNameWithImage {url} {h} />
-  {#if showDifferenceIcon}
+    {#if showDifferenceIcon}
-    <Icon icon={$shouldNotifyForRoom ? VolumeLoud : VolumeCross} size={4} class="opacity-50" />
+      <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
-  {/if}
+    {/if}
-</SecondaryNavItem>
+  </SecondaryNavItem>
+{/if}

src/app/components/SpaceReports.svelte

@@ -23,7 +23,7 @@
 
   const back = () => history.back()
 
-  const onDelete = () => {
+  const onResolved = () => {
     if ($reports.length === 0) {
       back()
     }
@@ -38,7 +38,7 @@
     </ModalHeader>
     <div class="flex flex-col gap-2">
       {#each $reports as event (event.id)}
-        <ReportItem {url} {event} {onDelete} />
+        <ReportItem {url} {event} {onResolved} />
       {:else}
         <p class="py-12 text-center">No reports found.</p>
       {/each}

src/app/components/VoiceRoomItem.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {goto} from "$app/navigation"
+  import {loadProfile, displayProfileByPubkey} from "@welshman/app"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import RoomImage from "@app/components/RoomImage.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {makeRoomPath} from "@app/util/routes"
+  import {pushModal} from "@app/util/modal"
+  import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
+  import {makeRoomId} from "@app/core/state"
+  import {
+    VoiceState,
+    deriveVoiceParticipants,
+    cancelJoinVoiceRoom,
+    currentVoiceRoom,
+    voiceState,
+    isParticipantSpeaking,
+    participantKey,
+    type VoiceParticipant,
+  } from "@app/voice"
+
+  interface Props {
+    url: string
+    h: string
+    replaceState?: boolean
+    notification?: boolean
+  }
+
+  const {url, h, replaceState = false, notification = false}: Props = $props()
+
+  const participants = deriveVoiceParticipants(url, h)
+  const isActive = $derived(
+    $voiceState === VoiceState.Connected && $currentVoiceRoom?.id === makeRoomId(url, h),
+  )
+  const isJoining = $derived(
+    $voiceState === VoiceState.Joining && $currentVoiceRoom?.id === makeRoomId(url, h),
+  )
+
+  const handleClick = async (e: MouseEvent) => {
+    if (isActive) return
+
+    if (isJoining) {
+      e.preventDefault()
+      cancelJoinVoiceRoom()
+      return
+    }
+
+    e.preventDefault()
+    await goto(makeRoomPath(url, h), {replaceState})
+    pushModal(VoiceRoomJoinDialog, {url, h})
+  }
+
+  $effect(() => {
+    for (const p of $participants) {
+      if (p.pubkey) loadProfile(p.pubkey)
+    }
+  })
+</script>
+
+<SecondaryNavItem
+  href={makeRoomPath(url, h)}
+  {replaceState}
+  {notification}
+  onclick={handleClick}
+  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}
+        <span class="loading loading-spinner loading-sm"></span>
+      {:else}
+        <RoomImage {url} {h} size={4} />
+      {/if}
+      <RoomName {url} {h} />
+    </div>
+    {#if $participants.length > 0}
+      {#each $participants as p (participantKey(p as VoiceParticipant))}
+        <div class="flex items-center gap-2 ml-6">
+          <div
+            class={cx(
+              "inline-flex shrink-0 items-center justify-center rounded-full transition-shadow",
+              isActive && $isParticipantSpeaking(p) && "ring-2 ring-success",
+            )}>
+            <ProfileCircle pubkey={p.pubkey} size={5} class="h-5 w-5" />
+          </div>
+          <span class="ellipsize text-xs opacity-70">
+            {p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
+          </span>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</SecondaryNavItem>

src/app/components/VoiceRoomJoinDialog.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import {displayRelayUrl} from "@welshman/util"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Volume from "@assets/icons/volume.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import {displayRoom} from "@app/core/state"
+  import {joinVoiceRoom} from "@app/voice"
+  import {popModal} from "@app/util/modal"
+
+  type Props = {
+    url: string
+    h: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const spaceLabel = $derived(displayRelayUrl(url))
+
+  let audioInputs = $state<MediaDeviceInfo[]>([])
+  let selectedDeviceId = $state("")
+  let startWithoutMic = $state(false)
+
+  const loadDevices = async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      audioInputs = devices.filter(d => d.kind === "audioinput")
+    } catch {
+      audioInputs = []
+    }
+  }
+
+  $effect(() => {
+    void loadDevices()
+  })
+
+  const goBack = () => history.back()
+
+  const joinVoice = async () => {
+    popModal()
+    await joinVoiceRoom(
+      url,
+      h,
+      startWithoutMic,
+      startWithoutMic ? undefined : selectedDeviceId || undefined,
+    )
+  }
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Join voice room?</ModalTitle>
+      <ModalSubtitle>
+        <span class="inline-flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1">
+          <Icon icon={Volume} size={4} class="shrink-0" />
+          <span class="ellipsize min-w-0">{displayRoom(url, h)}</span>
+          <span>·</span>
+          <span>{spaceLabel}</span>
+        </span>
+      </ModalSubtitle>
+    </ModalHeader>
+    <p class="text-sm opacity-80">Select a microphone to join the call:</p>
+    <div class="flex flex-col gap-4 pt-2">
+      <div class="flex items-center gap-2">
+        <input
+          id="voice-start-without-mic"
+          type="checkbox"
+          class="checkbox"
+          bind:checked={startWithoutMic} />
+        <label for="voice-start-without-mic" class="text-sm cursor-pointer">
+          Join without microphone (you can unmute later)
+        </label>
+      </div>
+      <FieldInline>
+        {#snippet label()}
+          <p>Microphone</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedDeviceId}
+            disabled={startWithoutMic}
+            aria-label="Microphone">
+            <option value="">Default microphone</option>
+            {#each audioInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Microphone ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={goBack}>
+      <Icon icon={AltArrowLeft} />
+      Don't join
+    </Button>
+    <Button class="btn btn-primary" onclick={joinVoice}>
+      Join voice
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/VoiceWidget.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import {readable} from "svelte/store"
+  import {fly} from "svelte/transition"
+  import {goto} from "$app/navigation"
+  import {page} from "$app/stores"
+  import {displayRelayUrl} from "@welshman/util"
+  import Microphone from "@assets/icons/microphone.svg?dataurl"
+  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
+  import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
+  import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
+  import {
+    decodeRelay,
+    deriveRoom,
+    displayRoom,
+    getRoomType,
+    RoomType,
+    type Room,
+  } from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {makeRoomPath} from "@app/util/routes"
+  import {
+    VoiceState,
+    currentVoiceSession,
+    currentVoiceRoom,
+    voiceState,
+    leaveVoiceRoom,
+    toggleMute,
+    cancelJoinVoiceRoom,
+  } from "@app/voice"
+
+  const {relay, h} = $derived($page.params)
+  const url = $derived(relay ? decodeRelay(relay) : undefined)
+  const displayedRoomStore = $derived(
+    url && h && typeof h === "string" ? deriveRoom(url, h) : readable(undefined),
+  )
+  const routeDisplayedRoom = $derived($displayedRoomStore)
+
+  const targetRoom = $derived.by((): Room | undefined => {
+    if ($voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected) {
+      return $currentVoiceRoom
+    }
+    if ($voiceState === VoiceState.Disconnected) {
+      if (routeDisplayedRoom) {
+        if (getRoomType(routeDisplayedRoom) === RoomType.Voice) {
+          return routeDisplayedRoom
+        }
+        return undefined
+      }
+      return $currentVoiceRoom
+    }
+    return $currentVoiceRoom
+  })
+
+  const roomName = $derived(targetRoom ? displayRoom(targetRoom.url, targetRoom.h) : "")
+  const spaceName = $derived(targetRoom ? displayRelayUrl(targetRoom.url) : "")
+
+  const openJoinDialog = async () => {
+    if (!targetRoom) return
+    await goto(makeRoomPath(targetRoom.url, targetRoom.h))
+    pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
+  }
+</script>
+
+{#if targetRoom}
+  <div
+    in:fly={{y: 60, duration: 350}}
+    out:fly={{y: 60, duration: 250}}
+    class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
+    <div class="flex flex-col gap-0.5">
+      {#if $voiceState === VoiceState.Joining}
+        <span class="text-sm font-semibold text-warning">Joining...</span>
+      {:else if $voiceState === VoiceState.Connected}
+        <span class="text-sm font-semibold text-success">Voice Connected</span>
+      {:else}
+        <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
+      {/if}
+      <span class="ellipsize text-xs opacity-70">
+        {roomName} / {spaceName}
+      </span>
+    </div>
+    <div class="flex items-center gap-1">
+      {#if $voiceState === VoiceState.Joining}
+        <span class="loading loading-spinner loading-sm"></span>
+        <Button
+          data-tip="Cancel"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
+          onclick={cancelJoinVoiceRoom}>
+          <Icon icon={CloseCircle} size={4} />
+        </Button>
+      {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
+        <Button
+          data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
+            ? 'btn-error'
+            : 'btn-ghost'}"
+          onclick={toggleMute}>
+          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
+        </Button>
+        <Button
+          data-tip="Leave room"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
+          onclick={leaveVoiceRoom}>
+          <Icon icon={PhoneRounded} size={4} />
+        </Button>
+      {:else}
+        <Button
+          data-tip="Join Voice"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-success"
+          onclick={openJoinDialog}>
+          <Icon icon={PhoneCallingRounded} size={4} />
+        </Button>
+      {/if}
+    </div>
+  </div>
+{/if}

src/app/components/WalletAsReceivingAddress.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import {makeProfile} from "@welshman/util"
   import {getWalletAddress} from "@welshman/util"
+  import {userProfile, waitForThunkError, session} from "@welshman/app"
+  import {errorMessage} from "@lib/util"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Modal from "@lib/components/Modal.svelte"
@@ -9,8 +12,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {updateProfile} from "@app/core/commands"
   import {clearModals} from "@app/util/modal"
-  import {userProfile, session} from "@welshman/app"
+  import {pushToast} from "@app/util/toast"
-  import {makeProfile} from "@welshman/util"
 
   const lud16 = getWalletAddress($session!.wallet!)
 
@@ -20,9 +22,13 @@
     loading = true
 
     try {
-      await updateProfile({profile: {...profile, lud16}})
+      const error = await waitForThunkError(updateProfile({profile: {...profile, lud16}}))
 
-      clearModals()
+      if (error) {
+        pushToast({theme: "error", message: `Failed to update profile: ${errorMessage(error)}`})
+      } else {
+        clearModals()
+      }
     } finally {
       loading = false
     }

src/app/components/WalletUpdateReceivingAddress.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {getWalletAddress} from "@welshman/util"
-  import {session, userProfile} from "@welshman/app"
+  import {session, waitForThunkError, userProfile} from "@welshman/app"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -17,7 +18,7 @@
   const back = () => history.back()
 
   let address = $state($userProfile?.lud16 || "")
-  let isLoading = $state(false)
+  let loading = $state(false)
 
   const walletLud16 = $derived($session?.wallet ? getWalletAddress($session.wallet) : undefined)
 
@@ -28,20 +29,28 @@
   }
 
   const save = async () => {
-    isLoading = true
+    loading = true
+
     try {
-      await updateProfile({
+      const error = await waitForThunkError(
-        profile: {
+        updateProfile({
-          ...$userProfile,
+          profile: {
-          lud06: undefined,
+            ...$userProfile,
-          lud16: address.trim() || undefined,
+            lud06: undefined,
-        },
+            lud16: address.trim() || undefined,
-      })
+          },
-      back()
+        }),
+      )
+
+      if (error) {
+        pushToast({theme: "error", message: `Failed to update profile: ${errorMessage(error)}`})
+      } else {
+        back()
+      }
     } catch (error) {
       pushToast({theme: "error", message: "Failed to update profile"})
     } finally {
-      isLoading = false
+      loading = false
     }
   }
 </script>
@@ -61,7 +70,7 @@
           placeholder="user@domain.com"
           bind:value={address}
           class="input input-bordered flex w-full"
-          disabled={isLoading} />
+          disabled={loading} />
         <p class="text-xs opacity-75">
           You can enter one manually or use your connected wallet's address (if available). Leave
           empty to remove your lightning address
@@ -78,7 +87,7 @@
               </div>
               <p class="text-xs opacity-75">{walletLud16}</p>
             </div>
-            <Button class="btn btn-outline btn-sm" onclick={useWalletAddress} disabled={isLoading}>
+            <Button class="btn btn-outline btn-sm" onclick={useWalletAddress} disabled={loading}>
               Use This
             </Button>
           </div>
@@ -87,9 +96,9 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-neutral" onclick={back} disabled={isLoading}>Cancel</Button>
+    <Button class="btn btn-neutral" onclick={back} disabled={loading}>Cancel</Button>
-    <Button class="btn btn-primary" onclick={save} disabled={isLoading}>
+    <Button class="btn btn-primary" onclick={save} disabled={loading}>
-      {#if isLoading}
+      {#if loading}
         <span class="loading loading-spinner loading-sm"></span>
       {:else}
         <Icon icon={CheckCircle} />

src/app/core/commands.ts

@@ -17,7 +17,7 @@ import {
 } from "@welshman/lib"
 import {Nip01Signer} from "@welshman/signer"
 import type {UploadTask} from "@welshman/editor"
-import type {TrustedEvent, EventContent, Profile} from "@welshman/util"
+import type {TrustedEvent, EventContent, Profile, PublishedRoomMeta} from "@welshman/util"
 import {
   DELETE,
   REPORT,
@@ -52,6 +52,7 @@ import {
   editProfile,
   createProfile,
   uniqTags,
+  ManagementMethod,
 } from "@welshman/util"
 import {Pool, AuthStatus, SocketStatus} from "@welshman/net"
 import {Router} from "@welshman/router"
@@ -72,6 +73,9 @@ import {
   getPubkeyRelays,
   userBlossomServerList,
   getThunkError,
+  addRoomMember,
+  manageRelay,
+  getRelay,
 } from "@welshman/app"
 import {compressFile} from "@lib/html"
 import type {SettingsValues, SpaceNotificationSettings} from "@app/core/state"
@@ -89,6 +93,7 @@ import {
   stripPrefix,
   relaysMostlyRestricted,
   deriveSocket,
+  deriveSpaceMembers,
 } from "@app/core/state"
 
 // Utils
@@ -220,8 +225,7 @@ export const attemptRelayAccess = async (url: string, claim = "") => {
     }
   }
 
-  const thunk = publishJoinRequest({url, claim})
+  const error = await waitForThunkError(publishJoinRequest({url, claim}))
-  const error = await waitForThunkError(thunk)
 
   if (shouldIgnoreError(error)) return
   if (!claim && error.includes("invite code size")) return
@@ -550,6 +554,12 @@ export const createInvoice = async ({
 export const normalizeBlossomUrl = (url: string) => normalizeUrl(url.replace(/^ws/, "http"))
 
 export const fetchHasBlossomSupport = async (url: string) => {
+  const relay = getRelay(url)
+
+  if (relay?.supported_nips?.map(String).includes("BUD-02")) {
+    return true
+  }
+
   const server = normalizeBlossomUrl(url)
   const $signer = signer.get() || Nip01Signer.ephemeral()
   const headers: Record<string, string> = {
@@ -639,13 +649,19 @@ export const uploadFile = async (file: File, options: UploadFileOptions = {}) =>
     const res = await uploadBlob(server, file, {authEvent})
     const text = await res.text()
 
-    let {uploaded, url, ...task} = parseJson(text) || {}
+    let task
+    try {
+      task = parseJson(text)
+    } catch (e) {
+      return {error: text}
+    }
 
-    if (!uploaded) {
+    if (!task?.uploaded) {
       return {error: text || `Failed to upload file (HTTP ${res.status})`}
     }
 
     // Always append correct file extension if we encrypted the file, or if it's missing
+    let url = task.url
     if (options.encrypt) {
       url = url.replace(/\.\w+$/, "") + ext
     } else if (new URL(url).pathname.split(".").length === 1) {
@@ -676,7 +692,7 @@ export const initProfile = (profile: Profile) => {
   return publishThunk({event, relays: []})
 }
 
-export const updateProfile = async ({
+export const updateProfile = ({
   profile,
   shouldBroadcast = !getTag(PROTECTED, profile.event?.tags || []),
 }: {
@@ -697,5 +713,52 @@ export const updateProfile = async ({
   const event = makeEvent(template.kind, template)
   const relays = router.merge(scenarios).getUrls()
 
-  await publishThunk({event, relays}).complete
+  return publishThunk({event, relays})
+}
+
+// Admin actions
+
+export const addSpaceMembers = async (
+  url: string,
+  pubkeys: string[],
+): Promise<string | undefined> => {
+  const spaceMembers = get(deriveSpaceMembers(url))
+  const results = await Promise.all(
+    pubkeys
+      .filter(pubkey => !spaceMembers.includes(pubkey))
+      .map(pubkey =>
+        manageRelay(url, {
+          method: ManagementMethod.AllowPubkey,
+          params: [pubkey],
+        }),
+      ),
+  )
+
+  for (const {error} of results) {
+    if (error) {
+      return error
+    }
+  }
+}
+
+export const addRoomMembers = async (
+  url: string,
+  room: PublishedRoomMeta,
+  pubkeys: string[],
+): Promise<string | undefined> => {
+  const error = await addSpaceMembers(url, pubkeys)
+
+  if (error) {
+    return error
+  }
+
+  const errors = await Promise.all(
+    pubkeys.map(pubkey => waitForThunkError(addRoomMember(url, room, pubkey))),
+  )
+
+  for (const error of errors) {
+    if (error) {
+      return error
+    }
+  }
 }

src/app/core/requests.ts

@@ -4,7 +4,7 @@ import {
   uniq,
   int,
   YEAR,
-  DAY,
+  WEEK,
   insertAt,
   sortBy,
   now,
@@ -22,6 +22,7 @@ import {
   getAddress,
   isShareableRelayUrl,
   getRelaysFromList,
+  sortEventsDesc,
 } from "@welshman/util"
 import type {TrustedEvent, Filter, List} from "@welshman/util"
 import {load, request} from "@welshman/net"
@@ -47,11 +48,11 @@ export const makeFeed = ({
   onForwardExhausted?: () => void
   at?: number
 }) => {
-  const interval = int(DAY)
   const controller = new AbortController()
   const events = writable<TrustedEvent[]>([])
 
-  let buffer: TrustedEvent[] = []
+  let interval = int(WEEK)
+  let buffer = sortEventsDesc(getEventsForUrl(url, filters))
   let backwardWindow = [at - interval, at]
   let forwardWindow = [at, at + interval]
 
@@ -111,13 +112,20 @@ export const makeFeed = ({
     }),
   ]
 
-  const loadTimeframe = (since: number, until: number) => {
+  const loadTimeframe = async (since: number, until: number) => {
-    request({
+    const events = await request({
       relays: [url],
       autoClose: true,
       signal: controller.signal,
       filters: filters.map(filter => ({...filter, since, until})),
     })
+
+    // If we found nothing, accelerate
+    if (events.length === 0) {
+      interval = Math.round(interval * 1.1)
+    } else {
+      interval = int(WEEK)
+    }
   }
 
   const backwardScroller = createScroller({
@@ -129,7 +137,7 @@ export const makeFeed = ({
 
       backwardWindow = [since - interval, since]
 
-      for (const event of buffer.splice(0)) {
+      for (const event of buffer.splice(0, 30)) {
         insertEvent(event)
       }
 
@@ -152,7 +160,7 @@ export const makeFeed = ({
 
       forwardWindow = [until, until + interval]
 
-      for (const event of buffer.splice(0)) {
+      for (const event of buffer.splice(0, 30)) {
         insertEvent(event)
       }
 
@@ -165,10 +173,6 @@ export const makeFeed = ({
     },
   })
 
-  for (const event of getEventsForUrl(url, filters)) {
-    insertEvent(event)
-  }
-
   return {
     events,
     cleanup: () => {
@@ -191,7 +195,7 @@ export const makeCalendarFeed = ({
   element: HTMLElement
   onExhausted?: () => void
 }) => {
-  const interval = int(5, DAY)
+  const interval = int(5, WEEK)
   const controller = new AbortController()
 
   let exhaustedScrollers = 0

src/app/core/state.ts

@@ -14,6 +14,7 @@ import {
   uniqBy,
   sortBy,
   append,
+  reject,
   sort,
   uniq,
   indexBy,
@@ -30,6 +31,7 @@ import {
   groupBy,
   remove,
   simpleCache,
+  removeUndefined,
 } from "@welshman/lib"
 import type {Override} from "@welshman/lib"
 import type {RepositoryUpdate} from "@welshman/net"
@@ -98,6 +100,7 @@ import {
   REPOST,
   GENERIC_REPOST,
   asDecryptedEvent,
+  getTagValue,
   getGroupTags,
   getListTags,
   getPubkeyTagValues,
@@ -110,6 +113,7 @@ import {
   readRoomMeta,
   makeRoomMeta,
   ManagementMethod,
+  sortEventsAsc,
   sortEventsDesc,
   getAddress,
   Address,
@@ -124,6 +128,7 @@ import type {
   RelayProfile,
   PublishedList,
   PublishedRoomMeta,
+  RoomMeta,
   List,
   Filter,
 } from "@welshman/util"
@@ -145,6 +150,7 @@ import {
   displayProfileByPubkey,
   getProfile,
 } from "@welshman/app"
+import {checkRelayHasLivekit} from "$lib/livekit"
 import {readFeed} from "@lib/feeds"
 
 export const fromCsv = (s: string) => (s || "").split(",").filter(identity)
@@ -284,7 +290,7 @@ export const deriveRelaySignedEvents = (url: string, filters: Filter[] = [{}]) =
   derived(
     [deriveRelay(url), deriveEventsForUrl(url, filters)],
     ([relay, events]) => events,
-    // khatru doesn't support relay.self, uncomment when it's ready
+    // TODO: khatru doesn't support relay.self, uncomment when it's ready
     // filter(spec({pubkey: relay.self}), events)
   )
 
@@ -425,10 +431,11 @@ export type PushSubscription = {
 
 export type PushState = {
   token?: string
+  useFallback?: boolean
   subscription?: PushSubscription
 }
 
-export const notificationState = withGetter(writable<PushState>({}))
+export const pushState = withGetter(writable<PushState>({}))
 
 // Chats
 
@@ -457,7 +464,7 @@ export const splitChatId = (id: string) => getChatPubkeys(id.split(","))
 
 export const chatsById = call(() => {
   const chatsById = new Map<string, Chat>()
-  const chatsByPubkey = new Map<string, Chat[]>()
+  const chatsByPubkey = new Map<string, string[]>()
 
   const addSearchText = (chat: Override<Chat, {search_text?: string}>) => {
     chat.search_text =
@@ -469,6 +476,12 @@ export const chatsById = call(() => {
   }
 
   return readable(chatsById, set => {
+    const indexChatByPubkeys = (chat: Chat) => {
+      for (const pubkey of chat.pubkeys) {
+        chatsByPubkey.set(pubkey, uniq(append(chat.id, chatsByPubkey.get(pubkey) || [])))
+      }
+    }
+
     const addEvents = (events: TrustedEvent[]) => {
       let dirty = false
       for (const event of events) {
@@ -484,21 +497,19 @@ export const chatsById = call(() => {
           const updatedChat = addSearchText({id, pubkeys, messages, last_activity})
 
           chatsById.set(id, updatedChat)
-
+          indexChatByPubkeys(updatedChat)
-          for (const pubkey of pubkeys) {
-            const pubkeyChats = chatsByPubkey.get(pubkey) || []
-            const uniqueChats = uniqBy(chat => chat.id, append(updatedChat, pubkeyChats))
-
-            chatsByPubkey.set(pubkey, uniqueChats)
-          }
 
           dirty = true
         }
 
         if (event.kind === PROFILE) {
-          for (const chat of chatsByPubkey.get(event.pubkey) || []) {
+          for (const chatId of chatsByPubkey.get(event.pubkey) || []) {
-            addSearchText(chat)
+            const chat = chatsById.get(chatId)
-            dirty = true
+
+            if (chat) {
+              addSearchText(chat)
+              dirty = true
+            }
           }
         }
       }
@@ -508,10 +519,36 @@ export const chatsById = call(() => {
       }
     }
 
-    addEvents(repository.query([{kinds: [...DM_KINDS, PROFILE]}]))
+    const removeEvents = (removed: Set<string>) => {
+      let dirty = false
+
+      for (const id of removed) {
+        const event = repository.getEvent(id)
+
+        if (event && DM_KINDS.includes(event.kind)) {
+          for (const chatId of chatsByPubkey.get(event.pubkey) || []) {
+            const chat = chatsById.get(chatId)
+
+            if (chat) {
+              chat.messages = reject(spec({id: event.id}), chat.messages)
+              dirty = true
+            }
+          }
+        }
+      }
+
+      if (dirty) {
+        set(chatsById)
+      }
+    }
+
+    addEvents(repository.query([{kinds: [...DM_KINDS, DELETE, PROFILE]}]))
 
     const unsubscribers = [
-      on(repository, "update", ({added}: RepositoryUpdate) => addEvents(added)),
+      on(repository, "update", ({added, removed}: RepositoryUpdate) => {
+        addEvents(added)
+        removeEvents(removed)
+      }),
     ]
 
     return () => unsubscribers.forEach(call)
@@ -536,17 +573,25 @@ export const chatSearch = derived(throttled(800, chatsById), $chatsByPubkey => {
 
 // Rooms
 
+export enum RoomType {
+  Text = "text",
+  Voice = "voice",
+}
+
 export type Room = PublishedRoomMeta & {
   id: string
   url: string
 }
 
+export const getRoomType = (room: RoomMeta): RoomType =>
+  room.livekit ? RoomType.Voice : RoomType.Text
+
 export const makeRoomId = (url: string, h: string) => `${url}'${h}`
 
 export const splitRoomId = (id: string) => id.split("'")
 
 export const hasNip29 = (relay?: RelayProfile) =>
-  relay?.supported_nips?.map?.(String)?.includes?.("29")
+  Boolean(relay?.supported_nips?.map?.(String)?.includes?.("29"))
 
 export const roomMetaEventsByIdByUrl = deriveEventsByIdByUrl({
   tracker,
@@ -624,7 +669,7 @@ export const deriveRoom = call(() => {
   return (url: string, h: string) =>
     derived(
       _deriveRoom(makeRoomId(url, h)),
-      room => room || {url, id: makeRoomId(url, h), ...makeRoomMeta({h})},
+      room => (room || {url, id: makeRoomId(url, h), ...makeRoomMeta({h})}) as Room,
     )
 })
 
@@ -632,6 +677,30 @@ export const displayRoom = (url: string, h: string) => getRoom(makeRoomId(url, h
 
 export const roomComparator = (url: string) => (h: string) => displayRoom(url, h).toLowerCase()
 
+export const deriveVoiceRooms = (url: string) =>
+  derived(roomsById, $roomsById => {
+    const set = new Set<string>()
+    for (const room of $roomsById.values()) {
+      if (room.url === url && room.livekit) {
+        set.add(room.h)
+      }
+    }
+    return set
+  })
+
+export const deriveOtherVoiceRooms = (url: string) =>
+  derived([deriveVoiceRooms(url), deriveUserRooms(url)], ([$roomsWithLivekit, $userRooms]) => {
+    const rooms: string[] = []
+
+    for (const h of $roomsWithLivekit) {
+      if (!$userRooms.includes(h)) {
+        rooms.push(h)
+      }
+    }
+
+    return sortBy(roomComparator(url), uniq(rooms))
+  })
+
 // User space/room lists
 
 export const groupListsByPubkey = deriveItemsByKey({
@@ -721,17 +790,20 @@ export const deriveUserRooms = (url: string) =>
   })
 
 export const deriveOtherRooms = (url: string) =>
-  derived([deriveUserRooms(url), roomsByUrl], ([$userRooms, $roomsByUrl]) => {
+  derived(
-    const rooms: string[] = []
+    [deriveUserRooms(url), deriveVoiceRooms(url), roomsByUrl],
+    ([$userRooms, voiceRooms, $roomsByUrl]) => {
+      const rooms: string[] = []
 
-    for (const {h} of $roomsByUrl.get(url) || []) {
+      for (const {h} of $roomsByUrl.get(url) || []) {
-      if (!$userRooms.includes(h)) {
+        if (!$userRooms.includes(h) && !voiceRooms.has(h)) {
-        rooms.push(h)
+          rooms.push(h)
+        }
       }
-    }
 
-    return sortBy(roomComparator(url), uniq(rooms))
+      return sortBy(roomComparator(url), uniq(rooms))
-  })
+    },
+  )
 
 // Space/room memberships
 
@@ -800,7 +872,7 @@ export const deriveRoomMembers = (url: string, h: string) => {
 
     const members = new Set<string>()
 
-    for (const event of sortBy(e => -e.created_at, $events)) {
+    for (const event of sortEventsAsc($events)) {
       const pubkeys = getPubkeyTagValues(event.tags)
 
       if (event.kind === ROOM_ADD_MEMBER) {
@@ -834,6 +906,50 @@ export const deriveRoomAdmins = (url: string, h: string) => {
   })
 }
 
+// Action items (admin review queue)
+// const pendingJoins: TrustedEvent[] = []
+
+export const deriveSpaceActionItems = (url: string) =>
+  derived(
+    deriveEventsForUrl(url, [
+      {
+        kinds: [REPORT, ROOM_JOIN, ROOM_LEAVE, ROOM_MEMBERS],
+      },
+    ]),
+    $events => {
+      const getRoomId = (e: TrustedEvent) =>
+        getTagValue(e.kind === ROOM_MEMBERS ? "d" : "h", e.tags)
+      const reports = $events.filter(e => e.kind === REPORT)
+      const pendingJoins: TrustedEvent[] = []
+
+      // Room-level join requests — most recent per pubkey+h
+      for (const [h, roomEvents] of groupBy(getRoomId, $events)) {
+        if (!h) continue
+
+        const roomJoins = roomEvents.filter(spec({kind: ROOM_JOIN}))
+        const roomLeaves = roomEvents.filter(spec({kind: ROOM_LEAVE}))
+        const roomMembersEvent = roomEvents.find(spec({kind: ROOM_MEMBERS}))
+        const roomMembers = getTagValues("p", roomMembersEvent?.tags ?? [])
+
+        pendingJoins.push(
+          ...removeUndefined(
+            Array.from(groupBy(e => e.pubkey, roomJoins).values())
+              .map(sortEventsDesc)
+              .map(first),
+          ).filter(({pubkey, created_at}) => {
+            if (roomMembers.includes(pubkey)) return false
+            if (gt(roomMembersEvent?.created_at, created_at)) return false
+            if (roomLeaves.some(e => e.pubkey === pubkey && e.created_at > created_at)) return false
+
+            return true
+          }),
+        )
+      }
+
+      return sortEventsDesc([...reports, ...pendingJoins])
+    },
+  )
+
 // User membership status
 
 export enum MembershipStatus {
@@ -1134,6 +1250,12 @@ export const deriveSupportedMethods = simpleCache(([url]: [string]) => {
   })
 })
 
+export const deriveHasLivekit = simpleCache(([url]: [string]) =>
+  readable<boolean | undefined>(undefined, set => {
+    checkRelayHasLivekit(url).then(has => set(has))
+  }),
+)
+
 export const deriveTimeout = (timeout: number) => {
   const store = writable<boolean>(false)
 
@@ -1193,3 +1315,8 @@ export const shouldNotify = (url: string, h?: string) => getShouldNotify(getSett
 
 export const deriveShouldNotify = (url: string, h?: string) =>
   derived(userSettingsValues, $settings => getShouldNotify($settings, url, h))
+
+// Whatever who cares
+
+export const hasNip50 = (relay?: RelayProfile) =>
+  Boolean(relay?.supported_nips?.map?.(String)?.includes?.("50"))

src/app/core/storage.ts

@@ -1,6 +1,6 @@
 import {call} from "@welshman/lib"
+import {SecureStorage} from "@aparajita/capacitor-secure-storage"
 import {Preferences} from "@capacitor/preferences"
-import {Filesystem, Directory} from "@capacitor/filesystem"
 import {IDB} from "@lib/indexeddb"
 
 export const kv = call(() => {
@@ -31,22 +31,57 @@ export const kv = call(() => {
   return {get, set, clear}
 })
 
-export const db = new IDB({name: "flotilla-9gl", version: 1})
+export const ss = call(() => {
+  let p = Promise.resolve()
 
-// Migration - we used to use capacitor's filesystem for storage, clear it out since we're
+  const get = async <T>(key: string): Promise<T | undefined> => {
-// going back to indexeddb
+    let value = await SecureStorage.getItem(key)
-call(async () => {
-  const res = await Filesystem.readdir({
-    path: "",
-    directory: Directory.Data,
-  })
 
-  await Promise.all(
+    if (!value) {
-    res.files.map(file =>
+      const legacy = await Preferences.get({key})
-      Filesystem.deleteFile({
+
-        path: file.name,
+      if (legacy.value) {
-        directory: Directory.Data,
+        value = legacy.value
-      }),
+        await SecureStorage.setItem(key, legacy.value)
-    ),
+        await Preferences.remove({key})
-  )
+      }
+    }
+
+    if (!value) return undefined
+
+    try {
+      return JSON.parse(value)
+    } catch (e) {
+      return undefined
+    }
+  }
+
+  const set = async <T>(key: string, value: T): Promise<void> => {
+    p = p.then(() => SecureStorage.setItem(key, JSON.stringify(value)))
+
+    await p
+  }
+
+  const clear = async () => {
+    p = p.then(() => SecureStorage.clear())
+
+    await p
+  }
+
+  return {get, set, clear}
+})
+
+export const db = new IDB({
+  name: "flotilla-9gl",
+  version: 1,
+  stores: [
+    {name: "events", keyPath: "id"},
+    {name: "tracker", keyPath: "id"},
+    {name: "relays", keyPath: "url"},
+    {name: "relayStats", keyPath: "url"},
+    {name: "handles", keyPath: "nip05"},
+    {name: "zappers", keyPath: "lnurl"},
+    {name: "plaintext", keyPath: "key"},
+    {name: "wrapManager", keyPath: "id"},
+  ],
 })

src/app/core/sync.ts

@@ -1,7 +1,7 @@
 import {page} from "$app/stores"
 import type {Unsubscriber} from "svelte/store"
 import {derived, get} from "svelte/store"
-import {last, call, assoc, chunk, sleep, identity, WEEK, ago} from "@welshman/lib"
+import {last, call, ifLet, assoc, chunk, sleep, identity, WEEK, ago} from "@welshman/lib"
 import {
   getListTags,
   getRelayTagValues,
@@ -18,8 +18,9 @@ import {
   RELAY_REMOVE_MEMBER,
   isSignedEvent,
   unionFilters,
+  getTagValue,
 } from "@welshman/util"
-import type {Filter} from "@welshman/util"
+import type {Filter, TrustedEvent} from "@welshman/util"
 import {request, requestOne, Difference, DifferenceEvent} from "@welshman/net"
 import {
   pubkey,
@@ -55,6 +56,7 @@ import {
   loadFeedsForPubkey,
 } from "@app/core/state"
 import {hasBlossomSupport} from "@app/core/commands"
+import {LIVEKIT_PARTICIPANTS} from "@app/voice"
 
 // Utils
 
@@ -62,12 +64,24 @@ type SyncOpts = {
   url: string
   signal: AbortSignal
   filters: Filter[]
+  onEvent?: (event: TrustedEvent) => void
 }
 
-const pullOneWithFallback = async (url: string, filter: Filter, signal: AbortSignal) => {
+const pullOneWithFallback = async (
+  url: string,
+  filter: Filter,
+  signal: AbortSignal,
+  onEvent?: (event: TrustedEvent) => void,
+) => {
   const cachedEvents = repository.query([filter]).filter(isSignedEvent)
   const since = last(cachedEvents.slice(10))?.created_at || 0
 
+  if (onEvent) {
+    for (const event of cachedEvents) {
+      onEvent(event)
+    }
+  }
+
   const shouldFallback =
     !hasNegentropy(url) ||
     (await new Promise(resolve => {
@@ -79,7 +93,7 @@ const pullOneWithFallback = async (url: string, filter: Filter, signal: AbortSig
 
       diff.on(DifferenceEvent.Close, () => {
         for (const ids of chunk(100, Array.from(diff.need))) {
-          requestOne({relay: url, signal, autoClose: true, filters: [{ids}]})
+          requestOne({relay: url, signal, autoClose: true, filters: [{ids}], onEvent})
         }
 
         resolve(false)
@@ -87,29 +101,29 @@ const pullOneWithFallback = async (url: string, filter: Filter, signal: AbortSig
     }))
 
   if (shouldFallback && !signal.aborted) {
-    request({relays: [url], signal, autoClose: true, filters: [{...filter, since}]})
+    request({relays: [url], signal, autoClose: true, filters: [{since, ...filter}], onEvent})
   }
 }
 
-export const pullWithFallback = async ({url, signal, filters}: SyncOpts) => {
+export const pullWithFallback = async ({url, signal, filters, onEvent}: SyncOpts) => {
   await loadRelay(url)
 
   if (signal.aborted) return
 
   for (const filter of filters) {
-    pullOneWithFallback(url, filter, signal)
+    pullOneWithFallback(url, filter, signal, onEvent)
   }
 }
 
-const listen = ({url, signal, filters}: SyncOpts) => {
+const listen = ({url, signal, filters, onEvent}: SyncOpts) => {
   const relays = [url]
 
-  request({relays, signal, filters: unionFilters(filters.map(assoc("limit", 0)))})
+  request({relays, signal, filters: unionFilters(filters.map(assoc("limit", 0))), onEvent})
 }
 
-const pullAndListen = ({url, filters, signal}: SyncOpts) => {
+const pullAndListen = (options: SyncOpts) => {
-  pullWithFallback({url, signal, filters})
+  pullWithFallback(options)
-  listen({url, signal, filters})
+  listen(options)
 }
 
 // Relays
@@ -254,68 +268,55 @@ const syncUserData = () => {
 // Spaces
 
 const syncSpace = (url: string, rooms: string[]) => {
+  const since = ago(WEEK)
+  const seen = new Set<string>()
   const controller = new AbortController()
 
-  // Relay-level kinds don't need #h tags
+  const pullRoomContent = (room: string) => {
-  pullAndListen({
+    if (!seen.has(room)) {
-    url,
+      seen.add(room)
-    signal: controller.signal,
+      pullAndListen({
-    filters: [{kinds: [RELAY_MEMBERS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]}],
+        url,
-  })
+        signal: controller.signal,
-
+        filters: [
-  // Room metadata uses #d tags, not #h, so no filtering needed
+          {kinds: MESSAGE_KINDS, since, "#h": [room]},
-  pullAndListen({
+          makeCommentFilter(CONTENT_KINDS, {since, "#h": [room]}),
-    url,
+        ],
-    signal: controller.signal,
+      })
-    filters: [{kinds: [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS]}],
+    }
-  })
-
-  // Room-scoped kinds: add #h tags when we know which rooms the user is in.
-  // This avoids sending broad filters that picky relays reject.
-  const roomKinds = [ROOM_DELETE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]
-  const since = ago(WEEK)
-
-  if (rooms.length > 0) {
-    pullAndListen({
-      url,
-      signal: controller.signal,
-      filters: [{kinds: roomKinds, "#h": rooms}],
-    })
-
-    pullAndListen({
-      url,
-      signal: controller.signal,
-      filters: [
-        {kinds: MESSAGE_KINDS, "#h": rooms, since},
-        makeCommentFilter(CONTENT_KINDS, {"#h": rooms, since}),
-      ],
-    })
-
-    listen({
-      url,
-      signal: controller.signal,
-      filters: [{kinds: REACTION_KINDS, "#h": rooms}],
-    })
-  } else {
-    pullAndListen({
-      url,
-      signal: controller.signal,
-      filters: [{kinds: roomKinds}],
-    })
-
-    pullAndListen({
-      url,
-      signal: controller.signal,
-      filters: [{kinds: MESSAGE_KINDS, since}, makeCommentFilter(CONTENT_KINDS, {since})],
-    })
-
-    listen({
-      url,
-      signal: controller.signal,
-      filters: [{kinds: REACTION_KINDS}],
-    })
   }
 
+  for (const room of rooms) {
+    pullRoomContent(room)
+  }
+
+  const relayKinds = [RELAY_MEMBERS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]
+  const roomMetaKinds = [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS, LIVEKIT_PARTICIPANTS]
+  const roomMemberKinds = [ROOM_DELETE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]
+
+  pullAndListen({
+    url,
+    signal: controller.signal,
+    filters: [
+      {kinds: relayKinds},
+      {kinds: roomMetaKinds},
+      {kinds: roomMemberKinds},
+      {kinds: MESSAGE_KINDS, since},
+      makeCommentFilter(CONTENT_KINDS, {since}),
+    ],
+    onEvent: event => {
+      if (event.kind === ROOM_META) {
+        ifLet(getTagValue("d", event.tags), pullRoomContent)
+      }
+    },
+  })
+
+  listen({
+    url,
+    signal: controller.signal,
+    filters: [{kinds: REACTION_KINDS}],
+  })
+
   return () => controller.abort()
 }
 

src/app/util/health.ts

@@ -0,0 +1,107 @@
+import {derived, get} from "svelte/store"
+import {not, ifLet, sample} from "@welshman/lib"
+import {getRelaysFromList, RelayMode} from "@welshman/util"
+import {
+  getRelay,
+  setWriteRelays,
+  setReadRelays,
+  setSearchRelays,
+  setMessagingRelays,
+  userRelayList,
+  userSearchRelayList,
+  userMessagingRelayList,
+} from "@welshman/app"
+import {hasNip50, DEFAULT_RELAYS, DEFAULT_MESSAGING_RELAYS} from "@app/core/state"
+
+export type HealthCheckContext = {
+  readRelays: string[]
+  writeRelays: string[]
+  messagingRelays: string[]
+  searchRelays: string[]
+}
+
+export type HealthCheck = {
+  title: string
+  description: string
+  action: string
+  isPending: (context: HealthCheckContext) => boolean
+  apply: (context: HealthCheckContext) => unknown
+}
+
+export const healthCheckContext = derived(
+  [userRelayList, userSearchRelayList, userMessagingRelayList],
+  ([$userRelayList, $userSearchRelayList, $userMessagingRelayList]) => {
+    return {
+      readRelays: getRelaysFromList($userRelayList, RelayMode.Read),
+      writeRelays: getRelaysFromList($userRelayList, RelayMode.Write),
+      searchRelays: getRelaysFromList($userSearchRelayList),
+      messagingRelays: getRelaysFromList($userMessagingRelayList),
+    }
+  },
+)
+
+const healthChecks: HealthCheck[] = [
+  {
+    title: "Missing Inbox Relays",
+    description: "Other people aren't currently able to reliably tag you in public notes.",
+    action: "Update",
+    isPending: context => context.readRelays.length <= 1,
+    apply: () => setReadRelays(DEFAULT_RELAYS),
+  },
+  {
+    title: "Missing Outbox Relays",
+    description: "Other people aren't currently able to reliably find your public notes.",
+    action: "Update",
+    isPending: context => context.writeRelays.length <= 1,
+    apply: () => setWriteRelays(DEFAULT_RELAYS),
+  },
+  {
+    title: "Missing DM Relays",
+    description: "You aren't currently able to reliably send or receive direct messages.",
+    action: "Update",
+    isPending: context => context.messagingRelays.length <= 1,
+    apply: () => setMessagingRelays(DEFAULT_MESSAGING_RELAYS),
+  },
+  {
+    title: "Too Many Inbox Relays",
+    description:
+      "You have more inbox relays than is really necessary, which can affect resource usage.",
+    action: "Prune Selections",
+    isPending: context => context.readRelays.length > 8,
+    apply: context => setReadRelays(sample(5, context.readRelays)),
+  },
+  {
+    title: "Too Many Outbox Relays",
+    description:
+      "You have more outbox relays than is really necessary, which can affect resource usage.",
+    action: "Prune Selections",
+    isPending: context => context.writeRelays.length > 8,
+    apply: context => setWriteRelays(sample(5, context.writeRelays)),
+  },
+  {
+    title: "Too Many DM Relays",
+    description:
+      "You have more DM relays than is really necessary, which can affect resource usage.",
+    action: "Prune Selections",
+    isPending: context => context.messagingRelays.length > 8,
+    apply: context => setMessagingRelays(sample(5, context.messagingRelays)),
+  },
+  {
+    title: "Invalid Search Relays",
+    description: "Some of your search relays don't support search.",
+    action: "Remove Invalid",
+    isPending: context => context.searchRelays.some(url => not(ifLet(getRelay(url), hasNip50))),
+    apply: context =>
+      setSearchRelays(context.searchRelays.filter(url => ifLet(getRelay(url), hasNip50))),
+  },
+]
+
+export const isHealthCheckPending = (healthCheck: HealthCheck) =>
+  healthCheck.isPending(get(healthCheckContext))
+
+export const applyHealthCheck = (healthCheck: HealthCheck) =>
+  healthCheck.apply(get(healthCheckContext))
+
+export const pendingHealthChecks = derived(healthCheckContext, ctx =>
+  healthChecks.filter(hc => hc.isPending(ctx)),
+)

src/app/util/history.ts

@@ -8,6 +8,7 @@ export const setupHistory = () =>
     if ($page.params.relay) {
       lastPageBySpaceUrl.set($page.params.relay, $page.url.pathname)
     }
+
     if ($page.params.chat) {
       lastChatUrl = $page.url.pathname
     }

src/app/util/logout.ts

@@ -0,0 +1,15 @@
+import {db, kv, ss} from "@app/core/storage"
+import {Push} from "@app/util/notifications"
+import {deactivateCurrentPomadeSession} from "@app/util/pomade"
+
+export const logout = async () => {
+  await deactivateCurrentPomadeSession()
+  await Push.disable()
+  await kv.clear()
+  await ss.clear()
+  await db.clear()
+
+  localStorage.clear()
+
+  window.location.href = "/"
+}