Drop camera settings from join room dialog

Resolve VoiceWidget conflict: keep camera, screen share, and call settings.
Extend join flow with optional camera on join and device picker.
Add camera to in-call settings; rename UI to Call settings.

Made-with: Cursor

.dockerignore

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

.gitignore

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

CONTRIBUTING.md

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

Dockerfile

@@ -21,16 +21,12 @@ 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-bookworm-slim
+FROM node:20-alpine
 
 WORKDIR /app
 
-# Copy production runtime only
+# Copy only the built output - no source, no .env, no dev deps
-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 ["node", "server.js"]
+CMD ["npx", "serve", "-s", "build"]

README.md

@@ -16,13 +16,11 @@ You can also optionally create an `.env.local` file and populate it with the fol
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
 
-These values **won't** be used for a built version. Instead, env variables should be provided to `build.sh` directly or to the built container.
-
 If you're deploying a custom version of flotilla, be sure to remove the `plausible.coracle.social` script from `app.html`. This sends analytics to a server hosted by the developer.
 
 ## Development
 
-See [CONTRIBUTING.md](CONTRIBUTING.md).
+See [CONTRIBUTING.md](AGENTS.md).
 
 ## Deployment
 
@@ -31,7 +29,7 @@ To run your own Flotilla, it's as simple as:
 ```sh
 pnpm install
 pnpm run build
-node server.js
+npx serve -s build
 ```
 
 Or, if you prefer to use a container:

build.sh

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

ios/App/App.xcodeproj/project.pbxproj

@@ -392,7 +392,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.5;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

package.json

@@ -1,10 +1,9 @@
 {
   "name": "flotilla",
-  "version": "1.7.4",
+  "version": "1.7.2",
   "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",
@@ -23,7 +22,6 @@
     "@eslint/js": "^9.39.2",
     "@sveltejs/kit": "^2.50.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
-    "@tailwindcss/postcss": "^4.2.2",
     "@tauri-apps/cli": "^2.9.6",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.23",
@@ -37,7 +35,7 @@
     "prettier-plugin-svelte": "^3.4.1",
     "svelte": "^5.48.0",
     "svelte-check": "^4.3.5",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^5.4.21"
@@ -49,53 +47,47 @@
     "@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.3",
+    "@pomade/core": "^0.2.2",
     "@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.13",
+    "@welshman/app": "^0.8.12",
-    "@welshman/content": "^0.8.13",
+    "@welshman/content": "^0.8.12",
-    "@welshman/editor": "^0.8.13",
+    "@welshman/editor": "^0.8.12",
-    "@welshman/feeds": "^0.8.13",
+    "@welshman/feeds": "^0.8.12",
-    "@welshman/lib": "^0.8.13",
+    "@welshman/lib": "^0.8.12",
-    "@welshman/net": "^0.8.13",
+    "@welshman/net": "^0.8.12",
-    "@welshman/router": "^0.8.13",
+    "@welshman/router": "^0.8.12",
-    "@welshman/signer": "^0.8.13",
+    "@welshman/signer": "^0.8.12",
-    "@welshman/store": "^0.8.13",
+    "@welshman/store": "^0.8.12",
-    "@welshman/util": "^0.8.13",
+    "@welshman/util": "^0.8.12",
-    "cheerio": "^1.2.0",
     "compressorjs-next": "^1.1.2",
-    "daisyui": "^5.5.19",
+    "daisyui": "^4.12.24",
     "date-picker-svelte": "^2.17.0",
     "dotenv": "^16.6.1",
     "emoji-picker-element": "^1.28.1",
     "fuse.js": "^7.1.0",
-    "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.7.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "throttle-debounce": "^5.0.2",
@@ -112,6 +104,5 @@
     "overrides": {
       "sharp": "0.35.0-rc.0"
     }
-  },
+  }
-  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
 }

pwa-assets.config.js

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

server.js

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

@@ -394,6 +394,35 @@ 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))];
 }
@@ -430,6 +459,19 @@ 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/PrimaryNav.svelte

@@ -14,7 +14,7 @@
   import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
