fix success and critical color hover+active color

.cinny-config.json

@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}

.cinny-config.json.bak

@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}

.github/DISCUSSION_TEMPLATE/issue-triage.yml

@@ -1,127 +0,0 @@
-labels: ["needs-confirmation"]
-body:
-  - type: markdown #add faqs in future
-    attributes:
-      value: |
-        > [!IMPORTANT]
-        > Please read through [the Discussion rules](https://github.com/cinnyapp/cinny/discussions/2653) and check for both existing [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc) prior to opening a new Discussion.
-  - type: markdown
-    attributes:
-      value: "# Issue Details"
-  - type: textarea
-    attributes:
-      label: Issue Description
-      description: |
-        Provide a detailed description of the issue.  Include relevant information, such as:
-        - The feature or configuration option you encounter the issue with.
-        - Screenshots, screen recordings, or other supporting media (as needed).
-        - If this is a regression of an existing issue that was closed or resolved, please include the previous item reference (Discussion, Issue, PR, commit) in your description.
-      placeholder: |
-        When I try to send a message in a room, the message doesn't appear in the timeline.
-        OR
-        The application crashes when I click on the settings button.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Expected Behavior
-      description: |
-        Describe how you expect Cinny to behave in this situation.
-      placeholder: |
-        I expected the message to appear in the room timeline immediately after sending.
-        OR
-        The settings panel should open smoothly without any crashes.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Actual Behavior
-      description: |
-        Describe how Cinny actually behaves in this situation.  If it is not immediately obvious how the actual behavior differs from the expected behavior described above, please be sure to mention the deviation specifically.
-      placeholder: |
-        The application freezes for 3 seconds and then shows a white screen.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Reproduction Steps
-      description: |
-        Provide a detailed set of step-by-step instructions for reproducing this issue.
-      placeholder: |
-        1. Open Cinny and log in to my account
-        2. Navigate to the #general room
-        3. Type a message in the message box
-        4. Press Enter to send
-        5. Notice that the message doesn't appear in the timeline
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Environement
-      description: |
-        Please provide information about your environment. Include the following:
-        - OS:
-        - Browser: 
-        - Cinny Web Version: (app.cinny.in or self hosted)
-        - Cinny desktop Version: (appimage or deb or flatpak)
-        - Matrix Homeserver: 
-      placeholder: |
-        - OS: Windows 11
-        - Browser: Chrome 120.0.6099.109
-        - Cinny Web Version: 3.2.0 (app.cinny.in or self hosted)
-        - Cinny desktop Version: 3.2.0 (appimage or deb or flatpak)
-        - Matrix Homeserver: matrix.org (Synapse 1.97.0)
-      render: text
-    validations:
-      required: true
-  - type: textarea
-    id: logs
-    attributes:
-      label: Relevant Logs
-      description: |
-        If applicable, add browser console logs to help explain your problem.
-        
-        **To get browser console logs:**
-        - Chrome/Edge: Press F12 → Console tab
-        - Firefox: Press F12 → Console tab  
-        - Safari: Develop → Show Web Inspector → Console
-        
-        Please wrap large log outputs in code blocks with triple backticks (```).
-      placeholder: |
-        ```
-        Error: Failed to send message
-            at MessageComposer.sendMessage (composer.js:245)
-            at HTMLButtonElement.onClick (composer.js:189)
-        TypeError: Cannot read property 'content' of undefined
-            at RoomTimeline.render (timeline.js:567)
-        ```
-      render: shell
-    validations:
-      required: false
-  - type: textarea 
-    attributes:
-      label: Additional context
-      description: |
-        Add any other context about the problem here (e.g., when did this start happening, does it happen on different homeservers, etc.)
-      placeholder: |
-        - This started happening after I updated to version 3.2.0
-        - It only happens in encrypted rooms, not in public rooms
-        - I've tried on both Firefox and Chrome with the same result
-        - It works fine on my phone using the same account
-        - This happens on all homeservers I've tested (matrix.org, mozilla.org)
-    validations:
-      required: false
-  - type: markdown
-    attributes:
-      value: |
-        # User Acknowledgements
-        > [!TIP]
-        > Use these links to review the existing Cinny [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc).
-  - type: checkboxes #add faqs in future
-    attributes:
-      label: "I acknowledge that:"
-      options:
-        - label: I have searched the Cinny repository (both open and closed Discussions and Issues) and confirm this is not a duplicate of an existing issue or discussion.
-          required: true
-        - label: I have checked the "Preview" tab on all text fields to ensure that everything looks right, and have wrapped all configuration and code in code blocks with a group of three backticks (` ``` `) on separate lines.
-          required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,57 @@
+name: 🐞 Bug Report
+description: Report a bug
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## First of all
+        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
+        2. Make sure Cinny is up to date.
+        3. Make sure it's an issue with Cinny and not something else you are using.
+        4. Remember to be friendly.
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: A clear description of what the bug is. Include screenshots if applicable.
+      placeholder: Bug description
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to ...
+        2. Click on ...
+        3. See error
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear description of what you expected to happen.
+
+  - type: textarea
+    id: info
+    attributes:
+      label: Platform and versions
+      description: "Provide OS, browser and Cinny version with your Homeserver."
+      placeholder: |
+       1. OS: [e.g. Windows 10, MacOS]
+       2. Browser: [e.g. chrome 99.5, firefox 97.2]
+       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
+       4. Matrix homeserver: [e.g. matrix.org]
+      render: shell
+    validations:
+      required: true
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,4 @@
-blank_issues_enabled: false
 contact_links:
-  - name: Features, Bug Reports, Questions
+  - name: 💬 Matrix Chat
-    url: https://github.com/cinnyapp/cinny/discussions/new/choose
+    url: https://matrix.to/#/#cinny:matrix.org
-    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
+    about: Ask questions and talk to other Cinny users and the maintainers

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,33 @@
+name: 💡 Feature Request
+description: Suggest an idea
+
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: Describe the problem
+      description: A clear description of the problem this feature would solve
+      placeholder: "I'm always frustrated when..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: "Describe the solution you'd like"
+      description: A clear description of what change you would like
+      placeholder: "I would like to..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+      description: "Any alternative solutions you've considered"
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/preapproved.md

@@ -1,9 +0,0 @@
----
-name: Pre-Discussed and Approved Topics
-about: |-
-  Only for topics already discussed and approved in the GitHub Discussions section.
----
-
-**DO NOT OPEN A NEW ISSUE. PLEASE USE THE DISCUSSIONS SECTION.**
-
-**I DIDN'T READ THE ABOVE LINE. PLEASE CLOSE THIS ISSUE.**

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,22 @@
+<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
+
+### Description
+<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
+
+
+Fixes #
+
+#### Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+### Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings

.github/SECURITY.md

@@ -0,0 +1,3 @@
+# Reporting a Vulnerability
+
+**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**

.github/renovate.json

@@ -3,20 +3,12 @@
   "extends": [
     "config:recommended",
     ":dependencyDashboardApproval",
-    ":semanticCommits",
+    ":semanticCommits"
-    "group:monorepos"
   ],
   "labels": ["Dependencies"],
-  "rebaseWhen": "conflicted",
   "packageRules": [
     {
       "matchUpdateTypes": ["lockFileMaintenance"]
-    },
-    {
-      "matchPackageNames": ["slate", "slate-dom", "slate-history", "slate-react"]
-    },
-    {
-      "matchPackageNames": ["linkifyjs", "linkify-react"]
     }
   ],
   "lockFileMaintenance": {

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

@@ -14,7 +14,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false
@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: pr
           path: ./pr.txt

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

@@ -16,22 +16,16 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
           name: pr
-      - name: Validate and output pr number
+      - name: Output pr number
         id: pr
-        run: |
+        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
-          PR_ID=$(<pr.txt)
-          if ! [[ "${PR_ID}" =~ ^[0-9]+$ ]]; then
-            echo "::error::pr.txt contains non-numeric content: ${PR_ID}"
-            exit 1
-          fi
-          echo "id=${PR_ID}" >> "${GITHUB_OUTPUT}"
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
+        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -48,7 +42,7 @@ jobs:
           enable-pull-request-comment: false
           enable-commit-comment: false
         env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN_PR }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
         timeout-minutes: 1
       - name: Comment preview on PR

.github/workflows/docker-pr.yml

@@ -26,7 +26,7 @@ jobs:
 
       - name: Login to Docker Hub #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
@@ -34,7 +34,7 @@ jobs:
 
       - name: Login to the Github Container registry #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -50,7 +50,7 @@ jobs:
             ghcr.io/${{ github.repository }}
 
       - name: Build Docker image (no push)
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
         with:
           context: .
           platforms: linux/amd64

.github/workflows/netlify-dev.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false

.github/workflows/prod-deploy.yml

@@ -1,39 +1,23 @@
 name: Production deploy
 
 on:
-  workflow_dispatch:
+  release:
+    types: [published]
 
 jobs:
   deploy-and-tarball:
     name: Netlify deploy and tarball
-    outputs:
-      version: ${{ steps.vars.outputs.tag }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
       - name: Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false
       - name: Install dependencies
         run: npm ci
-      - name: Run semantic release
-        run: npm run semantic-release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          GIT_AUTHOR_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
-          GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
-          GIT_COMMITTER_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
-          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
-      - name: Get version from tag
-        id: vars
-        run: |
-          TAG=$(git describe --tags --abbrev=0) 
-          echo "tag=$TAG" >> $GITHUB_OUTPUT
       - name: Build app
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
@@ -42,7 +26,7 @@ jobs:
         uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
-          deploy-message: 'Prod deploy ${{ steps.vars.outputs.tag }}'
+          deploy-message: 'Prod deploy ${{ github.ref_name }}'
           enable-commit-comment: false
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
@@ -52,6 +36,9 @@ jobs:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
         timeout-minutes: 1
+      - name: Get version from tag
+        id: vars
+        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
       - name: Create tar.gz
         run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
       - name: Sign tar.gz
@@ -65,18 +52,14 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
-          tag_name: ${{ steps.vars.outputs.tag }}
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
   publish-image:
     name: Push Docker image to Docker Hub, GHCR
-    needs: deploy-and-tarball
-    env:
-      VERSION: ${{ needs.deploy-and-tarball.outputs.version }}
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -84,19 +67,17 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          fetch-depth: 0
       - 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
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -108,11 +89,8 @@ jobs:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
-          tags: |
-            type=raw,value=${{ env.VERSION }}
-            type=raw,value=latest
       - name: Build and push Docker image
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.husky/pre-commit

@@ -1,3 +0,0 @@
-# These are commented until we enable lint and typecheck
-# npx tsc -p tsconfig.json --noEmit
-# npx lint-staged

CONTRIBUTING.md

@@ -18,7 +18,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests
 
 > ### Legal Notice
-> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. You will also be asked to [sign the CLA](https://github.com/cinnyapp/cla) upon submiting your pull request.
+> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
 
 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
 

Dockerfile

@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.29.8-alpine
+FROM nginx:1.29.5-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -1,65 +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"
+* The default homeservers and explore pages are defined in [`config.json`](config.json).
-- 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
 
-### 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`):
+<details><summary><b>PGP Public Key to verify tarball</b></summary>
-- 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
 
-**Light mode** (`LotusTerminalLightTheme`):
+```
-- Full light palette: bg `#edf0f5`, orange `#c44e00`, cyan `#0062b8`, green `#006d35`, text `#111827`
+-----BEGIN PGP PUBLIC KEY BLOCK-----
-- 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
 
-**Chat Backgrounds** (18+ custom patterns, all TDS-aware):
+mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
-- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
+6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
-- Chevron, polka dots, triangles, plaid
+FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
-- All patterns use CSS custom properties — adapt to both TDS dark and light themes
+K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
-- Settings toggle for showing per-message sender profiles
+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 Krypton LTS (v24.13.1).
 
-- **Element Call 0.19.3**: Upgraded from 0.16.3. Dist copied to `public/element-call/` by vite at build time.
+Execute the following commands to start a development server:
-- **Camera default OFF**: Camera no longer persists across sessions via localStorage. Always starts disabled. Optional `cameraOnJoin` setting for explicit opt-in.
+```sh
-- **Deafen button**: Tooltip corrected to "Deafen" / "Undeafen" (was "Turn Off Sound" / "Turn On Sound")
+npm ci # Installs all dependencies
-- **Screenshare confirmation**: A confirm dialog appears before screenshare is broadcast to call participants
+npm start # Serve a development version
-- **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
+To build the app:
-  - Mic activates on keydown, deactivates on keyup; mic muted on tab blur/focus to prevent stuck-on mic
+```sh
-  - Visual indicator: plain folds `Chip` by default; when LotusGuild TDS is active: orange `PTT — Hold SPACE` / green `● LIVE` in JetBrains Mono
+npm run build # Compiles the app into the dist/ directory
-  - 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
+### Running with Docker
-- **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.
+This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
-- **Poll display**: `m.poll.start` events (both stable Matrix 1.7 `m.poll` content key and MSC3381 unstable `org.matrix.msc3381.poll.start`) render as read-only poll cards inside the standard message bubble — question and answer options shown. Registered as top-level event renderers AND inside the `EncryptedContent` callback so encrypted polls also display after decryption. "Open in Element to vote" note displayed. Implemented in `PollContent.tsx`.
+use this locally, you can build the container like so:
-- **Deleted message placeholder**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events no longer disappear from the timeline. Instead they reach the existing `RedactedContent` component (trash icon + italic "This message has been deleted" with reason if provided), matching Element, FluffyChat, Commet, and Nheko behaviour. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
+```
-- **Incoming DM call notification**: When another user starts a call in a DM room, a fixed-position notification appears with the caller's avatar and display name, Answer and Decline buttons, and a Web Audio API double-pulse ring tone. The notification auto-dismisses after 30 seconds or when the caller leaves. Fully themed for both LotusGuild Terminal TDS (dark navy `#060c14` background, orange border, neon-green Answer button, JetBrains Mono font, pulsing indicator dot) and standard Cinny dark/light mode (CSS variable theming, folds `Button` with `variant="Success"/"Critical"`). Implemented in `useIncomingDmCall` hook (watches `MatrixRTCSessionManagerEvents.SessionStarted`, filters encrypted ≤2-member rooms, ignores self) and `IncomingCallNotification` component mounted inside `CallEmbedProvider` in `Router.tsx`.
+docker build -t cinny:latest .
-- **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.
+```
+
+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`.

config.json

@@ -1,18 +1,31 @@
 {
-  "defaultHomeserver": 0,
+  "defaultHomeserver": 1,
-  "homeserverList": [
+  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
-    "matrix.lotusguild.org"
+  "allowCustomHomeservers": true,
-  ],
+
-  "allowCustomHomeservers": false,
   "featuredCommunities": {
     "openAsDefault": false,
-    "spaces": [],
+    "spaces": [
-    "rooms": [],
+      "#cinny-space:matrix.org",
-    "servers": []
+      "#community:matrix.org",
+      "#space:unredacted.org",
+      "#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": ["matrix.org", "mozilla.org", "unredacted.org"]
   },
+
   "hashRouter": {
     "enabled": false,
     "basename": "/"
-  },
+  }
-  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
 }

index.html

@@ -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>
+    <title>Cinny</title>
-    <meta name="name" content="Lotus Chat" />
+    <meta name="name" content="Cinny" />
-    <meta name="author" content="Lotus Guild" />
+    <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:title" content="Cinny" />
-    <meta property="og:url" content="https://chat.lotusguild.org" />
+    <meta property="og:url" content="https://cinny.in" />
-    <meta property="og:image" content="https://chat.lotusguild.org/public/res/android/android-chrome-192x192.png" />
+    <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="application-name" content="Cinny" />
-    <meta name="apple-mobile-web-app-title" content="Lotus Chat" />
+    <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" />
 

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "lotus-chat",
+  "name": "cinny",
-  "version": "4.12.1-lotus",
+  "version": "4.11.0",
-  "description": "Lotus Chat — Matrix client for Lotus Guild",
+  "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
   "engines": {
@@ -11,52 +11,11 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "npm run check:eslint && npm run check:prettier",
+    "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit"
-    "prepare": "husky install",
-    "commit": "git-cz",
-    "semantic-release": "semantic-release"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx}": "eslint",
-    "*": "prettier --ignore-unknown --write"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "release": {
-    "branches": [
-      "dev"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/exec",
-        {
-          "prepareCmd": "node scripts/update-version.js ${nextRelease.version}"
-        }
-      ],
-      [
-        "@semantic-release/git",
-        {
-          "assets": [
-            "package.json",
-            "package-lock.json",
-            "src/app/features/settings/about/About.tsx",
-            "src/app/pages/auth/AuthFooter.tsx",
-            "src/app/pages/client/WelcomePage.tsx"
-          ],
-          "message": "chore(release): ${nextRelease.version} [skip ci]"
-        }
-      ],
-      "@semantic-release/github"
-    ]
   },
   "keywords": [],
   "author": "Ajay Bura",
@@ -66,9 +25,6 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@giphy/js-fetch-api": "5.8.0",
-    "@giphy/js-types": "5.1.0",
-    "@giphy/react-components": "10.1.2",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -100,7 +56,7 @@
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
     "matrix-js-sdk": "38.2.0",
-    "matrix-widget-api": "1.16.1",
+    "matrix-widget-api": "1.13.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -114,21 +70,18 @@
     "react-i18next": "15.0.0",
     "react-range": "1.8.14",
     "react-router-dom": "6.30.3",
-    "sanitize-html": "2.17.4",
+    "sanitize-html": "2.12.1",
-    "slate": "0.123.0",
+    "slate": "0.112.0",
-    "slate-dom": "0.123.0",
+    "slate-dom": "0.112.2",
-    "slate-history": "0.113.1",
+    "slate-history": "0.110.3",
-    "slate-react": "0.123.0",
+    "slate-react": "0.112.1",
-    "styled-components": "6.4.1",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.19.3",
+    "@element-hq/element-call-embedded": "0.16.3",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
-    "@semantic-release/exec": "7.1.0",
-    "@semantic-release/git": "10.0.1",
     "@types/chroma-js": "3.1.1",
     "@types/file-saver": "2.0.5",
     "@types/is-hotkey": "0.1.10",
@@ -137,13 +90,12 @@
     "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",
     "@types/react-google-recaptcha": "2.1.8",
-    "@types/sanitize-html": "2.16.1",
+    "@types/sanitize-html": "2.9.0",
     "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
     "@vitejs/plugin-react": "4.2.0",
     "buffer": "6.0.3",
-    "cz-conventional-changelog": "3.3.0",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
@@ -151,10 +103,7 @@
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "husky": "9.1.7",
-    "lint-staged": "16.3.2",
     "prettier": "2.8.1",
-    "semantic-release": "25.0.3",
     "typescript": "4.9.4",
     "vite": "5.4.19",
     "vite-plugin-pwa": "0.20.5",

public/config.json

@@ -1,18 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  },
-  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
-}

