chore(release): v4.11.1 [skip ci] (#2765)

* chore(release): 4.11.0 [skip ci]

* chore(release): 4.11.1 [skip ci]

.github/renovate.json

@@ -1,6 +1,10 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended", ":dependencyDashboardApproval"],
+  "extends": [
+    "config:recommended",
+    ":dependencyDashboardApproval",
+    ":semanticCommits"
+  ],
   "labels": ["Dependencies"],
   "packageRules": [
     {

.github/workflows/build-pull-request.yml

@@ -12,12 +12,12 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
-          node-version: 20.12.2
-          cache: 'npm'
+          node-version-file: ".node-version"
+          package-manager-cache: false
       - name: Install dependencies
         run: npm ci
       - name: Build app
@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: pr
           path: ./pr.txt

.github/workflows/cla.yml

@@ -12,7 +12,7 @@ jobs:
       - name: 'CLA Assistant'
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
-        uses: cla-assistant/github-action@v2.6.1
+        uses: cla-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # the below token should have repo scope and must be manually added by you in the repository's secret

.github/workflows/deploy-pull-request.yml

@@ -1,4 +1,5 @@
 name: Deploy PR to Netlify
+run-name: "Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})"
 
 on:
   workflow_run:
@@ -15,7 +16,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
+        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -24,7 +25,7 @@ jobs:
         id: pr
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
+        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -32,7 +33,7 @@ jobs:
           path: dist
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
           deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@@ -45,12 +46,12 @@ jobs:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
         timeout-minutes: 1
       - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
+        uses: thollander/actions-comment-pull-request@24bffb9b452ba05a4f3f77933840a6a841d1b32b #v3.0.1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pr_number: ${{ steps.pr.outputs.id }}
-          comment_tag: ${{ steps.pr.outputs.id }}
+          pr-number: ${{ steps.pr.outputs.id }}
+          comment-tag: ${{ steps.pr.outputs.id }}
           message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
               ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -5,15 +5,59 @@ on:
     paths:
       - 'Dockerfile'
       - '.github/workflows/docker-pr.yml'
+      - '.github/workflows/prod-deploy.yml'
 
 jobs:
   docker-build:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-      - name: Build Docker image
-        uses: docker/build-push-action@v6.18.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
+        
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+
+      - name: Login to Docker Hub #Do not update this action from a outside PR
+        if: github.event.pull_request.head.repo.fork == false
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+        continue-on-error: true
+
+      - name: Login to the Github Container registry #Do not update this action from a outside PR
+        if: github.event.pull_request.head.repo.fork == false
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+        continue-on-error: true
+
+      - name: Extract metadata (tags, labels) for Docker, GHCR
+        id: meta
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        with:
+          images: |
+            ajbura/cinny
+            ghcr.io/${{ github.repository }}
+
+      - name: Build Docker image (no push)
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
         with:
           context: .
+          platforms: linux/amd64
           push: false
+          load: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Show Docker images
+        run: docker images

.github/workflows/lockfile.yml

@@ -14,9 +14,9 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
+        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891 # v1.0.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # Optional inputs, can be deleted safely if you are happy with default values.

.github/workflows/netlify-dev.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
-          node-version: 20.12.2
-          cache: 'npm'
+          node-version-file: ".node-version"
+          package-manager-cache: false
       - name: Install dependencies
         run: npm ci
       - name: Build app
@@ -24,7 +24,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
           deploy-message: 'Dev deploy ${{ github.sha }}'

.github/workflows/pr-title.yml

@@ -0,0 +1,15 @@
+name: Check PR title
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/prod-deploy.yml

@@ -10,12 +10,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
-          node-version: 20.12.2
-          cache: 'npm'
+          node-version-file: ".node-version"
+          package-manager-cache: false
       - name: Install dependencies
         run: npm ci
       - name: Build app
@@ -23,7 +23,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
           deploy-message: 'Prod deploy ${{ github.ref_name }}'
@@ -52,45 +52,45 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
   publish-image:
-    name: Push Docker image to Docker Hub, ghcr
+    name: Push Docker image to Docker Hub, GHCR
     runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.11.1
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3.5.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+      - name: Login to Docker Hub #Do not update this action from a outside PR
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Container registry
-        uses: docker/login-action@v3.5.0
+      - name: Login to the Github Container registry #Do not update this action from a outside PR
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
+      - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@v5.8.0
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.18.0
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.node-version

@@ -0,0 +1 @@
+24.13.1

Dockerfile

@@ -1,5 +1,5 @@
 ## Builder
-FROM node:20.12.2-alpine3.18 as builder
+FROM node:24.13.1-alpine AS builder
 
 WORKDIR /src
 
@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.29.1-alpine
+FROM nginx:1.29.5-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -83,7 +83,7 @@ mxFo+ioe/ABCufSmyqFye0psX3Sp
 
 ## Local development
 > [!TIP]
-> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).
+> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Krypton LTS (v24.13.1).
 
 Execute the following commands to start a development server:
 ```sh

config.json

@@ -1,13 +1,6 @@
 {
-  "defaultHomeserver": 2,
-  "homeserverList": [
-    "converser.eu",
-    "envs.net",
-    "matrix.org",
-    "monero.social",
-    "mozilla.org",
-    "xmr.se"
-  ],
+  "defaultHomeserver": 1,
+  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
   "allowCustomHomeservers": true,
 
   "featuredCommunities": {
@@ -15,7 +8,7 @@
     "spaces": [
       "#cinny-space:matrix.org",
       "#community:matrix.org",
-      "#space:envs.net",
+      "#space:unredacted.org",
       "#science-space:matrix.org",
       "#libregaming-games:tchncs.de",
       "#mathematics-on:matrix.org"
@@ -28,7 +21,7 @@
       "#PrivSec.dev:arcticfoxes.net",
       "#disroot:aria-net.org"
     ],
-    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
+    "servers": ["matrix.org", "mozilla.org", "unredacted.org"]
   },
 
   "hashRouter": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.10.1",
+  "version": "4.11.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.10.1",
+      "version": "4.11.1",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -32,7 +32,7 @@
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
         "focus-trap-react": "10.0.2",
-        "folds": "2.3.0",
+        "folds": "2.6.2",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -41,9 +41,10 @@
         "immer": "9.0.16",
         "is-hotkey": "0.2.0",
         "jotai": "2.6.0",
-        "linkify-react": "4.1.3",
-        "linkifyjs": "4.1.3",
+        "linkify-react": "4.3.2",
+        "linkifyjs": "4.3.2",
         "matrix-js-sdk": "38.2.0",
+        "matrix-widget-api": "1.13.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
@@ -56,15 +57,16 @@
         "react-google-recaptcha": "2.1.0",
         "react-i18next": "15.0.0",
         "react-range": "1.8.14",
-        "react-router-dom": "6.20.0",
+        "react-router-dom": "6.30.3",
         "sanitize-html": "2.12.1",
-        "slate": "0.112.0",
-        "slate-dom": "0.112.2",
-        "slate-history": "0.110.3",
-        "slate-react": "0.112.1",
+        "slate": "0.123.0",
+        "slate-dom": "0.123.0",
+        "slate-history": "0.113.1",
+        "slate-react": "0.123.0",
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
+        "@element-hq/element-call-embedded": "0.16.3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
@@ -1649,6 +1651,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@element-hq/element-call-embedded": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.16.3.tgz",
+      "integrity": "sha512-OViKJonDaDNVBUW9WdV9mk78/Ruh34C7XsEgt3O8D9z+64C39elbIgllHSoH5S12IRlv9RYrrV37FZLo6QWsDQ==",
+      "dev": true
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -3699,9 +3707,10 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
-      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -7157,9 +7166,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.3.0.tgz",
-      "integrity": "sha512-1KoM21jrg5daxvKrmSY0V04wa946KlNT0z6h017Rsnw2fdtNC6J0f34Ce5GF46Tzi00gZ/7SvCDXMzW/7e5s0w==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.6.2.tgz",
+      "integrity": "sha512-1HemxxSnBm8/U5kq1pDQrFkpltWgQN90DmWCZWkZb7D2pe8BhOJSwIRLjk9WxHcw6nn69oz2XNYIXtSw0LvX1w==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",
@@ -8491,18 +8500,20 @@
       }
     },
     "node_modules/linkify-react": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.3.tgz",
-      "integrity": "sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.3.2.tgz",
+      "integrity": "sha512-mi744h1hf+WDsr+paJgSBBgYNLMWNSHyM9V9LVUo03RidNGdw1VpI7Twnt+K3pEh3nIzB4xiiAgZxpd61ItKpQ==",
+      "license": "MIT",
       "peerDependencies": {
         "linkifyjs": "^4.0.0",
         "react": ">= 15.0.0"
       }
     },
     "node_modules/linkifyjs": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
-      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
+      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
+      "license": "MIT"
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -8663,9 +8674,9 @@
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.1.tgz",
-      "integrity": "sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.0.tgz",
+      "integrity": "sha512-+LrvwkR1izL4h2euX8PDrvG/3PZZDEd6As+lmnR3jAVwbFJtU5iTnwmZGnCca9ddngCvXvAHkcpJBEPyPTZneQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",
@@ -9605,11 +9616,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
-      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.13.0"
+        "@remix-run/router": "1.23.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9619,12 +9631,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
-      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.13.0",
-        "react-router": "6.20.0"
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10278,20 +10291,15 @@
       }
     },
     "node_modules/slate": {
-      "version": "0.112.0",
-      "resolved": "https://registry.npmjs.org/slate/-/slate-0.112.0.tgz",
-      "integrity": "sha512-PRnfFgDA3tSop4OH47zu4M1R4Uuhm/AmASu29Qp7sGghVFb713kPBKEnSf1op7Lx/nCHkRlCa3ThfHtCBy+5Yw==",
-      "license": "MIT",
-      "dependencies": {
-        "immer": "^10.0.3",
-        "is-plain-object": "^5.0.0",
-        "tiny-warning": "^1.0.3"
-      }
+      "version": "0.123.0",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.123.0.tgz",
+      "integrity": "sha512-Oon3HR/QzJQBjuOUJT1jGGlp8Ff7t3Bkr/rJ2lDqxNT4H+cBnXpEVQ/si6hn1ZCHhD2xY/2N91PQoH/rD7kxTg==",
+      "license": "MIT"
     },
     "node_modules/slate-dom": {
-      "version": "0.112.2",
-      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
-      "integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
+      "version": "0.123.0",
+      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.123.0.tgz",
+      "integrity": "sha512-OUinp4tvSrAlt64JL9y20Xin08jgnnj1gJmIuPdGvU5MELKXRNZh17a7EKKNOS6OZPAE8Dk9NI1MAIS/Qz0YBw==",
       "license": "MIT",
       "dependencies": {
         "@juggle/resize-observer": "^3.4.0",
@@ -10303,13 +10311,13 @@
         "tiny-invariant": "1.3.1"
       },
       "peerDependencies": {
-        "slate": ">=0.99.0"
+        "slate": ">=0.121.0"
       }
     },
     "node_modules/slate-history": {
-      "version": "0.110.3",
-      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
-      "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
+      "version": "0.113.1",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.113.1.tgz",
+      "integrity": "sha512-J9NSJ+UG2GxoW0lw5mloaKcN0JI0x2IA5M5FxyGiInpn+QEutxT1WK7S/JneZCMFJBoHs1uu7S7e6pxQjubHmQ==",
       "license": "MIT",
       "dependencies": {
         "is-plain-object": "^5.0.0"
@@ -10319,15 +10327,14 @@
       }
     },
     "node_modules/slate-react": {
-      "version": "0.112.1",
-      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
-      "integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
+      "version": "0.123.0",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.123.0.tgz",
+      "integrity": "sha512-nQwXL1FEacrY9ZFmatRhoBnsySNUX2x6qB77V3oNHd7wWxBJWuzz4GMrBXcVoRE8Gac7Angf8xaNGzb6zcPlHg==",
       "license": "MIT",
       "dependencies": {
         "@juggle/resize-observer": "^3.4.0",
         "direction": "^1.0.4",
         "is-hotkey": "^0.2.0",
-        "is-plain-object": "^5.0.0",
         "lodash": "^4.17.21",
         "scroll-into-view-if-needed": "^3.1.0",
         "tiny-invariant": "1.3.1"
@@ -10335,18 +10342,8 @@
       "peerDependencies": {
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0",
-        "slate": ">=0.99.0",
-        "slate-dom": ">=0.110.2"
-      }
-    },
-    "node_modules/slate/node_modules/immer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
+        "slate": ">=0.121.0",
+        "slate-dom": ">=0.119.1"
       }
     },
     "node_modules/smob": {
@@ -10716,11 +10713,6 @@
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
       "license": "MIT"
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.10",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
@@ -10904,6 +10896,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
       "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.10.1",
+  "version": "4.11.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -10,6 +10,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
+    "preview": "vite preview",
     "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
@@ -43,7 +44,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.3.0",
+    "folds": "2.6.2",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",
@@ -52,9 +53,10 @@
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
     "jotai": "2.6.0",
-    "linkify-react": "4.1.3",
-    "linkifyjs": "4.1.3",
+    "linkify-react": "4.3.2",
+    "linkifyjs": "4.3.2",
     "matrix-js-sdk": "38.2.0",
+    "matrix-widget-api": "1.13.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -67,15 +69,16 @@
     "react-google-recaptcha": "2.1.0",
     "react-i18next": "15.0.0",
     "react-range": "1.8.14",
-    "react-router-dom": "6.20.0",
+    "react-router-dom": "6.30.3",
     "sanitize-html": "2.12.1",
-    "slate": "0.112.0",
-    "slate-dom": "0.112.2",
-    "slate-history": "0.110.3",
-    "slate-react": "0.112.1",
+    "slate": "0.123.0",
+    "slate-dom": "0.123.0",
+    "slate-history": "0.113.1",
+    "slate-react": "0.123.0",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
+    "@element-hq/element-call-embedded": "0.16.3",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",

src/app/components/BackRouteHandler.tsx

@@ -51,8 +51,12 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
       },
       location.pathname
     );
-    if (spaceMatch?.params.spaceIdOrAlias) {
-      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+    const encodedSpaceIdOrAlias = spaceMatch?.params.spaceIdOrAlias;
+    const decodedSpaceIdOrAlias =
+      encodedSpaceIdOrAlias && decodeURIComponent(encodedSpaceIdOrAlias);
+
+    if (decodedSpaceIdOrAlias) {
+      navigate(getSpacePath(decodedSpaceIdOrAlias));
       return;
     }
     if (

src/app/components/CallEmbedProvider.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode, useCallback, useRef } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { config } from 'folds';
+import {
+  CallEmbedContextProvider,
+  CallEmbedRefContextProvider,
+  useCallHangupEvent,
+  useCallJoined,
+  useCallThemeSync,
+  useCallMemberSoundSync,
+} from '../hooks/useCallEmbed';
+import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
+import { CallEmbed } from '../plugins/call';
+import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
+
+function CallUtils({ embed }: { embed: CallEmbed }) {
+  const setCallEmbed = useSetAtom(callEmbedAtom);
+
+  useCallMemberSoundSync(embed);
+  useCallThemeSync(embed);
+  useCallHangupEvent(
+    embed,
+    useCallback(() => {
+      setCallEmbed(undefined);
+    }, [setCallEmbed])
+  );
+
+  return null;
+}
+
+type CallEmbedProviderProps = {
+  children?: ReactNode;
+};
+export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
+  const callEmbed = useAtomValue(callEmbedAtom);
+  const callEmbedRef = useRef<HTMLDivElement>(null);
+  const joined = useCallJoined(callEmbed);
+
+  const selectedRoom = useSelectedRoom();
+  const chat = useAtomValue(callChatAtom);
+  const screenSize = useScreenSizeContext();
+
+  const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
+
+  const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;
+
+  return (
+    <CallEmbedContextProvider value={callEmbed}>
+      {callEmbed && <CallUtils embed={callEmbed} />}
+      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
+      <div
+        data-call-embed-container
+        style={{
+          visibility: callVisible ? undefined : 'hidden',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '50%',
+        }}
+        ref={callEmbedRef}
+      />
+    </CallEmbedContextProvider>
+  );
+}

src/app/components/JoinRulesSwitcher.tsx

@@ -16,34 +16,24 @@ import {
 import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
+import { getRoomIconSrc } from '../utils/room';
 
 export type ExtraJoinRules = 'knock_restricted';
 export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
 
 type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
-export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
+
+export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
   useMemo(
     () => ({
-      [JoinRule.Invite]: Icons.HashLock,
-      [JoinRule.Knock]: Icons.HashLock,
-      knock_restricted: Icons.Hash,
-      [JoinRule.Restricted]: Icons.Hash,
-      [JoinRule.Public]: Icons.HashGlobe,
-      [JoinRule.Private]: Icons.HashLock,
+      [JoinRule.Invite]: getRoomIconSrc(Icons, roomType, JoinRule.Invite),
+      [JoinRule.Knock]: getRoomIconSrc(Icons, roomType, JoinRule.Knock),
+      knock_restricted: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
+      [JoinRule.Restricted]: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
+      [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
+      [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
     }),
-    []
-  );
-export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: Icons.SpaceLock,
-      [JoinRule.Knock]: Icons.SpaceLock,
-      knock_restricted: Icons.Space,
-      [JoinRule.Restricted]: Icons.Space,
-      [JoinRule.Public]: Icons.SpaceGlobe,
-      [JoinRule.Private]: Icons.SpaceLock,
-    }),
-    []
+    [roomType]
   );
 
 type JoinRuleLabels = Record<ExtendedJoinRules, string>;

src/app/components/create-room/CreateRoomAccessSelector.tsx

@@ -2,43 +2,39 @@ import React from 'react';
 import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
 import { SequenceCard } from '../sequence-card';
 import { SettingTile } from '../setting-tile';
+import { CreateRoomAccess } from './types';
 
-export enum CreateRoomKind {
-  Private = 'private',
-  Restricted = 'restricted',
-  Public = 'public',
-}
-type CreateRoomKindSelectorProps = {
-  value?: CreateRoomKind;
-  onSelect: (value: CreateRoomKind) => void;
+type CreateRoomAccessSelectorProps = {
+  value?: CreateRoomAccess;
+  onSelect: (value: CreateRoomAccess) => void;
   canRestrict?: boolean;
   disabled?: boolean;
-  getIcon: (kind: CreateRoomKind) => IconSrc;
+  getIcon: (access: CreateRoomAccess) => IconSrc;
 };
-export function CreateRoomKindSelector({
+export function CreateRoomAccessSelector({
   value,
   onSelect,
   canRestrict,
   disabled,
   getIcon,
-}: CreateRoomKindSelectorProps) {
+}: CreateRoomAccessSelectorProps) {
   return (
     <Box shrink="No" direction="Column" gap="100">
       {canRestrict && (
         <SequenceCard
           style={{ padding: config.space.S300 }}
-          variant={value === CreateRoomKind.Restricted ? 'Primary' : 'SurfaceVariant'}
+          variant={value === CreateRoomAccess.Restricted ? 'Primary' : 'SurfaceVariant'}
           direction="Column"
           gap="100"
           as="button"
           type="button"
-          aria-pressed={value === CreateRoomKind.Restricted}
-          onClick={() => onSelect(CreateRoomKind.Restricted)}
+          aria-pressed={value === CreateRoomAccess.Restricted}
+          onClick={() => onSelect(CreateRoomAccess.Restricted)}
           disabled={disabled}
         >
           <SettingTile
-            before={<Icon size="400" src={getIcon(CreateRoomKind.Restricted)} />}
-            after={value === CreateRoomKind.Restricted && <Icon src={Icons.Check} />}
+            before={<Icon size="400" src={getIcon(CreateRoomAccess.Restricted)} />}
+            after={value === CreateRoomAccess.Restricted && <Icon src={Icons.Check} />}
           >
             <Text size="H6">Restricted</Text>
             <Text size="T300" priority="300">
@@ -49,18 +45,18 @@ export function CreateRoomKindSelector({
       )}
       <SequenceCard
         style={{ padding: config.space.S300 }}
-        variant={value === CreateRoomKind.Private ? 'Primary' : 'SurfaceVariant'}
+        variant={value === CreateRoomAccess.Private ? 'Primary' : 'SurfaceVariant'}
         direction="Column"
         gap="100"
         as="button"
         type="button"
-        aria-pressed={value === CreateRoomKind.Private}
-        onClick={() => onSelect(CreateRoomKind.Private)}
+        aria-pressed={value === CreateRoomAccess.Private}
+        onClick={() => onSelect(CreateRoomAccess.Private)}
         disabled={disabled}
       >
         <SettingTile
-          before={<Icon size="400" src={getIcon(CreateRoomKind.Private)} />}
-          after={value === CreateRoomKind.Private && <Icon src={Icons.Check} />}
+          before={<Icon size="400" src={getIcon(CreateRoomAccess.Private)} />}
+          after={value === CreateRoomAccess.Private && <Icon src={Icons.Check} />}
         >
           <Text size="H6">Private</Text>
           <Text size="T300" priority="300">
@@ -70,18 +66,18 @@ export function CreateRoomKindSelector({
       </SequenceCard>
       <SequenceCard
         style={{ padding: config.space.S300 }}
-        variant={value === CreateRoomKind.Public ? 'Primary' : 'SurfaceVariant'}
+        variant={value === CreateRoomAccess.Public ? 'Primary' : 'SurfaceVariant'}
         direction="Column"
         gap="100"
         as="button"
         type="button"
-        aria-pressed={value === CreateRoomKind.Public}
-        onClick={() => onSelect(CreateRoomKind.Public)}
+        aria-pressed={value === CreateRoomAccess.Public}
+        onClick={() => onSelect(CreateRoomAccess.Public)}
         disabled={disabled}
       >
         <SettingTile
-          before={<Icon size="400" src={getIcon(CreateRoomKind.Public)} />}
-          after={value === CreateRoomKind.Public && <Icon src={Icons.Check} />}
+          before={<Icon size="400" src={getIcon(CreateRoomAccess.Public)} />}
+          after={value === CreateRoomAccess.Public && <Icon src={Icons.Check} />}
         >
           <Text size="H6">Public</Text>
           <Text size="T300" priority="300">

src/app/components/create-room/CreateRoomTypeSelector.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
+import { SequenceCard } from '../sequence-card';
+import { SettingTile } from '../setting-tile';
+import { CreateRoomType } from './types';
+import { BetaNoticeBadge } from '../BetaNoticeBadge';
+
+type CreateRoomTypeSelectorProps = {
+  value?: CreateRoomType;
+  onSelect: (value: CreateRoomType) => void;
+  disabled?: boolean;
+  getIcon: (type: CreateRoomType) => IconSrc;
+};
+export function CreateRoomTypeSelector({
+  value,
+  onSelect,
+  disabled,
+  getIcon,
+}: CreateRoomTypeSelectorProps) {
+  return (
+    <Box shrink="No" direction="Column" gap="100">
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomType.TextRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomType.TextRoom}
+        onClick={() => onSelect(CreateRoomType.TextRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomType.TextRoom)} />}
+          after={value === CreateRoomType.TextRoom && <Icon src={Icons.Check} />}
+        >
+          <Box gap="200" alignItems="Baseline">
+            <Text size="H6" style={{ flexShrink: 0 }}>
+              Chat Room
+            </Text>
+            <Text size="T300" priority="300" truncate>
+              - Messages, photos, and videos.
+            </Text>
+          </Box>
+        </SettingTile>
+      </SequenceCard>
+      <SequenceCard
+        style={{ padding: config.space.S300 }}
+        variant={value === CreateRoomType.VoiceRoom ? 'Primary' : 'SurfaceVariant'}
+        direction="Column"
+        gap="100"
+        as="button"
+        type="button"
+        aria-pressed={value === CreateRoomType.VoiceRoom}
+        onClick={() => onSelect(CreateRoomType.VoiceRoom)}
+        disabled={disabled}
+      >
+        <SettingTile
+          before={<Icon size="400" src={getIcon(CreateRoomType.VoiceRoom)} />}
+          after={value === CreateRoomType.VoiceRoom && <Icon src={Icons.Check} />}
+        >
+          <Box gap="200" alignItems="Baseline">
+            <Text size="H6" style={{ flexShrink: 0 }}>
+              Voice Room
+            </Text>
+            <Text size="T300" priority="300" truncate>
+              - Live audio and video conversations.
+            </Text>
+            <BetaNoticeBadge />
+          </Box>
+        </SettingTile>
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/components/create-room/index.ts

@@ -1,5 +1,6 @@
-export * from './CreateRoomKindSelector';
+export * from './CreateRoomAccessSelector';
 export * from './CreateRoomAliasInput';
 export * from './RoomVersionSelector';
 export * from './utils';
 export * from './AdditionalCreatorInput';
+export * from './types';

src/app/components/create-room/types.ts

@@ -0,0 +1,10 @@
+export enum CreateRoomType {
+  TextRoom = 'text',
+  VoiceRoom = 'voice',
+}
+
+export enum CreateRoomAccess {
+  Private = 'private',
+  Restricted = 'restricted',
+  Public = 'public',
+}

src/app/components/create-room/utils.ts

@@ -7,10 +7,10 @@ import {
   Room,
 } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { CreateRoomKind } from './CreateRoomKindSelector';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { getMxIdServer } from '../../utils/matrix';
+import { CreateRoomAccess } from './types';
 
 export const createRoomCreationContent = (
   type: RoomType | undefined,
@@ -32,7 +32,7 @@ export const createRoomCreationContent = (
 };
 
 export const createRoomJoinRulesState = (
-  kind: CreateRoomKind,
+  access: CreateRoomAccess,
   parent: Room | undefined,
   knock: boolean
 ) => {
@@ -40,13 +40,13 @@ export const createRoomJoinRulesState = (
     join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
   };
 
-  if (kind === CreateRoomKind.Public) {
+  if (access === CreateRoomAccess.Public) {
     content = {
       join_rule: JoinRule.Public,
     };
   }
 
-  if (kind === CreateRoomKind.Restricted && parent) {
+  if (access === CreateRoomAccess.Restricted && parent) {
     content = {
       join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
       allow: [
@@ -74,6 +74,10 @@ export const createRoomParentState = (parent: Room) => ({
   },
 });
 
+const createSpacePowerLevelsOverride = () => ({
+  events_default: 50,
+});
+
 export const createRoomEncryptionState = () => ({
   type: 'm.room.encryption',
   state_key: '',
@@ -82,11 +86,23 @@ export const createRoomEncryptionState = () => ({
   },
 });
 
+export const createRoomCallState = () => ({
+  type: 'org.matrix.msc3401.call',
+  state_key: '',
+  content: {},
+});
+
+export const createVoiceRoomPowerLevelsOverride = () => ({
+  events: {
+    [StateEvent.GroupCallMemberPrefix]: 0,
+  },
+});
+
 export type CreateRoomData = {
   version: string;
   type?: RoomType;
   parent?: Room;
-  kind: CreateRoomKind;
+  access: CreateRoomAccess;
   name: string;
   topic?: string;
   aliasLocalPart?: string;
@@ -106,7 +122,11 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     initialState.push(createRoomParentState(data.parent));
   }
 
-  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
+  if (data.type === RoomType.Call) {
+    initialState.push(createRoomCallState());
+  }
+
+  initialState.push(createRoomJoinRulesState(data.access, data.parent, data.knock));
 
   const options: ICreateRoomOpts = {
     room_version: data.version,
@@ -118,9 +138,15 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
       data.allowFederation,
       data.additionalCreators
     ),
+    power_level_content_override:
+      data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
     initial_state: initialState,
   };
 
+  if (data.type === RoomType.Space) {
+    options.power_level_content_override = createSpacePowerLevelsOverride();
+  }
+
   const result = await mx.createRoom(options);
 
   if (data.parent) {

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -88,6 +88,8 @@ export function EmoticonAutocomplete({
       {autoCompleteEmoticon.map((emoticon) => {
         const isCustomEmoji = 'url' in emoticon;
         const key = isCustomEmoji ? emoticon.url : emoticon.unicode;
+        const customEmojiUrl = mxcUrlToHttp(mx, key, useAuthentication);
+
         return (
           <MenuItem
             key={emoticon.shortcode + key}
@@ -98,11 +100,11 @@ export function EmoticonAutocomplete({
             }
             onClick={() => handleAutocomplete(key, emoticon.shortcode)}
             before={
-              isCustomEmoji ? (
+              isCustomEmoji && customEmojiUrl ? (
                 <Box
                   shrink="No"
                   as="img"
-                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
+                  src={customEmojiUrl}
                   alt={emoticon.shortcode}
                   style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
                 />

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -169,12 +169,13 @@ export function RoomMentionAutocomplete({
                         <RoomIcon
                           size="50"
                           joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                          roomType={room.getType()}
                           filled
                         />
                       )}
                     />
                   ) : (
-                    <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
+                    <RoomIcon size="100" joinRule={room.getJoinRule()} roomType={room.getType()} />
                   )}
                 </Avatar>
               }

src/app/components/editor/output.ts

@@ -212,9 +212,10 @@ export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): M
     if (node.type === BlockType.CodeBlock) return;
 
     if (node.type === BlockType.Mention) {
-      if (node.id === getCanonicalAliasOrRoomId(mx, roomId)) {
+      if (node.name === '@room') {
         mentionData.room = true;
       }
+      
       if (isUserId(node.id) && node.id !== mx.getUserId()) {
         mentionData.users.add(node.id);
       }

src/app/components/emoji-board/EmojiBoard.tsx

@@ -202,8 +202,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
             if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
 
             const url =
-              mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
-              pack.meta.avatar;
+              mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ?? undefined;
 
             return (
               <ImageGroupIcon
@@ -266,7 +265,7 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
           if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
 
           const url =
-            mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) || pack.meta.avatar;
+            mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ?? undefined;
 
           return (
             <ImageGroupIcon

src/app/components/emoji-board/components/Item.tsx

@@ -68,7 +68,7 @@ export function CustomEmojiItem({ mx, useAuthentication, image }: CustomEmojiIte
         loading="lazy"
         className={css.CustomEmojiImg}
         alt={image.body || image.shortcode}
-        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
       />
     </Box>
   );
@@ -98,7 +98,7 @@ export function StickerItem({ mx, useAuthentication, image }: StickerItemProps)
         loading="lazy"
         className={css.StickerImg}
         alt={image.body || image.shortcode}
-        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
       />
     </Box>
   );

src/app/components/message/FileHeader.tsx

@@ -27,7 +27,8 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+      if (!mediaUrl) throw new Error('Invalid media URL');
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
         : await downloadMedia(mediaUrl);

src/app/components/message/MsgTypeRenderers.tsx

@@ -389,6 +389,8 @@ export function MLocation({ content }: MLocationProps) {
   const geoUri = content.geo_uri;
   if (typeof geoUri !== 'string') return <BrokenContent />;
   const location = parseGeoUri(geoUri);
+  if (!location) return <BrokenContent />;
+
   return (
     <Box direction="Column" alignItems="Start" gap="100">
       <Text size="T400">{geoUri}</Text>

src/app/components/message/content/AudioContent.tsx

@@ -54,7 +54,8 @@ export function AudioContent({
 
   const [srcState, loadSrc] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+      if (!mediaUrl) throw new Error('Invalid media URL');
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
         : await downloadMedia(mediaUrl);

src/app/components/message/content/FileContent.tsx

@@ -86,7 +86,8 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
 
   const [textState, loadText] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+      if (!mediaUrl) throw new Error('Invalid media URL');
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
         : await downloadMedia(mediaUrl);
@@ -176,7 +177,8 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
 
   const [pdfState, loadPdf] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+      if (!mediaUrl) throw new Error('Invalid media URL');
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
         : await downloadMedia(mediaUrl);
@@ -253,7 +255,8 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+      if (!mediaUrl) throw new Error('Invalid media URL');
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
         : await downloadMedia(mediaUrl);

src/app/components/message/content/ImageContent.tsx

@@ -87,7 +87,8 @@ export const ImageContent = as<'div', ImageContentProps>(
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
-        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+        if (!mediaUrl) throw new Error('Invalid media URL');
         if (encInfo) {
           const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
             decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo)

src/app/components/message/content/ThumbnailContent.tsx

@@ -23,7 +23,8 @@ export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
         throw new Error('Failed to load thumbnail');
       }
 
-      const mediaUrl = mxcUrlToHttp(mx, thumbMxcUrl, useAuthentication) ?? thumbMxcUrl;
+      const mediaUrl = mxcUrlToHttp(mx, thumbMxcUrl, useAuthentication);
+      if (!mediaUrl) throw new Error('Invalid media URL');
       if (encInfo) {
         const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
           decryptFile(encBuf, thumbInfo.mimetype ?? FALLBACK_MIMETYPE, encInfo)

src/app/components/message/content/VideoContent.tsx

@@ -81,7 +81,8 @@ export const VideoContent = as<'div', VideoContentProps>(
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
-        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
+        if (!mediaUrl) throw new Error('Invalid media URL');
         const fileContent = encInfo
           ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
               decryptFile(encBuf, mimeType, encInfo)

src/app/components/room-avatar/RoomAvatar.tsx

@@ -2,7 +2,7 @@ import { JoinRule } from 'matrix-js-sdk';
 import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
 import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
 import * as css from './RoomAvatar.css';
-import { joinRuleToIconSrc } from '../../utils/room';
+import { getRoomIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 
 type RoomAvatarProps = {
@@ -44,13 +44,9 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
 export const RoomIcon = forwardRef<
   SVGSVGElement,
   Omit<ComponentProps<typeof Icon>, 'src'> & {
-    joinRule: JoinRule;
-    space?: boolean;
+    joinRule?: JoinRule;
+    roomType?: string;
   }
->(({ joinRule, space, ...props }, ref) => (
-  <Icon
-    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
-    {...props}
-    ref={ref}
-  />
+>(({ joinRule, roomType, ...props }, ref) => (
+  <Icon src={getRoomIconSrc(Icons, roomType, joinRule)} {...props} ref={ref} />
 ));

src/app/components/sequence-card/SequenceCard.tsx

@@ -17,6 +17,7 @@ export const SequenceCard = as<
       firstChild,
       lastChild,
       outlined,
+      mergeBorder,
       ...props
     },
     ref
@@ -24,7 +25,7 @@ export const SequenceCard = as<
     <Box
       as={AsSequenceCard}
       className={classNames(
-        css.SequenceCard({ radii, outlined }),
+        css.SequenceCard({ radii, outlined, mergeBorder }),
         ContainerColor({ variant }),
         className
       )}

src/app/components/sequence-card/style.css.ts

@@ -11,7 +11,7 @@ export const SequenceCard = recipe({
     },
     borderStyle: 'solid',
     borderWidth: outlinedWidth,
-    borderBottomWidth: 0,
+
     selectors: {
       '&:first-child, :not(&) + &': {
         borderTopLeftRadius: [radii],
@@ -20,7 +20,6 @@ export const SequenceCard = recipe({
       '&:last-child, &:not(:has(+&))': {
         borderBottomLeftRadius: [radii],
         borderBottomRightRadius: [radii],
-        borderBottomWidth: outlinedWidth,
       },
       [`&[data-first-child="true"]`]: {
         borderTopLeftRadius: [radii],
@@ -74,6 +73,16 @@ export const SequenceCard = recipe({
         },
       },
     },
+    mergeBorder: {
+      true: {
+        borderBottomWidth: 0,
+        selectors: {
+          '&:last-child, &:not(:has(+&))': {
+            borderBottomWidth: outlinedWidth,
+          },
+        },
+      },
+    },
   },
   defaultVariants: {
     radii: '400',

src/app/components/stacked-avatar/StackedAvatar.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { as, Avatar } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+
+type StackedAvatarProps = {
+  radii?: '0' | '300' | '400' | '500' | 'Pill' | 'Inherit' | undefined;
+};
+export const StackedAvatar = as<'span', css.StackedAvatarVariants & StackedAvatarProps>(
+  ({ size, variant, className, ...props }, ref) => (
+    <Avatar
+      size={size}
+      className={classNames(css.StackedAvatar({ size, variant }), className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);

src/app/components/stacked-avatar/index.ts

@@ -0,0 +1 @@
+export * from './StackedAvatar';

src/app/components/stacked-avatar/styles.css.ts

@@ -0,0 +1,59 @@
+import { ComplexStyleRule } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { color, config, ContainerColor, toRem } from 'folds';
+
+const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
+  outlineColor: color[variant].Container,
+});
+
+export const StackedAvatar = recipe({
+  base: {
+    backgroundColor: color.Surface.Container,
+    outlineStyle: 'solid',
+    selectors: {
+      '&:first-child': {
+        marginLeft: 0,
+      },
+      'button&': {
+        cursor: 'pointer',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      '200': {
+        marginLeft: toRem(-6),
+        outlineWidth: config.borderWidth.B300,
+      },
+      '300': {
+        marginLeft: toRem(-9),
+        outlineWidth: config.borderWidth.B400,
+      },
+      '400': {
+        marginLeft: toRem(-10.5),
+        outlineWidth: config.borderWidth.B500,
+      },
+      '500': {
+        marginLeft: toRem(-13),
+        outlineWidth: config.borderWidth.B600,
+      },
+    },
+    variant: {
+      Background: getVariant('Background'),
+      Surface: getVariant('Surface'),
+      SurfaceVariant: getVariant('SurfaceVariant'),
+      Primary: getVariant('Primary'),
+      Secondary: getVariant('Secondary'),
+      Success: getVariant('Success'),
+      Warning: getVariant('Warning'),
+      Critical: getVariant('Critical'),
+    },
+  },
+  defaultVariants: {
+    size: '400',
+    variant: 'Surface',
+  },
+});
+
+export type StackedAvatarVariants = RecipeVariants<typeof StackedAvatar>;

src/app/components/uia-stages/SSOStage.tsx

@@ -26,7 +26,12 @@ export function SSOStage({
 
   useEffect(() => {
     const handleMessage = (evt: MessageEvent) => {
-      if (ssoWindow && evt.data === 'authDone' && evt.source === ssoWindow) {
+      if (
+        evt.origin === new URL(ssoRedirectURL).origin &&
+        ssoWindow &&
+        evt.data === 'authDone' &&
+        evt.source === ssoWindow
+      ) {
         ssoWindow.close();
         setSSOWindow(undefined);
         handleSubmit();
@@ -37,7 +42,7 @@ export function SSOStage({
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, [ssoWindow, handleSubmit]);
+  }, [ssoWindow, handleSubmit, ssoRedirectURL]);
 
   return (
     <Dialog>

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -30,7 +30,15 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     if (previewStatus.status === AsyncStatus.Error) return null;
 
     const renderContent = (prev: IPreviewUrlResponse) => {
-      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication, 256, 256, 'scale', false);
+      const imgUrl = mxcUrlToHttp(
+        mx,
+        prev['og:image'] || '',
+        useAuthentication,
+        256,
+        256,
+        'scale',
+        false
+      );
 
       return (
         <>
@@ -42,7 +50,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
               as="a"
               href={url}
               target="_blank"
-              rel="no-referrer"
+              rel="noreferrer"
               size="T200"
               priority="300"
             >

src/app/components/user-profile/UserChips.tsx

@@ -323,7 +323,7 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
                 )}
               />
             ) : (
-              <RoomIcon size="100" joinRule={room.getJoinRule()} />
+              <RoomIcon size="100" joinRule={room.getJoinRule()} roomType={room.getType()} />
             )}
           </Avatar>
         }

src/app/cs-api.ts

@@ -20,6 +20,16 @@ export type AutoDiscoveryInfo = Record<string, unknown> & {
   'm.identity_server'?: {
     base_url: string;
   };
+  'org.matrix.msc2965.authentication'?: {
+    account?: string;
+    issuer?: string;
+  };
+  'org.matrix.msc4143.rtc_foci'?: [
+    {
+      livekit_service_url: string;
+      type: 'livekit';
+    }
+  ];
 };
 
 export const autoDiscovery = async (

src/app/features/add-existing/AddExisting.tsx

@@ -291,7 +291,11 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                                       )}
                                     />
                                   ) : (
-                                    <RoomIcon size="200" joinRule={room.getJoinRule()} />
+                                    <RoomIcon
+                                      size="200"
+                                      joinRule={room.getJoinRule()}
+                                      roomType={room.getType()}
+                                    />
                                   )}
                                 </Avatar>
                               }

src/app/features/call-status/CallControl.tsx

@@ -0,0 +1,226 @@
+import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
+import React, { useCallback } from 'react';
+import { useSetAtom } from 'jotai';
+import { StatusDivider } from './components';
+import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { callEmbedAtom } from '../../state/callEmbed';
+
+type MicrophoneButtonProps = {
+  enabled: boolean;
+  onToggle: () => Promise<unknown>;
+  disabled?: boolean;
+};
+function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Surface' : 'Warning'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => onToggle()}
+          outlined
+          disabled={disabled}
+        >
+          <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type SoundButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+};
+function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Surface' : 'Warning'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => onToggle()}
+          outlined
+          disabled={disabled}
+        >
+          <Icon
+            size="100"
+            src={enabled ? Icons.Headphone : Icons.HeadphoneMute}
+            filled={!enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type VideoButtonProps = {
+  enabled: boolean;
+  onToggle: () => Promise<unknown>;
+  disabled?: boolean;
+};
+function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Camera' : 'Start Camera'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={() => onToggle()}
+          outlined
+          disabled={disabled}
+        >
+          <Icon
+            size="100"
+            src={enabled ? Icons.VideoCamera : Icons.VideoCameraMute}
+            filled={enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type ScreenShareButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+};
+function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Screenshare' : 'Start Screenshare'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="300"
+          size="300"
+          onClick={onToggle}
+          outlined
+          disabled={disabled}
+        >
+          <Icon size="100" src={Icons.ScreenShare} filled={enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export function CallControl({
+  callEmbed,
+  compact,
+  callJoined,
+}: {
+  callEmbed: CallEmbed;
+  compact: boolean;
+  callJoined: boolean;
+}) {
+  const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
+  const setCallEmbed = useSetAtom(callEmbedAtom);
+
+  const [hangupState, hangup] = useAsyncCallback(
+    useCallback(() => callEmbed.hangup(), [callEmbed])
+  );
+  const exiting =
+    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;
+
+  const handleHangup = () => {
+    if (!callJoined) {
+      setCallEmbed(undefined);
+      return;
+    }
+    hangup();
+  };
+
+  return (
+    <Box shrink="No" alignItems="Center" gap="300">
+      <Box alignItems="Inherit" gap="200">
+        <MicrophoneButton
+          enabled={microphone}
+          onToggle={() => callEmbed.control.toggleMicrophone()}
+          disabled={!callJoined}
+        />
+        <SoundButton
+          enabled={sound}
+          onToggle={() => callEmbed.control.toggleSound()}
+          disabled={!callJoined}
+        />
+        {!compact && <StatusDivider />}
+        <VideoButton
+          enabled={video}
+          onToggle={() => callEmbed.control.toggleVideo()}
+          disabled={!callJoined}
+        />
+        {!compact && (
+          <ScreenShareButton
+            enabled={screenshare}
+            onToggle={() => callEmbed.control.toggleScreenshare()}
+            disabled={!callJoined}
+          />
+        )}
+      </Box>
+      <StatusDivider />
+      <Chip
+        variant="Critical"
+        radii="Pill"
+        fill="Soft"
+        before={
+          exiting ? (
+            <Spinner variant="Critical" fill="Soft" size="50" />
+          ) : (
+            <Icon size="50" src={Icons.PhoneDown} filled />
+          )
+        }
+        disabled={exiting}
+        outlined
+        onClick={handleHangup}
+      >
+        {!compact && (
+          <Text as="span" size="L400">
+            End
+          </Text>
+        )}
+      </Chip>
+    </Box>
+  );
+}

src/app/features/call-status/CallRoomName.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Room } from 'matrix-js-sdk';
+import { Chip, Text } from 'folds';
+import { useAtomValue } from 'jotai';
+import { useRoomName } from '../../hooks/useRoomMeta';
+import { RoomIcon } from '../../components/room-avatar';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { getAllParents, guessPerfectParent } from '../../utils/room';
+import { useOrphanSpaces } from '../../state/hooks/roomList';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+import { mDirectAtom } from '../../state/mDirectList';
+import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+
+type CallRoomNameProps = {
+  room: Room;
+};
+export function CallRoomName({ room }: CallRoomNameProps) {
+  const mx = useMatrixClient();
+  const name = useRoomName(room);
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
+  const mDirects = useAtomValue(mDirectAtom);
+  const dm = mDirects.has(room.roomId);
+
+  const allRoomsSet = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allRoomsSet);
+
+  const allParents = getAllParents(roomToParents, room.roomId);
+  const orphanParents = allParents && orphanSpaces.filter((o) => allParents.has(o));
+  const perfectOrphanParent = orphanParents && guessPerfectParent(mx, room.roomId, orphanParents);
+
+  const { navigateRoom } = useRoomNavigate();
+
+  return (
+    <Chip
+      variant="Background"
+      radii="Pill"
+      before={
+        <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+      }
+      onClick={() => navigateRoom(room.roomId)}
+    >
+      <Text size="L400" truncate>
+        {name}
+        {!dm && perfectOrphanParent && (
+          <Text as="span" size="T200" priority="300">
+            {' •'} <b>{getRoom(perfectOrphanParent)?.name ?? perfectOrphanParent}</b>
+          </Text>
+        )}
+      </Text>
+    </Chip>
+  );
+}

src/app/features/call-status/CallStatus.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Box, Spinner } from 'folds';
+import classNames from 'classnames';
+import { LiveChip } from './LiveChip';
+import * as css from './styles.css';
+import { CallRoomName } from './CallRoomName';
+import { CallControl } from './CallControl';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
+import { MemberGlance } from './MemberGlance';
+import { StatusDivider } from './components';
+import { CallEmbed } from '../../plugins/call/CallEmbed';
+import { useCallJoined } from '../../hooks/useCallEmbed';
+import { useCallSpeakers } from '../../hooks/useCallSpeakers';
+import { MemberSpeaking } from './MemberSpeaking';
+
+type CallStatusProps = {
+  callEmbed: CallEmbed;
+};
+export function CallStatus({ callEmbed }: CallStatusProps) {
+  const { room } = callEmbed;
+
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const screenSize = useScreenSize();
+  const callJoined = useCallJoined(callEmbed);
+  const speakers = useCallSpeakers(callEmbed);
+
+  const compact = screenSize === ScreenSize.Mobile;
+
+  const memberVisible = callJoined && callMembers.length > 0;
+
+  return (
+    <Box
+      className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
+      shrink="No"
+      gap="400"
+      alignItems={compact ? undefined : 'Center'}
+      direction={compact ? 'Column' : 'Row'}
+    >
+      <Box grow="Yes" alignItems="Center" gap="200">
+        {memberVisible ? (
+          <Box shrink="No">
+            <LiveChip count={callMembers.length} room={room} members={callMembers} />
+          </Box>
+        ) : (
+          <Spinner variant="Secondary" size="200" />
+        )}
+        <Box grow="Yes" alignItems="Center" gap="Inherit">
+          {!compact && (
+            <>
+              <CallRoomName room={room} />
+              {speakers.size > 0 && (
+                <>
+                  <StatusDivider />
+                  <span data-spacing-node />
+                  <MemberSpeaking room={room} speakers={speakers} />
+                </>
+              )}
+            </>
+          )}
+        </Box>
+        {memberVisible && (
+          <Box shrink="No">
+            <MemberGlance room={room} members={callMembers} speakers={speakers} />
+          </Box>
+        )}
+      </Box>
+      {memberVisible && !compact && <StatusDivider />}
+      <Box shrink="No" alignItems="Center" gap="Inherit">
+        {compact && (
+          <Box grow="Yes">
+            <CallRoomName room={room} />
+          </Box>
+        )}
+        <CallControl callJoined={callJoined} compact={compact} callEmbed={callEmbed} />
+      </Box>
+    </Box>
+  );
+}

src/app/features/call-status/LiveChip.tsx

@@ -0,0 +1,137 @@
+import React, { MouseEventHandler, useState } from 'react';
+import {
+  Avatar,
+  Badge,
+  Box,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  toRem,
+} from 'folds';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import FocusTrap from 'focus-trap-react';
+import { Room } from 'matrix-js-sdk';
+import * as css from './styles.css';
+import { stopPropagation } from '../../utils/keyboard';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { UserAvatar } from '../../components/user-avatar';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { getMouseEventCords } from '../../utils/dom';
+
+type LiveChipProps = {
+  room: Room;
+  members: CallMembership[];
+  count: number;
+};
+export function LiveChip({ count, room, members }: LiveChipProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Top"
+      align="Start"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu
+            style={{
+              maxHeight: '75vh',
+              maxWidth: toRem(300),
+              display: 'flex',
+            }}
+          >
+            <Box grow="Yes">
+              <Scroll size="0" hideTrack visibility="Hover">
+                <Box direction="Column" style={{ padding: config.space.S100 }}>
+                  {members.map((callMember) => {
+                    const userId = callMember.sender;
+                    if (!userId) return null;
+                    const name =
+                      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+                    const avatarMxc = getMemberAvatarMxc(room, userId);
+                    const avatarUrl = avatarMxc
+                      ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+                      : undefined;
+
+                    return (
+                      <MenuItem
+                        key={callMember.membershipID}
+                        size="400"
+                        variant="Surface"
+                        radii="300"
+                        style={{ paddingLeft: config.space.S200 }}
+                        onClick={(evt) =>
+                          openUserProfile(
+                            room.roomId,
+                            undefined,
+                            userId,
+                            getMouseEventCords(evt.nativeEvent),
+                            'Right'
+                          )
+                        }
+                        before={
+                          <Avatar size="200" radii="400">
+                            <UserAvatar
+                              userId={userId}
+                              src={avatarUrl}
+                              alt={name}
+                              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                            />
+                          </Avatar>
+                        }
+                      >
+                        <Text size="T300" truncate>
+                          {name}
+                        </Text>
+                      </MenuItem>
+                    );
+                  })}
+                </Box>
+              </Scroll>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="Surface"
+        fill="Soft"
+        before={<Badge variant="Critical" fill="Solid" size="200" />}
+        after={<Icon size="50" src={cords ? Icons.ChevronBottom : Icons.ChevronTop} />}
+        radii="Pill"
+        onClick={handleOpenMenu}
+      >
+        <Text className={css.LiveChipText} as="span" size="L400" truncate>
+          {count} Live
+        </Text>
+      </Chip>
+    </PopOut>
+  );
+}

src/app/features/call-status/MemberGlance.tsx

@@ -0,0 +1,75 @@
+import { Box, config, Icon, Icons, Text } from 'folds';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import React from 'react';
+import { Room } from 'matrix-js-sdk';
+import { UserAvatar } from '../../components/user-avatar';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { StackedAvatar } from '../../components/stacked-avatar';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { getMouseEventCords } from '../../utils/dom';
+import * as css from './styles.css';
+
+type MemberGlanceProps = {
+  room: Room;
+  members: CallMembership[];
+  speakers: Set<string>;
+  max?: number;
+};
+export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const visibleMembers = members.slice(0, max);
+  const remainingCount = max && members.length > max ? members.length - max : 0;
+
+  return (
+    <Box alignItems="Center">
+      {visibleMembers.map((callMember) => {
+        const userId = callMember.sender;
+        if (!userId) return null;
+        const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+        const avatarMxc = getMemberAvatarMxc(room, userId);
+        const avatarUrl = avatarMxc
+          ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+          : undefined;
+
+        return (
+          <StackedAvatar
+            key={callMember.membershipID}
+            className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
+            title={name}
+            as="button"
+            variant="Background"
+            size="200"
+            radii="Pill"
+            onClick={(evt) =>
+              openUserProfile(
+                room.roomId,
+                undefined,
+                userId,
+                getMouseEventCords(evt.nativeEvent),
+                'Top'
+              )
+            }
+          >
+            <UserAvatar
+              userId={userId}
+              src={avatarUrl}
+              alt={name}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </StackedAvatar>
+        );
+      })}
+      {remainingCount > 0 && (
+        <Text size="L400" style={{ paddingLeft: config.space.S100 }}>
+          +{remainingCount}
+        </Text>
+      )}
+    </Box>
+  );
+}

src/app/features/call-status/MemberSpeaking.tsx

@@ -0,0 +1,78 @@
+import { Room } from 'matrix-js-sdk';
+import React from 'react';
+import { Box, Icon, Icons, Text } from 'folds';
+import { getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+
+type MemberSpeakingProps = {
+  room: Room;
+  speakers: Set<string>;
+};
+export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) {
+  const speakingNames = Array.from(speakers).map(
+    (userId) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId
+  );
+  return (
+    <Box alignItems="Center" gap="100">
+      <Icon size="100" src={Icons.Mic} filled />
+      <Text size="T200" truncate>
+        {speakingNames.length === 1 && (
+          <>
+            <b>{speakingNames[0]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' is speaking...'}
+            </Text>
+          </>
+        )}
+        {speakingNames.length === 2 && (
+          <>
+            <b>{speakingNames[0]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' and '}
+            </Text>
+            <b>{speakingNames[1]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' are speaking...'}
+            </Text>
+          </>
+        )}
+        {speakingNames.length === 3 && (
+          <>
+            <b>{speakingNames[0]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {', '}
+            </Text>
+            <b>{speakingNames[1]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' and '}
+            </Text>
+            <b>{speakingNames[2]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' are speaking...'}
+            </Text>
+          </>
+        )}
+        {speakingNames.length > 3 && (
+          <>
+            <b>{speakingNames[0]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {', '}
+            </Text>
+            <b>{speakingNames[1]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {', '}
+            </Text>
+            <b>{speakingNames[2]}</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' and '}
+            </Text>
+            <b>{speakingNames.length - 3} others</b>
+            <Text as="span" size="Inherit" priority="300">
+              {' are speaking...'}
+            </Text>
+          </>
+        )}
+      </Text>
+    </Box>
+  );
+}

src/app/features/call-status/components.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Line } from 'folds';
+import * as css from './styles.css';
+
+export function StatusDivider() {
+  return (
+    <Line variant="Background" size="300" direction="Vertical" className={css.ControlDivider} />
+  );
+}

src/app/features/call-status/index.ts

@@ -0,0 +1 @@
+export * from './CallStatus';

src/app/features/call-status/styles.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const LiveChipText = style({
+  color: color.Critical.Main,
+});
+
+export const CallStatus = style([
+  {
+    padding: `${toRem(6)} ${config.space.S200}`,
+    borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
+  },
+]);
+
+export const ControlDivider = style({
+  height: toRem(16),
+});
+
+export const SpeakerAvatarOutline = style({
+  boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Success.Main}`,
+});

