update folds

thread view - WIP
clear active thread state on logout
2025-11-03 15:30:52 +05:30 · 2025-11-03 15:29:51 +05:30 · 2025-11-03 15:28:52 +05:30 · 2025-11-03 15:28:42 +05:30 · 2025-11-03 15:27:02 +05:30 · 2025-10-22 16:22:31 +05:30
171 changed files with 2169 additions and 13411 deletions
@@ -1,127 +0,0 @@
-labels: ["needs-confirmation"]
-body:
-  - type: markdown #add faqs in future
-    attributes:
-      value: |
-        > [!IMPORTANT]
-        > Please read through [the Discussion rules](https://github.com/cinnyapp/cinny/discussions/2653) and check for both existing [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc) prior to opening a new Discussion.
-  - type: markdown
-    attributes:
-      value: "# Issue Details"
-  - type: textarea
-    attributes:
-      label: Issue Description
-      description: |
-        Provide a detailed description of the issue.  Include relevant information, such as:
-        - The feature or configuration option you encounter the issue with.
-        - Screenshots, screen recordings, or other supporting media (as needed).
-        - If this is a regression of an existing issue that was closed or resolved, please include the previous item reference (Discussion, Issue, PR, commit) in your description.
-      placeholder: |
-        When I try to send a message in a room, the message doesn't appear in the timeline.
-        OR
-        The application crashes when I click on the settings button.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Expected Behavior
-      description: |
-        Describe how you expect Cinny to behave in this situation.
-      placeholder: |
-        I expected the message to appear in the room timeline immediately after sending.
-        OR
-        The settings panel should open smoothly without any crashes.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Actual Behavior
-      description: |
-        Describe how Cinny actually behaves in this situation.  If it is not immediately obvious how the actual behavior differs from the expected behavior described above, please be sure to mention the deviation specifically.
-      placeholder: |
-        The application freezes for 3 seconds and then shows a white screen.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Reproduction Steps
-      description: |
-        Provide a detailed set of step-by-step instructions for reproducing this issue.
-      placeholder: |
-        1. Open Cinny and log in to my account
-        2. Navigate to the #general room
-        3. Type a message in the message box
-        4. Press Enter to send
-        5. Notice that the message doesn't appear in the timeline
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Environement
-      description: |
-        Please provide information about your environment. Include the following:
-        - OS:
-        - Browser: 
-        - Cinny Web Version: (app.cinny.in or self hosted)
-        - Cinny desktop Version: (appimage or deb or flatpak)
-        - Matrix Homeserver: 
-      placeholder: |
-        - OS: Windows 11
-        - Browser: Chrome 120.0.6099.109
-        - Cinny Web Version: 3.2.0 (app.cinny.in or self hosted)
-        - Cinny desktop Version: 3.2.0 (appimage or deb or flatpak)
-        - Matrix Homeserver: matrix.org (Synapse 1.97.0)
-      render: text
-    validations:
-      required: true
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant Logs
-      description: |
-        If applicable, add browser console logs to help explain your problem.
-        
-        **To get browser console logs:**
-        - Chrome/Edge: Press F12 → Console tab
-        - Firefox: Press F12 → Console tab  
-        - Safari: Develop → Show Web Inspector → Console
-        
-        Please wrap large log outputs in code blocks with triple backticks (```).
-      placeholder: |
-        ```
-        Error: Failed to send message
-            at MessageComposer.sendMessage (composer.js:245)
-            at HTMLButtonElement.onClick (composer.js:189)
-        TypeError: Cannot read property 'content' of undefined
-            at RoomTimeline.render (timeline.js:567)
-        ```
-      render: shell
-    validations:
-      required: false
-  - type: textarea 
-    attributes:
-      label: Additional context
-      description: |
-        Add any other context about the problem here (e.g., when did this start happening, does it happen on different homeservers, etc.)
-      placeholder: |
-        - This started happening after I updated to version 3.2.0
-        - It only happens in encrypted rooms, not in public rooms
-        - I've tried on both Firefox and Chrome with the same result
-        - It works fine on my phone using the same account
-        - This happens on all homeservers I've tested (matrix.org, mozilla.org)
-    validations:
-      required: false
-  - type: markdown
-    attributes:
-      value: |
-        # User Acknowledgements
-        > [!TIP]
-        > Use these links to review the existing Cinny [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc).
-  - type: checkboxes #add faqs in future
-    attributes:
-      label: "I acknowledge that:"
-      options:
-        - label: I have searched the Cinny repository (both open and closed Discussions and Issues) and confirm this is not a duplicate of an existing issue or discussion.
-          required: true
-        - label: I have checked the "Preview" tab on all text fields to ensure that everything looks right, and have wrapped all configuration and code in code blocks with a group of three backticks (` ``` `) on separate lines.
-          required: true
@@ -0,0 +1,57 @@
+name: 🐞 Bug Report
+description: Report a bug
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## First of all
+        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
+        2. Make sure Cinny is up to date.
+        3. Make sure it's an issue with Cinny and not something else you are using.
+        4. Remember to be friendly.
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear description of what the bug is. Include screenshots if applicable.
+      placeholder: Bug description
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to ...
+        2. Click on ...
+        3. See error
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear description of what you expected to happen.
+
+  - type: textarea
+    id: info
+    attributes:
+      label: Platform and versions
+      description: "Provide OS, browser and Cinny version with your Homeserver."
+      placeholder: |
+       1. OS: [e.g. Windows 10, MacOS]
+       2. Browser: [e.g. chrome 99.5, firefox 97.2]
+       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
+       4. Matrix homeserver: [e.g. matrix.org]
+      render: shell
+    validations:
+      required: true
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
@@ -1,5 +1,4 @@
-blank_issues_enabled: false
 contact_links:
-  - name: Features, Bug Reports, Questions
-    url: https://github.com/cinnyapp/cinny/discussions/new/choose
-    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
+  - name: 💬 Matrix Chat
+    url: https://matrix.to/#/#cinny:matrix.org
+    about: Ask questions and talk to other Cinny users and the maintainers
@@ -0,0 +1,33 @@
+name: 💡 Feature Request
+description: Suggest an idea
+
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Describe the problem
+      description: A clear description of the problem this feature would solve
+      placeholder: "I'm always frustrated when..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: "Describe the solution you'd like"
+      description: A clear description of what change you would like
+      placeholder: "I would like to..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+      description: "Any alternative solutions you've considered"
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
@@ -1,9 +0,0 @@
---
-name: Pre-Discussed and Approved Topics
-about: |-
-  Only for topics already discussed and approved in the GitHub Discussions section.
---
-
-**DO NOT OPEN A NEW ISSUE. PLEASE USE THE DISCUSSIONS SECTION.**
-
-**I DIDN'T READ THE ABOVE LINE. PLEASE CLOSE THIS ISSUE.**
@@ -0,0 +1,22 @@
+<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
+
+### Description
+<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
+
+
+Fixes #
+
+#### Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+### Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
@@ -0,0 +1,3 @@
+# Reporting a Vulnerability
+
+**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**
@@ -1,22 +1,10 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    ":dependencyDashboardApproval",
-    ":semanticCommits",
-    "group:monorepos"
-  ],
+  "extends": ["config:recommended", ":dependencyDashboardApproval"],
  "labels": ["Dependencies"],