public/manifest.json

@@ -1,14 +1,14 @@
 {
-  "name": "Lotus Chat",
+  "name": "Cinny",
-  "short_name": "Lotus Chat",
+  "short_name": "Cinny",
-  "description": "Lotus Chat \u2014 the Lotus Guild Matrix client",
+  "description": "Yet another matrix client",
   "dir": "auto",
   "lang": "en-US",
   "display": "standalone",
   "orientation": "portrait",
   "start_url": "./",
-  "background_color": "#0a0a0a",
+  "background_color": "#fff",
-  "theme_color": "#980000",
+  "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"
-        }
-      ]
-    }
   ]
 }

public/res/svg/cinny-highlight.svg

@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
+<g clip-path="url(#clip0_2707_1961)">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
+<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
+<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 d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
+<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
+<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"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
+</g>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
+<defs>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
+<clipPath id="clip0_2707_1961">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
+<rect width="18" height="18" fill="white"/>
-  </g>
+</clipPath>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+</defs>
-  <circle cx="14.5" cy="14.5" r="3" fill="#45B83B"/>
 </svg>

public/res/svg/cinny-unread.svg

@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
+<g clip-path="url(#clip0_2707_2015)">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
+<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
+<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 d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
+<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
+<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"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
+</g>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
+<defs>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
+<clipPath id="clip0_2707_2015">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
+<rect width="18" height="18" fill="white"/>
-  </g>
+</clipPath>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+</defs>
-  <circle cx="14.5" cy="14.5" r="3" fill="#989898"/>
 </svg>

public/res/svg/cinny.svg

@@ -1,13 +1,19 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
-  <g fill="#980000" fill-opacity="0.88">
+<svg version="1.1"
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
+	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
+<defs>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
+</defs>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
+<g>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
+	<g>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
+		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
+	</g>
-  </g>
+	<g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+		<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>
 </svg>

scripts/update-version.js

@@ -1,48 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { execSync } from "child_process";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const version = process.argv[2];
-
-if (!version) {
-  console.error("Version argument missing");
-  process.exit(1);
-}
-
-const root = path.resolve(__dirname, "..");
-const newVersionTag = `v${version}`;
-
-// Update package.json + package-lock.json safely
-execSync(`npm version ${version} --no-git-tag-version`, {
-  cwd: root,
-  stdio: "inherit",
-});
-
-console.log(`Updated package.json and package-lock.json → ${version}`);
-
-// Update UI version references
-const files = [
-  "src/app/features/settings/about/About.tsx",
-  "src/app/pages/auth/AuthFooter.tsx",
-  "src/app/pages/client/WelcomePage.tsx",
-];
-
-files.forEach((filePath) => {
-  const absPath = path.join(root, filePath);
-
-  if (!fs.existsSync(absPath)) {
-    console.warn(`File not found: ${filePath}`);
-    return;
-  }
-
-  const content = fs.readFileSync(absPath, "utf8");
-  const updated = content.replace(/v\d+\.\d+\.\d+/g, newVersionTag);
-
-  fs.writeFileSync(absPath, updated);
-
-  console.log(`Updated ${filePath} → ${newVersionTag}`);
-});

src/app/components/CallEmbedProvider.tsx