src/app/features/call/CallControls.tsx

@@ -0,0 +1,203 @@
+import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
+import {
+  Box,
+  Button,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { SequenceCard } from '../../components/sequence-card';
+import * as css from './styles.css';
+import {
+  ChatButton,
+  ControlDivider,
+  MicrophoneButton,
+  ScreenShareButton,
+  SoundButton,
+  VideoButton,
+} from './Controls';
+import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { stopPropagation } from '../../utils/keyboard';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+
+type CallControlsProps = {
+  callEmbed: CallEmbed;
+};
+export function CallControls({ callEmbed }: CallControlsProps) {
+  const controlRef = useRef<HTMLDivElement>(null);
+  const [compact, setCompact] = useState(document.body.clientWidth < 500);
+
+  useResizeObserver(
+    useCallback(() => {
+      const element = controlRef.current;
+      if (!element) return;
+      setCompact(element.clientWidth < 500);
+    }, []),
+    useCallback(() => controlRef.current, [])
+  );
+
+  const { microphone, video, sound, screenshare, spotlight } = useCallControlState(
+    callEmbed.control
+  );
+
+  const [cords, setCords] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSpotlightClick = () => {
+    callEmbed.control.toggleSpotlight();
+    setCords(undefined);
+  };
+
+  const handleReactionsClick = () => {
+    callEmbed.control.toggleReactions();
+    setCords(undefined);
+  };
+
+  const handleSettingsClick = () => {
+    callEmbed.control.toggleSettings();
+    setCords(undefined);
+  };
+
+  const [hangupState, hangup] = useAsyncCallback(
+    useCallback(() => callEmbed.hangup(), [callEmbed])
+  );
+  const exiting =
+    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;
+
+  return (
+    <Box
+      ref={controlRef}
+      className={css.CallControlContainer}
+      justifyContent="Center"
+      alignItems="Center"
+    >
+      <SequenceCard
+        className={css.ControlCard}
+        variant="SurfaceVariant"
+        gap="400"
+        radii="500"
+        alignItems="Center"
+        justifyContent="SpaceBetween"
+      >
+        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
+          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+            <MicrophoneButton
+              enabled={microphone}
+              onToggle={() => callEmbed.control.toggleMicrophone()}
+            />
+            <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
+          </Box>
+          {!compact && <ControlDivider />}
+          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
+            <ScreenShareButton
+              enabled={screenshare}
+              onToggle={() => callEmbed.control.toggleScreenshare()}
+            />
+          </Box>
+        </Box>
+        {!compact && <ControlDivider />}
+        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
+          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+            <ChatButton />
+            <PopOut
+              anchor={cords}
+              position="Top"
+              align="Center"
+              content={
+                <FocusTrap
+                  focusTrapOptions={{
+                    initialFocus: false,
+                    onDeactivate: () => setCords(undefined),
+                    clickOutsideDeactivates: true,
+                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                    escapeDeactivates: stopPropagation,
+                  }}
+                >
+                  <Menu>
+                    <Box direction="Column" style={{ padding: config.space.S100 }}>
+                      <MenuItem
+                        size="300"
+                        variant="Surface"
+                        radii="300"
+                        onClick={handleSpotlightClick}
+                      >
+                        <Text size="B300" truncate>
+                          {spotlight ? 'Grid View' : 'Spotlight View'}
+                        </Text>
+                      </MenuItem>
+                      <MenuItem
+                        size="300"
+                        variant="Surface"
+                        radii="300"
+                        onClick={handleReactionsClick}
+                      >
+                        <Text size="B300" truncate>
+                          Reactions
+                        </Text>
+                      </MenuItem>
+                      <MenuItem
+                        size="300"
+                        variant="Surface"
+                        radii="300"
+                        onClick={handleSettingsClick}
+                      >
+                        <Text size="B300" truncate>
+                          Settings
+                        </Text>
+                      </MenuItem>
+                    </Box>
+                  </Menu>
+                </FocusTrap>
+              }
+            >
+              <IconButton
+                variant="Surface"
+                fill="Soft"
+                radii="400"
+                size="400"
+                onClick={handleOpenMenu}
+                outlined
+                aria-pressed={!!cords}
+              >
+                <Icon size="400" src={Icons.VerticalDots} />
+              </IconButton>
+            </PopOut>
+          </Box>
+          <Box shrink="No" direction="Column">
+            <Button
+              style={{ minWidth: toRem(88) }}
+              variant="Critical"
+              fill="Solid"
+              onClick={hangup}
+              before={
+                exiting ? (
+                  <Spinner variant="Critical" fill="Solid" size="200" />
+                ) : (
+                  <Icon src={Icons.PhoneDown} size="200" filled />
+                )
+              }
+              disabled={exiting}
+            >
+              <Text size="B400">End</Text>
+            </Button>
+          </Box>
+        </Box>
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/features/call/CallMemberCard.tsx

@@ -0,0 +1,121 @@
+import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import React, { useState } from 'react';
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { SequenceCard } from '../../components/sequence-card';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { useRoom } from '../../hooks/useRoom';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { UserAvatar } from '../../components/user-avatar';
+import { getMouseEventCords } from '../../utils/dom';
+import * as css from './styles.css';
+
+interface MemberWithMembershipData {
+  membershipData?: SessionMembershipData & {
+    'm.call.intent': 'video' | 'audio';
+  };
+}
+
+type CallMemberCardProps = {
+  member: CallMembership;
+};
+export function CallMemberCard({ member }: CallMemberCardProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = useRoom();
+
+  const openUserProfile = useOpenUserRoomProfile();
+
+  const userId = member.sender;
+  if (!userId) return null;
+
+  const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarMxc = getMemberAvatarMxc(room, userId);
+  const avatarUrl = avatarMxc
+    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+    : undefined;
+
+  const audioOnly =
+    (member as unknown as MemberWithMembershipData).membershipData?.['m.call.intent'] === 'audio';
+
+  return (
+    <SequenceCard
+      as="button"
+      key={member.membershipID}
+      className={css.CallMemberCard}
+      variant="SurfaceVariant"
+      radii="500"
+      onClick={(evt: any) =>
+        openUserProfile(
+          room.roomId,
+          undefined,
+          userId,
+          getMouseEventCords(evt.nativeEvent),
+          'Right'
+        )
+      }
+    >
+      <Box grow="Yes" gap="300" alignItems="Center">
+        <Avatar size="200" radii="400">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            alt={name}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
+        <Box grow="Yes">
+          <Text size="L400" truncate>
+            {name}
+          </Text>
+        </Box>
+        {audioOnly && <Icon src={Icons.VideoCameraMute} size="100" />}
+      </Box>
+    </SequenceCard>
+  );
+}
+
+export function CallMemberRenderer({
+  members,
+  max = 4,
+}: {
+  members: CallMembership[];
+  max?: number;
+}) {
+  const [viewMore, setViewMore] = useState(false);
+
+  const truncatedMembers = viewMore ? members : members.slice(0, 4);
+  const remaining = members.length - truncatedMembers.length;
+
+  return (
+    <>
+      {truncatedMembers.map((member) => (
+        <CallMemberCard key={member.membershipID} member={member} />
+      ))}
+      {members.length > max && (
+        <SequenceCard
+          as="button"
+          className={css.CallMemberCard}
+          variant="SurfaceVariant"
+          radii="500"
+          onClick={() => setViewMore(!viewMore)}
+        >
+          <Box grow="Yes" gap="300" alignItems="Center">
+            {viewMore ? (
+              <Text size="L400" truncate>
+                Collapse
+              </Text>
+            ) : (
+              <Text size="L400" truncate>
+                {remaining === 0 ? `+${remaining} Other` : `+${remaining} Others`}
+              </Text>
+            )}
+          </Box>
+          <Icon src={viewMore ? Icons.ChevronTop : Icons.ChevronBottom} size="100" />
+        </SequenceCard>
+      )}
+    </>
+  );
+}

src/app/features/call/CallView.tsx

@@ -0,0 +1,150 @@
+import React, { RefObject, useRef } from 'react';
+import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
+import { useCallEmbed, useCallJoined, useCallEmbedPlacementSync } from '../../hooks/useCallEmbed';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { PrescreenControls } from './PrescreenControls';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useRoom } from '../../hooks/useRoom';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { StateEvent } from '../../../types/matrix/room';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { CallMemberRenderer } from './CallMemberCard';
+import * as css from './styles.css';
+import { CallControls } from './CallControls';
+import { useLivekitSupport } from '../../hooks/useLivekitSupport';
+
+function LivekitServerMissingMessage() {
+  return (
+    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+      Your homeserver does not support calling. But you can still join call started by others.
+    </Text>
+  );
+}
+
+function JoinMessage({
+  hasParticipant,
+  livekitSupported,
+}: {
+  hasParticipant?: boolean;
+  livekitSupported?: boolean;
+}) {
+  if (hasParticipant) return null;
+
+  if (livekitSupported === false) {
+    return <LivekitServerMissingMessage />;
+  }
+
+  return (
+    <Text style={{ margin: 'auto' }} size="L400" align="Center">
+      Voice chat’s empty — Be the first to hop in!
+    </Text>
+  );
+}
+
+function NoPermissionMessage() {
+  return (
+    <Text style={{ margin: 'auto' }} size="L400" align="Center">
+      You don&#39;t have permission to join!
+    </Text>
+  );
+}
+
+function AlreadyInCallMessage() {
+  return (
+    <Text style={{ margin: 'auto', color: color.Warning.Main }} size="L400" align="Center">
+      Already in another call — End the current call to join!
+    </Text>
+  );
+}
+
+function CallPrescreen() {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const livekitSupported = useLivekitSupport();
+
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const hasPermission = permissions.event(StateEvent.GroupCallMemberPrefix, mx.getSafeUserId());
+
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const hasParticipant = callMembers.length > 0;
+
+  const callEmbed = useCallEmbed();
+  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
+
+  const canJoin = hasPermission && (livekitSupported || hasParticipant);
+
+  return (
+    <Scroll variant="Surface" hideTrack>
+      <Box className={css.CallViewContent} alignItems="Center" justifyContent="Center">
+        <Box style={{ maxWidth: toRem(382), width: '100%' }} direction="Column" gap="100">
+          {hasParticipant && (
+            <Header size="300">
+              <Box grow="Yes" alignItems="Center">
+                <Text size="L400">Participant</Text>
+              </Box>
+              <Badge variant="Critical" fill="Solid" size="400">
+                <Text as="span" size="L400" truncate>
+                  {callMembers.length} Live
+                </Text>
+              </Badge>
+            </Header>
+          )}
+          <CallMemberRenderer members={callMembers} />
+          <PrescreenControls canJoin={canJoin} />
+          <Box className={css.PrescreenMessage} alignItems="Center">
+            {!inOtherCall &&
+              (hasPermission ? (
+                <JoinMessage hasParticipant={hasParticipant} livekitSupported={livekitSupported} />
+              ) : (
+                <NoPermissionMessage />
+              ))}
+            {inOtherCall && <AlreadyInCallMessage />}
+          </Box>
+        </Box>
+      </Box>
+    </Scroll>
+  );
+}
+
+type CallJoinedProps = {
+  containerRef: RefObject<HTMLDivElement>;
+  joined: boolean;
+};
+function CallJoined({ joined, containerRef }: CallJoinedProps) {
+  const callEmbed = useCallEmbed();
+
+  return (
+    <Box grow="Yes" direction="Column">
+      <Box grow="Yes" ref={containerRef} />
+      {callEmbed && joined && <CallControls callEmbed={callEmbed} />}
+    </Box>
+  );
+}
+
+export function CallView() {
+  const room = useRoom();
+  const callContainerRef = useRef<HTMLDivElement>(null);
+  useCallEmbedPlacementSync(callContainerRef);
+
+  const callEmbed = useCallEmbed();
+  const callJoined = useCallJoined(callEmbed);
+
+  const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
+
+  return (
+    <Box
+      className={ContainerColor({ variant: 'Surface' })}
+      style={{ minWidth: toRem(280) }}
+      grow="Yes"
+    >
+      {!currentJoined && <CallPrescreen />}
+      <CallJoined joined={currentJoined} containerRef={callContainerRef} />
+    </Box>
+  );
+}

src/app/features/call/Controls.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds';
+import { useAtom } from 'jotai';
+import * as css from './styles.css';
+import { callChatAtom } from '../../state/callEmbed';
+
+export function ControlDivider() {
+  return (
+    <Line variant="SurfaceVariant" size="300" direction="Vertical" className={css.ControlDivider} />
+  );
+}
+
+type MicrophoneButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Surface' : 'Warning'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type SoundButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Surface' : 'Warning'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon
+            size="400"
+            src={enabled ? Icons.Headphone : Icons.HeadphoneMute}
+            filled={!enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type VideoButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Camera' : 'Start Camera'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon
+            size="400"
+            src={enabled ? Icons.VideoCamera : Icons.VideoCameraMute}
+            filled={enabled}
+          />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+type ScreenShareButtonProps = {
+  enabled: boolean;
+  onToggle: () => void;
+};
+export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps) {
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{enabled ? 'Stop Screenshare' : 'Start Screenshare'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={enabled ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => onToggle()}
+          outlined
+        >
+          <Icon size="400" src={Icons.ScreenShare} filled={enabled} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
+export function ChatButton() {
+  const [chat, setChat] = useAtom(callChatAtom);
+
+  return (
+    <TooltipProvider
+      position="Top"
+      delay={500}
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{chat ? 'Close Chat' : 'Open Chat'}</Text>
+        </Tooltip>
+      }
+    >
+      {(anchorRef) => (
+        <IconButton
+          ref={anchorRef}
+          variant={chat ? 'Success' : 'Surface'}
+          fill="Soft"
+          radii="400"
+          size="400"
+          onClick={() => setChat(!chat)}
+          outlined
+        >
+          <Icon size="400" src={Icons.Message} filled={chat} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}

src/app/features/call/PrescreenControls.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
+import { SequenceCard } from '../../components/sequence-card';
+import * as css from './styles.css';
+import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
+import { useCallEmbed, useCallJoined, useCallStart } from '../../hooks/useCallEmbed';
+import { useCallPreferences } from '../../state/hooks/callPreferences';
+
+type PrescreenControlsProps = {
+  canJoin?: boolean;
+};
+export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
+  const room = useRoom();
+  const callEmbed = useCallEmbed();
+  const callJoined = useCallJoined(callEmbed);
+  const direct = useIsDirectRoom();
+
+  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
+
+  const startCall = useCallStart(direct);
+  const joining = callEmbed?.roomId === room.roomId && !callJoined;
+
+  const disabled = inOtherCall || !canJoin;
+
+  const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
+    useCallPreferences();
+
+  return (
+    <SequenceCard
+      className={css.ControlCard}
+      variant="SurfaceVariant"
+      gap="400"
+      radii="500"
+      alignItems="Center"
+      justifyContent="SpaceBetween"
+      wrap="Wrap"
+    >
+      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
+        <MicrophoneButton enabled={microphone} onToggle={toggleMicrophone} />
+        <SoundButton enabled={sound} onToggle={toggleSound} />
+      </Box>
+      <ControlDivider />
+      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
+        <VideoButton enabled={video} onToggle={toggleVideo} />
+        <ChatButton />
+      </Box>
+      <Box grow="Yes" direction="Column">
+        <Button
+          variant={disabled ? 'Secondary' : 'Success'}
+          fill={disabled ? 'Soft' : 'Solid'}
+          onClick={() => startCall(room, { microphone, video, sound })}
+          disabled={disabled || joining}
+          before={
+            joining ? (
+              <Spinner variant="Success" fill="Solid" size="200" />
+            ) : (
+              <Icon src={Icons.Phone} size="200" filled />
+            )
+          }
+        >
+          <Text size="B400">Join</Text>
+        </Button>
+      </Box>
+    </SequenceCard>
+  );
+}

src/app/features/call/styles.css.ts

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const CallViewContent = style({
+  padding: config.space.S400,
+  paddingRight: 0,
+  minHeight: '100%',
+});
+
+export const ControlCard = style({
+  padding: config.space.S300,
+});
+
+export const ControlDivider = style({
+  height: toRem(24),
+});
+
+export const CallMemberCard = style({
+  padding: config.space.S300,
+});
+
+export const CallControlContainer = style({
+  padding: config.space.S400,
+});
+
+export const PrescreenMessage = style({
+  padding: config.space.S200,
+});

src/app/features/common-settings/general/RoomJoinRules.tsx

@@ -6,9 +6,8 @@ import { useAtomValue } from 'jotai';
 import {
   ExtendedJoinRules,
   JoinRulesSwitcher,
-  useRoomJoinRuleIcon,
+  useJoinRuleIcons,
   useRoomJoinRuleLabel,
-  useSpaceJoinRuleIcon,
 } from '../../../components/JoinRulesSwitcher';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
@@ -75,8 +74,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
     return r;
   }, [allowKnockRestricted, allowRestricted, allowKnock, space]);
 
-  const icons = useRoomJoinRuleIcon();
-  const spaceIcons = useSpaceJoinRuleIcon();
+  const icons = useJoinRuleIcons(room.getType());
   const labels = useRoomJoinRuleLabel();
 
   const [submitState, submit] = useAsyncCallback(
@@ -137,7 +135,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
         }
         after={
           <JoinRulesSwitcher
-            icons={room.isSpaceRoom() ? spaceIcons : icons}
+            icons={icons}
             labels={labels}
             rules={joinRules}
             value={rule}

src/app/features/common-settings/general/RoomProfile.tsx

@@ -199,7 +199,7 @@ export function RoomProfileEdit({
               alt={name}
               renderFallback={() => (
                 <RoomIcon
-                  space={room.isSpaceRoom()}
+                  roomType={room.getType()}
                   size="400"
                   joinRule={joinRule?.join_rule ?? JoinRule.Invite}
                   filled
@@ -342,7 +342,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
                   alt={name}
                   renderFallback={() => (
                     <RoomIcon
-                      space={room.isSpaceRoom()}
+                      roomType={room.getType()}
                       size="400"
                       joinRule={joinRule?.join_rule ?? JoinRule.Invite}
                       filled

src/app/features/common-settings/members/Members.tsx

@@ -27,7 +27,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomMembers } from '../../../hooks/useRoomMembers';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { useGetMemberPowerLevel, usePowerLevels } from '../../../hooks/usePowerLevels';
 import { VirtualTile } from '../../../components/virtualizer';
 import { MemberTile } from '../../../components/member-tile';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -87,12 +87,13 @@ export function Members({ requestClose }: MembersProps) {
   const powerLevels = usePowerLevels(room);
   const creators = useRoomCreators(room);
   const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const getPowerLevel = useGetMemberPowerLevel(powerLevels);
 
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu());
   const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
-  const memberPowerSort = useMemberPowerSort(creators);
+  const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);

src/app/features/create-room/CreateRoom.tsx

@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
+import { MatrixError, Room, JoinRule } from 'matrix-js-sdk';
 import {
   Box,
   Button,
@@ -33,24 +33,43 @@ import {
   createRoom,
   CreateRoomAliasInput,
   CreateRoomData,
-  CreateRoomKind,
-  CreateRoomKindSelector,
+  CreateRoomAccess,
+  CreateRoomAccessSelector,
   RoomVersionSelector,
   useAdditionalCreators,
+  CreateRoomType,
 } from '../../components/create-room';
+import { RoomType } from '../../../types/matrix/room';
+import { CreateRoomTypeSelector } from '../../components/create-room/CreateRoomTypeSelector';
+import { getRoomIconSrc } from '../../utils/room';
 
-const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.HashLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
-  return Icons.HashGlobe;
+const getCreateRoomAccessToIcon = (access: CreateRoomAccess, type?: CreateRoomType) => {
+  const isVoiceRoom = type === CreateRoomType.VoiceRoom;
+
+  let joinRule: JoinRule = JoinRule.Public;
+  if (access === CreateRoomAccess.Restricted) joinRule = JoinRule.Restricted;
+  if (access === CreateRoomAccess.Private) joinRule = JoinRule.Knock;
+
+  return getRoomIconSrc(Icons, isVoiceRoom ? RoomType.Call : undefined, joinRule);
+};
+
+const getCreateRoomTypeToIcon = (type: CreateRoomType) => {
+  if (type === CreateRoomType.VoiceRoom) return Icons.VolumeHigh;
+  return Icons.Hash;
 };
 
 type CreateRoomFormProps = {
-  defaultKind?: CreateRoomKind;
+  defaultAccess?: CreateRoomAccess;
+  defaultType?: CreateRoomType;
   space?: Room;
   onCreate?: (roomId: string) => void;
 };
-export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
+export function CreateRoomForm({
+  defaultAccess,
+  defaultType,
+  space,
+  onCreate,
+}: CreateRoomFormProps) {
   const mx = useMatrixClient();
   const alive = useAlive();
 
@@ -64,8 +83,9 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
 
   const allowRestricted = space && restrictedSupported(selectedRoomVersion);
 
-  const [kind, setKind] = useState(
-    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
+  const [type, setType] = useState(defaultType ?? CreateRoomType.TextRoom);
+  const [access, setAccess] = useState(
+    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
   );
   const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
   const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
@@ -75,13 +95,13 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
   const [knock, setKnock] = useState(false);
   const [advance, setAdvance] = useState(false);
 
-  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
   const allowKnockRestricted =
-    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+    access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);
 
   const handleRoomVersionChange = (version: string) => {
     if (!restrictedSupported(version)) {
-      setKind(CreateRoomKind.Private);
+      setAccess(CreateRoomAccess.Private);
     }
     selectRoomVersion(version);
   };
@@ -107,19 +127,23 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
       aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
 
     if (!roomName) return;
-    const publicRoom = kind === CreateRoomKind.Public;
+    const publicRoom = access === CreateRoomAccess.Public;
     let roomKnock = false;
-    if (allowKnock && kind === CreateRoomKind.Private) {
+    if (allowKnock && access === CreateRoomAccess.Private) {
       roomKnock = knock;
     }
-    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+    if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
       roomKnock = knock;
     }
 
+    let roomType: RoomType | undefined;
+    if (type === CreateRoomType.VoiceRoom) roomType = RoomType.Call;
+
     create({
       version: selectedRoomVersion,
+      type: roomType,
       parent: space,
-      kind,
+      access,
       name: roomName,
       topic: roomTopic || undefined,
       aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -136,21 +160,32 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
 
   return (
     <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
+      {!space && (
+        <Box direction="Column" gap="100">
+          <Text size="L400">Type</Text>
+          <CreateRoomTypeSelector
+            value={type}
+            onSelect={setType}
+            disabled={disabled}
+            getIcon={getCreateRoomTypeToIcon}
+          />
+        </Box>
+      )}
       <Box direction="Column" gap="100">
         <Text size="L400">Access</Text>
-        <CreateRoomKindSelector
-          value={kind}
-          onSelect={setKind}
+        <CreateRoomAccessSelector
+          value={access}
+          onSelect={setAccess}
           canRestrict={allowRestricted}
           disabled={disabled}
-          getIcon={getCreateRoomKindToIcon}
+          getIcon={(roomAccess) => getCreateRoomAccessToIcon(roomAccess, type)}
         />
       </Box>
       <Box shrink="No" direction="Column" gap="100">
         <Text size="L400">Name</Text>
         <Input
           required
-          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
+          before={<Icon size="100" src={getCreateRoomAccessToIcon(access, type)} />}
           name="nameInput"
           autoFocus
           size="500"
@@ -171,7 +206,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
         />
       </Box>
 
-      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
+      {access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}
 
       <Box shrink="No" direction="Column" gap="100">
         <Box gap="200" alignItems="End">
@@ -183,7 +218,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
               onClick={() => setAdvance(!advance)}
               type="button"
             >
-              <Text size="T200">Advance Options</Text>
+              <Text size="T200">Advanced Options</Text>
             </Chip>
           </Box>
         </Box>
@@ -201,7 +236,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
             />
           </SequenceCard>
         )}
-        {kind !== CreateRoomKind.Public && (
+        {access !== CreateRoomAccess.Public && (
           <>
             <SequenceCard
               style={{ padding: config.space.S300 }}

src/app/features/create-room/CreateRoomModal.tsx

@@ -23,12 +23,13 @@ import {
 } from '../../state/hooks/createRoomModal';
 import { CreateRoomModalState } from '../../state/createRoomModal';
 import { stopPropagation } from '../../utils/keyboard';
+import { CreateRoomType } from '../../components/create-room/types';
 
 type CreateRoomModalProps = {
   state: CreateRoomModalState;
 };
 function CreateRoomModal({ state }: CreateRoomModalProps) {
-  const { spaceId } = state;
+  const { spaceId, type } = state;
   const closeDialog = useCloseCreateRoomModal();
 
   const allJoinedRooms = useAllJoinedRoomsSet();
@@ -57,7 +58,9 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text size="H4">New Room</Text>
+                    <Text size="H4">
+                      {type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
+                    </Text>
                   </Box>
                   <Box shrink="No">
                     <IconButton size="300" radii="300" onClick={closeDialog}>
@@ -74,7 +77,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     direction="Column"
                     gap="500"
                   >
-                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                    <CreateRoomForm space={space} onCreate={closeDialog} defaultType={type} />
                   </Box>
                 </Scroll>
               </Box>

src/app/features/create-space/CreateSpace.tsx

@@ -33,25 +33,25 @@ import {
   createRoom,
   CreateRoomAliasInput,
   CreateRoomData,
-  CreateRoomKind,
-  CreateRoomKindSelector,
+  CreateRoomAccess,
+  CreateRoomAccessSelector,
   RoomVersionSelector,
   useAdditionalCreators,
 } from '../../components/create-room';
 import { RoomType } from '../../../types/matrix/room';
 
-const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
-  if (kind === CreateRoomKind.Private) return Icons.SpaceLock;
-  if (kind === CreateRoomKind.Restricted) return Icons.Space;
+const getCreateSpaceAccessToIcon = (access: CreateRoomAccess) => {
+  if (access === CreateRoomAccess.Private) return Icons.SpaceLock;
+  if (access === CreateRoomAccess.Restricted) return Icons.Space;
   return Icons.SpaceGlobe;
 };
 
 type CreateSpaceFormProps = {
-  defaultKind?: CreateRoomKind;
+  defaultAccess?: CreateRoomAccess;
   space?: Room;
   onCreate?: (roomId: string) => void;
 };
-export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFormProps) {
+export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceFormProps) {
   const mx = useMatrixClient();
   const alive = useAlive();
 
@@ -65,8 +65,8 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
 
   const allowRestricted = space && restrictedSupported(selectedRoomVersion);
 
-  const [kind, setKind] = useState(
-    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
+  const [access, setAccess] = useState(
+    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
   );
 
   const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
@@ -76,13 +76,13 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
   const [knock, setKnock] = useState(false);
   const [advance, setAdvance] = useState(false);
 
-  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
+  const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
   const allowKnockRestricted =
-    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
+    access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);
 
   const handleRoomVersionChange = (version: string) => {
     if (!restrictedSupported(version)) {
-      setKind(CreateRoomKind.Private);
+      setAccess(CreateRoomAccess.Private);
     }
     selectRoomVersion(version);
   };
@@ -108,12 +108,12 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
       aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
 
     if (!roomName) return;
-    const publicRoom = kind === CreateRoomKind.Public;
+    const publicRoom = access === CreateRoomAccess.Public;
     let roomKnock = false;
-    if (allowKnock && kind === CreateRoomKind.Private) {
+    if (allowKnock && access === CreateRoomAccess.Private) {
       roomKnock = knock;
     }
-    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
+    if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
       roomKnock = knock;
     }
 
@@ -121,7 +121,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
       version: selectedRoomVersion,
       type: RoomType.Space,
       parent: space,
-      kind,
+      access,
       name: roomName,
       topic: roomTopic || undefined,
       aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -139,19 +139,19 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
     <Box as="form" onSubmit={handleSubmit} grow="Yes" direction="Column" gap="500">
       <Box direction="Column" gap="100">
         <Text size="L400">Access</Text>
-        <CreateRoomKindSelector
-          value={kind}
-          onSelect={setKind}
+        <CreateRoomAccessSelector
+          value={access}
+          onSelect={setAccess}
           canRestrict={allowRestricted}
           disabled={disabled}
-          getIcon={getCreateSpaceKindToIcon}
+          getIcon={getCreateSpaceAccessToIcon}
         />
       </Box>
       <Box shrink="No" direction="Column" gap="100">
         <Text size="L400">Name</Text>
         <Input
           required
-          before={<Icon size="100" src={getCreateSpaceKindToIcon(kind)} />}
+          before={<Icon size="100" src={getCreateSpaceAccessToIcon(access)} />}
           name="nameInput"
           autoFocus
           size="500"
@@ -172,7 +172,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
         />
       </Box>
 
-      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
+      {access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}
 
       <Box shrink="No" direction="Column" gap="100">
         <Box gap="200" alignItems="End">
@@ -184,7 +184,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
               onClick={() => setAdvance(!advance)}
               type="button"
             >
-              <Text size="T200">Advance Options</Text>
+              <Text size="T200">Advanced Options</Text>
             </Chip>
           </Box>
         </Box>
@@ -202,7 +202,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
             />
           </SequenceCard>
         )}
-        {kind !== CreateRoomKind.Public && advance && (allowKnock || allowKnockRestricted) && (
+        {access !== CreateRoomAccess.Public && advance && (allowKnock || allowKnockRestricted) && (
           <SequenceCard
             style={{ padding: config.space.S300 }}
             variant="SurfaceVariant"

src/app/features/lobby/LobbyHeader.tsx

@@ -165,7 +165,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
             <Box shrink="No">
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton fill="None" onClick={onBack}>
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
@@ -218,7 +218,11 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                <IconButton
+                  fill="None"
+                  ref={triggerRef}
+                  onClick={() => setPeopleDrawer((drawer) => !drawer)}
+                >
                   <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}
@@ -235,7 +239,12 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
             }
           >
             {(triggerRef) => (
-              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+              <IconButton
+                fill="None"
+                onClick={handleOpenMenu}
+                ref={triggerRef}
+                aria-pressed={!!menuAnchor}
+              >
                 <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
               </IconButton>
             )}

src/app/features/lobby/RoomItem.tsx

@@ -175,6 +175,7 @@ function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProf
 
 type RoomProfileProps = {
   roomId: string;
+  roomType?: string;
   name: string;
   topic?: string;
   avatarUrl?: string;
@@ -185,6 +186,7 @@ type RoomProfileProps = {
 };
 function RoomProfile({
   roomId,
+  roomType,
   name,
   topic,
   avatarUrl,
@@ -200,9 +202,7 @@ function RoomProfile({
           roomId={roomId}
           src={avatarUrl}
           alt={name}
-          renderFallback={() => (
-            <RoomIcon size="300" joinRule={joinRule ?? JoinRule.Restricted} filled />
-          )}
+          renderFallback={() => <RoomIcon size="300" joinRule={joinRule} roomType={roomType} />}
         />
       </Avatar>
       <Box grow="Yes" direction="Column">
@@ -338,6 +338,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
               {(localSummary) => (
                 <RoomProfile
                   roomId={roomId}
+                  roomType={localSummary.roomType}
                   name={localSummary.name}
                   topic={localSummary.topic}
                   avatarUrl={
@@ -396,6 +397,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
               {summary && (
                 <RoomProfile
                   roomId={roomId}
+                  roomType={summary.room_type}
                   name={summary.name || summary.canonical_alias || roomId}
                   topic={summary.topic}
                   avatarUrl={

src/app/features/lobby/SpaceItem.tsx

@@ -36,6 +36,8 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
 import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
 import { AddExistingModal } from '../add-existing';
+import { CreateRoomType } from '../../components/create-room/types';
+import { BetaNoticeBadge } from '../../components/BetaNoticeBadge';
 
 function SpaceProfileLoading() {
   return (
@@ -249,8 +251,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const handleCreateRoom = () => {
-    openCreateRoomModal(item.roomId);
+  const handleCreateRoom = (type?: CreateRoomType) => {
+    openCreateRoomModal(item.roomId, type);
     setCords(undefined);
   };
 
@@ -281,9 +283,19 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
               radii="300"
               variant="Primary"
               fill="None"
-              onClick={handleCreateRoom}
+              onClick={() => handleCreateRoom(CreateRoomType.TextRoom)}
             >
-              <Text size="T300">New Room</Text>
+              <Text size="T300">Chat Room</Text>
+            </MenuItem>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={() => handleCreateRoom(CreateRoomType.VoiceRoom)}
+              after={<BetaNoticeBadge />}
+            >
+              <Text size="T300">Voice Room</Text>
             </MenuItem>
             <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
               <Text size="T300">Existing Room</Text>

src/app/features/message-search/SearchFilters.tsx

@@ -29,7 +29,7 @@ import { SearchOrderBy } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { joinRuleToIconSrc } from '../../utils/room';
+import { getRoomIconSrc } from '../../utils/room';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
 import {
   SearchItemStrGetter,
@@ -274,9 +274,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                             before={
                               <Icon
                                 size="50"
-                                src={
-                                  joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash
-                                }
+                                src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())}
                               />
                             }
                           >
@@ -392,10 +390,7 @@ export function SearchFilters({
               onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))}
               radii="Pill"
               before={
-                <Icon
-                  size="50"
-                  src={joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash}
-                />
+                <Icon size="50" src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())} />
               }
               after={<Icon size="50" src={Icons.Cross} />}
             >

src/app/features/message-search/SearchResultGroup.tsx

@@ -203,7 +203,12 @@ export function SearchResultGroup({
               src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
               alt={room.name}
               renderFallback={() => (
-                <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
+                <RoomIcon
+                  size="50"
+                  roomType={room.getType()}
+                  joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                  filled
+                />
               )}
             />
           </Avatar>

src/app/features/room-nav/RoomNavItem.tsx

@@ -19,6 +19,7 @@ import {
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
+import { useAtom, useAtomValue } from 'jotai';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -51,6 +52,13 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { useRoomName } from '../../hooks/useRoomMeta';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
+import { callChatAtom } from '../../state/callEmbed';
+import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
+import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
+import { livekitSupport } from '../../hooks/useLivekitSupport';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -209,6 +217,24 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
   }
 );
 
+function CallChatToggle() {
+  const [chat, setChat] = useAtom(callChatAtom);
+
+  return (
+    <IconButton
+      onClick={() => setChat(!chat)}
+      aria-pressed={chat}
+      aria-label="Toggle Chat"
+      variant="Background"
+      fill="None"
+      size="300"
+      radii="300"
+    >
+      <Icon size="50" src={Icons.Message} filled={chat} />
+    </IconButton>
+  );
+}
+
 type RoomNavItemProps = {
   room: Room;
   selected: boolean;
@@ -236,6 +262,8 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
 
+  const roomName = useRoomName(room);
+
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
     setMenuAnchor({
@@ -251,6 +279,29 @@ export function RoomNavItem({
   };
 
   const optionsVisible = hover || !!menuAnchor;
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const startCall = useCallStart(direct);
+  const callEmbed = useCallEmbed();
+  const callPref = useAtomValue(useCallPreferencesAtom());
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+
+  const handleStartCall: MouseEventHandler<HTMLAnchorElement> = (evt) => {
+    // Do not join if no livekit support or call is not started by others
+    if (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0) {
+      return;
+    }
+
+    // Do not join if already in call
+    if (callEmbed) {
+      return;
+    }
+    // Start call in second click
+    if (selected) {
+      evt.preventDefault();
+      startCall(room, callPref);
+    }
+  };
 
   return (
     <NavItem
@@ -263,7 +314,7 @@ export function RoomNavItem({
       {...hoverProps}
       {...focusWithinProps}
     >
-      <NavLink to={linkPath}>
+      <NavLink to={linkPath} onClick={room.isCallRoom() ? handleStartCall : undefined}>
         <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
@@ -275,25 +326,28 @@ export function RoomNavItem({
                       ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
                       : getRoomAvatarUrl(mx, room, 96, useAuthentication)
                   }
-                  alt={room.name}
+                  alt={roomName}
                   renderFallback={() => (
                     <Text as="span" size="H6">
-                      {nameInitials(room.name)}
+                      {nameInitials(roomName)}
                     </Text>
                   )}
                 />
               ) : (
                 <RoomIcon
-                  style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                  style={{
+                    opacity: unread ? config.opacity.P500 : config.opacity.P300,
+                  }}
                   filled={selected}
                   size="100"
                   joinRule={room.getJoinRule()}
+                  roomType={room.getType()}
                 />
               )}
             </Avatar>
             <Box as="span" grow="Yes">
               <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
-                {room.name}
+                {roomName}
               </Text>
             </Box>
             {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
@@ -307,14 +361,30 @@ export function RoomNavItem({
               </UnreadBadgeCenter>
             )}
             {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+              <Icon
+                size="50"
+                src={getRoomNotificationModeIcon(notificationMode)}
+                aria-label={notificationMode}
+              />
+            )}
+            {room.isCallRoom() && callMembers.length > 0 && (
+              <Badge variant="Critical" fill="Solid" size="400">
+                <Text as="span" size="L400" truncate>
+                  {callMembers.length} Live
+                </Text>
+              </Badge>
             )}
           </Box>
         </NavItemContent>
       </NavLink>
       {optionsVisible && (
         <NavItemOptions>
+          {selected && (callEmbed?.roomId === room.roomId || room.isCallRoom()) && (
+            <CallChatToggle />
+          )}
           <PopOut
+            id={`menu-${room.roomId}`}
+            aria-expanded={!!menuAnchor}
             anchor={menuAnchor}
             offset={menuAnchor?.width === 0 ? 0 : undefined}
             alignOffset={menuAnchor?.width === 0 ? 0 : -5}
@@ -343,6 +413,8 @@ export function RoomNavItem({
             <IconButton
               onClick={handleOpenMenu}
               aria-pressed={!!menuAnchor}
+              aria-controls={`menu-${room.roomId}`}
+              aria-label="More Options"
               variant="Background"
               fill="None"
               size="300"

src/app/features/room-settings/RoomSettings.tsx

@@ -104,6 +104,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
                     renderFallback={() => (
                       <RoomIcon
                         size="50"
+                        roomType={room.getType()}
                         joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
                         filled
                       />

src/app/features/room-settings/general/General.tsx

@@ -59,7 +59,7 @@ export function General({ requestClose }: GeneralProps) {
                 <RoomLocalAddresses permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
-                <Text size="L400">Advance Options</Text>
+                <Text size="L400">Advanced Options</Text>
                 <RoomUpgrade permissions={permissions} requestClose={requestClose} />
               </Box>
             </Box>

src/app/features/room-settings/permissions/Permissions.tsx

@@ -23,7 +23,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
 
   const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
   const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
-  const permissionGroups = usePermissionGroups();
+  const permissionGroups = usePermissionGroups(room.isCallRoom());
 
   const [powerEditor, setPowerEditor] = useState(false);
 

src/app/features/room-settings/permissions/usePermissionItems.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
 import { PermissionGroup } from '../../common-settings/permissions';
 
-export const usePermissionGroups = (): PermissionGroup[] => {
+export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
   const groups: PermissionGroup[] = useMemo(() => {
     const messagesGroup: PermissionGroup = {
       name: 'Messages',
@@ -46,6 +46,19 @@ export const usePermissionGroups = (): PermissionGroup[] => {
       ],
     };
 
+    const callSettingsGroup: PermissionGroup = {
+      name: 'Calls',
+      items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.GroupCallMemberPrefix,
+          },
+          name: 'Join Call',
+        },
+      ],
+    };
+
     const moderationGroup: PermissionGroup = {
       name: 'Moderation',
       items: [
@@ -177,6 +190,13 @@ export const usePermissionGroups = (): PermissionGroup[] => {
     const otherSettingsGroup: PermissionGroup = {
       name: 'Other',
       items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.PoniesRoomEmotes,
+          },
+          name: 'Manage Emojis & Stickers',
+        },
         {
           location: {
             state: true,
@@ -196,12 +216,13 @@ export const usePermissionGroups = (): PermissionGroup[] => {
 
     return [
       messagesGroup,
+      ...(isCallRoom ? [callSettingsGroup] : []),
       moderationGroup,
       roomOverviewGroup,
       roomSettingsGroup,
       otherSettingsGroup,
     ];
-  }, []);
+  }, [isCallRoom]);
 
   return groups;
 };

src/app/features/room/CallChatView.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSetAtom } from 'jotai';
+import { useParams } from 'react-router-dom';
+import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds';
+import { Page, PageHeader } from '../../components/page';
+import { callChatAtom } from '../../state/callEmbed';
+import { RoomView } from './RoomView';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+
+export function CallChatView() {
+  const { eventId } = useParams();
+  const setChat = useSetAtom(callChatAtom);
+  const screenSize = useScreenSizeContext();
+
+  const handleClose = () => setChat(false);
+
+  return (
+    <Page
+      style={{
+        width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
+        flexShrink: 0,
+        flexGrow: 0,
+      }}
+    >
+      <PageHeader>
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes">
+            <Text size="H5" truncate>
+              Chat
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center">
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Close</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes" direction="Column">
+        <RoomView eventId={eventId} />
+      </Box>
+    </Page>
+  );
+}

src/app/features/room/MembersDrawer.tsx

@@ -51,7 +51,7 @@ import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../hooks/useMemberFilter';
 import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../hooks/useMemberSort';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useGetMemberPowerLevel, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
 import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
@@ -185,6 +185,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
   const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const getPowerLevel = useGetMemberPowerLevel(powerLevels);
 
   const fetchingMembers = members.length < room.getJoinedMemberCount();
   const openUserRoomProfile = useOpenUserRoomProfile();
@@ -198,7 +199,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
   const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
   const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
-  const memberPowerSort = useMemberPowerSort(creators);
+  const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
 
   const typingMembers = useRoomTypingMember(room.roomId);
 

src/app/features/room/Room.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
+import { useAtomValue } from 'jotai';
 import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
@@ -13,6 +14,10 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { CallView } from '../call/CallView';
+import { RoomViewHeader } from './RoomViewHeader';
+import { callChatAtom } from '../../state/callEmbed';
+import { CallChatView } from './CallChatView';
 
 export function Room() {
   const { eventId } = useParams();
@@ -24,6 +29,7 @@ export function Room() {
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
+  const chat = useAtomValue(callChatAtom);
 
   useKeyDown(
     window,
@@ -37,11 +43,37 @@ export function Room() {
     )
   );
 
+  const callView = room.isCallRoom();
+
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
-        <RoomView room={room} eventId={eventId} />
-        {screenSize === ScreenSize.Desktop && isDrawer && (
+        {callView && (screenSize === ScreenSize.Desktop || !chat) && (
+          <Box grow="Yes" direction="Column">
+            <RoomViewHeader callView />
+            <Box grow="Yes">
+              <CallView />
+            </Box>
+          </Box>
+        )}
+        {!callView && (
+          <Box grow="Yes" direction="Column">
+            <RoomViewHeader />
+            <Box grow="Yes">
+              <RoomView eventId={eventId} />
+            </Box>
+          </Box>
+        )}
+
+        {callView && chat && (
+          <>
+            {screenSize === ScreenSize.Desktop && (
+              <Line variant="Background" direction="Vertical" size="300" />
+            )}
+            <CallChatView />
+          </>
+        )}
+        {!callView && screenSize === ScreenSize.Desktop && isDrawer && (
           <>
             <Line variant="Background" direction="Vertical" size="300" />
             <MembersDrawer key={room.roomId} room={room} members={members} />

src/app/features/room/RoomInput.tsx

@@ -221,7 +221,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const isComposing = useComposingCheck();
 
     useElementSizeObserver(
-      useCallback(() => document.body, []),
+      useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 

src/app/features/room/RoomTimeline.tsx

@@ -27,6 +27,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
+import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
@@ -471,6 +472,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const permissions = useRoomPermissions(creators, powerLevels);
 
   const canRedact = permissions.action('redact', mx.getSafeUserId());
+  const canDeleteOwn = permissions.event(MessageEvent.RoomRedaction, mx.getSafeUserId());
   const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
   const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
   const [editId, setEditId] = useState<string>();
@@ -1047,7 +1049,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
+            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1129,7 +1131,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
+            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1247,7 +1249,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             messageLayout={messageLayout}
             collapse={collapse}
             highlight={highlighted}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
+            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1468,6 +1470,57 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           </Event>
         );
       },
+      [StateEvent.GroupCallMemberPrefix]: (mEventId, mEvent, item) => {
+        const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderId = mEvent.getSender() ?? '';
+        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
+
+        const content = mEvent.getContent<SessionMembershipData>();
+        const prevContent = mEvent.getPrevContent();
+
+        const callJoined = content.application;
+        if (callJoined && 'application' in prevContent) {
+          return null;
+        }
+
+        const timeJSX = (
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
+        );
+
+        return (
+          <Event
+            key={mEvent.getId()}
+            data-message-item={item}
+            data-message-id={mEventId}
+            room={room}
+            mEvent={mEvent}
+            highlight={highlighted}
+            messageSpacing={messageSpacing}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
+            hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
+          >
+            <EventContent
+              messageLayout={messageLayout}
+              time={timeJSX}
+              iconSrc={callJoined ? Icons.Phone : Icons.PhoneDown}
+              content={
+                <Box grow="Yes" direction="Column">
+                  <Text size="T300" priority="300">
+                    <b>{senderName}</b>
+                    {callJoined ? ' joined the call' : ' ended the call'}
+                  </Text>
+                </Box>
+              }
+            />
+          </Event>
+        );
+      },
     },
     (mEventId, mEvent, item) => {
       if (!showHiddenEvents) return null;

src/app/features/room/RoomView.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { Box, Text, config } from 'folds';
-import { EventType, Room } from 'matrix-js-sdk';
+import { EventType } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
@@ -15,13 +15,13 @@ import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
-import { RoomViewHeader } from './RoomViewHeader';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoom } from '../../hooks/useRoom';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -30,10 +30,8 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
     return false;
   }
 
-  // do not focus on F keys
   if (FN_KEYS_REGEX.test(code)) return false;
 
-  // do not focus on numlock/scroll lock
   if (
     code.startsWith('OS') ||
     code.startsWith('Meta') ||
@@ -56,12 +54,13 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
-export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
+export function RoomView({ eventId }: { eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
+  const room = useRoom();
   const { roomId } = room;
   const editor = useEditor();
 
@@ -93,7 +92,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
   return (
     <Page ref={roomViewRef}>
-      <RoomViewHeader />
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}

src/app/features/room/RoomViewHeader.tsx

@@ -23,9 +23,7 @@ import {
   Spinner,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
-import { JoinRule, Room } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
-
+import { Room } from 'matrix-js-sdk';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -33,7 +31,7 @@ import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoom } from '../../hooks/useRoom';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
@@ -48,7 +46,6 @@ import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
@@ -69,6 +66,8 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { RoomSettingsPage } from '../../state/roomSettings';
 
 type RoomMenuProps = {
   room: Room;
@@ -254,7 +253,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
-export function RoomViewHeader() {
+export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -263,12 +262,12 @@ export function RoomViewHeader() {
   const space = useSpaceOptionally();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
-  const mDirects = useAtomValue(mDirectAtom);
+  const direct = useIsDirectRoom();
 
   const pinnedEvents = useRoomPinnedEvents(room);
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
-  const ecryptedRoom = !!encryptionEvent;
-  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
+  const encryptedRoom = !!encryptionEvent;
+  const avatarMxc = useRoomAvatar(room, direct);
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const avatarUrl = avatarMxc
@@ -295,14 +294,27 @@ export function RoomViewHeader() {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const openSettings = useOpenRoomSettings();
+  const parentSpace = useSpaceOptionally();
+  const handleMemberToggle = () => {
+    if (callView) {
+      openSettings(room.roomId, parentSpace?.roomId, RoomSettingsPage.MembersPage);
+      return;
+    }
+    setPeopleDrawer(!peopleDrawer);
+  };
+
   return (
-    <PageHeader balance={screenSize === ScreenSize.Mobile}>
+    <PageHeader
+      className={ContainerColor({ variant: 'Surface' })}
+      balance={screenSize === ScreenSize.Mobile}
+    >
       <Box grow="Yes" gap="300">
         {screenSize === ScreenSize.Mobile && (
           <BackRouteHandler>
             {(onBack) => (
               <Box shrink="No" alignItems="Center">
-                <IconButton onClick={onBack}>
+                <IconButton fill="None" onClick={onBack}>
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               </Box>
@@ -317,11 +329,7 @@ export function RoomViewHeader() {
                 src={avatarUrl}
                 alt={name}
                 renderFallback={() => (
-                  <RoomIcon
-                    size="200"
-                    joinRule={room.getJoinRule() ?? JoinRule.Restricted}
-                    filled
-                  />
+                  <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} />
                 )}
               />
             </Avatar>
@@ -369,8 +377,9 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
+
         <Box shrink="No">
-          {!ecryptedRoom && (
+          {!encryptedRoom && (
             <TooltipProvider
               position="Bottom"
               offset={4}
@@ -381,7 +390,7 @@ export function RoomViewHeader() {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                <IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
                   <Icon size="400" src={Icons.Search} />
                 </IconButton>
               )}
@@ -398,6 +407,7 @@ export function RoomViewHeader() {
           >
             {(triggerRef) => (
               <IconButton
+                fill="None"
                 style={{ position: 'relative' }}
                 onClick={handleOpenPinMenu}
                 ref={triggerRef}
@@ -443,23 +453,29 @@ export function RoomViewHeader() {
               </FocusTrap>
             }
           />
+
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
               offset={4}
               tooltip={
                 <Tooltip>
+                  {callView ? (
+                    <Text>Members</Text>
+                  ) : (
                     <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
+                  )}
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                <IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle}>
                   <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}
             </TooltipProvider>
           )}
+
           <TooltipProvider
             position="Bottom"
             align="End"
@@ -471,7 +487,12 @@ export function RoomViewHeader() {
             }
           >
             {(triggerRef) => (
-              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+              <IconButton
+                fill="None"
+                onClick={handleOpenMenu}
+                ref={triggerRef}
+                aria-pressed={!!menuAnchor}
+              >
                 <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
               </IconButton>
             )}

src/app/features/room/message/Message.tsx

@@ -327,11 +327,9 @@ export const MessageCopyLinkItem = as<
   const mx = useMatrixClient();
 
   const handleCopy = () => {
-    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
     const eventId = mEvent.getId();
-    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
     if (!eventId) return;
-    copyToClipboard(getMatrixToRoomEvent(roomIdOrAlias, eventId, viaServers));
+    copyToClipboard(getMatrixToRoomEvent(room.roomId, eventId, getViaServers(room)));
     onClose?.();
   };
 

src/app/features/search/Search.tsx

@@ -373,7 +373,7 @@ export function Search({ requestClose }: SearchProps) {
                                 <RoomIcon
                                   size="100"
                                   joinRule={room.getJoinRule()}
-                                  space={room.isSpaceRoom()}
+                                  roomType={room.getType()}
                                 />
                               )}
                             </Avatar>

src/app/features/settings/about/About.tsx

@@ -46,7 +46,7 @@ export function About({ requestClose }: AboutProps) {
                   <Box direction="Column" gap="100">
                     <Box gap="100" alignItems="End">
                       <Text size="H3">Cinny</Text>
-                      <Text size="T200">v4.10.1</Text>
+                      <Text size="T200">v4.11.1</Text>
                     </Box>
                     <Text>Yet another matrix client.</Text>
                   </Box>

src/app/features/space-settings/SpaceSettings.tsx

@@ -103,7 +103,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
                     alt={roomName}
                     renderFallback={() => (
                       <RoomIcon
-                        space
+                        roomType={room.getType()}
                         size="50"
                         joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
                         filled

src/app/features/space-settings/general/General.tsx

@@ -55,7 +55,7 @@ export function General({ requestClose }: GeneralProps) {
                 <RoomLocalAddresses permissions={permissions} />
               </Box>
               <Box direction="Column" gap="100">
-                <Text size="L400">Advance Options</Text>
+                <Text size="L400">Advanced Options</Text>
                 <RoomUpgrade permissions={permissions} requestClose={requestClose} />
               </Box>
             </Box>

src/app/features/space-settings/permissions/usePermissionItems.ts

@@ -125,6 +125,13 @@ export const usePermissionGroups = (): PermissionGroup[] => {
     const otherSettingsGroup: PermissionGroup = {
       name: 'Other',
       items: [
+        {
+          location: {
+            state: true,
+            key: StateEvent.PoniesRoomEmotes,
+          },
+          name: 'Manage Emojis & Stickers',
+        },
         {
           location: {
             state: true,

src/app/hooks/router/useSelectedSpace.ts

@@ -18,7 +18,7 @@ export const useSelectedSpace = (): string | undefined => {
 
 export const useSpaceLobbySelected = (spaceIdOrAlias: string): boolean => {
   const match = useMatch({
-    path: getSpaceLobbyPath(spaceIdOrAlias),
+    path: decodeURIComponent(getSpaceLobbyPath(spaceIdOrAlias)),
     caseSensitive: true,
     end: false,
   });
@@ -28,7 +28,7 @@ export const useSpaceLobbySelected = (spaceIdOrAlias: string): boolean => {
 
 export const useSpaceSearchSelected = (spaceIdOrAlias: string): boolean => {
   const match = useMatch({
-    path: getSpaceSearchPath(spaceIdOrAlias),
+    path: decodeURIComponent(getSpaceSearchPath(spaceIdOrAlias)),
     caseSensitive: true,
     end: false,
   });

src/app/hooks/useCall.ts

@@ -0,0 +1,64 @@
+import { Room } from 'matrix-js-sdk';
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { useEffect, useState } from 'react';
+import { MatrixRTCSessionManagerEvents } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSessionManager';
+import { useMatrixClient } from './useMatrixClient';
+
+export const useCallSession = (room: Room): MatrixRTCSession => {
+  const mx = useMatrixClient();
+
+  const [session, setSession] = useState(mx.matrixRTC.getRoomSession(room));
+
+  useEffect(() => {
+    const start = (roomId: string) => {
+      if (roomId !== room.roomId) return;
+      setSession(mx.matrixRTC.getRoomSession(room));
+    };
+    const end = (roomId: string) => {
+      if (roomId !== room.roomId) return;
+      setSession(mx.matrixRTC.getRoomSession(room));
+    };
+    mx.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionStarted, start);
+    mx.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionEnded, end);
+    return () => {
+      mx.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionStarted, start);
+      mx.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionEnded, end);
+    };
+  }, [mx, room]);
+
+  return session;
+};
+
+export const useCallMembers = (room: Room, session: MatrixRTCSession): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>(
+    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription)
+  );
+
+  useEffect(() => {
+    const updateMemberships = () => {
+      setMemberships(MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription));
+    };
+
+    updateMemberships();
+
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [session, room]);
+
+  return memberships;
+};
+
+export const useCallMembersChange = (session: MatrixRTCSession, callback: () => void): void => {
+  useEffect(() => {
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, callback);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, callback);
+    };
+  }, [session, callback]);
+};

src/app/hooks/useCallEmbed.ts

@@ -0,0 +1,142 @@
+import { createContext, RefObject, useCallback, useContext, useEffect, useState } from 'react';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { MatrixClient, Room } from 'matrix-js-sdk';
+import { useSetAtom } from 'jotai';
+import {
+  CallEmbed,
+  ElementCallThemeKind,
+  ElementWidgetActions,
+  useClientWidgetApiEvent,
+} from '../plugins/call';
+import { useMatrixClient } from './useMatrixClient';
+import { ThemeKind, useTheme } from './useTheme';
+import { callEmbedAtom } from '../state/callEmbed';
+import { useResizeObserver } from './useResizeObserver';
+import { CallControlState } from '../plugins/call/CallControlState';
+import { useCallMembersChange, useCallSession } from './useCall';
+import { CallPreferences } from '../state/callPreferences';
+
+const CallEmbedContext = createContext<CallEmbed | undefined>(undefined);
+
+export const CallEmbedContextProvider = CallEmbedContext.Provider;
+
+export const useCallEmbed = (): CallEmbed | undefined => {
+  const callEmbed = useContext(CallEmbedContext);
+
+  return callEmbed;
+};
+
+const CallEmbedRefContext = createContext<RefObject<HTMLDivElement> | undefined>(undefined);
+export const CallEmbedRefContextProvider = CallEmbedRefContext.Provider;
+export const useCallEmbedRef = (): RefObject<HTMLDivElement> => {
+  const ref = useContext(CallEmbedRefContext);
+  if (!ref) {
+    throw new Error('CallEmbedRef is not provided!');
+  }
+  return ref;
+};
+
+export const createCallEmbed = (
+  mx: MatrixClient,
+  room: Room,
+  dm: boolean,
+  themeKind: ElementCallThemeKind,
+  container: HTMLElement,
+  pref?: CallPreferences
+): CallEmbed => {
+  const rtcSession = mx.matrixRTC.getRoomSession(room);
+  const ongoing =
+    MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;
+
+  const intent = CallEmbed.getIntent(dm, ongoing);
+  const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
+  const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);
+
+  const embed = new CallEmbed(mx, room, widget, container, controlState);
+
+  return embed;
+};
+
+export const useCallStart = (dm = false) => {
+  const mx = useMatrixClient();
+  const theme = useTheme();
+  const setCallEmbed = useSetAtom(callEmbedAtom);
+  const callEmbedRef = useCallEmbedRef();
+
+  const startCall = useCallback(
+    (room: Room, pref?: CallPreferences) => {
+      const container = callEmbedRef.current;
+      if (!container) {
+        throw new Error('Failed to start call, No embed container element found!');
+      }
+      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, pref);
+
+      setCallEmbed(callEmbed);
+    },
+    [mx, dm, theme, setCallEmbed, callEmbedRef]
+  );
+
+  return startCall;
+};
+
+export const useCallJoined = (embed?: CallEmbed): boolean => {
+  const [joined, setJoined] = useState(embed?.joined ?? false);
+
+  useClientWidgetApiEvent(
+    embed?.call,
+    ElementWidgetActions.JoinCall,
+    useCallback(() => {
+      setJoined(true);
+    }, [])
+  );
+
+  useEffect(() => {
+    if (!embed) {
+      setJoined(false);
+    }
+  }, [embed]);
+
+  return joined;
+};
+
+export const useCallHangupEvent = (embed: CallEmbed, callback: () => void) => {
+  useClientWidgetApiEvent(embed.call, ElementWidgetActions.HangupCall, callback);
+};
+
+export const useCallMemberSoundSync = (embed: CallEmbed) => {
+  const callSession = useCallSession(embed.room);
+  useCallMembersChange(
+    callSession,
+    useCallback(() => embed.control.applySound(), [embed])
+  );
+};
+
+export const useCallThemeSync = (embed: CallEmbed) => {
+  const theme = useTheme();
+
+  useEffect(() => {
+    const name: ElementCallThemeKind = theme.kind === ThemeKind.Dark ? 'dark' : 'light';
+
+    embed.setTheme(name);
+  }, [theme.kind, embed]);
+};
+
+export const useCallEmbedPlacementSync = (containerViewRef: RefObject<HTMLDivElement>): void => {
+  const callEmbedRef = useCallEmbedRef();
+
+  const syncCallEmbedPlacement = useCallback(() => {
+    const embedEl = callEmbedRef.current;
+    const container = containerViewRef.current;
+    if (!embedEl || !container) return;
+
+    embedEl.style.top = `${container.offsetTop}px`;
+    embedEl.style.left = `${container.offsetLeft}px`;
+    embedEl.style.width = `${container.clientWidth}px`;
+    embedEl.style.height = `${container.clientHeight}px`;
+  }, [callEmbedRef, containerViewRef]);
+
+  useResizeObserver(
+    syncCallEmbedPlacement,
+    useCallback(() => containerViewRef.current, [containerViewRef])
+  );
+};

src/app/hooks/useCallSpeakers.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { CallEmbed } from '../plugins/call';
+import { useMutationObserver } from './useMutationObserver';
+import { isUserId } from '../utils/matrix';
+import { useCallMembers, useCallSession } from './useCall';
+import { useCallJoined } from './useCallEmbed';
+
+export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
+  const [speakers, setSpeakers] = useState(new Set<string>());
+  const callSession = useCallSession(callEmbed.room);
+  const callMembers = useCallMembers(callEmbed.room, callSession);
+  const joined = useCallJoined(callEmbed);
+
+  const videoContainers = useMemo(() => {
+    if (callMembers && joined) return callEmbed.document?.querySelectorAll('[data-video-fit]');
+    return undefined;
+  }, [callEmbed, callMembers, joined]);
+
+  const mutationObserver = useMutationObserver(
+    useCallback(
+      (mutations) => {
+        const s = new Set<string>();
+
+        mutations.forEach((mutation) => {
+          if (mutation.type !== 'attributes') return;
+          const el = mutation.target as HTMLElement;
+
+          const style = callEmbed.iframe.contentWindow?.getComputedStyle(el, '::before');
+          if (!style) return;
+          const tileBackgroundImage = style.getPropertyValue('background-image');
+          const speaking = tileBackgroundImage !== 'none';
+          if (!speaking) return;
+
+          const speakerId = el.querySelector('[aria-label]')?.getAttribute('aria-label');
+          if (speakerId && isUserId(speakerId)) {
+            s.add(speakerId);
+          }
+        });
+
+        setSpeakers(s);
+      },
+      [callEmbed]
+    )
+  );
+
+  useEffect(() => {
+    videoContainers?.forEach((element) => {
+      mutationObserver.observe(element, {
+        attributes: true,
+        attributeFilter: ['class', 'style'],
+      });
+    });
+
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [videoContainers, mutationObserver]);
+
+  return speakers;
+};

src/app/hooks/useLivekitSupport.ts

@@ -0,0 +1,16 @@
+import { AutoDiscoveryInfo } from '../cs-api';
+import { useAutoDiscoveryInfo } from './useAutoDiscoveryInfo';
+
+export const livekitSupport = (autoDiscoveryInfo: AutoDiscoveryInfo): boolean => {
+  const rtcFoci = autoDiscoveryInfo['org.matrix.msc4143.rtc_foci'];
+
+  return (
+    Array.isArray(rtcFoci) && rtcFoci.some((info) => typeof info.livekit_service_url === 'string')
+  );
+};
+
+export const useLivekitSupport = (): boolean => {
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+
+  return livekitSupport(autoDiscoveryInfo);
+};

src/app/hooks/useMemberSort.ts

@@ -47,7 +47,10 @@ export const useMemberSort = (index: number, memberSort: MemberSortItem[]): Memb
   return item;
 };
 
-export const useMemberPowerSort = (creators: Set<string>): MemberSortFn => {
+export const useMemberPowerSort = (
+  creators: Set<string>,
+  getPowerLevel: (userId: string) => number
+): MemberSortFn => {
   const sort: MemberSortFn = useCallback(
     (a, b) => {
       if (creators.has(a.userId) && creators.has(b.userId)) {
@@ -56,7 +59,7 @@ export const useMemberPowerSort = (creators: Set<string>): MemberSortFn => {
       if (creators.has(a.userId)) return -1;
       if (creators.has(b.userId)) return 1;
 
-      return b.powerLevel - a.powerLevel;
+      return getPowerLevel(b.userId) - getPowerLevel(a.userId);
     },
     [creators]
   );

src/app/hooks/useMutationObserver.ts

@@ -0,0 +1,37 @@
+import { useEffect, useMemo } from 'react';
+
+export type OnMutationCallback = (mutations: MutationRecord[]) => void;
+
+export const getMutationRecord = (
+  target: Node,
+  mutations: MutationRecord[]
+): MutationRecord | undefined => mutations.find((mutation) => mutation.target === target);
+
+export const useMutationObserver = (
+  onMutationCallback: OnMutationCallback,
+  observeElement?: Node | null | (() => Node | null),
+  options?: MutationObserverInit
+): MutationObserver => {
+  const mutationObserver = useMemo(
+    () => new MutationObserver(onMutationCallback),
+    [onMutationCallback]
+  );
+
+  useEffect(() => () => mutationObserver?.disconnect(), [mutationObserver]);
+
+  useEffect(() => {
+    const element = typeof observeElement === 'function' ? observeElement() : observeElement;
+
+    if (element) {
+      mutationObserver.observe(element, options);
+    }
+
+    return () => {
+      if (element) {
+        mutationObserver.disconnect();
+      }
+    };
+  }, [mutationObserver, observeElement, options]);
+
+  return mutationObserver;
+};

src/app/hooks/useRoomMeta.ts

@@ -20,6 +20,8 @@ export const useRoomName = (room: Room): string => {
   const [name, setName] = useState(room.name);
 
   useEffect(() => {
+    setName(room.name);
+
     const handleRoomNameChange: RoomEventHandlerMap[RoomEvent.Name] = () => {
       setName(room.name);
     };

src/app/hooks/useStateEvents.ts

@@ -1,28 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { Room } from 'matrix-js-sdk';
-import { StateEvent } from '../../types/matrix/room';
-import { useForceUpdate } from './useForceUpdate';
-import { useStateEventCallback } from './useStateEventCallback';
-import { getStateEvents } from '../utils/room';
-
-export const useStateEvents = (room: Room, eventType: StateEvent) => {
-  const [updateCount, forceUpdate] = useForceUpdate();
-
-  useStateEventCallback(
-    room.client,
-    useCallback(
-      (event) => {
-        if (event.getRoomId() === room.roomId && event.getType() === eventType) {
-          forceUpdate();
-        }
-      },
-      [room, eventType, forceUpdate]
-    )
-  );
-
-  return useMemo(
-    () => getStateEvents(room, eventType),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [room, eventType, updateCount]
-  );
-};

src/app/pages/CallStatusRenderer.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useCallEmbed } from '../hooks/useCallEmbed';
+import { CallStatus } from '../features/call-status';
+import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
+
+export function CallStatusRenderer() {
+  const callEmbed = useCallEmbed();
+  const selectedRoom = useSelectedRoom();
+
+  const screenSize = useScreenSizeContext();
+
+  if (!callEmbed) return null;
+
+  if (screenSize === ScreenSize.Mobile && callEmbed.roomId === selectedRoom) return null;
+
+  return <CallStatus callEmbed={callEmbed} />;
+}