-  "rebaseWhen": "conflicted",
  "packageRules": [
    {
      "matchUpdateTypes": ["lockFileMaintenance"]
-    },
-    {
-      "matchPackageNames": ["slate", "slate-dom", "slate-history", "slate-react"]
-    },
-    {
-      "matchPackageNames": ["linkifyjs", "linkify-react"]
    }
  ],
  "lockFileMaintenance": {
@@ -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@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        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@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: pr
          path: ./pr.txt
@@ -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
@@ -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@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+        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@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+        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. ⚠️
@@ -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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        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
@@ -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.
@@ -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@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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 }}'
@@ -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 }}
@@ -1,48 +1,32 @@
 name: Production deploy

 on:
-  workflow_dispatch:
+  release:
+    types: [published]

 jobs:
  deploy-and-tarball:
    name: Netlify deploy and tarball
-    outputs:
-      version: ${{ steps.vars.outputs.tag }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
+        uses: actions/checkout@v4.2.0
      - name: Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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: Run semantic release
-        run: npm run semantic-release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GIT_AUTHOR_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
-          GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
-          GIT_COMMITTER_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
-          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
-      - name: Get version from tag
-        id: vars
-        run: |
-          TAG=$(git describe --tags --abbrev=0) 
-          echo "tag=$TAG" >> $GITHUB_OUTPUT
      - name: Build app
        env:
          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 ${{ steps.vars.outputs.tag }}'
+          deploy-message: 'Prod deploy ${{ github.ref_name }}'
          enable-commit-comment: false
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
@@ -52,6 +36,9 @@ jobs:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
        timeout-minutes: 1
+      - name: Get version from tag
+        id: vars
+        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
      - name: Create tar.gz
        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
      - name: Sign tar.gz
@@ -65,57 +52,48 @@ 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@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836
        with:
-          tag_name: ${{ steps.vars.outputs.tag }}
          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
-    needs: deploy-and-tarball
-    env:
-      VERSION: ${{ needs.deploy-and-tarball.outputs.version }}
+    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
-        with:
-          fetch-depth: 0
+        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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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 }}
-          tags: |
-            type=raw,value=${{ env.VERSION }}
-            type=raw,value=latest
      - name: Build and push Docker image
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@v6.18.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}
@@ -1,3 +0,0 @@
-# These are commented until we enable lint and typecheck
-# npx tsc -p tsconfig.json --noEmit
-# npx lint-staged
@@ -1 +0,0 @@
-24.13.1
@@ -18,7 +18,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests

 > ### Legal Notice
-> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. You will also be asked to [sign the CLA](https://github.com/cinnyapp/cla) upon submiting your pull request.
+> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.

 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.

@@ -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.8-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
@@ -16,10 +16,6 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
 - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
 - [Contributing](./CONTRIBUTING.md)

-> [!IMPORTANT] 
-We are currently in the [process of replacing the matrix-js-sdk](https://github.com/cinnyapp/cinny/issues/257#issuecomment-3714406704) with our own SDK. As a result, we will not be accepting any pull requests until further notice.
-Thank you for your understanding.
-
 <img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">

 ## Getting started
@@ -87,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
@@ -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,11 +15,10 @@
    "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",
-      "#stickers-and-emojis:tastytea.de"
+      "#mathematics-on:matrix.org"
    ],
    "rooms": [
      "#cinny:matrix.org",
@@ -22,7 +28,7 @@
      "#PrivSec.dev:arcticfoxes.net",
      "#disroot:aria-net.org"
    ],
-    "servers": ["matrixrooms.info", "matrix.org", "mozilla.org", "unredacted.org"]
+    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
  },

  "hashRouter": {
@@ -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,53 +10,11 @@
  "scripts": {
    "start": "vite",
    "build": "vite build",
-    "preview": "vite preview",
-    "lint": "npm run check:eslint && npm run check:prettier",
+    "lint": "yarn check:eslint && yarn check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit",
-    "prepare": "husky install",
-    "commit": "git-cz",
-    "semantic-release": "semantic-release"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx}": "eslint",
-    "*": "prettier --ignore-unknown --write"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "release": {
-    "branches": [
-      "dev"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/exec",
-        {
-          "prepareCmd": "node scripts/update-version.js ${nextRelease.version}"
-        }
-      ],
-      [
-        "@semantic-release/git",
-        {
-          "assets": [
-            "package.json",
-            "package-lock.json",
-            "src/app/features/settings/about/About.tsx",
-            "src/app/pages/auth/AuthFooter.tsx",
-            "src/app/pages/client/WelcomePage.tsx"
-          ],
-          "message": "chore(release): ${nextRelease.version} [skip ci]"
-        }
-      ],
-      "@semantic-release/github"
-    ]
+    "typecheck": "tsc --noEmit"
  },
  "keywords": [],
  "author": "Ajay Bura",
@@ -85,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",
@@ -94,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",
@@ -110,21 +67,18 @@
    "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",
-    "@semantic-release/exec": "7.1.0",
-    "@semantic-release/git": "10.0.1",
    "@types/chroma-js": "3.1.1",
    "@types/file-saver": "2.0.5",
    "@types/is-hotkey": "0.1.10",
@@ -139,7 +93,6 @@
    "@typescript-eslint/parser": "5.46.1",
    "@vitejs/plugin-react": "4.2.0",
    "buffer": "6.0.3",
-    "cz-conventional-changelog": "3.3.0",
    "eslint": "8.29.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "8.5.0",
