refactor: address PR review feedback for RBAC

Dockerfile

@@ -26,15 +26,7 @@ FROM node:20-alpine
 
 WORKDIR /app
 
-# Install production dependencies needed by the Node server runtime
+# Copy only the built output - no source, no .env, no dev deps
-RUN npm install -g pnpm@10.33.0
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm i --prod --frozen-lockfile --ignore-scripts
-
-# Copy only the built output and server source - no app source, no .env, no dev deps
 COPY --from=builder /app/build ./build
-COPY --from=builder /app/server.js ./server.js
 
-EXPOSE 3000
+CMD ["npx", "serve", "-s", "build"]
-
-CMD ["node", "server.js"]

README.md

@@ -31,7 +31,7 @@ To run your own Flotilla, it's as simple as:
 ```sh
 pnpm install
 pnpm run build
-pnpm run start
+npx serve -s build
 ```
 
 Or, if you prefer to use a container:

package.json

@@ -5,7 +5,6 @@
   "scripts": {
     "dev": "vite dev",
     "build": "./build.sh",
-    "start": "node server.js",
     "release:android": "./build.sh && cap build android --androidreleasetype APK --signing-type apksigner",
     "tauri:dev": "tauri dev",
     "tauri:build": "tauri build",
@@ -61,7 +60,6 @@
     "@capawesome/capacitor-badge": "^8.0.0",
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
-    "@hono/node-server": "^2.0.0",
     "@noble/curves": "^1.9.7",
     "@pomade/core": "^0.2.3",
     "@poppanator/sveltekit-svg": "^4.2.1",
@@ -82,15 +80,12 @@
     "@welshman/signer": "^0.8.13",
     "@welshman/store": "^0.8.13",
     "@welshman/util": "^0.8.13",
-    "cheerio": "^1.2.0",
     "compressorjs-next": "^1.1.2",
     "daisyui": "^5.5.19",
     "date-picker-svelte": "^2.17.0",
     "dotenv": "^16.6.1",
     "emoji-picker-element": "^1.28.1",
-    "emoji-picker-element-data": "^1.8.0",
     "fuse.js": "^7.1.0",
-    "hono": "^4.12.15",
     "husky": "^9.1.7",
     "idb": "^8.0.3",
     "livekit-client": "^2.17.2",

pnpm-lock.yaml

@@ -62,9 +62,6 @@ importers:
       '@getalby/sdk':
         specifier: ^5.1.2
         version: 5.1.2(typescript@5.9.3)
-      '@hono/node-server':
-        specifier: ^2.0.0
-        version: 2.0.0(hono@4.12.15)
       '@noble/curves':
         specifier: ^1.9.7
         version: 1.9.7
@@ -125,9 +122,6 @@ importers:
       '@welshman/util':
         specifier: ^0.8.13
         version: 0.8.13(@noble/curves@1.9.7)(@welshman/lib@0.8.13)(nostr-tools@2.20.0(typescript@5.9.3))
-      cheerio:
-        specifier: ^1.2.0
-        version: 1.2.0
       compressorjs-next:
         specifier: ^1.1.2
         version: 1.1.2
@@ -143,15 +137,9 @@ importers:
       emoji-picker-element:
         specifier: ^1.28.1
         version: 1.28.1
-      emoji-picker-element-data:
-        specifier: ^1.8.0
-        version: 1.8.0
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
-      hono:
-        specifier: ^4.12.15
-        version: 4.12.15
       husky:
         specifier: ^9.1.7
         version: 9.1.7
@@ -1108,12 +1096,6 @@ packages:
     resolution: {integrity: sha512-yUF9LhuvdIFOwjV1aG0ryzfwDiGBFk/CRLkRvrrM9dsE38SUjKsf1FDga5jxsKMu80nWcPZR9TiGGASWedoYPA==}
     engines: {node: '>=14'}
 
-  '@hono/node-server@2.0.0':
-    resolution: {integrity: sha512-n3GfHwwCvHCkGmOwKfxUPOlbfzuO64Sbc5XC4NGPIXxkuOnJrdgExdRKmHfF924r914WRJPT397GdqLvdYTeyQ==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      hono: ^4
-
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2483,13 +2465,6 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  cheerio-select@2.1.0:
-    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
-
-  cheerio@1.2.0:
-    resolution: {integrity: sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==}
-    engines: {node: '>=20.18.1'}
-
   chevrotain@7.1.1:
     resolution: {integrity: sha512-wy3mC1x4ye+O+QkEinVJkPf5u2vsrDIYW9G7ZuwFl6v/Yu0LwUuT2POsb+NUWApebyxfkQq6+yDfRExbnI5rcw==}
 
@@ -2849,18 +2824,12 @@ packages:
     resolution: {integrity: sha512-wkgGT6kugeQk/P6VZ/f4T+4HB41BVgNBq5CDIZVbQ02nvTVqAiVTbskxxu3eA/X96lMlfYOwnLQpN2v5E1zDEg==}
     engines: {node: '>= 0.4.0'}
 
-  emoji-picker-element-data@1.8.0:
-    resolution: {integrity: sha512-VfRuRJNEDLS1JKlNS4olaqhjX5S1nnZ+ZHG73b/dV8QeZyi0yPruTPEE72EmF6XO3k/9hj3lybMIYMOYXb/57A==}
-
   emoji-picker-element@1.28.1:
     resolution: {integrity: sha512-8c64IPish2PWoV9oYCo2pvuPHwIv+uK9bO0dfpPyMupDAvaWL9ZvYhWNTAR+2sx7BhfRjciImqP6CIUgNX+DMg==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  encoding-sniffer@0.2.1:
-    resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==}
-
   enhanced-resolve@5.20.1:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
@@ -2872,14 +2841,6 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
-    engines: {node: '>=0.12'}
-
-  entities@7.0.1:
-    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
-    engines: {node: '>=0.12'}
-
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -3273,10 +3234,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  hono@4.12.15:
-    resolution: {integrity: sha512-qM0jDhFEaCBb4TxoW7f53Qrpv9RBiayUHo0S52JudprkhvpjIrGoU1mnnr29Fvd1U335ZFPZQY1wlkqgfGXyLg==}
-    engines: {node: '>=16.9.0'}
-
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -3284,9 +3241,6 @@ packages:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
-  htmlparser2@10.1.0:
-    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
-
   husky@9.1.7:
     resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
     engines: {node: '>=18'}
@@ -3295,10 +3249,6 @@ packages:
   ico-endec@0.1.6:
     resolution: {integrity: sha512-ZdLU38ZoED3g1j3iEyzcQj+wAkY2xfWNkymszfJPoxucIUhK7NayQ+/C4Kv0nDFMIsbtbEHldv3V8PU494/ueQ==}
 
-  iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
-
   idb@7.1.1:
     resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
 
@@ -4065,15 +4015,6 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
-  parse5-htmlparser2-tree-adapter@7.1.0:
-    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
-
-  parse5-parser-stream@7.1.2:
-    resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
-
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
-
   path-exists@3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
@@ -4515,9 +4456,6 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
-  safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-
   sax@1.1.4:
     resolution: {integrity: sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg==}
 
@@ -4953,10 +4891,6 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
-  undici@7.25.0:
-    resolution: {integrity: sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==}
-    engines: {node: '>=20.18.1'}
-
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -5075,15 +5009,6 @@ packages:
     resolution: {integrity: sha512-5ZZY1+lGq8LEKuDlg9M2RPJHlH3R7OVwyHqMcUsLKCgd9Wvf+QrFTCItkXXYPmrJn8H6gRLXbSgxLLdexiqHxw==}
     engines: {node: '>=6.0.0', npm: '>=3.10.0'}
 
-  whatwg-encoding@3.1.1:
-    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
-    engines: {node: '>=18'}
-    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
-
-  whatwg-mimetype@4.0.0:
-    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
-    engines: {node: '>=18'}
-
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -6303,10 +6228,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@hono/node-server@2.0.0(hono@4.12.15)':
-    dependencies:
-      hono: 4.12.15
-
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -7721,29 +7642,6 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  cheerio-select@2.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-select: 5.2.2
-      css-what: 6.2.2
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-
-  cheerio@1.2.0:
-    dependencies:
-      cheerio-select: 2.1.0
-      dom-serializer: 2.0.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      encoding-sniffer: 0.2.1
-      htmlparser2: 10.1.0
-      parse5: 7.3.0
-      parse5-htmlparser2-tree-adapter: 7.1.0
-      parse5-parser-stream: 7.1.2
-      undici: 7.25.0
-      whatwg-mimetype: 4.0.0
-
   chevrotain@7.1.1:
     dependencies:
       regexp-to-ast: 0.5.0
@@ -8130,17 +8028,10 @@ snapshots:
     dependencies:
       sax: 1.1.4
 
-  emoji-picker-element-data@1.8.0: {}
-
   emoji-picker-element@1.28.1: {}
 
   emoji-regex@8.0.0: {}
 
-  encoding-sniffer@0.2.1:
-    dependencies:
-      iconv-lite: 0.6.3
-      whatwg-encoding: 3.1.1
-
   enhanced-resolve@5.20.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -8150,10 +8041,6 @@ snapshots:
 
   entities@4.5.0: {}
 
-  entities@6.0.1: {}
-
-  entities@7.0.1: {}
-
   env-paths@2.2.1: {}
 
   env-paths@3.0.0: {}
@@ -8663,29 +8550,16 @@ snapshots:
 
   he@1.2.0: {}
 
-  hono@4.12.15: {}
-
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
     dependencies:
       lru-cache: 6.0.0
 
-  htmlparser2@10.1.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      entities: 7.0.1
-
   husky@9.1.7: {}
 
   ico-endec@0.1.6: {}
 
-  iconv-lite@0.6.3:
-    dependencies:
-      safer-buffer: 2.1.2
-
   idb@7.1.1: {}
 
   idb@8.0.3: {}
@@ -9392,19 +9266,6 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  parse5-htmlparser2-tree-adapter@7.1.0:
-    dependencies:
-      domhandler: 5.0.3
-      parse5: 7.3.0
-
-  parse5-parser-stream@7.1.2:
-    dependencies:
-      parse5: 7.3.0
-
-  parse5@7.3.0:
-    dependencies:
-      entities: 6.0.1
-
   path-exists@3.0.0: {}
 
   path-exists@4.0.0: {}
@@ -9843,8 +9704,6 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
-  safer-buffer@2.1.2: {}
-
   sax@1.1.4: {}
 
   sax@1.4.4: {}
@@ -10370,8 +10229,6 @@ snapshots:
 
   undici-types@7.16.0: {}
 
-  undici@7.25.0: {}
-
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -10452,12 +10309,6 @@ snapshots:
     dependencies:
       sdp: 3.2.1
 
-  whatwg-encoding@3.1.1:
-    dependencies:
-      iconv-lite: 0.6.3
-
-  whatwg-mimetype@4.0.0: {}
-
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3

server.js

@@ -1,280 +0,0 @@
-import path from "node:path"
-import {promises as fs} from "node:fs"
-import {fileURLToPath} from "node:url"
-
-import "dotenv/config"
-import {serve} from "@hono/node-server"
-import {serveStatic} from "@hono/node-server/serve-static"
-import {loadRelay} from "@welshman/app"
-import {displayRelayUrl, normalizeRelayUrl} from "@welshman/util"
-import {load} from "cheerio"
-import {Hono} from "hono"
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-const BUILD_DIR = path.join(__dirname, "build")
-const INDEX_PATH = path.join(BUILD_DIR, "index.html")
-
-const PORT = parseInt(process.env.PORT || "", 10) || 3000
-const HOST = process.env.HOST || "0.0.0.0"
-
-let TEMPLATE_HTML = ""
-try {
-  TEMPLATE_HTML = await fs.readFile(INDEX_PATH, "utf8")
-} catch (error) {
-  console.error(`Unable to read ${INDEX_PATH}. Run "pnpm run build" first.`)
-  process.exit(1)
-}
-
-const PLATFORM_NAME = process.env.VITE_PLATFORM_NAME
-const PLATFORM_DESCRIPTION = process.env.VITE_PLATFORM_DESCRIPTION
-
-// Match client-side decode logic
-const decodeRelay = url => {
-  try {
-    return normalizeRelayUrl(decodeURIComponent(url))
-  } catch {
-    return undefined
-  }
-}
-
-const requestUrlFromContext = context => {
-  const requestUrl = new URL(context.req.url)
-  const forwardedProto = context.req.header("x-forwarded-proto")?.split(",")[0]?.trim()
-  const forwardedHost = context.req.header("x-forwarded-host")?.split(",")[0]?.trim()
-
-  if (forwardedProto === "http" || forwardedProto === "https") {
-    requestUrl.protocol = `${forwardedProto}:`
-  }
-
-  if (forwardedHost) {
-    requestUrl.host = forwardedHost
-  }
-
-  return requestUrl
-}
-
-const fetchRelayMeta = async relayUrl => {
-  if (!relayUrl) return undefined
-  try {
-    return await loadRelay(normalizeRelayUrl(relayUrl))
-  } catch (err) {
-    console.error(`Failed to fetch relay metadata for ${relayUrl}:`, err)
-    return undefined
-  }
-}
-
-const buildDefaultImage = requestUrl => {
-  return new URL("/maskable-icon-512x512.png", requestUrl.origin).toString()
-}
-
-const getMetadataForInvite = async (url, match) => {
-  const relayParam = url.searchParams.get("r")
-  if (!relayParam) return undefined
-
-  const relayMetadata = await fetchRelayMeta(relayParam)
-  if (!relayMetadata) return undefined
-
-  const relayDisplay = displayRelayUrl(relayParam)
-  const spaceName = relayMetadata.name
-  const relayDescription = relayMetadata.description
-
-  const title = spaceName
-    ? `Invite to ${spaceName} on ${PLATFORM_NAME}`
-    : `Invite to a Space on ${PLATFORM_NAME}`
-
-  const parts = []
-  if (spaceName) {
-    parts.push(`You are invited to join ${spaceName} on ${PLATFORM_NAME}.`)
-  } else {
-    parts.push(`You are invited to join a space on ${PLATFORM_NAME}.`)
-  }
-
-  if (relayDisplay) parts.push(`Relay: ${relayDisplay}.`)
-  if (relayDescription) parts.push(relayDescription)
-  else parts.push(PLATFORM_DESCRIPTION)
-
-  const description = parts.join(" ")
-  const image =
-    relayMetadata.icon ||
-    relayMetadata.picture ||
-    relayMetadata.image ||
-    buildDefaultImage(url)
-
-  return {
-    title,
-    description,
-    image,
-    url: url.toString(),
-    site: url.origin,
-  }
-}
-
-const getMetadataForSpace = async (url, match) => {
-  const relayParam = decodeRelay(match[1])
-  if (!relayParam) return undefined
-
-  const relayMetadata = await fetchRelayMeta(relayParam)
-  if (!relayMetadata) return undefined
-
-  const spaceName = relayMetadata.name || displayRelayUrl(relayParam)
-
-  return {
-    title: `${spaceName} on ${PLATFORM_NAME}`,
-    description: relayMetadata.description || PLATFORM_DESCRIPTION,
-    image:
-      relayMetadata.icon ||
-      relayMetadata.picture ||
-      relayMetadata.image ||
-      buildDefaultImage(url),
-    url: url.toString(),
-    site: url.origin,
-  }
-}
-
-const getMetadataForSpaceSection = async (url, match) => {
-  const spaceMeta = await getMetadataForSpace(url, match)
-  if (!spaceMeta) return undefined
-
-  const section = match[2]
-  const sectionName = section.charAt(0).toUpperCase() + section.slice(1)
-  spaceMeta.title = `${sectionName} on ${spaceMeta.title}`
-  return spaceMeta
-}
-
-const getMetadataForSpaceItem = async (url, match) => {
-  const spaceMeta = await getMetadataForSpace(url, match)
-  if (!spaceMeta) return undefined
-
-  const section = match[2]
-  let itemType = "Item"
-  if (section === "calendar") itemType = "Event"
-  if (section === "threads") itemType = "Thread"
-  if (section === "polls") itemType = "Poll"
-  if (section === "goals") itemType = "Goal"
-  if (section === "classifieds") itemType = "Listing"
-
-  spaceMeta.title = `${itemType} on ${spaceMeta.title}`
-  return spaceMeta
-}
-
-const getMetadataForRoom = async (url, match) => {
-  const spaceMeta = await getMetadataForSpace(url, match)
-  if (!spaceMeta) return undefined
-
-  // Room metadata requires fetching from Nostr, which can be added later.
-  spaceMeta.title = `Room on ${spaceMeta.title}`
-  return spaceMeta
-}
-
-const routes = [
-  [/^\/join\/?$/, getMetadataForInvite],
-  [/^\/spaces\/([^/]+)\/(calendar|chat|threads|polls|goals|classifieds|recent)\/?$/, getMetadataForSpaceSection],
-  [/^\/spaces\/([^/]+)\/(calendar|threads|polls|goals|classifieds)\/([^/]+)\/?$/, getMetadataForSpaceItem],
-  [/^\/spaces\/([^/]+)\/([^/]+)\/?$/, getMetadataForRoom],
-  [/^\/spaces\/([^/]+)\/?$/, getMetadataForSpace],
-]
-
-const getMetadataForRoute = async url => {
-  for (const [regex, getMetadata] of routes) {
-    const match = url.pathname.match(regex)
-    if (match) {
-      try {
-        return await getMetadata(url, match)
-      } catch (err) {
-        console.error(`Error generating metadata for route ${url.pathname}:`, err)
-        return undefined
-      }
-    }
-  }
-  return undefined
-}
-
-const injectMeta = metadata => {
-  const $ = load(TEMPLATE_HTML)
-
-  if (metadata.title) {
-    $("title").text(metadata.title)
-    $('meta[property="og:title"]').attr("content", metadata.title)
-    $('meta[name="twitter:title"]').attr("content", metadata.title)
-  }
-
-  if (metadata.description) {
-    $('meta[name="description"]').attr("content", metadata.description)
-    $('meta[property="og:description"]').attr("content", metadata.description)
-    $('meta[name="twitter:description"]').attr("content", metadata.description)
-  }
-
-  if (metadata.image) {
-    $('meta[property="og:image"]').attr("content", metadata.image)
-    $('meta[name="twitter:image"]').attr("content", metadata.image)
-  }
-
-  if (metadata.url) {
-    $('meta[property="og:url"]').attr("content", metadata.url)
-    $('meta[name="twitter:site"]').attr("content", metadata.site)
-    $('meta[name="twitter:url"]').attr("content", metadata.url)
-    $('link[rel="canonical"]').attr("href", metadata.url)
-  }
-
-  return $.html()
-}
-
-const app = new Hono()
-
-// Only allow GET and HEAD requests
-app.use("*", async (context, next) => {
-  const method = context.req.method
-  if (method !== "GET" && method !== "HEAD") {
-    return context.text("Method Not Allowed", 405, {Allow: "GET, HEAD"})
-  }
-  await next()
-})
-
-// Serve static assets with appropriate caching
-app.use(
-  "*",
-  serveStatic({
-    root: BUILD_DIR,
-    onFound: (filePath, context) => {
-      const isImmutable = filePath.split(path.sep).join("/").includes("/_app/immutable/")
-      const cacheControl =
-        path.basename(filePath) === "index.html"
-          ? "no-cache"
-          : isImmutable
-            ? "public, max-age=31536000, immutable"
-            : "public, max-age=3600"
-
-      context.header("Cache-Control", cacheControl)
-    },
-  }),
-)
-
-// SPA fallback for routes that don't match static files
-app.get("*", async context => {
-  const requestUrl = requestUrlFromContext(context)
-
-  // If the path has an extension, it's likely a missing static asset, not an SPA route
-  if (path.extname(requestUrl.pathname)) {
-    return context.text("Not found", 404)
-  }
-
-  const metadata = await getMetadataForRoute(requestUrl)
-  const html = metadata ? injectMeta(metadata) : TEMPLATE_HTML
-
-  return context.html(html, 200, {
-    "Cache-Control": metadata ? "no-store" : "no-cache",
-  })
-})
-
-serve(
-  {
-    fetch: app.fetch,
-    hostname: HOST,
-    port: PORT,
-  },
-  () => {
-    console.log(`Flotilla server running on http://${HOST}:${PORT}`)
-  },
-)

src/app.html

@@ -2,18 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>{NAME}</title>
-    <link rel="canonical" href="{URL}" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="theme-color" content="{ACCENT}" />
     <meta name="description" content="{DESCRIPTION}" />
-    <meta property="og:url" content="{URL}" />
+    <meta name="og:url" content="{URL}" />
-    <meta property="og:type" content="website" />
+    <meta name="og:type" content="website" />
-    <meta property="og:title" content="{NAME}" />
+    <meta name="og:title" content="{NAME}" />
-    <meta property="og:description" content="{DESCRIPTION}" />
+    <meta name="og:description" content="{DESCRIPTION}" />
-    <meta property="og:image" content="" />
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="{URL}" />
     <meta name="twitter:title" content="{NAME}" />

src/app/components/EventActions.svelte

@@ -42,7 +42,7 @@
   let popover: Instance | undefined = $state()
 </script>
 
-<div class="join items-center rounded-full">
+<Button class="join rounded-full">
   {#if ENABLE_ZAPS && !hideZap}
     <ZapButton {url} {event} class="btn join-item btn-neutral btn-xs">
       <Icon icon={Bolt} size={4} />
@@ -52,7 +52,6 @@
     <Icon icon={SmileCircle} size={4} />
   </EmojiButton>
   <Tippy
-    class="flex"
     bind:popover
     component={EventMenu}
     props={{url, noun, event, customActions, onClick: hidePopover}}
@@ -61,4 +60,4 @@
       <Icon icon={MenuDots} size={4} />
     </Button>
   </Tippy>
-</div>
+</Button>

src/app/components/KeyDownload.svelte

@@ -15,7 +15,6 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
 
@@ -23,11 +22,9 @@
     secret: string
     next: () => unknown
     submitText?: string
-    step?: number
-    totalSteps?: number
   }
 
-  const {secret, next, submitText = "Continue", step, totalSteps}: Props = $props()
+  const {secret, next, submitText = "Continue"}: Props = $props()
 
   const back = () => history.back()
 
@@ -153,9 +150,6 @@
       </Button>
     </div>
   </ModalBody>
-  {#if step && totalSteps}
-    <ProgressBar current={step} total={totalSteps} />
-  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/LogInEmail.svelte

@@ -19,7 +19,6 @@
   import LogInOTP from "@app/components/LogInOTP.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
-  import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {pushModal, clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -45,7 +44,7 @@
 
         return pushToast({
           theme: "error",
-          message: getPomadeLoginFailureMessage(messages),
+          message: "Sorry, we were unable to log you in.",
         })
       }
 
@@ -65,17 +64,10 @@
 
           pushToast({
             theme: "error",
-            message: getPomadeLoginFailureMessage(res.messages),
+            message: "Sorry, we were unable to log you in.",
           })
         }
       }
-    } catch (error) {
-      console.error("Login error:", error)
-
-      pushToast({
-        theme: "error",
-        message: POMADE_NETWORK_ERROR_MESSAGE,
-      })
     } finally {
       loading = false
     }