@@ -1,32 +1,6 @@
-/* eslint-disable jsx-a11y/media-has-caption */
+import React, { ReactNode, useCallback, useRef } from 'react';
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { config } from 'folds';
-import FocusTrap from 'focus-trap-react';
-import {
-  Avatar,
-  Box,
-  Button,
-  color,
-  config,
-  Dialog,
-  Icon,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  toRem,
-} from 'folds';
-import {
-  EventTimelineSetHandlerMap,
-  EventType,
-  RelationType,
-  Room,
-  RoomEvent,
-} from 'matrix-js-sdk';
-import { IRTCNotificationContent, RTCNotificationType } from 'matrix-js-sdk/lib/matrixrtc/types';
-import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import {
   CallEmbedContextProvider,
   CallEmbedRefContextProvider,
@@ -34,330 +8,11 @@ import {
   useCallJoined,
   useCallThemeSync,
   useCallMemberSoundSync,
-  useCallStart,
 } 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 { useMatrixClient } from '../hooks/useMatrixClient';
-import CallSound from '../../../public/sound/call.ogg';
-import { useCallMembersChange, useCallSession } from '../hooks/useCall';
-import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
-import { mDirectAtom } from '../state/mDirectList';
-import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
-import { mxcUrlToHttp } from '../utils/matrix';
-import { RoomAvatar, RoomIcon } from './room-avatar';
-import { useRoomNavigate } from '../hooks/useRoomNavigate';
-import { getStateEvent } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
-import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
-import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
-import { useLivekitSupport } from '../hooks/useLivekitSupport';
-import { CallAvatarAnimation } from '../styles/Animations.css';
-import { webRTCSupported } from '../utils/rtc';
-
-const PIP_MIN_W = 200;
-const PIP_MIN_H = 112;
-
-type Corner = 'se' | 'sw' | 'ne' | 'nw';
-
-/** Normalise the element to top/left positioning so resize math is uniform. */
-function normaliseToTopLeft(el: HTMLElement) {
-  const rect = el.getBoundingClientRect();
-  el.style.left = `${rect.left}px`;
-  el.style.top = `${rect.top}px`;
-  el.style.right = 'auto';
-  el.style.bottom = 'auto';
-}
-
-type IncomingCallInfo = {
-  room: Room;
-  sender: string;
-  senderTs: number;
-  lifetime: number;
-  intent?: string;
-  notificationType: RTCNotificationType;
-  refEventId: string;
-};
-type IncomingCallProps = {
-  dm: boolean;
-  info: IncomingCallInfo;
-  onIgnore: () => void;
-  onAnswer: (room: Room, video: boolean) => void;
-  onReject: (room: Room, eventId: string) => void;
-};
-function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const livekitSupported = useLivekitSupport();
-  const rtcSupported = webRTCSupported();
-  const canAnswer = livekitSupported && rtcSupported;
-  const { room } = info;
-
-  const audioRef = useRef<HTMLAudioElement>(null);
-
-  const roomName = useRoomName(room);
-  const roomAvatar = useRoomAvatar(room, dm);
-  const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
-    : undefined;
-
-  const session = useCallSession(room);
-  useCallMembersChange(
-    session,
-    useCallback(() => {
-      const members = MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription);
-      if (members.length === 0) {
-        onIgnore();
-      }
-    }, [room, session, onIgnore])
-  );
-
-  const playSound = useCallback(() => {
-    const audioElement = audioRef.current;
-    audioElement?.play();
-  }, []);
-
-  useEffect(() => {
-    if (info.notificationType === 'ring') {
-      playSound();
-    }
-  }, [playSound, info.notificationType]);
-
-  return (
-    <>
-      <Overlay open backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => onIgnore(),
-              clickOutsideDeactivates: false,
-              escapeDeactivates: false,
-            }}
-          >
-            <Dialog style={{ maxWidth: toRem(324) }}>
-              <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
-                <Text size="T200" align="Center">
-                  {info.sender}
-                </Text>
-                <Box direction="Column" gap="500" alignItems="Center">
-                  <Box shrink="No">
-                    <Avatar size="500" className={CallAvatarAnimation}>
-                      <RoomAvatar
-                        roomId={room.roomId}
-                        src={avatarUrl}
-                        alt={roomName}
-                        renderFallback={() => (
-                          <RoomIcon
-                            roomType={room.getType()}
-                            size="400"
-                            joinRule={room.getJoinRule()}
-                            filled
-                          />
-                        )}
-                      />
-                    </Avatar>
-                  </Box>
-                  <Box grow="Yes" direction="Column" gap="100">
-                    <Text size="H3" align="Center" truncate>
-                      {roomName}
-                    </Text>
-                    <Text size="T300">Incoming Call</Text>
-                  </Box>
-                </Box>
-                {!livekitSupported && (
-                  <Text
-                    style={{ margin: 'auto', color: color.Critical.Main }}
-                    size="L400"
-                    align="Center"
-                  >
-                    Your homeserver does not support calling.
-                  </Text>
-                )}
-                {!webRTCSupported && (
-                  <Text
-                    style={{ margin: 'auto', color: color.Critical.Main }}
-                    size="L400"
-                    align="Center"
-                  >
-                    Your browser does not support WebRTC, which is required for calling.
-                  </Text>
-                )}
-                <Box direction="Column" gap="300">
-                  <Button
-                    style={{ flexGrow: 1 }}
-                    variant="Success"
-                    size="400"
-                    radii="400"
-                    onClick={() => onAnswer(room, info.intent === 'video')}
-                    before={
-                      <Icon
-                        size="200"
-                        src={info.intent === 'video' ? Icons.VideoCamera : Icons.Phone}
-                        filled
-                      />
-                    }
-                    disabled={!canAnswer}
-                  >
-                    <Text as="span" size="B400">
-                      Answer
-                    </Text>
-                  </Button>
-                  <Button
-                    style={{ flexGrow: 1 }}
-                    variant="Success"
-                    fill="Soft"
-                    size="400"
-                    radii="400"
-                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
-                    before={<Icon size="200" src={Icons.Cross} filled />}
-                  >
-                    <Text as="span" size="B400">
-                      {dm ? 'Reject' : 'Ignore'}
-                    </Text>
-                  </Button>
-                </Box>
-              </Box>
-            </Dialog>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-      <audio ref={audioRef} loop style={{ display: 'none' }}>
-        <source src={CallSound} type="audio/ogg" />
-      </audio>
-    </>
-  );
-}
-
-type IncomingCallListenerProps = {
-  callEmbed?: CallEmbed;
-  joined?: boolean;
-};
-function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps) {
-  const mx = useMatrixClient();
-  const directs = useAtomValue(mDirectAtom);
-  const { navigateRoom } = useRoomNavigate();
-
-  const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
-  const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
-  const startCall = useCallStart(dm);
-
-  const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
-    async (event, room, toStartOfTimeline, removed, data) => {
-      // only process rtc notification reference events.
-      // we do not want to wait to decrypt all events.
-      if (event.getRelation()?.rel_type !== RelationType.Reference) return;
-
-      if (event.isEncrypted()) {
-        if (!event.isBeingDecrypted()) {
-          await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
-        }
-        await event.getDecryptionPromise();
-      }
-
-      if (
-        !room ||
-        event.getType() !== EventType.RTCNotification ||
-        event.getSender() === mx.getSafeUserId() ||
-        !data.liveEvent
-      ) {
-        return;
-      }
-
-      const sender = event.getSender();
-      const content = event.getContent<IRTCNotificationContent>();
-      const senderTs =
-        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
-      const lifetime = Math.min(content.lifetime, 120000);
-      const notificationType = content.notification_type;
-      const relation =
-        event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
-      const refEventId = relation?.event_id;
-
-      const mention =
-        content['m.mentions'].room || content['m.mentions'].user_ids?.includes(mx.getSafeUserId());
-      if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
-        return;
-      }
-
-      const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
-      const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
-      const creators = getRoomCreatorsForRoomId(mx, room.roomId);
-      const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
-      const hasCallPermission = permissions.stateEvent(
-        StateEvent.GroupCallMemberPrefix,
-        mx.getSafeUserId()
-      );
-      if (!hasCallPermission) return;
-
-      const info: IncomingCallInfo = {
-        room,
-        sender,
-        senderTs,
-        lifetime,
-        intent:
-          'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
-            ? content['m.call.intent']
-            : undefined,
-        notificationType,
-        refEventId,
-      };
-
-      setCallInfo(info);
-    },
-    [mx]
-  );
-
-  useEffect(() => {
-    mx.on(RoomEvent.Timeline, handleTimelineEvent);
-    return () => {
-      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-    };
-  }, [mx, handleTimelineEvent]);
-
-  const handleIgnore = useCallback(() => {
-    setCallInfo(undefined);
-  }, []);
-
-  const handleReject = useCallback(
-    (room: Room, eventId: string) => {
-      mx.sendEvent(room.roomId, EventType.RTCDecline, {
-        'm.relates_to': {
-          rel_type: RelationType.Reference,
-          event_id: eventId,
-        },
-      });
-      setCallInfo(undefined);
-    },
-    [mx]
-  );
-
-  const handleAnswer = useCallback(
-    (room: Room, video: boolean) => {
-      startCall(room, { microphone: true, video, sound: true });
-      setCallInfo(undefined);
-      navigateRoom(room.roomId);
-    },
-    [startCall, navigateRoom]
-  );
-
-  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
-    return null;
-  }
-  return !joined && callInfo ? (
-    <IncomingCall
-      dm={dm}
-      info={callInfo}
-      onIgnore={handleIgnore}
-      onAnswer={handleAnswer}
-      onReject={handleReject}
-    />
-  ) : null;
-}
 
 function CallUtils({ embed }: { embed: CallEmbed }) {
   const setCallEmbed = useSetAtom(callEmbedAtom);
@@ -387,77 +42,13 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const screenSize = useScreenSizeContext();
 
   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 { navigateRoom } = useRoomNavigate();
 
-  const pipDragRef = React.useRef<{
+  const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;
-    startX: number; startY: number; origLeft: number; origTop: number; dragged: boolean;
-  } | null>(null);
-
-  React.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 {
-      ['top','left','bottom','right','width','height','borderRadius','overflow','zIndex','boxShadow','border'].forEach(p => { (el.style as any)[p] = ''; });
-      el.style.visibility = callVisible ? '' : 'hidden';
-    }
-  }, [pipMode, callVisible]);
-
-  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 onMove = (ev: MouseEvent) => {
-      if (!pipDragRef.current || !el) return;
-      const dx = ev.clientX - pipDragRef.current.startX, 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) {
-        el.style.left = `${Math.max(0, Math.min(window.innerWidth-el.offsetWidth, pipDragRef.current.origLeft+dx))}px`;
-        el.style.top = `${Math.max(0, Math.min(window.innerHeight-el.offsetHeight, pipDragRef.current.origTop+dy))}px`;
-        el.style.right = 'auto'; el.style.bottom = 'auto';
-      }
-    };
-    const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.cursor = ''; document.body.style.userSelect = ''; setTimeout(() => { if (pipDragRef.current) pipDragRef.current.dragged = false; }, 0); };
-    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
-  };
-
-  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
-    e.stopPropagation(); e.preventDefault();
-    const el = callEmbedRef.current; if (!el) return;
-    normaliseToTopLeft(el);
-    const sx = e.clientX, sy = e.clientY, sw = el.offsetWidth, sh = el.offsetHeight;
-    const sl = parseFloat(el.style.left), st = parseFloat(el.style.top);
-    document.body.style.cursor = `${corner}-resize`; document.body.style.userSelect = 'none';
-    const onMove = (ev: MouseEvent) => {
-      const dx = ev.clientX-sx, dy = ev.clientY-sy;
-      let w = sw, h = sh, l = sl, t = st;
-      if (corner==='se'){w=sw+dx;h=sh+dy;} if (corner==='sw'){w=sw-dx;h=sh+dy;l=sl+sw-Math.max(PIP_MIN_W,w);}
-      if (corner==='ne'){w=sw+dx;h=sh-dy;t=st+sh-Math.max(PIP_MIN_H,h);} if (corner==='nw'){w=sw-dx;h=sh-dy;l=sl+sw-Math.max(PIP_MIN_W,w);t=st+sh-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 onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.cursor=''; document.body.style.userSelect=''; };
-    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
-  };
 
   return (
     <CallEmbedContextProvider value={callEmbed}>
       {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>
+      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
-        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
-        {children}
-      </CallEmbedRefContextProvider>
       <div
         data-call-embed-container
         style={{
@@ -469,29 +60,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
           height: '50%',
         }}
         ref={callEmbedRef}
-      >
+      />
-        {pipMode && callEmbed && (
-          <>
-            <div
-              role="button"
-              tabIndex={0}
-              aria-label="Return to call"
-              onMouseDown={handlePipMouseDown}
-              onClick={() => { if (!pipDragRef.current?.dragged) navigateRoom(callEmbed.roomId); }}
-              onKeyDown={(e) => e.key === 'Enter' && navigateRoom(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>
-            {(['se','sw','ne','nw'] as Corner[]).map((corner) => (
-              <div key={corner} onMouseDown={(e) => handleResizeMouseDown(e, corner)} onClick={(e) => e.stopPropagation()}
-                style={{ position:'absolute', width:'18px', height:'18px', [corner.includes('s')?'bottom':'top']:0, [corner.includes('e')?'right':'left']:0, cursor:`${corner}-resize`, zIndex:2 }} />
-            ))}
-          </>
-        )}
-      </div>
     </CallEmbedContextProvider>
   );
 }

src/app/components/GifPicker.tsx

@@ -1,152 +0,0 @@
-import React, { useCallback } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
-import { IGif } from '@giphy/js-types';
-import { Box } from 'folds';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
-
-const PICKER_WIDTH = 312;
-
-const TERMINAL_CSS = `
-  [data-gif-terminal] input,
-  [data-gif-terminal] form {
-    background: #030c14 !important;
-    color: #e8edf5 !important;
-    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace !important;
-    border: 1px solid rgba(255,107,0,0.35) !important;
-    border-radius: 4px !important;
-    font-size: 12px !important;
-    box-shadow: none !important;
-  }
-  [data-gif-terminal] input:focus {
-    border-color: rgba(255,107,0,0.7) !important;
-    box-shadow: 0 0 0 2px rgba(255,107,0,0.12) !important;
-    outline: none !important;
-  }
-  [data-gif-terminal] input::placeholder {
-    color: rgba(255,107,0,0.4) !important;
-    font-family: 'JetBrains Mono', monospace !important;
-  }
-  [data-gif-terminal] svg,
-  [data-gif-terminal] button[type="reset"] {
-    display: none !important;
-  }
-  [data-gif-terminal] ::-webkit-scrollbar {
-    width: 4px;
-  }
-  [data-gif-terminal] ::-webkit-scrollbar-track {
-    background: #030508;
-  }
-  [data-gif-terminal] ::-webkit-scrollbar-thumb {
-    background: rgba(255,107,0,0.4);
-    border-radius: 2px;
-  }
-`;
-
-type GifPickerInnerProps = {
-  onSelect: (url: string, width: number, height: number) => void;
-  requestClose: () => void;
-  lotusTerminal: boolean;
-};
-
-function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
-  const { fetchGifs, searchKey } = React.useContext(SearchContext);
-
-  const handleClick = useCallback(
-    (gif: IGif, e: React.SyntheticEvent) => {
-      e.preventDefault();
-      const r = gif.images.downsized ?? gif.images.original;
-      const url = r.url;
-      const width = Number(r.width) || 200;
-      const height = Number(r.height) || 200;
-      onSelect(url, width, height);
-      requestClose();
-    },
-    [onSelect, requestClose]
-  );
-
-  return (
-    <Box direction="Column" style={{ width: `${PICKER_WIDTH}px` }}>
-      {lotusTerminal && (
-        <div style={{
-          padding: '5px 10px 4px',
-          borderBottom: '1px solid rgba(255,107,0,0.2)',
-          fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
-          fontSize: '10px',
-          fontWeight: 700,
-          letterSpacing: '0.1em',
-          color: '#FF6B00',
-          userSelect: 'none',
-        }}>
-          // GIF_SEARCH
-        </div>
-      )}
-      <Box style={{ padding: '8px 8px 4px' }}>
-        <SearchBar style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }} />
-      </Box>
-      <div style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}>
-        <Grid
-          key={searchKey}
-          fetchGifs={fetchGifs}
-          width={PICKER_WIDTH - 16}
-          columns={2}
-          gutter={4}
-          onGifClick={handleClick}
-          hideAttribution={false}
-          noLink
-        />
-      </div>
-    </Box>
-  );
-}
-
-type GifPickerProps = {
-  apiKey: string;
-  onSelect: (url: string, width: number, height: number) => void;
-  requestClose: () => void;
-};
-
-export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
-
-  const containerStyle = lotusTerminal
-    ? {
-        background: '#060c14',
-        border: '1px solid rgba(255,107,0,0.35)',
-        borderRadius: '4px',
-        overflow: 'hidden',
-        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
-        width: `${PICKER_WIDTH}px`,
-      }
-    : {
-        background: 'var(--bg-surface)',
-        border: '1px solid rgba(255,255,255,0.08)',
-        borderRadius: '12px',
-        overflow: 'hidden',
-        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
-        width: `${PICKER_WIDTH}px`,
-      };
-
-  return (
-    <FocusTrap
-      focusTrapOptions={{
-        initialFocus: false,
-        onDeactivate: requestClose,
-        clickOutsideDeactivates: true,
-        allowOutsideClick: true,
-      }}
-    >
-      <Box
-        direction="Column"
-        data-gif-terminal={lotusTerminal ? '' : undefined}
-        style={containerStyle}
-      >
-        {lotusTerminal && <style>{TERMINAL_CSS}</style>}
-        <SearchContextManager apiKey={apiKey} initialTerm="">
-          <GifPickerInner onSelect={onSelect} requestClose={requestClose} lotusTerminal={!!lotusTerminal} />
-        </SearchContextManager>
-      </Box>
-    </FocusTrap>
-  );
-}

src/app/components/ImageOverlay.tsx

