Update version

The Docker build wasn't making use of docker's cache because the .git directory was being copied into the build context. This means that even if the app did not change, if anything in git changed then docker would rebuild the entire app.

This excludes the .git folder from the docker build, instead relying on the user to pass in the build hash at build time. Which is annoying but I don't think there's a better way around it.

This was annoying me because I am deploying a self-hosted version of flotilla from a git branch via ansible and it was rebuilding flotilla every time.

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

.dockerignore

@@ -9,4 +9,4 @@ build
 
 # Env files (keep .env for build; exclude local overrides)
 .env.local
-.env.*.local
+.env.*.local

.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=https://pomade.coracle.social,https://pomade.fiatjaf.com,https://pomade.nostrver.se,https://pomade.scuttle.works
+VITE_POMADE_SIGNERS=
 VITE_PLATFORM_URL=https://app.flotilla.social
 VITE_PLATFORM_TERMS=https://flotilla.social/terms
 VITE_PLATFORM_PRIVACY=https://flotilla.social/privacy
@@ -15,10 +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_SEARCH_RELAYS=relay.ditto.pub,antiprimal.net,relay.vertexlab.io
-VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com,relay.keychat.io,relay.ditto.pub
+VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com
 VITE_SIGNER_RELAYS=relay.nsec.app,ephemeral.snowflare.cc,bucket.coracle.social
 VITE_VAPID_PUBLIC_KEY=BIt2D4BdgdbCowD_0d3Np6GbrIGHxd7aIEUeZNe3hQuRlHz02OhzvDaai0XSFoJYVzSzdMjdyW-QhvW9_yq8j4Y
-VITE_THUMBNAIL_URL=
 VITE_GLITCHTIP_API_KEY=
 GLITCHTIP_AUTH_TOKEN=

.gitea/workflows/docker-publish.yml

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

.gitignore

@@ -1,6 +1,6 @@
 # Env
+.env
 .env.local
-.env.*.local
 
 # Vite
 vite.config.js.timestamp-*
@@ -25,10 +25,8 @@ android/app/src/main/assets/public/
 
 # Web/JavaScript
 node_modules/
-.pnpm-store/
 build/
 .svelte-kit/
-.next/
 
 # Rust/Tauri
 *target/
@@ -70,9 +68,7 @@ GoogleService-Info.plist
 .roo
 .idea/
 .vscode/
-.claude/
 
 # OS generated
 .DS_Store
 Thumbs.db
-package-lock.json

AGENTS.md

@@ -169,7 +169,6 @@ 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,32 +1,5 @@
 # Changelog
 
-# 1.7.2
-
-* Fix race condition in nip 46
-* Remove duplicate spaces button
-* Combine discover and space list pages
-* Fix some chat related bugs
-* Fix bug with joining spaces
-
-# 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

CONTRIBUTING.md