@@ -98,7 +90,7 @@
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input type="email" bind:value={email} />
+          <input bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>

src/app/components/LogInOTP.svelte

@@ -15,7 +15,6 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTPConfirm from "@app/components/LogInOTPConfirm.svelte"
-  import {POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -36,20 +35,11 @@
       if (ok) {
         pushModal(LogInOTPConfirm, {email, peersByPrefix})
       } else {
-        console.error("Pomade challenge request failed during OTP login")
-
         pushToast({
           theme: "error",
-          message: POMADE_NETWORK_ERROR_MESSAGE,
+          message: "Sorry, we were unable to request a login code.",
         })
       }
-    } catch (error) {
-      console.error(error)
-
-      pushToast({
-        theme: "error",
-        message: POMADE_NETWORK_ERROR_MESSAGE,
-      })
     } finally {
       loading = false
     }
@@ -71,7 +61,7 @@
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input type="email" bind:value={email} />
+          <input bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>

src/app/components/LogInOTPConfirm.svelte

@@ -15,11 +15,10 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
-  import {pushModal, clearModals} from "@app/util/modal"
-  import {setChecked} from "@app/util/notifications"
-  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
-  import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {pushToast} from "@app/util/toast"
+  import {setChecked} from "@app/util/notifications"
+  import {pushModal, clearModals} from "@app/util/modal"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
 
   type Props = {
     email: string
@@ -45,7 +44,7 @@
 
         return pushToast({
           theme: "error",
-          message: getPomadeLoginFailureMessage(messages),
+          message: "Sorry, we were unable to log you in.",
         })
       }
 