@@ -147,12 +100,9 @@
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
-    "husky": "9.1.7",
-    "lint-staged": "16.3.2",
    "prettier": "2.8.1",
-    "semantic-release": "25.0.3",
    "typescript": "4.9.4",
-    "vite": "6.4.2",
+    "vite": "5.4.19",
    "vite-plugin-pwa": "0.20.5",
    "vite-plugin-static-copy": "1.0.4",
    "vite-plugin-top-level-await": "1.4.4"
@@ -1,48 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { execSync } from "child_process";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const version = process.argv[2];
-
-if (!version) {
-  console.error("Version argument missing");
-  process.exit(1);
-}
-
-const root = path.resolve(__dirname, "..");
-const newVersionTag = `v${version}`;
-
-// Update package.json + package-lock.json safely
-execSync(`npm version ${version} --no-git-tag-version`, {
-  cwd: root,
-  stdio: "inherit",
-});
-
-console.log(`Updated package.json and package-lock.json → ${version}`);
-
-// Update UI version references
-const files = [
-  "src/app/features/settings/about/About.tsx",
-  "src/app/pages/auth/AuthFooter.tsx",
-  "src/app/pages/client/WelcomePage.tsx",
-];
-
-files.forEach((filePath) => {
-  const absPath = path.join(root, filePath);
-
-  if (!fs.existsSync(absPath)) {
-    console.warn(`File not found: ${filePath}`);
-    return;
-  }
-
-  const content = fs.readFileSync(absPath, "utf8");
-  const updated = content.replace(/v\d+\.\d+\.\d+/g, newVersionTag);
-
-  fs.writeFileSync(absPath, updated);
-
-  console.log(`Updated ${filePath} → ${newVersionTag}`);
-});
@@ -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 (
@@ -1,65 +0,0 @@
-import React, { ReactNode, useCallback, useRef } from 'react';
-import { useAtomValue, useSetAtom } from 'jotai';
-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>
-  );
-}
@@ -1,45 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import { as, Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
-import React, { ReactNode } from 'react';
-import { ModalWide } from '../styles/Modal.css';
-import { stopPropagation } from '../utils/keyboard';
-
-export type RenderViewerProps = {
-  src: string;
-  alt: string;
-  requestClose: () => void;
-};
-
-type ImageOverlayProps = RenderViewerProps & {
-  viewer: boolean;
-  renderViewer: (props: RenderViewerProps) => ReactNode;
-};
-
-export const ImageOverlay = as<'div', ImageOverlayProps>(
-  ({ src, alt, viewer, requestClose, renderViewer, ...props }, ref) => (
-    <Overlay {...props} ref={ref} open={viewer} backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: () => requestClose(),
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Modal
-            className={ModalWide}
-            size="500"
-            onContextMenu={(evt: any) => evt.stopPropagation()}
-          >
-            {renderViewer({
-              src,
-              alt,
-              requestClose,
-            })}
-          </Modal>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  )
-);
@@ -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>;
@@ -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">
@@ -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>
-  );
-}
@@ -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';
@@ -1,10 +0,0 @@
-export enum CreateRoomType {
-  TextRoom = 'text',
-  VoiceRoom = 'voice',
-}
-
-export enum CreateRoomAccess {
-  Private = 'private',
-  Restricted = 'restricted',
-  Public = 'public',
-}
@@ -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) {
@@ -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' }}
                />
@@ -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>
              }
@@ -157,12 +157,10 @@ const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): In
      return children;
    }

-    const children = node.childNodes.flatMap((child) => getInlineElement(child, processText));
-    if (children.length === 0) return [{ text: '' }];
-    return children;
+    return node.childNodes.flatMap((child) => getInlineElement(child, processText));
  }

-  return [{ text: '' }];
+  return [];
 };

 const parseBlockquoteNode = (
@@ -193,7 +191,7 @@ const parseBlockquoteNode = (

      if (child.name === 'p') {
        appendLine();
-        quoteLines.push(getInlineElement(child, processText));
+        quoteLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
        return;
      }

@@ -230,13 +228,9 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
      children: [{ text }],
    }));
    const childCode = node.children[0];
