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

Dockerfile

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

README.md

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

package.json

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

server.js

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

src/app.css

@@ -50,7 +50,6 @@
   --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
   --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
-  --video-call-panel-bg: #181e24;
 }
 
 [data-theme] {
@@ -395,35 +394,6 @@ progress[value]::-webkit-progress-value {
   @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
 }
 
-.cw-video-call-content {
-  @apply w-full md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-/* Voice: desktop split — plain CSS so / in calc is not parsed as Tailwind slash syntax */
-.cw-split-video {
-  width: 100%;
-}
-
-.cw-split-chat {
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .cw-split-video {
-    left: 18.5rem;
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-
-  .cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
 .cw-full {
   @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
 }
@@ -460,19 +430,6 @@ body.keyboard-open .hide-on-keyboard {
   @apply min-w-0;
 }
 
-.chat__compose-zone.cw-video-call-content {
-  @apply md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-@media (min-width: 768px) {
-  .chat__compose-zone.cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }

src/app/components/VideoCallContent.svelte

@@ -1,257 +0,0 @@
-<script lang="ts">
-  import cx from "classnames"
-  import {Track} from "livekit-client"
-  import {displayProfileByPubkey, loadProfile} from "@welshman/app"
-  import Pin from "@assets/icons/pin.svg?dataurl"
-  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import VideoCallVideo from "@app/components/VideoCallVideo.svelte"
-  import VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import {
-    currentVoiceSession,
-    currentVoiceRoom,
-    videoCallLayoutRevision,
-    videoPrimaryTileKey,
-    toggleVideoPrimaryTile,
-    pubkeyFromLiveKitIdentity,
-  } from "@app/voice"
-
-  type Variant = "mobile" | "desktop-split" | "desktop-full"
-
-  type Props = {
-    variant: Variant
-    url: string
-    h: string
-    visible?: boolean
-    class?: string
-  }
-
-  type Tile = {
-    identity: string
-    isLocal: boolean
-    trackSid: string
-    attachable: Track | undefined
-    source: Track.Source.Camera | Track.Source.ScreenShare
-  }
-
-  type TileLayout = "spotlight" | "default" | "strip"
-
-  const {variant, url, h, visible = true, class: className = ""}: Props = $props()
-
-  const roomMatches = $derived($currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h)
-
-  const showPanel = $derived(visible && roomMatches)
-
-  const tiles = $derived.by(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- re-run when remote video subscribes
-    $videoCallLayoutRevision
-    const session = $currentVoiceSession
-    if (!session || $currentVoiceRoom?.url !== url || $currentVoiceRoom?.h !== h) {
-      return []
-    }
-
-    const room = session.room
-    const out: Tile[] = []
-    const lp = room.localParticipant
-
-    if (session.cameraOn) {
-      const localPub = lp.getTrackPublication(Track.Source.Camera)
-      out.push({
-        identity: lp.identity,
-        isLocal: true,
-        trackSid: localPub?.trackSid ?? "local-camera",
-        attachable: localPub?.track,
-        source: Track.Source.Camera,
-      })
-    }
-
-    if (session.screenShareOn) {
-      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
-      out.push({
-        identity: lp.identity,
-        isLocal: true,
-        trackSid: localPub?.trackSid ?? "local-screen",
-        attachable: localPub?.track,
-        source: Track.Source.ScreenShare,
-      })
-    }
-
-    for (const rp of room.remoteParticipants.values()) {
-      const camPub = rp.getTrackPublication(Track.Source.Camera)
-      if (camPub?.isSubscribed && camPub.track) {
-        out.push({
-          identity: rp.identity,
-          isLocal: false,
-          trackSid: camPub.trackSid,
-          attachable: camPub.track,
-          source: Track.Source.Camera,
-        })
-      }
-      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
-      if (screenPub?.isSubscribed && screenPub.track) {
-        out.push({
-          identity: rp.identity,
-          isLocal: false,
-          trackSid: screenPub.trackSid,
-          attachable: screenPub.track,
-          source: Track.Source.ScreenShare,
-        })
-      }
-    }
-
-    return out
-  })
-
-  /** Identity + source only — LiveKit can change trackSid after publish, which broke spotlight + stale-key effect. */
-  const tileKey = (t: Tile) => `${t.identity}\x1f${t.source}`
-
-  const primaryTile = $derived.by(() => {
-    const k = $videoPrimaryTileKey
-    if (k === undefined) return undefined
-    return tiles.find(t => tileKey(t) === k)
-  })
-
-  const secondaryTiles = $derived.by(() => {
-    const p = primaryTile
-    if (p === undefined) return tiles
-    const pk = tileKey(p)
-    return tiles.filter(t => tileKey(t) !== pk)
-  })
-
-  const useSpotlightLayout = $derived(primaryTile !== undefined)
-  const useMultiGrid = $derived(!useSpotlightLayout && tiles.length > 2)
-
-  $effect(() => {
-    const k = $videoPrimaryTileKey
-    if (k === undefined) return
-    if (!tiles.some(t => tileKey(t) === k)) {
-      videoPrimaryTileKey.set(undefined)
-    }
-  })
-
-  $effect(() => {
-    for (const t of tiles) {
-      const pk = pubkeyFromLiveKitIdentity(t.identity)
-      if (pk) loadProfile(pk)
-    }
-  })
-
-  const labelFor = (identity: string, source: Tile["source"]) => {
-    const pk = pubkeyFromLiveKitIdentity(identity)
-    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
-    return source === Track.Source.ScreenShare ? `${name} · screen` : name
-  }
-
-  const showTileGrid = $derived(tiles.length > 0)
-
-  const spotlightHandlerFor = (key: string) => () => {
-    toggleVideoPrimaryTile(key)
-  }
-
-  const panelChrome = $derived(
-    cx(
-      variant === "mobile" &&
-        "cb top-[calc(var(--sait)+6rem)] cw z-compose bg-[var(--video-call-panel-bg)] fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 pb-2 pt-1 md:hidden",
-      variant === "desktop-split" &&
-        "cb ct cw-split-video z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
-      variant === "desktop-full" &&
-        "cb ct cw z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
-      className,
-    ),
-  )
-</script>
-
-{#snippet videoTile(tile: Tile, layout: TileLayout)}
-  <div
-    class={cx(
-      "relative isolate overflow-hidden rounded-box shadow-sm",
-      layout === "spotlight" && "min-h-0 flex-1",
-      layout === "default" && "aspect-video w-full min-h-0",
-      layout === "strip" && "aspect-video w-44 shrink-0",
-      tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
-    )}>
-    {#if tile.attachable}
-      <VideoCallVideo
-        track={tile.attachable}
-        muted={tile.isLocal}
-        fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
-        class="pointer-events-none absolute inset-0" />
-    {:else}
-      <div class="absolute inset-0 flex items-center justify-center">
-        <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
-      </div>
-    {/if}
-    <span
-      class="pointer-events-none absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
-      {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
-    </span>
-    {#if tiles.length > 1}
-      {@const pinned = $videoPrimaryTileKey === tileKey(tile)}
-      <Button
-        data-tip={pinned ? "Exit spotlight" : "Spotlight"}
-        aria-pressed={pinned}
-        class={cx(
-          "absolute right-1 top-1 z-20 btn btn-xs btn-square btn-ghost",
-          pinned ? "btn-active bg-primary/25 text-primary" : "bg-base-100/70",
-        )}
-        onclick={spotlightHandlerFor(tileKey(tile))}>
-        <Icon icon={Pin} size={3} />
-      </Button>
-    {/if}
-  </div>
-{/snippet}
-
-{#snippet videoPanelBody()}
-  {#if showTileGrid}
-    {#if useSpotlightLayout && primaryTile}
-      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
-        {@render videoTile(primaryTile, "spotlight")}
-        {#if secondaryTiles.length > 0}
-          <div
-            class="flex max-h-40 shrink-0 flex-row gap-2 overflow-x-auto overflow-y-hidden py-0.5">
-            {#each secondaryTiles as tile (tileKey(tile))}
-              {@render videoTile(tile, "strip")}
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {:else if useMultiGrid}
-      <div
-        class="grid min-h-0 flex-1 grid-cols-1 content-start gap-2 overflow-y-auto sm:grid-cols-2">
-        {#each tiles as tile (tileKey(tile))}
-          {@render videoTile(tile, "default")}
-        {/each}
-      </div>
-    {:else}
-      <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
-        {#each tiles as tile (tileKey(tile))}
-          {@render videoTile(tile, "default")}
-        {/each}
-      </div>
-    {/if}
-  {:else}
-    <div
-      class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-200/50 p-4 text-center text-sm opacity-80">
-      <p>No camera or screen share yet.</p>
-      <p class="text-xs">Use the camera or screen share control to share video.</p>
-    </div>
-  {/if}
-{/snippet}
-
-{#if showPanel}
-  <div class={panelChrome}>
-    {#if variant === "mobile"}
-      <div class="flex min-h-0 flex-1 flex-col gap-2">
-        <div class="min-h-0 flex-1 overflow-hidden">
-          {@render videoPanelBody()}
-        </div>
-        <div class="shrink-0">
-          <VoiceWidget />
-        </div>
-      </div>
-    {:else}
-      {@render videoPanelBody()}
-    {/if}
-  </div>
-{/if}

src/app/components/VideoCallVideo.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import type {Track} from "livekit-client"
-  import cx from "classnames"
-
-  type Props = {
-    track: Track
-    muted?: boolean
-    fit?: "cover" | "contain"
-    class?: string
-  }
-
-  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()
-
-  let el = $state<HTMLVideoElement | undefined>()
-
-  $effect(() => {
-    const v = el
-    const t = track
-    if (!v) return
-    t.attach(v)
-    return () => {
-      t.detach(v)
-    }
-  })
-</script>
-
-<video
-  bind:this={el}
-  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
-  playsinline
-  {muted}></video>

src/app/components/VoiceCallAudioSettingsDialog.svelte

@@ -26,10 +26,8 @@
 
   let audioInputs = $state<MediaDeviceInfo[]>([])
   let audioOutputs = $state<MediaDeviceInfo[]>([])
-  let videoInputs = $state<MediaDeviceInfo[]>([])
   let selectedInput = $state("")
   let selectedOutput = $state("")
-  let selectedVideo = $state("")
 
   const loadDevices = async () => {
     if (!navigator.mediaDevices?.enumerateDevices) return
@@ -37,25 +35,16 @@
       const devices = await navigator.mediaDevices.enumerateDevices()
       audioInputs = devices.filter(d => d.kind === "audioinput")
       audioOutputs = devices.filter(d => d.kind === "audiooutput")
-      videoInputs = devices.filter(d => d.kind === "videoinput")
     } catch {
       audioInputs = []
       audioOutputs = []
-      videoInputs = []
     }
   }
 
   $effect(() => {
-    void loadDevices()
-    const md = navigator.mediaDevices
-    if (!md?.addEventListener) return
-    const onDeviceChange = () => {
-      void loadDevices()
-    }
-    md.addEventListener("devicechange", onDeviceChange)
-    return () => {
-      md.removeEventListener("devicechange", onDeviceChange)
-    }
+    loadDevices()
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
   })
 
   $effect(() => {
@@ -66,7 +55,6 @@
     }
     selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
     selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
-    selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
   })
 
   const onInputChange = () => {
@@ -77,10 +65,6 @@
     void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
   }
 
-  const onVideoChange = () => {
-    void switchVoiceActiveDevice(DeviceKind.VideoInput, selectedVideo)
-  }
-
   const onDone = () => {
     popModal()
   }
@@ -92,8 +76,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      <ModalTitle>Call settings</ModalTitle>
-      <ModalSubtitle>Microphone, speaker, and camera for this call.</ModalSubtitle>
+      <ModalTitle>Audio settings</ModalTitle>
+      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-4 pt-2">
       <FieldInline>
@@ -136,25 +120,6 @@
           {/snippet}
         </FieldInline>
       {/if}
-      <FieldInline>
-        {#snippet label()}
-          <p>Camera</p>
-        {/snippet}
-        {#snippet input()}
-          <select
-            class="select select-bordered w-full"
-            bind:value={selectedVideo}
-            onchange={onVideoChange}
-            aria-label="Camera">
-            <option value="">Default camera</option>
-            {#each videoInputs as d (d.deviceId)}
-              <option value={d.deviceId}>
-                {d.label || `Camera ${d.deviceId.slice(0, 8)}…`}
-              </option>
-            {/each}
-          </select>
-        {/snippet}
-      </FieldInline>
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/VoiceWidget.svelte

@@ -1,18 +1,13 @@
 <script lang="ts">
   import {readable} from "svelte/store"
-  import {fade, fly} from "svelte/transition"
-  import {browser} from "$app/environment"
+  import {fly} from "svelte/transition"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
-  import cx from "classnames"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
-  import Videocamera from "@assets/icons/videocamera.svg?dataurl"
-  import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
-  import Monitor from "@assets/icons/monitor.svg?dataurl"
+  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
-  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -28,20 +23,14 @@
     type Room,
   } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
-  import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
   import {
     VoiceState,
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
-    isLocalSpeaking,
     leaveVoiceRoom,
     toggleMute,
-    toggleCamera,
-    toggleScreenShare,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
@@ -77,121 +66,29 @@
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 
-  const goToRoom = () => {
-    if (!targetRoom) return
-    const path = makeRoomPath(targetRoom.url, targetRoom.h)
-    if ($page.url.pathname !== path) {
-      void goto(path)
-    }
-  }
-
-  const openCallSettings = () => {
+  const openAudioSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
-
-  let isMd = $state(
-    typeof window !== "undefined" && window.matchMedia("(min-width: 768px)").matches,
-  )
-
-  $effect(() => {
-    if (!browser) return
-    const mq = window.matchMedia("(min-width: 768px)")
-    const sync = () => {
-      isMd = mq.matches
-    }
-    sync()
-    mq.addEventListener("change", sync)
-    return () => mq.removeEventListener("change", sync)
-  })
-
-  const showVoiceLayoutToggle = $derived(
-    $voiceState === VoiceState.Connected &&
-      targetRoom !== undefined &&
-      getRoomType(targetRoom) === RoomType.Voice &&
-      typeof h === "string" &&
-      relay !== undefined &&
-      decodeRelay(relay) === targetRoom.url &&
-      h === targetRoom.h,
-  )
-
-  const layoutToggleActive = $derived(
-    showVoiceLayoutToggle &&
-      ((!isMd && $voiceMobileRoomPanel === "chat") || (isMd && $voiceDesktopRoomPanel === "split")),
-  )
-
-  const onLayoutToggle = () => {
-    if (!showVoiceLayoutToggle) return
-    if (isMd) {
-      voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split"))
-    } else {
-      voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
-    }
-  }
-
-  const chatUnread = $derived(
-    targetRoom !== undefined && $notifications.has(makeRoomPath(targetRoom.url, targetRoom.h)),
-  )
-
-  const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
-{#snippet mutedSlash(show: boolean)}
-  {#if show}
-    <span
-      class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible"
-      aria-hidden="true">
-      <span class="h-[1.3px] w-[150%] max-w-none shrink-0 -rotate-45 rounded-full bg-current"
-      ></span>
-    </span>
-  {/if}
-{/snippet}
-
 {#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
     out:fly={{y: 60, duration: 250}}
     class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
-    <div class="flex items-start justify-between gap-2">
-      <button
-        type="button"
-        class="min-w-0 flex-1 rounded-lg px-1 py-0.5 text-left outline-none hover:bg-base-200/60 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-base-100"
-        onclick={goToRoom}
-        aria-label="Open room {roomName}">
-        <div class="flex flex-col gap-0.5">
-          {#if $voiceState === VoiceState.Joining}
-            <span class="text-sm font-semibold text-warning">Joining...</span>
-          {:else if $voiceState === VoiceState.Connected}
-            <span class="text-sm font-semibold text-success">Voice Connected</span>
-          {:else}
-            <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
-          {/if}
-          <span class="ellipsize text-xs opacity-70">
-            {roomName} / {spaceName}
-          </span>
-        </div>
-      </button>
-      {#if showVoiceLayoutToggle}
-        <Button
-          data-tip="Toggle Chat"
-          class={cx(
-            mediaToggleClass,
-            "relative shrink-0 overflow-visible",
-            layoutToggleActive && "text-primary",
-          )}
-          onclick={onLayoutToggle}>
-          <span class="relative inline-flex">
-            <Icon icon={ChatRound} size={4} />
-            {#if chatUnread}
-              <span
-                transition:fade={{duration: 150}}
-                class="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-primary ring-2 ring-base-100"
-                aria-hidden="true"></span>
-            {/if}
-          </span>
-        </Button>
+    <div class="flex flex-col gap-0.5">
+      {#if $voiceState === VoiceState.Joining}
+        <span class="text-sm font-semibold text-warning">Joining...</span>
+      {:else if $voiceState === VoiceState.Connected}
+        <span class="text-sm font-semibold text-success">Voice Connected</span>
+      {:else}
+        <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
       {/if}
+      <span class="ellipsize text-xs opacity-70">
+        {roomName} / {spaceName}
+      </span>
     </div>
-    <div class="flex flex-wrap items-center gap-2">
+    <div class="flex items-center gap-1">
       {#if $voiceState === VoiceState.Joining}
         <span class="loading loading-spinner loading-sm"></span>
         <Button
@@ -203,35 +100,16 @@
       {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
           data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
-          class={cx(
-            mediaToggleClass,
-            "overflow-visible",
-            !$currentVoiceSession.muted && $isLocalSpeaking && "text-primary",
-            $currentVoiceSession.muted &&
-              "text-error ring-1 ring-error/50 ring-offset-0 ring-offset-base-100",
-          )}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
+            ? 'btn-error'
+            : 'btn-ghost'}"
           onclick={toggleMute}>
-          <span class="relative inline-flex items-center justify-center overflow-visible">
-            <Icon icon={Microphone} size={4} />
-            {@render mutedSlash($currentVoiceSession.muted)}
-          </span>
+          <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
         <Button
-          data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
-          class={cx(mediaToggleClass, $currentVoiceSession.cameraOn && "text-primary")}
-          onclick={toggleCamera}>
-          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
-        </Button>
-        <Button
-          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
-          class={cx(mediaToggleClass, $currentVoiceSession.screenShareOn && "text-primary")}
-          onclick={toggleScreenShare}>
-          <Icon icon={Monitor} size={4} />
-        </Button>
-        <Button
-          data-tip="Call settings"
+          data-tip="Audio settings"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
-          onclick={openCallSettings}>
+          onclick={openAudioSettings}>
           <Icon icon={Settings} size={4} />
         </Button>
         <Button

src/app/voice.ts

@@ -4,13 +4,12 @@
  */
 import {
   DisconnectReason,
-  LocalParticipant,
-  LocalTrackPublication,
   Room as LiveKitRoom,
   RoomEvent,
   Track,
   supportsAudioOutputSelection,
   type AudioCaptureOptions,
+  type LocalParticipant,
 } from "livekit-client"
 import {derived, get, writable} from "svelte/store"
 import {map, removeUndefined, uniqBy} from "@welshman/lib"
@@ -33,8 +32,6 @@ export type VoiceSession = {
   h: string
   room: LiveKitRoom
   muted: boolean
-  cameraOn: boolean
-  screenShareOn: boolean
 }
 
 export type Pubkey = string
@@ -54,7 +51,6 @@ const LIVEKIT_DEFAULT_DEVICE_ID = "default"
 export enum DeviceKind {
   AudioInput = "audioinput",
   AudioOutput = "audiooutput",
-  VideoInput = "videoinput",
 }
 
 export const switchVoiceActiveDevice = async (
@@ -75,9 +71,6 @@ export const switchVoiceActiveDevice = async (
       case DeviceKind.AudioOutput:
         label = "speaker"
         break
-      case DeviceKind.VideoInput:
-        label = "camera"
-        break
     }
     pushToast({theme: "error", message: `Error changing ${label}`})
   }
@@ -87,31 +80,8 @@ export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
-/** Mobile room UI: full-screen chat vs video (see VoiceWidget layout toggle). */
-export const voiceMobileRoomPanel = writable<"chat" | "video">("chat")
-
-/** Desktop room UI: messages only, video only, or split (see VoiceWidget layout toggle). */
-export const voiceDesktopRoomPanel = writable<"chat" | "video" | "split">("split")
-
-const resetVoiceRoomPanels = () => {
-  voiceMobileRoomPanel.set("chat")
-  voiceDesktopRoomPanel.set("chat")
-}
-
 export const participantPubkeyMap = writable<Map<string, Pubkey>>(new Map())
 
-/** Bumps when remote video is subscribed/unsubscribed so layout/video UI can react. */
-export const videoCallLayoutRevision = writable(0)
-
-/** Spotlight tile id — must match VideoCallContent `tileKey` (identity + source, not trackSid). */
-export const videoPrimaryTileKey = writable<string | undefined>(undefined)
-
-export const toggleVideoPrimaryTile = (key: string) => {
-  videoPrimaryTileKey.update(k => (k === key ? undefined : key))
-}
-
-const bumpVideoCallLayoutRevision = () => videoCallLayoutRevision.update(n => n + 1)
-
 const addParticipant = (identity: string) => {
   participantPubkeyMap.update(m => {
     const next = new Map(m)
@@ -146,16 +116,6 @@ export const isParticipantSpeaking = derived(
     $participants.some(sp => participantKey(sp) === participantKey(p)),
 )
 
-/** True when the local user is in LiveKit’s active-speakers list (currently talking). */
-export const isLocalSpeaking = derived(
-  [currentVoiceSession, speakingParticipants],
-  ([$session, $speaking]) => {
-    if (!$session?.room) return false
-    const local = participantFromLiveKitIdentity($session.room.localParticipant.identity)
-    return $speaking.some(sp => participantKey(sp) === participantKey(local))
-  },
-)
-
 const fetchLivekitToken = async (
   url: string,
   groupId: string,
@@ -237,10 +197,7 @@ const setUpMicrophone = async (
 }
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
-  videoCallLayoutRevision.set(0)
-  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
     const message =
@@ -259,16 +216,11 @@ const onTrackSubscribed = (track: Track) => {
     element.style.display = "none"
     document.body.appendChild(element)
     element.play().catch(() => {})
-  } else if (track.kind === Track.Kind.Video) {
-    bumpVideoCallLayoutRevision()
   }
 }
 
 const onTrackUnsubscribed = (track: Track) => {
   track.detach().forEach(el => el.remove())
-  if (track.kind === Track.Kind.Video) {
-    bumpVideoCallLayoutRevision()
-  }
 }
 
 const onActiveSpeakersChanged = (participants: {identity: string}[]) => {
@@ -289,18 +241,6 @@ const onParticipantDisconnected = (participant: {identity: string}) => {
   deleteParticipant(participant.identity)
 }
 
-const onLocalTrackUnpublished = (
-  publication: LocalTrackPublication,
-  participant: LocalParticipant,
-) => {
-  if (publication.source !== Track.Source.ScreenShare) return
-  const session = get(currentVoiceSession)
-  if (!session || participant.identity !== session.room.localParticipant.identity) return
-  if (!session.screenShareOn) return
-  currentVoiceSession.set({...session, screenShareOn: false})
-  bumpVideoCallLayoutRevision()
-}
-
 let joinAbortController: AbortController | undefined
 
 export const cancelJoinVoiceRoom = () => {
@@ -338,7 +278,6 @@ export const joinVoiceRoom = async (
     liveKitRoom.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
     liveKitRoom.on(RoomEvent.TrackSubscribed, onTrackSubscribed)
     liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
-    liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
     liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)
 
     try {
@@ -362,14 +301,7 @@ export const joinVoiceRoom = async (
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
-    currentVoiceSession.set({
-      url,
-      h,
-      room: liveKitRoom,
-      muted,
-      cameraOn: false,
-      screenShareOn: false,
-    })
+    currentVoiceSession.set({url, h, room: liveKitRoom, muted})
     voiceState.set(VoiceState.Connected)
     playJoinSound()
   } catch (e) {
@@ -388,27 +320,8 @@ export const leaveVoiceRoom = async () => {
   const audio = new Audio("/leave-voice-room.mp3")
   audio.play().catch(() => {})
 
-  if (session.cameraOn) {
-    try {
-      await session.room.localParticipant.setCameraEnabled(false)
-    } catch {
-      /* pass */
-    }
-  }
-
-  if (session.screenShareOn) {
-    try {
-      await session.room.localParticipant.setScreenShareEnabled(false)
-    } catch {
-      /* pass */
-    }
-  }
-
   voiceState.set(VoiceState.Disconnected)
-  videoCallLayoutRevision.set(0)
-  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
-  resetVoiceRoomPanels()
   session.room.disconnect()
   speakingParticipants.set([])
   participantPubkeyMap.set(new Map())
@@ -439,76 +352,3 @@ export const toggleMute = async () => {
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }
-
-const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
-
-const countLiveVisualFeeds = (session: VoiceSession): number => {
-  const room = session.room
-  let n = 0
-  const lp = room.localParticipant
-  if (session.cameraOn) {
-    const pub = lp.getTrackPublication(Track.Source.Camera)
-    if (pub?.track) n += 1
-  }
-  if (session.screenShareOn) {
-    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
-    if (pub?.track) n += 1
-  }
-  for (const rp of room.remoteParticipants.values()) {
-    for (const source of VISUAL_SOURCES) {
-      const pub = rp.getTrackPublication(source)
-      if (pub?.isSubscribed && pub.track) n += 1
-    }
-  }
-  return n
-}
-
-export const videoTileCount = derived(
-  [currentVoiceSession, voiceState, videoCallLayoutRevision],
-  ([$session, $state, _rev]) => {
-    if ($state !== VoiceState.Connected || !$session) return 0
-    return countLiveVisualFeeds($session)
-  },
-)
-
-export const toggleCamera = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const cameraOn = !session.cameraOn
-  if (!cameraOn) {
-    session.room.localParticipant.setCameraEnabled(false)
-    currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setCameraEnabled(true)
-    currentVoiceSession.set({...session, cameraOn})
-    bumpVideoCallLayoutRevision()
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not access camera"})
-  }
-}
-
-export const toggleScreenShare = async () => {
-  const session = get(currentVoiceSession)
-  if (!session) return
-
-  const screenShareOn = !session.screenShareOn
-  if (!screenShareOn) {
-    session.room.localParticipant.setScreenShareEnabled(false)
-    currentVoiceSession.set({...session, screenShareOn})
-    bumpVideoCallLayoutRevision()
-    return
-  }
-
-  try {
-    await session.room.localParticipant.setScreenShareEnabled(true)
-    currentVoiceSession.set({...session, screenShareOn})
-    bumpVideoCallLayoutRevision()
-  } catch (e) {
-    pushToast({theme: "error", message: "Could not start screen sharing"})
-  }
-}

src/lib/components/Button.svelte

@@ -14,7 +14,6 @@
     style?: string
     disabled?: boolean
     "data-tip"?: string
-    "aria-pressed"?: boolean
   } = $props()
 
   const className = $derived(`text-left ${restProps.class}`)

src/lib/components/PageContent.svelte

@@ -5,19 +5,14 @@
   interface Props {
     element?: Element
     children?: Snippet
-    /** Desktop voice: chat occupies the right half in split view. */
-    contentFrame?: "default" | "split-right"
     [key: string]: any
   }
 
-  let {children, element = $bindable(), contentFrame = "default", ...props}: Props = $props()
+  let {children, element = $bindable(), ...props}: Props = $props()
 
-  const className = $derived(
-    cx(
-      props.class,
-      "scroll-container cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
-      contentFrame === "split-right" ? "cw-split-chat" : "cw",
-    ),
+  const className = cx(
+    props.class,
+    "scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
   )
 </script>
 

src/routes/spaces/[relay]/[h]/+layout.svelte

@@ -1,14 +1,7 @@
-<script lang="ts">
-  import type {Snippet} from "svelte"
+<script>
   import {page} from "$app/stores"
-
-  type Props = {
-    children?: Snippet
-  }
-
-  const {children}: Props = $props()
 </script>
 
 {#key $page.url.searchParams.get("at")}
-  {@render children?.()}
+  <slot />
 {/key}

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -19,7 +19,6 @@
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
   import Login2 from "@assets/icons/login-3.svg?dataurl"
-  import cx from "classnames"
   import {slide, fade, fly} from "@lib/transition"
   import Button from "@lib/components/Button.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -51,15 +50,7 @@
     userSettingsValues,
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import VideoCallContent from "@app/components/VideoCallContent.svelte"
-  import {
-    VoiceState,
-    currentVoiceRoom,
-    videoTileCount,
-    voiceMobileRoomPanel,
-    voiceDesktopRoomPanel,
-    voiceState,
-  } from "@app/voice"
+  import {VoiceState, voiceState} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -72,50 +63,6 @@
   const url = decodeRelay(relay)
   const room = deriveRoom(url, h)
   const isVoiceRoom = $derived(getRoomType($room) === RoomType.Voice)
-
-  const voiceConnectedHere = $derived(
-    isVoiceRoom &&
-      $voiceState === VoiceState.Connected &&
-      $currentVoiceRoom?.url === url &&
-      $currentVoiceRoom?.h === h,
-  )
-
-  const showMobileVideoPanel = $derived(
-    isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video",
-  )
-
-  const pageContentFrame = $derived<"default" | "split-right">(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" ? "split-right" : "default",
-  )
-
-  const pageContentHiddenDesktopVideoOnly = $derived(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "video",
-  )
-
-  let prevVideoTileCount = $state(0)
-
-  $effect(() => {
-    if ($voiceState !== VoiceState.Connected) {
-      voiceMobileRoomPanel.set("chat")
-      voiceDesktopRoomPanel.set("chat")
-      prevVideoTileCount = 0
-      return
-    }
-
-    const here = isVoiceRoom && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h
-    const n = $videoTileCount
-
-    if (!here) {
-      prevVideoTileCount = 0
-      return
-    }
-
-    if (prevVideoTileCount === 0 && n >= 1) {
-      voiceDesktopRoomPanel.set("video")
-      voiceMobileRoomPanel.set("video")
-    }
-    prevVideoTileCount = n
-  })
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
@@ -429,16 +376,7 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent
-  bind:element
-  onscroll={onScroll}
-  contentFrame={pageContentFrame}
-  class={cx(
-    showMobileVideoPanel
-      ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
-      : "flex flex-col-reverse pt-4",
-    pageContentHiddenDesktopVideoOnly && "md:hidden",
-  )}>
+<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
   <div bind:this={dynamicPadding}></div>
   {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <div class="py-20">
@@ -508,26 +446,8 @@
   {/if}
 </PageContent>
 
-{#if voiceConnectedHere}
-  <VideoCallContent
-    variant="desktop-split"
-    {url}
-    {h}
-    visible={$voiceDesktopRoomPanel === "split"} />
-  <VideoCallContent variant="desktop-full" {url} {h} visible={$voiceDesktopRoomPanel === "video"} />
-{/if}
-
-{#if isVoiceRoom && $voiceState === VoiceState.Connected}
-  <VideoCallContent variant="mobile" {url} {h} visible={$voiceMobileRoomPanel === "video"} />
-{/if}
-
 <div
-  class={cx(
-    "chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "cw-split-chat",
-    pageContentHiddenDesktopVideoOnly && "md:hidden",
-    showMobileVideoPanel && "max-md:hidden",
-  )}
+  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
   bind:this={chatCompose}>
   <div class="chat__compose-inner min-w-0 flex-1">
     {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
@@ -576,8 +496,7 @@
     {/if}
   </div>
   {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div
-      class={cx("hide-on-keyboard flex-shrink-0 p-2 md:hidden", showMobileVideoPanel && "hidden")}>
+    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
       <VoiceWidget />
     </div>
   {/if}