update folds

.github/renovate.json

@@ -1,10 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    ":dependencyDashboardApproval",
-    ":semanticCommits"
-  ],
+  "extends": ["config:recommended", ":dependencyDashboardApproval"],
   "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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@v4.4.0
         with:
-          node-version-file: ".node-version"
-          package-manager-cache: false
+          node-version: 20.12.2
+          cache: 'npm'
       - 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@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@v4.6.2
         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@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@v4.6.2
         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@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
+        uses: cla-assistant/github-action@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,5 +1,4 @@
 name: Deploy PR to Netlify
-run-name: "Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})"
 
 on:
   workflow_run:
@@ -16,7 +15,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -25,7 +24,7 @@ jobs:
         id: pr
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -33,7 +32,7 @@ jobs:
           path: dist
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         with:
           publish-dir: dist
           deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@@ -46,12 +45,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@24bffb9b452ba05a4f3f77933840a6a841d1b32b #v3.0.1
+        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
         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. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -5,59 +5,15 @@ 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@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
+        uses: actions/checkout@v4.2.0
+      - name: Build Docker image
+        uses: docker/build-push-action@v6.18.0
         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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
       - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891 # v1.0.0
+        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@v4.4.0
         with:
-          node-version-file: ".node-version"
-          package-manager-cache: false
+          node-version: 20.12.2
+          cache: 'npm'
       - 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 # v3.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         with:
           publish-dir: dist
           deploy-message: 'Dev deploy ${{ github.sha }}'

.github/workflows/pr-title.yml

@@ -1,15 +0,0 @@
-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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@v4.4.0
         with:
-          node-version-file: ".node-version"
-          package-manager-cache: false
+          node-version: 20.12.2
+          cache: 'npm'
       - 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 # v3.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         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 # v2.3.3
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836
         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@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
+        uses: docker/setup-qemu-action@v3.6.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
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/setup-buildx-action@v3.11.1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.5.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+      - name: Login to the Container registry
+        uses: docker/login-action@v3.5.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker, GHCR
+      - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@v5.8.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@v6.18.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.node-version

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

Dockerfile

@@ -1,5 +1,5 @@
 ## Builder
-FROM node:24.13.1-alpine AS builder
+FROM node:20.12.2-alpine3.18 as builder
 
 WORKDIR /src
 