-    const attribs =
-      isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs : undefined;
-    const languageClass = attribs?.class;
-    const customLabel = attribs?.['data-label'];
-    const prefix = {
-      text: `${mdSequence}${customLabel ?? languageClass?.replace('language-', '') ?? ''}`,
-    };
+    const className =
+      isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs.class ?? '' : '';
+    const prefix = { text: `${mdSequence}${className.replace('language-', '')}` };
    const suffix = { text: mdSequence };
    return [
      { type: BlockType.Paragraph, children: [prefix] },
@@ -283,7 +277,7 @@ const parseListNode = (

      if (child.name === 'li') {
        appendLine();
-        listLines.push(getInlineElement(child, processText));
+        listLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
        return;
      }

@@ -331,7 +325,7 @@ const parseHeadingNode = (
  node: Element,
  processText: ProcessTextCallback
 ): HeadingElement | ParagraphElement => {
-  const children = getInlineElement(node, processText);
+  const children = node.children.flatMap((child) => getInlineElement(child, processText));

  const headingMatch = node.name.match(/^h([123456])$/);
  const [, g1AsLevel] = headingMatch ?? ['h3', '3'];
@@ -394,7 +388,7 @@ export const domToEditorInput = (
        appendLine();
        children.push({
          type: BlockType.Paragraph,
-          children: getInlineElement(node, processText),
+          children: node.children.flatMap((child) => getInlineElement(child, processText)),
        });
        return;
      }
@@ -11,7 +11,7 @@ import {
 } from '../../plugins/markdown';
 import { findAndReplace } from '../../utils/findAndReplace';
 import { sanitizeForRegex } from '../../utils/regex';
-import { isUserId } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';

 export type OutputOptions = {
  allowTextFormatting?: boolean;
@@ -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);
      }
@@ -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
@@ -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>
  );
@@ -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);
@@ -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>
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const Time = style({
+  fontWeight: 'inherit',
+  flexShrink: 0,
+});
@@ -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>
    );
@@ -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);
@@ -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);
@@ -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)
@@ -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)
@@ -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)
@@ -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}
+  />
 ));
@@ -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
      )}
@@ -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',
@@ -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}
-    />
-  )
-);
@@ -1 +0,0 @@
-export * from './StackedAvatar';
@@ -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>;
@@ -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>
@@ -23,11 +23,6 @@ export const UrlPreviewImg = style([
    objectPosition: 'center',
    flexShrink: 0,
    overflow: 'hidden',
-    cursor: 'pointer',
-
-    ':hover': {
-      filter: 'brightness(0.8)',
-    },
  },
 ]);

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
-import { ImageOverlay } from '../ImageOverlay';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';
@@ -13,8 +12,6 @@ import * as css from './UrlPreviewCard.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { ImageViewer } from '../image-viewer';
-import { onEnterOrSpace } from '../../utils/keyboard';

 const linkStyles = { color: color.Success.Main };

@@ -22,7 +19,6 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
  ({ url, ts, ...props }, ref) => {
    const mx = useMatrixClient();
    const useAuthentication = useMediaAuthentication();
-    const [viewer, setViewer] = useState(false);
    const [previewStatus, loadPreview] = useAsyncCallback(
      useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx])
    );
@@ -34,41 +30,11 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
    if (previewStatus.status === AsyncStatus.Error) return null;

    const renderContent = (prev: IPreviewUrlResponse) => {
-      const thumbUrl = mxcUrlToHttp(
-        mx,
-        prev['og:image'] || '',
-        useAuthentication,
-        256,
-        256,
-        'scale',
-        false
-      );
-
-      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication);
+      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication, 256, 256, 'scale', false);

      return (
        <>
-          {thumbUrl && (
-            <UrlPreviewImg
-              src={thumbUrl}
-              alt={prev['og:title']}
-              title={prev['og:title']}
-              tabIndex={0}
-              onKeyDown={(evt) => onEnterOrSpace(() => setViewer(true))(evt)}
-              onClick={() => setViewer(true)}
-            />
-          )}
-          {imgUrl && (
-            <ImageOverlay
-              src={imgUrl}
-              alt={prev['og:title']}
-              viewer={viewer}
-              requestClose={() => {
-                setViewer(false);
-              }}
-              renderViewer={(p) => <ImageViewer {...p} />}
-            />
-          )}
+          {imgUrl && <UrlPreviewImg src={imgUrl} alt={prev['og:title']} title={prev['og:title']} />}
          <UrlPreviewContent>
            <Text
              style={linkStyles}
@@ -76,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"
            >
@@ -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>
        }