@@ -1,45 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import { as, Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
-import React, { ReactNode } from 'react';
-import { ModalWide } from '../styles/Modal.css';
-import { stopPropagation } from '../utils/keyboard';
-
-export type RenderViewerProps = {
-  src: string;
-  alt: string;
-  requestClose: () => void;
-};
-
-type ImageOverlayProps = RenderViewerProps & {
-  viewer: boolean;
-  renderViewer: (props: RenderViewerProps) => ReactNode;
-};
-
-export const ImageOverlay = as<'div', ImageOverlayProps>(
-  ({ src, alt, viewer, requestClose, renderViewer, ...props }, ref) => (
-    <Overlay {...props} ref={ref} open={viewer} backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: () => requestClose(),
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Modal
-            className={ModalWide}
-            size="500"
-            onContextMenu={(evt: any) => evt.stopPropagation()}
-          >
-            {renderViewer({
-              src,
-              alt,
-              requestClose,
-            })}
-          </Modal>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  )
-);

src/app/components/IncomingCallNotification.tsx

@@ -1,310 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { Avatar, Box, Button, Text } from 'folds';
-import { UserAvatar } from './user-avatar';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { useCallStart } from '../hooks/useCallEmbed';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
-import { useIncomingDmCall } from '../hooks/useIncomingDmCall';
-import { mxcUrlToHttp } from '../utils/matrix';
-
-function useRingTone(active: boolean) {
-  const stopRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    if (!active) {
-      stopRef.current?.();
-      stopRef.current = null;
-      return;
-    }
-
-    let ctx: AudioContext;
-    try {
-      ctx = new AudioContext();
-    } catch {
-      return;
-    }
-
-    let cancelled = false;
-
-    const pulse = (t: number, freq: number, dur: number) => {
-      const osc = ctx.createOscillator();
-      const gain = ctx.createGain();
-      osc.connect(gain);
-      gain.connect(ctx.destination);
-      osc.frequency.value = freq;
-      osc.type = 'sine';
-      gain.gain.setValueAtTime(0, t);
-      gain.gain.linearRampToValueAtTime(0.22, t + 0.04);
-      gain.gain.setValueAtTime(0.22, t + dur - 0.04);
-      gain.gain.linearRampToValueAtTime(0, t + dur);
-      osc.start(t);
-      osc.stop(t + dur);
-    };
-
-    let ringTimer: ReturnType<typeof setTimeout> | null = null;
-    const ring = () => {
-      if (cancelled) return;
-      const now = ctx.currentTime;
-      pulse(now, 880, 0.18);
-      pulse(now + 0.28, 880, 0.18);
-      ringTimer = setTimeout(ring, 2200);
-    };
-
-    ring();
-
-    const stop = () => {
-      cancelled = true;
-      if (ringTimer !== null) clearTimeout(ringTimer);
-      ctx.close();
-    };
-
-    stopRef.current = stop;
-
-    return () => {
-      stop();
-      stopRef.current = null;
-    };
-  }, [active]);
-
-  return stopRef;
-}
-
-function IncomingCallCard() {
-  const mx = useMatrixClient();
-  const startCall = useCallStart(true);
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
-  const [incoming, dismiss] = useIncomingDmCall();
-  const stopRingRef = useRingTone(!!incoming);
-
-  const stopAndDismiss = useCallback(() => {
-    stopRingRef.current?.();
-    dismiss();
-  }, [dismiss, stopRingRef]);
-
-  const handleAnswer = useCallback(() => {
-    if (!incoming) return;
-    stopRingRef.current?.();
-    startCall(incoming.room);
-    dismiss();
-  }, [incoming, startCall, dismiss, stopRingRef]);
-
-  if (!incoming) return null;
-
-  const callerUser = mx.getUser(incoming.callerId);
-  const callerName = callerUser?.displayName ?? incoming.callerId;
-  const avatarMxc = callerUser?.avatarUrl;
-  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, undefined, 64, 64, 'crop') ?? undefined : undefined;
-
-  if (lotusTerminal) {
-    return (
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '80px',
-          right: '24px',
-          zIndex: 9999,
-          background: '#060c14',
-          border: '1px solid rgba(255,107,0,0.45)',
-          borderRadius: '4px',
-          boxShadow: '0 4px 32px rgba(255,107,0,0.18), 0 0 0 1px rgba(255,107,0,0.08)',
-          padding: '16px',
-          width: '272px',
-          fontFamily: "'JetBrains Mono', monospace",
-        }}
-      >
-        <div
-          style={{
-            fontSize: '10px',
-            letterSpacing: '0.1em',
-            color: '#00D4FF',
-            marginBottom: '10px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '6px',
-          }}
-        >
-          <span
-            style={{
-              display: 'inline-block',
-              width: '7px',
-              height: '7px',
-              borderRadius: '50%',
-              background: '#00FF88',
-              boxShadow: '0 0 6px #00FF88',
-              animation: 'lotus-ring-pulse 1s ease-in-out infinite',
-            }}
-          />
-          INCOMING CALL
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '14px' }}>
-          <Avatar size="300" style={{ border: '1px solid rgba(0,212,255,0.3)', borderRadius: '2px', overflow: 'hidden' }}>
-            <UserAvatar
-              userId={incoming.callerId}
-              src={avatarUrl}
-              alt={callerName}
-              renderFallback={() => (
-                <span style={{ fontSize: '16px', color: '#00D4FF', fontFamily: 'JetBrains Mono, monospace' }}>
-                  {callerName[0]?.toUpperCase() ?? '?'}
-                </span>
-              )}
-            />
-          </Avatar>
-          <div>
-            <div style={{ fontSize: '13px', color: '#e8edf5', fontWeight: 600 }}>{callerName}</div>
-            <div style={{ fontSize: '10px', color: 'rgba(232,237,245,0.45)', marginTop: '2px' }}>
-              {incoming.callerId}
-            </div>
-          </div>
-        </div>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <button
-            onClick={handleAnswer}
-            style={{
-              flex: 1,
-              background: 'transparent',
-              border: '1px solid #00FF88',
-              borderRadius: '3px',
-              color: '#00FF88',
-              fontFamily: 'JetBrains Mono, monospace',
-              fontSize: '11px',
-              fontWeight: 700,
-              letterSpacing: '0.08em',
-              padding: '9px 4px',
-              cursor: 'pointer',
-              boxShadow: '0 0 10px rgba(0,255,136,0.2)',
-              transition: 'box-shadow 0.15s, background 0.15s',
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLButtonElement).style.background = 'rgba(0,255,136,0.08)';
-              (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 0 16px rgba(0,255,136,0.35)';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
-              (e.currentTarget as HTMLButtonElement).style.boxShadow = '0 0 10px rgba(0,255,136,0.2)';
-            }}
-          >
-            ANSWER
-          </button>
-          <button
-            onClick={stopAndDismiss}
-            style={{
-              flex: 1,
-              background: 'transparent',
-              border: '1px solid rgba(255,107,0,0.5)',
-              borderRadius: '3px',
-              color: '#FF6B00',
-              fontFamily: 'JetBrains Mono, monospace',
-              fontSize: '11px',
-              fontWeight: 700,
-              letterSpacing: '0.08em',
-              padding: '9px 4px',
-              cursor: 'pointer',
-              transition: 'opacity 0.15s, background 0.15s',
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,107,0,0.08)';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
-            }}
-          >
-            DECLINE
-          </button>
-        </div>
-        <style>{`
-          @keyframes lotus-ring-pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.4; transform: scale(0.7); }
-          }
-        `}</style>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        bottom: '80px',
-        right: '24px',
-        zIndex: 9999,
-        background: 'var(--bg-surface)',
-        border: '1px solid var(--bg-surface-border)',
-        borderRadius: '16px',
-        boxShadow: '0 8px 40px rgba(0,0,0,0.45)',
-        padding: '16px',
-        width: '272px',
-      }}
-    >
-      <div
-        style={{
-          fontSize: '11px',
-          color: 'var(--text-secondary)',
-          marginBottom: '10px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '6px',
-        }}
-      >
-        <span
-          style={{
-            display: 'inline-block',
-            width: '7px',
-            height: '7px',
-            borderRadius: '50%',
-            background: 'var(--clr-success-main)',
-            animation: 'lotus-ring-pulse 1s ease-in-out infinite',
-          }}
-        />
-        Incoming call
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px' }}>
-        <Avatar size="300">
-          <UserAvatar
-            userId={incoming.callerId}
-            src={avatarUrl}
-            alt={callerName}
-            renderFallback={() => (
-              <Text size="H4">{callerName[0]?.toUpperCase() ?? '?'}</Text>
-            )}
-          />
-        </Avatar>
-        <div>
-          <Text size="T400" style={{ fontWeight: 600 }}>{callerName}</Text>
-          <Text size="T200" style={{ opacity: 0.5 }}>{incoming.callerId}</Text>
-        </div>
-      </div>
-      <Box direction="Row" gap="200">
-        <Button
-          onClick={handleAnswer}
-          variant="Success"
-          fill="Solid"
-          size="400"
-          style={{ flex: 1 }}
-        >
-          <Text size="B400">Answer</Text>
-        </Button>
-        <Button
-          onClick={stopAndDismiss}
-          variant="Critical"
-          fill="Solid"
-          size="400"
-          style={{ flex: 1 }}
-        >
-          <Text size="B400">Decline</Text>
-        </Button>
-      </Box>
-      <style>{`
-        @keyframes lotus-ring-pulse {
-          0%, 100% { opacity: 1; transform: scale(1); }
-          50% { opacity: 0.4; transform: scale(0.7); }
-        }
-      `}</style>
-    </div>
-  );
-}
-
-export function IncomingCallNotification() {
-  return <IncomingCallCard />;
-}

src/app/components/editor/input.ts

@@ -157,12 +157,10 @@ const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): In
       return children;
     }
 
-    const children = node.childNodes.flatMap((child) => getInlineElement(child, processText));
+    return node.childNodes.flatMap((child) => getInlineElement(child, processText));
-    if (children.length === 0) return [{ text: '' }];
-    return children;
   }
 
-  return [{ text: '' }];
+  return [];
 };
 
 const parseBlockquoteNode = (
@@ -193,7 +191,7 @@ const parseBlockquoteNode = (
 
       if (child.name === 'p') {
         appendLine();
-        quoteLines.push(getInlineElement(child, processText));
+        quoteLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
         return;
       }
 
@@ -230,13 +228,9 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
       children: [{ text }],
     }));
     const childCode = node.children[0];
-    const attribs =
+    const className =
-      isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs : undefined;
+      isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs.class ?? '' : '';
-    const languageClass = attribs?.class;
+    const prefix = { text: `${mdSequence}${className.replace('language-', '')}` };
-    const customLabel = attribs?.['data-label'];
-    const prefix = {
-      text: `${mdSequence}${customLabel ?? languageClass?.replace('language-', '') ?? ''}`,
-    };
     const suffix = { text: mdSequence };
     return [
       { type: BlockType.Paragraph, children: [prefix] },
@@ -255,67 +249,10 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
     },
   ];
 };
-
+const parseListNode = (
-const parseListMarkdown = (
   node: Element,
-  processText: ProcessTextCallback,
+  processText: ProcessTextCallback
-  depth = 0
+): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
-): ParagraphElement[] => {
-  const md = isTag(node) && node.name === 'ul' ? '*' : '-';
-  const prefix = node.attribs['data-md'] ?? md;
-  const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
-  const [digitOrChar] = prefix.match(/^[\da-zA-Z]/) ?? [];
-
-  const digit = digitOrChar ? parseInt(digitOrChar, 10) : undefined;
-
-  const lines: ParagraphElement[] = [];
-  let lineNo = digit === undefined || Number.isNaN(digit) ? digitOrChar ?? 1 : digit;
-  const pushLine = (line: InlineElement[]) => {
-    lines.push({
-      type: BlockType.Paragraph,
-      children: [
-        {
-          text: `${Array(depth + 1).join(' ')}${starOrHyphen ? `${starOrHyphen} ` : `${lineNo}. `}`,
-        },
-        ...line,
-      ],
-    });
-    if (typeof lineNo === 'string') {
-      lineNo = String.fromCharCode(lineNo.charCodeAt(0) + 1);
-    } else {
-      lineNo += 1;
-    }
-  };
-
-  node.children.forEach((child) => {
-    if (isText(child)) {
-      pushLine([{ text: processText(child.data) }]);
-      return;
-    }
-
-    if (isTag(child)) {
-      if (child.name === 'ul' || child.name === 'ol') {
-        lines.push(...parseListMarkdown(child, processText, depth + 1));
-        return;
-      }
-      if (child.name === 'li') {
-        child.children.forEach((c) => {
-          if (isTag(c) && (c.name === 'ul' || c.name === 'ol')) {
-            lines.push(...parseListMarkdown(c, processText, depth + 1));
-            return;
-          }
-          pushLine(getInlineElement(c, processText));
-        });
-        return;
-      }
-    }
-
-    pushLine(getInlineElement(child, processText));
-  });
-
-  return lines;
-};
-const parseListLines = (children: ChildNode[], processText: ProcessTextCallback) => {
   const listLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
 
@@ -326,7 +263,7 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
     lineHolder = [];
   };
 
