refactor: address PR review feedback for RBAC

Co-authored-by: 1amKhush <khushvendras99@gmail.com>
Co-committed-by: 1amKhush <khushvendras99@gmail.com>

Dockerfile

@@ -26,7 +26,15 @@ FROM node:20-alpine
 
 WORKDIR /app
 
-# Copy only the built output - no source, no .env, no dev deps
-COPY --from=builder /app/build ./build
+# Install production dependencies needed by the Node server runtime
+RUN npm install -g pnpm@10.33.0
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm i --prod --frozen-lockfile --ignore-scripts
 
-CMD ["npx", "serve", "-s", "build"]
+# 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 ["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
-npx serve -s build
+pnpm run start
 ```
 
 Or, if you prefer to use a container:

package.json

@@ -5,6 +5,7 @@
   "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",
@@ -60,6 +61,7 @@
     "@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",
@@ -80,6 +82,7 @@
     "@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",
@@ -87,6 +90,7 @@
     "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,6 +62,9 @@ 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
@@ -122,6 +125,9 @@ 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,6 +149,9 @@ importers:
       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
@@ -1099,6 +1108,12 @@ 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'}
@@ -2468,6 +2483,13 @@ 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==}
 
@@ -2836,6 +2858,9 @@ packages:
   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'}
@@ -2847,6 +2872,14 @@ 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'}
@@ -3240,6 +3273,10 @@ 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==}
 
@@ -3247,6 +3284,9 @@ 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'}
@@ -3255,6 +3295,10 @@ 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==}
 
@@ -4021,6 +4065,15 @@ 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'}
@@ -4462,6 +4515,9 @@ 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==}
 
@@ -4897,6 +4953,10 @@ 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'}
@@ -5015,6 +5075,15 @@ 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==}
 
@@ -6234,6 +6303,10 @@ 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':
@@ -7648,6 +7721,29 @@ 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
@@ -8040,6 +8136,11 @@ snapshots:
 
   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
@@ -8049,6 +8150,10 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
+  entities@7.0.1: {}
+
   env-paths@2.2.1: {}
 
   env-paths@3.0.0: {}
@@ -8558,16 +8663,29 @@ 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: {}
@@ -9274,6 +9392,19 @@ 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: {}
@@ -9712,6 +9843,8 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safer-buffer@2.1.2: {}
+
   sax@1.1.4: {}
 
   sax@1.4.4: {}
@@ -10237,6 +10370,8 @@ 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:
@@ -10317,6 +10452,12 @@ 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

@@ -0,0 +1,280 @@
+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,15 +2,18 @@
 <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 name="og:url" content="{URL}" />
-    <meta name="og:type" content="website" />
-    <meta name="og:title" content="{NAME}" />
-    <meta name="og:description" content="{DESCRIPTION}" />
+    <meta property="og:url" content="{URL}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{NAME}" />
+    <meta property="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/EventMenu.svelte

@@ -3,7 +3,7 @@
   import type {Snippet} from "svelte"
   import {goto} from "$app/navigation"
   import type {TrustedEvent} from "@welshman/util"
-  import {COMMENT, ManagementMethod} from "@welshman/util"
+  import {COMMENT, ManagementMethod, getTagValue} from "@welshman/util"
   import {pubkey, repository, relaysByUrl, manageRelay} from "@welshman/app"
   import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
@@ -17,7 +17,8 @@
   import Report from "@app/components/Report.svelte"
   import EventShare from "@app/components/EventShare.svelte"
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
-  import {hasNip29, deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {deriveHasPermission, ROOM_PERMISSION_DELETE_EVENT} from "@app/core/roles"
+  import {hasNip29} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
   import {makeSpaceChatPath} from "@app/util/routes"
@@ -33,7 +34,8 @@
   const {url, noun, event, onClick, customActions}: Props = $props()
 
   const isRoot = event.kind !== COMMENT
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const h = getTagValue("h", event.tags)
+  const canDelete = deriveHasPermission(url, h, ROOM_PERMISSION_DELETE_EVENT)
 
   const report = () => pushModal(Report, {url, event})
 
@@ -107,7 +109,7 @@
         Report Content
       </Button>
     </li>
-    {#if $userIsAdmin}
+    {#if $canDelete}
       <li>
         <Button class="text-error" onclick={showAdminDelete}>
           <Icon size={4} icon={TrashBin2} />

src/app/components/ProfileDetail.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {readable} from "svelte/store"
   import {removeUndefined} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
   import {
@@ -28,7 +29,14 @@
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
-  import {pubkeyLink, deriveUserIsSpaceAdmin, deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
+  import {pubkeyLink, deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import {
+    deriveUserHasSpacePermission,
+    deriveSpaceMemberRoles,
+    ROOM_PERMISSION_ADD_MEMBER,
+    ROOM_PERMISSION_BAN_USER,
+  } from "@app/core/roles"
   import {addSpaceMembers} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -43,10 +51,16 @@
 
   const profile = deriveProfile(pubkey, removeUndefined([url]))
 
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const canBan = url ? deriveUserHasSpacePermission(url, ROOM_PERMISSION_BAN_USER) : readable(false)
+
+  const canRestore = url
+    ? deriveUserHasSpacePermission(url, ROOM_PERMISSION_ADD_MEMBER)
+    : readable(false)
 
   const bannedPubkeys = url ? deriveSpaceBannedPubkeyItems(url) : undefined
 
+  const assignedRoles = url ? deriveSpaceMemberRoles(url, pubkey) : readable([])
+
   const isBanned = $derived($bannedPubkeys?.some(item => item.pubkey === pubkey) ?? false)
 
   const back = () => history.back()
@@ -105,7 +119,7 @@
     <div class="flex flex-col gap-4">
       <div class="flex justify-between">
         <Profile showPubkey avatarSize={14} {pubkey} {url} />
-        {#if $profile || $userIsAdmin}
+        {#if $profile || $canBan || $canRestore}
           <div class="relative">
             <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
               <Icon icon={MenuDots} />
@@ -123,22 +137,22 @@
                       </Button>
                     </li>
                   {/if}
-                  {#if $userIsAdmin}
-                    {#if isBanned}
+                  {#if isBanned}
+                    {#if $canRestore}
                       <li>
                         <Button onclick={restoreMember}>
                           <Icon icon={Restart} />
                           Restore User
                         </Button>
                       </li>
-                    {:else}
-                      <li>
-                        <Button class="text-error" onclick={banMember}>
-                          <Icon icon={MinusCircle} />
-                          Ban User
-                        </Button>
-                      </li>
                     {/if}
+                  {:else if $canBan}
+                    <li>
+                      <Button class="text-error" onclick={banMember}>
+                        <Icon icon={MinusCircle} />
+                        Ban User
+                      </Button>
+                    </li>
                   {/if}
                 </ul>
               </Popover>
@@ -147,6 +161,16 @@
         {/if}
       </div>
       <ProfileInfo {pubkey} {url} />
+      {#if $assignedRoles.length > 0}
+        <div class="card2 card2-sm bg-alt col-3">
+          <h3 class="text-lg font-semibold">Roles</h3>
+          <div class="flex flex-wrap gap-2">
+            {#each $assignedRoles as role (role.name)}
+              <RoleBadge {role} class="badge-md" />
+            {/each}
+          </div>
+        </div>
+      {/if}
       <ProfileBadges {pubkey} {url} />
     </div>
   </ModalBody>

src/app/components/ReactionSummary.svelte

@@ -23,7 +23,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
   import ReportDetails from "@app/components/ReportDetails.svelte"
-  import {REACTION_KINDS, deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {deriveUserIsSpaceAdmin} from "@app/core/roles"
+  import {REACTION_KINDS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
   interface Props {

src/app/components/ReportMenu.svelte

@@ -12,7 +12,7 @@
   import Popover from "@lib/components/Popover.svelte"
   import Button from "@lib/components/Button.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
-  import {deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {deriveUserIsSpaceAdmin} from "@app/core/roles"
   import {publishDelete, canEnforceNip70} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"

src/app/components/RoleBadge.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {RoleDefinition} from "@app/core/roles"
+  import {roleColorToCSS} from "@app/core/roles"
+
+  type Props = {
+    role: RoleDefinition
+    class?: string
+  }
+
+  const {role, ...props}: Props = $props()
+
+  const style = $derived(
+    role.color === undefined
+      ? ""
+      : `color: ${roleColorToCSS(role.color)}; border-color: ${roleColorToCSS(role.color)};`,
+  )
+
+  const className = $derived(cx("badge badge-outline badge-sm", props.class))
+</script>
+
+<span class={className} {style}>
+  {role.label || role.name}
+</span>

src/app/components/RoomDetail.svelte

@@ -27,14 +27,22 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
   import RoomMembers from "@app/components/RoomMembers.svelte"
   import RoomEdit from "@app/components/RoomEdit.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
   import {
-    deriveRoom,
     deriveRoomMembers,
+    deriveRoomRoleDefinitions,
     deriveUserIsRoomAdmin,
+    deriveHasPermission,
+    getRolePermissionsLabel,
+    getRoleAccessLabel,
+    ROOM_PERMISSION_EDIT_META,
+  } from "@app/core/roles"
+  import {
+    deriveRoom,
     deriveUserRoomMembershipStatus,
     deriveUserRooms,
     deriveShouldNotify,
@@ -58,7 +66,9 @@
 
   const room = deriveRoom(url, h)
   const members = deriveRoomMembers(url, h)
+  const roleDefinitions = deriveRoomRoleDefinitions(url, h)
   const userIsAdmin = deriveUserIsRoomAdmin(url, h)
+  const canEditMetadata = deriveHasPermission(url, h, ROOM_PERMISSION_EDIT_META)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const userRooms = deriveUserRooms(url)
 
@@ -152,7 +162,7 @@
             <ul
               transition:fly
               class="bg-alt menu absolute right-0 z-popover w-48 gap-1 rounded-box p-2 shadow-md">
-              {#if $userIsAdmin}
+              {#if $canEditMetadata}
                 <li>
                   <Button onclick={startEdit}>
                     <Icon icon={Pen} />
@@ -243,17 +253,36 @@
         {/if}
       </div>
     </div>
-    {#if $members !== undefined && $members.length > 0}
+    {#if $members.length > 0}
       <div class="card2 card2-sm bg-alt flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
           <span>Members:</span>
-          <ProfileCircles pubkeys={$members} />
+          <ProfileCircles pubkeys={$members.map(member => member.pubkey)} />
         </div>
         <Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
       </div>
-    {:else if $members === undefined}
-      <div class="card2 card2-sm bg-base-200 flex items-center gap-4">
-        <span class="text-error">Member list not available from this relay</span>
+    {/if}
+    {#if $userIsAdmin && $roleDefinitions.length > 0}
+      <div class="card2 card2-sm bg-alt col-4">
+        <strong class="text-lg">Role Definitions</strong>
+        <div class="flex flex-col gap-2">
+          {#each $roleDefinitions as role (role.name)}
+            <div class="rounded-box bg-base-300 p-3 flex flex-col gap-2">
+              <div class="flex items-center gap-2">
+                <RoleBadge {role} class="badge-md" />
+                {#if role.order !== undefined}
+                  <span class="text-xs opacity-70">Order {role.order}</span>
+                {/if}
+              </div>
+              {#if role.permissions.length > 0}
+                <p class="text-xs opacity-75">Permissions: {getRolePermissionsLabel(role)}</p>
+              {/if}
+              {#if role.access.size > 0}
+                <p class="text-xs opacity-75">Access: {getRoleAccessLabel(role)}</p>
+              {/if}
+            </div>
+          {/each}
+        </div>
       </div>
     {/if}
     <div class="card2 card2-sm bg-alt col-4">

src/app/components/RoomItemMenu.svelte

@@ -13,7 +13,7 @@
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {deriveUserIsSpaceAdmin} from "@app/core/roles"
 
   type Props = {
     url: string

src/app/components/RoomMembers.svelte

@@ -16,9 +16,17 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import Profile from "@app/components/Profile.svelte"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import RoomMembersAdd from "@app/components/RoomMembersAdd.svelte"
-  import {deriveRoom, deriveRoomMembers, deriveUserIsRoomAdmin} from "@app/core/state"
+  import {
+    deriveRoomMembers,
+    deriveGroupedRoomMembers,
+    deriveHasPermission,
+    ROOM_PERMISSION_ADD_MEMBER,
+    ROOM_PERMISSION_REMOVE_MEMBER,
+  } from "@app/core/roles"
+  import {deriveRoom} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -31,7 +39,9 @@
 
   const room = deriveRoom(url, h)
   const members = deriveRoomMembers(url, h)
-  const userIsAdmin = deriveUserIsRoomAdmin(url, h)
+  const memberGroups = deriveGroupedRoomMembers(url, h)
+  const canAddMembers = deriveHasPermission(url, h, ROOM_PERMISSION_ADD_MEMBER)
+  const canRemoveMembers = deriveHasPermission(url, h, ROOM_PERMISSION_REMOVE_MEMBER)
 
   const back = () => history.back()
 
@@ -73,42 +83,58 @@
       </ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-2">
-      {#if $members === undefined}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-error">Member list not available from this relay</span>
-        </div>
-      {:else if $members.length === 0}
+      {#if $members.length === 0}
         <div class="card2 bg-base-200 p-4">
           <span class="text-base-content/70">No members yet</span>
         </div>
       {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              <div class="relative">
-                <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
-                  <Icon icon={MenuDots} />
-                </Button>
-                {#if menuPubkey === pubkey}
-                  <Popover hideOnClick onClose={closeMenu}>
-                    <ul
-                      transition:fly
-                      class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                      <li>
-                        <Button class="text-error" onclick={() => removeMember(pubkey)}>
-                          <Icon icon={MinusCircle} />
-                          Remove Member
-                        </Button>
-                      </li>
-                    </ul>
-                  </Popover>
+        {#each $memberGroups as group (group.key)}
+          <div class="pt-2 pb-1">
+            {#if group.role}
+              <RoleBadge role={group.role} class="badge-md" />
+            {:else}
+              <span class="text-sm font-semibold opacity-75">Members</span>
+            {/if}
+          </div>
+          {#each group.members as member (member.pubkey)}
+            <div class="card2 bg-alt relative">
+              <div class="flex items-center justify-between gap-2">
+                <div class="min-w-0 flex-1">
+                  <Profile pubkey={member.pubkey} {url} />
+                  {#if member.roles.length > 0}
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each member.roles as role (role.name)}
+                        <RoleBadge {role} />
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+                {#if $canRemoveMembers}
+                  <div class="relative">
+                    <Button
+                      class="btn btn-circle btn-ghost btn-sm"
+                      onclick={() => toggleMenu(member.pubkey)}>
+                      <Icon icon={MenuDots} />
+                    </Button>
+                    {#if menuPubkey === member.pubkey}
+                      <Popover hideOnClick onClose={closeMenu}>
+                        <ul
+                          transition:fly
+                          class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                          <li>
+                            <Button class="text-error" onclick={() => removeMember(member.pubkey)}>
+                              <Icon icon={MinusCircle} />
+                              Remove Member
+                            </Button>
+                          </li>
+                        </ul>
+                      </Popover>
+                    {/if}
+                  </div>
                 {/if}
               </div>
             </div>
-          </div>
+          {/each}
         {/each}
       {/if}
     </div>
@@ -118,7 +144,7 @@
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    {#if $userIsAdmin}
+    {#if $canAddMembers}
       <Button class="btn btn-primary" onclick={addMember}>
         <Icon icon={AddCircle} />
         Add members

src/app/components/SpaceDetail.svelte

@@ -18,7 +18,7 @@
   import SpaceRelayStatus from "@app/components/SpaceRelayStatus.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import ProfileLatest from "@app/components/ProfileLatest.svelte"
-  import {deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {deriveUserHasSpacePermission, ROOM_PERMISSION_EDIT_META} from "@app/core/roles"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
@@ -28,7 +28,7 @@
   const {url}: Props = $props()
   const relay = deriveRelay(url)
   const owner = $derived($relay?.pubkey)
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const canEdit = deriveUserHasSpacePermission(url, ROOM_PERMISSION_EDIT_META)
 
   const back = () => history.back()
 
@@ -54,7 +54,7 @@
           <p class="ellipsize text-sm opacity-75">{displayRelayUrl(url)}</p>
         </div>
       </div>
-      {#if $userIsAdmin}
+      {#if $canEdit}
         <Button class="btn btn-primary" onclick={startEdit}>
           <Icon icon={Pen} />
           Edit

src/app/components/SpaceMembers.svelte

@@ -17,16 +17,20 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import RoleBadge from "@app/components/RoleBadge.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import Profile from "@app/components/Profile.svelte"
   import SpaceMembersAdd from "@app/components/SpaceMembersAdd.svelte"
   import SpaceMembersBanned from "@app/components/SpaceMembersBanned.svelte"
+  import {deriveSpaceMembers, deriveSpaceBannedPubkeyItems} from "@app/core/state"
   import {
-    deriveSpaceMembers,
-    deriveSpaceBannedPubkeyItems,
-    deriveUserIsSpaceAdmin,
+    deriveGroupedSpaceMembers,
     deriveSupportedMethods,
-  } from "@app/core/state"
+    deriveUserHasSpacePermission,
+    ROOM_PERMISSION_ADD_MEMBER,
+    ROOM_PERMISSION_REMOVE_MEMBER,
+    ROOM_PERMISSION_BAN_USER,
+  } from "@app/core/roles"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -38,10 +42,17 @@
 
   const members = deriveSpaceMembers(url)
   const bans = deriveSpaceBannedPubkeyItems(url)
-  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+  const memberGroups = deriveGroupedSpaceMembers(url, members)
+  const canAddMember = deriveUserHasSpacePermission(url, ROOM_PERMISSION_ADD_MEMBER)
+  const canBanByPermission = deriveUserHasSpacePermission(url, ROOM_PERMISSION_BAN_USER)
+  const canUnallowByPermission = deriveUserHasSpacePermission(url, ROOM_PERMISSION_REMOVE_MEMBER)
   const supportedMethods = deriveSupportedMethods(url)
-  const canBan = $derived($supportedMethods.includes(ManagementMethod.BanPubkey))
-  const canUnallow = $derived($supportedMethods.includes(ManagementMethod.UnallowPubkey))
+  const canBan = $derived(
+    $canBanByPermission && $supportedMethods.includes(ManagementMethod.BanPubkey),
+  )
+  const canUnallow = $derived(
+    $canUnallowByPermission && $supportedMethods.includes(ManagementMethod.UnallowPubkey),
+  )
 
   const back = () => history.back()
 
@@ -104,7 +115,7 @@
       <ModalTitle>Members</ModalTitle>
       <ModalSubtitle>of <RelayName {url} class="text-primary" /></ModalSubtitle>
     </ModalHeader>
-    {#if $userIsAdmin}
+    {#if canBan || canUnallow}
       {#if $bans.length > 0}
         <Button class="btn btn-neutral" onclick={showBannedPubkeyItems}>
           Banned users ({$bans.length})
@@ -112,56 +123,68 @@
       {/if}
     {/if}
     <div class="flex flex-col gap-2">
-      {#if $members === undefined}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-error">Member list not available from this space</span>
-        </div>
-      {:else if $members.length === 0}
+      {#if $members.length === 0}
         <div class="card2 bg-base-200 p-4">
           <span class="text-base-content/70">No members yet</span>
         </div>
       {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 card2-sm bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              {#if canBan || canUnallow}
-                <div class="relative">
-                  <Button
-                    class="btn btn-circle btn-ghost btn-sm"
-                    onclick={() => toggleMenu(pubkey)}>
-                    <Icon icon={MenuDots} />
-                  </Button>
-                  {#if menuPubkey === pubkey}
-                    <Popover hideOnClick onClose={closeMenu}>
-                      <ul
-                        transition:fly
-                        class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                        {#if canUnallow}
-                          <li>
-                            <Button onclick={() => unallowMember(pubkey)}>
-                              <Icon icon={UserMinus} />
-                              Remove User
-                            </Button>
-                          </li>
-                        {/if}
-                        {#if canBan}
-                          <li>
-                            <Button class="text-error" onclick={() => banMember(pubkey)}>
-                              <Icon icon={MinusCircle} />
-                              Ban User
-                            </Button>
-                          </li>
-                        {/if}
-                      </ul>
-                    </Popover>
+        {#each $memberGroups as group (group.key)}
+          <div class="pt-2 pb-1">
+            {#if group.role}
+              <RoleBadge role={group.role} class="badge-md" />
+            {:else}
+              <span class="text-sm font-semibold opacity-75">Members</span>
+            {/if}
+          </div>
+          {#each group.members as member (member.pubkey)}
+            <div class="card2 card2-sm bg-alt relative">
+              <div class="flex items-center justify-between gap-2">
+                <div class="min-w-0 flex-1">
+                  <Profile pubkey={member.pubkey} {url} />
+                  {#if member.roles.length > 0}
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each member.roles as role (role.name)}
+                        <RoleBadge {role} />
+                      {/each}
+                    </div>
                   {/if}
                 </div>
-              {/if}
+                {#if canBan || canUnallow}
+                  <div class="relative">
+                    <Button
+                      class="btn btn-circle btn-ghost btn-sm"
+                      onclick={() => toggleMenu(member.pubkey)}>
+                      <Icon icon={MenuDots} />
+                    </Button>
+                    {#if menuPubkey === member.pubkey}
+                      <Popover hideOnClick onClose={closeMenu}>
+                        <ul
+                          transition:fly
+                          class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                          {#if canUnallow}
+                            <li>
+                              <Button onclick={() => unallowMember(member.pubkey)}>
+                                <Icon icon={UserMinus} />
+                                Remove User
+                              </Button>
+                            </li>
+                          {/if}
+                          {#if canBan}
+                            <li>
+                              <Button class="text-error" onclick={() => banMember(member.pubkey)}>
+                                <Icon icon={MinusCircle} />
+                                Ban User
+                              </Button>
+                            </li>
+                          {/if}
+                        </ul>
+                      </Popover>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
             </div>
-          </div>
+          {/each}
         {/each}
       {/if}
     </div>
@@ -171,7 +194,7 @@
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    {#if $userIsAdmin}
+    {#if $canAddMember}
       <Button class="btn btn-primary" onclick={addMember}>
         <Icon icon={AddCircle} />
         Add members

src/app/components/SpaceMembersBanned.svelte

@@ -16,7 +16,8 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
-  import {deriveSpaceBannedPubkeyItems, deriveSupportedMethods} from "@app/core/state"
+  import {deriveSupportedMethods} from "@app/core/roles"
+  import {deriveSpaceBannedPubkeyItems} from "@app/core/state"
   import {addSpaceMembers} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
 

src/app/components/SpaceMenu.svelte

@@ -40,6 +40,7 @@
   import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
+  import {deriveUserIsSpaceAdmin} from "@app/core/roles"
   import {
     ENABLE_ZAPS,
     CONTENT_KINDS,
@@ -50,7 +51,6 @@
     userSpaceUrls,
     hasNip29,
     deriveUserCanCreateRoom,
-    deriveUserIsSpaceAdmin,
     deriveEventsForUrl,
     deriveSpaceActionItems,
     notificationSettings,

src/app/core/roles.ts

@@ -0,0 +1,576 @@
+import {derived, readable, type Readable} from "svelte/store"
+import {first, memoize, removeUndefined, simpleCache, sortBy, uniq} from "@welshman/lib"
+import {pubkey, manageRelay} from "@welshman/app"
+import {deriveEventsForUrl} from "@app/core/state"
+import {
+  ManagementMethod,
+  ROOM_ADD_MEMBER,
+  ROOM_REMOVE_MEMBER,
+  ROOM_EDIT_META,
+  ROOM_DELETE_EVENT,
+  ROOM_ADMINS,
+  ROOM_MEMBERS,
+  getTagValue,
+  isRelayUrl,
+} from "@welshman/util"
+import type {TrustedEvent} from "@welshman/util"
+
+export const ROOM_ROLES = 39003
+
+export const ROOM_PERMISSION_ADD_MEMBER = ROOM_ADD_MEMBER
+export const ROOM_PERMISSION_REMOVE_MEMBER = ROOM_REMOVE_MEMBER
+export const ROOM_PERMISSION_EDIT_META = ROOM_EDIT_META
+export const ROOM_PERMISSION_DELETE_EVENT = ROOM_DELETE_EVENT
+export const ROOM_PERMISSION_BAN_USER = 9009
+
+const ALL_ROOM_PERMISSIONS = [
+  ROOM_PERMISSION_ADD_MEMBER,
+  ROOM_PERMISSION_REMOVE_MEMBER,
+  ROOM_PERMISSION_EDIT_META,
+  ROOM_PERMISSION_DELETE_EVENT,
+  ROOM_PERMISSION_BAN_USER,
+]
+
+export const deriveSupportedMethods = simpleCache(([url]: [string]) =>
+  readable<ManagementMethod[]>([], set => {
+    manageRelay(url, {
+      method: ManagementMethod.SupportedMethods,
+      params: [],
+    }).then(({result = []}) => set(result))
+  }),
+)
+
+export type RoleAccess = "read" | "write" | "join"
+
+export type RoleDefinition = {
+  name: string
+  label?: string
+  color?: number
+  order?: number
+  permissions: number[]
+  access: Set<RoleAccess>
+}
+
+export type RoomRoles = {
+  url: string
+  h: string
+  roles: Map<string, RoleDefinition>
+}
+
+export type RoomMember = {
+  pubkey: string
+  roles: string[]
+}
+
+type MemberRoleInfo = {
+  pubkey: string
+  roles: RoleDefinition[]
+  primaryRole?: RoleDefinition
+}
+
+type MemberRoleGroup = {
+  key: string
+  role?: RoleDefinition
+  members: MemberRoleInfo[]
+}
+
+type ParsedRoleState = {
+  roles: Map<string, RoleDefinition>
+  hasPermissionTags: boolean
+}
+
+type SpaceRoleState = {
+  hasPermissionTags: boolean
+  userPermissions: Set<number>
+  memberRoles: Map<string, RoleDefinition[]>
+}
+
+const makeRoleDefinition = (name: string): RoleDefinition => ({
+  name,
+  permissions: [],
+  access: new Set<RoleAccess>(),
+})
+
+const ensureRole = (roles: Map<string, RoleDefinition>, roleName: string) => {
+  if (!roles.has(roleName)) {
+    roles.set(roleName, makeRoleDefinition(roleName))
+  }
+
+  return roles.get(roleName)!
+}
+
+const asNumber = (value: string | undefined) => {
+  const n = parseInt(value || "")
+
+  return isNaN(n) ? undefined : n
+}
+
+const asAccess = (value: string | undefined): RoleAccess | undefined => {
+  if (value === "read" || value === "write" || value === "join") {
+    return value
+  }
+}
+
+const parseRoleState = (event?: TrustedEvent): ParsedRoleState => {
+  const roles = new Map<string, RoleDefinition>()
+  let hasPermissionTags = false
+  let activeRoleName: string | undefined
+
+  for (const tag of event?.tags || []) {
+    const [name, firstValue, secondValue] = tag
+
+    if (name === "role") {
+      if (firstValue) {
+        activeRoleName = firstValue
+        ensureRole(roles, firstValue)
+      }
+
+      continue
+    }
+
+    if (
+      !["role-label", "role-color", "role-order", "role-permission", "role-access"].includes(name)
+    ) {
+      continue
+    }
+
+    const hasExplicitRole = Boolean(firstValue && secondValue !== undefined)
+    const roleName = hasExplicitRole ? firstValue : activeRoleName
+    const value = hasExplicitRole ? secondValue : firstValue
+
+    if (!roleName || !value) {
+      continue
+    }
+
+    const role = ensureRole(roles, roleName)
+
+    if (name === "role-label") {
+      role.label = value
+      continue
+    }
+
+    if (name === "role-color") {
+      const color = asNumber(value)
+
+      if (color !== undefined && color >= 0 && color <= 255) {
+        role.color = color
+      }
+
+      continue
+    }
+
+    if (name === "role-order") {
+      const order = asNumber(value)
+
+      if (order !== undefined) {
+        role.order = order
+      }
+
+      continue
+    }
+
+    if (name === "role-permission") {
+      const permission = asNumber(value)
+
+      hasPermissionTags = true
+
+      if (permission !== undefined && !role.permissions.includes(permission)) {
+        role.permissions.push(permission)
+      }
+
+      continue
+    }
+
+    if (name === "role-access") {
+      const access = asAccess(value)
+
+      if (access) {
+        role.access.add(access)
+      }
+    }
+  }
+
+  return {roles, hasPermissionTags}
+}
+
+const getRoleTokens = (tag: string[]) => {
+  const roles: string[] = []
+
+  for (const value of tag.slice(2)) {
+    if (!value || isRelayUrl(value)) {
+      continue
+    }
+
+    roles.push(value)
+  }
+
+  return uniq(roles)
+}
+
+export const parseRoomMembers = (tags: string[][]) => {
+  const byPubkey = new Map<string, Set<string>>()
+
+  for (const tag of tags) {
+    if (tag[0] !== "p" || !tag[1]) {
+      continue
+    }
+
+    if (!byPubkey.has(tag[1])) {
+      byPubkey.set(tag[1], new Set<string>())
+    }
+
+    const roles = byPubkey.get(tag[1])!
+
+    for (const role of getRoleTokens(tag)) {
+      roles.add(role)
+    }
+  }
+
+  return Array.from(byPubkey.entries()).map(([pubkey, roles]) => ({
+    pubkey,
+    roles: Array.from(roles),
+  }))
+}
+
+export const deriveRoomMembers = (url: string, h: string) =>
+  derived(deriveEventsForUrl(url, [{kinds: [ROOM_MEMBERS], "#d": [h]}]), ([event]) =>
+    parseRoomMembers(event?.tags || []),
+  )
+
+export const deriveRoomAdmins = (url: string, h: string) =>
+  derived(deriveEventsForUrl(url, [{kinds: [ROOM_ADMINS], "#d": [h]}]), ([event]) =>
+    parseRoomMembers(event?.tags || []),
+  )
+
+const deriveRoomRoleState = simpleCache(([url, h]: [string, string]) =>
+  derived(deriveEventsForUrl(url, [{kinds: [ROOM_ROLES], "#d": [h]}]), ([event]) =>
+    parseRoleState(event),
+  ),
+)
+
+export const deriveRoomRoles = (url: string, h: string) =>
+  derived(deriveRoomRoleState(url, h), $state => ({
+    url,
+    h,
+    roles: $state.roles,
+  }))
+
+const getMember = (members: RoomMember[], targetPubkey: string) =>
+  members.find(member => member.pubkey === targetPubkey)
+
+const getResolvedRoles = (rolesByName: Map<string, RoleDefinition>, roleNames: string[]) =>
+  removeUndefined(roleNames.map(name => rolesByName.get(name)))
+
+export const sortRolesDesc = <T extends {order?: number}>(items: T[]) =>
+  sortBy(item => -(item.order ?? -Infinity), items)
+
+export const getRolePermissionsLabel = (role: RoleDefinition) => role.permissions.join(", ")
+
+export const getRoleAccessLabel = (role: RoleDefinition) => Array.from(role.access).join(", ")
+
+const toMemberRoleInfo = (pubkey: string, roles: RoleDefinition[]): MemberRoleInfo => {
+  const sortedRoles = sortRolesDesc(roles)
+
+  return {
+    pubkey,
+    roles: sortedRoles,
+    primaryRole: first(sortedRoles),
+  }
+}
+
+const sortMemberRoleInfos = (members: MemberRoleInfo[]) =>
+  sortBy(member => -(member.primaryRole?.order ?? -Infinity), members)
+
+const groupMemberRoleInfos = (members: MemberRoleInfo[]) => {
+  const byRole = new Map<string, MemberRoleGroup>()
+  const ungrouped: MemberRoleGroup = {
+    key: "members",
+    members: [],
+  }
+
+  for (const member of sortMemberRoleInfos(members)) {
+    if (!member.primaryRole) {
+      ungrouped.members.push(member)
+      continue
+    }
+
+    const key = member.primaryRole.name
+
+    if (!byRole.has(key)) {
+      byRole.set(key, {
+        key,
+        role: member.primaryRole,
+        members: [],
+      })
+    }
+
+    byRole.get(key)!.members.push(member)
+  }
+
+  const groups = sortBy(group => -(group.role?.order ?? -Infinity), Array.from(byRole.values()))
+
+  if (ungrouped.members.length > 0) {
+    groups.push(ungrouped)
+  }
+
+  return groups
+}
+
+const deriveRoomRoleAssignments = simpleCache(([url, h]: [string, string]) =>
+  derived(
+    [deriveRoomRoleState(url, h), deriveRoomMembers(url, h), deriveRoomAdmins(url, h)],
+    ([$rolesState, $members, $admins]) => ({
+      rolesState: $rolesState,
+      members: $members,
+      admins: $admins,
+    }),
+  ),
+)
+
+export const deriveUserRoles = (url: string, h: string, targetPubkey: string) =>
+  derived(deriveRoomRoleAssignments(url, h), ({members, admins}) => {
+    const member = getMember(members, targetPubkey)
+    const admin = getMember(admins, targetPubkey)
+
+    return uniq([...(member?.roles || []), ...(admin?.roles || [])])
+  })
+
+export const deriveUserPermissions = (url: string, h: string) =>
+  derived(
+    [pubkey, deriveRoomRoleAssignments(url, h)],
+    ([$pubkey, {rolesState, members, admins}]) => {
+      const permissions = new Set<number>()
+
+      if (!$pubkey) {
+        return permissions
+      }
+
+      const member = getMember(members, $pubkey)
+      const admin = getMember(admins, $pubkey)
+      const assignedRoleNames = uniq([...(member?.roles || []), ...(admin?.roles || [])])
+
+      if (!rolesState.hasPermissionTags) {
+        if (admin) {
+          for (const permission of ALL_ROOM_PERMISSIONS) {
+            permissions.add(permission)
+          }
+        }
+
+        return permissions
+      }
+
+      for (const role of getResolvedRoles(rolesState.roles, assignedRoleNames)) {
+        for (const permission of role.permissions) {
+          permissions.add(permission)
+        }
+      }
+
+      return permissions
+    },
+  )
+
+const mergeRoleDefinitions = (left: RoleDefinition[], right: RoleDefinition[]) => {
+  const merged = new Map<string, RoleDefinition>()
+
+  for (const role of [...left, ...right]) {
+    if (!merged.has(role.name)) {
+      merged.set(role.name, {
+        name: role.name,
+        label: role.label,
+        color: role.color,
+        order: role.order,
+        permissions: [...role.permissions],
+        access: new Set(role.access),
+      })
+
+      continue
+    }
+
+    const existing = merged.get(role.name)!
+
+    if (existing.label === undefined) {
+      existing.label = role.label
+    }
+
+    if (existing.color === undefined) {
+      existing.color = role.color
+    }
+
+    if (existing.order === undefined) {
+      existing.order = role.order
+    }
+
+    existing.permissions = uniq([...existing.permissions, ...role.permissions])
+
+    for (const access of role.access) {
+      existing.access.add(access)
+    }
+  }
+
+  return sortBy(role => role.name, Array.from(merged.values()))
+}
+
+const deriveSpaceRoleState = simpleCache(([url]: [string]) =>
+  derived(
+    [pubkey, deriveEventsForUrl(url, [{kinds: [ROOM_ROLES, ROOM_MEMBERS, ROOM_ADMINS]}])],
+    ([$pubkey, $events]): SpaceRoleState => {
+      const userPermissions = new Set<number>()
+      const memberRoles = new Map<string, RoleDefinition[]>()
+      const rolesByH = new Map<string, ReturnType<typeof parseRoleState>>()
+      let hasPermissionTags = false
+
+      for (const event of $events) {
+        if (event.kind === ROOM_ROLES) {
+          const h = getTagValue("d", event.tags)
+          if (h) {
+            const parsed = parseRoleState(event)
+            rolesByH.set(h, parsed)
+            if (parsed.hasPermissionTags) {
+              hasPermissionTags = true
+            }
+          }
+        }
+      }
+
+      for (const event of $events) {
+        if (event.kind === ROOM_MEMBERS || event.kind === ROOM_ADMINS) {
+          const h = getTagValue("d", event.tags)
+          if (!h) continue
+
+          const rolesState = rolesByH.get(h)
+          if (!rolesState) continue
+
+          const members = parseRoomMembers(event.tags)
+          for (const member of members) {
+            const resolvedRoles = getResolvedRoles(rolesState.roles, member.roles)
+
+            if (resolvedRoles.length === 0) {
+              continue
+            }
+
+            memberRoles.set(
+              member.pubkey,
+              mergeRoleDefinitions(memberRoles.get(member.pubkey) || [], resolvedRoles),
+            )
+
+            if ($pubkey === member.pubkey && rolesState.hasPermissionTags) {
+              for (const role of resolvedRoles) {
+                for (const permission of role.permissions) {
+                  userPermissions.add(permission)
+                }
+              }
+            }
+          }
+        }
+      }
+
+      return {
+        hasPermissionTags,
+        userPermissions,
+        memberRoles,
+      }
+    },
+  ),
+)
+
+export const deriveUserIsSpaceAdmin = memoize((url?: string) => {
+  if (!url) {
+    return readable(false)
+  }
+
+  return derived(
+    [deriveSpaceRoleState(url), deriveSupportedMethods(url)],
+    ([$spaceRoleState, $supportedMethods]) => {
+      if ($spaceRoleState.hasPermissionTags) {
+        return $spaceRoleState.userPermissions.size > 0
+      }
+
+      return $supportedMethods.length > 0
+    },
+  )
+})
+
+export const deriveUserSpacePermissions = (url: string) =>
+  derived(
+    [deriveSpaceRoleState(url), deriveUserIsSpaceAdmin(url)],
+    ([$spaceRoleState, $isAdmin]) => {
+      const permissions = new Set<number>()
+
+      if ($spaceRoleState.hasPermissionTags) {
+        for (const permission of $spaceRoleState.userPermissions) {
+          permissions.add(permission)
+        }
+
+        return permissions
+      }
+
+      if ($isAdmin) {
+        for (const permission of ALL_ROOM_PERMISSIONS) {
+          permissions.add(permission)
+        }
+      }
+
+      return permissions
+    },
+  )
+
+export const deriveUserHasSpacePermission = (url: string, kind: number) =>
+  derived(deriveUserSpacePermissions(url), $permissions => $permissions.has(kind))
+
+export const deriveUserIsRoomAdmin = (url: string, h: string) =>
+  derived(
+    [deriveUserPermissions(url, h), deriveUserIsSpaceAdmin(url)],
+    ([$permissions, $isSpaceAdmin]) => $isSpaceAdmin || $permissions.size > 0,
+  )
+
+export const deriveHasPermission = (url: string, h: string | undefined, kind: number) => {
+  if (!h) return deriveUserIsSpaceAdmin(url)
+
+  return derived(
+    [deriveUserPermissions(url, h), deriveUserIsSpaceAdmin(url)],
+    ([$permissions, $isSpaceAdmin]) => $isSpaceAdmin || $permissions.has(kind),
+  )
+}
+
+export const deriveRoomRoleDefinitions = (url: string, h: string) =>
+  derived(deriveRoomRoles(url, h), $roomRoles =>
+    sortRolesDesc(Array.from($roomRoles.roles.values())),
+  )
+
+const deriveRoomMemberRoleInfo = (url: string, h: string) =>
+  derived([deriveRoomMembers(url, h), deriveRoomRoles(url, h)], ([$members, $roomRoles]) =>
+    sortMemberRoleInfos(
+      $members.map(member =>
+        toMemberRoleInfo(member.pubkey, getResolvedRoles($roomRoles.roles, member.roles)),
+      ),
+    ),
+  )
+
+export const deriveGroupedRoomMembers = (url: string, h: string) =>
+  derived(deriveRoomMemberRoleInfo(url, h), $members => groupMemberRoleInfos($members))
+
+const deriveSpaceMemberRoleInfo = (url: string) =>
+  derived(deriveSpaceRoleState(url), $spaceRoleState => {
+    const roleInfoByPubkey = new Map<string, MemberRoleInfo>()
+
+    for (const [pubkey, roles] of $spaceRoleState.memberRoles.entries()) {
+      roleInfoByPubkey.set(pubkey, toMemberRoleInfo(pubkey, roles))
+    }
+
+    return roleInfoByPubkey
+  })
+
+export const deriveSpaceMemberRoles = (url: string, targetPubkey: string) =>
+  derived(
+    deriveSpaceMemberRoleInfo(url),
+    $spaceMemberRoles => $spaceMemberRoles.get(targetPubkey)?.roles || [],
+  )
+
+export const deriveGroupedSpaceMembers = (url: string, members: Readable<string[]>) =>
+  derived([members, deriveSpaceMemberRoleInfo(url)], ([$members, $spaceMemberRoles]) =>
+    groupMemberRoleInfos(
+      $members.map(pubkey => $spaceMemberRoles.get(pubkey) || toMemberRoleInfo(pubkey, [])),
+    ),
+  )
+
+export const roleColorToCSS = (hue: number) => `oklch(0.75 0.15 ${(hue * 360) / 255})`

src/app/core/state.ts

@@ -20,7 +20,6 @@ import {
   partition,
   shuffle,
   parseJson,
-  memoize,
   addToMapKey,
   identity,
   always,
@@ -84,7 +83,6 @@ import {
   ROOM_JOIN,
   ROOM_LEAVE,
   ROOM_MEMBERS,
-  ROOM_ADMINS,
   ROOM_META,
   ROOM_DELETE,
   ROOM_REMOVE_MEMBER,
@@ -152,6 +150,18 @@ import {
 } from "@welshman/app"
 import {checkRelayHasLivekit} from "$lib/livekit"
 import {readFeed} from "@lib/feeds"
+import {
+  parseRoomMembers,
+  deriveRoomMembers,
+  deriveUserIsSpaceAdmin,
+  deriveUserIsRoomAdmin,
+  deriveUserSpacePermissions,
+  ROOM_PERMISSION_ADD_MEMBER,
+  ROOM_PERMISSION_REMOVE_MEMBER,
+  ROOM_PERMISSION_DELETE_EVENT,
+  ROOM_PERMISSION_BAN_USER,
+} from "@app/core/roles"
+import type {RoomMember} from "@app/core/roles"
 
 export const fromCsv = (s: string) => (s || "").split(",").filter(identity)
 
@@ -813,14 +823,6 @@ export const deriveSpaceMembers = (url: string) =>
     uniq(getTagValues("member", event?.tags ?? [])),
   )
 
-export const deriveRoomMembers = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_MEMBERS], "#d": [h]}]
-
-  return derived(deriveEventsForUrl(url, filters), ([event]) =>
-    uniq(getPubkeyTagValues(event?.tags ?? [])),
-  )
-}
-
 export type BannedPubkeyItem = {
   pubkey: string
   reason: string
@@ -839,20 +841,6 @@ export const deriveSpaceBannedPubkeyItems = (url: string) => {
   return store
 }
 
-export const deriveRoomAdmins = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_ADMINS], "#d": [h]}]
-
-  return derived(deriveEventsForUrl(url, filters), $events => {
-    const adminsEvent = first($events)
-
-    if (adminsEvent) {
-      return getPubkeyTagValues(adminsEvent.tags)
-    }
-
-    return []
-  })
-}
-
 const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
   const members = new Set<string>()
 
@@ -860,8 +848,8 @@ const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
     if (event.kind === ROOM_MEMBERS && getTagValue("d", event.tags) === h) {
       members.clear()
 
-      for (const pubkey of uniq(getPubkeyTagValues(event.tags))) {
-        members.add(pubkey)
+      for (const member of parseRoomMembers(event.tags)) {
+        members.add(member.pubkey)
       }
 
       continue
@@ -894,16 +882,31 @@ const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
 
 export const deriveSpaceActionItems = (url: string) =>
   derived(
-    deriveEventsForUrl(url, [
-      {
-        kinds: [REPORT, ROOM_JOIN, ROOM_LEAVE, ROOM_MEMBERS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
-      },
-    ]),
-    $events => {
+    [
+      deriveEventsForUrl(url, [
+        {
+          kinds: [REPORT, ROOM_JOIN, ROOM_LEAVE, ROOM_MEMBERS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
+        },
+      ]),
+      deriveUserIsSpaceAdmin(url),
+      deriveUserSpacePermissions(url),
+    ],
+    ([$events, $isAdmin, $permissions]) => {
+      if (!$isAdmin) {
+        return []
+      }
+
       const getRoomId = (e: TrustedEvent) =>
         getTagValue(e.kind === ROOM_MEMBERS ? "d" : "h", e.tags)
       const reports = $events.filter(e => e.kind === REPORT)
       const pendingJoins: TrustedEvent[] = []
+      const canReviewReports =
+        $permissions.has(ROOM_PERMISSION_DELETE_EVENT) || $permissions.size === 0
+      const canReviewJoins =
+        $permissions.has(ROOM_PERMISSION_ADD_MEMBER) ||
+        $permissions.has(ROOM_PERMISSION_REMOVE_MEMBER) ||
+        $permissions.has(ROOM_PERMISSION_BAN_USER) ||
+        $permissions.size === 0
 
       // Room-level join requests — most recent per pubkey+h
       for (const [h, roomEvents] of groupBy(getRoomId, $events)) {
@@ -960,7 +963,10 @@ export const deriveSpaceActionItems = (url: string) =>
         )
       }
 
-      return sortEventsDesc([...reports, ...pendingJoins])
+      return sortEventsDesc([
+        ...(canReviewReports ? reports : []),
+        ...(canReviewJoins ? pendingJoins : []),
+      ])
     },
   )
 
@@ -972,18 +978,6 @@ export enum MembershipStatus {
   Granted,
 }
 
-export const deriveUserIsSpaceAdmin = memoize((url?: string) => {
-  const store = writable(false)
-
-  if (url) {
-    manageRelay(url, {method: ManagementMethod.SupportedMethods, params: []}).then(res =>
-      store.set(Boolean(res.result?.length)),
-    )
-  }
-
-  return store
-})
-
 export const deriveUserSpaceMembershipStatus = (url: string) => {
   // Fetch member list and user add/remove events directly in this derivation.
   const memberListFilters: Filter[] = [{kinds: [RELAY_MEMBERS]}]
@@ -1046,12 +1040,6 @@ export const deriveUserSpaceMembershipStatus = (url: string) => {
   )
 }
 
-export const deriveUserIsRoomAdmin = (url: string, h: string) =>
-  derived(
-    [pubkey, deriveRoomAdmins(url, h), deriveUserIsSpaceAdmin(url)],
-    ([$pubkey, $admins, $isSpaceAdmin]) => $isSpaceAdmin || $admins.includes($pubkey!),
-  )
-
 export const deriveUserRoomMembershipStatus = (url: string, h: string) => {
   // Fetch the room member list and the current user's add/remove events.
   const userEventFilters: Filter[] = [{kinds: [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]}]
@@ -1075,7 +1063,7 @@ export const deriveUserRoomMembershipStatus = (url: string, h: string) => {
 
       if ($memberList) {
         // Member list exists - check if user is in it.
-        isMember = $memberList.includes($pubkey!)
+        isMember = $memberList.some((member: RoomMember) => member.pubkey === $pubkey)
       } else {
         // No member list available - replay the user's add/remove history.
         for (const event of sortEventsAsc($userAddRemoveEvents)) {
@@ -1312,15 +1300,6 @@ export const deriveSocketStatus = (url: string) =>
     }),
   )
 
-export const deriveSupportedMethods = simpleCache(([url]: [string]) => {
-  return readable<ManagementMethod[]>([], set => {
-    manageRelay(url, {
-      method: ManagementMethod.SupportedMethods,
-      params: [],
-    }).then(({result = []}) => set(result))
-  })
-})
-
 export const deriveHasLivekit = simpleCache(([url]: [string]) =>
   readable<boolean | undefined>(undefined, set => {
     checkRelayHasLivekit(url).then(has => set(has))

src/app/core/sync.ts

@@ -55,6 +55,7 @@ import {
   makeCommentFilter,
   loadFeedsForPubkey,
 } from "@app/core/state"
+import {ROOM_ROLES} from "@app/core/roles"
 import {hasBlossomSupport} from "@app/core/commands"
 import {LIVEKIT_PARTICIPANTS} from "@app/call/voice"
 
@@ -271,7 +272,7 @@ const syncSpace = (url: string) => {
   const since = ago(WEEK)
   const controller = new AbortController()
   const relayKinds = [RELAY_MEMBERS]
-  const roomMetaKinds = [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS, LIVEKIT_PARTICIPANTS]
+  const roomMetaKinds = [ROOM_META, ROOM_ROLES, ROOM_ADMINS, ROOM_MEMBERS, LIVEKIT_PARTICIPANTS]
   const roomDeleteKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE]
 
   pullAndListen({

src/app/util/storage.ts

@@ -47,6 +47,7 @@ import {
 } from "@welshman/app"
 import type {Unsubscriber} from "svelte/store"
 import {db} from "@app/core/storage"
+import {ROOM_ROLES} from "@app/core/roles"
 
 // Shared interval for all non-critical store flushes, so they batch on the same cadence
 const FLUSH_INTERVAL = 3000
@@ -65,6 +66,7 @@ const kinds = {
   alert: [ALERT_STATUS, ALERT_EMAIL, ALERT_WEB, ALERT_IOS, ALERT_ANDROID],
   space: [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER, RELAY_MEMBERS, RELAY_JOIN, RELAY_LEAVE],
   room: [
+    ROOM_ROLES,
     ROOM_META,
     ROOM_DELETE,
     ROOM_ADMINS,

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",
+      "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",
     ),
   )
 </script>

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Server from "@assets/icons/server.svg?dataurl"
   import CloudCheck from "@assets/icons/cloud-check.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"