@@ -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 (
@@ -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>
                              }
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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} />
-  );
-}
@@ -1 +0,0 @@
-export * from './CallStatus';
@@ -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}`,
-});
@@ -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>
-  );
-}
@@ -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>
-      )}
-    </>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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,
-});
@@ -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}
@@ -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
@@ -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);
@@ -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 }}
@@ -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>
@@ -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"
@@ -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>
            )}
@@ -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={
@@ -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>
@@ -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} />}
            >
@@ -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>
@@ -19,16 +19,15 @@ 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';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl, getStateEvent } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { getPowersLevelFromMatrixEvent, usePowerLevels } from '../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../utils/notifications';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -49,17 +48,9 @@ import {
  RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
-import { getRoomCreatorsForRoomId, useRoomCreators } from '../../hooks/useRoomCreators';
-import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
+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';
-import { StateEvent } from '../../../types/matrix/room';

 type RoomNavItemMenuProps = {
  room: Room;
@@ -218,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;
@@ -263,8 +236,6 @@ export function RoomNavItem({
    (receipt) => receipt.userId !== mx.getUserId()
  );

-  const roomName = useRoomName(room);
-
  const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
    evt.preventDefault();
    setMenuAnchor({
@@ -280,39 +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) => {
-    const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
-    const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
-    const creators = getRoomCreatorsForRoomId(mx, room.roomId);
-    const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
-    const hasCallPermission = permissions.event(
-      StateEvent.GroupCallMemberPrefix,
-      mx.getSafeUserId()
-    );
-
-    // Do not join if missing permissions or no livekit support and call is not started by others
-    if (!hasCallPermission || (!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
@@ -325,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">
@@ -337,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 && (
@@ -372,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}
@@ -424,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"
@@ -104,7 +104,6 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
                    renderFallback={() => (
                      <RoomIcon
                        size="50"
-                        roomType={room.getType()}
                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
                        filled
                      />
@@ -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>
@@ -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);

@@ -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;
 };
@@ -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>
-  );
-}
@@ -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);

@@ -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>
@@ -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), [])
    );

@@ -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;
@@ -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}
@@ -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>
            )}
@@ -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?.();
  };

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ajay Bura	444b2feb9e	update folds	2025-11-03 15:30:52 +05:30
Ajay Bura	f35aa384e5	thread view - WIP	2025-11-03 15:29:51 +05:30
Ajay Bura	b5fd41f862	clear active thread state on logout	2025-11-03 15:28:52 +05:30
Ajay Bura	3d4c91c969	add onClick prop to thread selector	2025-11-03 15:28:42 +05:30
Ajay Bura	38cc6e6f3a	add room to active thread atom	2025-11-03 15:27:02 +05:30
Ajay Bura	12bcbc2e78	load threads in My Threads menu	2025-10-22 16:22:31 +05:30
Ajay Bura	e44ca92422	remove avatar from threads selector	2025-10-22 16:21:33 +05:30
Ajay Bura	174b315278	move timeline utils functions to new file	2025-10-22 16:21:16 +05:30
Ajay Bura	d73428ee3d	add option to inherit priority in time component	2025-10-22 16:20:22 +05:30
Ajay Bura	f2c5a595b9	Merge branch 'dev' into fix-257	2025-09-27 10:00:30 +05:30
Ajay Bura	a6a3ac3b24	redesign thread selector	2025-09-25 12:17:44 +05:30
Ajay Bura	67c6785bf3	inherit font weight for time component	2025-09-25 12:17:14 +05:30
Ajay Bura	d36938e1fd	fix typo	2025-09-24 16:32:05 +05:30
Ajay Bura	1914606895	threads - WIP	2025-09-24 15:57:15 +05:30
Ajay Bura	19096c3543	Merge branch 'dev' into fix-257	2025-09-21 09:54:55 +05:30
Ajay Bura	737cc09fea	Merge branch 'dev' into fix-257	2025-09-15 13:16:59 +05:30
Ajay Bura	154f234d0c	thread menu - WIP	2025-09-15 13:16:43 +05:30