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
199 changed files with 1987 additions and 6710 deletions
@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}
@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}
@@ -1,10 +1,6 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    ":dependencyDashboardApproval",
-    ":semanticCommits"
-  ],
+  "extends": ["config:recommended", ":dependencyDashboardApproval"],
  "labels": ["Dependencies"],
  "packageRules": [
    {
@@ -12,12 +12,12 @@ jobs:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
      - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@v4.4.0
        with:
-          node-version-file: ".node-version"
-          package-manager-cache: false
+          node-version: 20.12.2
+          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build app
@@ -25,7 +25,7 @@ jobs:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Upload artifact
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: preview
          path: dist
@@ -33,7 +33,7 @@ jobs:
      - name: Save pr number
        run: echo ${PR_NUMBER} > ./pr.txt
      - name: Upload pr number
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@v4.6.2
        with:
          name: pr
          path: ./pr.txt
@@ -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@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -25,7 +24,7 @@ jobs:
        id: pr
        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
      - name: Download artifact
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -33,7 +32,7 @@ jobs:
          path: dist
      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
        with:
          publish-dir: dist
          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@@ -46,12 +45,12 @@ jobs:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
        timeout-minutes: 1
      - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@24bffb9b452ba05a4f3f77933840a6a841d1b32b #v3.0.1
+        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
        env:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
-          pr-number: ${{ steps.pr.outputs.id }}
-          comment-tag: ${{ steps.pr.outputs.id }}
+          pr_number: ${{ steps.pr.outputs.id }}
+          comment_tag: ${{ steps.pr.outputs.id }}
          message: |
              Preview: ${{ steps.netlify.outputs.deploy-url }}
              ⚠️ Exercise caution. Use test accounts. ⚠️
@@ -5,59 +5,15 @@ on:
    paths:
      - 'Dockerfile'
      - '.github/workflows/docker-pr.yml'
-      - '.github/workflows/prod-deploy.yml'

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

  publish-image:
-    name: Push Docker image to Docker Hub, GHCR
+    name: Push Docker image to Docker Hub, ghcr
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@v4.2.0
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
+        uses: docker/setup-qemu-action@v3.6.0
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
-      - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/setup-buildx-action@v3.11.1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.5.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+      - name: Login to the Container registry
+        uses: docker/login-action@v3.5.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker, GHCR
+      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@v5.8.0
        with:
          images: |
            ${{ secrets.DOCKER_USERNAME }}/cinny
            ghcr.io/${{ github.repository }}
      - name: Build and push Docker image
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@v6.18.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -1 +0,0 @@
-24.13.1
@@ -1,5 +1,5 @@
 ## Builder
-FROM node:24.13.1-alpine AS builder
+FROM node:20.12.2-alpine3.18 as builder

 WORKDIR /src

@@ -11,7 +11,7 @@ RUN npm run build


 ## App
-FROM nginx:1.29.5-alpine
+FROM nginx:1.29.1-alpine

 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
@@ -1,62 +1,111 @@
-# Lotus Chat
+# Cinny
+<p>
+    <a href="https://github.com/ajbura/cinny/releases">
+        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
+    <a href="https://hub.docker.com/r/ajbura/cinny">
+        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
+    <a href="https://fosstodon.org/@cinnyapp">
+        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
+    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
+        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
+    <a href="https://cinny.in/#sponsor">
+        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
+</p>

-A Matrix client for [Lotus Guild](https://lotusguild.org) — forked from [Cinny](https://github.com/cinnyapp/cinny) v4.11.1.
+A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
+- [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
+- [Contributing](./CONTRIBUTING.md)

-Deployed at [chat.lotusguild.org](https://chat.lotusguild.org).
+<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">

---
+## Getting started
+The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.

-## Changes from upstream Cinny
+You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).

-### Branding & Identity
+## Self-hosting
+To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).

- Package renamed to `lotus-chat`, description updated to "Lotus Chat — Matrix client for Lotus Guild"
- App title changed from "Cinny" to "Lotus Chat" throughout
- Favicon, PWA icons, and all icon sizes (57×57 → 180×180 Apple touch icons) replaced with Lotus.png variants
- Logo in About dialog and Auth page replaced with official Lotus.png
- Auth footer rewritten: shows dynamic version from `package.json`, links to lotusguild.org, chat.lotusguild.org, and matrix.lotusguild.org
- Welcome page tagline changed from "Yet another matrix client" to "A Matrix client for Lotus Guild"
- Encryption key export filename changed from `cinny-keys.txt` to `lotus-keys.txt`
- `manifest.json` updated with Lotus name, description, and branding colors
+* The default homeservers and explore pages are defined in [`config.json`](config.json).

-### LotusGuild Terminal Design System (TDS) v1.2
+* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
+    * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.

-A full custom theme engine layered on top of Cinny's vanilla-extract theming:
+* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
+    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.

-**Dark mode** (`LotusTerminalTheme`):
- CRT terminal aesthetic: scanline overlay, vignette, phosphor glow
- Palette: bg `#030508`, orange `#FF6B00`, cyan `#00D4FF`, green `#00FF88`, text `#c4d9ee`
- Monospace font stack, terminal-style scrollbars
- Custom hex-grid and circuit-board CSS background patterns
- Matrix-style boot messages on the welcome page
- CSS variables: `--lt-*` family covering colors, glow effects, borders, animations
+<details><summary><b>PGP Public Key to verify tarball</b></summary>

-**Light mode** (`LotusTerminalLightTheme`):
- Full light palette: bg `#edf0f5`, orange `#c44e00`, cyan `#0062b8`, green `#006d35`, text `#111827`
- No CRT effects (scanlines, vignette disabled)
- Light-mode scrollbars, adjusted code block colors, semantic color overrides
- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass`
- `ThemeManager.tsx` sets `data-theme` attribute based on active theme kind
+```
+-----BEGIN PGP PUBLIC KEY BLOCK-----

-**Chat Backgrounds** (18+ custom patterns, all TDS-aware):
- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
- Chevron, polka dots, triangles, plaid
- All patterns use CSS custom properties — adapt to both TDS dark and light themes
- Settings toggle for showing per-message sender profiles
+mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
+6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
+FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
+K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
+leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
+Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
+Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
+jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
+4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
+AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
+vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
+YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
+AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
+Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
+K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
+atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
+AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
+SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
+3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
+ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
+5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
+Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
+QPqfGDpowBwRkkOsGz/XVcesJ1Pzg4bKivTS9kZjZSyT9RRSY8As0sVUN57AwYul
+s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
+vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
+LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
+H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
+NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
+CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
+XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
+KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
+gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
+N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
+M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
+n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
+Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
+mxFo+ioe/ABCufSmyqFye0psX3Sp
+=WtqZ
+-----END PGP PUBLIC KEY BLOCK-----
+```
+</details>

-### Voice / Video Call Improvements
+## Local development
+> [!TIP]
+> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).

- **Element Call 0.19.3**: Upgraded from 0.16.3. Dist copied to `public/element-call/` by vite at build time.
- **Camera default OFF**: Camera no longer persists across sessions via localStorage. Always starts disabled. Optional `cameraOnJoin` setting for explicit opt-in.
- **Deafen button**: Tooltip corrected to "Deafen" / "Undeafen" (was "Turn Off Sound" / "Turn On Sound")
- **Screenshare confirmation**: A confirm dialog appears before screenshare is broadcast to call participants
- **Auto-revert spotlight on screenshare**: When someone starts screensharing, EC normally forces all participants into spotlight view. Patched in `CallControl.ts` `onControlMutation()` — detects the screenshare button going `primary` and clicks `gridButton` after 600ms to revert to grid layout. Participants choose to watch screenshare manually.
- **Push to Talk (PTT)**:
-  - Configurable keybind (default: Space) via Settings > General > Calls
-  - Mic activates on keydown, deactivates on keyup; mic muted on tab blur/focus to prevent stuck-on mic
-  - Visual indicator: plain folds `Chip` by default; when LotusGuild TDS is active: orange `PTT — Hold SPACE` / green `● LIVE` in JetBrains Mono
-  - Listens on both main window and EC iframe `contentWindow` for reliable key capture
-  - Implemented via `CallControl.setMicrophone()` public method on the widget bridge
- **Noise suppression toggle**: Settings > General > Calls — passes `noiseSuppression` URL parameter to the embedded Element Call widget
- **DM calls**: Phone button in DM room header starts a 1-on-1 call via `useCallStart(true)`. `Room.tsx` switches to CallView layout when the DM has an active call embed. Standard voice rooms were already supported; this extends call support to all direct messages.
- **Picture-in-picture (PiP)**: When navigating away from a call room while in an active call, the call embed shrinks to a 280x158px floating window in the bottom-right corner. The PiP window is **draggable** — drag it anywhere on screen to move it out of the way. Clicking (without dragging) navigates back to the call room. Drag vs click distinguished by a 5px movement threshold; touch drag supported. Imperative style overrides on `callEmbedRef.current` via `useEffect` — a wrapper div cannot be used because `useCallEmbedPlacementSync` writes `top/left/width/height` directly onto that element.
+Execute the following commands to start a development server:
+```sh
+npm ci # Installs all dependencies
+npm start # Serve a development version
+```
+
+To build the app:
+```sh
+npm run build # Compiles the app into the dist/ directory
+```
+
+### Running with Docker
+This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
+use this locally, you can build the container like so:
+```
+docker build -t cinny:latest .
+```
+
+You can then run the container you've built with a command similar to this:
+```
+docker run -p 8080:80 cinny:latest
+```
+
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
@@ -1,15 +1,36 @@
 {
-  "defaultHomeserver": 0,
+  "defaultHomeserver": 2,
  "homeserverList": [
-    "matrix.lotusguild.org"
+    "converser.eu",
+    "envs.net",
+    "matrix.org",
+    "monero.social",
+    "mozilla.org",
+    "xmr.se"
  ],
-  "allowCustomHomeservers": false,
+  "allowCustomHomeservers": true,
+
  "featuredCommunities": {
    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
+    "spaces": [
+      "#cinny-space:matrix.org",
+      "#community:matrix.org",
+      "#space:envs.net",
+      "#science-space:matrix.org",
+      "#libregaming-games:tchncs.de",
+      "#mathematics-on:matrix.org"
+    ],
+    "rooms": [
+      "#cinny:matrix.org",
+      "#freesoftware:matrix.org",
+      "#pcapdroid:matrix.org",
+      "#gentoo:matrix.org",
+      "#PrivSec.dev:arcticfoxes.net",
+      "#disroot:aria-net.org"
+    ],
+    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
  },
+
  "hashRouter": {
    "enabled": false,
    "basename": "/"
@@ -4,36 +4,33 @@
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    <title>Lotus Chat</title>
-    <meta name="name" content="Lotus Chat" />
-    <meta name="author" content="Lotus Guild" />
+    <title>Cinny</title>
+    <meta name="name" content="Cinny" />
+    <meta name="author" content="Ajay Bura" />
    <meta
      name="description"
-      content="Lotus Chat — the Lotus Guild Matrix client. Secure, fast, and built for our community."
+      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
    />
    <meta
      name="keywords"
-      content="lotus chat, lotus guild, matrix, matrix client"
+      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
    />

-    <meta property="og:title" content="Lotus Chat" />
-    <meta property="og:url" content="https://chat.lotusguild.org" />
-    <meta property="og:image" content="https://chat.lotusguild.org/public/res/android/android-chrome-192x192.png" />
+    <meta property="og:title" content="Cinny" />
+    <meta property="og:url" content="https://cinny.in" />
+    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
    <meta
      property="og:description"
-      content="Lotus Chat — the Lotus Guild Matrix client. Secure, fast, and built for our community."
+      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
    />
    <meta name="theme-color" content="#000000" />

-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap" rel="stylesheet">
    <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />

    <link rel="manifest" href="/manifest.json" />
    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Lotus Chat" />
-    <meta name="apple-mobile-web-app-title" content="Lotus Chat" />
+    <meta name="application-name" content="Cinny" />
+    <meta name="apple-mobile-web-app-title" content="Cinny" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

@@ -1,12 +1,12 @@
 {
  "name": "cinny",
-  "version": "4.11.1",
+  "version": "4.10.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cinny",
-      "version": "4.11.1",
+      "version": "4.10.0",
      "license": "AGPL-3.0-only",
      "dependencies": {
        "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -32,7 +32,7 @@
        "emojibase-data": "15.3.2",
        "file-saver": "2.0.5",
        "focus-trap-react": "10.0.2",
-        "folds": "2.6.2",
+        "folds": "2.5.0",
        "html-dom-parser": "4.0.0",
        "html-react-parser": "4.2.0",
        "i18next": "23.12.2",
@@ -41,10 +41,9 @@
        "immer": "9.0.16",
        "is-hotkey": "0.2.0",
        "jotai": "2.6.0",
-        "linkify-react": "4.3.2",
-        "linkifyjs": "4.3.2",
+        "linkify-react": "4.1.3",
+        "linkifyjs": "4.1.3",
        "matrix-js-sdk": "38.2.0",
-        "matrix-widget-api": "1.13.0",
        "millify": "6.1.0",
        "pdfjs-dist": "4.2.67",
        "prismjs": "1.30.0",
@@ -57,16 +56,15 @@
        "react-google-recaptcha": "2.1.0",
        "react-i18next": "15.0.0",
        "react-range": "1.8.14",
-        "react-router-dom": "6.30.3",
+        "react-router-dom": "6.20.0",
        "sanitize-html": "2.12.1",
-        "slate": "0.123.0",
-        "slate-dom": "0.123.0",
-        "slate-history": "0.113.1",
-        "slate-react": "0.123.0",
+        "slate": "0.112.0",
+        "slate-dom": "0.112.2",
+        "slate-history": "0.110.3",
+        "slate-react": "0.112.1",
        "ua-parser-js": "1.0.35"
      },
      "devDependencies": {
-        "@element-hq/element-call-embedded": "0.16.3",
        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
        "@rollup/plugin-inject": "5.0.3",
        "@rollup/plugin-wasm": "6.1.1",
@@ -1651,12 +1649,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.16.3.tgz",
-      "integrity": "sha512-OViKJonDaDNVBUW9WdV9mk78/Ruh34C7XsEgt3O8D9z+64C39elbIgllHSoH5S12IRlv9RYrrV37FZLo6QWsDQ==",
-      "dev": true
-    },
    "node_modules/@emotion/hash": {
      "version": "0.9.2",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -3707,10 +3699,9 @@
      }
    },
    "node_modules/@remix-run/router": {
-      "version": "1.23.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
-      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
-      "license": "MIT",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
      "engines": {
        "node": ">=14.0.0"
      }
@@ -7166,9 +7157,9 @@
      }
    },
    "node_modules/folds": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.6.2.tgz",
-      "integrity": "sha512-1HemxxSnBm8/U5kq1pDQrFkpltWgQN90DmWCZWkZb7D2pe8BhOJSwIRLjk9WxHcw6nn69oz2XNYIXtSw0LvX1w==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.5.0.tgz",
+      "integrity": "sha512-UJhvXAQ1XnZ9w10KJwSW+frvzzWE/zcF0dH3fDVCD70RFHAxwEi0UkkVS8CaZGxZF2Wvt3qTJyTS5LW3LwwUAw==",
      "license": "Apache-2.0",
      "peerDependencies": {
        "@vanilla-extract/css": "1.9.2",
@@ -8500,20 +8491,18 @@
      }
    },
    "node_modules/linkify-react": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.3.2.tgz",
-      "integrity": "sha512-mi744h1hf+WDsr+paJgSBBgYNLMWNSHyM9V9LVUo03RidNGdw1VpI7Twnt+K3pEh3nIzB4xiiAgZxpd61ItKpQ==",
-      "license": "MIT",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.3.tgz",
+      "integrity": "sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==",
      "peerDependencies": {
        "linkifyjs": "^4.0.0",
        "react": ">= 15.0.0"
      }
    },
    "node_modules/linkifyjs": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
-      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
-      "license": "MIT"
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
    },
    "node_modules/locate-path": {
      "version": "6.0.0",
@@ -8674,9 +8663,9 @@
      }
    },
    "node_modules/matrix-widget-api": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.0.tgz",
-      "integrity": "sha512-+LrvwkR1izL4h2euX8PDrvG/3PZZDEd6As+lmnR3jAVwbFJtU5iTnwmZGnCca9ddngCvXvAHkcpJBEPyPTZneQ==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.1.tgz",
+      "integrity": "sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==",
      "license": "Apache-2.0",
      "dependencies": {
        "@types/events": "^3.0.0",
@@ -9616,12 +9605,11 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.30.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
-      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
-      "license": "MIT",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
+      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
      "dependencies": {
-        "@remix-run/router": "1.23.2"
+        "@remix-run/router": "1.13.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -9631,13 +9619,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.30.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
-      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
-      "license": "MIT",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
+      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
      "dependencies": {
-        "@remix-run/router": "1.23.2",
-        "react-router": "6.30.3"
+        "@remix-run/router": "1.13.0",
+        "react-router": "6.20.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -10291,15 +10278,20 @@
      }
    },
    "node_modules/slate": {
-      "version": "0.123.0",
-      "resolved": "https://registry.npmjs.org/slate/-/slate-0.123.0.tgz",
-      "integrity": "sha512-Oon3HR/QzJQBjuOUJT1jGGlp8Ff7t3Bkr/rJ2lDqxNT4H+cBnXpEVQ/si6hn1ZCHhD2xY/2N91PQoH/rD7kxTg==",
-      "license": "MIT"
+      "version": "0.112.0",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.112.0.tgz",
+      "integrity": "sha512-PRnfFgDA3tSop4OH47zu4M1R4Uuhm/AmASu29Qp7sGghVFb713kPBKEnSf1op7Lx/nCHkRlCa3ThfHtCBy+5Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "is-plain-object": "^5.0.0",
+        "tiny-warning": "^1.0.3"
+      }
    },
    "node_modules/slate-dom": {
-      "version": "0.123.0",
-      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.123.0.tgz",
-      "integrity": "sha512-OUinp4tvSrAlt64JL9y20Xin08jgnnj1gJmIuPdGvU5MELKXRNZh17a7EKKNOS6OZPAE8Dk9NI1MAIS/Qz0YBw==",
+      "version": "0.112.2",
+      "resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
+      "integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
      "license": "MIT",
      "dependencies": {
        "@juggle/resize-observer": "^3.4.0",
@@ -10311,13 +10303,13 @@
        "tiny-invariant": "1.3.1"
      },
      "peerDependencies": {
-        "slate": ">=0.121.0"
+        "slate": ">=0.99.0"
      }
    },
    "node_modules/slate-history": {
-      "version": "0.113.1",
-      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.113.1.tgz",
-      "integrity": "sha512-J9NSJ+UG2GxoW0lw5mloaKcN0JI0x2IA5M5FxyGiInpn+QEutxT1WK7S/JneZCMFJBoHs1uu7S7e6pxQjubHmQ==",
+      "version": "0.110.3",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
+      "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
      "license": "MIT",
      "dependencies": {
        "is-plain-object": "^5.0.0"
@@ -10327,14 +10319,15 @@
      }
    },
    "node_modules/slate-react": {
-      "version": "0.123.0",
-      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.123.0.tgz",
-      "integrity": "sha512-nQwXL1FEacrY9ZFmatRhoBnsySNUX2x6qB77V3oNHd7wWxBJWuzz4GMrBXcVoRE8Gac7Angf8xaNGzb6zcPlHg==",
+      "version": "0.112.1",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
+      "integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
      "license": "MIT",
      "dependencies": {
        "@juggle/resize-observer": "^3.4.0",
        "direction": "^1.0.4",
        "is-hotkey": "^0.2.0",
+        "is-plain-object": "^5.0.0",
        "lodash": "^4.17.21",
        "scroll-into-view-if-needed": "^3.1.0",
        "tiny-invariant": "1.3.1"
@@ -10342,8 +10335,18 @@
      "peerDependencies": {
        "react": ">=18.2.0",
        "react-dom": ">=18.2.0",
-        "slate": ">=0.121.0",
-        "slate-dom": ">=0.119.1"
+        "slate": ">=0.99.0",
+        "slate-dom": ">=0.110.2"
+      }
+    },
+    "node_modules/slate/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
      }
    },
    "node_modules/smob": {
@@ -10713,6 +10716,11 @@
      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
      "license": "MIT"
    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.10",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
@@ -10896,7 +10904,6 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
      "dev": true,
-      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -1,7 +1,7 @@
 {
-  "name": "lotus-chat",
-  "version": "4.11.1",
-  "description": "Lotus Chat \u2014 Matrix client for Lotus Guild",
+  "name": "cinny",
+  "version": "4.10.0",
+  "description": "Yet another matrix client",
  "main": "index.js",
  "type": "module",
  "engines": {
@@ -10,7 +10,6 @@
  "scripts": {
    "start": "vite",
    "build": "vite build",
-    "preview": "vite preview",
    "lint": "yarn check:eslint && yarn check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
@@ -44,7 +43,7 @@
    "emojibase-data": "15.3.2",
    "file-saver": "2.0.5",
    "focus-trap-react": "10.0.2",
-    "folds": "2.6.2",
+    "folds": "2.5.0",
    "html-dom-parser": "4.0.0",
    "html-react-parser": "4.2.0",
    "i18next": "23.12.2",
@@ -53,10 +52,9 @@
    "immer": "9.0.16",
    "is-hotkey": "0.2.0",
    "jotai": "2.6.0",
-    "linkify-react": "4.3.2",
-    "linkifyjs": "4.3.2",
+    "linkify-react": "4.1.3",
+    "linkifyjs": "4.1.3",
    "matrix-js-sdk": "38.2.0",
-    "matrix-widget-api": "1.13.0",
    "millify": "6.1.0",
    "pdfjs-dist": "4.2.67",
    "prismjs": "1.30.0",
@@ -69,16 +67,15 @@
    "react-google-recaptcha": "2.1.0",
    "react-i18next": "15.0.0",
    "react-range": "1.8.14",
-    "react-router-dom": "6.30.3",
+    "react-router-dom": "6.20.0",
    "sanitize-html": "2.12.1",
-    "slate": "0.123.0",
-    "slate-dom": "0.123.0",
-    "slate-history": "0.113.1",
-    "slate-react": "0.123.0",
+    "slate": "0.112.0",
+    "slate-dom": "0.112.2",
+    "slate-history": "0.110.3",
+    "slate-react": "0.112.1",
    "ua-parser-js": "1.0.35"
  },
  "devDependencies": {
-    "@element-hq/element-call-embedded": "0.16.3",
    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
    "@rollup/plugin-inject": "5.0.3",
    "@rollup/plugin-wasm": "6.1.1",
@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}
@@ -1,14 +1,14 @@
 {
-  "name": "Lotus Chat",
-  "short_name": "Lotus Chat",
-  "description": "Lotus Chat \u2014 the Lotus Guild Matrix client",
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "Yet another matrix client",
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "./",
-  "background_color": "#0a0a0a",
-  "theme_color": "#980000",
+  "background_color": "#fff",
+  "theme_color": "#fff",
  "icons": [
    {
      "src": "./public/android/android-chrome-36x36.png",
@@ -55,24 +55,5 @@
      "sizes": "512x512",
      "type": "image/png"
    }
-  ],
-  "categories": [
-    "social",
-    "communication",
-    "productivity"
-  ],
-  "shortcuts": [
-    {
-      "name": "New Message",
-      "short_name": "DM",
-      "description": "Open a new direct message",
-      "url": "/",
-      "icons": [
-        {
-          "src": "res/android/android-chrome-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    }
  ]
 }
@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_1961)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#45B83B"/>
 </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
-  <circle cx="14.5" cy="14.5" r="3" fill="#45B83B"/>
+<defs>
+<clipPath id="clip0_2707_1961">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
 </svg>
@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_2015)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#989898"/>
 </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
-  <circle cx="14.5" cy="14.5" r="3" fill="#989898"/>
+<defs>
+<clipPath id="clip0_2707_2015">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
 </svg>
@@ -1,13 +1,19 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
+	</g>
+	<g>
+		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
+			c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
+			C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
+			C4.2,16.1,1.9,13.8,1.2,10.8z"/>
+		<circle cx="9.5" cy="6.4" r="0.5"/>
+	</g>
 </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
 </svg>
@@ -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,374 +0,0 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { config } from 'folds';
-import {
-  CallEmbedContextProvider,
-  CallEmbedRefContextProvider,
-  useCallHangupEvent,
-  useCallJoined,
-  useCallThemeSync,
-  useCallMemberSoundSync,
-} from '../hooks/useCallEmbed';
-import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
-import { CallEmbed } from '../plugins/call';
-import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
-import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
-import { useRoomNavigate } from '../hooks/useRoomNavigate';
-
-const PIP_MIN_W = 200;
-const PIP_MIN_H = 112; // keeps roughly 16:9 at minimum
-
-function CallUtils({ embed }: { embed: CallEmbed }) {
-  const setCallEmbed = useSetAtom(callEmbedAtom);
-
-  useCallMemberSoundSync(embed);
-  useCallThemeSync(embed);
-  useCallHangupEvent(
-    embed,
-    useCallback(() => {
-      setCallEmbed(undefined);
-    }, [setCallEmbed])
-  );
-
-  return null;
-}
-
-type Corner = 'se' | 'sw' | 'ne' | 'nw';
-
-/** Normalise the element to top/left positioning so resize math is uniform. */
-function normaliseToTopLeft(el: HTMLDivElement) {
-  const rect = el.getBoundingClientRect();
-  el.style.top = `${rect.top}px`;
-  el.style.left = `${rect.left}px`;
-  el.style.right = 'auto';
-  el.style.bottom = 'auto';
-  el.style.width = `${rect.width}px`;
-  el.style.height = `${rect.height}px`;
-}
-
-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 { navigateRoom } = useRoomNavigate();
-
-  const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
-  const inCallRoom = callEmbed && selectedRoom === callEmbed.roomId;
-  const callActive = callEmbed && joined;
-  const callVisible = inCallRoom && callActive && !chatOnlyView;
-  const pipMode = callActive && !inCallRoom;
-
-  const pipDragRef = useRef<{
-    startX: number;
-    startY: number;
-    origLeft: number;
-    origTop: number;
-    dragged: boolean;
-  } | null>(null);
-
-  // useCallEmbedPlacementSync writes top/left/width/height directly on this element.
-  // Override those in PiP mode; clear them when returning so it can take back control.
-  useEffect(() => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    if (pipMode) {
-      el.style.top = 'auto';
-      el.style.left = 'auto';
-      el.style.bottom = '72px';
-      el.style.right = '16px';
-      el.style.width = '280px';
-      el.style.height = '158px';
-      el.style.borderRadius = '12px';
-      el.style.overflow = 'hidden';
-      el.style.zIndex = '99';
-      el.style.boxShadow = '0 8px 32px rgba(0,0,0,0.55)';
-      el.style.border = '1px solid rgba(255,255,255,0.1)';
-      el.style.visibility = 'visible';
-    } else {
-      el.style.top = '';
-      el.style.left = '';
-      el.style.bottom = '';
-      el.style.right = '';
-      el.style.width = '';
-      el.style.height = '';
-      el.style.borderRadius = '';
-      el.style.overflow = '';
-      el.style.zIndex = '';
-      el.style.boxShadow = '';
-      el.style.border = '';
-      el.style.visibility = callVisible ? '' : 'hidden';
-    }
-  }, [pipMode, callVisible]);
-
-  // ── Drag to move ────────────────────────────────────────────────────────────
-  const handlePipMouseDown = (e: React.MouseEvent) => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    pipDragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      dragged: false,
-    };
-
-    const onMouseMove = (ev: MouseEvent) => {
-      if (!pipDragRef.current || !el) return;
-      const dx = ev.clientX - pipDragRef.current.startX;
-      const dy = ev.clientY - pipDragRef.current.startY;
-      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5) {
-        pipDragRef.current.dragged = true;
-        document.body.style.cursor = 'grabbing';
-        document.body.style.userSelect = 'none';
-      }
-      if (pipDragRef.current.dragged) {
-        const newLeft = Math.max(0, Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx));
-        const newTop = Math.max(0, Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy));
-        el.style.left = `${newLeft}px`;
-        el.style.top = `${newTop}px`;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-      }
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      setTimeout(() => {
-        if (pipDragRef.current) pipDragRef.current.dragged = false;
-      }, 0);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  };
-
-  const handlePipTouchStart = (e: React.TouchEvent) => {
-    const el = callEmbedRef.current;
-    if (!el || e.touches.length !== 1) return;
-    const touch = e.touches[0];
-    const rect = el.getBoundingClientRect();
-    pipDragRef.current = {
-      startX: touch.clientX,
-      startY: touch.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      dragged: false,
-    };
-
-    const onTouchMove = (ev: TouchEvent) => {
-      if (!pipDragRef.current || !el || ev.touches.length !== 1) return;
-      ev.preventDefault();
-      const t = ev.touches[0];
-      const dx = t.clientX - pipDragRef.current.startX;
-      const dy = t.clientY - pipDragRef.current.startY;
-      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5) {
-        pipDragRef.current.dragged = true;
-      }
-      if (pipDragRef.current.dragged) {
-        const newLeft = Math.max(0, Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx));
-        const newTop = Math.max(0, Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy));
-        el.style.left = `${newLeft}px`;
-        el.style.top = `${newTop}px`;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-      }
-    };
-
-    const onTouchEnd = () => {
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-      setTimeout(() => {
-        if (pipDragRef.current) pipDragRef.current.dragged = false;
-      }, 0);
-    };
-
-    document.addEventListener('touchmove', onTouchMove, { passive: false });
-    document.addEventListener('touchend', onTouchEnd);
-  };
-
-  const handlePipClick = (roomId: string) => {
-    if (pipDragRef.current?.dragged) return;
-    navigateRoom(roomId);
-  };
-
-  // ── Resize from corner handles ───────────────────────────────────────────────
-  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const el = callEmbedRef.current;
-    if (!el) return;
-
-    normaliseToTopLeft(el);
-
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const startW = el.offsetWidth;
-    const startH = el.offsetHeight;
-    const startL = parseFloat(el.style.left);
-    const startT = parseFloat(el.style.top);
-
-    document.body.style.cursor = `${corner}-resize`;
-    document.body.style.userSelect = 'none';
-
-    const onMouseMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - startX;
-      const dy = ev.clientY - startY;
-
-      let w = startW;
-      let h = startH;
-      let l = startL;
-      let t = startT;
-
-      if (corner === 'se') { w = startW + dx; h = startH + dy; }
-      if (corner === 'sw') { w = startW - dx; h = startH + dy; l = startL + startW - Math.max(PIP_MIN_W, w); }
-      if (corner === 'ne') { w = startW + dx; h = startH - dy; t = startT + startH - Math.max(PIP_MIN_H, h); }
-      if (corner === 'nw') { w = startW - dx; h = startH - dy; l = startL + startW - Math.max(PIP_MIN_W, w); t = startT + startH - Math.max(PIP_MIN_H, h); }
-
-      w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
-      h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
-      l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
-      t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
-
-      el.style.width = `${w}px`;
-      el.style.height = `${h}px`;
-      el.style.left = `${l}px`;
-      el.style.top = `${t}px`;
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  };
-
-  // Corner handle style helper
-  const cornerHandle = (corner: Corner): React.CSSProperties => {
-    const s = corner.includes('s');
-    const e = corner.includes('e');
-    return {
-      position: 'absolute',
-      width: '18px',
-      height: '18px',
-      [s ? 'bottom' : 'top']: 0,
-      [e ? 'right' : 'left']: 0,
-      cursor: `${corner}-resize`,
-      zIndex: 2,
-    };
-  };
-
-  // Grip dot pattern rendered inside each handle
-  const gripDots = (corner: Corner) => {
-    const s = corner.includes('s');
-    const e = corner.includes('e');
-    // 3 dots arranged in an L toward the active corner
-    const dots: React.CSSProperties[] = [];
-    const r = 2; // dot radius px
-    const gap = 5;
-    const base = 3;
-    for (let i = 0; i < 3; i++) {
-      for (let j = 0; j < 3; j++) {
-        if (i + j < 2) continue; // only the 3 corner-most dots
-        dots.push({
-          position: 'absolute',
-          width: r * 2,
-          height: r * 2,
-          borderRadius: '50%',
-          background: 'rgba(255,255,255,0.45)',
-          [s ? 'bottom' : 'top']: base + i * gap,
-          [e ? 'right' : 'left']: base + j * gap,
-        });
-      }
-    }
-    return dots;
-  };
-
-  return (
-    <CallEmbedContextProvider value={callEmbed}>
-      {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
-      <div
-        data-call-embed-container
-        ref={callEmbedRef}
-        style={{
-          visibility: callVisible ? undefined : 'hidden',
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '50%',
-        }}
-      >
-        {pipMode && callEmbed && (
-          <>
-            {/* Drag-to-move overlay (zIndex 1, sits over the iframe) */}
-            <div
-              role="button"
-              tabIndex={0}
-              aria-label="Return to call"
-              onMouseDown={handlePipMouseDown}
-              onTouchStart={handlePipTouchStart}
-              onClick={() => handlePipClick(callEmbed.roomId)}
-              onKeyDown={(e) => e.key === 'Enter' && handlePipClick(callEmbed.roomId)}
-              style={{
-                position: 'absolute',
-                inset: 0,
-                zIndex: 1,
-                background: 'transparent',
-                cursor: 'grab',
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                padding: '6px',
-              }}
-            >
-              <div
-                style={{
-                  background: 'rgba(0,0,0,0.65)',
-                  backdropFilter: 'blur(4px)',
-                  borderRadius: '6px',
-                  padding: '3px 8px',
-                  color: '#fff',
-                  fontSize: '11px',
-                  fontWeight: 600,
-                  pointerEvents: 'none',
-                }}
-              >
-                ↗ Return to call
-              </div>
-            </div>
-
-            {/* Corner resize handles (zIndex 2, above the drag overlay) */}
-            {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => (
-              <div
-                key={corner}
-                style={cornerHandle(corner)}
-                onMouseDown={(e) => handleResizeMouseDown(e, corner)}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {gripDots(corner).map((style, i) => (
-                  <div key={i} style={style} />
-                ))}
-              </div>
-            ))}
-          </>
-        )}
-      </div>
-    </CallEmbedContextProvider>
-  );
-}
@@ -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>
              }
@@ -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',
@@ -21,7 +21,7 @@ export function SplashScreen({ children }: SplashScreenProps) {
        justifyContent="Center"
      >
        <Text size="H2" align="Center">
-          Lotus Chat
+          Cinny
        </Text>
      </Box>
    </Box>
@@ -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>
@@ -30,15 +30,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
    if (previewStatus.status === AsyncStatus.Error) return null;

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

      return (
        <>
@@ -50,7 +42,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
              as="a"
              href={url}
              target="_blank"
-              rel="noreferrer"
+              rel="no-referrer"
              size="T200"
              priority="300"
            >
@@ -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,225 +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,337 +0,0 @@
-import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react';
-import {
-  Box,
-  Button,
-  Chip,
-  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 { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
-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 [shareConfirm, setShareConfirm] = useState(false);
-  const [pttMode] = useSetting(settingsAtom, 'pttMode');
-  const [pttKey] = useSetting(settingsAtom, 'pttKey');
-  const [pttActive, setPttActive] = useState(false);
-
-  // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
-  const microphoneRef = useRef(microphone);
-  useEffect(() => { microphoneRef.current = microphone; }, [microphone]);
-
-  // Handle PTT mode toggle mid-call
-  const pttModeRef = useRef(pttMode);
-  useEffect(() => {
-    if (pttMode && !pttModeRef.current) {
-      callEmbed.control.setMicrophone(false);
-    } else if (!pttMode && pttModeRef.current) {
-      callEmbed.control.setMicrophone(true);
-    }
-    pttModeRef.current = pttMode;
-  }, [pttMode, callEmbed]);
-
-  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);
-  };
-
-  useEffect(() => {
-    if (!pttMode) return;
-    const iframeWindow = callEmbed.iframe.contentWindow;
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.code !== pttKey || e.repeat) return;
-      // Don't intercept keys typed into a text input or editable element
-      const target = e.target as HTMLElement;
-      if (
-        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' ||
-        target.contentEditable === 'true'
-      ) return;
-      e.preventDefault();
-      if (!microphoneRef.current) callEmbed.control.setMicrophone(true);
-      setPttActive(true);
-    };
-    const onKeyUp = (e: KeyboardEvent) => {
-      if (e.code !== pttKey) return;
-      callEmbed.control.setMicrophone(false);
-      setPttActive(false);
-    };
-    // Release PTT when the tab loses focus to prevent stuck-on mic
-    const onBlur = () => {
-      callEmbed.control.setMicrophone(false);
-      setPttActive(false);
-    };
-    // Re-mute on focus restore: EC can re-assert audio_enabled:true on audio-context resume
-    const onFocus = () => {
-      callEmbed.control.setMicrophone(false);
-      setPttActive(false);
-    };
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('keyup', onKeyUp);
-    window.addEventListener('blur', onBlur);
-    window.addEventListener('focus', onFocus);
-    iframeWindow?.addEventListener('keydown', onKeyDown);
-    iframeWindow?.addEventListener('keyup', onKeyUp);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('keyup', onKeyUp);
-      window.removeEventListener('blur', onBlur);
-      window.removeEventListener('focus', onFocus);
-      iframeWindow?.removeEventListener('keydown', onKeyDown);
-      iframeWindow?.removeEventListener('keyup', onKeyUp);
-    };
-  // microphone intentionally read via microphoneRef — excluded from deps to avoid listener churn
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pttMode, pttKey, callEmbed]);
-
-  const [hangupState, hangup] = useAsyncCallback(
-    useCallback(() => callEmbed.hangup(), [callEmbed])
-  );
-  const exiting =
-    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;
-
-  const pttKeyLabel = pttKey === 'Space' ? 'SPACE' : pttKey.replace('Key', '').replace('Digit', '');
-
-  return (
-    <Box
-      ref={controlRef}
-      className={css.CallControlContainer}
-      justifyContent="Center"
-      alignItems="Center"
-    >
-      {pttMode && (
-        <Chip
-          variant={pttActive ? 'Success' : 'Warning'}
-          fill="Soft"
-          radii="400"
-          style={{
-            position: 'absolute',
-            top: '-2.2rem',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            pointerEvents: 'none',
-            whiteSpace: 'nowrap',
-          }}
-          outlined
-        >
-          <Text size="T200" style={{ fontWeight: 700 }}>
-            {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
-          </Text>
-        </Chip>
-      )}
-      {shareConfirm && (
-        <Box
-          style={{
-            position: 'absolute',
-            bottom: '110%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: 'var(--bg-surface)',
-            border: '1px solid var(--border-color)',
-            borderRadius: '0.75rem',
-            padding: '1rem 1.25rem',
-            zIndex: 100,
-            minWidth: '260px',
-            boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0.75rem',
-          }}
-        >
-          <Text size="T300" style={{ fontWeight: 600 }}>Share your screen?</Text>
-          <Text size="T200" style={{ opacity: 0.75 }}>Your screen will be visible to all participants in this call.</Text>
-          <Box gap="200">
-            <Button
-              size="300" variant="Success" fill="Solid" radii="300"
-              onClick={() => { callEmbed.control.toggleScreenshare(); setShareConfirm(false); }}
-            >
-              <Text size="B300">Share</Text>
-            </Button>
-            <Button
-              size="300" variant="Surface" fill="Soft" radii="300" outlined
-              onClick={() => setShareConfirm(false)}
-            >
-              <Text size="B300">Cancel</Text>
-            </Button>
-          </Box>
-        </Box>
-      )}
-      <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={() => screenshare
-                ? callEmbed.control.toggleScreenshare()
-                : setShareConfirm(true)
-              }
-            />
-          </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 ? 'Deafen' : 'Undeafen'}</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,97 +0,0 @@
-import React, { useEffect, useState } 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 MediaPermState = 'granted' | 'denied' | 'prompt' | 'unknown';
-
-function useMediaPermissions(): MediaPermState {
-  const [state, setState] = useState<MediaPermState>('unknown');
-
-  useEffect(() => {
-    if (!navigator.permissions) {
-      setState('unknown');
-      return;
-    }
-    navigator.permissions
-      .query({ name: 'microphone' as PermissionName })
-      .then((result) => {
-        setState(result.state as MediaPermState);
-        result.onchange = () => setState(result.state as MediaPermState);
-      })
-      .catch(() => setState('unknown'));
-  }, []);
-
-  return state;
-}
-
-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 micPermission = useMediaPermissions();
-  const micDenied = micPermission === 'denied';
-
-  const disabled = inOtherCall || !canJoin || micDenied;
-
-  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" gap="200">
-        {micDenied && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-high, #e53e3e)', textAlign: 'center' }}>
-            Microphone access is blocked. Enable it in your browser settings to join.
-          </Text>
-        )}
-        <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,29 +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,
-  position: 'relative',
-});
-
-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 }}
--- 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