-  import {goToChat, makeSpacePath} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   type Props = {
     children?: Snippet
@@ -26,9 +26,7 @@
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  const anySpaceNotifications = $derived(
+  const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
-    $userSpaceUrls.some(p => $notifications.has(makeSpacePath(p))),
-  )
 </script>
 
 <div

src/app/components/RelaySummary.svelte

@@ -35,7 +35,7 @@
           </div>
         {/if}
       </div>
-      <div class="min-w-0">
+      <div>
         <h2 class="ellipsize whitespace-nowrap text-xl">
           <RelayName {url} />
         </h2>

src/app/components/SpaceSearch.svelte

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

src/app/components/VideoCallContent.svelte

@@ -0,0 +1,247 @@
+<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 {
+    currentVoiceSession,
+    currentVoiceRoom,
+    videoCallContentActive,
+    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 allowEmptyPanel = $derived(variant === "desktop-split" || variant === "desktop-full")
+
+  const showPanel = $derived(
+    visible &&
+      roomMatches &&
+      (variant === "mobile" ? $videoCallContentActive : $videoCallContentActive || allowEmptyPanel),
+  )
+
+  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 ct cw z-compose bg-base-300/95 fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-hidden p-2 md:hidden",
+      variant === "desktop-split" &&
+        "cb ct cw-split-video z-compose bg-base-300/95 fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+      variant === "desktop-full" &&
+        "cb ct cw z-compose bg-base-300/95 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",
+      $videoPrimaryTileKey === tileKey(tile) &&
+        "ring-2 ring-primary ring-offset-2 ring-offset-base-300",
+    )}>
+    {#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}
+      <Button
+        data-tip={$videoPrimaryTileKey === tileKey(tile) ? "Exit spotlight" : "Spotlight"}
+        class="absolute right-1 top-1 z-20 btn btn-xs btn-circle btn-ghost bg-base-100/70"
+        onclick={spotlightHandlerFor(tileKey(tile))}>
+        <Icon icon={Pin} size={3} />
+      </Button>
+    {/if}
+  </div>
+{/snippet}
+
+{#if showPanel && (showTileGrid || allowEmptyPanel)}
+  <div class={panelChrome}>
+    {#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-100/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 in the voice widget to share video.
+        </p>
+      </div>
+    {/if}
+  </div>
+{/if}

src/app/components/VideoCallVideo.svelte

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

@@ -5,7 +5,6 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {
     currentVoiceSession,
@@ -26,8 +25,10 @@
 
   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
@@ -35,16 +36,25 @@
       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(() => {
-    loadDevices()
+    void loadDevices()
-    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    const md = navigator.mediaDevices
-    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
+    if (!md?.addEventListener) return
+    const onDeviceChange = () => {
+      void loadDevices()
+    }
+    md.addEventListener("devicechange", onDeviceChange)
+    return () => {
+      md.removeEventListener("devicechange", onDeviceChange)
+    }
   })
 
   $effect(() => {
@@ -55,6 +65,7 @@
     }
     selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
     selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+    selectedVideo = selectValueForActiveDevice(session, DeviceKind.VideoInput)
   })
 
   const onInputChange = () => {
@@ -65,20 +76,23 @@
     void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
   }
 
+  const onVideoChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.VideoInput, selectedVideo)
+  }
+
   const onDone = () => {
     popModal()
   }
 
-  // Output not support in Safari
   const canPickOutput = supportsAudioOutputSelection()
 </script>
 
 <Modal>
   <ModalBody>
     <ModalHeader>
-      <ModalTitle>Audio settings</ModalTitle>
+      <ModalTitle>Call settings</ModalTitle>
-      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
     </ModalHeader>
+    <p class="text-sm opacity-80">Microphone, speaker, and camera for this call.</p>
     <div class="flex flex-col gap-4 pt-2">
       <FieldInline>
         {#snippet label()}
@@ -120,9 +134,28 @@
           {/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>
-    <Button class="btn btn-primary w-full" onclick={onDone}>Done</Button>
+    <Button class="btn btn-primary" onclick={onDone}>Done</Button>
   </ModalFooter>
 </Modal>

src/app/components/VoiceRoomJoinDialog.svelte

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

src/app/components/VoiceWidget.svelte

@@ -6,6 +6,9 @@
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import MicrophoneOff from "@assets/icons/microphone-off.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 PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -31,6 +34,8 @@
     voiceState,
     leaveVoiceRoom,
     toggleMute,
+    toggleCamera,
+    toggleScreenShare,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
@@ -107,7 +112,23 @@
           <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
         <Button
-          data-tip="Audio settings"
+          data-tip={$currentVoiceSession.cameraOn ? "Turn off camera" : "Turn on camera"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.cameraOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleCamera}>
+          <Icon icon={$currentVoiceSession.cameraOn ? VideocameraRecord : Videocamera} size={4} />
+        </Button>
+        <Button
+          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleScreenShare}>
+          <Icon icon={Monitor} size={4} />
+        </Button>
+        <Button
+          data-tip="Call settings"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
           onclick={openAudioSettings}>
           <Icon icon={Settings} size={4} />

src/app/core/state.ts

@@ -191,9 +191,7 @@ export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
 
 export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
 
-export const PLATFORM_LOGO = import.meta.env.PROD
+export const PLATFORM_LOGO = PLATFORM_URL + "/logo.png"
-  ? PLATFORM_URL + "/logo.png"
-  : import.meta.env.VITE_PLATFORM_LOGO.replace(/^static/, "") || PLATFORM_URL + "/logo.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 

src/app/core/sync.ts

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

src/app/voice.ts

@@ -4,12 +4,13 @@
  */
 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"
@@ -32,6 +33,8 @@ export type VoiceSession = {
   h: string
   room: LiveKitRoom
   muted: boolean
+  cameraOn: boolean
+  screenShareOn: boolean
 }
 
 export type Pubkey = string
@@ -51,6 +54,7 @@ const LIVEKIT_DEFAULT_DEVICE_ID = "default"
 export enum DeviceKind {
   AudioInput = "audioinput",
   AudioOutput = "audiooutput",
+  VideoInput = "videoinput",
 }
 
 export const switchVoiceActiveDevice = async (
@@ -71,6 +75,9 @@ export const switchVoiceActiveDevice = async (
       case DeviceKind.AudioOutput:
         label = "speaker"
         break
+      case DeviceKind.VideoInput:
+        label = "camera"
+        break
     }
     pushToast({theme: "error", message: `Error changing ${label}`})
   }
@@ -82,6 +89,18 @@ export const currentVoiceRoom = writable<Room | undefined>(undefined)
 
 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)
@@ -197,6 +216,8 @@ const setUpMicrophone = async (
 }
 
 const onRoomDisconnected = (reason?: DisconnectReason) => {
+  videoCallLayoutRevision.set(0)
+  videoPrimaryTileKey.set(undefined)
   currentVoiceSession.set(undefined)
   if (reason !== undefined && reason !== DisconnectReason.CLIENT_INITIATED) {
     voiceState.set(VoiceState.Disconnected)
@@ -216,11 +237,16 @@ 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}[]) => {
@@ -241,6 +267,18 @@ 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 = () => {
@@ -278,6 +316,7 @@ 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 {
@@ -301,7 +340,14 @@ export const joinVoiceRoom = async (
 
     const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)
 
-    currentVoiceSession.set({url, h, room: liveKitRoom, muted})
+    currentVoiceSession.set({
+      url,
+      h,
+      room: liveKitRoom,
+      muted,
+      cameraOn: false,
+      screenShareOn: false,
+    })
     voiceState.set(VoiceState.Connected)
     playJoinSound()
   } catch (e) {
@@ -320,7 +366,25 @@ 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)
   session.room.disconnect()
   speakingParticipants.set([])
@@ -352,3 +416,96 @@ export const toggleMute = async () => {
     pushToast({theme: "error", message: "Could not access microphone"})
   }
 }
+
+const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
+
+const roomHasSubscribedRemoteVisual = (room: LiveKitRoom): boolean => {
+  for (const p of room.remoteParticipants.values()) {
+    for (const source of VISUAL_SOURCES) {
+      const pub = p.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) return true
+    }
+  }
+  return false
+}
+
+/** True when local camera/screen share is on or any subscribed remote camera/screen track. */
+export const videoCallContentActive = derived(
+  [currentVoiceSession, voiceState, videoCallLayoutRevision],
+  ([$session, $state, _rev]) => {
+    if ($state !== VoiceState.Connected || !$session) return false
+    if ($session.cameraOn || $session.screenShareOn) return true
+    return roomHasSubscribedRemoteVisual($session.room)
+  },
+)
+
+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/PageContent.svelte

@@ -5,14 +5,19 @@
   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(), ...props}: Props = $props()