@@ -1,56 +0,0 @@
-## Project Overview
-
-Flotilla is a Nostr "relays as groups" community chat client. It implements NIP-29 (relay-based groups) to create Discord-like spaces (servers) and rooms (channels).
-
-Please visit our [issue tracker](https://gitea.coracle.social/coracle/flotilla/issues) to contribute. Any new issues should be opened without a milestone, label, or project and the project owners will triage them.
-
-### Milestones
-
-Milestones indicate how soon a given task should be tackled.
-
-- [Current](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&milestone=1) issues are immediately actionable.
-- [Next](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&milestone=2) means an issue is blocked.
-- [Future](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&milestone=3) means we're deferring work until a later date.
-
-### Labels
-
-- [Design](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=15) issues need design work before being implemented. This might take the form of a high-quality mockup, wireframes, user flows, or just a couple notes about where things go, depending on the nature of the task.
-- [Dev](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=16) issues are ready to be implemented. Most of the work will be related to architecting and writing code.
-- [Easy](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=14) issues have no dependencies, and are scoped quite narrowly.
-- [Priority](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=6) issues include bugs and urgent feature requests. These should get attention first if possible, although sometimes long-standing performance issues or subtle bugs might end up here for a while.
-- [Ideas](https://gitea.coracle.social/coracle/flotilla/issues?type=all&state=open&labels=13) are for things that aren't scoped out yet, or which need protocol work before getting designed or implemented.
-
-### Projects
-
-Issues may or may not have a project. Projects are used to group issues thematically just for organization.
-
-## Coding conventions
-
-There are a few conventions that are helpful to know right out of the gate.
-
-- Most nostr protocol functionality is implemented via the [welshman library](https://welshman.coracle.social/)
-- Use Svelte 4 **stores** rather than runes for all state outside UI components
-- Most global state flows through Welshman's `repository` (unidirectional)
-- Query state using `deriveEventsMapped` or `deriveProfile` etc
-- Events are published via `publishThunk`, which allows for optimistic UI updates during signing/pow generation.
-- Components should have minimal props - e.g. instead of passing a whole `relay` through, pass its `url`.
-- Use `AbortController` when possible instead of request ids
-- Use `undefined` or optional properties instead of `null`
-- Do not use `any`. If there are type errors related to `unknown`, they are likely because the upstream definition of the data is incorrect.
-- Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
-- When dynamically building classes, use `cx` from `classnames`.
-- Do not define svelte event handlers inline, instead name them and put them in the script section of templates.
-
-## Contributing Workflow
-
-To contribute, do the following:
-
-- Find or create an issue and assign yourself (comment instead if you're not able to self-assign)
-- If the issue is a design task, attach or link out to any mockups/wireframes/flowcharts
-- Once a design task is completed, a maintainer will remove the `design` label and add the `dev` label
-- If the issue is a development task, fork the repository and create a branch prefixed by the issue number, e.g. `105-deep-links`
-- Before requesting a review, be sure to review any agent-generated code, run the pre-commit hooks, and test the changes.
-- Open a PR and request a review. A maintainer will get back to you with requested changes, or will merge the PR.
-- Keep your PR up-to-date by rebasing frequently on `dev`. Avoid force-pushing to `dev`.
-- PRs are rebased, squashed, and merged to keep commit history simple.
-- An issue may have multiple PRs. Once complete, it can be closed.

Dockerfile

@@ -4,8 +4,6 @@
 
 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
@@ -22,6 +20,7 @@ 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
@@ -29,4 +28,4 @@ WORKDIR /app
 # Copy only the built output - no source, no .env, no dev deps
 COPY --from=builder /app/build ./build
 
-CMD ["npx", "serve", "-s", "build"]
+CMD ["npx", "serve", "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.local` file and populate it with the following environment variables (see `.env.template` for examples):
+You can also optionally create an `.env` file and populate it with the following environment variables (see `.env` 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
@@ -16,13 +16,11 @@ You can also optionally create an `.env.local` file and populate it with the fol
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
 
-These values **won't** be used for a built version. Instead, env variables should be provided to `build.sh` directly or to the built container.
-
 If you're deploying a custom version of flotilla, be sure to remove the `plausible.coracle.social` script from `app.html`. This sends analytics to a server hosted by the developer.
 
 ## Development
 
-See [CONTRIBUTING.md](CONTRIBUTING.md).
+See [CONTRIBUTING.md](AGENTS.md).
 
 ## Deployment
 
@@ -31,7 +29,7 @@ To run your own Flotilla, it's as simple as:
 ```sh
 pnpm install
 pnpm run build
-npx serve -s build
+npx serve build
 ```
 
 Or, if you prefer to use a container:

android/app/build.gradle

@@ -1,5 +1,4 @@
 apply plugin: 'com.android.application'
-apply plugin: 'kotlin-android'
 
 android {
     namespace = "social.flotilla"
@@ -8,8 +7,8 @@ android {
         applicationId "social.flotilla"
         minSdk rootProject.ext.minSdkVersion
         targetSdk rootProject.ext.targetSdkVersion
-        versionCode 44
-        versionName "1.7.2"
+        versionCode 41
+        versionName "1.6.5"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -36,10 +35,6 @@ 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,7 +9,6 @@ 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,9 +42,4 @@
 
     <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" />
-    <uses-permission android:name="android.permission.CAMERA" />
-
-    <uses-feature android:name="android.hardware.camera.any" android:required="false" />
 </manifest>

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

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

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

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

@@ -1,862 +0,0 @@
-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,7 +1,6 @@
 // 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()
@@ -10,7 +9,6 @@ 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,9 +2,6 @@
 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

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

capacitor.config.ts

@@ -4,9 +4,6 @@ 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 = 35;
+				CURRENT_PROJECT_VERSION = 32;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.6.5;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -385,14 +385,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 35;
+				CURRENT_PROJECT_VERSION = 32;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.6.5;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

ios/App/App/Info.plist

@@ -20,18 +20,8 @@
 	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
-	<key>ITSAppUsesNonExemptEncryption</key>
-	<false/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
-	<key>NSCameraUsageDescription</key>
-	<string>Flotilla uses the camera when you enable it in a voice room.</string>
-	<key>NSMicrophoneUsageDescription</key>
-	<string>Flotilla uses the microphone when you enable it in a voice room.</string>
-	<key>UIBackgroundModes</key>
-	<array>
-		<string>remote-notification</string>
-	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
@@ -57,5 +47,11 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
+	<key>ITSAppUsesNonExemptEncryption</key>
+	<false/>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>remote-notification</string>
+	</array>
 </dict>
 </plist>

ios/App/Podfile

@@ -11,7 +11,6 @@ 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.7.2",
+  "version": "1.6.5",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -22,7 +22,6 @@
     "@eslint/js": "^9.39.2",
     "@sveltejs/kit": "^2.50.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
-    "@tailwindcss/postcss": "^4.2.2",
     "@tauri-apps/cli": "^2.9.6",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.23",
@@ -36,14 +35,13 @@
     "prettier-plugin-svelte": "^3.4.1",
     "svelte": "^5.48.0",
     "svelte-check": "^4.3.5",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^5.4.21"
   },
   "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",
@@ -59,7 +57,7 @@
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
     "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.2.3",
+    "@pomade/core": "^0.2.1",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
@@ -67,28 +65,27 @@
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.8",
-    "@welshman/app": "^0.8.12",
-    "@welshman/content": "^0.8.12",
-    "@welshman/editor": "^0.8.12",
-    "@welshman/feeds": "^0.8.12",
-    "@welshman/lib": "^0.8.12",
-    "@welshman/net": "^0.8.12",
-    "@welshman/router": "^0.8.12",
-    "@welshman/signer": "^0.8.12",
-    "@welshman/store": "^0.8.12",
-    "@welshman/util": "^0.8.12",
+    "@welshman/app": "^0.8.8",
+    "@welshman/content": "^0.8.8",
+    "@welshman/editor": "^0.8.8",
+    "@welshman/feeds": "^0.8.8",
+    "@welshman/lib": "^0.8.8",
+    "@welshman/net": "^0.8.8",
+    "@welshman/router": "^0.8.8",
+    "@welshman/signer": "^0.8.8",
+    "@welshman/store": "^0.8.8",
+    "@welshman/util": "^0.8.8",
     "compressorjs-next": "^1.1.2",
-    "daisyui": "^5.5.19",
+    "daisyui": "^4.12.24",
     "date-picker-svelte": "^2.17.0",
     "dotenv": "^16.6.1",
     "emoji-picker-element": "^1.28.1",
     "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.7.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "throttle-debounce": "^5.0.2",
@@ -101,9 +98,9 @@
     "onlyBuiltDependencies": [
       "sharp",
       "nostr-signer-capacitor-plugin"
-    ]
-  },
-  "overrides": {
-    "sharp": "0.35.0-rc.0"
+    ],
+    "overrides": {
+      "sharp": "0.35.0-rc.0"
+    }
   }
 }

postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
-    "@tailwindcss/postcss": {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
 }

pwa-assets.config.js

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

src/app.css

@@ -1,25 +1,45 @@
-@import "tailwindcss";
+@import "@welshman/editor/index.css";
 
-@config "../tailwind.config.js";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@utility pt-sai {
-  padding-top: var(--sait);
+/* Fonts */
+
+@font-face {
+  font-family: "Satoshis";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local(""),
+    url("/fonts/Satoshi Symbol.ttf") format("truetype");
 }
 
-@utility pr-sai {
-  padding-right: var(--sair);
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local(""),
+    url("/fonts/Lato-Regular.ttf") format("truetype");
 }
 
-@utility pb-sai {
-  padding-bottom: var(--saib);
+@font-face {
+  font-family: "Lato";
+  font-style: bold;
+  font-weight: 600;
+  src:
+    local(""),
+    url("/fonts/Lato-Bold.ttf") format("truetype");
 }
 
-@utility pl-sai {
-  padding-left: var(--sail);
-}
-
-@utility px-sai {
-  @apply pl-sai pr-sai;
+@font-face {
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 400;
+  src:
+    local(""),
+    url("/fonts/Italic.ttf") format("truetype");
 }
 
 /* root */
@@ -32,224 +52,98 @@
   --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
 }
 
-@utility py-sai {
-  @apply pt-sai pb-sai;
+[data-theme] {
+  @apply bg-base-300;
+  --base-100: oklch(var(--b1));
+  --base-200: oklch(var(--b2));
+  --base-300: oklch(var(--b3));
+  --base-content: oklch(var(--bc));
+  --primary: oklch(var(--p));
+  --primary-content: oklch(var(--pc));
+  --secondary: oklch(var(--s));
+  --secondary-content: oklch(var(--sc));
+  --neutral: oklch(var(--n));
+  --neutral-content: oklch(var(--nc));
 }
 
-@utility p-sai {
-  @apply py-sai px-sai;
+.mobile [data-tip]::before {
+  display: none !important;
 }
 
-@utility mt-sai {
-  margin-top: var(--sait);
-}
+/* safe area insets */
 
-@utility mr-sai {
-  margin-right: var(--sair);
-}
-
-@utility mb-sai {
-  margin-bottom: var(--saib);
-}
-
-@utility ml-sai {
-  margin-left: var(--sail);
-}
-
-@utility mx-sai {
-  @apply ml-sai mr-sai;
-}
-
-@utility my-sai {
-  @apply mt-sai mb-sai;
-}
-
-@utility m-sai {
-  @apply my-sai mx-sai;
-}
-
-@utility top-sai {
-  top: var(--sait);
-}
-
-@utility right-sai {
-  right: var(--sair);
-}
-
-@utility bottom-sai {
-  bottom: var(--saib);
-}
-
-@utility left-sai {
-  left: var(--sail);
-}
-
-@utility card2 {
-  @apply rounded-box text-base-content p-4 sm:p-6;
-}
-
-@utility column {
-  @apply flex flex-col;
-}
-
-@utility center {
-  @apply flex items-center justify-center;
-}
-
-@utility row-2 {
-  @apply flex items-center gap-2;
-}
-
-@utility row-3 {
-  @apply flex items-center gap-3;
-}
-
-@utility row-4 {
-  @apply flex items-center gap-4;
-}
-
-@utility col-2 {
-  @apply flex flex-col gap-2;
-}
-
-@utility col-3 {
-  @apply flex flex-col gap-3;
-}
-
-@utility col-4 {
-  @apply flex flex-col gap-4;
-}
-
-@utility col-8 {
-  @apply flex flex-col gap-8;
-}
-
-@utility ellipsize {
-  @apply overflow-hidden text-ellipsis;
-}
-
-@utility content-padding-x {
-  @apply px-4 sm:px-8 md:px-12;
-}
-
-@utility content-padding-t {
-  @apply pt-4 sm:pt-8 md:pt-12;
-}
-
-@utility content-padding-b {
-  @apply pb-4 sm:pb-8 md:pb-12;
-}
-
-@utility content-padding-y {
-  @apply pt-4 pb-4 sm:pt-8 sm:pb-8 md:pt-12 md:pb-12;
-}
-
-@utility content-sizing {
-  @apply m-auto w-full max-w-3xl;
-}
-
-@utility content {
-  @apply m-auto w-full max-w-3xl px-4 pt-4 pb-4 sm:px-8 sm:pt-8 sm:pb-8 md:px-12 md:pt-12 md:pb-12;
-}
-
-@utility heading {
-  @apply text-center text-2xl;
-}
-
-@utility subheading {
-  @apply text-center text-xl;
-}
-
-@utility superheading {
-  @apply text-center text-4xl;
-}
-
-@utility link {
-  @apply text-primary cursor-pointer underline;
-}
-
-/* content visibility */
-
-@utility cv {
-  content-visibility: auto;
-}
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}
-
-@layer utilities {
-  /* Fonts */
-
-  @font-face {
-    font-family: "Satoshis";
-    font-style: normal;
-    font-weight: 400;
-    src:
-      local(""),
-      url("/fonts/Satoshi Symbol.ttf") format("truetype");
+@layer components {
+  .pt-sai {
+    padding-top: var(--sait);
   }
 
-  @font-face {
-    font-family: "Lato";
-    font-style: normal;
-    font-weight: 400;
-    src:
-      local(""),
-      url("/fonts/Lato-Regular.ttf") format("truetype");
+  .pr-sai {
+    padding-right: var(--sair);
   }
 
-  @font-face {
-    font-family: "Lato";
-    font-style: bold;
-    font-weight: 600;
-    src:
-      local(""),
-      url("/fonts/Lato-Bold.ttf") format("truetype");
+  .pb-sai {
+    padding-bottom: var(--saib);
   }
 
-  @font-face {
-    font-family: "Lato";
-    font-style: italic;
-    font-weight: 400;
-    src:
-      local(""),
-      url("/fonts/Italic.ttf") format("truetype");
+  .pl-sai {
+    padding-left: var(--sail);
   }
 
-  /* root */
-
-  :root {
-    font-family: Lato;
-    --sait: var(--safe-area-inset-top, env(safe-area-inset-top));
-    --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
-    --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
-    --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
+  .px-sai {
+    @apply pl-sai pr-sai;
   }
 
-  [data-theme] {
-    @apply bg-base-300;
+  .py-sai {
+    @apply pt-sai pb-sai;
   }
 
-  .mobile [data-tip]::before {
-    display: none !important;
+  .p-sai {
+    @apply py-sai px-sai;
   }
 
-  /* safe area insets */
+  .mt-sai {
+    margin-top: var(--sait);
+  }
+
+  .mr-sai {
+    margin-right: var(--sair);
+  }
+
+  .mb-sai {
+    margin-bottom: var(--saib);
+  }
+
+  .ml-sai {
+    margin-left: var(--sail);
+  }
+
+  .mx-sai {
+    @apply ml-sai mr-sai;
+  }
+
+  .my-sai {
+    @apply mt-sai mb-sai;
+  }
+
+  .m-sai {
+    @apply my-sai mx-sai;
+  }
+
+  .top-sai {
+    top: var(--sait);
+  }
+
+  .right-sai {
+    right: var(--sair);
+  }
+
+  .bottom-sai {
+    bottom: var(--saib);
+  }
+
+  .left-sai {
+    left: var(--sail);
+  }
 }
 
 /* utilities */
@@ -271,18 +165,110 @@
   @apply bg-base-300 text-base-content transition-colors;
 }
 
+.card2 {
+  @apply rounded-box p-4 text-base-content sm:p-6;
+}
+
 .card2.card2-sm {
-  @apply text-base-content p-2 sm:p-4;
+  @apply p-2 text-base-content sm:p-4;
+}
+
+.column {
+  @apply flex flex-col;
+}
+
+.center {
+  @apply flex items-center justify-center;
+}
+
+.row-2 {
+  @apply flex items-center gap-2;
+}
+
+.row-3 {
+  @apply flex items-center gap-3;
+}
+
+.row-4 {
+  @apply flex items-center gap-4;
+}
+
+.col-2 {
+  @apply flex flex-col gap-2;
+}
+
+.col-3 {
+  @apply flex flex-col gap-3;
+}
+
+.col-4 {
+  @apply flex flex-col gap-4;
+}
+
+.col-8 {
+  @apply flex flex-col gap-8;
+}
+
+.badge {
+  @apply justify-start overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.ellipsize {
+  @apply overflow-hidden text-ellipsis;
 }
 
 [data-tip]::before {
-  @apply overflow-hidden text-ellipsis;
+  @apply ellipsize;
+}
+
+.content-padding-x {
+  @apply px-4 sm:px-8 md:px-12;
+}
+
+.content-padding-t {
+  @apply pt-4 sm:pt-8 md:pt-12;
+}
+
+.content-padding-b {
+  @apply pb-4 sm:pb-8 md:pb-12;
+}
+
+.content-padding-y {
+  @apply content-padding-t content-padding-b;
+}
+
+.content-sizing {
+  @apply m-auto w-full max-w-3xl;
+}
+
+.content {
+  @apply content-sizing content-padding-x content-padding-y;
+}
+
+.heading {
+  @apply text-center text-2xl;
+}
+
+.subheading {
+  @apply text-center text-xl;
+}
+
+.superheading {
+  @apply text-center text-4xl;
+}
+
+.link {
+  @apply cursor-pointer text-primary underline;
 }
 
 .input input::placeholder {
   opacity: 0.5;
 }
 
+.shadow-top-xl {
+  @apply shadow-[0_20px_25px_-5px_rgb(0,0,0,0.1)_0_8px_10px_-6px_rgb(0,0,0,0.1)];
+}
+
 /* tiptap */
 
 .input-editor,
@@ -292,21 +278,21 @@
 }
 
 .tiptap {
-  --tiptap-object-bg: var(--color-neutral);
-  --tiptap-object-fg: var(--color-neutral-content);
-  --tiptap-active-bg: var(--color-primary);
-  --tiptap-active-fg: var(--color-primary-content);
+  --tiptap-object-bg: var(--neutral);
+  --tiptap-object-fg: var(--neutral-content);
+  --tiptap-active-bg: var(--primary);
+  --tiptap-active-fg: var(--primary-content);
 }
 
 .tiptap-suggestions {
-  --tiptap-object-bg: var(--color-base-100);
-  --tiptap-object-fg: var(--color-base-content);
-  --tiptap-active-bg: var(--color-base-300);
-  --tiptap-active-fg: var(--color-base-content);
+  --tiptap-object-bg: var(--base-100);
+  --tiptap-object-fg: var(--base-content);
+  --tiptap-active-bg: var(--base-300);
+  --tiptap-active-fg: var(--base-content);
 }
 
 .tiptap-suggestions__item {
-  @apply border-base-100 border-l-2 border-solid;
+  @apply border-l-2 border-solid border-base-100;
 }
 
 .tiptap-suggestions__selected {
@@ -326,13 +312,13 @@
 }
 
 .note-editor .tiptap {
-  --tiptap-object-bg: var(--color-base-200);
-  @apply input rounded-box h-auto min-h-32 p-[.65rem] pb-6;
+  --tiptap-object-bg: var(--base-200);
+  @apply input input-bordered h-auto min-h-32 rounded-box p-[.65rem] pb-6;
 }
 
 .input-editor .tiptap {
-  --tiptap-object-bg: var(--color-base-200);
-  @apply input h-auto p-[.65rem];
+  --tiptap-object-bg: var(--base-200);
+  @apply input input-bordered h-auto p-[.65rem];
 }
 
 /* link-content, based on tiptap */
@@ -344,8 +330,8 @@
   white-space: nowrap;
   border-radius: 3px;
   padding: 0 0.25rem;
-  background-color: var(--color-base-100);
-  color: var(--color-base-content);
+  background-color: var(--base-100);
+  color: var(--base-content);
 }
 
 /* content rendered by welshman/content */
@@ -361,31 +347,23 @@
 /* date input */
 
 .picker {
-  --date-picker-foreground: var(--color-base-content);
-  --date-picker-background: var(--color-base-300);
-  --date-picker-highlight-border: var(--color-primary);
-  --date-picker-selected-color: var(--color-primary-content);
-  --date-picker-selected-background: var(--color-primary);
+  --date-picker-foreground: var(--base-content);
+  --date-picker-background: var(--base-300);
+  --date-picker-highlight-border: var(--primary);
+  --date-picker-selected-color: var(--primary-content);
+  --date-picker-selected-background: var(--primary);
 }
 
 .date-time-field {
-  @apply input rounded-lg px-0;
+  @apply input input-bordered rounded-lg px-0;
 }
 
 .date-time-field input {
-  @apply h-full! w-full! rounded-lg! border-none! bg-inherit! px-4! text-inherit!;
+  @apply !h-full !w-full !rounded-lg !border-none !bg-inherit !px-4 !text-inherit;
 }
 
 /* tippy popover */
 
-.tippy-target {
-  @apply z-tooltip pointer-events-none fixed inset-0;
-}
-
-.tippy-target > * {
-  pointer-events: auto;
-}
-
 .tippy-box {
   @apply rounded-box shadow-xl;
 }
@@ -393,15 +371,15 @@
 /* emoji picker */
 
 emoji-picker {
-  --background: var(--color-base-100);
-  --border-color: var(--color-base-100);
+  --background: var(--base-100);
+  --border-color: var(--base-100);
   --border-radius: var(--rounded-box);
-  --button-active-background: var(--color-base-content);
-  --button-hover-background: var(--color-base-content);
-  --indicator-color: var(--color-base-content);
-  --input-border-color: var(--color-base-100);
-  --input-font-color: var(--color-base-content);
-  --outline-color: var(--color-base-100);
+  --button-active-background: var(--base-content);
+  --button-hover-background: var(--base-content);
+  --indicator-color: var(--base-content);
+  --input-border-color: var(--base-100);
+  --input-font-color: var(--base-content);
+  --outline-color: var(--base-100);
 }
 
 /* progress */
@@ -412,12 +390,28 @@ progress[value]::-webkit-progress-value {
 
 /* content width for fixed elements */
 
-.left-content {
-  @apply md:left-[calc(18.5rem+var(--sail))];
+.cw {
+  @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
+}
+
+.cw-full {
+  @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
+}
+
+.cb {
+  @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
+}
+
+.ct {
+  @apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)];
 }
 
 /* Keyboard open state adjustments */
 
+body.keyboard-open .cb {
+  @apply bottom-sai;
+}
+
 body.keyboard-open .hide-on-keyboard {
   display: none;
 }
@@ -425,13 +419,15 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply z-compose relative mb-14 shrink-0 md:mb-0;
-}
-
-.chat__compose .chat__compose-inner {
-  @apply min-w-0;
+  @apply cb cw fixed z-compose;
 }
 
 .chat__scroll-down {
-  @apply pb-sai z-feature fixed right-4 bottom-28 md:bottom-16;
+  @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
+}
+
+/* content visibility */
+
+.cv {
+  content-visibility: auto;
 }

src/app/call/stores.ts

@@ -1,57 +0,0 @@
-import {Room as LiveKitRoom} from "livekit-client"
-import {derived, writable} from "svelte/store"
-import {type Room} from "@app/core/state"
-
-export type VoiceSession = {
-  url: string
-  h: string
-  room: LiveKitRoom
-  muted: boolean
-  cameraOn: boolean
-  screenShareOn: boolean
-}
-
-export type Pubkey = string
-
-export type VoiceParticipant = {pubkey?: Pubkey; identity: string}
-
-export enum VoiceState {
-  Joining = "joining",
-  Connected = "connected",
-  Disconnected = "disconnected",
-}
-
-export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
-
-export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
-
-export const currentVoiceRoom = writable<Room | undefined>(undefined)
-
-export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
-
-export const pubkeyFromLiveKitIdentity = (identity: string): string | undefined =>
-  /^[a-f0-9]{64}$/.test(identity.slice(0, 64)) ? identity.slice(0, 64) : undefined
-
-export const participantFromLiveKitIdentity = (identity: string): VoiceParticipant => {
-  const pk = pubkeyFromLiveKitIdentity(identity)
-  return pk ? {pubkey: pk, identity} : {identity}
-}
-
-export const participantKey = (p: VoiceParticipant) => p.pubkey ?? p.identity
-
-export const speakingParticipants = writable<VoiceParticipant[]>([])
-
-export const isParticipantSpeaking = derived(
-  speakingParticipants,
-  $participants => (p: VoiceParticipant) =>
-    $participants.some(sp => participantKey(sp) === participantKey(p)),
-)
-
-export const isLocalSpeaking = derived(
-  [currentVoiceSession, speakingParticipants],
-  ([$session, $speaking]) => {
-    if (!$session?.room) return false
-    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
-    return $speaking.some(sp => participantKey(sp) === participantKey(local))
-  },
-)

src/app/call/video.ts

@@ -1,99 +0,0 @@
-import {Track} from "livekit-client"
-import {MediaQuery} from "svelte/reactivity"
-import {derived, get, writable} from "svelte/store"
-import {currentVoiceSession, VoiceState, type VoiceSession, voiceState} from "@app/call/stores"
-import {pushToast} from "@app/util/toast"
-
-export enum VideoCallLayout {
-  Chat = "chat",
-  Video = "video",
-  Split = "split",
-}
-
-export const isDesktopLayout = new MediaQuery("min-width: 768px", false)
-
-export enum ViewportSize {
-  Desktop = "desktop",
-  Mobile = "mobile",
-}
-
-export const videoCallViewportSync = {
-  previousLayout: undefined as ViewportSize | undefined,
-}
-
-export const videoCallLayout = writable<VideoCallLayout>(VideoCallLayout.Split)
-
-export const resetVideoCallLayout = () => {
-  videoCallViewportSync.previousLayout = undefined
-  videoCallLayout.set(VideoCallLayout.Chat)
-}
-
-export const videoPrimaryTileKey = writable<string | undefined>(undefined)
-
-export const toggleVideoPrimaryTile = (key: string) => {
-  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
-}
-
-const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
-
-const countLiveVisualFeeds = (session: VoiceSession): number => {
-  const room = session.room
-  let n = 0
-  const lp = room.localParticipant
-  if (session.cameraOn) {
-    const pub = lp.getTrackPublication(Track.Source.Camera)
-    if (pub?.track) n += 1
-  }
-  if (session.screenShareOn) {
-    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
-    if (pub?.track) n += 1
-  }
-  for (const rp of room.remoteParticipants.values()) {
-    for (const source of VISUAL_SOURCES) {
-      const pub = rp.getTrackPublication(source)
-      if (pub?.isSubscribed && pub.track) n += 1
-    }
-  }
-  return n
-}
-
-export const triggerVideoFeedCount = () => {
-  currentVoiceSession.update(s => (s ? {...s} : s))
-}
-
-export const videoTileCount = derived([currentVoiceSession, voiceState], ([$session, $state]) => {
-  if ($state !== VoiceState.Connected || !$session) return 0
-  return countLiveVisualFeeds($session)
-})
-
-export const toggleCamera = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const cameraOn = !session.cameraOn
-  try {
-    await session.room.localParticipant.setCameraEnabled(cameraOn)
-    currentVoiceSession.set({...session, cameraOn})
-  } catch {
-    pushToast({
-      theme: "error",
-      message: cameraOn ? "Could not access camera" : "Could not turn off camera",
-    })
-  }
-}
-
-export const toggleScreenShare = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const screenShareOn = !session.screenShareOn
-  try {
-    await session.room.localParticipant.setScreenShareEnabled(screenShareOn)
-    currentVoiceSession.set({...session, screenShareOn})
-  } catch {
-    pushToast({
-      theme: "error",
-      message: screenShareOn ? "Could not start screen sharing" : "Could not stop screen sharing",
-    })
-  }
-}

src/app/call/voice.ts

@@ -1,373 +0,0 @@
-/**
- * Voice rooms via LiveKit. Note: Voice does not work on localhost in Firefox
- * (ICE candidate gathering fails). Use Chrome or test from deployed HTTPS.
- */
-import {
-  DisconnectReason,
-  LocalParticipant,
-  LocalTrackPublication,
-  Room as LiveKitRoom,
-  RoomEvent,
-  Track,
-  supportsAudioOutputSelection,
-  type AudioCaptureOptions,
-} from "livekit-client"
-import {derived, get} from "svelte/store"
-import {map, removeUndefined, uniqBy} from "@welshman/lib"
-import type {TrustedEvent} from "@welshman/util"
-import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
-import {signer} from "@welshman/app"
-import {getLivekitEndpoint} from "$lib/livekit"
-import {AbortError, whenAborted, whenTimeout} from "$lib/util"
-import {
-  currentVoiceRoom,
-  currentVoiceSession,
-  participantFromLiveKitIdentity,
-  participantKey,
-  participantPubkeyMap,
-  pubkeyFromLiveKitIdentity,
-  speakingParticipants,
-  VoiceState,
-  type VoiceParticipant,
-  voiceState,
-} from "@app/call/stores"
-import {resetVideoCallLayout, triggerVideoFeedCount, videoPrimaryTileKey} from "@app/call/video"
-import {deriveLatestEventForUrl, deriveRoom, makeRoomId} from "@app/core/state"
-import {pushToast} from "@app/util/toast"
-
-export const LIVEKIT_PARTICIPANTS = 39004
-
-export {checkRelayHasLivekit} from "$lib/livekit"
-
-export {supportsAudioOutputSelection}
-
-const LIVEKIT_DEFAULT_DEVICE_ID = "default"
-
-export enum DeviceKind {
-  AudioInput = "audioinput",
-  AudioOutput = "audiooutput",
-  VideoInput = "videoinput",
-}
-
-export const switchVoiceActiveDevice = async (
-  kind: DeviceKind,
-  targetDeviceId: string,
-): Promise<void> => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-  const id = targetDeviceId === "" ? LIVEKIT_DEFAULT_DEVICE_ID : targetDeviceId
-  try {
-    await session.room.switchActiveDevice(kind, id)
-  } catch {
-    let label: string
-    switch (kind) {
-      case DeviceKind.AudioInput:
-        label = "microphone"
-        break
-      case DeviceKind.AudioOutput:
-        label = "speaker"
-        break
-      case DeviceKind.VideoInput:
-        label = "camera"
-        break
-    }
-    pushToast({theme: "error", message: `Error changing ${label}`})
-  }
-}
-
-const addParticipant = (identity: string) => {
-  participantPubkeyMap.update(m => {
-    const next = new Map(m)
-    next.set(identity, pubkeyFromLiveKitIdentity(identity) ?? "")
-    return next
-  })
-}
-
-const deleteParticipant = (identity: string) => {
-  participantPubkeyMap.update(m => {
-    const next = new Map(m)
-    next.delete(identity)
-    return next
-  })
-}
-
-const fetchLivekitToken = async (
-  url: string,
-  groupId: string,
-  signal?: AbortSignal,
-): Promise<{server_url: string; participant_token: string}> => {
-  const endpoint = getLivekitEndpoint(url, groupId)
-
-  const $signer = signer.get()
-  if (!$signer) throw new Error("No signer available")
-
-  if (signal?.aborted) throw new DOMException("Aborted", "AbortError")
-
-  const template = await makeHttpAuth(endpoint, "GET")
-  const signedEvent = await $signer.sign(template)
-  const authHeader = makeHttpAuthHeader(signedEvent)
-
-  const response = await fetch(endpoint, {
-    headers: {Authorization: authHeader},
-    signal,
-  })
-
-  if (!response.ok) {
-    const text = await response.text()
-    throw new Error(`Token request failed (${response.status}): ${text}`)
-  }
-
-  return response.json()
-}
-
-export const deriveVoiceParticipants = (url: string, h: string) =>
-  // We use the livekit identity list while in a call, and fall back to the list in kind 39004.
-  derived(
-    [
-      participantPubkeyMap,
-      currentVoiceRoom,
-      deriveLatestEventForUrl(url, [{kinds: [LIVEKIT_PARTICIPANTS], "#d": [h]}]),
-    ],
-    ([$participantPubkeyMap, $currentVoiceRoom, $publishedParticipantList]) => {
-      const inCall = $participantPubkeyMap.size > 0 && $currentVoiceRoom?.id === makeRoomId(url, h)
-
-      if (inCall) {
-        const participants = [...$participantPubkeyMap.keys()].map(participantFromLiveKitIdentity)
-        return uniqBy((p: VoiceParticipant) => participantKey(p), participants)
-      } else {
-        const latestEvent = $publishedParticipantList as TrustedEvent | undefined
-        if (!latestEvent) return []
-        const participants = removeUndefined(
-          map(
-            (tag: string[]) => (tag[1] ? {pubkey: tag[1], identity: tag[1]} : undefined),
-            getTags("participant", latestEvent.tags),
-          ),
-        )
-        return uniqBy((p: VoiceParticipant) => participantKey(p), participants)
-      }
-    },
-  )
-
-const setUpMicrophone = async (
-  startMuted: boolean,
-  preferredMicId: string | undefined,
-  participant: LocalParticipant,
-): Promise<boolean> => {
-  if (startMuted) {
-    return true
-  }
-
-  let muted = true
-  let capture: AudioCaptureOptions | undefined = undefined
-  if (preferredMicId) {
-    capture = {deviceId: preferredMicId}
-  }
-  try {
-    await participant.setMicrophoneEnabled(true, capture)
-    muted = false
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not access microphone"})
-  }
-  return muted
-}
-
-const onRoomDisconnected = (reason?: DisconnectReason) => {
-  videoPrimaryTileKey.set(undefined)
-  currentVoiceSession.set(undefined)
-  resetVideoCallLayout()
-  if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
-    voiceState.set(VoiceState.Disconnected)
-    const message =
-      reason === DisconnectReason.JOIN_FAILURE
-        ? "Could not connect to voice room. Please try again."
-        : "Voice connection lost."
-    pushToast({theme: "error", message})
-  }
-  speakingParticipants.set([])
-  participantPubkeyMap.set(new Map())
-}
-
-const onTrackSubscribed = (track: Track) => {
-  if (track.kind === Track.Kind.Audio) {
-    const element = track.attach()
-    element.style.display = "none"
-    document.body.appendChild(element)
-    element.play().catch(() => {})
-  } else if (track.kind === Track.Kind.Video) {
-    triggerVideoFeedCount()
-  }
-}
-
-const onTrackUnsubscribed = (track: Track) => {
-  track.detach().forEach(el => el.remove())
-  if (track.kind === Track.Kind.Video) {
-    triggerVideoFeedCount()
-  }
-}
-
-const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
-  speakingParticipants.set(participants.map(p => participantFromLiveKitIdentity(p.identity)))
-}
-
-const playJoinSound = () => {
-  const audio = new Audio("/join-voice-room.mp3")
-  audio.play().catch(() => {})
-}
-
-const onParticipantConnected = (participant: {identity: string}) => {
-  addParticipant(participant.identity)
-  playJoinSound()
-}
-
-const onParticipantDisconnected = (participant: {identity: string}) => {
-  deleteParticipant(participant.identity)
-}
-
-const onLocalTrackUnpublished = (
-  publication: LocalTrackPublication,
-  participant: LocalParticipant,
-) => {
-  if (publication.source !== Track.Source.ScreenShare) return
-  const session = get(currentVoiceSession)
-  if (!session || participant.identity !== session.room.localParticipant.identity) return
-  if (!session.screenShareOn) return
-  currentVoiceSession.set({...session, screenShareOn: false})
-}
-
-let joinAbortController: AbortController | undefined
-
-export const cancelJoinVoiceRoom = () => {
-  joinAbortController?.abort()
-}
-
-export const joinVoiceRoom = async (
-  url: string,
-  h: string,
-  startMuted = true,
-  preferredMicId?: string,
-): Promise<void> => {
-  cancelJoinVoiceRoom()
-
-  const session = get(currentVoiceSession)
-  if (session) await leaveVoiceRoom()
-
-  currentVoiceRoom.set(get(deriveRoom(url, h)))
-  voiceState.set(VoiceState.Joining)
-
-  const controller = new AbortController()
-  joinAbortController = controller
-  const signal = controller.signal
-  const isActive = () => joinAbortController === controller
-
-  try {
-    const {server_url, participant_token} = await fetchLivekitToken(url, h, signal)
-
-    if (signal.aborted) throw new AbortError()
-
-    const liveKitRoom = new LiveKitRoom({adaptiveStream: true, dynacast: true})
-
-    liveKitRoom.on(RoomEvent.Disconnected, onRoomDisconnected)
-    liveKitRoom.on(RoomEvent.ParticipantConnected, onParticipantConnected)
-    liveKitRoom.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
-    liveKitRoom.on(RoomEvent.TrackSubscribed, onTrackSubscribed)
-    liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
-    liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
-    liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
-
-    try {
-      await Promise.race([
-        liveKitRoom.connect(server_url, participant_token, {maxRetries: 0}),
-        whenTimeout(5_000, {
-          message: "Connection timed out. Please check your network and try again.",
-        }),
-        whenAborted(signal),
-      ])
-    } catch (e) {
-      liveKitRoom.disconnect()
-      throw e
-    }
-
-    participantPubkeyMap.set(new Map())
-    addParticipant(liveKitRoom.localParticipant.identity)
-    for (const p of liveKitRoom.remoteParticipants.values()) {
-      addParticipant(p.identity)
-    }
-
-    const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
-
-    currentVoiceSession.set({
-      url,
-      h,
-      room: liveKitRoom,
-      muted,
-      cameraOn: false,
-      screenShareOn: false,
-    })
-    voiceState.set(VoiceState.Connected)
-    playJoinSound()
-  } catch (e) {
-    if (isActive()) voiceState.set(VoiceState.Disconnected)
-    if (e instanceof AbortError) return
-    throw e
-  } finally {
-    if (isActive()) joinAbortController = undefined
-  }
-}
-
-export const leaveVoiceRoom = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const audio = new Audio("/leave-voice-room.mp3")
-  audio.play().catch(() => {})
-
-  if (session.cameraOn) {
-    try {
-      await session.room.localParticipant.setCameraEnabled(false)
-    } catch {
-      pushToast({theme: "error", message: "Error turning off camera."})
-    }
-  }
-
-  if (session.screenShareOn) {
-    try {
-      await session.room.localParticipant.setScreenShareEnabled(false)
-    } catch {
-      pushToast({theme: "error", message: "Error turning off screen sharing."})
-    }
-  }
-
-  voiceState.set(VoiceState.Disconnected)
-  videoPrimaryTileKey.set(undefined)
-  currentVoiceSession.set(undefined)
-  resetVideoCallLayout()
-  session.room.disconnect()
-  speakingParticipants.set([])
-  participantPubkeyMap.set(new Map())
-}
-
-export const rejoinVoiceRoom = async (): Promise<void> => {
-  const target = get(currentVoiceRoom)
-  if (!target) return
-  return joinVoiceRoom(target.url, target.h)
-}
-
-export const toggleMute = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const muted = !session.muted
-  if (muted) {
-    // Disable and re-enable microphone to trigger permission prompt
-    session.room.localParticipant.setMicrophoneEnabled(false)
-    currentVoiceSession.set({...session, muted})
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setMicrophoneEnabled(true)
-    currentVoiceSession.set({...session, muted})
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not access microphone"})
-  }
-}

src/app/components/AppContainer.svelte

@@ -1,11 +1,12 @@
 <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 {modal} from "@app/util/modal"
+  import {modals} from "@app/util/modal"
 
   interface Props {
     children: Snippet
@@ -19,8 +20,8 @@
     <PrimaryNav>
       {@render children?.()}
     </PrimaryNav>
-  {:else if !$modal}
-    <Dialog noEscape children={{component: Landing, props: {}}} />
+  {:else if !$modals[$page.url.hash.slice(1)]}
+    <Dialog children={{component: Landing, props: {}}} />
   {/if}
 </div>
 <Toast />

src/app/components/CalendarEventActions.svelte

@@ -38,7 +38,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex grow flex-wrap justify-end gap-2">
+<div class="flex flex-grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />

src/app/components/CalendarEventForm.svelte

@@ -20,33 +20,24 @@
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
-  import {DraftKey} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
   import {canEnforceNip70} from "@app/core/commands"
 
-  type Values = {
-    d: string
-    title: string
-    content: string | object
-    location: string
-    start?: number
-    end?: number
-  }
-
   type Props = {
     url: string
     h?: string
     header: Snippet
-    initialValues?: Values
+    initialValues?: {
+      d: string
+      title: string
+      content: string
+      location: string
+      start: number
+      end: number
+    }
   }
 
-  let {url, h, header, initialValues}: Props = $props()
-
-  const draftKey = new DraftKey<Values>(`calendar:${url}:${h ?? ""}`)
-
-  if (!initialValues) {
-    initialValues = draftKey.get()
-  }
+  const {url, h, header, initialValues}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -83,9 +74,9 @@
     const ed = await editor
     const content = ed.getText({blockSeparator: "\n"}).trim()
     const tags = [
-      ["d", d],
+      ["d", initialValues?.d || randomId()],
       ["title", title],
-      ["location", location],
+      ["location", location || ""],
       ["start", start.toString()],
       ["end", end.toString()],
       ...daysBetween(start, end).map(D => ["D", D.toString()]),
@@ -104,27 +95,17 @@
 
     pushToast({message: "Your event has been saved!"})
     publishThunk({event, relays: [url]})
-    draftKey.clear()
     history.back()
   }
 
-  const d = $state(initialValues?.d ?? randomId())
-  let title = $state(initialValues?.title ?? "")
-  let location = $state(initialValues?.location ?? "")
+  const content = initialValues?.content || ""
+  const editor = makeEditor({url, submit, uploading, content})
+
+  let title = $state(initialValues?.title || "")
+  let location = $state(initialValues?.location || "")
   let start: number | undefined = $state(initialValues?.start)
   let end: number | undefined = $state(initialValues?.end)
-  let endDirty = $state(Boolean(initialValues?.end))
-  let content = $state(initialValues?.content ?? "")
-
-  const onChange = (json: object) => {
-    content = json
-  }
-
-  const editor = makeEditor({url, submit, uploading, onChange, content})
-
-  $effect(() => {
-    draftKey.set({d, title, location, start, end, content})
-  })
+  let endDirty = Boolean(initialValues?.end)
 
   $effect(() => {
     if (!endDirty && start) {
@@ -155,7 +136,7 @@
       {#snippet input()}
         <div
           class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
-          <div class="input-editor grow overflow-hidden">
+          <div class="input-editor flex-grow overflow-hidden">
             <EditorContent {editor} />
           </div>
           <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>

src/app/components/CalendarEventHeader.svelte

@@ -19,7 +19,7 @@
   const end = $derived(parseInt(meta.end))
 </script>
 
-<div class="flex grow flex-wrap justify-between gap-2">
+<div class="flex flex-grow flex-wrap justify-between gap-2">
   <p class="text-xl">{meta.title || meta.name}</p>
   {#if !isNaN(start) && !isNaN(end)}
     {@const startDateDisplay = formatTimestampAsDate(start)}

src/app/components/CalendarEventMeta.svelte

@@ -23,7 +23,7 @@
   {#if meta.location}
     <span class="flex items-start gap-1">
       <Icon icon={MapPoint} class="mt-[2px]" size={4} />
-      <span class="wrap-break-word">{meta.location}</span>
+      <span class="break-words">{meta.location}</span>
     </span>
   {/if}
 </div>

src/app/components/Chat.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import {onMount} from "svelte"
-  import {goto} from "$app/navigation"
   import {
-    ago,
     int,
     ms,
     partition,
-    ifLet,
     spec,
     nthEq,
     nthNe,
@@ -35,28 +32,25 @@
     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, deriveChat} from "@app/core/state"
+  import {userSettingsValues, PLATFORM_NAME, deriveChat} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
-  import {DraftKey} from "@app/util/drafts"
-  import {makeDelete, prependParent} from "@app/core/commands"
+  import {prependParent} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
 
   type Props = {
@@ -67,17 +61,14 @@
   const {pubkeys, info}: Props = $props()
 
   const chat = deriveChat(pubkeys)
-  const draftKey = new DraftKey<{content?: string | object}>(`dm:${$chat?.id}`)
   const others = remove($pubkey!, pubkeys)
-  const missingRelayLists = $derived(others.filter(pk => !$messagingRelayListsByPubkey.has(pk)))
+  const missingRelayLists = $derived(pubkeys.filter(pk => !$messagingRelayListsByPubkey.has(pk)))
 
   const showMembers = () =>
     others.length === 1
       ? pushModal(ProfileDetail, {pubkey: others[0]})
       : pushModal(ChatMembers, {pubkeys: others})
 
-  const back = () => goto("/chat")
-
   const replyTo = (event: TrustedEvent) => {
     parent = event
     compose?.focus()
@@ -87,117 +78,75 @@
     parent = undefined
   }
 
-  const clearEventToEdit = () => {
-    eventToEdit = undefined
-  }
-
   const onSubmit = async (params: EventContent) => {
-    try {
-      const ptags = remove($pubkey!, pubkeys).map(tagPubkey)
+    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"))
+    // 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)
+    // Add our reply quote to content
+    params = prependParent(parent, params)
 
-      if (eventToEdit) {
-        if (eventToEdit.content === params.content) {
-          return
-        }
+    const [imetaTags, tags] = partition(nthEq(0, "imeta"), params.tags)
+    const imetas = getTags("imeta", imetaTags).map(tagsFromIMeta)
+    const templates: EventTemplate[] = []
+    const buffer = []
 
-        await sendWrapped({
-          event: makeDelete({event: eventToEdit, protect: false}),
-          recipients: pubkeys,
-          pow: 16,
-        })
+    const addTemplate = (kind: number, content: string, tags: string[][]) => {
+      content = content.trim()
+
+      if (content) {
+        templates.push(makeEvent(kind, {content, tags: [...tags, ...ptags]}))
       }
-
-      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 = () => {
+    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()
-    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()
 
   const elements = $derived.by(() => {
     const elements = []
@@ -233,6 +182,20 @@
     for (const pubkey of others) {
       loadMessagingRelayList(pubkey)
     }
+
+    const observer = new ResizeObserver(() => {
+      if (dynamicPadding && chatCompose) {
+        dynamicPadding.style.minHeight = `${chatCompose.offsetHeight}px`
+      }
+    })
+
+    observer.observe(chatCompose!)
+    observer.observe(dynamicPadding!)
+
+    return () => {
+      observer.unobserve(chatCompose!)
+      observer.unobserve(dynamicPadding!)
+    }
   })
 
   setTimeout(() => {
@@ -241,58 +204,75 @@
 </script>
 
 <PageBar>
-  <div class="flex">
-    <Button onclick={back} class="place-self-start pr-3 md:hidden flex items-center">
-      <Icon icon={ArrowLeft} size={7} />
+  {#snippet title()}
+    <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
+      {#if others.length === 0}
+        <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>
-    <div class="flex items-center justify-between gap-4">
-      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
-        <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
-          {#if others.length === 0}
-            <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}
+  {#snippet action()}
+    {#if remove($pubkey, missingRelayLists).length > 0}
+      {@const count = remove($pubkey, missingRelayLists).length}
+      {@const label = count > 1 ? "lists are" : "list is"}
+      <div
+        class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+        data-tip="{count} messaging {label} not configured.">
+        <Icon icon={Danger} />
+        {count}
       </div>
-    </div>
-  </div>
+    {/if}
+  {/snippet}
 </PageBar>
 
 <PageContent class="flex flex-col-reverse gap-2 pt-4">
-  {#if missingRelayLists.length > 0}
+  <div bind:this={dynamicPadding}></div>
+  {#if missingRelayLists.includes($pubkey!)}
     <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} />
-          Direct messages are not enabled
+          Your messaging relays are not configured.
         </p>
         <p>
-          Ask
-          {#each missingRelayLists as pubkey (pubkey)}
-            <ProfileLink {pubkey} />
-          {/each}
-          to enable direct messaging by opening this conversation in their app.
+          In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
+          your <Link class="link" href="/settings/relays">relay settings page</Link> to receive messages.
+        </p>
+      </div>
+    </div>
+  {: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>
@@ -305,9 +285,7 @@
         event={$state.snapshot(value as TrustedEvent)}
         {pubkeys}
         {showPubkey}
-        {replyTo}
-        canEdit={canEditEvent}
-        onEdit={onEditEvent} />
+        {replyTo} />
     {/if}
   {/each}
   <p class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
@@ -320,26 +298,13 @@
     </Spinner>
     {@render info?.()}
   </p>
-  <div class="h-screen"></div>
 </PageContent>
 
-<div class="chat__compose bg-base-200">
+<div class="chat__compose bg-base-200" bind:this={chatCompose}>
   <div>
     {#if parent}
       <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
     {/if}
-    {#if eventToEdit}
-      <ChatComposeEdit clear={clearEventToEdit} />
-    {/if}
   </div>
-  {#key eventToEdit}
-    <ChatCompose
-      bind:this={compose}
-      {onSubmit}
-      {onEscape}
-      {onEditPrevious}
-      initialValues={eventToEdit}
-      draftKey={eventToEdit ? undefined : draftKey}
-      disabled={Boolean(missingRelayLists.length)} />
-  {/key}
+  <ChatCompose bind:this={compose} {onSubmit} />
 </div>

src/app/components/ChatCompose.svelte

@@ -1,7 +1,5 @@
 <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,63 +8,23 @@
   import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
-  import {type DraftKey} from "@app/util/drafts"
-
-  type Values = {
-    content?: string | object
-  }
 
   type Props = {
-    disabled?: boolean
-    draftKey?: DraftKey<Values>
-    onEscape?: () => void
-    onEditPrevious?: () => void
     onSubmit: (event: EventContent) => void
-    initialValues?: Values
   }
 
-  let {
-    initialValues,
-    disabled = false,
-    draftKey,
-    onEscape,
-    onEditPrevious,
-    onSubmit,
-  }: Props = $props()
+  const {onSubmit}: Props = $props()
 
-  if (!initialValues) {
-    initialValues = draftKey?.get()
-  }
-
-  const autofocus = !isMobile && !disabled
+  const autofocus = !isMobile
 
   const uploading = writable(false)
 
-  const editorClass = $derived(
-    cx("chat-editor 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 || disabled) return
+    if ($uploading) return
 
     const ed = await editor
     const content = ed.getText({blockSeparator: "\n"}).trim()
@@ -76,45 +34,23 @@
 
     onSubmit({content, tags})
 
-    draftKey?.clear()
     ed.chain().clearContent().run()
   }
 
-  let content = $state(initialValues?.content ?? "")
-
-  const onChange = (json: object) => {
-    content = json
-  }
-
   const editor = makeEditor({
-    content,
+    autofocus,
     submit,
     uploading,
-    onChange,
     aggressive: true,
     encryptFiles: true,
   })
-
-  $effect(() => {
-    draftKey?.set({content})
-  })
-
-  onMount(async () => {
-    const ed = await editor
-    ed.view.dom.addEventListener("keydown", handleKeyDown)
-  })
-
-  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}
+    disabled={$uploading}
     onclick={uploadFiles}>
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
@@ -122,13 +58,13 @@
       <Icon icon={GallerySend} />
     {/if}
   </Button>
-  <div class={editorClass} aria-disabled={disabled}>
-    <EditorContent {autofocus} {editor} />
+  <div class="chat-editor flex-grow overflow-hidden">
+    <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}
+    disabled={$uploading}
     onclick={submit}>
     <Icon icon={Plane} />
   </Button>

src/app/components/ChatComposeEdit.svelte

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

@@ -1,72 +0,0 @@
-<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 Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import {makeChatPath, goToChat} from "@app/util/routes"
+  import {makeChatPath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
 
   interface Props {
@@ -24,7 +24,6 @@
   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) {
@@ -33,9 +32,9 @@
   })
 </script>
 
-<Button class="flex flex-col justify-start gap-1 w-full" onclick={openChat}>
+<Link class="flex flex-col justify-start gap-1" href={makeChatPath(props.pubkeys)}>
   <div
-    class="cursor-pointer border-t border-solid border-base-100 px-3 py-2 transition-colors hover:bg-base-100 {props.class}"
+    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}>
     <div class="flex flex-col justify-start gap-1">
       <div class="flex items-center justify-between gap-2">
@@ -72,4 +71,4 @@
       </p>
     </div>
   </div>
-</Button>
+</Link>

src/app/components/ChatMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {assoc} from "@welshman/lib"
+  import ChatSquare from "@assets/icons/chat-square.svg?dataurl"
   import Check from "@assets/icons/check.svg?dataurl"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import BellOff from "@assets/icons/bell-off.svg?dataurl"
@@ -7,9 +8,13 @@
   import Button from "@lib/components/Button.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import ChatStart from "@app/components/ChatStart.svelte"
   import {setChecked} from "@app/util/notifications"
+  import {pushModal} from "@app/util/modal"
   import {notificationSettings} from "@app/core/state"
 
+  const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
+
   const markAsRead = () => {
     setChecked("/chat/*")
     history.back()
@@ -23,6 +28,10 @@
 <Modal>
   <ModalBody>
     <div class="flex flex-col gap-2">
+      <Button class="btn btn-primary" onclick={startChat}>
+        <Icon size={5} icon={ChatSquare} />
+        Start chat
+      </Button>
       <Button class="btn btn-neutral" onclick={markAsRead}>
         <Icon size={5} icon={Check} />
         Mark all read

src/app/components/ChatMessage.svelte

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

src/app/components/ChatMessageEmojiButton.svelte

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

src/app/components/ChatMessageMenu.svelte

@@ -4,14 +4,12 @@
   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, edit} = $props()
+  const {event, pubkeys, popover, replyTo} = $props()
 
   const reply = () => replyTo(event)
-  const onEdit = () => edit?.()
 
   const showInfo = () => {
     popover.hide()
@@ -26,11 +24,6 @@
       <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,7 +3,6 @@
   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"
@@ -21,17 +20,15 @@
     pubkeys: string[]
     event: TrustedEvent
     reply: () => void
-    edit?: () => void
   }
 
-  const {event, pubkeys, reply, edit}: Props = $props()
+  const {event, pubkeys, reply}: 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)
 
@@ -42,11 +39,6 @@
     reply()
   }
 
-  const sendEdit = () => {
-    history.back()
-    edit?.()
-  }
-
   const copyText = () => {
     history.back()
     clip(event.content)
@@ -70,12 +62,6 @@
         <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,6 +2,7 @@
   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"
@@ -18,11 +19,11 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
-  import {goToChat} from "@app/util/routes"
+  import {makeChatPath} from "@app/util/routes"
 
   const back = () => history.back()
 
-  const onSubmit = () => goToChat(pubkeys)
+  const onSubmit = () => goto(makeChatPath(pubkeys))
 
   const addPubkey = (pubkey: string) => {
     pubkeys = uniq([...pubkeys, pubkey])

src/app/components/ClassifiedActions.svelte

@@ -42,7 +42,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex grow flex-wrap justify-end gap-2">
+<div class="flex flex-grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />

src/app/components/ClassifiedForm.svelte

@@ -20,34 +20,25 @@
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
-  import {DraftKey} from "@app/util/drafts"
   import {canEnforceNip70, uploadFile} from "@app/core/commands"
 
-  type Values = {
-    d: string
-    title: string
-    content: string | object
-    price: number
-    currency: string
-    images: (string | File)[]
-    status: string
-    topics: string[]
-  }
-
   type Props = {
     url: string
     h?: string
     header: Snippet
-    initialValues?: Values
+    initialValues?: {
+      d?: string
+      title?: string
+      content?: string
+      price?: number
+      currency?: string
+      images?: string[]
+      status?: string
+      topics?: string[]
+    }
   }
 
-  let {url, h, header, initialValues}: Props = $props()
-
-  const draftKey = new DraftKey<Values>(`classified:${url}:${h ?? ""}`)
-
-  if (!initialValues) {
-    initialValues = draftKey.get()
-  }
+  const {url, h, header, initialValues}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -75,7 +66,7 @@
       }
 
       const tags = [
-        ["d", d],
+        ["d", initialValues?.d || randomId()],
         ["title", title],
         ["summary", content],
         ["price", String(price), currency],
@@ -119,32 +110,22 @@
         event: makeEvent(CLASSIFIED, {content, tags}),
       })
 
-      draftKey.clear()
       history.back()
     } finally {
       loading = false
     }
   }
 
+  const content = initialValues?.content || ""
+  const editor = makeEditor({url, submit, content})
+
   let loading = $state(false)
-  const d = $state(initialValues?.d ?? randomId())
-  let title = $state(initialValues?.title ?? "")
-  let status = $state(initialValues?.status ?? "active")
-  let price = $state(initialValues?.price ?? 0)
-  let currency = $state(initialValues?.currency ?? "SAT")
-  let images = $state(initialValues?.images ?? [])
-  let topics = $state(uniq(removeUndefined(initialValues?.topics?.map(normalizeTopic) ?? [])))
-  let content = $state(initialValues?.content ?? "")
-
-  const onChange = (json: object) => {
-    content = json
-  }
-
-  const editor = makeEditor({url, submit, onChange, content})
-
-  $effect(() => {
-    draftKey.set({d, title, status, price, currency, images, topics, content})
-  })
+  let title = $state(initialValues?.title || "")
+  let status = $state(initialValues?.status || "active")
+  let price = $state(Number(initialValues?.price || 0))
+  let currency = $state(initialValues?.currency || "SAT")
+  let images = $state<(string | File)[]>(initialValues?.images || [])
+  let topics = $state(uniq(removeUndefined((initialValues?.topics || []).map(normalizeTopic))))
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -172,7 +153,7 @@
           <p>Description*</p>
         {/snippet}
         {#snippet input()}
-          <div class="note-editor grow overflow-hidden">
+          <div class="note-editor flex-grow overflow-hidden">
             <EditorContent {editor} />
           </div>
         {/snippet}

src/app/components/ClassifiedItem.svelte

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

src/app/components/CommentActions.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-2">
-  <div class="flex grow flex-wrap justify-end gap-2">
+  <div class="flex flex-grow flex-wrap justify-end gap-2">
     <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
     <ThunkStatusOrDeleted {event} />
     {#if showActivity}

src/app/components/ComposeMenu.svelte

@@ -4,7 +4,6 @@
   import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic.svg?dataurl"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
   import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
-  import Revote from "@assets/icons/revote.svg?dataurl"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import {pushModal} from "@app/util/modal"
@@ -12,7 +11,6 @@
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
   import GoalCreate from "@app/components/GoalCreate.svelte"
-  import PollCreate from "@app/components/PollCreate.svelte"
 
   type Props = {
     url: string
@@ -30,8 +28,6 @@
 
   const createClassified = () => pushModal(ClassifiedCreate, {url, h})
 
-  const createPoll = () => pushModal(PollCreate, {url, h})
-
   let ul: Element
 
   onMount(() => {
@@ -64,10 +60,4 @@
       Create Thread
     </Button>
   </li>
-  <li>
-    <Button onclick={createPoll}>
-      <Icon size={4} icon={Revote} />
-      Ask a Question
-    </Button>
-  </li>
 </ul>

src/app/components/Content.svelte

@@ -150,7 +150,7 @@
     </div>
   {:else}
     <div
-      class="overflow-hidden text-ellipsis wrap-break-word"
+      class="overflow-hidden text-ellipsis break-words"
       style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
       {#each shortContent as parsed, i}
         {#if isNewline(parsed) && !isBlock(i - 1)}

src/app/components/ContentLinkBlock.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
   import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
   import {isRelayUrl, getTagValue} from "@welshman/util"
-  import {Capacitor} from "@capacitor/core"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
-  import {
-    dufflepud,
-    PLATFORM_URL,
-    IMAGE_CONTENT_TYPES,
-    VIDEO_CONTENT_TYPES,
-    THUMBNAIL_URL,
-  } from "@app/core/state"
+  import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
@@ -29,14 +22,6 @@
     return [url, true]
   })
 
-  const getVideoPoster = (videoUrl: string): string | undefined => {
-    if (Capacitor.getPlatform() === "android" && THUMBNAIL_URL) {
-      return `${THUMBNAIL_URL}/thumbnail?url=${encodeURIComponent(videoUrl)}`
-    }
-
-    return undefined
-  }
-
   const loadPreview = async () => {
     const json = await postJson(dufflepud("link/preview"), {url})
 
@@ -57,12 +42,7 @@
 <Link {external} {href} class="my-2 block">
   <div class="overflow-hidden rounded-box">
     {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
-      <video
-        controls
-        src={url}
-        poster={getVideoPoster(url)}
-        preload="metadata"
-        class="max-h-96 rounded-box object-contain object-center">
+      <video controls src={url} class="max-h-96 rounded-box object-contain object-center">
         <track kind="captions" />
       </video>
     {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}

src/app/components/ContentMinimal.svelte

@@ -101,7 +101,7 @@
       </p>
     </div>
   {:else}
-    <div class="overflow-hidden text-ellipsis wrap-break-word">
+    <div class="overflow-hidden text-ellipsis break-words">
       {#each shortContent as parsed, i}
         {#if isNewline(parsed)}
           <ContentNewline value={parsed.value} />

src/app/components/ContentQuote.svelte

@@ -45,7 +45,7 @@
     {#if $quote.kind === MESSAGE}
       <div
         class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
-        style="background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-300) 90%);">
+        style="background-color: color-mix(in srgb, var(--primary) 10%, var(--base-300) 90%);">
         <NoteContentMinimal trimParent {url} event={$quote} />
       </div>
     {:else}

src/app/components/EventInfo.svelte

@@ -101,7 +101,7 @@
     {/if}
     <div class="relative">
       <pre class="card2 card2-sm bg-alt overflow-auto text-xs"><code>{json}</code></pre>
-      <p class="absolute right-2 top-2 flex grow items-center justify-between">
+      <p class="absolute right-2 top-2 flex flex-grow items-center justify-between">
         <Button onclick={copyJson} class="btn btn-neutral btn-sm flex items-center">
           <Icon icon={Copy} /> Copy
         </Button>
@@ -109,6 +109,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary grow" onclick={() => history.back()}>Got it</Button>
+    <Button class="btn btn-primary flex-grow" onclick={() => history.back()}>Got it</Button>
   </ModalFooter>
 </Modal>

src/app/components/EventReply.svelte

@@ -10,19 +10,13 @@
   import {publishComment, canEnforceNip70} from "@app/core/commands"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
-  import {DraftKey} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
 
-  type Values = {
-    content?: string | object
-  }
-
   const {url, event, onClose, onSubmit} = $props()
-  const draftKey = new DraftKey<Values>(`reply:${event.id}`)
-  const initialValues = draftKey.get()
+
   const shouldProtect = canEnforceNip70(url)
+
   const uploading = writable(false)
-  const autofocus = !isMobile
 
   const selectFiles = () => editor.then(ed => ed.commands.selectFiles())
 
@@ -44,23 +38,13 @@
       })
     }
 
-    draftKey.clear()
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
 
+  const editor = makeEditor({url, submit, uploading, autofocus: !isMobile})
+
   let form: HTMLElement
   let spacer: HTMLElement
-  let content = $state(initialValues?.content ?? "")
-
-  const onChange = (json: object) => {
-    content = json
-  }
-
-  const editor = makeEditor({url, submit, uploading, content, onChange})
-
-  $effect(() => {
-    draftKey.set({content})
-  })
 
   onMount(() => {
     setTimeout(() => {
@@ -80,15 +64,11 @@
 </script>
 
 <div bind:this={spacer}></div>
-<form
-  in:fly
-  bind:this={form}
-  onsubmit={preventDefault(submit)}
-  class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
+<form in:fly bind:this={form} onsubmit={preventDefault(submit)} class="cb cw fixed z-feature pt-3">
   <div class="card2 mx-2 my-2 bg-alt shadow-md">
     <div class="relative">
-      <div class="note-editor grow overflow-hidden">
-        <EditorContent {autofocus} {editor} />
+      <div class="note-editor flex-grow overflow-hidden">
+        <EditorContent {editor} />
       </div>
       <Button
         data-tip="Add an image"

src/app/components/GoalActions.svelte

@@ -30,7 +30,7 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex grow flex-wrap justify-end gap-2">
+<div class="flex flex-grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
       Posted in #<RoomName {h} {url} />

src/app/components/GoalCreate.svelte

@@ -20,28 +20,14 @@
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
-  import {DraftKey} from "@app/util/drafts"
   import {canEnforceNip70} from "@app/core/commands"
 
-  type Values = {
-    title: string
-    content: string | object
-    amount: number
-  }
-
   type Props = {
     url: string
     h?: string
-    initialValues?: Values
   }
 
-  let {url, h, initialValues}: Props = $props()
-
-  const draftKey = new DraftKey<Values>(`goal:${url}:${h ?? ""}`)
-
-  if (!initialValues) {
-    initialValues = draftKey.get()
-  }
+  const {url, h}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -54,7 +40,7 @@
   const submit = async () => {
     if ($uploading) return
 
-    if (!title) {
+    if (!content) {
       return pushToast({
         theme: "error",
         message: "Please provide a title for your funding goal.",
@@ -62,9 +48,9 @@
     }
 
     const ed = await editor
-    const content = ed.getText({blockSeparator: "\n"}).trim()
+    const summary = ed.getText({blockSeparator: "\n"}).trim()
 
-    if (!content.trim()) {
+    if (!summary.trim()) {
       return pushToast({
         theme: "error",
         message: "Please provide details about your funding goal.",
@@ -73,7 +59,7 @@
 
     const tags = [
       ...ed.storage.nostr.getEditorTags(),
-      ["summary", content],
+      ["summary", summary],
       ["amount", String(amount)],
       ["relays", url],
     ]
@@ -88,33 +74,16 @@
 
     publishThunk({
       relays: [url],
-      event: makeEvent(ZAP_GOAL, {content: title, tags}),
+      event: makeEvent(ZAP_GOAL, {content, tags}),
     })
 
-    draftKey.clear()
     history.back()
   }
 
-  let title = $state(initialValues?.title ?? "")
-  let amount = $state(initialValues?.amount ?? 1000)
-  let content = $state(initialValues?.content ?? "")
+  const editor = makeEditor({url, submit, uploading, placeholder: "What's on your mind?"})
 
-  const onChange = (json: object) => {
-    content = json
-  }
-
-  const editor = makeEditor({
-    url,
-    submit,
-    uploading,
-    onChange,
-    placeholder: "What's on your mind?",
-    content,
-  })
-
-  $effect(() => {
-    draftKey.update({title, content, amount})
-  })
+  let content = $state("")
+  let amount = $state(1000)
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -133,7 +102,7 @@
             <!-- svelte-ignore a11y_autofocus -->
             <input
               autofocus={!isMobile}
-              bind:value={title}
+              bind:value={content}
               class="grow"
               type="text"
               placeholder="What do funds go towards?" />
@@ -146,7 +115,7 @@
             <p>Details*</p>
           {/snippet}
           {#snippet input()}
-            <div class="note-editor grow overflow-hidden">
+            <div class="note-editor flex-grow overflow-hidden">
               <EditorContent {editor} />
             </div>
           {/snippet}
@@ -168,7 +137,7 @@
             Goal Amount (sats)*
           {/snippet}
           {#snippet input()}
-            <div class="flex grow justify-end">
+            <div class="flex flex-grow justify-end">
               <label class="input input-bordered flex items-center gap-2">
                 <Icon icon={Bolt} />
                 <input bind:value={amount} type="number" class="w-28" />

src/app/components/IconPickerModal.svelte

@@ -1,17 +0,0 @@
-<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/InfoZapperError.svelte

@@ -23,7 +23,7 @@
       <ModalTitle>Unable to Zap</ModalTitle>
     </ModalHeader>
     <p>
-      Zapping <ProfileLink {pubkey} class="text-primary!" /> isn't possible right now because
+      Zapping <ProfileLink {pubkey} class="!text-primary" /> isn't possible right now because
       {#if $zapper}
         their zap receiver isn't correctly set up.
       {:else}

src/app/components/InputProfilePicture.svelte

@@ -97,10 +97,10 @@
           tabindex="-1"
           onmousedown={stopPropagation(onClear)}
           ontouchstart={stopPropagation(onClear)}>
-          <Icon icon={CloseCircle} class="scale-150 bg-base-300!" />
+          <Icon icon={CloseCircle} class="scale-150 !bg-base-300" />
         </span>
       {:else}
-        <Icon icon={AddCircle} class="scale-150 bg-base-300!" />
+        <Icon icon={AddCircle} class="scale-150 !bg-base-300" />
       {/if}
     </div>
     {#if !url}

src/app/components/KeyRecoveryConfirm.svelte

@@ -82,7 +82,7 @@
     <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.
+      paste <strong>all</strong> recovery codes into the text box below, on separate lines.
     </p>
     <StringMultiInput bind:value={otps} placeholder="Enter your recovery codes..." />
   </ModalBody>

src/app/components/LogIn.svelte

@@ -3,7 +3,7 @@
   import {Capacitor} from "@capacitor/core"
   import {getNip07, getNip55, Nip55Signer} from "@welshman/signer"
   import {addSession, type Session, makeNip07Session, makeNip55Session} from "@welshman/app"
-  import Widget from "@assets/icons/widget-4.svg?dataurl"
+  import Widget from "@assets/icons/widget-2.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
   import Compass from "@assets/icons/compass-big.svg?dataurl"

src/app/components/LogInBunker.svelte

@@ -77,7 +77,6 @@
         controller.stop()
 
         loginWithNip46(pubkey, clientSecret, signerPubkey, relays)
-        setChecked("*")
       } else {
         return pushToast({
           theme: "error",

src/app/components/LogInOTPConfirm.svelte

@@ -86,7 +86,7 @@
     <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.
+      paste <strong>all</strong> login codes into the text box below, on separate lines.
     </p>
     <StringMultiInput bind:value={otps} placeholder="Enter your login codes..." />
   </ModalBody>

src/app/components/MenuSettings.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import {Capacitor} from "@capacitor/core"
-  import {pubkey} from "@welshman/app"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
-  import GalleryMinimalistic from "@assets/icons/gallery-minimalistic.svg?dataurl"
-  import Shield from "@assets/icons/shield-minimalistic.svg?dataurl"
+  import Moon from "@assets/icons/moon.svg?dataurl"
+  import Settings from "@assets/icons/settings-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"
@@ -11,69 +14,120 @@
   import Button from "@lib/components/Button.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
-  import Profile from "@app/components/Profile.svelte"
+  import CardButton from "@lib/components/CardButton.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-8 items-center py-12 max-w-[16rem] m-auto w-full">
-      {#if $pubkey}
-        <Link replaceState href="/settings/profile">
-          <Profile inert pubkey={$pubkey} />
+    <div class="flex flex-col gap-2">
+      <Link replaceState href="/settings/profile">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <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}
-      <div class="grid grid-cols-3 gap-3 w-full">
-        <Link
-          replaceState
-          href="/settings/alerts"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          <Icon icon={Bell} size={5} />
-          Alerts
-        </Link>
-        {#if Capacitor.getPlatform() !== "ios"}
-          <Link
-            replaceState
-            href="/settings/wallet"
-            class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-            <Icon icon={Wallet} size={5} />
-            Wallet
-          </Link>
-        {/if}
-        <Link
-          replaceState
-          href="/settings/relays"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          <Icon icon={Server} size={5} />
-          Relays
-        </Link>
-        <Link
-          replaceState
-          href="/settings/content"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          <Icon icon={GalleryMinimalistic} size={5} />
-          Content
-        </Link>
-        <Link
-          replaceState
-          href="/settings/privacy"
-          class="aspect-square btn h-[unset] btn-neutral flex flex-col gap-2 text-center">
-          <Icon icon={Shield} size={5} />
-          Privacy
-        </Link>
-      </div>
-      <div class="flex gap-3 items-center opacity-75 text-sm">
-        <Button onclick={toggleTheme}>Theme</Button>
-        /
-        <Link replaceState href="/settings/about">About</Link>
-        /
-        <Button onclick={logout}>Log Out</Button>
-      </div>
+      <Link replaceState href="/settings/relays">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Server} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Relays</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Control how {PLATFORM_NAME} talks to the network</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Link replaceState href="/settings/content">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Settings} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Settings</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Get into the details about how {PLATFORM_NAME} works</div>
+          {/snippet}
+        </CardButton>
+      </Link>
+      <Button onclick={toggleTheme}>
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Moon} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>Theme</div>
+          {/snippet}
+          {#snippet info()}
+            <div>Switch between light and dark mode</div>
+          {/snippet}
+        </CardButton>
+      </Button>
+      <Link replaceState href="/settings/about">
+        <CardButton class="btn-neutral">
+          {#snippet icon()}
+            <div><Icon icon={Code2} size={7} /></div>
+          {/snippet}
+          {#snippet title()}
+            <div>About</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/MenuSpacesItem.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Link from "@lib/components/Link.svelte"
+  import CardButton from "@lib/components/CardButton.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RelayDescription from "@app/components/RelayDescription.svelte"
+  import {makeSpacePath} from "@app/util/routes"
+  import {notifications} from "@app/util/notifications"
+
+  const {url} = $props()
+
+  const path = makeSpacePath(url)
+</script>
+
+<Link replaceState href={path}>
+  <CardButton class="btn-neutral shadow-md bg-alt rounded-box border-none">
+    {#snippet icon()}
+      <RelayIcon {url} size={12} class="rounded-full" />
+    {/snippet}
+    {#snippet title()}
+      <div class="flex gap-1">
+        <RelayName {url} />
+        {#if $notifications.has(path)}
+          <div class="relative top-1 h-2 w-2 rounded-full bg-primary"></div>
+        {/if}
+      </div>
+    {/snippet}
+    {#snippet info()}
+      <div><RelayDescription {url} /></div>
+    {/snippet}
+  </CardButton>
+</Link>

src/app/components/ModalContainer.svelte

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

src/app/components/NoteContent.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
   import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
-  import {Poll} from "nostr-tools/kinds"
   import NoteContentEventTime from "@app/components/NoteContentEventTime.svelte"
   import NoteContentThread from "@app/components/NoteContentThread.svelte"
   import NoteContentClassified from "@app/components/NoteContentClassified.svelte"
   import NoteContentGoal from "@app/components/NoteContentGoal.svelte"
-  import NoteContentPoll from "@app/components/NoteContentPoll.svelte"
   import Content from "@app/components/Content.svelte"
 
   const props: ComponentProps<typeof Content> = $props()
@@ -21,8 +19,6 @@
     <NoteContentClassified {...props} />
   {:else if props.event.kind === ZAP_GOAL}
     <NoteContentGoal {...props} />
-  {:else if props.event.kind === Poll}
-    <NoteContentPoll {...props} />
   {:else}
     <Content {...props} />
   {/if}

src/app/components/NoteContentEventTime.svelte

@@ -9,10 +9,10 @@
 
 <div class="flex items-start gap-4">
   <CalendarEventDate event={props.event} />
-  <div class="flex grow flex-col">
+  <div class="flex flex-grow flex-col">
     <CalendarEventHeader event={props.event} />
     <div class="flex py-2 opacity-50">
-      <div class="h-px grow bg-base-content opacity-25"></div>
+      <div class="h-px flex-grow bg-base-content opacity-25"></div>
     </div>
     <Content {...props} />
   </div>

src/app/components/NoteContentMinimal.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
   import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
-  import {Poll} from "nostr-tools/kinds"
   import NoteContentMinimalEventTime from "@app/components/NoteContentMinimalEventTime.svelte"
   import NoteContentMinimalThread from "@app/components/NoteContentMinimalThread.svelte"
   import NoteContentMinimalClassified from "@app/components/NoteContentMinimalClassified.svelte"
   import NoteContentMinimalGoal from "@app/components/NoteContentMinimalGoal.svelte"
-  import NoteContentMinimalPoll from "@app/components/NoteContentMinimalPoll.svelte"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
 
   const props: ComponentProps<typeof ContentMinimal> = $props()
@@ -21,8 +19,6 @@
     <NoteContentMinimalClassified {...props} />
   {:else if props.event.kind === ZAP_GOAL}
     <NoteContentMinimalGoal {...props} />
-  {:else if props.event.kind === Poll}
-    <NoteContentMinimalPoll {...props} />
   {:else}
     <ContentMinimal {...props} />
   {/if}

src/app/components/NoteContentMinimalEventTime.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <div class="flex flex-col">
-  <div class="flex grow flex-wrap justify-between gap-2">
+  <div class="flex flex-grow flex-wrap justify-between gap-2">
     <p class="text-sm">{meta.title || meta.name}</p>
     {#if !isNaN(start) && !isNaN(end)}
       {@const startDateDisplay = formatTimestampAsDate(start)}

src/app/components/NoteContentMinimalPoll.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import type {ComponentProps} from "svelte"
-  import {derived} from "svelte/store"
-  import {PollResponse} from "nostr-tools/kinds"
-  import ContentMinimal from "@app/components/ContentMinimal.svelte"
-  import {deriveEvents} from "@app/core/state"
-  import {getPollResults} from "@app/util/polls"
-
-  const props: ComponentProps<typeof ContentMinimal> = $props()
-
-  const responses = deriveEvents([{kinds: [PollResponse], "#e": [props.event.id]}])
-
-  const results = derived(responses, $responses => getPollResults(props.event, $responses))
-</script>
-
-<div class="flex flex-col gap-0">
-  <ContentMinimal {...props} />
-  <span class="text-xs opacity-50">{$results.voters} voter{$results.voters === 1 ? "" : "s"}</span>
-</div>

src/app/components/NoteContentPoll.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import type {ComponentProps} from "svelte"
-  import {onMount} from "svelte"
-  import {request} from "@welshman/net"
-  import {PollResponse} from "nostr-tools/kinds"
-  import PollVotes from "@app/components/PollVotes.svelte"
-  import Content from "@app/components/Content.svelte"
-
-  const props: ComponentProps<typeof Content> = $props()
-
-  onMount(() => {
-    if (!props.url) {
-      return
-    }
-
-    request({
-      relays: [props.url],
-      filters: [{kinds: [PollResponse], "#e": [props.event.id]}],
-    })
-  })
-</script>
-
-<div class="flex flex-col gap-3">
-  <Content event={props.event} showEntire url={props.url} />
-
-  {#if props.url}
-    <PollVotes url={props.url} event={props.event} />
-  {/if}
-</div>

src/app/components/PasswordReset.svelte

@@ -89,7 +89,7 @@
     <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.
+      Please paste <strong>all</strong> confirmation codes into the text box below, on separate lines.
     </p>
     <StringMultiInput bind:value={otps} placeholder="Enter your confirmation codes..." />
   </ModalBody>

src/app/components/PollCreate.svelte

@@ -1,255 +0,0 @@
-<script lang="ts">
-  import {insertAt, now, randomId, removeAt, removeUndefined} from "@welshman/lib"
-  import {makeEvent} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
-  import {Poll} from "nostr-tools/kinds"
-  import {isMobile, preventDefault} from "@lib/html"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import HamburgerMenu from "@assets/icons/hamburger-menu.svg?dataurl"
-  import PlusCircle from "@assets/icons/add-circle.svg?dataurl"
-  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Field from "@lib/components/Field.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
-  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
-  import {pushToast} from "@app/util/toast"
-  import {PROTECTED} from "@app/core/state"
-  import {canEnforceNip70} from "@app/core/commands"
-  import {DraftKey} from "@app/util/drafts"
-  import type {PollType} from "@app/util/polls"
-
-  type Option = {
-    id: string
-    value: string
-  }
-
-  type Values = {
-    title: string
-    pollType: PollType
-    endsAt?: number
-    options: Option[]
-  }
-
-  type Props = {
-    url: string
-    h?: string
-  }
-
-  const {url, h}: Props = $props()
-  const draftKey = new DraftKey<Values>(`poll:${url}:${h ?? ""}`)
-  const initialValues = draftKey.get()
-
-  const shouldProtect = canEnforceNip70(url)
-
-  const back = () => history.back()
-
-  const addOption = () => {
-    options = [...options, {id: randomId(), value: ""}]
-  }
-
-  const removeOption = (id: string) => {
-    options = options.filter(option => option.id !== id)
-  }
-
-  const updateOption = (id: string, value: string) => {
-    options = options.map(option => (option.id === id ? {...option, value} : option))
-  }
-
-  const reorderOptions = (targetId: string) => {
-    if (!draggedOptionId) {
-      return
-    }
-
-    const sourceIndex = options.findIndex(option => option.id === draggedOptionId)
-    const targetIndex = options.findIndex(option => option.id === targetId)
-
-    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
-      return
-    }
-
-    options = insertAt(targetIndex, options[sourceIndex], removeAt(sourceIndex, options))
-  }
-
-  const onDragStart = (e: DragEvent, id: string) => {
-    draggedOptionId = id
-
-    if (e.dataTransfer) {
-      e.dataTransfer.effectAllowed = "move"
-      e.dataTransfer.setData("text/plain", id)
-    }
-  }
-
-  const onDragOver = (e: DragEvent, targetId: string) => {
-    e.preventDefault()
-    reorderOptions(targetId)
-  }
-
-  const onDrop = (e: DragEvent, targetId: string) => {
-    e.preventDefault()
-    reorderOptions(targetId)
-    draggedOptionId = undefined
-  }
-
-  const onDragEnd = () => {
-    draggedOptionId = undefined
-  }
-
-  const submit = async () => {
-    if (!title.trim()) {
-      return pushToast({theme: "error", message: "Please provide a title for your poll."})
-    }
-
-    const nonEmptyOptions = removeUndefined(options.map(option => option.value.trim() || undefined))
-
-    if (nonEmptyOptions.length < 2) {
-      return pushToast({theme: "error", message: "Please provide at least two options."})
-    }
-
-    if (endsAt && endsAt <= now()) {
-      return pushToast({theme: "error", message: "End time must be in the future."})
-    }
-
-    const tags: string[][] = [
-      ...nonEmptyOptions.map(option => ["option", randomId(), option]),
-      ["polltype", pollType],
-      ["relay", url],
-    ]
-
-    if (endsAt) {
-      tags.push(["endsAt", String(endsAt)])
-    }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    if (await shouldProtect) {
-      tags.push(PROTECTED)
-    }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(Poll, {content: title.trim(), tags}),
-    })
-
-    draftKey.clear()
-    history.back()
-  }
-
-  let draggedOptionId = $state<string | undefined>()
-  let title = $state(initialValues?.title ?? "")
-  let pollType = $state<PollType>(initialValues?.pollType ?? "singlechoice")
-  let endsAt = $state<number | undefined>(initialValues?.endsAt)
-  let options = $state<Option[]>(
-    initialValues?.options ?? [
-      {id: randomId(), value: "Yes"},
-      {id: randomId(), value: "No"},
-    ],
-  )
-
-  $effect(() => {
-    draftKey.set({title, pollType, endsAt, options})
-  })
-</script>
-
-<Modal tag="form" onsubmit={preventDefault(submit)}>
-  <ModalBody>
-    <ModalHeader>
-      <ModalTitle>Create a Poll</ModalTitle>
-      <ModalSubtitle>Ask a question and collect votes right in the feed.</ModalSubtitle>
-    </ModalHeader>
-    <div class="col-8 relative">
-      <Field>
-        {#snippet label()}
-          <p>Question*</p>
-        {/snippet}
-        {#snippet input()}
-          <label class="input input-bordered flex w-full items-center gap-2">
-            <!-- svelte-ignore a11y_autofocus -->
-            <input
-              autofocus={!isMobile}
-              bind:value={title}
-              class="grow"
-              type="text"
-              placeholder="What would you like to ask?" />
-          </label>
-        {/snippet}
-      </Field>
-
-      <Field>
-        {#snippet label()}
-          <p>Options*</p>
-        {/snippet}
-        {#snippet input()}
-          <div class="flex flex-col gap-2" role="list">
-            {#each options as option, index (option.id)}
-              <div
-                class="flex items-center gap-2"
-                draggable="true"
-                role="listitem"
-                ondragstart={e => onDragStart(e, option.id)}
-                ondragover={e => onDragOver(e, option.id)}
-                ondrop={e => onDrop(e, option.id)}
-                ondragend={onDragEnd}>
-                <div class="cursor-move opacity-70" aria-label="Drag handle">
-                  <Icon icon={HamburgerMenu} size={4} />
-                </div>
-                <label class="input input-bordered flex w-full items-center gap-2">
-                  <input
-                    value={option.value}
-                    class="grow"
-                    type="text"
-                    placeholder={`Option ${index + 1}`}
-                    oninput={e => updateOption(option.id, e.currentTarget.value)} />
-                </label>
-                <Button class="btn btn-ghost btn-sm" onclick={() => removeOption(option.id)}>
-                  <Icon icon={MinusCircle} size={4} />
-                </Button>
-              </div>
-            {/each}
-            <Button class="btn btn-outline btn-sm self-end" onclick={addOption}>
-              <Icon icon={PlusCircle} size={4} />
-              Add option
-            </Button>
-          </div>
-        {/snippet}
-      </Field>
-
-      <div class="flex flex-col gap-2">
-        <FieldInline>
-          {#snippet label()}
-            Poll type
-          {/snippet}
-          {#snippet input()}
-            <select class="select select-bordered w-full max-w-xs" bind:value={pollType}>
-              <option value="singlechoice">Single choice</option>
-              <option value="multiplechoice">Multiple choice</option>
-            </select>
-          {/snippet}
-        </FieldInline>
-        <FieldInline>
-          {#snippet label()}
-            Ends at
-          {/snippet}
-          {#snippet input()}
-            <DateTimeInput bind:value={endsAt} />
-          {/snippet}
-        </FieldInline>
-      </div>
-    </div>
-  </ModalBody>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon={AltArrowLeft} />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary">Create Poll</Button>
-  </ModalFooter>
-</Modal>

src/app/components/PollItem.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
-  import {getTagValue} from "@welshman/util"
-  import Link from "@lib/components/Link.svelte"
-  import NoteContent from "@app/components/NoteContent.svelte"
-  import CommentActions from "@app/components/CommentActions.svelte"
-  import RoomLink from "@app/components/RoomLink.svelte"
-  import ProfileLink from "@app/components/ProfileLink.svelte"
-  import {makePollPath} from "@app/util/routes"
-
-  type Props = {
-    url: string
-    event: TrustedEvent
-  }
-
-  const {url, event}: Props = $props()
-
-  const h = getTagValue("h", event.tags)
-</script>
-
-<Link
-  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
-  href={makePollPath(url, event.id)}>
-  <NoteContent {event} {url} />
-  <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <span class="whitespace-nowrap py-1 text-sm opacity-75">
-      Posted by <ProfileLink pubkey={event.pubkey} {url} />
-      {#if h}
-        in <RoomLink {url} {h} />
-      {/if}
-    </span>
-    <CommentActions segment="polls" showActivity {url} {event} />
-  </div>
-</Link>

src/app/components/PollOption.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import {tweened} from "svelte/motion"
-  import type {TrustedEvent} from "@welshman/util"
-  import {noop} from "@welshman/lib"
-  import {stopPropagation} from "@lib/html"
-  import {getPollType, isPollClosed} from "@app/util/polls"
-
-  type Props = {
-    event: TrustedEvent
-    option: {id: string; label: string}
-    results: {voters: number; options: {id: string; votes: number}[]}
-    selectedIds: string[]
-    setSingleChoice: (id: string) => void
-    toggleMultipleChoice: (id: string) => void
-  }
-
-  const {event, option, results, selectedIds, setSingleChoice, toggleMultipleChoice}: Props =
-    $props()
-
-  const pollType = getPollType(event)
-  const closed = isPollClosed(event)
-
-  const selected = $derived(
-    pollType === "singlechoice" ? selectedIds[0] === option.id : selectedIds.includes(option.id),
-  )
-  const onselect = () =>
-    pollType === "singlechoice" ? setSingleChoice(option.id) : toggleMultipleChoice(option.id)
-
-  const votes = $derived(results.options.find(r => r.id === option.id)?.votes || 0)
-  const maxVotes = $derived(Math.max(...results.options.map(r => r.votes), 1))
-
-  const tweenedVotes = tweened(votes, {duration: 300})
-  const tweenedMax = tweened(maxVotes, {duration: 300})
-
-  $effect(() => {
-    tweenedVotes.set(votes)
-  })
-
-  $effect(() => {
-    tweenedMax.set(maxVotes)
-  })
-</script>
-
-<div class="flex flex-col gap-2 card2 card2-sm bg-alt">
-  <div class="flex items-center justify-between gap-2">
-    <label class="flex min-w-0 grow items-center gap-2">
-      {#if !closed}
-        {#if pollType === "singlechoice"}
-          <input
-            name={event.id}
-            type="radio"
-            class="radio radio-primary radio-sm"
-            checked={selected}
-            onclick={stopPropagation(noop)}
-            onchange={onselect} />
-        {:else}
-          <input
-            type="checkbox"
-            class="checkbox checkbox-primary checkbox-sm"
-            checked={selected}
-            onclick={stopPropagation(noop)}
-            onchange={onselect} />
-        {/if}
-      {/if}
-      <span class="truncate">{option.label}</span>
-    </label>
-    <span class="whitespace-nowrap text-xs opacity-75">{votes} vote{votes === 1 ? "" : "s"}</span>
-  </div>
-  <progress class="progress progress-primary" value={$tweenedVotes} max={$tweenedMax}></progress>
-</div>

src/app/components/PollVotes.svelte

@@ -1,127 +0,0 @@
-<script lang="ts">
-  import {onDestroy} from "svelte"
-  import type {TrustedEvent} from "@welshman/util"
-  import {pubkey, publishThunk, abortThunk} from "@welshman/app"
-  import {PollResponse} from "nostr-tools/kinds"
-  import {formatTimestampRelative} from "@welshman/lib"
-  import {deriveEvents} from "@app/core/state"
-  import {pushToast} from "@app/util/toast"
-  import {makePollResponse} from "@app/core/commands"
-  import PollOption from "@app/components/PollOption.svelte"
-  import {
-    getPollEndsAt,
-    getPollOptions,
-    getPollResponseSelections,
-    getPollResults,
-    getPollType,
-    isPollClosed,
-  } from "@app/util/polls"
-
-  type Props = {
-    url: string
-    event: TrustedEvent
-  }
-
-  const {url, event}: Props = $props()
-
-  const responses = deriveEvents([{kinds: [PollResponse], "#e": [event.id]}])
-
-  const pollType = getPollType(event)
-  const options = getPollOptions(event)
-  const closed = isPollClosed(event)
-  const endsAt = getPollEndsAt(event)
-  const publishDelay = pollType === "multiplechoice" ? 10_000 : undefined
-
-  const getOwnResponse = (responses: TrustedEvent[]) => {
-    let latest: TrustedEvent | undefined
-
-    for (const response of responses) {
-      if (response.pubkey !== $pubkey) {
-        continue
-      }
-
-      if (!latest || response.created_at > latest.created_at) {
-        latest = response
-      }
-    }
-
-    return latest
-  }
-
-  const publishSelection = (selection: string[]) => {
-    if (activeThunk) {
-      abortThunk(activeThunk)
-    }
-
-    if (selection.length === 0) {
-      activeThunk = undefined
-      return
-    }
-
-    activeThunk = publishThunk({
-      relays: [url],
-      event: makePollResponse({event, selectedIds: selection}),
-      delay: publishDelay,
-    })
-  }
-
-  const publishCurrentSelection = () => {
-    const selection = pollType === "singlechoice" ? selectedIds.slice(0, 1) : selectedIds
-
-    if (selection.length === 0) {
-      return pushToast({theme: "error", message: "Please select at least one option."})
-    }
-
-    publishSelection(selection)
-  }
-
-  const results = $derived(getPollResults(event, $responses))
-  const ownResponse = $derived(getOwnResponse($responses))
-
-  const setSingleChoice = (id: string) => {
-    selectedIds = [id]
-    publishCurrentSelection()
-  }
-
-  const toggleMultipleChoice = (id: string) => {
-    selectedIds = selectedIds.includes(id)
-      ? selectedIds.filter(selectedId => selectedId !== id)
-      : [...selectedIds, id]
-
-    publishCurrentSelection()
-  }
-
-  let selectedIds = $state<string[]>([])
-  let activeThunk: ReturnType<typeof publishThunk> | undefined
-
-  $effect(() => {
-    if (ownResponse) {
-      selectedIds = getPollResponseSelections(ownResponse, pollType)
-    }
-  })
-
-  onDestroy(() => {
-    if (activeThunk) {
-      abortThunk(activeThunk)
-    }
-  })
-</script>
-
-<div class="flex flex-col gap-2">
-  {#each options as option (option.id)}
-    <PollOption {event} {option} {results} {selectedIds} {setSingleChoice} {toggleMultipleChoice} />
-  {/each}
-  <div class="flex flex-wrap items-center justify-between gap-2">
-    <div class="text-sm opacity-75">
-      {pollType === "multiplechoice" ? "Multiple choice" : "Single choice"}
-      {#if endsAt}
-        {#if closed}
-          • Ended {formatTimestampRelative(endsAt)}
-        {:else}
-          • Ends {formatTimestampRelative(endsAt)}
-        {/if}
-      {/if}
-    </div>
-    <div class="text-sm opacity-75">{results.voters} vote{results.voters === 1 ? "" : "s"}</div>
-  </div>
-</div>

src/app/components/PrimaryNav.svelte

@@ -1,20 +1,24 @@
 <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 Widget from "@assets/icons/widget-4.svg?dataurl"
+  import HomeSmile from "@assets/icons/home-smile.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 MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
-  import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
-  import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
+  import MenuSettings from "@app/components/MenuSettings.svelte"
+  import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
+  import {userSpaceUrls, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
-  import {goToChat, makeSpacePath} from "@app/util/routes"
+  import {goToLastChat} from "@app/util/routes"
 
   type Props = {
     children?: Snippet
@@ -22,24 +26,55 @@
 
   const {children}: Props = $props()
 
-  const chatHandler = () => goToChat()
-
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  const anySpaceNotifications = $derived(
-    $userSpaceUrls.some(p => $notifications.has(makeSpacePath(p))),
-  )
+  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-popover isolate hidden w-14 shrink-0 bg-base-200 pt-2 md:block">
+  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}>
-    <PrimaryNavSpaces />
+    <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>
     {#if PLATFORM_RELAYS.length > 0}
       <Divider />
     {/if}
-    <div class="flex flex-col">
-      <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings">
+    <div>
+      <PrimaryNavItem
+        title="Settings"
+        href="/settings/profile"
+        prefix="/settings"
+        class="tooltip-right">
         {#if $userProfile?.picture}
           <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
         {:else}
@@ -48,11 +83,12 @@
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        onclick={chatHandler}
+        onclick={goToLastChat}
+        class="tooltip-right"
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Search" href="/people">
+      <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
         <ImageIcon alt="Search" src={Magnifier} size={8} />
       </PrimaryNavItem>
     </div>
@@ -62,25 +98,25 @@
 {@render children?.()}
 
 <!-- a little extra something for ios -->
-<div class="hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-(--saib) bg-base-100 md:hidden">
+<div
+  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
 </div>
 <div
-  class="hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  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="Search" href="/people">
-        <ImageIcon alt="Search" src={Magnifier} size={8} />
+      <PrimaryNavItem title="Home" href="/home">
+        <ImageIcon alt="Home" src={HomeSmile} size={8} />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        href="/chat"
-        onclick={chatHandler}
+        onclick={goToLastChat}
         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={Widget} size={8} />
+          <ImageIcon alt="Spaces" src={SettingsMinimalistic} size={8} />
         </PrimaryNavItem>
       {/if}
     </div>

src/app/components/PrimaryNavItemSpace.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {deriveRelayDisplay} from "@welshman/app"
+  import {displayRelayUrl} from "@welshman/util"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import RelayIcon from "@app/components/RelayIcon.svelte"
   import {makeSpacePath, goToSpace} from "@app/util/routes"
@@ -12,13 +12,11 @@
   const {url}: Props = $props()
 
   const onClick = () => goToSpace(url)
-
-  const display = $derived(deriveRelayDisplay(url))
 </script>
 
 <PrimaryNavItem
   onclick={onClick}
-  title={$display}
+  title={displayRelayUrl(url)}
   class="tooltip-right"
   notification={$notifications.has(makeSpacePath(url))}>
   <RelayIcon {url} size={10} class="rounded-full" />

src/app/components/PrimaryNavSpaces.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  import {splitAt} from "@welshman/lib"
-  import Widget from "@assets/icons/widget-4.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(Math.max(0, (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">
-      <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"
-      prefix="no-highlight"
-      notification={otherSpaceNotifications}>
-      <ImageIcon alt="All Spaces" src={Widget} size={8} />
-    </PrimaryNavItem>
-  {/each}
-</div>

src/app/components/Profile.svelte

@@ -17,43 +17,28 @@
     url?: string
     showPubkey?: boolean
     avatarSize?: number
-    inert?: boolean
   }
 
-  const {pubkey, url, showPubkey, inert, avatarSize = 10}: Props = $props()
+  const {pubkey, url, showPubkey, 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">
-  {#if inert}
-    <span class="py-1">
-      <ProfileCircle {pubkey} size={avatarSize} />
-    </span>
-  {:else}
-    <Button onclick={openProfile} class="py-1">
-      <ProfileCircle {pubkey} size={avatarSize} />
-    </Button>
-  {/if}
+  <Button onclick={openProfile} class="py-1">
+    <ProfileCircle {pubkey} size={avatarSize} />
+  </Button>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
-      {#if inert}
-        <span class="text-bold overflow-hidden text-ellipsis">
-          {$profileDisplay}
-        </span>
-      {:else}
-        <Button onclick={openProfile} class="text-bold overflow-hidden text-ellipsis">
-          {$profileDisplay}
-        </Button>
-      {/if}
+      <Button onclick={openProfile} class="text-bold overflow-hidden text-ellipsis">
+        {$profileDisplay}
+      </Button>
       <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/ProfileDetail.svelte

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

src/app/components/ProfileSpaces.svelte

@@ -25,10 +25,10 @@
 <div class="flex flex-col gap-2">
   {#each spaceUrls as url (url)}
     <div class="card2 bg-alt flex flex-row items-center gap-2">
-      <div class="shrink-0">
+      <div class="flex-shrink-0">
         <RelayIcon {url} size={12} />
       </div>
-      <div class="flex grow flex-col">
+      <div class="flex flex-grow flex-col">
         <RelayName {url} />
         <div class="text-sm opacity-75">
           {url}

src/app/components/ReactionSummary.svelte

@@ -23,7 +23,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
   import ReportDetails from "@app/components/ReportDetails.svelte"
-  import {REACTION_KINDS, deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {REACTION_KINDS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
   interface Props {
@@ -78,8 +78,6 @@
     }
   }
 
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
-
   const onReportClick = () => pushModal(ReportDetails, {url, event})
 
   const reportReasons = $derived(uniq(map(e => getTag("e", e.tags)?.[2], $reports.values())))
@@ -120,7 +118,7 @@
 
 {#if $reactions.length > 0 || $zaps.length || $reports.length > 0 || children}
   <div class="flex min-w-0 flex-wrap gap-2">
-    {#if url && $reports.length > 0 && $userIsAdmin}
+    {#if url && $reports.length > 0}
       <button
         type="button"
         data-tip={`This content has been reported as "${displayList(reportReasons)}".`}

src/app/components/RelayAdd.svelte

@@ -1,70 +1,30 @@
 <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, isIPAddress, normalizeRelayUrl} from "@welshman/util"
-  import type {Thunk} from "@welshman/app"
-  import {waitForThunkError, relaySearch} from "@welshman/app"
+  import {isShareableRelayUrl, normalizeRelayUrl} from "@welshman/util"
+  import {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) => Promise<Thunk>
-    matchRelay?: (url: string) => boolean
+    addRelay: (url: string) => void
   }
 
-  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)
-    }
-  }
+  const {relays, addRelay}: Props = $props()
 
   let term = $state("")
   let limit = $state(20)
   let element: Element | undefined = $state()
 
-  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),
-  )
+  const customUrl = $derived(tryCatch(() => normalizeRelayUrl(term)))
 
   onMount(() => {
     const scroller = createScroller({
@@ -92,35 +52,23 @@
         <RelayItem url={term}>
           <Button
             class="btn btn-outline btn-sm flex items-center"
-            disabled={loading.has(customUrl)}
-            onclick={() => add(customUrl)}>
-            {#if loading.has(customUrl)}
-              <span class="loading loading-spinner loading-sm"></span>
-            {:else}
-              <Icon icon={AddCircle} />
-            {/if}
+            onclick={() => addRelay(customUrl)}>
+            <Icon icon={AddCircle} />
             Add Relay
           </Button>
         </RelayItem>
       {/if}
-      {#each searchResults as url (url)}
+      {#each $relaySearch
+        .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"
-            disabled={loading.has(url)}
-            onclick={() => add(url)}>
-            {#if loading.has(url)}
-              <span class="loading loading-spinner loading-sm"></span>
-            {:else}
-              <Icon icon={AddCircle} />
-            {/if}
+          <Button class="btn btn-outline btn-sm flex items-center" onclick={() => addRelay(url)}>
+            <Icon icon={AddCircle} />
             Add Relay
           </Button>
         </RelayItem>
       {/each}
     </div>
   </ModalBody>
-  <ModalFooter>
-    <Button class="btn btn-primary grow" onclick={back}>Done</Button>
-  </ModalFooter>
 </Modal>

src/app/components/RelayList.svelte

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

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

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

@@ -1,50 +0,0 @@
-<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 grow flex-row items-start gap-4">
-    <div class="flex h-7 w-7 shrink-0 items-center justify-center">
-      <Icon {icon} />
-    </div>
-    <div class="flex flex-col gap-1">
-      <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/RelaySummary.svelte

@@ -9,10 +9,9 @@
 
   type Props = {
     url: string
-    hideFavorites?: boolean
   }
 
-  const {url, hideFavorites}: Props = $props()
+  const {url}: Props = $props()
   const rooms = deriveUserRooms(url)
   const favorited = deriveGroupListPubkeys(url)
 </script>
@@ -23,7 +22,7 @@
       <div class="relative">
         <div class="avatar relative">
           <div
-            class="center flex! h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
+            class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
             <RelayIcon {url} />
           </div>
         </div>
@@ -35,7 +34,7 @@
           </div>
         {/if}
       </div>
-      <div class="min-w-0">
+      <div>
         <h2 class="ellipsize whitespace-nowrap text-xl">
           <RelayName {url} />
         </h2>
@@ -44,7 +43,7 @@
     </div>
     <RelayDescription {url} />
   </div>
-  {#if !hideFavorites && $favorited.size > 0}
+  {#if $favorited.size > 0}
     <div class="row-2 card2 card2-sm bg-alt">
       Favorited By:
       <ProfileCircles pubkeys={Array.from($favorited)} />

src/app/components/ReportDetails.svelte

@@ -26,7 +26,7 @@
 
   const back = () => history.back()
 
-  const onResolved = () => {
+  const onDelete = () => {
     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} {onResolved} />
+      <ReportItem {url} event={report} {onDelete} />
     {/each}
   </ModalBody>
   <ModalFooter>

src/app/components/ReportItem.svelte

@@ -15,10 +15,10 @@
   type Props = {
     url: string
     event: TrustedEvent
-    onResolved?: () => void
+    onDelete?: () => void
   }
 
-  const {url, event, onResolved}: Props = $props()
+  const {url, event, onDelete}: Props = $props()
 
   const etag = getTag("e", event.tags)
   const ptag = getTag("p", event.tags)
@@ -45,7 +45,7 @@
         {/if}
       </span>
     </div>
-    <ReportMenu {url} {event} {onResolved} />
+    <ReportMenu {url} {event} {onDelete} />
   </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
-    onResolved?: () => void
+    onDelete?: () => void
   }
 
-  const {url, event, onResolved}: Props = $props()
+  const {url, event, onDelete}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
@@ -40,7 +40,7 @@
 
   const deleteReport = async () => {
     publishDelete({event, relays: [url], protect: await shouldProtect})
-    onResolved?.()
+    onDelete?.()
   }
 
   const dismissReport = async () => {
@@ -54,7 +54,7 @@
     } else {
       pushToast({message: "Content has successfully been deleted!"})
       repository.removeEvent(event.id)
-      onResolved?.()
+      onDelete?.()
     }
   }
 
@@ -77,7 +77,7 @@
           repository.removeEvent(event.id)
           repository.removeEvent(id)
           history.back()
-          setTimeout(() => onResolved?.())
+          setTimeout(() => onDelete?.())
         }
       },
     })
@@ -101,7 +101,7 @@
           pushToast({message: "User has successfully been banned!"})
           repository.removeEvent(event.id)
           history.back()
-          setTimeout(() => onResolved?.())
+          setTimeout(() => onDelete?.())
         }
       },
     })