@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.29.5-alpine
+FROM nginx:1.29.1-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 Krypton LTS (v24.13.1).
+> 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).
 
 Execute the following commands to start a development server:
 ```sh

config.json

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.11.1",
+  "version": "4.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.11.1",
+      "version": "4.10.0",
       "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.6.2",
+        "folds": "2.5.0",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -41,10 +41,9 @@
         "immer": "9.0.16",
         "is-hotkey": "0.2.0",
         "jotai": "2.6.0",
-        "linkify-react": "4.3.2",
-        "linkifyjs": "4.3.2",
+        "linkify-react": "4.1.3",
+        "linkifyjs": "4.1.3",
         "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",
@@ -57,16 +56,15 @@
         "react-google-recaptcha": "2.1.0",
         "react-i18next": "15.0.0",
         "react-range": "1.8.14",
-        "react-router-dom": "6.30.3",
+        "react-router-dom": "6.20.0",
         "sanitize-html": "2.12.1",
-        "slate": "0.123.0",
-        "slate-dom": "0.123.0",
-        "slate-history": "0.113.1",
-        "slate-react": "0.123.0",
+        "slate": "0.112.0",
+        "slate-dom": "0.112.2",
+        "slate-history": "0.110.3",
+        "slate-react": "0.112.1",
         "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",
@@ -1651,12 +1649,6 @@
         "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",
@@ -3707,10 +3699,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "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",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -7166,9 +7157,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.6.2.tgz",
-      "integrity": "sha512-1HemxxSnBm8/U5kq1pDQrFkpltWgQN90DmWCZWkZb7D2pe8BhOJSwIRLjk9WxHcw6nn69oz2XNYIXtSw0LvX1w==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.5.0.tgz",
+      "integrity": "sha512-UJhvXAQ1XnZ9w10KJwSW+frvzzWE/zcF0dH3fDVCD70RFHAxwEi0UkkVS8CaZGxZF2Wvt3qTJyTS5LW3LwwUAw==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",
@@ -8500,20 +8491,18 @@
       }
     },
     "node_modules/linkify-react": {
-      "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",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.3.tgz",
+      "integrity": "sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==",
       "peerDependencies": {
         "linkifyjs": "^4.0.0",
         "react": ">= 15.0.0"
       }
     },
     "node_modules/linkifyjs": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
-      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
-      "license": "MIT"
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -8674,9 +8663,9 @@
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.0.tgz",
-      "integrity": "sha512-+LrvwkR1izL4h2euX8PDrvG/3PZZDEd6As+lmnR3jAVwbFJtU5iTnwmZGnCca9ddngCvXvAHkcpJBEPyPTZneQ==",
+      "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==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",
@@ -9616,12 +9605,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
-      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
-      "license": "MIT",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
+      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
       "dependencies": {
-        "@remix-run/router": "1.23.2"
+        "@remix-run/router": "1.13.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9631,13 +9619,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "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",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
+      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
       "dependencies": {
-        "@remix-run/router": "1.23.2",
-        "react-router": "6.30.3"
+        "@remix-run/router": "1.13.0",
+        "react-router": "6.20.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10291,15 +10278,20 @@
       }
     },
     "node_modules/slate": {
-      "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"
+      "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"
+      }
     },
     "node_modules/slate-dom": {
-      "version": "0.123.0",
-      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.123.0.tgz",
-      "integrity": "sha512-OUinp4tvSrAlt64JL9y20Xin08jgnnj1gJmIuPdGvU5MELKXRNZh17a7EKKNOS6OZPAE8Dk9NI1MAIS/Qz0YBw==",
+      "version": "0.112.2",
+      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
+      "integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
       "license": "MIT",
       "dependencies": {
         "@juggle/resize-observer": "^3.4.0",
@@ -10311,13 +10303,13 @@
         "tiny-invariant": "1.3.1"
       },
       "peerDependencies": {
-        "slate": ">=0.121.0"
+        "slate": ">=0.99.0"
       }
     },
     "node_modules/slate-history": {
-      "version": "0.113.1",
-      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.113.1.tgz",
-      "integrity": "sha512-J9NSJ+UG2GxoW0lw5mloaKcN0JI0x2IA5M5FxyGiInpn+QEutxT1WK7S/JneZCMFJBoHs1uu7S7e6pxQjubHmQ==",
+      "version": "0.110.3",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
+      "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
       "license": "MIT",
       "dependencies": {
         "is-plain-object": "^5.0.0"
@@ -10327,14 +10319,15 @@
       }
     },
     "node_modules/slate-react": {
-      "version": "0.123.0",
-      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.123.0.tgz",
-      "integrity": "sha512-nQwXL1FEacrY9ZFmatRhoBnsySNUX2x6qB77V3oNHd7wWxBJWuzz4GMrBXcVoRE8Gac7Angf8xaNGzb6zcPlHg==",
+      "version": "0.112.1",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
+      "integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
       "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"
@@ -10342,8 +10335,18 @@
       "peerDependencies": {
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0",
-        "slate": ">=0.121.0",
-        "slate-dom": ">=0.119.1"
+        "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"
       }
     },
     "node_modules/smob": {
@@ -10713,6 +10716,11 @@
       "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",
@@ -10896,7 +10904,6 @@
       "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.11.1",
+  "version": "4.10.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -10,7 +10,6 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "preview": "vite preview",
     "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
@@ -44,7 +43,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.6.2",
+    "folds": "2.5.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",
@@ -53,10 +52,9 @@
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
     "jotai": "2.6.0",
-    "linkify-react": "4.3.2",
-    "linkifyjs": "4.3.2",
+    "linkify-react": "4.1.3",
+    "linkifyjs": "4.1.3",
     "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",
@@ -69,16 +67,15 @@
     "react-google-recaptcha": "2.1.0",
     "react-i18next": "15.0.0",
     "react-range": "1.8.14",
-    "react-router-dom": "6.30.3",
+    "react-router-dom": "6.20.0",
     "sanitize-html": "2.12.1",
-    "slate": "0.123.0",
-    "slate-dom": "0.123.0",
-    "slate-history": "0.113.1",
-    "slate-react": "0.123.0",
+    "slate": "0.112.0",
+    "slate-dom": "0.112.2",
+    "slate-history": "0.110.3",
+    "slate-react": "0.112.1",
     "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,12 +51,8 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
       },
       location.pathname
     );
-    const encodedSpaceIdOrAlias = spaceMatch?.params.spaceIdOrAlias;
-    const decodedSpaceIdOrAlias =
-      encodedSpaceIdOrAlias && decodeURIComponent(encodedSpaceIdOrAlias);
-
-    if (decodedSpaceIdOrAlias) {
-      navigate(getSpacePath(decodedSpaceIdOrAlias));
+    if (spaceMatch?.params.spaceIdOrAlias) {
+      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
       return;
     }
     if (

src/app/components/CallEmbedProvider.tsx

@@ -1,66 +0,0 @@
-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,24 +16,34 @@ 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 useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
+export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
   useMemo(
     () => ({
-      [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),
+      [JoinRule.Invite]: Icons.HashLock,
+      [JoinRule.Knock]: Icons.HashLock,
+      knock_restricted: Icons.Hash,
+      [JoinRule.Restricted]: Icons.Hash,
+      [JoinRule.Public]: Icons.HashGlobe,
+      [JoinRule.Private]: Icons.HashLock,
     }),
-    [roomType]
+    []
+  );
+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,
+    }),
+    []
   );
 
 type JoinRuleLabels = Record<ExtendedJoinRules, string>;

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

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

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

@@ -1,75 +0,0 @@
-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,6 +1,5 @@
-export * from './CreateRoomAccessSelector';
+export * from './CreateRoomKindSelector';
 export * from './CreateRoomAliasInput';
 export * from './RoomVersionSelector';
 export * from './utils';
 export * from './AdditionalCreatorInput';
-export * from './types';

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

@@ -1,10 +0,0 @@
-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 = (
-  access: CreateRoomAccess,
+  kind: CreateRoomKind,
   parent: Room | undefined,
   knock: boolean
 ) => {
@@ -40,13 +40,13 @@ export const createRoomJoinRulesState = (
     join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
   };
 
-  if (access === CreateRoomAccess.Public) {
+  if (kind === CreateRoomKind.Public) {
     content = {
       join_rule: JoinRule.Public,
     };
   }
 
-  if (access === CreateRoomAccess.Restricted && parent) {
+  if (kind === CreateRoomKind.Restricted && parent) {
     content = {
       join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
       allow: [
@@ -74,10 +74,6 @@ export const createRoomParentState = (parent: Room) => ({
   },
 });
 
-const createSpacePowerLevelsOverride = () => ({
-  events_default: 50,
-});
-
 export const createRoomEncryptionState = () => ({
   type: 'm.room.encryption',
   state_key: '',
@@ -86,23 +82,11 @@ 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;
-  access: CreateRoomAccess;
+  kind: CreateRoomKind;
   name: string;
   topic?: string;
   aliasLocalPart?: string;
@@ -122,11 +106,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     initialState.push(createRoomParentState(data.parent));
   }
 
-  if (data.type === RoomType.Call) {
-    initialState.push(createRoomCallState());
-  }
-
-  initialState.push(createRoomJoinRulesState(data.access, data.parent, data.knock));
+  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
 
   const options: ICreateRoomOpts = {
     room_version: data.version,
@@ -138,15 +118,9 @@ 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,8 +88,6 @@ 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}
@@ -100,11 +98,11 @@ export function EmoticonAutocomplete({
             }
             onClick={() => handleAutocomplete(key, emoticon.shortcode)}
             before={
-              isCustomEmoji && customEmojiUrl ? (
+              isCustomEmoji ? (
                 <Box
                   shrink="No"
                   as="img"
-                  src={customEmojiUrl}
+                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
                   alt={emoticon.shortcode}
                   style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
                 />

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

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

src/app/components/editor/output.ts

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

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

@@ -202,7 +202,8 @@ 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) ?? undefined;
+              mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
+              pack.meta.avatar;
 
             return (
               <ImageGroupIcon
@@ -265,7 +266,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) ?? undefined;
+            mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) || pack.meta.avatar;
 
           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) ?? ''}
+        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
       />
     </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) ?? ''}
+        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
       />
     </Box>
   );

src/app/components/message/FileHeader.tsx

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

src/app/components/message/MsgTypeRenderers.tsx

@@ -389,8 +389,6 @@ 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/Time.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const Time = style({
+  fontWeight: 'inherit',
+  flexShrink: 0,
+});

src/app/components/message/Time.tsx

@@ -1,12 +1,15 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
+import classNames from 'classnames';
 import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import * as css from './Time.css';
 
 export type TimeProps = {
   compact?: boolean;
   ts: number;
   hour24Clock: boolean;
   dateFormatString: string;
+  inheritPriority?: boolean;
 };
 
 /**
@@ -22,7 +25,7 @@ export type TimeProps = {
  * @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
  */
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
+  ({ compact, hour24Clock, dateFormatString, ts, inheritPriority, className, ...props }, ref) => {
     const formattedTime = timeHourMinute(ts, hour24Clock);
 
     let time = '';
@@ -33,11 +36,18 @@ export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
     } else if (yesterday(ts)) {
       time = `Yesterday ${formattedTime}`;
     } else {
-      time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
+      time = `${timeDayMonYear(ts, dateFormatString)}, ${formattedTime}`;
     }
 
     return (
-      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
+      <Text
+        as="time"
+        className={classNames(css.Time, className)}
+        size="T200"
+        priority={inheritPriority ? undefined : '300'}
+        {...props}
+        ref={ref}
+      >
         {time}
       </Text>
     );

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

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

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

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

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

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

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

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

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

@@ -81,8 +81,7 @@ export const VideoContent = as<'div', VideoContentProps>(
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
-        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
-        if (!mediaUrl) throw new Error('Invalid media URL');
+        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? 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 { getRoomIconSrc } from '../../utils/room';
+import { joinRuleToIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 
 type RoomAvatarProps = {
@@ -44,9 +44,13 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
 export const RoomIcon = forwardRef<
   SVGSVGElement,
   Omit<ComponentProps<typeof Icon>, 'src'> & {
-    joinRule?: JoinRule;
-    roomType?: string;
+    joinRule: JoinRule;
+    space?: boolean;
   }
->(({ joinRule, roomType, ...props }, ref) => (
-  <Icon src={getRoomIconSrc(Icons, roomType, joinRule)} {...props} ref={ref} />
+>(({ joinRule, space, ...props }, ref) => (
+  <Icon
+    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
+    {...props}
+    ref={ref}
+  />
 ));

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

@@ -17,7 +17,6 @@ export const SequenceCard = as<
       firstChild,
       lastChild,
       outlined,
-      mergeBorder,
       ...props
     },
     ref
@@ -25,7 +24,7 @@ export const SequenceCard = as<
     <Box
       as={AsSequenceCard}
       className={classNames(
-        css.SequenceCard({ radii, outlined, mergeBorder }),
+        css.SequenceCard({ radii, outlined }),
         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,6 +20,7 @@ export const SequenceCard = recipe({
       '&:last-child, &:not(:has(+&))': {
         borderBottomLeftRadius: [radii],
         borderBottomRightRadius: [radii],
+        borderBottomWidth: outlinedWidth,
       },
       [`&[data-first-child="true"]`]: {
         borderTopLeftRadius: [radii],
@@ -73,16 +74,6 @@ 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

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

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

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

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

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

@@ -30,15 +30,7 @@ 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 (
         <>
@@ -50,7 +42,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
               as="a"
               href={url}
               target="_blank"
-              rel="noreferrer"
+              rel="no-referrer"
               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()} roomType={room.getType()} />
+              <RoomIcon size="100" joinRule={room.getJoinRule()} />
             )}
           </Avatar>
         }

src/app/cs-api.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,28 +0,0 @@
-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,8 +6,9 @@ import { useAtomValue } from 'jotai';
 import {
   ExtendedJoinRules,
   JoinRulesSwitcher,
-  useJoinRuleIcons,
+  useRoomJoinRuleIcon,
   useRoomJoinRuleLabel,
+  useSpaceJoinRuleIcon,
 } from '../../../components/JoinRulesSwitcher';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
@@ -74,7 +75,8 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
     return r;
   }, [allowKnockRestricted, allowRestricted, allowKnock, space]);
 
-  const icons = useJoinRuleIcons(room.getType());
+  const icons = useRoomJoinRuleIcon();
+  const spaceIcons = useSpaceJoinRuleIcon();
   const labels = useRoomJoinRuleLabel();
 
   const [submitState, submit] = useAsyncCallback(
@@ -135,7 +137,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
         }
         after={
           <JoinRulesSwitcher
-            icons={icons}
+            icons={room.isSpaceRoom() ? spaceIcons : 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
-                  roomType={room.getType()}
+                  space={room.isSpaceRoom()}
                   size="400"
                   joinRule={joinRule?.join_rule ?? JoinRule.Invite}
                   filled
@@ -342,7 +342,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
                   alt={name}
                   renderFallback={() => (
                     <RoomIcon
-                      roomType={room.getType()}
+                      space={room.isSpaceRoom()}
                       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 { useGetMemberPowerLevel, usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { VirtualTile } from '../../../components/virtualizer';
 import { MemberTile } from '../../../components/member-tile';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -87,13 +87,12 @@ 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, getPowerLevel);
+  const memberPowerSort = useMemberPowerSort(creators);
 
   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, JoinRule } from 'matrix-js-sdk';
+import { MatrixError, Room } from 'matrix-js-sdk';
 import {
   Box,
   Button,
@@ -33,43 +33,24 @@ import {
   createRoom,
   CreateRoomAliasInput,
   CreateRoomData,
-  CreateRoomAccess,
-  CreateRoomAccessSelector,
+  CreateRoomKind,
+  CreateRoomKindSelector,
   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 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;
+const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
+  if (kind === CreateRoomKind.Private) return Icons.HashLock;
+  if (kind === CreateRoomKind.Restricted) return Icons.Hash;
+  return Icons.HashGlobe;
 };
 
 type CreateRoomFormProps = {
-  defaultAccess?: CreateRoomAccess;
-  defaultType?: CreateRoomType;
+  defaultKind?: CreateRoomKind;
   space?: Room;
   onCreate?: (roomId: string) => void;
 };
-export function CreateRoomForm({
-  defaultAccess,
-  defaultType,
-  space,
-  onCreate,
-}: CreateRoomFormProps) {
+export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
   const mx = useMatrixClient();
   const alive = useAlive();
 
@@ -83,9 +64,8 @@ export function CreateRoomForm({
 
   const allowRestricted = space && restrictedSupported(selectedRoomVersion);
 
-  const [type, setType] = useState(defaultType ?? CreateRoomType.TextRoom);
-  const [access, setAccess] = useState(
-    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
+  const [kind, setKind] = useState(
+    defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
   );
   const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
   const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
@@ -95,13 +75,13 @@ export function CreateRoomForm({
   const [knock, setKnock] = useState(false);
   const [advance, setAdvance] = useState(false);
 
-  const allowKnock = access === CreateRoomAccess.Private && knockSupported(selectedRoomVersion);
+  const allowKnock = kind === CreateRoomKind.Private && knockSupported(selectedRoomVersion);
   const allowKnockRestricted =
-    access === CreateRoomAccess.Restricted && knockRestrictedSupported(selectedRoomVersion);
+    kind === CreateRoomKind.Restricted && knockRestrictedSupported(selectedRoomVersion);
 
   const handleRoomVersionChange = (version: string) => {
     if (!restrictedSupported(version)) {
-      setAccess(CreateRoomAccess.Private);
+      setKind(CreateRoomKind.Private);
     }
     selectRoomVersion(version);
   };
@@ -127,23 +107,19 @@ export function CreateRoomForm({
       aliasInput && aliasInput.value ? replaceSpaceWithDash(aliasInput.value) : undefined;
 
     if (!roomName) return;
-    const publicRoom = access === CreateRoomAccess.Public;
+    const publicRoom = kind === CreateRoomKind.Public;
     let roomKnock = false;
-    if (allowKnock && access === CreateRoomAccess.Private) {
+    if (allowKnock && kind === CreateRoomKind.Private) {
       roomKnock = knock;
     }
-    if (allowKnockRestricted && access === CreateRoomAccess.Restricted) {
+    if (allowKnockRestricted && kind === CreateRoomKind.Restricted) {
       roomKnock = knock;
     }
 
-    let roomType: RoomType | undefined;
-    if (type === CreateRoomType.VoiceRoom) roomType = RoomType.Call;
-
     create({
       version: selectedRoomVersion,
-      type: roomType,
       parent: space,
-      access,
+      kind,
       name: roomName,
       topic: roomTopic || undefined,
       aliasLocalPart: publicRoom ? aliasLocalPart : undefined,
@@ -160,32 +136,21 @@ export function CreateRoomForm({
 
   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>
-        <CreateRoomAccessSelector
-          value={access}
-          onSelect={setAccess}
+        <CreateRoomKindSelector
+          value={kind}
+          onSelect={setKind}
           canRestrict={allowRestricted}
           disabled={disabled}
-          getIcon={(roomAccess) => getCreateRoomAccessToIcon(roomAccess, type)}
+          getIcon={getCreateRoomKindToIcon}
         />
       </Box>
       <Box shrink="No" direction="Column" gap="100">
         <Text size="L400">Name</Text>
         <Input
           required
-          before={<Icon size="100" src={getCreateRoomAccessToIcon(access, type)} />}
+          before={<Icon size="100" src={getCreateRoomKindToIcon(kind)} />}
           name="nameInput"
           autoFocus
           size="500"
@@ -206,7 +171,7 @@ export function CreateRoomForm({
         />
       </Box>
 
-      {access === CreateRoomAccess.Public && <CreateRoomAliasInput disabled={disabled} />}
+      {kind === CreateRoomKind.Public && <CreateRoomAliasInput disabled={disabled} />}
 
       <Box shrink="No" direction="Column" gap="100">
         <Box gap="200" alignItems="End">
@@ -218,7 +183,7 @@ export function CreateRoomForm({
               onClick={() => setAdvance(!advance)}
               type="button"
             >
-              <Text size="T200">Advanced Options</Text>
+              <Text size="T200">Advance Options</Text>
             </Chip>
           </Box>
         </Box>
@@ -236,7 +201,7 @@ export function CreateRoomForm({
             />
           </SequenceCard>
         )}
-        {access !== CreateRoomAccess.Public && (
+        {kind !== CreateRoomKind.Public && (
           <>
             <SequenceCard
               style={{ padding: config.space.S300 }}

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

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

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

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

src/app/features/lobby/RoomItem.tsx

@@ -175,7 +175,6 @@ function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProf
 
 type RoomProfileProps = {
   roomId: string;
-  roomType?: string;
   name: string;
   topic?: string;
   avatarUrl?: string;
@@ -186,7 +185,6 @@ type RoomProfileProps = {
 };
 function RoomProfile({
   roomId,
-  roomType,
   name,
   topic,
   avatarUrl,
@@ -202,7 +200,9 @@ function RoomProfile({
           roomId={roomId}
           src={avatarUrl}
           alt={name}
-          renderFallback={() => <RoomIcon size="300" joinRule={joinRule} roomType={roomType} />}
+          renderFallback={() => (
+            <RoomIcon size="300" joinRule={joinRule ?? JoinRule.Restricted} filled />
+          )}
         />
       </Avatar>
       <Box grow="Yes" direction="Column">
@@ -338,7 +338,6 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
               {(localSummary) => (
                 <RoomProfile
                   roomId={roomId}
-                  roomType={localSummary.roomType}
                   name={localSummary.name}
                   topic={localSummary.topic}
                   avatarUrl={
@@ -397,7 +396,6 @@ 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,8 +36,6 @@ 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 (
@@ -251,8 +249,8 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const handleCreateRoom = (type?: CreateRoomType) => {
-    openCreateRoomModal(item.roomId, type);
+  const handleCreateRoom = () => {
+    openCreateRoomModal(item.roomId);
     setCords(undefined);
   };
 
@@ -283,19 +281,9 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
               radii="300"
               variant="Primary"
               fill="None"
-              onClick={() => handleCreateRoom(CreateRoomType.TextRoom)}
+              onClick={handleCreateRoom}
             >
-              <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>
+              <Text size="T300">New 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 { getRoomIconSrc } from '../../utils/room';
+import { joinRuleToIconSrc } from '../../utils/room';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
 import {
   SearchItemStrGetter,
@@ -274,7 +274,9 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                             before={
                               <Icon
                                 size="50"
-                                src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())}
+                                src={
+                                  joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash
+                                }
                               />
                             }
                           >
@@ -390,7 +392,10 @@ export function SearchFilters({
               onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))}
               radii="Pill"
               before={
-                <Icon size="50" src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())} />
+                <Icon
+                  size="50"
+                  src={joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash}
+                />
               }
               after={<Icon size="50" src={Icons.Cross} />}
             >

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

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

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

@@ -19,7 +19,6 @@ 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';
@@ -52,13 +51,6 @@ 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;
@@ -217,24 +209,6 @@ 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;
@@ -262,8 +236,6 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
 
-  const roomName = useRoomName(room);
-
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
     setMenuAnchor({
@@ -279,29 +251,6 @@ 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
@@ -314,7 +263,7 @@ export function RoomNavItem({
       {...hoverProps}
       {...focusWithinProps}
     >
-      <NavLink to={linkPath} onClick={room.isCallRoom() ? handleStartCall : undefined}>
+      <NavLink to={linkPath}>
         <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
@@ -326,28 +275,25 @@ export function RoomNavItem({
                       ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
                       : getRoomAvatarUrl(mx, room, 96, useAuthentication)
                   }
-                  alt={roomName}
+                  alt={room.name}
                   renderFallback={() => (
                     <Text as="span" size="H6">
-                      {nameInitials(roomName)}
+                      {nameInitials(room.name)}
                     </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>
-                {roomName}
+                {room.name}
               </Text>
             </Box>
             {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
@@ -361,30 +307,14 @@ export function RoomNavItem({
               </UnreadBadgeCenter>
             )}
             {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-              <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>
+              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
             )}
           </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}
@@ -413,8 +343,6 @@ 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,7 +104,6 @@ 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">Advanced Options</Text>
+                <Text size="L400">Advance 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(room.isCallRoom());
+  const permissionGroups = usePermissionGroups();
 
   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 = (isCallRoom: boolean): PermissionGroup[] => {
+export const usePermissionGroups = (): PermissionGroup[] => {
   const groups: PermissionGroup[] = useMemo(() => {
     const messagesGroup: PermissionGroup = {
       name: 'Messages',
@@ -46,19 +46,6 @@ export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
       ],
     };
 
-    const callSettingsGroup: PermissionGroup = {
-      name: 'Calls',
-      items: [
-        {
-          location: {
-            state: true,
-            key: StateEvent.GroupCallMemberPrefix,
-          },
-          name: 'Join Call',
-        },
-      ],
-    };
-
     const moderationGroup: PermissionGroup = {
       name: 'Moderation',
       items: [
@@ -190,13 +177,6 @@ export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
     const otherSettingsGroup: PermissionGroup = {
       name: 'Other',
       items: [
-        {
-          location: {
-            state: true,
-            key: StateEvent.PoniesRoomEmotes,
-          },
-          name: 'Manage Emojis & Stickers',
-        },
         {
           location: {
             state: true,
@@ -216,13 +196,12 @@ export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
 
     return [
       messagesGroup,
-      ...(isCallRoom ? [callSettingsGroup] : []),
       moderationGroup,
       roomOverviewGroup,
       roomSettingsGroup,
       otherSettingsGroup,
     ];
-  }, [isCallRoom]);
+  }, []);
 
   return groups;
 };

src/app/features/room/CallChatView.tsx

@@ -1,57 +0,0 @@
-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 { useGetMemberPowerLevel, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
 import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
@@ -185,7 +185,6 @@ 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();
@@ -199,7 +198,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
   const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
   const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
-  const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
+  const memberPowerSort = useMemberPowerSort(creators);
 
   const typingMembers = useRoomTypingMember(room.roomId);
 

src/app/features/room/Room.tsx

@@ -2,7 +2,6 @@ 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';
@@ -14,10 +13,8 @@ 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';
+import { ThreadView } from './thread-view';
+import { useActiveThread } from '../../state/hooks/roomToActiveThread';
 
 export function Room() {
   const { eventId } = useParams();
@@ -29,7 +26,8 @@ export function Room() {
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
-  const chat = useAtomValue(callChatAtom);
+
+  const threadId = useActiveThread(room.roomId);
 
   useKeyDown(
     window,
@@ -43,41 +41,23 @@ export function Room() {
     )
   );
 
-  const callView = room.isCallRoom();
-
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
-        {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 && (
+        <RoomView room={room} eventId={eventId} />
+        {threadId ? (
           <>
-            {screenSize === ScreenSize.Desktop && (
+            <Line variant="Surface" direction="Vertical" size="300" />
+            <ThreadView threadId={threadId} />
+          </>
+        ) : (
+          screenSize === ScreenSize.Desktop &&
+          isDrawer && (
+            <>
               <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} />
-          </>
+              <MembersDrawer key={room.roomId} room={room} members={members} />
+            </>
+          )
         )}
       </Box>
     </PowerLevelsContextProvider>

src/app/features/room/RoomInput.tsx

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

src/app/features/room/RoomTimeline.tsx

@@ -27,7 +27,6 @@ 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 {
@@ -78,6 +77,7 @@ import {
   decryptAllTimelineEvent,
   getEditedEvent,
   getEventReactions,
+  getEventThreadDetail,
   getLatestEditableEvt,
   getMemberDisplayName,
   getReactionContent,
@@ -127,6 +127,18 @@ import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/u
 import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { ThreadSelector, ThreadSelectorContainer } from './message/thread-selector';
+import {
+  getEventIdAbsoluteIndex,
+  getFirstLinkedTimeline,
+  getLinkedTimelines,
+  getTimelineAndBaseIndex,
+  getTimelineEvent,
+  getTimelineRelativeIndex,
+  getTimelinesEventsCount,
+  timelineToEventsCount,
+} from './utils';
+import { useThreadSelector } from '../../state/hooks/roomToActiveThread';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -151,79 +163,6 @@ const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
   )
 );
 
-export const getLiveTimeline = (room: Room): EventTimeline =>
-  room.getUnfilteredTimelineSet().getLiveTimeline();
-
-export const getEventTimeline = (room: Room, eventId: string): EventTimeline | undefined => {
-  const timelineSet = room.getUnfilteredTimelineSet();
-  return timelineSet.getTimelineForEvent(eventId) ?? undefined;
-};
-
-export const getFirstLinkedTimeline = (
-  timeline: EventTimeline,
-  direction: Direction
-): EventTimeline => {
-  const linkedTm = timeline.getNeighbouringTimeline(direction);
-  if (!linkedTm) return timeline;
-  return getFirstLinkedTimeline(linkedTm, direction);
-};
-
-export const getLinkedTimelines = (timeline: EventTimeline): EventTimeline[] => {
-  const firstTimeline = getFirstLinkedTimeline(timeline, Direction.Backward);
-  const timelines: EventTimeline[] = [];
-
-  for (
-    let nextTimeline: EventTimeline | null = firstTimeline;
-    nextTimeline;
-    nextTimeline = nextTimeline.getNeighbouringTimeline(Direction.Forward)
-  ) {
-    timelines.push(nextTimeline);
-  }
-  return timelines;
-};
-
-export const timelineToEventsCount = (t: EventTimeline) => t.getEvents().length;
-export const getTimelinesEventsCount = (timelines: EventTimeline[]): number => {
-  const timelineEventCountReducer = (count: number, tm: EventTimeline) =>
-    count + timelineToEventsCount(tm);
-  return timelines.reduce(timelineEventCountReducer, 0);
-};
-
-export const getTimelineAndBaseIndex = (
-  timelines: EventTimeline[],
-  index: number
-): [EventTimeline | undefined, number] => {
-  let uptoTimelineLen = 0;
-  const timeline = timelines.find((t) => {
-    uptoTimelineLen += t.getEvents().length;
-    if (index < uptoTimelineLen) return true;
-    return false;
-  });
-  if (!timeline) return [undefined, 0];
-  return [timeline, uptoTimelineLen - timeline.getEvents().length];
-};
-
-export const getTimelineRelativeIndex = (absoluteIndex: number, timelineBaseIndex: number) =>
-  absoluteIndex - timelineBaseIndex;
-
-export const getTimelineEvent = (timeline: EventTimeline, index: number): MatrixEvent | undefined =>
-  timeline.getEvents()[index];
-
-export const getEventIdAbsoluteIndex = (
-  timelines: EventTimeline[],
-  eventTimeline: EventTimeline,
-  eventId: string
-): number | undefined => {
-  const timelineIndex = timelines.findIndex((t) => t === eventTimeline);
-  if (timelineIndex === -1) return undefined;
-  const eventIndex = eventTimeline.getEvents().findIndex((evt) => evt.getId() === eventId);
-  if (eventIndex === -1) return undefined;
-  const baseIndex = timelines
-    .slice(0, timelineIndex)
-    .reduce((accValue, timeline) => timeline.getEvents().length + accValue, 0);
-  return baseIndex + eventIndex;
-};
-
 type RoomTimelineProps = {
   room: Room;
   eventId?: string;
@@ -233,6 +172,14 @@ type RoomTimelineProps = {
 
 const PAGINATION_LIMIT = 80;
 
+export const getLiveTimeline = (room: Room): EventTimeline =>
+  room.getUnfilteredTimelineSet().getLiveTimeline();
+
+export const getEventTimeline = (room: Room, eventId: string): EventTimeline | undefined => {
+  const timelineSet = room.getUnfilteredTimelineSet();
+  return timelineSet.getTimelineForEvent(eventId) ?? undefined;
+};
+
 type Timeline = {
   linkedTimelines: EventTimeline[];
   range: ItemRange;
@@ -472,7 +419,6 @@ 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>();
@@ -484,6 +430,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const spoilerClickHandler = useSpoilerClickHandler();
   const openUserRoomProfile = useOpenUserRoomProfile();
   const space = useSpaceOptionally();
+  const handleThreadClick = useThreadSelector(room.roomId);
 
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
@@ -1016,6 +963,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     },
     [editor]
   );
+
   const { t } = useTranslation();
 
   const renderMatrixEvent = useMatrixEventRenderer<
@@ -1036,6 +984,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderDisplayName =
           getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
+        const threadDetail = getEventThreadDetail(mEvent);
 
         return (
           <Message
@@ -1049,7 +998,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
-            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1109,6 +1058,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
               />
             )}
+
+            {threadDetail && (
+              <ThreadSelectorContainer>
+                <ThreadSelector
+                  room={room}
+                  threadId={mEventId}
+                  threadDetail={threadDetail}
+                  hour24Clock={hour24Clock}
+                  dateFormatString={dateFormatString}
+                  outlined={messageLayout === MessageLayout.Bubble}
+                  onClick={handleThreadClick}
+                />
+              </ThreadSelectorContainer>
+            )}
           </Message>
         );
       },
@@ -1131,7 +1094,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
-            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1249,7 +1212,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             messageLayout={messageLayout}
             collapse={collapse}
             highlight={highlighted}
-            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1470,57 +1433,6 @@ 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 } from 'matrix-js-sdk';
+import { EventType, Room } 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,8 +30,10 @@ 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') ||
@@ -54,13 +56,12 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
-export function RoomView({ eventId }: { eventId?: string }) {
+export function RoomView({ room, eventId }: { room: Room; 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();
 
@@ -92,6 +93,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
 
   return (
     <Page ref={roomViewRef}>
+      <RoomViewHeader />
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}

src/app/features/room/RoomViewHeader.tsx

@@ -23,7 +23,9 @@ import {
   Spinner,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
-import { Room } from 'matrix-js-sdk';
+import { JoinRule, Room } from 'matrix-js-sdk';
+import { useAtomValue } from 'jotai';
+
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -31,7 +33,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 { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
+import { useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
@@ -46,6 +48,7 @@ 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';
@@ -66,8 +69,7 @@ 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';
+import { ThreadsMenu } from './threads-menu';
 
 type RoomMenuProps = {
   room: Room;
@@ -253,7 +255,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
-export function RoomViewHeader({ callView }: { callView?: boolean }) {
+export function RoomViewHeader() {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -262,12 +264,13 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const space = useSpaceOptionally();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
-  const direct = useIsDirectRoom();
+  const [threadsMenuAnchor, setThreadsMenuAnchor] = useState<RectCords>();
+  const mDirects = useAtomValue(mDirectAtom);
 
   const pinnedEvents = useRoomPinnedEvents(room);
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
-  const encryptedRoom = !!encryptionEvent;
-  const avatarMxc = useRoomAvatar(room, direct);
+  const ecryptedRoom = !!encryptionEvent;
+  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const avatarUrl = avatarMxc
@@ -294,27 +297,18 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
-  const openSettings = useOpenRoomSettings();
-  const parentSpace = useSpaceOptionally();
-  const handleMemberToggle = () => {
-    if (callView) {
-      openSettings(room.roomId, parentSpace?.roomId, RoomSettingsPage.MembersPage);
-      return;
-    }
-    setPeopleDrawer(!peopleDrawer);
+  const handleOpenThreadsMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setThreadsMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
   return (
-    <PageHeader
-      className={ContainerColor({ variant: 'Surface' })}
-      balance={screenSize === ScreenSize.Mobile}
-    >
+    <PageHeader balance={screenSize === ScreenSize.Mobile}>
       <Box grow="Yes" gap="300">
         {screenSize === ScreenSize.Mobile && (
           <BackRouteHandler>
             {(onBack) => (
               <Box shrink="No" alignItems="Center">
-                <IconButton fill="None" onClick={onBack}>
+                <IconButton onClick={onBack}>
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               </Box>
@@ -329,7 +323,11 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
                 src={avatarUrl}
                 alt={name}
                 renderFallback={() => (
-                  <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} />
+                  <RoomIcon
+                    size="200"
+                    joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                    filled
+                  />
                 )}
               />
             </Avatar>
@@ -377,9 +375,8 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
             )}
           </Box>
         </Box>
-
         <Box shrink="No">
-          {!encryptedRoom && (
+          {!ecryptedRoom && (
             <TooltipProvider
               position="Bottom"
               offset={4}
@@ -390,7 +387,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               }
             >
               {(triggerRef) => (
-                <IconButton fill="None" ref={triggerRef} onClick={handleSearchClick}>
+                <IconButton ref={triggerRef} onClick={handleSearchClick}>
                   <Icon size="400" src={Icons.Search} />
                 </IconButton>
               )}
@@ -407,7 +404,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
           >
             {(triggerRef) => (
               <IconButton
-                fill="None"
                 style={{ position: 'relative' }}
                 onClick={handleOpenPinMenu}
                 ref={triggerRef}
@@ -434,6 +430,27 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               </IconButton>
             )}
           </TooltipProvider>
+
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>My Threads</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                style={{ position: 'relative' }}
+                onClick={handleOpenThreadsMenu}
+                ref={triggerRef}
+                aria-pressed={!!threadsMenuAnchor}
+              >
+                <Icon size="400" src={Icons.Thread} filled={!!threadsMenuAnchor} />
+              </IconButton>
+            )}
+          </TooltipProvider>
           <PopOut
             anchor={pinMenuAnchor}
             position="Bottom"
@@ -453,29 +470,42 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               </FocusTrap>
             }
           />
-
+          <PopOut
+            anchor={threadsMenuAnchor}
+            position="Bottom"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setThreadsMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <ThreadsMenu room={room} requestClose={() => setThreadsMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
               offset={4}
               tooltip={
                 <Tooltip>
-                  {callView ? (
-                    <Text>Members</Text>
-                  ) : (
-                    <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
-                  )}
+                  <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle}>
+                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
                   <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}
             </TooltipProvider>
           )}
-
           <TooltipProvider
             position="Bottom"
             align="End"
@@ -487,12 +517,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
             }
           >
             {(triggerRef) => (
-              <IconButton
-                fill="None"
-                onClick={handleOpenMenu}
-                ref={triggerRef}
-                aria-pressed={!!menuAnchor}
-              >
+              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
                 <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
               </IconButton>
             )}

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

@@ -327,9 +327,11 @@ 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(room.roomId, eventId, getViaServers(room)));
+    copyToClipboard(getMatrixToRoomEvent(roomIdOrAlias, eventId, viaServers));
     onClose?.();
   };
 

src/app/features/room/message/thread-selector/ThreadSelector.tsx

@@ -0,0 +1,83 @@
+import { Box, Icon, Icons, Line, Text } from 'folds';
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import { IThreadBundledRelationship, Room } from 'matrix-js-sdk';
+import * as css from './styles.css';
+import { getMemberDisplayName } from '../../../../utils/room';
+import { getMxIdLocalPart } from '../../../../utils/matrix';
+import { Time } from '../../../../components/message';
+
+export function ThreadSelectorContainer({ children }: { children: ReactNode }) {
+  return <Box className={css.ThreadSelectorContainer}>{children}</Box>;
+}
+
+type ThreadSelectorProps = {
+  room: Room;
+  threadId: string;
+  threadDetail: IThreadBundledRelationship;
+  outlined?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+  onClick?: (threadId: string) => void;
+};
+
+export function ThreadSelector({
+  room,
+  threadId,
+  threadDetail,
+  outlined,
+  hour24Clock,
+  dateFormatString,
+  onClick,
+}: ThreadSelectorProps) {
+  const latestEvent = threadDetail.latest_event;
+
+  const latestSenderId = latestEvent.sender;
+  const latestDisplayName =
+    getMemberDisplayName(room, latestSenderId) ??
+    getMxIdLocalPart(latestSenderId) ??
+    latestSenderId;
+
+  const latestEventTs = latestEvent.origin_server_ts;
+
+  return (
+    <Box
+      as="button"
+      type="button"
+      className={classNames(css.ThreadSelector, outlined && css.ThreadSectorOutlined)}
+      alignItems="Center"
+      gap="300"
+      onClick={() => onClick?.(threadId)}
+    >
+      <Box className={css.ThreadRepliesCount} shrink="No" alignItems="Center" gap="200">
+        <Icon size="100" src={Icons.Thread} filled />
+        <Text size="L400">
+          {threadDetail.count} {threadDetail.count === 1 ? 'Reply' : 'Replies'}
+        </Text>
+      </Box>
+      {latestSenderId && (
+        <>
+          <Line
+            className={css.ThreadSelectorDivider}
+            direction="Vertical"
+            variant="SurfaceVariant"
+          />
+          <Box gap="200" alignItems="Inherit">
+            <Text size="T200" truncate>
+              <span>Last reply by </span>
+              <b>{latestDisplayName}</b>
+              <span> — </span>
+              <Time
+                hour24Clock={hour24Clock}
+                dateFormatString={dateFormatString}
+                ts={latestEventTs}
+                inheritPriority
+              />
+            </Text>
+            <Icon size="100" src={Icons.ChevronRight} />
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+}

src/app/features/room/message/thread-selector/index.ts

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

src/app/features/room/message/thread-selector/styles.css.ts

@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+import { ContainerColor } from '../../../../styles/ContainerColor.css';
+
+export const ThreadSelectorContainer = style({
+  marginTop: config.space.S200,
+});
+
+export const ThreadSelector = style([
+  ContainerColor({ variant: 'SurfaceVariant' }),
+  {
+    padding: config.space.S200,
+    borderRadius: config.radii.R400,
+    cursor: 'pointer',
+
+    selectors: {
+      '&:hover, &:focus-visible': {
+        backgroundColor: color.SurfaceVariant.ContainerHover,
+      },
+      '&:active': {
+        backgroundColor: color.SurfaceVariant.ContainerActive,
+      },
+    },
+  },
+]);
+
+export const ThreadSectorOutlined = style({
+  borderWidth: config.borderWidth.B300,
+});
+
+export const ThreadSelectorDivider = style({
+  height: toRem(16),
+});
+
+export const ThreadRepliesCount = style({
+  color: color.Primary.Main,
+});

src/app/features/room/thread-view/ThreadView.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text, Tooltip, TooltipProvider } from 'folds';
+import classNames from 'classnames';
+import FocusTrap from 'focus-trap-react';
+import { Page, PageHeader } from '../../../components/page';
+import * as css from './styles.css';
+import { useRoom } from '../../../hooks/useRoom';
+import { useThreadClose } from '../../../state/hooks/roomToActiveThread';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+
+type ThreadViewProps = {
+  threadId: string;
+};
+export function ThreadView({ threadId }: ThreadViewProps) {
+  const room = useRoom();
+  const screenSize = useScreenSizeContext();
+  const floating = screenSize !== ScreenSize.Desktop;
+
+  const closeThread = useThreadClose(room.roomId);
+
+  const thread = room.getThread(threadId);
+  const events = thread?.events ?? [];
+
+  return (
+    <FocusTrap
+      paused={!floating}
+      focusTrapOptions={{
+        initialFocus: false,
+        clickOutsideDeactivates: true,
+        onDeactivate: floating ? closeThread : undefined,
+      }}
+    >
+      <Page
+        className={classNames(css.ThreadView, {
+          [css.ThreadViewFloating]: floating,
+        })}
+      >
+        <PageHeader>
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Box grow="Yes">
+              <Text size="H5" truncate>
+                Thread
+              </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={closeThread}>
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            </Box>
+          </Box>
+        </PageHeader>
+        <Box grow="Yes" direction="Column">
+          <Scroll visibility="Hover" hideTrack>
+            <div>
+              {events.map((mEvent) => (
+                <p style={{ padding: `8px 16px` }} key={mEvent.getId()}>
+                  {mEvent.sender?.name}: {mEvent.getContent().body}
+                </p>
+              ))}
+            </div>
+          </Scroll>
+        </Box>
+      </Page>
+    </FocusTrap>
+  );
+}

src/app/features/room/thread-view/index.tsx

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

src/app/features/room/thread-view/styles.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const ThreadView = style({
+  width: toRem(456),
+  flexShrink: 0,
+  flexGrow: 0,
+});
+
+export const ThreadViewFloating = style({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  zIndex: 1,
+
+  maxWidth: toRem(456),
+  flexShrink: 1,
+  width: '100vw',
+  boxShadow: config.shadow.E400,
+});

src/app/features/room/threads-menu/ThreadsError.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box, Icon, Icons, toRem, Text, config } from 'folds';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+import { BreakWord } from '../../../styles/Text.css';
+
+export function ThreadsError({ error }: { error: Error }) {
+  return (
+    <Box
+      className={ContainerColor({ variant: 'SurfaceVariant' })}
+      style={{
+        marginBottom: config.space.S200,
+        padding: `${config.space.S700} ${config.space.S400} ${toRem(60)}`,
+        borderRadius: config.radii.R300,
+      }}
+      grow="Yes"
+      direction="Column"
+      gap="400"
+      justifyContent="Center"
+      alignItems="Center"
+    >
+      <Icon src={Icons.Warning} size="600" />
+      <Box style={{ maxWidth: toRem(300) }} direction="Column" gap="200" alignItems="Center">
+        <Text size="H4" align="Center">
+          {error.name}
+        </Text>
+        <Text className={BreakWord} size="T400" align="Center">
+          {error.message}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

src/app/features/room/threads-menu/ThreadsLoading.tsx

@@ -0,0 +1,23 @@
+import { Box, config, Spinner } from 'folds';
+import React from 'react';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+
+export function ThreadsLoading() {
+  return (
+    <Box
+      className={ContainerColor({ variant: 'SurfaceVariant' })}
+      style={{
+        marginBottom: config.space.S200,
+        padding: config.space.S700,
+        borderRadius: config.radii.R300,
+      }}
+      grow="Yes"
+      direction="Column"
+      gap="400"
+      justifyContent="Center"
+      alignItems="Center"
+    >
+      <Spinner variant="Secondary" />
+    </Box>
+  );
+}

src/app/features/room/threads-menu/ThreadsMenu.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const ThreadsMenu = style({
+  display: 'flex',
+  maxWidth: toRem(548),
+  width: '100vw',
+  maxHeight: '90vh',
+});
+
+export const ThreadsMenuHeader = style({
+  paddingLeft: config.space.S400,
+  paddingRight: config.space.S200,
+});
+
+export const ThreadsMenuContent = style({
+  paddingLeft: config.space.S200,
+});

src/app/features/room/threads-menu/ThreadsMenu.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { forwardRef, useMemo } from 'react';
+import { EventTimelineSet, Room } from 'matrix-js-sdk';
+import { Box, config, Header, Icon, IconButton, Icons, Menu, Scroll, Text, toRem } from 'folds';
+import * as css from './ThreadsMenu.css';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+import { useRoomMyThreads } from '../../../hooks/useRoomThreads';
+import { AsyncStatus } from '../../../hooks/useAsyncCallback';
+import { getLinkedTimelines, getTimelinesEventsCount } from '../utils';
+import { ThreadsTimeline } from './ThreadsTimeline';
+import { ThreadsLoading } from './ThreadsLoading';
+import { ThreadsError } from './ThreadsError';
+
+const getTimelines = (timelineSet: EventTimelineSet) => {
+  const liveTimeline = timelineSet.getLiveTimeline();
+  const linkedTimelines = getLinkedTimelines(liveTimeline);
+
+  return linkedTimelines;
+};
+
+function NoThreads() {
+  return (
+    <Box
+      className={ContainerColor({ variant: 'SurfaceVariant' })}
+      style={{
+        marginBottom: config.space.S200,
+        padding: `${config.space.S700} ${config.space.S400} ${toRem(60)}`,
+        borderRadius: config.radii.R300,
+      }}
+      grow="Yes"
+      direction="Column"
+      gap="400"
+      justifyContent="Center"
+      alignItems="Center"
+    >
+      <Icon src={Icons.Thread} size="600" />
+      <Box style={{ maxWidth: toRem(300) }} direction="Column" gap="200" alignItems="Center">
+        <Text size="H4" align="Center">
+          No Threads Yet
+        </Text>
+        <Text size="T400" align="Center">
+          Threads you’re participating in will appear here.
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+type ThreadsMenuProps = {
+  room: Room;
+  requestClose: () => void;
+};
+export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
+  ({ room, requestClose }, ref) => {
+    const threadsState = useRoomMyThreads(room);
+    const threadsTimelineSet =
+      threadsState.status === AsyncStatus.Success ? threadsState.data : undefined;
+
+    const linkedTimelines = useMemo(() => {
+      if (!threadsTimelineSet) return undefined;
+      return getTimelines(threadsTimelineSet);
+    }, [threadsTimelineSet]);
+
+    const hasEvents = linkedTimelines && getTimelinesEventsCount(linkedTimelines) > 0;
+
+    return (
+      <Menu ref={ref} className={css.ThreadsMenu}>
+        <Box grow="Yes" direction="Column">
+          <Header className={css.ThreadsMenuHeader} size="500">
+            <Box grow="Yes">
+              <Text size="H5">My Threads</Text>
+            </Box>
+            <Box shrink="No">
+              <IconButton size="300" onClick={requestClose} radii="300">
+                <Icon src={Icons.Cross} size="400" />
+              </IconButton>
+            </Box>
+          </Header>
+          <Box grow="Yes">
+            {threadsState.status === AsyncStatus.Success && hasEvents ? (
+              <ThreadsTimeline timelines={linkedTimelines} requestClose={requestClose} />
+            ) : (
+              <Scroll size="300" hideTrack visibility="Hover">
+                <Box className={css.ThreadsMenuContent} direction="Column" gap="100">
+                  {(threadsState.status === AsyncStatus.Loading ||
+                    threadsState.status === AsyncStatus.Idle) && <ThreadsLoading />}
+                  {threadsState.status === AsyncStatus.Success && !hasEvents && <NoThreads />}
+                  {threadsState.status === AsyncStatus.Error && (
+                    <ThreadsError error={threadsState.error} />
+                  )}
+                </Box>
+              </Scroll>
+            )}
+          </Box>
+        </Box>
+      </Menu>
+    );
+  }
+);

src/app/features/room/threads-menu/ThreadsTimeline.tsx

@@ -0,0 +1,488 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Direction, EventTimeline, MatrixEvent, Room } from 'matrix-js-sdk';
+import { Avatar, Box, Chip, config, Icon, Icons, Scroll, Text } from 'folds';
+import { Opts as LinkifyOpts } from 'linkifyjs';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { SequenceCard } from '../../../components/sequence-card';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import {
+  AvatarBase,
+  ImageContent,
+  MessageNotDecryptedContent,
+  MessageUnsupportedContent,
+  ModernLayout,
+  MSticker,
+  RedactedContent,
+  Reply,
+  Time,
+  Username,
+  UsernameBold,
+} from '../../../components/message';
+import { UserAvatar } from '../../../components/user-avatar';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import {
+  getEditedEvent,
+  getEventThreadDetail,
+  getMemberAvatarMxc,
+  getMemberDisplayName,
+} from '../../../utils/room';
+import { GetContentCallback, MessageEvent } from '../../../../types/matrix/room';
+import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../../plugins/react-custom-html-parser';
+import { RenderMatrixEvent, useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
+import { RenderMessageContent } from '../../../components/RenderMessageContent';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+import * as customHtmlCss from '../../../styles/CustomHtml.css';
+import { EncryptedContent } from '../message';
+import { Image } from '../../../components/media';
+import { ImageViewer } from '../../../components/image-viewer';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { useTheme } from '../../../hooks/useTheme';
+import { PowerIcon } from '../../../components/power';
+import colorMXID from '../../../../util/colorMXID';
+import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import {
+  GetMemberPowerTag,
+  getPowerTagIconSrc,
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../../hooks/useMemberPowerTag';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { ThreadSelector, ThreadSelectorContainer } from '../message/thread-selector';
+import {
+  getTimelineAndBaseIndex,
+  getTimelineEvent,
+  getTimelineRelativeIndex,
+  getTimelinesEventsCount,
+} from '../utils';
+import { ThreadsLoading } from './ThreadsLoading';
+import { VirtualTile } from '../../../components/virtualizer';
+import { useAlive } from '../../../hooks/useAlive';
+import * as css from './ThreadsMenu.css';
+
+type ThreadMessageProps = {
+  room: Room;
+  event: MatrixEvent;
+  renderContent: RenderMatrixEvent<[string, MatrixEvent, string, GetContentCallback]>;
+  onOpen: (roomId: string, eventId: string) => void;
+  getMemberPowerTag: GetMemberPowerTag;
+  accessibleTagColors: Map<string, string>;
+  legacyUsernameColor: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+};
+function ThreadMessage({
+  room,
+  event,
+  renderContent,
+  onOpen,
+  getMemberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+  hour24Clock,
+  dateFormatString,
+}: ThreadMessageProps) {
+  const useAuthentication = useMediaAuthentication();
+  const mx = useMatrixClient();
+
+  const handleOpenClick: MouseEventHandler = (evt) => {
+    evt.stopPropagation();
+    const evtId = evt.currentTarget.getAttribute('data-event-id');
+    if (!evtId) return;
+    onOpen(room.roomId, evtId);
+  };
+
+  const renderOptions = () => (
+    <Box shrink="No" gap="200" alignItems="Center">
+      <Chip
+        data-event-id={event.getId()}
+        onClick={handleOpenClick}
+        variant="Secondary"
+        radii="Pill"
+      >
+        <Text size="T200">Open</Text>
+      </Chip>
+    </Box>
+  );
+
+  const sender = event.getSender()!;
+  const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
+  const senderAvatarMxc = getMemberAvatarMxc(room, sender);
+  const getContent = (() => event.getContent()) as GetContentCallback;
+
+  const memberPowerTag = getMemberPowerTag(sender);
+  const tagColor = memberPowerTag?.color
+    ? accessibleTagColors?.get(memberPowerTag.color)
+    : undefined;
+  const tagIconSrc = memberPowerTag?.icon
+    ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
+    : undefined;
+
+  const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
+
+  const mEventId = event.getId();
+
+  if (!mEventId) return null;
+
+  return (
+    <ModernLayout
+      before={
+        <AvatarBase>
+          <Avatar size="300">
+            <UserAvatar
+              userId={sender}
+              src={
+                senderAvatarMxc
+                  ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
+                    undefined
+                  : undefined
+              }
+              alt={displayName}
+              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </AvatarBase>
+      }
+    >
+      <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
+        <Box gap="200" alignItems="Baseline">
+          <Box alignItems="Center" gap="200">
+            <Username style={{ color: usernameColor }}>
+              <Text as="span" truncate>
+                <UsernameBold>{displayName}</UsernameBold>
+              </Text>
+            </Username>
+            {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+          </Box>
+          <Time ts={event.getTs()} hour24Clock={hour24Clock} dateFormatString={dateFormatString} />
+        </Box>
+        {renderOptions()}
+      </Box>
+      {event.replyEventId && (
+        <Reply
+          room={room}
+          replyEventId={event.replyEventId}
+          threadRootId={event.threadRootId}
+          onClick={handleOpenClick}
+          getMemberPowerTag={getMemberPowerTag}
+          accessibleTagColors={accessibleTagColors}
+          legacyUsernameColor={legacyUsernameColor}
+        />
+      )}
+      {renderContent(event.getType(), false, mEventId, event, displayName, getContent)}
+    </ModernLayout>
+  );
+}
+
+type ThreadsTimelineProps = {
+  timelines: EventTimeline[];
+  requestClose: () => void;
+};
+export function ThreadsTimeline({ timelines, requestClose }: ThreadsTimelineProps) {
+  const mx = useMatrixClient();
+  const { navigateRoom } = useRoomNavigate();
+  const alive = useAlive();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const room = useRoom();
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(room);
+
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+
+  const theme = useTheme();
+  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
+
+  const useAuthentication = useMediaAuthentication();
+  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+
+  const direct = useIsDirectRoom();
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const mentionClickHandler = useMentionClickHandler(room.roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
+
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+      ),
+    }),
+    [mx, room, mentionClickHandler]
+  );
+  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlParser(mx, room.roomId, {
+        linkifyOpts,
+        useAuthentication,
+        handleSpoilerClick: spoilerClickHandler,
+        handleMentionClick: mentionClickHandler,
+      }),
+    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+  );
+
+  const renderMatrixEvent = useMatrixEventRenderer<
+    [string, MatrixEvent, string, GetContentCallback]
+  >(
+    {
+      [MessageEvent.RoomMessage]: (eventId, event, displayName, getContent) => {
+        if (event.isRedacted()) {
+          return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
+        }
+
+        const threadDetail = getEventThreadDetail(event);
+
+        return (
+          <>
+            <RenderMessageContent
+              displayName={displayName}
+              msgType={event.getContent().msgtype ?? ''}
+              ts={event.getTs()}
+              getContent={getContent}
+              edited={!!event.replacingEvent()}
+              mediaAutoLoad={mediaAutoLoad}
+              urlPreview={urlPreview}
+              htmlReactParserOptions={htmlReactParserOptions}
+              linkifyOpts={linkifyOpts}
+              outlineAttachment
+            />
+            {threadDetail && (
+              <ThreadSelectorContainer>
+                <ThreadSelector
+                  room={room}
+                  threadId={eventId}
+                  threadDetail={threadDetail}
+                  outlined
+                  hour24Clock={hour24Clock}
+                  dateFormatString={dateFormatString}
+                />
+              </ThreadSelectorContainer>
+            )}
+          </>
+        );
+      },
+      [MessageEvent.RoomMessageEncrypted]: (eventId, mEvent, displayName) => {
+        const evtTimeline = room.getTimelineForEvent(eventId);
+
+        return (
+          <EncryptedContent mEvent={mEvent}>
+            {() => {
+              if (mEvent.isRedacted()) return <RedactedContent />;
+              if (mEvent.getType() === MessageEvent.Sticker)
+                return (
+                  <MSticker
+                    content={mEvent.getContent()}
+                    renderImageContent={(props) => (
+                      <ImageContent
+                        {...props}
+                        autoPlay={mediaAutoLoad}
+                        renderImage={(p) => <Image {...p} loading="lazy" />}
+                        renderViewer={(p) => <ImageViewer {...p} />}
+                      />
+                    )}
+                  />
+                );
+              if (mEvent.getType() === MessageEvent.RoomMessage) {
+                const editedEvent =
+                  evtTimeline && getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
+                const getContent = (() =>
+                  editedEvent?.getContent()['m.new_content'] ??
+                  mEvent.getContent()) as GetContentCallback;
+
+                return (
+                  <RenderMessageContent
+                    displayName={displayName}
+                    msgType={mEvent.getContent().msgtype ?? ''}
+                    ts={mEvent.getTs()}
+                    edited={!!editedEvent || !!mEvent.replacingEvent()}
+                    getContent={getContent}
+                    mediaAutoLoad={mediaAutoLoad}
+                    urlPreview={urlPreview}
+                    htmlReactParserOptions={htmlReactParserOptions}
+                    linkifyOpts={linkifyOpts}
+                  />
+                );
+              }
+              if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
+                return (
+                  <Text>
+                    <MessageNotDecryptedContent />
+                  </Text>
+                );
+              return (
+                <Text>
+                  <MessageUnsupportedContent />
+                </Text>
+              );
+            }}
+          </EncryptedContent>
+        );
+      },
+      [MessageEvent.Sticker]: (eventId, event, displayName, getContent) => {
+        if (event.isRedacted()) {
+          return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
+        }
+
+        const threadDetail = getEventThreadDetail(event);
+
+        return (
+          <>
+            <MSticker
+              content={getContent()}
+              renderImageContent={(props) => (
+                <ImageContent
+                  {...props}
+                  autoPlay={mediaAutoLoad}
+                  renderImage={(p) => <Image {...p} loading="lazy" />}
+                  renderViewer={(p) => <ImageViewer {...p} />}
+                />
+              )}
+            />
+            {threadDetail && (
+              <ThreadSelectorContainer>
+                <ThreadSelector
+                  room={room}
+                  threadId={eventId}
+                  threadDetail={threadDetail}
+                  outlined
+                  hour24Clock={hour24Clock}
+                  dateFormatString={dateFormatString}
+                />
+              </ThreadSelectorContainer>
+            )}
+          </>
+        );
+      },
+    },
+    undefined,
+    (eventId, event) => {
+      if (event.isRedacted()) {
+        return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
+      }
+      return (
+        <Box grow="Yes" direction="Column">
+          <Text size="T400" priority="300">
+            <code className={customHtmlCss.Code}>{event.getType()}</code>
+            {' event'}
+          </Text>
+        </Box>
+      );
+    }
+  );
+
+  const handleOpen = (roomId: string, eventId: string) => {
+    navigateRoom(roomId, eventId);
+    requestClose();
+  };
+
+  const eventsLength = getTimelinesEventsCount(timelines);
+  const timelineToPaginate = timelines[timelines.length - 1];
+  const [paginationToken, setPaginationToken] = useState(
+    timelineToPaginate.getPaginationToken(Direction.Backward)
+  );
+
+  const virtualizer = useVirtualizer({
+    count: eventsLength,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 122,
+    overscan: 10,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const paginate = useCallback(async () => {
+    const moreToLoad = await mx.paginateEventTimeline(timelineToPaginate, {
+      backwards: true,
+      limit: 30,
+    });
+
+    if (alive()) {
+      setPaginationToken(
+        moreToLoad ? timelineToPaginate.getPaginationToken(Direction.Backward) : null
+      );
+    }
+  }, [mx, alive, timelineToPaginate]);
+
+  // auto paginate when scroll reach bottom
+  useEffect(() => {
+    const lastVItem = vItems.length > 0 ? vItems[vItems.length - 1] : undefined;
+    if (paginationToken && lastVItem && lastVItem.index === eventsLength - 1) {
+      paginate();
+    }
+  }, [vItems, paginationToken, eventsLength, paginate]);
+
+  return (
+    <Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
+      <Box className={css.ThreadsMenuContent} direction="Column" gap="100">
+        <div
+          style={{
+            position: 'relative',
+            height: virtualizer.getTotalSize(),
+          }}
+        >
+          {vItems.map((vItem) => {
+            const reverseTimelineIndex = eventsLength - vItem.index - 1;
+
+            const [timeline, baseIndex] = getTimelineAndBaseIndex(timelines, reverseTimelineIndex);
+            if (!timeline) return null;
+            const event = getTimelineEvent(
+              timeline,
+              getTimelineRelativeIndex(reverseTimelineIndex, baseIndex)
+            );
+
+            if (!event?.getId()) return null;
+
+            return (
+              <VirtualTile
+                virtualItem={vItem}
+                style={{ paddingBottom: config.space.S200 }}
+                ref={virtualizer.measureElement}
+                key={vItem.index}
+              >
+                <SequenceCard
+                  key={event.getId()}
+                  style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                >
+                  <ThreadMessage
+                    room={room}
+                    event={event}
+                    renderContent={renderMatrixEvent}
+                    onOpen={handleOpen}
+                    getMemberPowerTag={getMemberPowerTag}
+                    accessibleTagColors={accessibleTagColors}
+                    legacyUsernameColor={legacyUsernameColor || direct}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                  />
+                </SequenceCard>
+              </VirtualTile>
+            );
+          })}
+        </div>
+        {paginationToken && <ThreadsLoading />}
+      </Box>
+    </Scroll>
+  );
+}

src/app/features/room/threads-menu/index.ts

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

src/app/features/room/utils/index.ts

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