+  let {children, element = $bindable(), contentFrame = "default", ...props}: Props = $props()
 
-  const className = cx(
+  const className = $derived(
-    props.class,
+    cx(
-    "scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
+      props.class,
+      "scroll-container cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
+      contentFrame === "split-right" ? "cw-split-chat" : "cw",
+    ),
   )
 </script>
 

src/routes/spaces/+page.svelte

@@ -31,8 +31,7 @@
   } from "@app/core/state"
   import {setSpaceMembershipOrder} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
-  import {goToSpace, makeSpacePath} from "@app/util/routes"
+  import {goToSpace} from "@app/util/routes"
-  import {notifications} from "@app/util/notifications"
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -255,12 +254,9 @@
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
                 <Button
-                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative"
+                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full"
                   onclick={() => openSpace(url)}>
                   <RelaySummary hideFavorites {url} />
-                  {#if $notifications.has(makeSpacePath(url))}
-                    <div class="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary"></div>
-                  {/if}
                 </Button>
               </div>
             {/each}

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

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

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

@@ -19,6 +19,7 @@
   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"
@@ -50,7 +51,8 @@
     userSettingsValues,
   } from "@app/core/state"
   import VoiceWidget from "@app/components/VoiceWidget.svelte"
-  import {VoiceState, voiceState} from "@app/voice"
+  import VideoCallContent from "@app/components/VideoCallContent.svelte"
+  import {VoiceState, currentVoiceRoom, videoTileCount, voiceState} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -63,6 +65,53 @@
   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,