@@ -65,17 +64,10 @@
 
           pushToast({
             theme: "error",
-            message: getPomadeLoginFailureMessage(res.messages),
+            message: "Sorry, we were unable to log you in.",
           })
         }
       }
-    } catch (error) {
-      console.error("Login error:", error)
-
-      pushToast({
-        theme: "error",
-        message: POMADE_NETWORK_ERROR_MESSAGE,
-      })
     } finally {
       loading = false
     }

src/app/components/LogInSelect.svelte

@@ -14,7 +14,6 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
-  import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {setChecked} from "@app/util/notifications"
   import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -47,16 +46,9 @@
 
         pushToast({
           theme: "error",
-          message: getPomadeLoginFailureMessage(res.messages),
+          message: "Sorry, we were unable to log you in.",
         })
       }
-    } catch (error) {
-      console.error("Login error:", error)
-
-      pushToast({
-        theme: "error",
-        message: POMADE_NETWORK_ERROR_MESSAGE,
-      })
     } finally {
       loading = false
     }

src/app/components/ProfileEditForm.svelte

@@ -23,10 +23,9 @@
     onsubmit: (values: Values) => void
     isSignup?: boolean
     footer: Snippet
-    progressBar?: Snippet
   }
 
-  const {initialValues, isSignup, onsubmit, footer, progressBar}: Props = $props()
+  const {initialValues, isSignup, onsubmit, footer}: Props = $props()
 
   const values = $state(initialValues)
 
