Merge branch 'priyanshu_bharti-feature/improve-og-invite-preview' into dev

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

.gitignore

@@ -1,6 +1,6 @@
 # Env
-.env
 .env.local
+.env.*.local
 
 # Vite
 vite.config.js.timestamp-*

CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

CONTRIBUTING.md

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

@@ -21,12 +21,16 @@ ENV VITE_BUILD_HASH=${VITE_BUILD_HASH}
 
 ENV NODE_OPTIONS=--max_old_space_size=16384
 RUN pnpm run build
+RUN pnpm prune --prod
 
-FROM node:20-alpine
+FROM node:20-bookworm-slim
 
 WORKDIR /app
 
-# Copy only the built output - no source, no .env, no dev deps
+# Copy production runtime only
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/build ./build
+COPY --from=builder /app/server.js ./server.js
 
-CMD ["npx", "serve", "-s", "build"]
+CMD ["node", "server.js"]

README.md

@@ -16,11 +16,13 @@ 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](AGENTS.md).
+See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Deployment
 
@@ -29,7 +31,7 @@ To run your own Flotilla, it's as simple as:
 ```sh
 pnpm install
 pnpm run build
-npx serve -s build
+node server.js
 ```
 
 Or, if you prefer to use a container:

android/app/build.gradle

@@ -8,8 +8,8 @@ android {
         applicationId "social.flotilla"
         minSdk rootProject.ext.minSdkVersion
         targetSdk rootProject.ext.targetSdkVersion
-        versionCode 43
+        versionCode 44
-        versionName "1.7.1"
+        versionName "1.7.2"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

build.sh

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

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 = 34;
+				CURRENT_PROJECT_VERSION = 35;
 				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.1;
+				MARKETING_VERSION = 1.7.2;
 				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 = 34;
+				CURRENT_PROJECT_VERSION = 35;
 				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.1;
+				MARKETING_VERSION = 1.7.2;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

package.json

@@ -1,9 +1,10 @@
 {
   "name": "flotilla",
-  "version": "1.7.1",
+  "version": "1.7.4",
   "private": true,
   "scripts": {
     "dev": "vite dev",
+    "start": "node server.js",
     "build": "./build.sh",
     "release:android": "./build.sh && cap build android --androidreleasetype APK --signing-type apksigner",
     "tauri:dev": "tauri dev",
@@ -22,6 +23,7 @@
     "@eslint/js": "^9.39.2",
     "@sveltejs/kit": "^2.50.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@tailwindcss/postcss": "^4.2.2",
     "@tauri-apps/cli": "^2.9.6",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.23",
@@ -35,7 +37,7 @@
     "prettier-plugin-svelte": "^3.4.1",
     "svelte": "^5.48.0",
     "svelte-check": "^4.3.5",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^5.4.21"
@@ -47,47 +49,53 @@
     "@capacitor/android": "^8.0.1",
     "@capacitor/app": "^8.0.0",
     "@capacitor/cli": "^8.0.1",
+    "@capacitor/clipboard": "^8.0.1",
     "@capacitor/core": "^8.0.1",
     "@capacitor/filesystem": "^8.1.0",
     "@capacitor/ios": "^8.0.1",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/preferences": "^8.0.0",
     "@capacitor/push-notifications": "^8.0.0",
+    "@capacitor/share": "^8.0.1",
     "@capawesome/capacitor-android-dark-mode-support": "^8.0.0",
     "@capawesome/capacitor-badge": "^8.0.0",
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
+    "@hono/node-server": "^1.19.14",
     "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.2.2",
+    "@pomade/core": "^0.2.3",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
+    "@tiptap/pm": "^2.27.2",
     "@types/qrcode": "^1.5.6",
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.8",
-    "@welshman/app": "^0.8.10",
+    "@welshman/app": "^0.8.13",
-    "@welshman/content": "^0.8.10",
+    "@welshman/content": "^0.8.13",
-    "@welshman/editor": "^0.8.10",
+    "@welshman/editor": "^0.8.13",
-    "@welshman/feeds": "^0.8.10",
+    "@welshman/feeds": "^0.8.13",
-    "@welshman/lib": "^0.8.10",
+    "@welshman/lib": "^0.8.13",
-    "@welshman/net": "^0.8.10",
+    "@welshman/net": "^0.8.13",
-    "@welshman/router": "^0.8.10",
+    "@welshman/router": "^0.8.13",
-    "@welshman/signer": "^0.8.10",
+    "@welshman/signer": "^0.8.13",
-    "@welshman/store": "^0.8.10",
+    "@welshman/store": "^0.8.13",
-    "@welshman/util": "^0.8.10",
+    "@welshman/util": "^0.8.13",
+    "cheerio": "^1.2.0",
     "compressorjs-next": "^1.1.2",
-    "daisyui": "^4.12.24",
+    "daisyui": "^5.5.19",
     "date-picker-svelte": "^2.17.0",
     "dotenv": "^16.6.1",
     "emoji-picker-element": "^1.28.1",
     "fuse.js": "^7.1.0",
+    "hono": "^4.12.14",
     "husky": "^9.1.7",
     "idb": "^8.0.3",
     "livekit-client": "^2.17.2",
     "nostr-signer-capacitor-plugin": "github:coracle-social/nostr-signer-capacitor-plugin#main",
     "nostr-tools": "^2.19.4",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "throttle-debounce": "^5.0.2",
@@ -104,5 +112,6 @@
     "overrides": {
       "sharp": "0.35.0-rc.0"
     }
-  }
+  },
+  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
 }

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.template"})
+dotenv.config({path: ".env"})
 
 export default defineConfig({
   preset,

server.js

@@ -0,0 +1,785 @@
+// @ts-nocheck
+import {readFile} from "node:fs/promises"
+import {dirname, extname, join} from "node:path"
+import {fileURLToPath} from "node:url"
+import {load as loadHtml} from "cheerio"
+import {serve} from "@hono/node-server"
+import {serveStatic} from "@hono/node-server/serve-static"
+import {Hono} from "hono"
+import {request} from "@welshman/net"
+import {
+  Address,
+  CLASSIFIED,
+  EVENT_TIME,
+  POLL,
+  ROOM_META,
+  THREAD,
+  ZAP_GOAL,
+  displayPubkey,
+  getTagValue,
+  normalizeRelayUrl,
+  readRoomMeta,
+} from "@welshman/util"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const buildDir = join(__dirname, "build")
+const indexPath = join(buildDir, "index.html")
+
+const RELAY_CACHE_TTL_MS = 5 * 60 * 1000
+const NOSTR_CACHE_TTL_MS = 60 * 1000
+const RELAY_TIMEOUT_MS = 1500
+const NOSTR_TIMEOUT_MS = 1800
+
+const staticTitles = new Map([
+  ["/", "Redirecting"],
+  ["/home", "Home"],
+  ["/spaces", "Spaces"],
+  ["/spaces/create", "Create a Space"],
+  ["/chat", "Messages"],
+  ["/join", "Join Space"],
+  ["/people", "Find People"],
+  ["/settings/about", "About"],
+  ["/settings/profile", "Profile Settings"],
+  ["/settings/content", "Content Settings"],
+  ["/settings/privacy", "Privacy Settings"],
+  ["/settings/relays", "Relay Settings"],
+  ["/settings/alerts", "Alert Settings"],
+  ["/settings/wallet", "Wallet Settings"],
+])
+
+const spaceSectionTitles = new Map([
+  ["chat", "Space Chat"],
+  ["recent", "Recent Activity"],
+  ["threads", "Threads"],
+  ["classifieds", "Classifieds"],
+  ["calendar", "Calendar"],
+  ["goals", "Goals"],
+  ["polls", "Polls"],
+])
+
+const eventRouteKinds = new Map([
+  ["threads", THREAD],
+  ["goals", ZAP_GOAL],
+  ["calendar", EVENT_TIME],
+  ["classifieds", CLASSIFIED],
+  ["polls", POLL],
+])
+
+const reservedSingleSegments = new Set([
+  "home",
+  "spaces",
+  "space",
+  "chat",
+  "join",
+  "people",
+  "settings",
+])
+
+const relayInfoCache = new Map()
+const roomInfoCache = new Map()
+const eventCache = new Map()
+
+const indexHtml = await readFile(indexPath, "utf8").catch(error => {
+  console.error("Unable to start server: build/index.html is missing. Run `pnpm run build` first.")
+
+  throw error
+})
+
+const defaults = getHtmlDefaults(indexHtml)
+const app = new Hono()
+const staticFiles = serveStatic({
+  root: "./build",
+  rewriteRequestPath: path => path.replace(/^\/+/, ""),
+})
+
+app.use("*", staticFiles)
+
+app.get("*", async c => {
+  const requestUrl = new URL(c.req.url)
+
+  if (extname(requestUrl.pathname)) {
+    return c.text("Not Found", 404)
+  }
+
+  const origin = getRequestOrigin(c.req.raw, requestUrl)
+  const meta = await buildRouteMeta(requestUrl, origin)
+  const html = renderHtml(indexHtml, meta)
+
+  c.header("Cache-Control", "no-cache")
+
+  return c.html(html)
+})
+
+app.notFound(c => c.text("Not Found", 404))
+
+app.onError((error, c) => {
+  console.error(error)
+
+  return c.text("Internal Server Error", 500)
+})
+
+const port = Number.parseInt(process.env.PORT || "3000", 10)
+const host = process.env.HOST || "0.0.0.0"
+
+serve({fetch: app.fetch, hostname: host, port})
+console.log(`Flotilla server listening on http://${host}:${port}`)
+
+async function buildRouteMeta(requestUrl, origin) {
+  const absoluteDefaultImage = toAbsoluteHttpUrl(defaults.image, origin)
+
+  if (!absoluteDefaultImage) {
+    throw new Error(`Default twitter:image must resolve to an absolute URL. Found: ${defaults.image}`)
+  }
+
+  const meta = {
+    card: "summary",
+    description: defaults.description,
+    image: absoluteDefaultImage,
+    site: defaults.site,
+    title: defaults.title,
+    type: "website",
+    url: requestUrl.href,
+  }
+
+  const route = parseRoute(requestUrl.pathname)
+
+  if (route.kind === "join") {
+    return await buildJoinMeta(meta, requestUrl, origin)
+  }
+
+  if (route.kind === "static") {
+    meta.title = route.title
+
+    return meta
+  }
+
+  if (route.kind === "chat") {
+    meta.title = getChatTitle(route.chat)
+
+    return meta
+  }
+
+  if (route.kind === "bech32") {
+    meta.title = "Opening Link"
+
+    return meta
+  }
+
+  if (!route.relay) {
+    return meta
+  }
+
+  const relayUrl = normalizeRelayParam(route.relay)
+  const relayInfo = relayUrl ? await loadRelayInfo(relayUrl) : undefined
+  const relayName = relayInfo?.name || (relayUrl ? getRelayDisplay(relayUrl) : "Space")
+  const relayHttpUrl = relayUrl ? toRelayHttpUrl(relayUrl) : undefined
+
+  if (relayInfo?.icon) {
+    meta.image = relayInfo.icon
+  }
+
+  if (relayInfo?.description) {
+    meta.description = relayInfo.description
+  }
+
+  if (route.kind === "space") {
+    meta.title = relayName
+
+    return meta
+  }
+
+  if (route.kind === "space-section") {
+    meta.title = composeSpaceTitle(relayName, route.sectionTitle)
+
+    return meta
+  }
+
+  if (route.kind === "room") {
+    const roomInfo = relayUrl ? await loadRoomInfo(relayUrl, route.h) : undefined
+    const roomName = roomInfo?.name || route.h
+
+    meta.title = composeSpaceTitle(relayName, roomName)
+    meta.description = roomInfo?.about || meta.description
+
+    const roomImage = roomInfo?.picture
+      ? toAbsoluteHttpUrl(roomInfo.picture, relayHttpUrl || origin)
+      : undefined
+
+    if (roomImage) {
+      meta.image = roomImage
+    }
+
+    return meta
+  }
+
+  if (route.kind === "event") {
+    const event = relayUrl
+      ? await loadEventForRoute(relayUrl, route.section, route.identifier)
+      : undefined
+    const eventTitle = getEventTitle(route.section, event)
+
+    meta.title = composeSpaceTitle(relayName, eventTitle)
+    meta.description = getEventDescription(route.section, event, meta.description)
+
+    const eventImage = getTagValue("image", event?.tags || [])
+    const absoluteEventImage = eventImage
+      ? toAbsoluteHttpUrl(eventImage, relayHttpUrl || origin)
+      : undefined
+
+    if (absoluteEventImage) {
+      meta.image = absoluteEventImage
+      meta.card = "summary_large_image"
+    }
+
+    return meta
+  }
+
+  return meta
+}
+
+function parseRoute(pathname) {
+  const normalizedPath = normalizePathname(pathname)
+
+  if (normalizedPath === "/join") {
+    return {kind: "join"}
+  }
+
+  if (staticTitles.has(normalizedPath)) {
+    return {kind: "static", title: staticTitles.get(normalizedPath)}
+  }
+
+  const segments = getPathSegments(normalizedPath)
+
+  if (segments.length === 2 && segments[0] === "chat") {
+    return {chat: segments[1], kind: "chat"}
+  }
+
+  if (segments.length === 1 && !reservedSingleSegments.has(segments[0])) {
+    return {bech32: segments[0], kind: "bech32"}
+  }
+
+  if ((segments[0] === "spaces" || segments[0] === "space") && segments.length >= 2) {
+    const relay = segments[1]
+
+    if (segments.length === 2) {
+      return {kind: "space", relay}
+    }
+
+    const section = segments[2]
+
+    if (segments.length === 3) {
+      if (spaceSectionTitles.has(section)) {
+        return {
+          kind: "space-section",
+          relay,
+          section,
+          sectionTitle: spaceSectionTitles.get(section),
+        }
+      }
+
+      return {h: section, kind: "room", relay}
+    }
+
+    if (segments.length === 4 && eventRouteKinds.has(section)) {
+      return {
+        identifier: segments[3],
+        kind: "event",
+        relay,
+        section,
+      }
+    }
+  }
+
+  return {kind: "unknown"}
+}
+
+async function buildJoinMeta(meta, requestUrl, origin) {
+  const relayUrl = parseInviteRelay(requestUrl)
+
+  if (!relayUrl) {
+    meta.title = staticTitles.get("/join") || "Join Space"
+
+    return meta
+  }
+
+  const relayInfo = await loadRelayInfo(relayUrl)
+  const relayDisplay = relayInfo?.name || getRelayDisplay(relayUrl)
+
+  meta.title = `Invitation to join ${relayDisplay}`
+  meta.description = relayInfo?.description || `Join this Flotilla space on ${relayDisplay}.`
+  meta.image = relayInfo?.icon || meta.image
+  meta.url = requestUrl.href
+  meta.site = defaults.site
+
+  return meta
+}
+
+function getChatTitle(chat) {
+  if (!chat) {
+    return "Chat"
+  }
+
+  const peers = chat
+    .split(",")
+    .map(part => part.trim())
+    .filter(Boolean)
+
+  if (peers.length === 1) {
+    return `Chat with ${displayPubkey(peers[0])}`
+  }
+
+  if (peers.length > 1) {
+    return `Group chat (${peers.length})`
+  }
+
+  return "Chat"
+}
+
+function getEventTitle(section, event) {
+  if (section === "threads") {
+    return getTagValue("title", event?.tags || []) || "Thread"
+  }
+
+  if (section === "calendar") {
+    return getTagValue("title", event?.tags || []) || "Event"
+  }
+
+  if (section === "classifieds") {
+    return getTagValue("title", event?.tags || []) || "Listing"
+  }
+
+  if (section === "goals") {
+    return event?.content?.trim() || getTagValue("summary", event?.tags || []) || "Goal"
+  }
+
+  if (section === "polls") {
+    return getTagValue("title", event?.tags || []) || "Poll"
+  }
+
+  return "Event"
+}
+
+function getEventDescription(section, event, fallback) {
+  const summary =
+    getTagValue("summary", event?.tags || []) || getTagValue("description", event?.tags || [])
+
+  if (summary) {
+    return clip(summary, 220)
+  }
+
+  if (event?.content?.trim()) {
+    return clip(event.content.trim(), 220)
+  }
+
+  if (section === "threads") {
+    return "Read this thread in Flotilla."
+  }
+
+  if (section === "goals") {
+    return "Track this goal in Flotilla."
+  }
+
+  if (section === "calendar") {
+    return "View this calendar event in Flotilla."
+  }
+
+  if (section === "classifieds") {
+    return "Browse this listing in Flotilla."
+  }
+
+  if (section === "polls") {
+    return "Take this poll in Flotilla."
+  }
+
+  return fallback
+}
+
+function composeSpaceTitle(spaceName, leafTitle) {
+  const cleanedSpace = spaceName?.trim()
+  const cleanedLeaf = leafTitle?.trim()
+
+  if (cleanedSpace && cleanedLeaf) {
+    return `${cleanedSpace} / ${cleanedLeaf}`
+  }
+
+  return cleanedLeaf || cleanedSpace || defaults.title
+}
+
+async function loadRelayInfo(relayUrl) {
+  const cached = getCachedValue(relayInfoCache, relayUrl)
+
+  if (cached) {
+    return cached
+  }
+
+  const relayHttpUrl = toRelayHttpUrl(relayUrl)
+
+  if (!relayHttpUrl) {
+    setCachedValue(relayInfoCache, relayUrl, undefined, RELAY_CACHE_TTL_MS)
+
+    return undefined
+  }
+
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), RELAY_TIMEOUT_MS)
+
+  let value
+
+  try {
+    const response = await fetch(relayHttpUrl, {
+      headers: {Accept: "application/nostr+json"},
+      signal: controller.signal,
+    })
+
+    if (response.ok) {
+      const json = await response.json()
+      const name = typeof json.name === "string" ? json.name.trim() : ""
+      const description = typeof json.description === "string" ? json.description.trim() : ""
+      const icon = typeof json.icon === "string" ? toAbsoluteHttpUrl(json.icon, relayHttpUrl) : undefined
+
+      value = {
+        description: description || undefined,
+        icon,
+        name: name || undefined,
+      }
+    }
+  } catch {
+    value = undefined
+  } finally {
+    clearTimeout(timeout)
+  }
+
+  setCachedValue(relayInfoCache, relayUrl, value, RELAY_CACHE_TTL_MS)
+
+  return value
+}
+
+async function loadRoomInfo(relayUrl, h) {
+  const cacheKey = `${relayUrl}|${h}`
+  const cached = getCachedValue(roomInfoCache, cacheKey)
+
+  if (cached !== undefined) {
+    return cached
+  }
+
+  const events = await requestEvents(relayUrl, [{"#d": [h], kinds: [ROOM_META], limit: 20}])
+  const roomMetas = []
+
+  for (const event of events) {
+    try {
+      const roomMeta = readRoomMeta(event)
+
+      if (roomMeta.h === h) {
+        roomMetas.push(roomMeta)
+      }
+    } catch {
+      // Ignore malformed room metadata.
+    }
+  }
+
+  const latest = roomMetas.sort((a, b) => b.event.created_at - a.event.created_at)[0]
+  const roomInfo = latest
+    ? {
+        about: latest.about,
+        name: latest.name,
+        picture: latest.picture,
+      }
+    : undefined
+
+  setCachedValue(roomInfoCache, cacheKey, roomInfo, NOSTR_CACHE_TTL_MS)
+
+  return roomInfo
+}
+
+async function loadEventForRoute(relayUrl, section, identifier) {
+  const kind = eventRouteKinds.get(section)
+
+  if (!kind || !identifier) {
+    return undefined
+  }
+
+  const cacheKey = `${relayUrl}|${section}|${identifier}`
+  const cached = getCachedValue(eventCache, cacheKey)
+
+  if (cached !== undefined) {
+    return cached
+  }
+
+  const filters = getEventFilters(kind, identifier)
+  const events = filters.length > 0 ? await requestEvents(relayUrl, filters) : []
+  const event = events[0]
+
+  setCachedValue(eventCache, cacheKey, event, NOSTR_CACHE_TTL_MS)
+
+  return event
+}
+
+function getEventFilters(kind, identifier) {
+  if (kind === EVENT_TIME || kind === CLASSIFIED) {
+    try {
+      const address = Address.from(identifier)
+
+      return [
+        {
+          "#d": [address.identifier],
+          authors: [address.pubkey],
+          kinds: [address.kind],
+          limit: 1,
+        },
+      ]
+    } catch {
+      return [{ids: [identifier], kinds: [kind], limit: 1}]
+    }
+  }
+
+  return [{ids: [identifier], kinds: [kind], limit: 1}]
+}
+
+async function requestEvents(relayUrl, filters) {
+  const controller = new AbortController()
+  const timeout = setTimeout(() => controller.abort(), NOSTR_TIMEOUT_MS)
+
+  try {
+    return await request({
+      autoClose: true,
+      filters,
+      relays: [relayUrl],
+      signal: controller.signal,
+    })
+  } catch {
+    return []
+  } finally {
+    clearTimeout(timeout)
+  }
+}
+
+function renderHtml(html, meta) {
+  const $ = loadHtml(html)
+
+  upsertTitle($, meta.title)
+  upsertMetaTag($, "name", "description", meta.description)
+  upsertMetaTag($, "name", "og:url", meta.url)
+  upsertMetaTag($, "name", "og:type", meta.type)
+  upsertMetaTag($, "name", "og:title", meta.title)
+  upsertMetaTag($, "name", "og:description", meta.description)
+  upsertMetaTag($, "name", "twitter:card", meta.card)
+  upsertMetaTag($, "name", "twitter:site", meta.site)
+  upsertMetaTag($, "name", "twitter:title", meta.title)
+  upsertMetaTag($, "name", "twitter:description", meta.description)
+  upsertMetaTag($, "name", "twitter:image", meta.image)
+
+  upsertMetaTag($, "property", "og:url", meta.url)
+  upsertMetaTag($, "property", "og:type", meta.type)
+  upsertMetaTag($, "property", "og:title", meta.title)
+  upsertMetaTag($, "property", "og:description", meta.description)
+  upsertMetaTag($, "property", "og:image", meta.image)
+
+  return $.html()
+}
+
+function upsertTitle($, value) {
+  let titleTag = $("head > title").first()
+
+  if (titleTag.length === 0) {
+    $("head").prepend("<title></title>")
+    titleTag = $("head > title").first()
+  }
+
+  titleTag.text(value)
+}
+
+function upsertMetaTag($, attribute, key, content) {
+  const selector = `meta[${attribute}="${key}"]`
+  let metaTag = $(selector).first()
+
+  if (metaTag.length === 0) {
+    metaTag = $("<meta>").attr(attribute, key)
+    $("head").append(metaTag)
+  }
+
+  metaTag.attr("content", content)
+}
+
+function getHtmlDefaults(html) {
+  const $ = loadHtml(html)
+
+  return {
+    description: readRequiredMetaContent($, "og:description"),
+    image: readRequiredMetaContent($, "twitter:image"),
+    site: readRequiredMetaContent($, "twitter:site"),
+    title: readRequiredMetaContent($, "og:title"),
+  }
+}
+
+function readRequiredMetaContent($, key) {
+  const content = readMetaContent($, key)
+
+  if (!content) {
+    throw new Error(`Missing required meta tag ${key} in build/index.html. Ensure it exists in src/app.html.`)
+  }
+
+  return content
+}
+
+function readMetaContent($, key) {
+  const byName = $(`meta[name="${key}"]`).attr("content")
+
+  if (typeof byName === "string" && byName.trim()) {
+    return byName.trim()
+  }
+
+  const byProperty = $(`meta[property="${key}"]`).attr("content")
+
+  return typeof byProperty === "string" && byProperty.trim() ? byProperty.trim() : undefined
+}
+
+function parseInviteRelay(requestUrl) {
+  const relay = requestUrl.searchParams.get("r") || requestUrl.searchParams.get("relay")
+
+  if (!relay) {
+    return undefined
+  }
+
+  return normalizeRelayParam(relay)
+}
+
+function normalizeRelayParam(value) {
+  const decoded = value.trim()
+
+  if (!decoded) {
+    return undefined
+  }
+
+  const hasProtocol = /^[a-zA-Z][a-zA-Z\d+.-]*:\/\//.test(decoded)
+  const withProtocol = hasProtocol ? decoded : `wss://${decoded}`
+
+  try {
+    const normalized = normalizeRelayUrl(withProtocol)
+
+    if (normalized.startsWith("ws://") || normalized.startsWith("wss://")) {
+      return normalized.replace(/\/+$/, "")
+    }
+  } catch {
+    // Ignore malformed relay URLs.
+  }
+
+  return undefined
+}
+
+function toRelayHttpUrl(relayUrl) {
+  if (relayUrl.startsWith("wss://")) {
+    return `https://${relayUrl.slice(6)}`
+  }
+
+  if (relayUrl.startsWith("ws://")) {
+    return `http://${relayUrl.slice(5)}`
+  }
+
+  return undefined
+}
+
+function getRelayDisplay(relayUrl) {
+  const relayHttpUrl = toRelayHttpUrl(relayUrl)
+
+  if (!relayHttpUrl) {
+    return relayUrl
+  }
+
+  try {
+    return new URL(relayHttpUrl).host
+  } catch {
+    return relayUrl
+  }
+}
+
+function toAbsoluteHttpUrl(value, baseUrl) {
+  try {
+    const parsed = new URL(value, baseUrl)
+
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.href
+    }
+  } catch {
+    // Ignore malformed URLs.
+  }
+
+  return undefined
+}
+
+function getRequestOrigin(req, requestUrl) {
+  const protocol = firstHeaderValue(req.headers.get("x-forwarded-proto")) || requestUrl.protocol.slice(0, -1)
+  const host =
+    firstHeaderValue(req.headers.get("x-forwarded-host")) ||
+    req.headers.get("host") ||
+    requestUrl.host ||
+    "localhost"
+
+  return `${protocol}://${host}`
+}
+
+function firstHeaderValue(value) {
+  if (typeof value === "string") {
+    return value.split(",")[0].trim()
+  }
+
+  return undefined
+}
+
+function normalizePathname(pathname) {
+  const cleanPath = pathname.replace(/\/+/g, "/")
+
+  if (cleanPath === "/") {
+    return "/"
+  }
+
+  return cleanPath.replace(/\/+$/, "") || "/"
+}
+
+function getPathSegments(pathname) {
+  const normalized = normalizePathname(pathname)
+
+  if (normalized === "/") {
+    return []
+  }
+
+  return normalized
+    .slice(1)
+    .split("/")
+    .map(decodeSegment)
+}
+
+function decodeSegment(value) {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+function clip(text, maxLength) {
+  if (text.length <= maxLength) {
+    return text
+  }
+
+  return `${text.slice(0, maxLength - 1).trimEnd()}…`
+}
+
+function getCachedValue(cache, key) {
+  const cached = cache.get(key)
+
+  if (!cached) {
+    return undefined
+  }
+
+  if (cached.expiresAt <= Date.now()) {
+    cache.delete(key)
+
+    return undefined
+  }
+
+  return cached.value
+}
+
+function setCachedValue(cache, key, value, ttlMs) {
+  cache.set(key, {expiresAt: Date.now() + ttlMs, value})
+}

src/app/components/Chat.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import {onMount} from "svelte"
+  import {goto} from "$app/navigation"
   import {
     ago,
     int,
@@ -73,7 +74,7 @@
       ? pushModal(ProfileDetail, {pubkey: others[0]})
       : pushModal(ChatMembers, {pubkeys: others})
 
-  const back = () => history.back()
+  const back = () => goto("/chat")
 
   const replyTo = (event: TrustedEvent) => {
     parent = event

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-2.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.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,6 +77,7 @@
         controller.stop()
 
         loginWithNip46(pubkey, clientSecret, signerPubkey, relays)
+        setChecked("*")
       } else {
         return pushToast({
           theme: "error",

src/app/components/MenuSpacesItem.svelte

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

@@ -3,7 +3,7 @@
   import {userProfile} from "@welshman/app"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import Planet from "@assets/icons/planet-3.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.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"
@@ -14,7 +14,7 @@
   import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
-  import {goToChat} from "@app/util/routes"
+  import {goToChat, makeSpacePath} from "@app/util/routes"
 
   type Props = {
     children?: Snippet
@@ -26,7 +26,9 @@
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
+  const anySpaceNotifications = $derived(
+    $userSpaceUrls.some(p => $notifications.has(makeSpacePath(p))),
+  )
 </script>
 
 <div
@@ -84,7 +86,7 @@
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
-          <ImageIcon alt="Spaces" src={Planet} size={8} />
+          <ImageIcon alt="Spaces" src={Widget} size={8} />
         </PrimaryNavItem>
       {/if}
     </div>

src/app/components/PrimaryNavSpaces.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {splitAt} from "@welshman/lib"
-  import Widget from "@assets/icons/widget.svg?dataurl"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
-  import Compass from "@assets/icons/compass.svg?dataurl"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
@@ -35,11 +34,9 @@
       href="/spaces"
       title="All Spaces"
       class="tooltip-right"
+      prefix="no-highlight"
       notification={otherSpaceNotifications}>
       <ImageIcon alt="All Spaces" src={Widget} size={8} />
     </PrimaryNavItem>
-    <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
-      <ImageIcon alt="Add a Space" src={Compass} size={8} />
-    </PrimaryNavItem>
   {/each}
 </div>

src/app/components/RelaySummary.svelte

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

src/app/components/SpaceAdd.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Login from "@assets/icons/login-3.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import Compass from "@assets/icons/compass.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,12 +13,6 @@
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
-  type Props = {
-    hideDiscover?: boolean
-  }
-
-  const {hideDiscover}: Props = $props()
-
   const startJoin = () => pushModal(SpaceInviteAccept)
 </script>
 
@@ -30,23 +23,8 @@
       <ModalSubtitle
         >Spaces are places where communities come together to work, play, and hang out.</ModalSubtitle>
     </ModalHeader>
-    {#if !hideDiscover}
-      <Link href="/discover">
-        <CardButton class="btn-primary">
-          {#snippet icon()}
-            <div><Icon icon={Compass} size={7} /></div>
-          {/snippet}
-          {#snippet title()}
-            <div>Explore Spaces</div>
-          {/snippet}
-          {#snippet info()}
-            <div>Join create, or browse spaces</div>
-          {/snippet}
-        </CardButton>
-      </Link>
-    {/if}
     <Button onclick={startJoin}>
-      <CardButton class={hideDiscover ? "btn-primary" : "btn-neutral"}>
+      <CardButton class="btn-primary">
         {#snippet icon()}
           <div><Icon icon={Login} size={7} /></div>
         {/snippet}

src/app/components/SpaceEdit.svelte

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

src/app/components/SpaceMenu.svelte

@@ -302,7 +302,7 @@
     </div>
   </SecondaryNavSection>
   <div
-    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+3rem)] md:pb-2 z-nav">
+    class="flex flex-shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-[calc(var(--saib)+0.25rem)] md:pb-2 z-nav">
     <VoiceWidget />
     <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
       <SocketStatusIndicator {url} />

src/app/components/SpaceSearch.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   import {tick} from "svelte"
-  import {createSearch} from "@welshman/app"
+  import {debounce} from "throttle-debounce"
+  import {request} from "@welshman/net"
   import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
-  import type {TrustedEvent} from "@welshman/util"
+  import type {TrustedEvent, Filter} from "@welshman/util"
-  import {MESSAGE} from "@welshman/util"
+  import {sortEventsDesc} from "@welshman/util"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import {fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import {deriveEventsForUrl} from "@app/core/state"
+  import {CONTENT_KINDS} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
 
   type Props = {
@@ -19,14 +20,16 @@
 
   const {url, h}: Props = $props()
 
-  const spaceMessages = deriveEventsForUrl(
-    url,
-    h ? [{kinds: [MESSAGE], "#h": [h]}] : [{kinds: [MESSAGE]}],
-  )
-
   let term = $state("")
   let show = $state(false)
+  let results = $state<TrustedEvent[]>([])
+  let loading = $state(false)
   let input: HTMLInputElement | undefined = $state()
+  let controller: AbortController | undefined
+
+  const relayStatus = $derived(
+    h ? `Searching this room on relay: ${url}.` : `Searching this space on relay: ${url}.`,
+  )
 
   const open = () => {
     show = true
@@ -40,21 +43,53 @@
   const clear = () => {
     term = ""
     show = false
+    loading = false
+    results = []
+    controller?.abort()
+    controller = undefined
   }
 
+  const getRelayUrls = () => [url]
+
+  const getFilter = (searchTerm: string): Filter =>
+    h
+      ? {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
+      : {kinds: CONTENT_KINDS, search: searchTerm}
+
+  const search = debounce(300, async (searchTerm: string) => {
+    controller?.abort()
+
+    if (!searchTerm.trim()) {
+      loading = false
+      results = []
+      return
+    }
+
+    controller = new AbortController()
+    loading = true
+
+    try {
+      const events = await request({
+        relays: getRelayUrls(),
+        autoClose: true,
+        signal: controller.signal,
+        filters: [getFilter(searchTerm.trim())],
+      })
+
+      results = sortEventsDesc(events)
+    } catch (error) {
+      if (!(error instanceof DOMException && error.name === "AbortError")) {
+        results = []
+      }
+    } finally {
+      loading = false
+    }
+  })
+
   const onInput = () => {
-    show = true
+    void search(term)
   }
 
-  const searchIndex = $derived.by(() =>
-    createSearch($spaceMessages, {
-      getValue: event => event.id,
-      fuseOptions: {keys: ["content"]},
-    }),
-  )
-
-  const results = $derived(term ? searchIndex.searchOptions(term) : [])
-
   const eventsByAge = $derived(groupBy(e => getAgeSection(e.created_at), results))
 
   const getAgeSection = (createdAt: number) => {
@@ -122,10 +157,13 @@
             oninput={onInput} />
         </label>
         <div class="max-h-[65vh] overflow-y-auto">
+          <p class="mb-2 text-xs opacity-70">{relayStatus}</p>
           {#if !term}
             <p class="text-sm opacity-70">
-              {h ? "Search for messages in this room." : "Search for messages across this space."}
+              {h ? "Search for content in this room." : "Search for content in this space."}
             </p>
+          {:else if loading}
+            <p class="text-sm opacity-70">Searching...</p>
           {:else if eventsByAge.size === 0}
             <p class="text-sm opacity-70">No results found.</p>
           {:else}

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import {
+    currentVoiceSession,
+    DeviceKind,
+    supportsAudioOutputSelection,
+    switchVoiceActiveDevice,
+    type VoiceSession,
+  } from "@app/voice"
+  import {popModal} from "@app/util/modal"
+
+  const selectValueForActiveDevice = (session: VoiceSession, kind: DeviceKind): string => {
+    const livekitDeviceId = session.room.getActiveDevice(kind)
+    if (livekitDeviceId === undefined || livekitDeviceId === "" || livekitDeviceId === "default") {
+      return ""
+    }
+    return livekitDeviceId
+  }
+
+  let audioInputs = $state<MediaDeviceInfo[]>([])
+  let audioOutputs = $state<MediaDeviceInfo[]>([])
+  let selectedInput = $state("")
+  let selectedOutput = $state("")
+
+  const loadDevices = async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      audioInputs = devices.filter(d => d.kind === "audioinput")
+      audioOutputs = devices.filter(d => d.kind === "audiooutput")
+    } catch {
+      audioInputs = []
+      audioOutputs = []
+    }
+  }
+
+  $effect(() => {
+    loadDevices()
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
+  })
+
+  $effect(() => {
+    const session = $currentVoiceSession
+    if (!session) {
+      popModal()
+      return
+    }
+    selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
+    selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+  })
+
+  const onInputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioInput, selectedInput)
+  }
+
+  const onOutputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
+  }
+
+  const onDone = () => {
+    popModal()
+  }
+
+  // Output not support in Safari
+  const canPickOutput = supportsAudioOutputSelection()
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Audio settings</ModalTitle>
+      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-4 pt-2">
+      <FieldInline>
+        {#snippet label()}
+          <p>Microphone</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedInput}
+            onchange={onInputChange}
+            aria-label="Microphone">
+            <option value="">Default microphone</option>
+            {#each audioInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Microphone ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+      {#if canPickOutput}
+        <FieldInline>
+          {#snippet label()}
+            <p>Speaker</p>
+          {/snippet}
+          {#snippet input()}
+            <select
+              class="select select-bordered w-full"
+              bind:value={selectedOutput}
+              onchange={onOutputChange}
+              aria-label="Speaker">
+              <option value="">Default speaker</option>
+              {#each audioOutputs as d (d.deviceId)}
+                <option value={d.deviceId}>
+                  {d.label || `Speaker ${d.deviceId.slice(0, 8)}…`}
+                </option>
+              {/each}
+            </select>
+          {/snippet}
+        </FieldInline>
+      {/if}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-primary w-full" onclick={onDone}>Done</Button>
+  </ModalFooter>
+</Modal>

src/app/components/VoiceRoomJoinDialog.svelte

@@ -12,9 +12,11 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import {AbortError, TimeoutError} from "$lib/util"
   import {displayRoom} from "@app/core/state"
   import {joinVoiceRoom} from "@app/voice"
   import {popModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
 
   type Props = {
     url: string
@@ -45,6 +47,16 @@
 
   const goBack = () => history.back()
 
+  const handleJoinError = (e: unknown) => {
+    if (e instanceof AbortError) return
+    console.error("Failed to join voice room", e)
+    let message = "Failed to join voice room"
+    if (e instanceof TimeoutError)
+      message = "Connection timed out. Please check your network and try again."
+    else if (e instanceof Error) message = e.message
+    pushToast({theme: "error", message})
+  }
+
   const joinVoice = async () => {
     popModal()
     await joinVoiceRoom(
@@ -52,7 +64,7 @@
       h,
       startWithoutMic,
       startWithoutMic ? undefined : selectedDeviceId || undefined,
-    )
+    ).catch(handleJoinError)
   }
 </script>
 

src/app/components/VoiceWidget.svelte

@@ -9,8 +9,10 @@
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
   import {
     decodeRelay,
@@ -63,6 +65,10 @@
     await goto(makeRoomPath(targetRoom.url, targetRoom.h))
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
+
+  const openAudioSettings = () => {
+    pushModal(VoiceCallAudioSettingsDialog)
+  }
 </script>
 
 {#if targetRoom}
@@ -100,6 +106,12 @@
           onclick={toggleMute}>
           <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
+        <Button
+          data-tip="Audio settings"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
+          onclick={openAudioSettings}>
+          <Icon icon={Settings} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"

src/app/core/commands.ts

@@ -412,12 +412,9 @@ export const toggleRoomNotifications = async (url: string, h: string) => {
   let updated: typeof alerts
 
   if (!existing) {
-    // No space settings yet, create one with this room as an exception (default is notify: true)
     updated = [...alerts, {url, notify: true, exceptions: [h]}]
   } else {
-    // Toggle exception status
+    const exceptions = existing.exceptions.includes(h)
-    const hasException = existing.exceptions.includes(h)
-    const exceptions = hasException
       ? remove(h, existing.exceptions)
       : append(h, existing.exceptions)
 

src/app/core/state.ts

@@ -191,7 +191,9 @@ export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
 
 export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
 
-export const PLATFORM_LOGO = PLATFORM_URL + "/logo.png"
+export const PLATFORM_LOGO = import.meta.env.PROD
+  ? PLATFORM_URL + "/logo.png"
+  : import.meta.env.VITE_PLATFORM_LOGO.replace(/^static/, "") || PLATFORM_URL + "/logo.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 
@@ -546,8 +548,11 @@ export const chatsById = call(() => {
 
     const unsubscribers = [
       on(repository, "update", ({added, removed}: RepositoryUpdate) => {
-        addEvents(added)
+        // Do this async so that profiles are populated
-        removeEvents(removed)
+        setTimeout(() => {
+          addEvents(added)
+          removeEvents(removed)
+        }, 50)
       }),
     ]
 

src/app/core/sync.ts

@@ -298,10 +298,7 @@ const syncSpace = (url: string, rooms: string[]) => {
     url,
     signal: controller.signal,
     filters: [
-      {kinds: relayKinds},
+      {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...MESSAGE_KINDS]},
-      {kinds: roomMetaKinds},
-      {kinds: roomMemberKinds},
-      {kinds: MESSAGE_KINDS, since},
       makeCommentFilter(CONTENT_KINDS, {since}),
     ],
     onEvent: event => {

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

@@ -1,7 +1,7 @@
 import {throttle} from "throttle-debounce"
 import {App} from "@capacitor/app"
 import {registerPlugin} from "@capacitor/core"
-import {pubkey, getSession} from "@welshman/app"
+import {session} from "@welshman/app"
 import type {Session} from "@welshman/app"
 import {maybe, now} from "@welshman/lib"
 import type {Filter} from "@welshman/util"
@@ -44,7 +44,7 @@ export class AndroidFallbackNotifications implements IPushAdapter {
       const doSync = throttle(1000, () => {
         AndroidPushFallback.syncState({
           state: {
-            session: pubkey.get() ? getSession(pubkey.get()!) : undefined,
+            session: session.get(),
             activeSince: this._activeSince,
             subscriptions: Array.from(this._subscriptions.values()),
           },

src/app/util/title.ts

@@ -8,8 +8,7 @@ const FALLBACK_APP_NAME = "Flotilla"
 const staticTitles = new Map<string, string>([
   ["/", "Redirecting"],
   ["/home", "Home"],
-  ["/discover", "Join a Space"],
+  ["/spaces", "Spaces"],
-  ["/spaces", "Your Spaces"],
   ["/spaces/create", "Create a Space"],
   ["/spaces/[relay]", "Space"],
   ["/spaces/[relay]/chat", "Space Chat"],

src/app/voice.ts

@@ -7,6 +7,7 @@ import {
   Room as LiveKitRoom,
   RoomEvent,
   Track,
+  supportsAudioOutputSelection,
   type AudioCaptureOptions,
   type LocalParticipant,
 } from "livekit-client"
@@ -24,6 +25,8 @@ export const LIVEKIT_PARTICIPANTS = 39004
 
 export {checkRelayHasLivekit} from "$lib/livekit"
 
+export {supportsAudioOutputSelection}
+
 export type VoiceSession = {
   url: string
   h: string
@@ -43,6 +46,36 @@ export enum VoiceState {
 
 export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
 
+const LIVEKIT_DEFAULT_DEVICE_ID = "default"
+
+export enum DeviceKind {
+  AudioInput = "audioinput",
+  AudioOutput = "audiooutput",
+}
+
+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
+    }
+    pushToast({theme: "error", message: `Error changing ${label}`})
+  }
+}
+
 export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)

src/lib/components/Dialog.svelte

@@ -36,6 +36,13 @@
       },
     ),
   )
+
+  const buttonClass = $derived(
+    cx("absolute right-3 btn btn-circle btn-neutral btn-sm", {
+      "top-3": fullscreen,
+      "-top-4": !fullscreen,
+    }),
+  )
 </script>
 
 <div class="center fixed inset-0 z-modal">
@@ -49,9 +56,7 @@
   <div class={wrapperClass}>
     <div class={innerClass} transition:fly>
       {#if !noEscape}
-        <Button
+        <Button class={buttonClass} onclick={clearModals}>
-          class="absolute -top-4 right-3 btn btn-circle btn-neutral btn-sm"
-          onclick={clearModals}>
           <Icon icon={Close} size={6} />
         </Button>
       {/if}

src/routes/discover/+page.svelte

@@ -1,156 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {derived as _derived} from "svelte/store"
-  import {dec, sleep} from "@welshman/lib"
-  import type {RelayProfile} from "@welshman/util"
-  import {throttled} from "@welshman/store"
-  import {relays, createSearch} from "@welshman/app"
-  import {createScroller} from "@lib/html"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
-  import Login from "@assets/icons/login-3.svg?dataurl"
-  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Page from "@lib/components/Page.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Divider from "@lib/components/Divider.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import CardButton from "@lib/components/CardButton.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import PageHeader from "@lib/components/PageHeader.svelte"
-  import ContentSearch from "@lib/components/ContentSearch.svelte"
-  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
-  import RelaySummary from "@app/components/RelaySummary.svelte"
-  import SpaceJoin from "@app/components/SpaceJoin.svelte"
-  import {groupListPubkeysByUrl, parseInviteLink} from "@app/core/state"
-  import {pushModal} from "@app/util/modal"
-
-  const startJoin = () => pushModal(SpaceInviteAccept)
-
-  const relaySearch = _derived(throttled(1000, relays), $relays => {
-    const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
-
-    return createSearch(options, {
-      getValue: (relay: RelayProfile) => relay.url,
-      sortFn: ({score, item}) => {
-        if (score && score > 0.1) return -score!
-
-        const wotScore = $groupListPubkeysByUrl.get(item.url)!.size
-
-        return score ? dec(score) * wotScore : -wotScore
-      },
-      fuseOptions: {
-        keys: ["url", "name", {name: "description", weight: 0.3}],
-        shouldSort: false,
-      },
-    })
-  })
-
-  const openSpace = (url: string, claim = "") => {
-    if (claim) {
-      pushModal(SpaceInviteAccept, {invite: term})
-    } else {
-      pushModal(SpaceJoin, {url})
-    }
-  }
-
-  let term = $state("")
-  let limit = $state(20)
-  let element: Element
-
-  const options = $derived($relaySearch.searchOptions(term).filter(r => r.url !== inviteData?.url))
-  const inviteData = $derived(parseInviteLink(term))
-
-  onMount(() => {
-    const scroller = createScroller({
-      element,
-      onScroll: () => {
-        limit += 20
-      },
-    })
-
-    return () => {
-      scroller.stop()
-    }
-  })
-</script>
-
-<Page class="cw-full">
-  <ContentSearch>
-    {#snippet input()}
-      <div class="flex flex-col gap-2">
-        <PageHeader>
-          {#snippet title()}
-            Join a Space
-          {/snippet}
-          {#snippet info()}
-            Find communities all across the nostr network
-          {/snippet}
-        </PageHeader>
-        <div class="grid gap-3 sm:grid-cols-2 card2 bg-alt">
-          <Button onclick={startJoin} class="w-full">
-            <CardButton class="btn-primary w-full">
-              {#snippet icon()}
-                <div><Icon icon={Login} size={7} /></div>
-              {/snippet}
-              {#snippet title()}
-                <div>Join with an invite</div>
-              {/snippet}
-              {#snippet info()}
-                <div>Paste a link and jump right in.</div>
-              {/snippet}
-            </CardButton>
-          </Button>
-          <Link href="/spaces/create" class="w-full">
-            <CardButton class="btn-neutral w-full">
-              {#snippet icon()}
-                <div><Icon icon={AddCircle} size={7} /></div>
-              {/snippet}
-              {#snippet title()}
-                <div>Create a new space</div>
-              {/snippet}
-              {#snippet info()}
-                <div>Launch a place for your people.</div>
-              {/snippet}
-            </CardButton>
-          </Link>
-        </div>
-        <Divider>Or</Divider>
-        <div class="min-w-0">
-          <label class="input input-bordered flex items-center gap-2">
-            <Icon icon={Magnifier} />
-            <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
-          </label>
-        </div>
-      </div>
-    {/snippet}
-    {#snippet content()}
-      <div class="col-2" bind:this={element}>
-        {#if inviteData}
-          {#key inviteData.url}
-            <Button
-              class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
-              onclick={() => openSpace(inviteData.url, inviteData.claim)}>
-              <RelaySummary url={inviteData.url} />
-            </Button>
-          {/key}
-        {/if}
-        {#each options.slice(0, limit) as relay (relay.url)}
-          <Button
-            class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
-            onclick={() => openSpace(relay.url)}>
-            <RelaySummary url={relay.url} />
-          </Button>
-        {/each}
-        <div class="flex justify-center py-20">
-          {#await sleep(5000)}
-            <Spinner loading>Looking for spaces...</Spinner>
-          {:then}
-            {#if options.length === 0}
-              <Spinner>No spaces found.</Spinner>
-            {/if}
-          {/await}
-        </div>
-      </div>
-    {/snippet}
-  </ContentSearch>
-</Page>

src/routes/home/+page.svelte

@@ -25,7 +25,7 @@
       <h1 class="text-center text-5xl">Welcome to</h1>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="col-3">
-        <Link href="/discover">
+        <Link href="/spaces">
           <CardButton class="btn-neutral">
             {#snippet icon()}
               <Icon icon={AddCircle} size={7} />

src/routes/spaces/+page.svelte

@@ -1,20 +1,70 @@
 <script lang="ts">
-  import {insertAt, removeAt} from "@welshman/lib"
+  import {onMount, tick} from "svelte"
-  import Planet from "@assets/icons/planet-3.svg?dataurl"
+  import {derived as _derived} from "svelte/store"
+  import {dec, insertAt, removeAt, sleep} from "@welshman/lib"
+  import type {RelayProfile} from "@welshman/util"
+  import {throttled} from "@welshman/store"
+  import {relays, createSearch} from "@welshman/app"
+  import {createScroller} from "@lib/html"
+  import {fly} from "@lib/transition"
+  import Widget from "@assets/icons/widget-4.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Page from "@lib/components/Page.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
-  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import RelaySummary from "@app/components/RelaySummary.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
-  import {userSpaceUrls, loadUserGroupList, PLATFORM_RELAYS} from "@app/core/state"
+  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import {
+    userSpaceUrls,
+    loadUserGroupList,
+    PLATFORM_RELAYS,
+    groupListPubkeysByUrl,
+    parseInviteLink,
+  } from "@app/core/state"
   import {setSpaceMembershipOrder} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
+  import {goToSpace, makeSpacePath} from "@app/util/routes"
+  import {notifications} from "@app/util/notifications"
 
   const addSpace = () => pushModal(SpaceAdd)
 
+  const relaySearch = _derived(throttled(1000, relays), $relays => {
+    const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
+
+    return createSearch(options, {
+      getValue: (relay: RelayProfile) => relay.url,
+      sortFn: ({score, item}) => {
+        if (score && score > 0.1) return -score!
+
+        const wotScore = $groupListPubkeysByUrl.get(item.url)?.size || 0
+
+        return score ? dec(score) * wotScore : -wotScore
+      },
+      fuseOptions: {
+        keys: ["url", "name", {name: "description", weight: 0.3}],
+        shouldSort: false,
+      },
+    })
+  })
+
+  const openSpace = (url: string, claim = "") => {
+    if ($userSpaceUrls.includes(url)) {
+      goToSpace(url)
+    } else if (claim) {
+      pushModal(SpaceInviteAccept, {invite: term})
+    } else {
+      pushModal(SpaceJoin, {url})
+    }
+  }
+
   const reconcileUrls = (currentUrls: string[], nextUrls: string[]) => {
     const mergedUrls = currentUrls.filter(url => nextUrls.includes(url))
 
@@ -31,16 +81,12 @@
     a.length === b.length && a.every((url, index) => url === b[index])
 
   const reorderSpaceUrls = (targetUrl: string) => {
-    if (!draggedUrl) {
+    if (!draggedUrl) return
-      return
-    }
 
     const sourceIndex = orderedSpaceUrls.indexOf(draggedUrl)
     const targetIndex = orderedSpaceUrls.indexOf(targetUrl)
 
-    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) return
-      return
-    }
 
     orderedSpaceUrls = insertAt(
       targetIndex,
@@ -89,57 +135,157 @@
     }
   })
 
+  let term = $state("")
+  let showSearch = $state(false)
+  let searchInput: HTMLInputElement | undefined = $state()
+  let limit = $state(20)
+  let element: Element
   let orderedSpaceUrls = $state<string[]>([])
   let draggedUrl = $state<string | undefined>()
   let dragStartOrder = $state<string[] | undefined>()
+
+  const openSearch = () => {
+    showSearch = true
+    tick().then(() => searchInput?.focus())
+  }
+
+  const closeSearch = () => {
+    showSearch = false
+    term = ""
+  }
+
+  const inviteData = $derived(parseInviteLink(term))
+  const searchResults = $derived($relaySearch.searchOptions(term))
+  const userSpaceSet = $derived(new Set($userSpaceUrls))
+  const filteredUserUrls = $derived(
+    term
+      ? orderedSpaceUrls.filter(url => searchResults.some(r => r.url === url))
+      : orderedSpaceUrls,
+  )
+  const otherSpaces = $derived(
+    searchResults.filter(r => !userSpaceSet.has(r.url) && r.url !== inviteData?.url),
+  )
+
+  onMount(() => {
+    const scroller = createScroller({
+      element,
+      onScroll: () => {
+        limit += 20
+      },
+    })
+
+    return () => {
+      scroller.stop()
+    }
+  })
 </script>
 
 <Page class="cw-full">
   <PageBar class="cw-full">
-    <div class="flex items-center justify-between gap-4">
+    {#if showSearch}
-      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
+      <label class="input input-bordered input-sm flex flex-1 items-center gap-2" in:fly>
-        <Icon icon={Planet} />
+        <Icon icon={Magnifier} />
-        <strong>Your Spaces</strong>
+        <input
-      </div>
+          bind:this={searchInput}
-      {#if $userSpaceUrls.length > 0 && PLATFORM_RELAYS.length === 0}
+          bind:value={term}
-        <Button class="btn btn-primary btn-sm" onclick={addSpace}>
+          class="min-w-0 grow"
-          <Icon icon={AddCircle} />
+          type="text"
-          Add Space
+          placeholder="Search for spaces..." />
+        <Button onclick={closeSearch} class="flex items-center">
+          <Icon icon={CloseCircle} />
         </Button>
-      {/if}
+      </label>
-    </div>
+    {:else}
+      <div class="flex items-center justify-between gap-4" in:fly>
+        <div class="ellipsize flex items-center gap-2 whitespace-nowrap">
+          <Icon icon={Widget} size={6} />
+          <strong>Spaces</strong>
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            class="btn btn-neutral btn-sm btn-square"
+            aria-label="Search"
+            onclick={openSearch}>
+            <Icon size={4} icon={Magnifier} />
+          </button>
+          {#if PLATFORM_RELAYS.length === 0}
+            <Button class="btn btn-primary btn-sm" onclick={addSpace}>
+              <Icon icon={AddCircle} />
+              Add Space
+            </Button>
+          {/if}
+        </div>
+      </div>
+    {/if}
   </PageBar>
   <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
-    {#each PLATFORM_RELAYS as url (url)}
+    <div class="flex flex-col gap-2" bind:this={element}>
-      <MenuSpacesItem {url} />
+      {#each PLATFORM_RELAYS as url (url)}
-    {:else}
+        <Button
-      {#await loadUserGroupList()}
+          class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
-        <div class="flex justify-center items-center py-20">
+          onclick={() => openSpace(url)}>
-          <span class="loading loading-spinner mr-3"></span>
+          <RelaySummary {url} />
-          Loading your spaces...
+        </Button>
-        </div>
+      {:else}
-      {:then}
+        {#await loadUserGroupList()}
-        {#each orderedSpaceUrls as url (url)}
+          <div class="flex items-center justify-center py-20">
-          <div
+            <span class="loading loading-spinner mr-3"></span>
-            class:opacity-60={draggedUrl === url}
+            Loading your spaces...
-            draggable="true"
-            role="listitem"
-            ondragstart={e => onDragStart(e, url)}
-            ondragover={e => onDragOver(e, url)}
-            ondrop={e => onDrop(e, url)}
-            ondragend={onDragEnd}>
-            <MenuSpacesItem {url} />
           </div>
-        {:else}
+        {:then}
-          <div class="flex flex-col gap-8 items-center py-20">
+          {#if inviteData}
-            <p>You haven't added any spaces yet!</p>
+            <Divider>Search results</Divider>
-            <Button class="btn btn-primary" onclick={addSpace}>
+            {#key inviteData.url}
-              <Icon icon={AddCircle} />
+              <Button
-              Add a Space
+                class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
+                onclick={() => openSpace(inviteData.url, inviteData.claim)}>
+                <RelaySummary url={inviteData.url} />
+              </Button>
+            {/key}
+          {/if}
+          {#if filteredUserUrls.length > 0}
+            <Divider>Your spaces</Divider>
+            {#each filteredUserUrls as url (url)}
+              <div
+                class:opacity-60={draggedUrl === url}
+                draggable="true"
+                role="listitem"
+                ondragstart={e => onDragStart(e, url)}
+                ondragover={e => onDragOver(e, url)}
+                ondrop={e => onDrop(e, url)}
+                ondragend={onDragEnd}>
+                <Button
+                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative"
+                  onclick={() => openSpace(url)}>
+                  <RelaySummary hideFavorites {url} />
+                  {#if $notifications.has(makeSpacePath(url))}
+                    <div class="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary"></div>
+                  {/if}
+                </Button>
+              </div>
+            {/each}
+          {:else if !term}
+            <p class="py-12 text-center">You haven't joined any spaces yet.</p>
+          {/if}
+          <Divider>{filteredUserUrls.length > 0 ? "More Spaces" : "Browse Spaces"}</Divider>
+          {#each otherSpaces.slice(0, limit) as relay (relay.url)}
+            <Button
+              class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
+              onclick={() => openSpace(relay.url)}>
+              <RelaySummary url={relay.url} />
             </Button>
+          {/each}
+          <div class="flex justify-center py-20">
+            {#await sleep(5000)}
+              <Spinner loading>Looking for spaces...</Spinner>
+            {:then}
+              {#if otherSpaces.length === 0}
+                <Spinner>No other spaces found.</Spinner>
+              {/if}
+            {/await}
           </div>
-        {/each}
+        {/await}
-      {/await}
+      {/each}
-    {/each}
+    </div>
   </PageContent>
 </Page>

src/routes/spaces/create/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Server from "@assets/icons/server.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
-  import HandShake from "@assets/icons/hand-shake.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -62,24 +61,6 @@
           <Icon icon={ArrowRight} />
         </Link>
       </div>
-      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center gap-2">
-            <Icon icon={HandShake} />
-            <h3 class="text-lg font-bold">Holis Communities</h3>
-          </div>
-          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li>Simple self-serve space creation</li>
-            <li>Built-in moderation tools</li>
-            <li>Room-level access controls</li>
-            <li>Membship lists and invite codes</li>
-          </ul>
-        </div>
-        <Link external class="btn btn-neutral" href="https://hol.is">
-          Get Started
-          <Icon icon={ArrowRight} />
-        </Link>
-      </div>
       <div class="card2 bg-alt flex flex-col gap-4">
         <div class="flex flex-col gap-4">
           <div class="self-start">

tailwind.config.js

@@ -3,7 +3,7 @@ import daisyui from "daisyui"
 import themes from "daisyui/src/theming/themes"
 
 config({path: ".env.local"})
-config({path: ".env.template"})
+config({path: ".env"})
 
 /** @type {import('tailwindcss').Config} */
 export default {

vite.config.ts

@@ -5,7 +5,7 @@ import {sveltekit} from "@sveltejs/kit/vite"
 import svg from "@poppanator/sveltekit-svg"
 
 config({path: ".env.local"})
-config({path: ".env.template"})
+config({path: ".env"})
 
 export default defineConfig({
   server: {