+  )
+
+  let mobileRoomPanel = $state<"chat" | "video">("chat")
+  let voiceDesktopPanel = $state<"chat" | "video" | "split">("split")
+
+  const showMobileVideoPanel = $derived(
+    isVoiceRoom && $voiceState === VoiceState.Connected && mobileRoomPanel === "video",
+  )
+
+  const pageContentFrame = $derived<"default" | "split-right">(
+    voiceConnectedHere && voiceDesktopPanel === "split" ? "split-right" : "default",
+  )
+
+  const pageContentHiddenDesktopVideoOnly = $derived(
+    voiceConnectedHere && voiceDesktopPanel === "video",
+  )
+
+  let prevVideoTileCount = $state(0)
+
+  $effect(() => {
+    if ($voiceState !== VoiceState.Connected) {
+      mobileRoomPanel = "chat"
+      voiceDesktopPanel = "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) {
+      voiceDesktopPanel = "video"
+      mobileRoomPanel = "video"
+    }
+    prevVideoTileCount = n
+  })
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
@@ -369,6 +418,40 @@
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
+    {#if voiceConnectedHere}
+      <div class="flex gap-1 md:hidden">
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "chat" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          class={cx("btn btn-sm", mobileRoomPanel === "video" && "btn-primary")}
+          onclick={() => (mobileRoomPanel = "video")}>
+          Video
+        </Button>
+      </div>
+      <div class="hidden flex-wrap gap-1 md:flex">
+        <Button
+          data-tip="Messages only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "chat" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "chat")}>
+          Chat
+        </Button>
+        <Button
+          data-tip="Video only"
+          class={cx("btn btn-sm", voiceDesktopPanel === "video" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "video")}>
+          Video
+        </Button>
+        <Button
+          data-tip="Video and chat side by side"
+          class={cx("btn btn-sm", voiceDesktopPanel === "split" && "btn-primary")}
+          onclick={() => (voiceDesktopPanel = "split")}>
+          Video + Chat
+        </Button>
+      </div>
+    {/if}
     <SpaceSearch {url} {h} />
     <Button class="btn btn-neutral btn-sm btn-square" onclick={showRoomDetail}>
       <Icon size={4} icon={InfoCircle} />
@@ -376,7 +459,16 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
+<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",
+  )}>
   <div bind:this={dynamicPadding}></div>
   {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <div class="py-20">
@@ -446,8 +538,22 @@
   {/if}
 </PageContent>
 
+{#if voiceConnectedHere}
+  <VideoCallContent variant="desktop-split" {url} {h} visible={voiceDesktopPanel === "split"} />
+  <VideoCallContent variant="desktop-full" {url} {h} visible={voiceDesktopPanel === "video"} />
+{/if}
+
+{#if isVoiceRoom && $voiceState === VoiceState.Connected}
+  <VideoCallContent variant="mobile" {url} {h} visible={mobileRoomPanel === "video"} />
+{/if}
+
 <div
-  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
+  class={cx(
+    "chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
+    voiceConnectedHere && voiceDesktopPanel === "split" && "cw-split-chat",
+    pageContentHiddenDesktopVideoOnly && "md:hidden",
+    showMobileVideoPanel && "max-md:hidden",
+  )}
   bind:this={chatCompose}>
   <div class="chat__compose-inner min-w-0 flex-1">
     {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}

tailwind.config.js

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

vite.config.ts

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