-  children.forEach((child) => {
+  node.children.forEach((child) => {
     if (isText(child)) {
       lineHolder.push({ text: processText(child.data) });
       return;
@@ -340,7 +277,7 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
 
       if (child.name === 'li') {
         appendLine();
-        listLines.push(getInlineElement(child, processText));
+        listLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
         return;
       }
 
@@ -349,23 +286,24 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
   });
   appendLine();
 
-  return listLines;
+  const mdSequence = node.attribs['data-md'];
-};
+  if (mdSequence !== undefined) {
-const parseListNode = (
+    const prefix = mdSequence || '-';
-  node: Element,
+    const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
-  processText: ProcessTextCallback
+    return listLines.map((lineChildren) => ({
-): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
+      type: BlockType.Paragraph,
-  if (node.attribs['data-md'] !== undefined) {
+      children: [
-    return parseListMarkdown(node, processText);
+        { text: `${starOrHyphen ? `${starOrHyphen} ` : `${prefix}. `} ` },
+        ...lineChildren,
+      ],
+    }));
   }
 
-  const lines = parseListLines(node.childNodes, processText);
-
   if (node.name === 'ol') {
     return [
       {
         type: BlockType.OrderedList,
-        children: lines.map((lineChildren) => ({
+        children: listLines.map((lineChildren) => ({
           type: BlockType.ListItem,
           children: lineChildren,
         })),
@@ -376,7 +314,7 @@ const parseListNode = (
   return [
     {
       type: BlockType.UnorderedList,
-      children: lines.map((lineChildren) => ({
+      children: listLines.map((lineChildren) => ({
         type: BlockType.ListItem,
         children: lineChildren,
       })),
@@ -387,7 +325,7 @@ const parseHeadingNode = (
   node: Element,
   processText: ProcessTextCallback
 ): HeadingElement | ParagraphElement => {
-  const children = getInlineElement(node, processText);
+  const children = node.children.flatMap((child) => getInlineElement(child, processText));
 
   const headingMatch = node.name.match(/^h([123456])$/);
   const [, g1AsLevel] = headingMatch ?? ['h3', '3'];
@@ -450,7 +388,7 @@ export const domToEditorInput = (
         appendLine();
         children.push({
           type: BlockType.Paragraph,
-          children: getInlineElement(node, processText),
+          children: node.children.flatMap((child) => getInlineElement(child, processText)),
         });
         return;
       }

src/app/components/editor/output.ts

@@ -11,7 +11,7 @@ import {
 } from '../../plugins/markdown';
 import { findAndReplace } from '../../utils/findAndReplace';
 import { sanitizeForRegex } from '../../utils/regex';
-import { isUserId } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
 
 export type OutputOptions = {
   allowTextFormatting?: boolean;

src/app/components/message/MsgTypeRenderers.tsx

@@ -391,28 +391,9 @@ export function MLocation({ content }: MLocationProps) {
   const location = parseGeoUri(geoUri);
   if (!location) return <BrokenContent />;
 
-  const lat = parseFloat(location.latitude);
-  const lon = parseFloat(location.longitude);
-  const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${lat - 0.004},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
-
   return (
-    <Box direction="Column" alignItems="Start" gap="200">
+    <Box direction="Column" alignItems="Start" gap="100">
-      <iframe
+      <Text size="T400">{geoUri}</Text>
-        title="Location"
-        src={mapSrc}
-        style={{
-          width: '280px',
-          height: '160px',
-          border: '1px solid var(--bg-surface-border)',
-          borderRadius: '8px',
-          display: 'block',
-        }}
-        scrolling="no"
-        loading="lazy"
-      />
-      <Text size="T300" style={{ opacity: 0.65 }}>
-        {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
-      </Text>
       <Chip
         as="a"
         size="400"

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

@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text } from 'folds';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-
-type PollTextValue = Array<{ body: string }> | string;
-
-function extractText(val: PollTextValue | undefined): string {
-  if (!val) return '';
-  if (typeof val === 'string') return val;
-  return val[0]?.body ?? '';
-}
-
-type PollAnswer = {
-  'm.id'?: string;
-  id?: string;
-  'm.text'?: PollTextValue;
-  'org.matrix.msc3381.poll.answer'?: { body: string };
-};
-
-type PollData = {
-  question?: { body?: string; 'm.text'?: PollTextValue };
-  answers?: PollAnswer[];
-};
-
-export function PollContent({
-  content,
-  roomId,
-  eventId,
-}: {
-  content: Record<string, unknown>;
-  roomId?: string;
-  eventId?: string;
-}) {
-  const mx = useMatrixClient();
-  const [myVote, setMyVote] = useState<string | null>(null);
-  const isStable = !!content['m.poll'];
-
-  const poll = (
-    content['m.poll'] ?? content['org.matrix.msc3381.poll.start']
-  ) as PollData | undefined;
-
-  if (!poll) {
-    return (
-      <Text style={{ opacity: 0.6 }}>
-        <i>Poll (unreadable format)</i>
-      </Text>
-    );
-  }
-
-  const questionText =
-    extractText((poll.question as any)?.['m.text']) ||
-    (poll.question as any)?.body ||
-    'Untitled poll';
-
-  const canVote = !!roomId && !!eventId;
-
-  const handleVote = (answerId: string) => {
-    if (!roomId || !eventId) return;
-    setMyVote(answerId);
-    if (isStable) {
-      mx.sendEvent(roomId, 'm.poll.response' as any, {
-        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
-        'm.responses': [{ 'm.id': answerId }],
-      });
-    } else {
-      mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
-        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
-        'org.matrix.msc3381.poll.response': { answers: [answerId] },
-      });
-    }
-  };
-
-  return (
-    <Box
-      direction="Column"
-      gap="200"
-      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
-    >
-      <Box
-        alignItems="Center"
-        gap="100"
-        style={{
-          fontSize: '0.68rem',
-          fontWeight: 700,
-          letterSpacing: '0.12em',
-          textTransform: 'uppercase',
-          opacity: 0.55,
-          marginBottom: '2px',
-        }}
-      >
-        ◉ Poll
-      </Box>
-      <Text size="T400" style={{ fontWeight: 600 }}>
-        {questionText}
-      </Text>
-      <Box direction="Column" gap="100" style={{ marginTop: '2px' }}>
-        {(poll.answers ?? []).map((answer, i) => {
-          const text =
-            extractText((answer as any)['m.text']) ||
-            (answer as any)['org.matrix.msc3381.poll.answer']?.body ||
-            `Option ${i + 1}`;
-          const id = answer['m.id'] ?? answer.id ?? String(i);
-          const selected = myVote === id;
-          return (
-            <button
-              key={id}
-              type="button"
-              onClick={canVote ? () => handleVote(id) : undefined}
-              style={{
-                padding: '7px 12px',
-                borderRadius: '8px',
-                background: selected ? 'var(--bg-surface-active)' : 'var(--bg-surface-low)',
-                border: `1px solid ${selected ? 'var(--text-primary)' : 'var(--bg-surface-border)'}`,
-                fontSize: '0.88rem',
-                lineHeight: 1.4,
-                textAlign: 'left',
-                cursor: canVote ? 'pointer' : 'default',
-                color: 'var(--text-primary)',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '8px',
-                width: '100%',
-              }}
-            >
-              <span style={{ flexGrow: 1 }}>{text}</span>
-              {selected && (
-                <span style={{ opacity: 0.8, fontSize: '1rem', flexShrink: 0 }}>✓</span>
-              )}
-            </button>
-          );
-        })}
-      </Box>
-      {canVote ? (
-        <Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
-          <i>{myVote ? 'Vote cast — click another to change' : 'Click an option to vote'}</i>
-        </Text>
-      ) : (
-        <Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
-          <i>Open in Element to vote</i>
-        </Text>
-      )}
-    </Box>
-  );
-}

src/app/components/message/content/index.ts

@@ -5,4 +5,3 @@ export * from './AudioContent';
 export * from './FileContent';
 export * from './FallbackContent';
 export * from './EventContent';
-export * from './PollContent';

src/app/components/nav/styles.css.ts

@@ -49,7 +49,6 @@ const NavItemBase = style({
   display: 'flex',
   justifyContent: 'start',
   cursor: 'pointer',
-  backgroundColor: Container,
   color: OnContainer,
   outline: 'none',
   minHeight: toRem(36),

src/app/components/page/Page.tsx

@@ -14,7 +14,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
 
   return (
-    <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
+    <Box grow="Yes">
       {nav}
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
@@ -79,11 +79,11 @@ export function PageNavContent({
   );
 }
 
-export const Page = as<'div'>(({ className, ...props }, ref) => (
+export const Page = as<'div', css.PageVariants>(({ className, transparent, ...props }, ref) => (
   <Box
     grow="Yes"
     direction="Column"
-    className={classNames(ContainerColor({ variant: 'Surface' }), className)}
+    className={classNames(css.Page({ transparent }), className)}
     {...props}
     ref={ref}
   />

src/app/components/page/style.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 
 export const PageNav = recipe({
   variants: {
@@ -59,6 +60,19 @@ export const PageNavContent = style({
   paddingBottom: config.space.S700,
 });
 
+export const Page = recipe({
+  base: [ContainerColor({ variant: 'Surface' })],
+  variants: {
+    transparent: {
+      true: {
+        background: 'transparent',
+      },
+    },
+  },
+});
+
+export type PageVariants = RecipeVariants<typeof Page>;
+
 export const PageHeader = recipe({
   base: {
     paddingLeft: config.space.S400,

src/app/components/sidebar/Sidebar.css.ts

@@ -1,13 +1,11 @@
 import { createVar, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 
 export const Sidebar = style([
   DefaultReset,
   {
     width: toRem(66),
-    backgroundColor: color.Background.Container,
     borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
 
     display: 'flex',
@@ -187,7 +185,6 @@ export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
 
 export const SidebarFolder = recipe({
   base: [
-    ContainerColor({ variant: 'Background' }),
     {
       padding: config.space.S100,
       width: toRem(42),

src/app/components/splash-screen/SplashScreen.css.ts

@@ -3,7 +3,6 @@ import { color, config } from 'folds';
 
 export const SplashScreen = style({
   minHeight: '100%',
-  backgroundColor: color.Background.Container,
   color: color.Background.OnContainer,
 });
 

src/app/components/splash-screen/SplashScreen.tsx

@@ -21,7 +21,7 @@ export function SplashScreen({ children }: SplashScreenProps) {
         justifyContent="Center"
       >
         <Text size="H2" align="Center">
-          Lotus Chat
+          Cinny
         </Text>
       </Box>
     </Box>

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -182,27 +182,6 @@ export function UploadCardRenderer({
               <PreviewVideo fileItem={fileItem} />
             </MediaPreview>
           )}
-          {(fileItem.originalFile.type.startsWith('image') ||
-            fileItem.originalFile.type.startsWith('video')) && (
-            <input
-              type="text"
-              placeholder="Add a caption… (optional)"
-              value={metadata.caption ?? ''}
-              onChange={(e) => setMetadata(fileItem, { ...metadata, caption: e.target.value })}
-              style={{
-                marginTop: '6px',
-                width: '100%',
-                background: 'var(--bg-surface-low)',
-                border: '1px solid var(--bg-surface-border)',
-                borderRadius: '6px',
-                padding: '5px 8px',
-                fontSize: '0.85rem',
-                color: 'var(--text-primary)',
-                outline: 'none',
-                boxSizing: 'border-box',
-              }}
-            />
-          )}
           {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
             <UploadCardProgress sentBytes={0} totalBytes={file.size} />
           )}

src/app/components/url-preview/UrlPreview.css.tsx

@@ -23,11 +23,6 @@ export const UrlPreviewImg = style([
     objectPosition: 'center',
     flexShrink: 0,
     overflow: 'hidden',
-    cursor: 'pointer',
-
-    ':hover': {
-      filter: 'brightness(0.8)',
-    },
   },
 ]);
 

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
-import { ImageOverlay } from '../ImageOverlay';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';
@@ -13,8 +12,6 @@ import * as css from './UrlPreviewCard.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { ImageViewer } from '../image-viewer';
-import { onEnterOrSpace } from '../../utils/keyboard';
 
 const linkStyles = { color: color.Success.Main };
 
@@ -22,7 +19,6 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
   ({ url, ts, ...props }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const [viewer, setViewer] = useState(false);
     const [previewStatus, loadPreview] = useAsyncCallback(
       useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx])
     );
@@ -34,7 +30,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     if (previewStatus.status === AsyncStatus.Error) return null;
 
     const renderContent = (prev: IPreviewUrlResponse) => {
-      const thumbUrl = mxcUrlToHttp(
+      const imgUrl = mxcUrlToHttp(
         mx,
         prev['og:image'] || '',
         useAuthentication,
@@ -44,31 +40,9 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
         false
       );
 
-      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication);
-
       return (
         <>
-          {thumbUrl && (
+          {imgUrl && <UrlPreviewImg src={imgUrl} alt={prev['og:title']} title={prev['og:title']} />}
-            <UrlPreviewImg
-              src={thumbUrl}
-              alt={prev['og:title']}
-              title={prev['og:title']}
-              tabIndex={0}
-              onKeyDown={(evt) => onEnterOrSpace(() => setViewer(true))(evt)}
-              onClick={() => setViewer(true)}
-            />
-          )}
-          {imgUrl && (
-            <ImageOverlay
-              src={imgUrl}
-              alt={prev['og:title']}
-              viewer={viewer}
-              requestClose={() => {
-                setViewer(false);
-              }}
-              renderViewer={(p) => <ImageViewer {...p} />}
-            />
-          )}
           <UrlPreviewContent>
             <Text
               style={linkStyles}

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

@@ -28,11 +28,7 @@ import { copyToClipboard } from '../../utils/dom';
 import { getExploreServerPath } from '../../pages/pathUtils';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
-import {
+import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
-  useMutualRooms,
-  useMutualRoomsSupport,
-  useUnstableMutualRoomsSupport,
-} from '../../hooks/useMutualRooms';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -237,9 +233,7 @@ type MutualRoomsData = {
 export function MutualRoomsChip({ userId }: { userId: string }) {
   const mx = useMatrixClient();
   const mutualRoomSupported = useMutualRoomsSupport();
-  const mutualRoomUnstable = useUnstableMutualRoomsSupport();
   const mutualRoomsState = useMutualRooms(userId);
-  console.log(mutualRoomSupported, mutualRoomsState);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const closeUserRoomProfile = useCloseUserRoomProfile();
   const directs = useDirectRooms();
@@ -285,7 +279,7 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
 
   if (
     userId === mx.getSafeUserId() ||
-    (!mutualRoomSupported && !mutualRoomUnstable) ||
+    !mutualRoomSupported ||
     mutualRoomsState.status === AsyncStatus.Error
   ) {
     return null;

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

@@ -157,6 +157,7 @@ export function CallControl({
 }) {
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
   const setCallEmbed = useSetAtom(callEmbedAtom);
+
   const [hangupState, hangup] = useAsyncCallback(
     useCallback(() => callEmbed.hangup(), [callEmbed])
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Room } from 'matrix-js-sdk';
-import { Chip, Icon, Icons, Text } from 'folds';
+import { Chip, Text } from 'folds';
 import { useAtomValue } from 'jotai';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { RoomIcon } from '../../components/room-avatar';
@@ -36,13 +36,10 @@ export function CallRoomName({ room }: CallRoomNameProps) {
   return (
     <Chip
       variant="Background"
+      fill="None"
       radii="Pill"
       before={
-        dm ? (
+        <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
-          <Icon size="200" src={Icons.VolumeHigh} filled />
-        ) : (
-          <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
-        )
       }
       onClick={() => navigateRoom(room.roomId)}
     >

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

@@ -1,11 +1,9 @@
 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';
@@ -33,7 +31,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
 
   return (
     <Box
-      className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
+      className={css.CallStatus}
       shrink="No"
       gap="400"
       alignItems={compact ? undefined : 'Center'}

src/app/features/call/CallControls.tsx

@@ -1,8 +1,7 @@
-import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react';
+import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
 import {
   Box,
   Button,
-  Chip,
   config,
   Icon,
   IconButton,
@@ -27,8 +26,6 @@ import {
   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';
@@ -54,26 +51,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   );
 
   const [cords, setCords] = useState<RectCords>();
-  const [shareConfirm, setShareConfirm] = useState(false);
-  const [pttMode] = useSetting(settingsAtom, 'pttMode');
-  const [pttKey] = useSetting(settingsAtom, 'pttKey');
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
-  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());
@@ -94,64 +71,12 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     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}
@@ -159,82 +84,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
       justifyContent="Center"
       alignItems="Center"
     >
-      {pttMode && (
-        lotusTerminal ? (
-          <Box style={{
-            position: 'absolute',
-            top: '-2.5rem',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
-            border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
-            borderRadius: '99px',
-            padding: '0.2rem 0.9rem',
-            pointerEvents: 'none',
-            whiteSpace: 'nowrap',
-          }}>
-            <Text size="T200" style={{ color: pttActive ? '#00FF88' : '#FF6B00', fontWeight: 700, letterSpacing: '0.08em', fontFamily: 'JetBrains Mono, monospace' }}>
-              {pttActive ? '● LIVE' : `PTT — Hold ${pttKeyLabel}`}
-            </Text>
-          </Box>
-        ) : (
-          <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"
@@ -256,10 +105,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
             <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
             <ScreenShareButton
               enabled={screenshare}
-              onToggle={() => screenshare
+              onToggle={() => callEmbed.control.toggleScreenshare()}
-                ? callEmbed.control.toggleScreenshare()
-                : setShareConfirm(true)
-              }
             />
           </Box>
         </Box>

src/app/features/call/CallView.tsx

@@ -1,7 +1,6 @@
 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';
@@ -14,20 +13,11 @@ import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
-import { webRTCSupported } from '../../utils/rtc';
 
 function LivekitServerMissingMessage() {
   return (
     <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your homeserver does not support calling.
+      Your homeserver does not support calling. But you can still join call started by others.
-    </Text>
-  );
-}
-
-function WebRTCMissingError() {
-  return (
-    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your browser does not support WebRTC, which is required for calling.
     </Text>
   );
 }
@@ -35,22 +25,16 @@ function WebRTCMissingError() {
 function JoinMessage({
   hasParticipant,
   livekitSupported,
-  rtcSupported,
 }: {
   hasParticipant?: boolean;
   livekitSupported?: boolean;
-  rtcSupported?: boolean;
 }) {
-  if (rtcSupported === false) {
+  if (hasParticipant) return null;
-    return <WebRTCMissingError />;
-  }
 
   if (livekitSupported === false) {
     return <LivekitServerMissingMessage />;
   }
 
-  if (hasParticipant) return null;
-
   return (
     <Text style={{ margin: 'auto' }} size="L400" align="Center">
       Voice chat’s empty — Be the first to hop in!
@@ -78,16 +62,12 @@ function CallPrescreen() {
   const mx = useMatrixClient();
   const room = useRoom();
   const livekitSupported = useLivekitSupport();
-  const rtcSupported = webRTCSupported();
 
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const hasPermission = permissions.stateEvent(
+  const hasPermission = permissions.event(StateEvent.GroupCallMemberPrefix, mx.getSafeUserId());
-    StateEvent.GroupCallMemberPrefix,
-    mx.getSafeUserId()
-  );
 
   const callSession = useCallSession(room);
   const callMembers = useCallMembers(room, callSession);
@@ -96,7 +76,7 @@ function CallPrescreen() {
   const callEmbed = useCallEmbed();
   const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
 
-  const canJoin = hasPermission && livekitSupported && rtcSupported;
+  const canJoin = hasPermission && (livekitSupported || hasParticipant);
 
   return (
     <Scroll variant="Surface" hideTrack>
@@ -119,11 +99,7 @@ function CallPrescreen() {
           <Box className={css.PrescreenMessage} alignItems="Center">
             {!inOtherCall &&
               (hasPermission ? (
-                <JoinMessage
+                <JoinMessage hasParticipant={hasParticipant} livekitSupported={livekitSupported} />
-                  hasParticipant={hasParticipant}
-                  livekitSupported={livekitSupported}
-                  rtcSupported={rtcSupported}
-                />
               ) : (
                 <NoPermissionMessage />
               ))}
@@ -161,11 +137,7 @@ export function CallView() {
   const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
 
   return (
-    <Box
+    <Box style={{ minWidth: toRem(280) }} grow="Yes">
-      className={ContainerColor({ variant: 'Surface' })}
-      style={{ minWidth: toRem(280) }}
-      grow="Yes"
-    >
       {!currentJoined && <CallPrescreen />}
       <CallJoined joined={currentJoined} containerRef={callContainerRef} />
     </Box>

src/app/features/call/Controls.tsx

@@ -53,7 +53,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
       delay={500}
       tooltip={
         <Tooltip>
-          <Text size="T200">{enabled ? 'Deafen' : 'Undeafen'}</Text>
+          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
         </Tooltip>
       }
     >

src/app/features/call/PrescreenControls.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
@@ -7,28 +7,6 @@ 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;
 };
@@ -43,10 +21,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
   const startCall = useCallStart(direct);
   const joining = callEmbed?.roomId === room.roomId && !callJoined;
 
-  const micPermission = useMediaPermissions();
+  const disabled = inOtherCall || !canJoin;
-  const micDenied = micPermission === 'denied';
-
-  const disabled = inOtherCall || !canJoin || micDenied;
 
   const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
     useCallPreferences();
@@ -70,12 +45,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
         <VideoButton enabled={video} onToggle={toggleVideo} />
         <ChatButton />
       </Box>
-      <Box grow="Yes" direction="Column" gap="200">
+      <Box grow="Yes" direction="Column">
-        {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'}

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

@@ -21,7 +21,6 @@ export const CallMemberCard = style({
 
 export const CallControlContainer = style({
   padding: config.space.S400,
-  position: 'relative',
 });
 
 export const PrescreenMessage = style({

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

@@ -213,6 +213,7 @@ export function CreateRoomForm({
           <Text size="L400">Options</Text>
           <Box grow="Yes" justifyContent="End">
             <Chip
+              fill="None"
               radii="Pill"
               before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
               onClick={() => setAdvance(!advance)}

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

@@ -180,6 +180,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
           <Box grow="Yes" justifyContent="End">
             <Chip
               radii="Pill"
+              fill="None"
               before={<Icon src={advance ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
               onClick={() => setAdvance(!advance)}
               type="button"

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -10,6 +10,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useTheme } from '../../hooks/useTheme';
 
 type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
 export function JoinBeforeNavigate({
@@ -21,6 +22,7 @@ export function JoinBeforeNavigate({
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   const handleView = (roomId: string) => {
     if (mx.getRoom(roomId)?.isSpaceRoom()) {
@@ -31,7 +33,7 @@ export function JoinBeforeNavigate({
   };
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box shrink="No">

src/app/features/lobby/Lobby.tsx

@@ -56,6 +56,7 @@ import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
+import { useTheme } from '../../hooks/useTheme';
 
 const useCanDropLobbyItem = (
   space: Room,
@@ -151,6 +152,7 @@ const useCanDropLobbyItem = (
 export function Lobby() {
   const navigate = useNavigate();
   const mx = useMatrixClient();
+  const theme = useTheme();
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
@@ -430,7 +432,7 @@ export function Lobby() {
   return (
     <PowerLevelsContextProvider value={spacePowerLevels}>
       <Box grow="Yes">
-        <Page>
+        <Page transparent={theme.flat}>
           <LobbyHeader
             showProfile={!onTop}
             powerLevels={roomsPowerLevels.get(space.roomId) ?? {}}

src/app/features/lobby/SpaceItem.tsx

@@ -64,6 +64,7 @@ function InaccessibleSpaceProfile({ roomId, suggested }: InaccessibleSpaceProfil
       as="span"
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       before={
         <Avatar size="200" radii="300">
@@ -121,6 +122,7 @@ function UnjoinedSpaceProfile({
     <Chip
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       onClick={join}
       disabled={!canJoin}
@@ -187,6 +189,7 @@ function SpaceProfile({
       onClick={handleClose}
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       before={
         <Avatar size="200" radii="300">
@@ -230,6 +233,7 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP
       onClick={handleClose}
       className={css.HeaderChip}
       variant="Surface"
+      fill="None"
       size="500"
       after={<Icon src={closed ? Icons.ChevronRight : Icons.ChevronBottom} size="50" />}
     >

src/app/features/lotus/chatBackground.ts

@@ -1,278 +0,0 @@
-import { CSSProperties } from 'react';
-import { ChatBackground } from '../../state/settings';
-
-export const BG_OPTIONS: { value: ChatBackground; label: string }[] = [
-  { value: 'none', label: 'None' },
-  { value: 'blueprint', label: 'Blueprint' },
-  { value: 'carbon', label: 'Carbon' },
-  { value: 'stars', label: 'Stars' },
-  { value: 'topographic', label: 'Topographic' },
-  { value: 'herringbone', label: 'Herringbone' },
-  { value: 'crosshatch', label: 'Crosshatch' },
-  { value: 'chevron', label: 'Chevron' },
-  { value: 'polka', label: 'Polka' },
-  { value: 'triangles', label: 'Triangles' },
-  { value: 'plaid', label: 'Plaid' },
-  { value: 'tactical', label: 'Tactical' },
-  { value: 'circuit', label: 'Circuit' },
-  { value: 'hexgrid', label: 'Hex Grid' },
-];
-
-const DARK: Record<ChatBackground, CSSProperties> = {
-  none: {},
-
-  blueprint: {
-    backgroundColor: '#0a1628',
-    backgroundImage: [
-      'linear-gradient(rgba(100,149,237,0.14) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(100,149,237,0.14) 1px, transparent 1px)',
-      'linear-gradient(rgba(100,149,237,0.05) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(100,149,237,0.05) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px',
-  },
-
-  carbon: {
-    backgroundColor: '#0e0e0e',
-    backgroundImage: [
-      'repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 0, transparent 50%)',
-      'repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 0, transparent 50%)',
-    ].join(','),
-    backgroundSize: '8px 8px',
-  },
-
-  stars: {
-    backgroundColor: '#050510',
-    backgroundImage: [
-      'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '130px 130px, 190px 190px, 260px 260px',
-    backgroundPosition: '0 0, 65px 32px, 32px 97px',
-  },
-
-  topographic: {
-    backgroundColor: '#0f0f17',
-    backgroundImage: [
-      'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(152,0,0,0.07) 31px, transparent 32px)',
-      'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(100,100,200,0.06) 26px, transparent 27px)',
-      'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(152,0,0,0.04) 46px, transparent 47px)',
-    ].join(','),
-  },
-
-  herringbone: {
-    backgroundColor: '#111118',
-    backgroundImage: [
-      'repeating-linear-gradient(60deg, rgba(180,160,210,0.08) 0, rgba(180,160,210,0.08) 1px, transparent 0, transparent 50%)',
-      'repeating-linear-gradient(120deg, rgba(180,160,210,0.08) 0, rgba(180,160,210,0.08) 1px, transparent 0, transparent 50%)',
-    ].join(','),
-    backgroundSize: '20px 36px',
-  },
-
-  crosshatch: {
-    backgroundColor: '#0f0f0f',
-    backgroundImage: [
-      'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
-      'linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
-  },
-
-  // Interlocking zigzag stripes
-  chevron: {
-    backgroundColor: '#0f0f17',
-    backgroundImage: [
-      'linear-gradient(135deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
-      'linear-gradient(225deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
-      'linear-gradient(315deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
-      'linear-gradient(45deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
-    ].join(','),
-    backgroundSize: '20px 20px',
-  },
-
-  // Even dot grid
-  polka: {
-    backgroundColor: '#0e0e14',
-    backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.2) 2px, transparent 2px)',
-    backgroundSize: '28px 28px',
-  },
-
-  // Isometric triangle grid
-  triangles: {
-    backgroundColor: '#111118',
-    backgroundImage: [
-      'linear-gradient(60deg, rgba(100,149,237,0.09) 25%, transparent 25%, transparent 75%, rgba(100,149,237,0.09) 75%)',
-      'linear-gradient(120deg, rgba(100,149,237,0.09) 25%, transparent 25%, transparent 75%, rgba(100,149,237,0.09) 75%)',
-    ].join(','),
-    backgroundSize: '40px 70px',
-    backgroundPosition: '0 0, 20px 35px',
-  },
-
-  // Tartan-inspired crossing lines with accent colour
-  plaid: {
-    backgroundColor: '#0a1020',
-    backgroundImage: [
-      'repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100,149,237,0.13) 39px, rgba(100,149,237,0.13) 40px)',
-      'repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100,149,237,0.13) 39px, rgba(100,149,237,0.13) 40px)',
-      'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(152,0,0,0.08) 7px, rgba(152,0,0,0.08) 8px)',
-      'repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(152,0,0,0.08) 7px, rgba(152,0,0,0.08) 8px)',
-    ].join(','),
-  },
-
-  // LotusGuild TDS exact dot-grid
-  tactical: {
-    backgroundColor: '#030508',
-    backgroundImage: 'radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px)',
-    backgroundSize: '28px 28px',
-  },
-
-  // Circuit board — green grid with node dots
-  circuit: {
-    backgroundColor: '#040a04',
-    backgroundImage: [
-      'linear-gradient(rgba(0,255,136,0.045) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(0,255,136,0.045) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(0,255,136,0.20) 1.5px, transparent 1.5px)',
-    ].join(','),
-    backgroundSize: '40px 40px, 40px 40px, 40px 40px',
-    backgroundPosition: '0 0, 0 0, 20px 20px',
-  },
-
-  // True pointy-top hexagonal grid via SVG data URI
-  hexgrid: {
-    backgroundColor: '#060c14',
-    backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C212%2C255%2C0.13%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
-    backgroundSize: '29px 50px',
-  },
-};
-
-const LIGHT: Record<ChatBackground, CSSProperties> = {
-  none: {},
-
-  blueprint: {
-    backgroundColor: '#eef3ff',
-    backgroundImage: [
-      'linear-gradient(rgba(50,100,220,0.16) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(50,100,220,0.16) 1px, transparent 1px)',
-      'linear-gradient(rgba(50,100,220,0.06) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(50,100,220,0.06) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px',
-  },
-
-  carbon: {
-    backgroundColor: '#efefef',
-    backgroundImage: [
-      'repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 2px, transparent 0, transparent 50%)',
-      'repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 2px, transparent 0, transparent 50%)',
-    ].join(','),
-    backgroundSize: '8px 8px',
-  },
-
-  // Stars is intentionally always dark — it's a night-sky theme
-  stars: {
-    backgroundColor: '#050510',
-    backgroundImage: [
-      'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '130px 130px, 190px 190px, 260px 260px',
-    backgroundPosition: '0 0, 65px 32px, 32px 97px',
-  },
-
-  topographic: {
-    backgroundColor: '#faf8f5',
-    backgroundImage: [
-      'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(100,60,60,0.09) 31px, transparent 32px)',
-      'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(60,60,130,0.07) 26px, transparent 27px)',
-      'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(100,60,60,0.05) 46px, transparent 47px)',
-    ].join(','),
-  },
-
-  herringbone: {
-    backgroundColor: '#f9f9f9',
-    backgroundImage: [
-      'repeating-linear-gradient(60deg, rgba(80,70,110,0.09) 0, rgba(80,70,110,0.09) 1px, transparent 0, transparent 50%)',
-      'repeating-linear-gradient(120deg, rgba(80,70,110,0.09) 0, rgba(80,70,110,0.09) 1px, transparent 0, transparent 50%)',
-    ].join(','),
-    backgroundSize: '20px 36px',
-  },
-
-  crosshatch: {
-    backgroundColor: '#ffffff',
-    backgroundImage: [
-      'linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px)',
-      'linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px)',
-    ].join(','),
-    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
-  },
-
-  chevron: {
-    backgroundColor: '#f9f8ff',
-    backgroundImage: [
-      'linear-gradient(135deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
-      'linear-gradient(225deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
-      'linear-gradient(315deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
-      'linear-gradient(45deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
-    ].join(','),
-    backgroundSize: '20px 20px',
-  },
-
-  polka: {
-    backgroundColor: '#fafafa',
-    backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.18) 2px, transparent 2px)',
-    backgroundSize: '28px 28px',
-  },
-
-  triangles: {
-    backgroundColor: '#f4f7ff',
-    backgroundImage: [
-      'linear-gradient(60deg, rgba(50,100,220,0.1) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.1) 75%)',
-      'linear-gradient(120deg, rgba(50,100,220,0.1) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.1) 75%)',
-    ].join(','),
-    backgroundSize: '40px 70px',
-    backgroundPosition: '0 0, 20px 35px',
-  },
-
-  plaid: {
-    backgroundColor: '#f5f0ff',
-    backgroundImage: [
-      'repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100,50,180,0.15) 39px, rgba(100,50,180,0.15) 40px)',
-      'repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100,50,180,0.15) 39px, rgba(100,50,180,0.15) 40px)',
-      'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(200,0,0,0.09) 7px, rgba(200,0,0,0.09) 8px)',
-      'repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(200,0,0,0.09) 7px, rgba(200,0,0,0.09) 8px)',
-    ].join(','),
-  },
-
-  tactical: {
-    backgroundColor: '#f0f4fa',
-    backgroundImage: 'radial-gradient(circle, rgba(0,100,200,0.08) 1px, transparent 1px)',
-    backgroundSize: '28px 28px',
-  },
-
-  circuit: {
-    backgroundColor: '#f0f8f0',
-    backgroundImage: [
-      'linear-gradient(rgba(0,160,80,0.06) 1px, transparent 1px)',
-      'linear-gradient(90deg, rgba(0,160,80,0.06) 1px, transparent 1px)',
-      'radial-gradient(circle, rgba(0,160,80,0.22) 1.5px, transparent 1.5px)',
-    ].join(','),
-    backgroundSize: '40px 40px, 40px 40px, 40px 40px',
-    backgroundPosition: '0 0, 0 0, 20px 20px',
-  },
-
-  hexgrid: {
-    backgroundColor: '#f4f8ff',
-    backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%2850%2C100%2C220%2C0.11%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
-    backgroundSize: '29px 50px',
-  },
-};
-
-export const getChatBg = (bg: ChatBackground, isDark: boolean): CSSProperties =>
-  isDark ? DARK[bg] : LIGHT[bg];

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

@@ -9,6 +9,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
       className={classNames(css.CategoryButton, className)}
       variant="Background"
       radii="Pill"
+      fill="None"
       before={
         <Icon
           className={css.CategoryButtonIcon}

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

@@ -23,12 +23,12 @@ import { useAtom, useAtomValue } from 'jotai';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl, getStateEvent } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { getPowersLevelFromMatrixEvent, usePowerLevels } from '../../hooks/usePowerLevels';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../utils/notifications';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -49,8 +49,8 @@ import {
   RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
-import { getRoomCreatorsForRoomId, useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
@@ -59,8 +59,6 @@ import { callChatAtom } from '../../state/callEmbed';
 import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
 import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '../../hooks/useLivekitSupport';
-import { StateEvent } from '../../../types/matrix/room';
-import { webRTCSupported } from '../../utils/rtc';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -289,18 +287,8 @@ export function RoomNavItem({
   const autoDiscoveryInfo = useAutoDiscoveryInfo();
 
   const handleStartCall: MouseEventHandler<HTMLAnchorElement> = (evt) => {
-    const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
+    // Do not join if no livekit support or call is not started by others
-    const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
+    if (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0) {
-    const creators = getRoomCreatorsForRoomId(mx, room.roomId);
-    const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
-    const hasCallPermission = permissions.stateEvent(
-      StateEvent.GroupCallMemberPrefix,
-      mx.getSafeUserId()
-    );
-
-    // Do not join if missing permissions or no livekit support or no webRTC support
-    if (!hasCallPermission || !livekitSupport(autoDiscoveryInfo) || !webRTCSupported()) {
       return;
     }
 
@@ -379,7 +367,7 @@ export function RoomNavItem({
                 aria-label={notificationMode}
               />
             )}
-            {callMembers.length > 0 && (
+            {room.isCallRoom() && callMembers.length > 0 && (
               <Badge variant="Critical" fill="Solid" size="400">
                 <Text as="span" size="L400" truncate>
                   {callMembers.length} Live

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

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

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
 import { PermissionGroup } from '../../common-settings/permissions';
 
-export const usePermissionGroups = (): PermissionGroup[] => {
+export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
   const groups: PermissionGroup[] = useMemo(() => {
     const messagesGroup: PermissionGroup = {
       name: 'Messages',
@@ -54,7 +54,7 @@ export const usePermissionGroups = (): PermissionGroup[] => {
             state: true,
             key: StateEvent.GroupCallMemberPrefix,
           },
-          name: 'Start or Join Call',
+          name: 'Join Call',
         },
       ],
     };
@@ -216,13 +216,13 @@ export const usePermissionGroups = (): PermissionGroup[] => {
 
     return [
       messagesGroup,
-      callSettingsGroup,
+      ...(isCallRoom ? [callSettingsGroup] : []),
       moderationGroup,
       roomOverviewGroup,
       roomSettingsGroup,
       otherSettingsGroup,
     ];
-  }, []);
+  }, [isCallRoom]);
 
   return groups;
 };

src/app/features/room/CallChatView.tsx

@@ -6,9 +6,11 @@ import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';
 import { RoomView } from './RoomView';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { useTheme } from '../../hooks/useTheme';
 
 export function CallChatView() {
   const { eventId } = useParams();
+  const theme = useTheme();
   const setChat = useSetAtom(callChatAtom);
   const screenSize = useScreenSizeContext();
 
@@ -16,6 +18,7 @@ export function CallChatView() {
 
   return (
     <Page
+      transparent={theme.flat}
       style={{
         width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
         flexShrink: 0,
@@ -41,7 +44,7 @@ export function CallChatView() {
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
+                <IconButton ref={triggerRef} variant="Surface" fill="None" onClick={handleClose}>
                   <Icon src={Icons.Cross} />
                 </IconButton>
               )}

src/app/features/room/MembersDrawer.tsx

@@ -56,7 +56,6 @@ import { MembershipFilterMenu } from '../../components/MembershipFilterMenu';
 import { MemberSortMenu } from '../../components/MemberSortMenu';
 import { useOpenUserRoomProfile, useUserRoomProfileState } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 
@@ -89,6 +88,7 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
               <IconButton
                 ref={triggerRef}
                 variant="Background"
+                fill="None"
                 onClick={() => setPeopleDrawer(false)}
               >
                 <Icon src={Icons.Cross} />
@@ -132,6 +132,7 @@ function MemberItem({
       aria-pressed={pressed}
       data-user-id={member.userId}
       variant="Background"
+      fill="None"
       radii="400"
       onClick={onClick}
       before={
@@ -245,11 +246,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   };
 
   return (
-    <Box
+    <Box className={classNames(css.MembersDrawer)} shrink="No" direction="Column">
-      className={classNames(css.MembersDrawer, ContainerColor({ variant: 'Background' }))}
-      shrink="No"
-      direction="Column"
-    >
       <MemberDrawerHeader room={room} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
@@ -279,6 +276,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
+                        fill="None"
                         size="400"
                         radii="300"
                         before={<Icon src={Icons.Filter} size="50" />}
@@ -311,6 +309,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
+                        fill="None"
                         size="400"
                         radii="300"
                         after={<Icon src={Icons.Sort} size="50" />}

src/app/features/room/Room.tsx

@@ -9,7 +9,7 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
-import { useRoom, useIsDirectRoom } from '../../hooks/useRoom';
+import { useRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -18,17 +18,14 @@ import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
 import { callChatAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';
-import { useCallEmbed } from '../../hooks/useCallEmbed';
+import { Page } from '../../components/page';
-import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useTheme } from '../../hooks/useTheme';
 
 export function Room() {
   const { eventId } = useParams();
   const room = useRoom();
   const mx = useMatrixClient();
-
+  const theme = useTheme();
-  const callSession = useCallSession(room);
-  const callMembers = useCallMembers(room, callSession);
-  const callEmbed = useCallEmbed();
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -36,7 +33,6 @@ export function Room() {
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room.roomId);
   const chat = useAtomValue(callChatAtom);
-  const isDirect = useIsDirectRoom();
 
   useKeyDown(
     window,
@@ -50,26 +46,26 @@ export function Room() {
     )
   );
 
-  const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;
+  const callView = room.isCallRoom();
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
         {callView && (screenSize === ScreenSize.Desktop || !chat) && (
-          <Box grow="Yes" direction="Column">
+          <Page transparent={theme.flat}>
             <RoomViewHeader callView />
             <Box grow="Yes">
               <CallView />
             </Box>
-          </Box>
+          </Page>
         )}
         {!callView && (
-          <Box grow="Yes" direction="Column">
+          <Page transparent={theme.flat}>
             <RoomViewHeader />
             <Box grow="Yes">
               <RoomView eventId={eventId} />
             </Box>
-          </Box>
+          </Page>
         )}
 
         {callView && chat && (

src/app/features/room/RoomInput.tsx

@@ -30,8 +30,6 @@ import {
 } from 'folds';
 
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { GifPicker } from '../../components/GifPicker';
-import { useClientConfig } from '../../hooks/useClientConfig';
 import {
   CustomEditor,
   Toolbar,
@@ -173,26 +171,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
 
     const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
-    const [locating, setLocating] = React.useState(false);
-    const handleShareLocation = () => {
-      if (!navigator.geolocation) return;
-      setLocating(true);
-      navigator.geolocation.getCurrentPosition(
-        (pos) => {
-          setLocating(false);
-          const { latitude, longitude } = pos.coords;
-          const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
-          mx.sendMessage(roomId, {
-            msgtype: 'm.location',
-            body: `Location: ${geoUri}`,
-            geo_uri: geoUri,
-          } as any);
-        },
-        () => setLocating(false),
-        { timeout: 10000 }
-      );
-    };
-
     const [autocompleteQuery, setAutocompleteQuery] =
       useState<AutocompleteQuery<AutocompletePrefix>>();
 
@@ -238,8 +216,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const pickFile = useFilePicker(handleFiles, true);
     const handlePaste = useFilePasteHandler(handleFiles);
     const dropZoneVisible = useFileDropZone(fileDropContainerRef, handleFiles);
-    const { gifApiKey } = useClientConfig();
-    const gifBtnRef = useRef<HTMLButtonElement>(null);
     const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);
 
     const isComposing = useComposingCheck();
@@ -454,30 +430,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       moveCursor(editor);
     };
 
-    const handleGifSelect = useCallback(
-      async (gifUrl: string, w: number, h: number) => {
-        try {
-          const res = await fetch(gifUrl);
-          const blob = await res.blob();
-          const uploadRes = await mx.uploadContent(
-            new File([blob], 'image.gif', { type: 'image/gif' }),
-            { type: 'image/gif', name: 'image.gif', includeFilename: false }
-          );
-          const mxcUrl = (uploadRes as any).content_uri;
-          if (!mxcUrl) return;
-          mx.sendMessage(roomId, {
-            msgtype: MsgType.Image,
-            body: 'image.gif',
-            url: mxcUrl,
-            info: { mimetype: 'image/gif', w, h, size: blob.size },
-          });
-        } catch (e) {
-          console.error('GIF send failed', e);
-        }
-      },
-      [mx, roomId]
-    );
-
     const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
       const stickerUrl = mxcUrlToHttp(mx, mxc, useAuthentication);
       if (!stickerUrl) return;
@@ -717,67 +669,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   </PopOut>
                 )}
               </UseStateProvider>
-              {!!gifApiKey && (
-                <UseStateProvider initial={false}>
-                  {(gifOpen: boolean, setGifOpen) => (
-                    <PopOut
-                      offset={16}
-                      alignOffset={-44}
-                      position="Top"
-                      align="End"
-                      anchor={
-                        gifOpen
-                          ? gifBtnRef.current?.getBoundingClientRect() ?? undefined
-                          : undefined
-                      }
-                      content={
-                        <GifPicker
-                          apiKey={gifApiKey}
-                          onSelect={handleGifSelect}
-                          requestClose={() => setGifOpen(false)}
-                        />
-                      }
-                    >
-                      <IconButton
-                        ref={gifBtnRef}
-                        aria-pressed={gifOpen}
-                        onClick={() => setGifOpen(!gifOpen)}
-                        variant="SurfaceVariant"
-                        size="300"
-                        radii="300"
-                      >
-                        <Text
-                          size="T200"
-                          style={{
-                            fontWeight: 800,
-                            fontSize: '11px',
-                            letterSpacing: '0.04em',
-                            lineHeight: 1,
-                          }}
-                        >
-                          GIF
-                        </Text>
-                      </IconButton>
-                    </PopOut>
-                  )}
-                </UseStateProvider>
-              )}
-              <IconButton
-                onClick={handleShareLocation}
-                variant="SurfaceVariant"
-                size="300"
-                radii="300"
-                aria-label="Share location"
-                title="Share location"
-              >
-                {locating ? (
-                  <Text size="T200" style={{ fontWeight: 800, fontSize: '10px', letterSpacing: '0.04em', lineHeight: 1 }}>
-                    ...
-                  </Text>
-                ) : (
-                  <Icon src={Icons.Pin} size="100" />
-                )}
-              </IconButton>
               <IconButton onClick={submit} variant="SurfaceVariant" size="300" radii="300">
                 <Icon src={Icons.Send} />
               </IconButton>

src/app/features/room/RoomTimeline.tsx

@@ -63,7 +63,6 @@ import {
   MessageNotDecryptedContent,
   RedactedContent,
   MSticker,
-  PollContent,
   ImageContent,
   EventContent,
 } from '../../components/message';
@@ -437,7 +436,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const useAuthentication = useMediaAuthentication();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
-  const [perMessageProfiles] = useSetting(settingsAtom, 'perMessageProfiles');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
   const direct = useIsDirectRoom();
@@ -1218,11 +1216,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                     />
                   );
                 }
-                if (
-                  mEvent.getType() === 'm.poll.start' ||
-                  mEvent.getType() === 'org.matrix.msc3381.poll.start'
-                )
-                  return <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />;
                 if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
                   return (
                     <Text>
@@ -1303,112 +1296,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           </Message>
         );
       },
-      'org.matrix.msc3381.poll.start': (mEventId, mEvent, item, timelineSet, collapse) => {
-        const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
-        const hasReactions = reactions && reactions.length > 0;
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        return (
-          <Message
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            messageSpacing={messageSpacing}
-            messageLayout={messageLayout}
-            collapse={collapse}
-            highlight={highlighted}
-            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
-            canSendReaction={canSendReaction}
-            canPinEvent={canPinEvent}
-            imagePackRooms={imagePackRooms}
-            relations={hasReactions ? reactionRelations : undefined}
-            onUserClick={handleUserClick}
-            onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
-            onReactionToggle={handleReactionToggle}
-            reactions={
-              reactionRelations && (
-                <Reactions
-                  style={{ marginTop: config.space.S200 }}
-                  room={room}
-                  relations={reactionRelations}
-                  mEventId={mEventId}
-                  canSendReaction={canSendReaction}
-                  onReactionToggle={handleReactionToggle}
-                />
-              )
-            }
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
-            accessibleTagColors={accessiblePowerTagColors}
-            legacyUsernameColor={legacyUsernameColor || direct}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          >
-            {mEvent.isRedacted() ? (
-              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
-            ) : (
-              <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />
-            )}
-          </Message>
-        );
-      },
-      'm.poll.start': (mEventId, mEvent, item, timelineSet, collapse) => {
-        const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
-        const hasReactions = reactions && reactions.length > 0;
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        return (
-          <Message
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            messageSpacing={messageSpacing}
-            messageLayout={messageLayout}
-            collapse={collapse}
-            highlight={highlighted}
-            canDelete={canRedact || (canDeleteOwn && mEvent.getSender() === mx.getUserId())}
-            canSendReaction={canSendReaction}
-            canPinEvent={canPinEvent}
-            imagePackRooms={imagePackRooms}
-            relations={hasReactions ? reactionRelations : undefined}
-            onUserClick={handleUserClick}
-            onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
-            onReactionToggle={handleReactionToggle}
-            reactions={
-              reactionRelations && (
-                <Reactions
-                  style={{ marginTop: config.space.S200 }}
-                  room={room}
-                  relations={reactionRelations}
-                  mEventId={mEventId}
-                  canSendReaction={canSendReaction}
-                  onReactionToggle={handleReactionToggle}
-                />
-              )
-            }
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
-            accessibleTagColors={accessiblePowerTagColors}
-            legacyUsernameColor={legacyUsernameColor || direct}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          >
-            {mEvent.isRedacted() ? (
-              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
-            ) : (
-              <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />
-            )}
-          </Message>
-        );
-      },
       [StateEvent.RoomMember]: (mEventId, mEvent, item) => {
         const membershipChanged = isMembershipChanged(mEvent);
         if (membershipChanged && hideMembershipEvents) return null;
@@ -1751,14 +1638,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       return null;
     }
     if (mEvent.isRedacted() && !showHiddenEvents) {
-      const t = mEvent.getType();
+      return null;
-      if (
-        t !== MessageEvent.RoomMessage &&
-        t !== MessageEvent.RoomMessageEncrypted &&
-        t !== MessageEvent.Sticker
-      ) {
-        return null;
-      }
     }
 
     if (!newDivider && readUptoEventIdRef.current) {
@@ -1769,7 +1649,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
 
     const collapsed =
-      !perMessageProfiles &&
       isPrevRendered &&
       !dayDivider &&
       (!newDivider || eventSender === mx.getUserId()) &&

src/app/features/room/RoomView.tsx

@@ -14,11 +14,6 @@ import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
-import { Page } from '../../components/page';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
-import { useTheme, ThemeKind } from '../../hooks/useTheme';
-import { getChatBg } from '../lotus/chatBackground';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
@@ -58,14 +53,9 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
-
-
 export function RoomView({ eventId }: { eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
-  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
-  const theme = useTheme();
-  const isDark = theme.kind === ThemeKind.Dark;
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
@@ -100,7 +90,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef} style={getChatBg(chatBackground, isDark)}>
+    <Box grow="Yes" direction="Column" ref={roomViewRef}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}
@@ -144,6 +134,6 @@ export function RoomView({ eventId }: { eventId?: string }) {
         </div>
         {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
-    </Page>
+    </Box>
   );
 }

src/app/features/room/RoomViewFollowing.css.ts

@@ -16,8 +16,6 @@ export const RoomViewFollowing = recipe({
       minHeight: toRem(28),
       padding: `0 ${config.space.S400}`,
       width: '100%',
-      backgroundColor: color.Surface.Container,
-      color: color.Surface.OnContainer,
       outline: 'none',
     },
   ],

src/app/features/room/RoomViewHeader.tsx

@@ -21,7 +21,6 @@ import {
   RectCords,
   Badge,
   Spinner,
-  Button,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { Room } from 'matrix-js-sdk';
@@ -33,7 +32,6 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { StateEvent } from '../../../types/matrix/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
-import { useCallStart } from '../../hooks/useCallEmbed';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
@@ -68,11 +66,7 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { RoomSettingsPage } from '../../state/roomSettings';
-import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
-import { useLivekitSupport } from '../../hooks/useLivekitSupport';
-import { webRTCSupported } from '../../utils/rtc';
 
 type RoomMenuProps = {
   room: Room;
@@ -258,132 +252,6 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
-type CallMenuProps = {
-  onVoiceCall: () => void;
-  onVideoCall: () => void;
-  requestClose: () => void;
-};
-const CallMenu = forwardRef<HTMLDivElement, CallMenuProps>(
-  ({ requestClose, onVoiceCall, onVideoCall }, ref) => {
-    const handleVoice = () => {
-      onVoiceCall();
-      requestClose();
-    };
-    const handleVideo = () => {
-      onVideoCall();
-      requestClose();
-    };
-
-    return (
-      <Menu ref={ref} style={{ padding: config.space.S200, minWidth: toRem(150) }}>
-        <Box direction="Column" gap="200">
-          <Text size="L400">Start Call</Text>
-          <Box direction="Column" gap="200">
-            <Button
-              size="300"
-              variant="Success"
-              fill="Soft"
-              outlined
-              radii="300"
-              before={<Icon size="100" src={Icons.Phone} filled />}
-              onClick={handleVoice}
-            >
-              <Text size="B300">Voice</Text>
-            </Button>
-            <Button
-              size="300"
-              variant="Success"
-              radii="300"
-              before={<Icon size="100" src={Icons.VideoCamera} filled />}
-              onClick={handleVideo}
-            >
-              <Text size="B300">Video</Text>
-            </Button>
-          </Box>
-        </Box>
-      </Menu>
-    );
-  }
-);
-
-function CallButton() {
-  const room = useRoom();
-  const direct = useIsDirectRoom();
-
-  const callEmbed = useCallEmbed();
-  const startCall = useCallStart(direct);
-  const callStarted = callEmbed && callEmbed.roomId === room.roomId;
-  const inAnotherCall = callEmbed && !callStarted;
-  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
-  };
-
-  return (
-    <>
-      <TooltipProvider
-        position="Bottom"
-        offset={4}
-        tooltip={
-          <Tooltip>
-            {inAnotherCall ? (
-              <Text size="L400">Already in another call — End the current call to join!</Text>
-            ) : (
-              <Text>Call</Text>
-            )}
-          </Tooltip>
-        }
-      >
-        {(triggerRef) => (
-          <IconButton
-            variant="Surface"
-            fill="None"
-            ref={triggerRef}
-            onClick={handleOpenMenu}
-            onContextMenu={(evt) => {
-              evt.preventDefault();
-              startCall(room, {
-                microphone: true,
-                video: true,
-                sound: true,
-              });
-            }}
-            disabled={inAnotherCall || callStarted}
-            aria-pressed={!!menuAnchor}
-          >
-            <Icon size="400" src={Icons.VideoCamera} filled={!!menuAnchor} />
-          </IconButton>
-        )}
-      </TooltipProvider>
-      <PopOut
-        anchor={menuAnchor}
-        position="Bottom"
-        align="Center"
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              returnFocusOnDeactivate: false,
-              onDeactivate: () => setMenuAnchor(undefined),
-              clickOutsideDeactivates: true,
-              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <CallMenu
-              onVideoCall={() => startCall(room, { microphone: true, video: true, sound: true })}
-              onVoiceCall={() => startCall(room, { microphone: true, video: false, sound: true })}
-              requestClose={() => setMenuAnchor(undefined)}
-            />
-          </FocusTrap>
-        }
-      />
-    </>
-  );
-}
-
 export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const navigate = useNavigate();
   const mx = useMatrixClient();
@@ -391,21 +259,9 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const screenSize = useScreenSizeContext();
   const room = useRoom();
   const space = useSpaceOptionally();
-  const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
-  const permissions = useRoomPermissions(creators, powerLevels);
-
-  const hasCallPermission = permissions.stateEvent(
-    StateEvent.GroupCallMemberPrefix,
-    mx.getSafeUserId()
-  );
-  const livekitSupported = useLivekitSupport();
-  const rtcSupported = webRTCSupported();
-
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const direct = useIsDirectRoom();
-  const startCall = useCallStart(true);
 
   const pinnedEvents = useRoomPinnedEvents(room);
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
@@ -448,10 +304,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   };
 
   return (
-    <PageHeader
+    <PageHeader balance={screenSize === ScreenSize.Mobile}>
-      className={ContainerColor({ variant: 'Surface' })}
-      balance={screenSize === ScreenSize.Mobile}
-    >
       <Box grow="Yes" gap="300">
         {screenSize === ScreenSize.Mobile && (
           <BackRouteHandler>
@@ -522,23 +375,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
         </Box>
 
         <Box shrink="No">
-          {direct && !callView && (
-            <TooltipProvider
-              position="Bottom"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Start Call</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton fill="None" ref={triggerRef} onClick={() => startCall(room)}>
-                  <Icon size="400" src={Icons.Phone} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          )}
           {!encryptedRoom && (
             <TooltipProvider
               position="Bottom"
@@ -613,9 +449,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               </FocusTrap>
             }
           />
-          {!room.isCallRoom() && livekitSupported && rtcSupported && hasCallPermission && (
+
-            <CallButton />
-          )}
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"

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

@@ -1,129 +0,0 @@
-import React, { ChangeEvent, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  Box,
-  config,
-  Input,
-  Line,
-  MenuItem,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Scroll,
-  Text,
-} from 'folds';
-import { MatrixEvent } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { stopPropagation } from '../../../utils/keyboard';
-
-type Props = {
-  mEvent: MatrixEvent;
-  onClose: () => void;
-};
-
-export function ForwardMessageDialog({ mEvent, onClose }: Props) {
-  const mx = useMatrixClient();
-  const [query, setQuery] = useState('');
-  const [sentTo, setSentTo] = useState<string | null>(null);
-
-  const allRooms = mx
-    .getRooms()
-    .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
-    .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));
-
-  const filtered = query
-    ? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
-    : allRooms;
-
-  const forward = (roomId: string, roomName: string) => {
-    const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
-    delete fwdContent['m.relates_to'];
-    mx.sendMessage(roomId, fwdContent as any);
-    setSentTo(roomName);
-    setTimeout(onClose, 1200);
-  };
-
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: onClose,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Modal
-            size="400"
-            style={{ maxHeight: '440px', borderRadius: config.radii.R500, display: 'flex', flexDirection: 'column' }}
-          >
-            <Box
-              direction="Column"
-              gap="200"
-              shrink="No"
-              style={{ padding: config.space.S400, paddingBottom: config.space.S200 }}
-            >
-              <Text size="H5">Forward message</Text>
-              <Input
-                variant="Background"
-                size="400"
-                radii="400"
-                outlined
-                placeholder="Search rooms…"
-                value={query}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
-              />
-            </Box>
-            <Line size="300" />
-            {sentTo ? (
-              <Box
-                grow="Yes"
-                alignItems="Center"
-                justifyContent="Center"
-                style={{ padding: config.space.S400 }}
-              >
-                <Text size="T300">✓ Forwarded to {sentTo}</Text>
-              </Box>
-            ) : (
-              <Box grow="Yes" style={{ minHeight: 0 }}>
-                <Scroll size="300" hideTrack visibility="Hover">
-                  <Box
-                    direction="Column"
-                    gap="100"
-                    style={{ padding: config.space.S200 }}
-                  >
-                    {filtered.slice(0, 60).map((room) => (
-                      <MenuItem
-                        key={room.roomId}
-                        size="300"
-                        radii="300"
-                        onClick={() => forward(room.roomId, room.name)}
-                      >
-                        <Text size="T300" truncate>
-                          {room.name}
-                        </Text>
-                      </MenuItem>
-                    ))}
-                    {filtered.length === 0 && (
-                      <Box
-                        alignItems="Center"
-                        justifyContent="Center"
-                        style={{ padding: config.space.S400 }}
-                      >
-                        <Text size="T300" priority="300">
-                          No rooms found
-                        </Text>
-                      </Box>
-                    )}
-                  </Box>
-                </Scroll>
-              </Box>
-            )}
-          </Modal>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}