@@ -104,9 +103,6 @@
       </Field>
     {/if}
   </ModalBody>
-  {#if progressBar}
-    {@render progressBar()}
-  {/if}
   <ModalFooter>
     {@render footer()}
   </ModalFooter>

src/app/components/ProgressBar.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  const {current, total}: {current: number; total: number} = $props()
-</script>
-
-<div class="flex w-full">
-  {#each Array(total) as _, i}
-    <div class="h-1 flex-1 transition-colors {i < current ? 'bg-primary' : 'bg-base-300'}"></div>
-  {/each}
-</div>

src/app/components/SignUp.svelte

@@ -62,10 +62,9 @@
 
   const flows = {
     email: {
-      start: () => pushModal(SignUpEmail, {next: flows.email.profile, step: 1, totalSteps: 3}),
+      start: () => pushModal(SignUpEmail, {next: flows.email.profile}),
-      profile: () => pushModal(SignUpProfile, {next: flows.email.complete, step: 2, totalSteps: 3}),
+      profile: () => pushModal(SignUpProfile, {next: flows.email.complete}),
-      complete: () =>
+      complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
-        pushModal(SignUpComplete, {next: flows.email.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
@@ -75,10 +74,9 @@
       },
     },
     nostr: {
-      start: () => pushModal(SignUpProfile, {next: flows.nostr.key, step: 1, totalSteps: 3}),
+      start: () => pushModal(SignUpProfile, {next: flows.nostr.key}),
-      key: () => pushModal(SignUpKey, {next: flows.nostr.complete, step: 2, totalSteps: 3}),
+      key: () => pushModal(SignUpKey, {next: flows.nostr.complete}),
-      complete: () =>
+      complete: () => pushModal(SignUpComplete, {next: flows.nostr.finalize}),
-        pushModal(SignUpComplete, {next: flows.nostr.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const secret = getKey<string>("signup.secret")!
 

src/app/components/SignUpComplete.svelte

@@ -9,15 +9,12 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
-    step?: number
-    totalSteps?: number
   }
 
-  const {next, step, totalSteps}: Props = $props()
+  const {next}: Props = $props()
 
   const back = () => history.back()
 </script>
@@ -36,9 +33,6 @@
       on groups you've already joined. Click below to get started!
     </p>
   </ModalBody>
-  {#if step && totalSteps}
-    <ProgressBar current={step} total={totalSteps} />
-  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpEmail.svelte

@@ -18,17 +18,14 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
-  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
     next: () => void
-    step?: number
-    totalSteps?: number
   }
 
-  const {next, step, totalSteps}: Props = $props()
+  const {next}: Props = $props()
 
   const back = () => history.back()
 
@@ -84,7 +81,7 @@
       setKey("signup.clientOptions", clientOptions)
 
       popToast(toastId)
-      pushModal(SignUpEmailConfirm, {next, step, totalSteps})
+      pushModal(SignUpEmailConfirm, {next})
     } catch (e) {
       console.error(e)
 
@@ -123,7 +120,7 @@
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input type="email" bind:value={email} />
+          <input bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>
@@ -137,14 +134,8 @@
           <input type="password" bind:value={password} />
         </label>
       {/snippet}
-      {#snippet info()}
-        Must be at least 12 characters long.
-      {/snippet}
     </FieldInline>
   </ModalBody>
-  {#if step && totalSteps}
-    <ProgressBar current={step} total={totalSteps} />
-  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpEmailConfirm.svelte

@@ -15,15 +15,12 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
-    step?: number
-    totalSteps?: number
   }
 
-  const {next, step, totalSteps}: Props = $props()
+  const {next}: Props = $props()
 
   const email = getKey<string>("signup.email")
 
@@ -64,9 +61,6 @@
       above.
     </p>
   </ModalBody>
-  {#if step && totalSteps}
-    <ProgressBar current={step} total={totalSteps} />
-  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpKey.svelte

@@ -4,13 +4,11 @@
 
   type Props = {
     next: () => void
-    step?: number
-    totalSteps?: number
   }
 
-  const {next, step, totalSteps}: Props = $props()
+  const {next}: Props = $props()
 
   const secret = getKey<string>("signup.secret")!
 </script>
 
-<KeyDownload {secret} {next} {step} {totalSteps} />
+<KeyDownload {secret} {next} />

src/app/components/SignUpProfile.svelte

@@ -5,16 +5,15 @@
   import {getKey, setKey} from "@lib/implicit"
   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 ProfileEditForm from "@app/components/ProfileEditForm.svelte"
-  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
-    step?: number
-    totalSteps?: number
   }
 
-  const {next, step, totalSteps}: Props = $props()
+  const {next}: Props = $props()
 
   const profile = getKey<Profile>("signup.profile")!
 
@@ -28,20 +27,19 @@
   }
 </script>
 
-<ProfileEditForm isSignup {initialValues} {onsubmit}>
+<Modal>
-  {#snippet footer()}
+  <ModalBody>
-    <Button class="btn btn-link" onclick={back}>
+    <ProfileEditForm isSignup {initialValues} {onsubmit}>
-      <Icon icon={AltArrowLeft} />
+      {#snippet footer()}
-      Go back
+        <Button class="btn btn-link" onclick={back}>
-    </Button>
+          <Icon icon={AltArrowLeft} />
-    <Button class="btn btn-primary" type="submit">
+          Go back
-      Create Account
+        </Button>
-      <Icon icon={AltArrowRight} />
+        <Button class="btn btn-primary" type="submit">
-    </Button>
+          Create Account
-  {/snippet}
+          <Icon icon={AltArrowRight} />
-  {#snippet progressBar()}
+        </Button>
-    {#if step && totalSteps}
+      {/snippet}
-      <ProgressBar current={step} total={totalSteps} />
+    </ProfileEditForm>
-    {/if}
+  </ModalBody>
-  {/snippet}
+</Modal>
-</ProfileEditForm>

src/app/components/SpaceInvite.svelte

@@ -25,16 +25,6 @@
   const {url} = $props()
 
   const authError = deriveRelayAuthError(url)
-  let networkError = $state(false)
-  const isExplicitAuthError = $derived(
-    $authError &&
-      !(
-        $authError.toLowerCase().includes("failed") ||
-        $authError.toLowerCase().includes("timeout") ||
-        $authError.toLowerCase().includes("network")
-      ),
-  )
-  const isGenericError = $derived(networkError || ($authError && !isExplicitAuthError))
 
   const back = () => history.back()
   const copyInvite = () => clip(invite)
@@ -80,14 +70,8 @@
       ])
 
       claim = getTagValue("claim", event?.tags || []) || ""
-    } catch (err) {
+    } catch {
       claim = ""
-      if (
-        (err instanceof Error && (err.name === "AbortError" || err.name === "TimeoutError")) ||
-        !navigator.onLine
-      ) {
-        networkError = true
-      }
     } finally {
       loading = false
     }
@@ -108,11 +92,7 @@
         <p class="center">
           <Spinner {loading}>Requesting an invite link...</Spinner>
         </p>
-      {:else if isGenericError}
+      {:else if $authError}
-        <p class="center text-center">
-          Unable to reach the relay. Please check your connection and try again.
-        </p>
-      {:else if isExplicitAuthError}
         <p class="center">Oops! It looks like you're not a member of this relay.</p>
       {:else}
         <div class="flex flex-col items-center gap-6">

src/app/components/SpaceSearch.svelte

@@ -2,10 +2,9 @@
   import {tick} from "svelte"
   import {debounce} from "throttle-debounce"
   import {request} from "@welshman/net"
-  import {repository, tracker} from "@welshman/app"
+  import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
-  import {formatTimestampAsDate, groupBy, uniqBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
   import type {TrustedEvent, Filter} from "@welshman/util"
-  import {MESSAGE, sortEventsDesc} 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"
@@ -54,11 +53,8 @@
 
   const getFilter = (searchTerm: string): Filter =>
     h
-      ? {kinds: [MESSAGE, ...CONTENT_KINDS], "#h": [h], search: searchTerm}
+      ? {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
-      : {kinds: [MESSAGE, ...CONTENT_KINDS], search: searchTerm}
+      : {kinds: CONTENT_KINDS, search: searchTerm}
-
-  const getLocalResults = (filter: Filter) =>
-    repository.query([filter]).filter(event => tracker.getRelays(event.id).has(url))
 
   const search = debounce(300, async (searchTerm: string) => {
     controller?.abort()
@@ -72,23 +68,18 @@
     controller = new AbortController()
     loading = true
 
-    const filter = getFilter(searchTerm.trim())
-    const localResults = getLocalResults(filter)
-
-    results = sortEventsDesc(localResults)
-
     try {
       const events = await request({
         relays: getRelayUrls(),
         autoClose: true,
         signal: controller.signal,
-        filters: [filter],
+        filters: [getFilter(searchTerm.trim())],
       })
 
-      results = sortEventsDesc(uniqBy((e: TrustedEvent) => e.id, [...events, ...localResults]))
+      results = sortEventsDesc(events)
     } catch (error) {
       if (!(error instanceof DOMException && error.name === "AbortError")) {
-        results = sortEventsDesc(localResults)
+        results = []
       }
     } finally {
       loading = false

src/app/util/pomadeErrors.ts

@@ -1,11 +0,0 @@
-export const POMADE_INVALID_LOGIN_MESSAGE = "Invalid login information"
-export const POMADE_NETWORK_ERROR_MESSAGE = "Network error, please try again"
-
-type PomadeMessage = {
-  res?: unknown
-}
-
-export const getPomadeLoginFailureMessage = (messages: PomadeMessage[]) =>
-  messages.some(message => message.res !== undefined)
-    ? POMADE_INVALID_LOGIN_MESSAGE
-    : POMADE_NETWORK_ERROR_MESSAGE

src/lib/components/EmojiButton.svelte

@@ -31,7 +31,6 @@
 <svelte:document onmousemove={onMouseMove} />
 
 <Tippy
-  class="flex"
   bind:popover
   component={EmojiPicker}
   props={{onClick}}

src/lib/components/EmojiPicker.svelte

@@ -10,7 +10,6 @@
 
 <script lang="ts">
   import "emoji-picker-element"
-  import emojiDataUrl from "emoji-picker-element-data/en/emojibase/data.json?url"
   import type {Emoji} from "emoji-picker-element/shared"
   import {onMount} from "svelte"
 
@@ -27,4 +26,4 @@
   })
 </script>
 
-<emoji-picker bind:this={element} data-source={emojiDataUrl} class="m-auto"></emoji-picker>
+<emoji-picker bind:this={element} class="m-auto"></emoji-picker>

src/lib/components/FieldInline.svelte

@@ -9,22 +9,16 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="flex flex-col gap-2 {props.class}">
+<div class="grid grid-cols-1 gap-2 lg:gap-6 lg:grid-cols-3 {props.class}">
-  <div class="flex items-center justify-between w-full gap-2">
+  <label class="flex items-center gap-2 font-bold">
-    {#if props.label}
+    {@render props.label?.()}
-      <label class="flex items-center gap-2 min-w-[30%] max-w-[80%] md:max-w-none">
+  </label>
-        {@render props.label()}
+  <div class="col-span-2 flex items-center gap-2">
-      </label>
+    {@render props.input?.()}
-    {/if}
-    <div class="flex items-center gap-2 justify-end grow">
-      {#if props.input}
-        {@render props.input()}
-      {/if}
-    </div>
   </div>
-  {#if props.info}
+  <p class="flex-end text-sm opacity-50 lg:col-span-3">
-    <p class="text-sm opacity-50">
+    {#if props.info}
-      {@render props.info()}
+      {@render props.info?.()}
-    </p>
+    {/if}
-  {/if}
+  </p>
 </div>

src/lib/components/InputList.svelte

@@ -13,12 +13,7 @@
     placeholder?: string
   }
 
-  let {
+  let {value = $bindable(), addLabel, placeholder = "Enter text..."}: Props = $props()
-    value = $bindable(),
-    addLabel,
-    placeholder = "Enter text...",
-    allowAdd = true,
-  }: Props & {allowAdd?: boolean} = $props()
   let draggedIndex: number | null = $state(null)
 
   const onChange = (newValue: string[]) => {
@@ -77,14 +72,12 @@
       </div>
     </div>
   {/each}
-  {#if allowAdd}
+  <Button onclick={addItem} class="btn btn-link w-fit px-0">
-    <Button onclick={addItem} class="btn btn-link w-fit px-0">
+    <Icon icon={AddCircle} size={5} />
-      <Icon icon={AddCircle} size={5} />
+    {#if addLabel}
-      {#if addLabel}
+      {@render addLabel?.()}
-        {@render addLabel?.()}
+    {:else}
-      {:else}
+      Add Item
-        Add Item
+    {/if}
-      {/if}
+  </Button>
-    </Button>
-  {/if}
 </div>

src/lib/components/PageContent.svelte

@@ -13,7 +13,7 @@
   const className = $derived(
     cx(
       props.class,
-      "scroll-container z-feature flex min-h-0 w-full min-w-0 flex-col overflow-y-auto overflow-x-hidden pb-14 md:pb-0",
+      "scroll-container z-feature flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden",
     ),
   )
 </script>

src/routes/settings/alerts/+page.svelte

@@ -5,7 +5,6 @@
   import {Badge} from "@capawesome/capacitor-badge"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import {preventDefault} from "@lib/html"
-  import FieldInline from "@lib/components/FieldInline.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -64,64 +63,40 @@
       <!-- pass -->
     {:then { isSupported }}
       {#if isSupported}
-        <FieldInline>
+        <div class="flex justify-between">
-          {#snippet label()}
+          <p>Show badge for unread alerts</p>
-            <p>Show badge for unread alerts</p>
+          <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.badge} />
-          {/snippet}
+        </div>
-          {#snippet input()}
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.badge} />
-          {/snippet}
-        </FieldInline>
       {/if}
     {/await}
     {#if !Capacitor.isNativePlatform()}
-      <FieldInline>
+      <div class="flex justify-between">
-        {#snippet label()}
+        <p>Play sound for new activity</p>
-          <p>Play sound for new activity</p>
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
-        {/snippet}
+      </div>
-        {#snippet input()}
-          <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
-        {/snippet}
-      </FieldInline>
     {/if}
-    <FieldInline>
+    <div class="flex justify-between">
-      {#snippet label()}
+      <p>Enable push notifications</p>
-        <p>Enable push notifications</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.push} />
-      {/snippet}
+    </div>
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.push} />
-      {/snippet}
-    </FieldInline>
   </div>
   <div
     class={cx("card2 bg-alt col-4 shadow-md", {
       "pointer-events-none opacity-50": !settings.badge && !settings.sound && !settings.push,
     })}>
     <strong class="text-lg">Alert Types</strong>
-    <FieldInline>
+    <div class="flex justify-between">
-      {#snippet label()}
+      <p>Notify me about new activity</p>
-        <p>Notify me about new activity</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.spaces} />
-      {/snippet}
+    </div>
-      {#snippet input()}
+    <div class="flex justify-between">
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.spaces} />
+      <p>Always notify me when mentioned</p>
-      {/snippet}
+      <input type="checkbox" class="toggle toggle-primary" checked={settings.mentions} />
-    </FieldInline>
+    </div>
-    <FieldInline>
+    <div class="flex justify-between">
-      {#snippet label()}
+      <p>Notify me about new messages</p>
-        <p>Always notify me when mentioned</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
-      {/snippet}
+    </div>
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" checked={settings.mentions} />
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Notify me about new messages</p>
-      {/snippet}
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
-      {/snippet}
-    </FieldInline>
   </div>
   <div
     class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">

src/routes/settings/content/+page.svelte

@@ -11,7 +11,6 @@
   import {Router} from "@welshman/router"
   import {userMuteList, tagPubkey, publishThunk, userBlossomServerList} from "@welshman/app"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -29,10 +28,6 @@
     blossomServers = getTagValues("server", getListTags($userBlossomServerList))
   }
 
-  const addServer = () => {
-    blossomServers = [...blossomServers, ""]
-  }
-
   const onsubmit = preventDefault(async () => {
     await publishSettings($state.snapshot(settings))
 
@@ -109,7 +104,7 @@
       {/snippet}
       {#snippet input()}
         <input
-          class="range range-primary w-full"
+          class="range range-primary"
           type="range"
           min="0.8"
           max="1.3"
@@ -120,13 +115,13 @@
   </div>
   <div class="card2 bg-alt col-4 shadow-md">
     <strong class="text-lg">Editor Settings</strong>
-    <Field>
+    <FieldInline>
       {#snippet label()}
         <p>Send Delay</p>
       {/snippet}
       {#snippet input()}
         <input
-          class="range range-primary w-full"
+          class="range range-primary"
           type="range"
           min="0"
           max="10000"
@@ -139,19 +134,17 @@
           {settings.send_delay === 1000 ? "second" : "seconds"}.
         </p>
       {/snippet}
-    </Field>
+    </FieldInline>
     <Field>
       {#snippet label()}
         <p>Media Server</p>
       {/snippet}
-      {#snippet secondary()}
-        <Button class="link text-sm underline flex items-center gap-1" onclick={addServer}>
-          <Icon icon={AddCircle} size={4} />
-          Add Server
-        </Button>
-      {/snippet}
       {#snippet input()}
-        <InputList allowAdd={false} bind:value={blossomServers} />
+        <InputList bind:value={blossomServers}>
+          {#snippet addLabel()}
+            Add Server
+          {/snippet}
+        </InputList>
       {/snippet}
       {#snippet info()}
         <p>Choose a media server type and url for files you upload to {PLATFORM_NAME}.</p>

src/routes/settings/privacy/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import ShieldMinimalistic from "@assets/icons/shield-minimalistic.svg?dataurl"
   import {preventDefault} from "@lib/html"
-  import FieldInline from "@lib/components/FieldInline.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {pushToast} from "@app/util/toast"
@@ -12,10 +11,8 @@
     settings = {...$userSettingsValues}
   }
 
-  const onAuthModeChange = (e: Event) => {
+  const onAuthModeChange = (e: any) => {
-    const target = e.currentTarget as HTMLInputElement
+    settings.auth_mode = e.target.checked ? RelayAuthMode.Aggressive : RelayAuthMode.Conservative
-
-    settings.relay_auth = target.checked ? RelayAuthMode.Aggressive : RelayAuthMode.Conservative
   }
 
   const onsubmit = preventDefault(async () => {
@@ -33,46 +30,31 @@
       <Icon icon={ShieldMinimalistic} />
       Privacy Settings
     </strong>
-    <FieldInline>
+    <div class="grid grid-cols-2 gap-2">
-      {#snippet label()}
+      <p>Authenticate with unknown relays?</p>
-        <p>Authenticate with unknown relays?</p>
+      <input
-      {/snippet}
+        type="checkbox"
-      {#snippet input()}
+        class="toggle toggle-primary"
-        <input
+        onchange={onAuthModeChange}
-          type="checkbox"
+        checked={settings.auth_mode === RelayAuthMode.Aggressive} />
-          class="toggle toggle-primary"
+      <p class="col-span-2 text-sm opacity-70">
-          onchange={onAuthModeChange}
+        Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.
-          checked={settings.relay_auth === RelayAuthMode.Aggressive} />
+      </p>
-      {/snippet}
+    </div>
-      {#snippet info()}
+    <div class="grid grid-cols-2 gap-2">
-        <p>Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.</p>
+      <p>Report errors?</p>
-      {/snippet}
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_errors} />
-    </FieldInline>
+      <p class="col-span-2 text-sm opacity-70">
-    <FieldInline>
+        Allow {PLATFORM_NAME} to send error reports to help improve the app.
-      {#snippet label()}
+      </p>
-        <p>Report errors?</p>
+    </div>
-      {/snippet}
+    <div class="grid grid-cols-2 gap-2">
-      {#snippet input()}
+      <p>Report usage?</p>
-        <input
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
-          type="checkbox"
+      <p class="col-span-2 text-sm opacity-70">
-          class="toggle toggle-primary"
+        Allow {PLATFORM_NAME} to collect anonymous usage data.
-          bind:checked={settings.report_errors} />
+      </p>
-      {/snippet}
+    </div>
-      {#snippet info()}
-        <p>Allow {PLATFORM_NAME} to send error reports to help improve the app.</p>
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Report usage?</p>
-      {/snippet}
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
-      {/snippet}
-      {#snippet info()}
-        <p>Allow {PLATFORM_NAME} to collect anonymous usage data.</p>
-      {/snippet}
-    </FieldInline>
   </div>
   <div
     class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">

src/routes/settings/profile/+page.svelte

@@ -27,7 +27,6 @@
   import PasswordReset from "@app/components/PasswordReset.svelte"
   import InfoKeys from "@app/components/InfoKeys.svelte"
   import {pushModal} from "@app/util/modal"
-  import {POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {clip, pushToast} from "@app/util/toast"
 
   const npub = nip19.npubEncode($pubkey!)
@@ -49,24 +48,13 @@
       const {ok, peersByPrefix} = await Client.requestChallenge($session!.email)
 
       if (!ok) {
-        console.error("Pomade challenge request failed during password reset initiation")
-
         pushToast({
           theme: "error",
-          message: POMADE_NETWORK_ERROR_MESSAGE,
+          message: "Failed to initiate password reset!",
         })
-
-        return
       }
 
       pushModal(PasswordReset, {peersByPrefix})
-    } catch (error) {
-      console.error(error)
-
-      pushToast({
-        theme: "error",
-        message: POMADE_NETWORK_ERROR_MESSAGE,
-      })
     } finally {
       loading = false
     }

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import CloudCheck from "@assets/icons/cloud-check.svg?dataurl"
+  import Server from "@assets/icons/server.svg?dataurl"
-  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -13,91 +12,78 @@
   <PageContent class="flex flex-col items-center gap-2 p-2 pt-4">
     <PageHeader>
       {#snippet title()}
-        <div>Choose your Hosting Plan</div>
+        <div>Create your own Space</div>
       {/snippet}
       {#snippet info()}
-        <p>
+        <p>Get started with one of our trusted partners, or learn how to host your own space.</p>
-          Select how you want to deploy and manage your new Space. You can always migrate later.
-        </p>
       {/snippet}
     </PageHeader>
-    <div class="flex w-full max-w-lg flex-col gap-4 lg:max-w-4xl">
+    <div class="grid w-full max-w-lg grid-cols-1 gap-2 lg:max-w-4xl lg:grid-cols-2">
-      <div class="grid grid-cols-1 gap-2 lg:grid-cols-2">
+      <div class="card2 bg-alt flex flex-col gap-4">
-        <div class="card2 bg-alt flex flex-col gap-5">
+        <div class="flex flex-col gap-4">
-          <div class="flex flex-col gap-3">
+          <div class="flex items-center justify-between">
-            <div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-md">
+            <div class="flex items-center gap-3">
-              <Icon icon={CloudCheck} class="text-primary" />
+              <Icon icon={Server} />
+              <h3 class="text-lg font-bold">Self-Host your Space</h3>
             </div>
-            <div class="flex flex-col gap-1">
+            <div class="badge badge-neutral">Recommended</div>
-              <h3 class="text-lg font-bold">Community</h3>
-              <div class="text-xs font-semibold tracking-wider opacity-60">SELF-HOSTED</div>
-            </div>
-            <p class="text-sm opacity-70">
-              For technical users who want full control. Deploy on your own infrastructure and
-              manage your own updates and scaling.
-            </p>
           </div>
-          <ul class="flex flex-col gap-2 text-sm">
+          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
-            <li class="flex items-center gap-2">
+            <li>Unlimited customization and control</li>
-              <Icon icon={CheckCircle} class="opacity-60" />
+            <li>Free and open source software</li>
-              Open source core
+            <li>Full-featured admin dashboards available</li>
-            </li>
+            <li>Requires some technical skills</li>
-            <li class="flex items-center gap-2">
-              <Icon icon={CheckCircle} class="opacity-60" />
-              Community support
-            </li>
-            <li class="flex items-center gap-2">
-              <Icon icon={CheckCircle} class="opacity-60" />
-              Bring your own infra
-            </li>
           </ul>
-          <Link
-            external
-            class="btn btn-neutral mt-auto"
-            href="https://gitea.coracle.social/coracle/zooid">
-            Get started
-            <Icon icon={ArrowRight} />
-          </Link>
-        </div>
-        <div class="card2 bg-alt border-primary flex flex-col gap-5 border">
-          <div class="flex flex-col gap-3">
-            <div class="flex items-start justify-between">
-              <img alt="Coracle Logo" src="/coracle.png" class="h-10 w-10" />
-              <div class="badge badge-primary">Recommended</div>
-            </div>
-            <div class="flex flex-col gap-1">
-              <h3 class="text-lg font-bold">Coracle Hosting</h3>
-              <div class="text-xs font-semibold tracking-wider opacity-60">FULLY MANAGED</div>
-            </div>
-            <p class="text-sm opacity-70">
-              The premium experience. We handle the infrastructure, security updates, and scaling so
-              you can focus on your community.
-            </p>
-          </div>
-          <ul class="flex flex-col gap-2 text-sm">
-            <li class="flex items-center gap-2">
-              <Icon icon={CheckCircle} class="text-primary" />
-              One-click deployment
-            </li>
-            <li class="flex items-center gap-2">
-              <Icon icon={CheckCircle} class="text-primary" />
-              Automated backups & scaling
-            </li>
-            <li class="flex items-center gap-2">
-              <Icon icon={CheckCircle} class="text-primary" />
-              Priority support
-            </li>
-          </ul>
-          <Link external class="btn btn-primary mt-auto" href="https://hosting.coracle.social">
-            Start for free
-            <Icon icon={ArrowRight} />
-          </Link>
         </div>
+        <Link external class="btn btn-primary" href="https://github.com/coracle-social/zooid">
+          Get Started
+          <Icon icon={ArrowRight} />
+        </Link>
       </div>
-      <div class="flex flex-col items-center justify-center gap-2 py-2 text-sm opacity-70">
+      <div class="card2 bg-alt flex flex-col gap-4">
-        <span>Want to host on other servers?</span>
+        <div class="flex flex-col gap-4">
-        <Link external class="link center gap-1" href="https://relay.tools/signup">
+          <div class="flex items-center justify-between">
-          Other hosting options
+            <div class="flex items-center gap-2">
+              <img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
+              <h3 class="text-lg font-bold">Coracle Hosting</h3>
+            </div>
+            <div class="badge badge-neutral">Recommended</div>
+          </div>
+          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
+            <li>Simple setup, support included</li>
+            <li>Free and open source software — no vendor lock-in</li>
+            <li>Advanced access controls and relay policies</li>
+            <li>Full-featured admin dashboard</li>
+          </ul>
+        </div>
+        <Link external class="btn btn-neutral" href="https://hosting.coracle.social">
+          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">
+            <img
+              alt="Relay Tools"
+              src="https://relay.tools/17.svg"
+              class="-my-20 -ml-2 hidden h-48 dark:block"
+              style="filter: contrast(50%)" />
+            <img
+              alt="Relay Tools"
+              src="https://relay.tools/19.svg"
+              class="-my-20 -ml-2 h-48 dark:hidden"
+              style="filter: contrast(50%)" />
+          </div>
+          <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
+            <li>Independently run</li>
+            <li>Customizable relay policies</li>
+            <li>Simple management dashboard</li>
+            <li>Support available</li>
+          </ul>
+        </div>
+        <Link external class="btn btn-neutral" href="https://relay.tools/signup">
+          Get Started
           <Icon icon={ArrowRight} />
         </Link>
       </div>