Merge branch 'dev' into dm-calls

show call not supported message on incoming call notification
update call menu style
2026-05-13 18:53:36 +10:00 · 2026-05-13 10:09:13 +05:30 · 2026-05-13 10:01:11 +05:30 · 2026-05-13 09:24:15 +05:30 · 2026-05-12 15:34:41 +10:00 · 2026-05-11 22:59:43 +10:00
108 changed files with 8312 additions and 2431 deletions
@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}
@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}
@@ -0,0 +1,127 @@
+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
@@ -1,57 +0,0 @@
-name: 🐞 Bug Report
-description: Report a bug
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        ## First of all
-        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
-        2. Make sure Cinny is up to date.
-        3. Make sure it's an issue with Cinny and not something else you are using.
-        4. Remember to be friendly.
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug
-      description: A clear description of what the bug is. Include screenshots if applicable.
-      placeholder: Bug description
-    validations:
-      required: true
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: Steps to reproduce the behavior.
-      placeholder: |
-        1. Go to ...
-        2. Click on ...
-        3. See error
-
-  - type: textarea
-    id: expected-behavior
-    attributes:
-      label: Expected behavior
-      description: A clear description of what you expected to happen.
-
-  - type: textarea
-    id: info
-    attributes:
-      label: Platform and versions
-      description: "Provide OS, browser and Cinny version with your Homeserver."
-      placeholder: |
-       1. OS: [e.g. Windows 10, MacOS]
-       2. Browser: [e.g. chrome 99.5, firefox 97.2]
-       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
-       4. Matrix homeserver: [e.g. matrix.org]
-      render: shell
-    validations:
-      required: true
-
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.
@@ -1,4 +1,5 @@
+blank_issues_enabled: false
 contact_links:
-  - name: 💬 Matrix Chat
-    url: https://matrix.to/#/#cinny:matrix.org
-    about: Ask questions and talk to other Cinny users and the maintainers
+  - name: Features, Bug Reports, Questions
+    url: https://github.com/cinnyapp/cinny/discussions/new/choose
+    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
@@ -1,33 +0,0 @@
-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.
@@ -0,0 +1,9 @@
+---
+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.**
@@ -1,22 +0,0 @@
-<!-- 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
@@ -1,3 +0,0 @@
-# Reporting a Vulnerability
-
-**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**
@@ -3,12 +3,20 @@
  "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": {
@@ -14,7 +14,7 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: preview
          path: dist
@@ -33,7 +33,7 @@ jobs:
      - name: Save pr number
        run: echo ${PR_NUMBER} > ./pr.txt
      - name: Upload pr number
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: pr
          path: ./pr.txt
@@ -16,7 +16,7 @@ jobs:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
      - name: Download pr number
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -25,7 +25,7 @@ jobs:
        id: pr
        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
      - name: Download artifact
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -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@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
        with:
          context: .
          platforms: linux/amd64
@@ -13,7 +13,7 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
          node-version-file: ".node-version"
          package-manager-cache: false
@@ -1,23 +1,39 @@
 name: Production deploy

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

 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@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.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'
@@ -26,7 +42,7 @@ jobs:
        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
-          deploy-message: 'Prod deploy ${{ github.ref_name }}'
+          deploy-message: 'Prod deploy ${{ steps.vars.outputs.tag }}'
          enable-commit-comment: false
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
@@ -36,9 +52,6 @@ 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
@@ -52,14 +65,18 @@ jobs:
          gpg --export | xxd -p
          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
        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
@@ -67,17 +84,19 @@ 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@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -89,8 +108,11 @@ 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@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -0,0 +1,3 @@
+# These are commented until we enable lint and typecheck
+# npx tsc -p tsconfig.json --noEmit
+# npx lint-staged
@@ -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.
+> 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.

 **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.

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


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

 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
@@ -1,62 +1,115 @@
-# 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).
+> [!IMPORTANT] 
+We are currently in the [process of replacing the matrix-js-sdk](https://github.com/cinnyapp/cinny/issues/257#issuecomment-3714406704) with our own SDK. As a result, we will not be accepting any pull requests until further notice.
+Thank you for your understanding.

---
+<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">

-## Changes from upstream Cinny
+## 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.

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

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

-### LotusGuild Terminal Design System (TDS) v1.2
+* The default homeservers and explore pages are defined in [`config.json`](config.json).

-A full custom theme engine layered on top of Cinny's vanilla-extract theming:
+* 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.

-**Dark mode** (`LotusTerminalTheme`):
- CRT terminal aesthetic: scanline overlay, vignette, phosphor glow
- Palette: bg `#030508`, orange `#FF6B00`, cyan `#00D4FF`, green `#00FF88`, text `#c4d9ee`
- Monospace font stack, terminal-style scrollbars
- Custom hex-grid and circuit-board CSS background patterns
- Matrix-style boot messages on the welcome page
- CSS variables: `--lt-*` family covering colors, glow effects, borders, animations
+* 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'`.

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

-**Chat Backgrounds** (18+ custom patterns, all TDS-aware):
- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
- Chevron, polka dots, triangles, plaid
- All patterns use CSS custom properties — adapt to both TDS dark and light themes
- Settings toggle for showing per-message sender profiles
+```
+-----BEGIN PGP PUBLIC KEY BLOCK-----

-### Voice / Video Call Improvements
+mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
+6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
+FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
+K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
+leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
+Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
+Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
+jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
+4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
+AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
+vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
+YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
+AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
+Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
+K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
+atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
+AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
+SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
+3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
+ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
+5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
+Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
+QPqfGDpowBwRkkOsGz/XVcesJ1Pzg4bKivTS9kZjZSyT9RRSY8As0sVUN57AwYul
+s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
+vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
+LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
+H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
+NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
+CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
+XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
+KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
+gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
+N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
+M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
+n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
+Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
+mxFo+ioe/ABCufSmyqFye0psX3Sp
+=WtqZ
+-----END PGP PUBLIC KEY BLOCK-----
+```
+</details>

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

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

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

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

@@ -1,7 +1,7 @@
 {
-  "name": "lotus-chat",
+  "name": "cinny",
  "version": "4.11.1",
-  "description": "Lotus Chat \u2014 Matrix client for Lotus Guild",
+  "description": "Yet another matrix client",
  "main": "index.js",
  "type": "module",
  "engines": {
@@ -11,11 +11,52 @@
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview",
-    "lint": "yarn check:eslint && yarn check:prettier",
+    "lint": "npm run check:eslint && npm run 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",
@@ -56,7 +97,7 @@
    "linkify-react": "4.3.2",
    "linkifyjs": "4.3.2",
    "matrix-js-sdk": "38.2.0",
-    "matrix-widget-api": "1.13.0",
+    "matrix-widget-api": "1.16.1",
    "millify": "6.1.0",
    "pdfjs-dist": "4.2.67",
    "prismjs": "1.30.0",
@@ -78,10 +119,12 @@
    "ua-parser-js": "1.0.35"
  },
  "devDependencies": {
-    "@element-hq/element-call-embedded": "0.16.3",
+    "@element-hq/element-call-embedded": "0.19.1",
    "@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",
@@ -96,6 +139,7 @@
    "@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",
@@ -103,7 +147,10 @@
    "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",
@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}
@@ -1,14 +1,14 @@
 {
-  "name": "Lotus Chat",
-  "short_name": "Lotus Chat",
-  "description": "Lotus Chat \u2014 the Lotus Guild Matrix client",
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "Yet another matrix client",
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "./",
-  "background_color": "#0a0a0a",
-  "theme_color": "#980000",
+  "background_color": "#fff",
+  "theme_color": "#fff",
  "icons": [
    {
      "src": "./public/android/android-chrome-36x36.png",
@@ -55,24 +55,5 @@
      "sizes": "512x512",
      "type": "image/png"
    }
-  ],
-  "categories": [
-    "social",
-    "communication",
-    "productivity"
-  ],
-  "shortcuts": [
-    {
-      "name": "New Message",
-      "short_name": "DM",
-      "description": "Open a new direct message",
-      "url": "/",
-      "icons": [
-        {
-          "src": "res/android/android-chrome-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    }
  ]
 }
@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-  </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
-  <circle cx="14.5" cy="14.5" r="3" fill="#45B83B"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_1961)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#45B83B"/>
+</g>
+<defs>
+<clipPath id="clip0_2707_1961">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
 </svg>
@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-  </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
-  <circle cx="14.5" cy="14.5" r="3" fill="#989898"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_2015)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#989898"/>
+</g>
+<defs>
+<clipPath id="clip0_2707_2015">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
 </svg>
@@ -1,13 +1,19 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-  </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
+	</g>
+	<g>
+		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
+			c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
+			C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
+			C4.2,16.1,1.9,13.8,1.2,10.8z"/>
+		<circle cx="9.5" cy="6.4" r="0.5"/>
+	</g>
+</g>
 </svg>
@@ -0,0 +1,48 @@
+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}`);
+});
@@ -1,6 +1,31 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { config } from 'folds';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  color,
+  config,
+  Dialog,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+} 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,
@@ -8,15 +33,306 @@ 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';

-const PIP_MIN_W = 200;
-const PIP_MIN_H = 112; // keeps roughly 16:9 at minimum
+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 { 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 style={{ alignItems: 'start', paddingTop: config.space.S100 }}>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => onIgnore(),
+              clickOutsideDeactivates: false,
+              escapeDeactivates: false,
+            }}
+          >
+            <Dialog>
+              <Box
+                style={{
+                  padding: `${config.space.S300} ${config.space.S400} ${config.space.S400}`,
+                }}
+                direction="Column"
+                gap="500"
+              >
+                <Box direction="Column" gap="300">
+                  <Box gap="200" alignItems="Center">
+                    {info.intent === 'video' && <Icon size="50" src={Icons.VideoCamera} filled />}
+                    <Text size="L400">Incoming Call</Text>
+                  </Box>
+                  <Box direction="Row" gap="300" alignItems="Center">
+                    <Box shrink="No">
+                      <Avatar size="400">
+                        <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="0">
+                      <Text size="H4" truncate>
+                        {roomName}
+                      </Text>
+                      <Text size="T200">{info.sender}</Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box gap="300">
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Critical"
+                    fill="Soft"
+                    size="400"
+                    radii="400"
+                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
+                    before={<Icon size="200" src={Icons.PhoneDown} filled />}
+                  >
+                    <Text as="span" size="B400">
+                      {dm ? 'Reject' : 'Ignore'}
+                    </Text>
+                  </Button>
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Success"
+                    size="400"
+                    radii="400"
+                    onClick={() => onAnswer(room, info.intent === 'video')}
+                    before={<Icon size="200" src={Icons.Phone} filled />}
+                    disabled={!livekitSupported}
+                  >
+                    <Text as="span" size="B400">
+                      Answer
+                    </Text>
+                  </Button>
+                </Box>
+                {!livekitSupported && (
+                  <Text
+                    style={{ margin: 'auto', color: color.Critical.Main }}
+                    size="L400"
+                    align="Center"
+                  >
+                    Your homeserver does not support calling.
+                  </Text>
+                )}
+              </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);
@@ -33,19 +349,6 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
  return null;
 }

-type Corner = 'se' | 'sw' | 'ne' | 'nw';
-
-/** Normalise the element to top/left positioning so resize math is uniform. */
-function normaliseToTopLeft(el: HTMLDivElement) {
-  const rect = el.getBoundingClientRect();
-  el.style.top = `${rect.top}px`;
-  el.style.left = `${rect.left}px`;
-  el.style.right = 'auto';
-  el.style.bottom = 'auto';
-  el.style.width = `${rect.width}px`;
-  el.style.height = `${rect.height}px`;
-}
-
 type CallEmbedProviderProps = {
  children?: ReactNode;
 };
@@ -57,254 +360,20 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const selectedRoom = useSelectedRoom();
  const chat = useAtomValue(callChatAtom);
  const screenSize = useScreenSizeContext();
-  const { navigateRoom } = useRoomNavigate();

  const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
-  const inCallRoom = callEmbed && selectedRoom === callEmbed.roomId;
-  const callActive = callEmbed && joined;
-  const callVisible = inCallRoom && callActive && !chatOnlyView;
-  const pipMode = callActive && !inCallRoom;

-  const pipDragRef = useRef<{
-    startX: number;
-    startY: number;
-    origLeft: number;
-    origTop: number;
-    dragged: boolean;
-  } | null>(null);
-
-  // useCallEmbedPlacementSync writes top/left/width/height directly on this element.
-  // Override those in PiP mode; clear them when returning so it can take back control.
-  useEffect(() => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    if (pipMode) {
-      el.style.top = 'auto';
-      el.style.left = 'auto';
-      el.style.bottom = '72px';
-      el.style.right = '16px';
-      el.style.width = '280px';
-      el.style.height = '158px';
-      el.style.borderRadius = '12px';
-      el.style.overflow = 'hidden';
-      el.style.zIndex = '99';
-      el.style.boxShadow = '0 8px 32px rgba(0,0,0,0.55)';
-      el.style.border = '1px solid rgba(255,255,255,0.1)';
-      el.style.visibility = 'visible';
-    } else {
-      el.style.top = '';
-      el.style.left = '';
-      el.style.bottom = '';
-      el.style.right = '';
-      el.style.width = '';
-      el.style.height = '';
-      el.style.borderRadius = '';
-      el.style.overflow = '';
-      el.style.zIndex = '';
-      el.style.boxShadow = '';
-      el.style.border = '';
-      el.style.visibility = callVisible ? '' : 'hidden';
-    }
-  }, [pipMode, callVisible]);
-
-  // ── Drag to move ────────────────────────────────────────────────────────────
-  const handlePipMouseDown = (e: React.MouseEvent) => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    pipDragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      dragged: false,
-    };
-
-    const onMouseMove = (ev: MouseEvent) => {
-      if (!pipDragRef.current || !el) return;
-      const dx = ev.clientX - pipDragRef.current.startX;
-      const dy = ev.clientY - pipDragRef.current.startY;
-      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5) {
-        pipDragRef.current.dragged = true;
-        document.body.style.cursor = 'grabbing';
-        document.body.style.userSelect = 'none';
-      }
-      if (pipDragRef.current.dragged) {
-        const newLeft = Math.max(0, Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx));
-        const newTop = Math.max(0, Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy));
-        el.style.left = `${newLeft}px`;
-        el.style.top = `${newTop}px`;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-      }
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      setTimeout(() => {
-        if (pipDragRef.current) pipDragRef.current.dragged = false;
-      }, 0);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  };
-
-  const handlePipTouchStart = (e: React.TouchEvent) => {
-    const el = callEmbedRef.current;
-    if (!el || e.touches.length !== 1) return;
-    const touch = e.touches[0];
-    const rect = el.getBoundingClientRect();
-    pipDragRef.current = {
-      startX: touch.clientX,
-      startY: touch.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      dragged: false,
-    };
-
-    const onTouchMove = (ev: TouchEvent) => {
-      if (!pipDragRef.current || !el || ev.touches.length !== 1) return;
-      ev.preventDefault();
-      const t = ev.touches[0];
-      const dx = t.clientX - pipDragRef.current.startX;
-      const dy = t.clientY - pipDragRef.current.startY;
-      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5) {
-        pipDragRef.current.dragged = true;
-      }
-      if (pipDragRef.current.dragged) {
-        const newLeft = Math.max(0, Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx));
-        const newTop = Math.max(0, Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy));
-        el.style.left = `${newLeft}px`;
-        el.style.top = `${newTop}px`;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-      }
-    };
-
-    const onTouchEnd = () => {
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-      setTimeout(() => {
-        if (pipDragRef.current) pipDragRef.current.dragged = false;
-      }, 0);
-    };
-
-    document.addEventListener('touchmove', onTouchMove, { passive: false });
-    document.addEventListener('touchend', onTouchEnd);
-  };
-
-  const handlePipClick = (roomId: string) => {
-    if (pipDragRef.current?.dragged) return;
-    navigateRoom(roomId);
-  };
-
-  // ── Resize from corner handles ───────────────────────────────────────────────
-  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const el = callEmbedRef.current;
-    if (!el) return;
-
-    normaliseToTopLeft(el);
-
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const startW = el.offsetWidth;
-    const startH = el.offsetHeight;
-    const startL = parseFloat(el.style.left);
-    const startT = parseFloat(el.style.top);
-
-    document.body.style.cursor = `${corner}-resize`;
-    document.body.style.userSelect = 'none';
-
-    const onMouseMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - startX;
-      const dy = ev.clientY - startY;
-
-      let w = startW;
-      let h = startH;
-      let l = startL;
-      let t = startT;
-
-      if (corner === 'se') { w = startW + dx; h = startH + dy; }
-      if (corner === 'sw') { w = startW - dx; h = startH + dy; l = startL + startW - Math.max(PIP_MIN_W, w); }
-      if (corner === 'ne') { w = startW + dx; h = startH - dy; t = startT + startH - Math.max(PIP_MIN_H, h); }
-      if (corner === 'nw') { w = startW - dx; h = startH - dy; l = startL + startW - Math.max(PIP_MIN_W, w); t = startT + startH - Math.max(PIP_MIN_H, h); }
-
-      w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
-      h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
-      l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
-      t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
-
-      el.style.width = `${w}px`;
-      el.style.height = `${h}px`;
-      el.style.left = `${l}px`;
-      el.style.top = `${t}px`;
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  };
-
-  // Corner handle style helper
-  const cornerHandle = (corner: Corner): React.CSSProperties => {
-    const s = corner.includes('s');
-    const e = corner.includes('e');
-    return {
-      position: 'absolute',
-      width: '18px',
-      height: '18px',
-      [s ? 'bottom' : 'top']: 0,
-      [e ? 'right' : 'left']: 0,
-      cursor: `${corner}-resize`,
-      zIndex: 2,
-    };
-  };
-
-  // Grip dot pattern rendered inside each handle
-  const gripDots = (corner: Corner) => {
-    const s = corner.includes('s');
-    const e = corner.includes('e');
-    // 3 dots arranged in an L toward the active corner
-    const dots: React.CSSProperties[] = [];
-    const r = 2; // dot radius px
-    const gap = 5;
-    const base = 3;
-    for (let i = 0; i < 3; i++) {
-      for (let j = 0; j < 3; j++) {
-        if (i + j < 2) continue; // only the 3 corner-most dots
-        dots.push({
-          position: 'absolute',
-          width: r * 2,
-          height: r * 2,
-          borderRadius: '50%',
-          background: 'rgba(255,255,255,0.45)',
-          [s ? 'bottom' : 'top']: base + i * gap,
-          [e ? 'right' : 'left']: base + j * gap,
-        });
-      }
-    }
-    return dots;
-  };
+  const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;

  return (
    <CallEmbedContextProvider value={callEmbed}>
      {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
+      <CallEmbedRefContextProvider value={callEmbedRef}>
+        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
+        {children}
+      </CallEmbedRefContextProvider>
      <div
        data-call-embed-container
-        ref={callEmbedRef}
        style={{
          visibility: callVisible ? undefined : 'hidden',
          position: 'fixed',
@@ -313,62 +382,8 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
          width: '100%',
          height: '50%',
        }}
-      >
-        {pipMode && callEmbed && (
-          <>
-            {/* Drag-to-move overlay (zIndex 1, sits over the iframe) */}
-            <div
-              role="button"
-              tabIndex={0}
-              aria-label="Return to call"
-              onMouseDown={handlePipMouseDown}
-              onTouchStart={handlePipTouchStart}
-              onClick={() => handlePipClick(callEmbed.roomId)}
-              onKeyDown={(e) => e.key === 'Enter' && handlePipClick(callEmbed.roomId)}
-              style={{
-                position: 'absolute',
-                inset: 0,
-                zIndex: 1,
-                background: 'transparent',
-                cursor: 'grab',
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                padding: '6px',
-              }}
-            >
-              <div
-                style={{
-                  background: 'rgba(0,0,0,0.65)',
-                  backdropFilter: 'blur(4px)',
-                  borderRadius: '6px',
-                  padding: '3px 8px',
-                  color: '#fff',
-                  fontSize: '11px',
-                  fontWeight: 600,
-                  pointerEvents: 'none',
-                }}
-              >
-                ↗ Return to call
-              </div>
-            </div>
-
-            {/* Corner resize handles (zIndex 2, above the drag overlay) */}
-            {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => (
-              <div
-                key={corner}
-                style={cornerHandle(corner)}
-                onMouseDown={(e) => handleResizeMouseDown(e, corner)}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {gripDots(corner).map((style, i) => (
-                  <div key={i} style={style} />
-                ))}
-              </div>
-            ))}
-          </>
-        )}
-      </div>
+        ref={callEmbedRef}
+      />
    </CallEmbedContextProvider>
  );
 }
@@ -0,0 +1,45 @@
+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>
+  )
+);
@@ -157,10 +157,12 @@ const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): In
      return children;
    }

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

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

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

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

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

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

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

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

 export type OutputOptions = {
  allowTextFormatting?: boolean;
@@ -21,7 +21,7 @@ export function SplashScreen({ children }: SplashScreenProps) {
        justifyContent="Center"
      >
        <Text size="H2" align="Center">
-          Lotus Chat
+          Cinny
        </Text>
      </Box>
    </Box>
@@ -23,6 +23,11 @@ export const UrlPreviewImg = style([
    objectPosition: 'center',
    flexShrink: 0,
    overflow: 'hidden',
+    cursor: 'pointer',
+
+    ':hover': {
+      filter: 'brightness(0.8)',
+    },
  },
 ]);

@@ -1,6 +1,7 @@
 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';
@@ -12,6 +13,8 @@ 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 };

@@ -19,6 +22,7 @@ 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])
    );
@@ -30,7 +34,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
    if (previewStatus.status === AsyncStatus.Error) return null;

    const renderContent = (prev: IPreviewUrlResponse) => {
-      const imgUrl = mxcUrlToHttp(
+      const thumbUrl = mxcUrlToHttp(
        mx,
        prev['og:image'] || '',
        useAuthentication,
@@ -40,9 +44,31 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
        false
      );

+      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication);
+
      return (
        <>
-          {imgUrl && <UrlPreviewImg src={imgUrl} alt={prev['og:title']} title={prev['og:title']} />}
+          {thumbUrl && (
+            <UrlPreviewImg
+              src={thumbUrl}
+              alt={prev['og:title']}
+              title={prev['og:title']}
+              tabIndex={0}
+              onKeyDown={(evt) => onEnterOrSpace(() => setViewer(true))(evt)}
+              onClick={() => setViewer(true)}
+            />
+          )}
+          {imgUrl && (
+            <ImageOverlay
+              src={imgUrl}
+              alt={prev['og:title']}
+              viewer={viewer}
+              requestClose={() => {
+                setViewer(false);
+              }}
+              renderViewer={(p) => <ImageViewer {...p} />}
+            />
+          )}
          <UrlPreviewContent>
            <Text
              style={linkStyles}
@@ -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])
  );
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Room } from 'matrix-js-sdk';
-import { Chip, Text } from 'folds';
+import { Chip, Icon, Icons, Text } from 'folds';
 import { useAtomValue } from 'jotai';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { RoomIcon } from '../../components/room-avatar';
@@ -38,7 +38,11 @@ export function CallRoomName({ room }: CallRoomNameProps) {
      variant="Background"
      radii="Pill"
      before={
-        <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        dm ? (
+          <Icon size="200" src={Icons.VolumeHigh} filled />
+        ) : (
+          <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        )
      }
      onClick={() => navigateRoom(room.roomId)}
    >
@@ -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,25 +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 [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());
@@ -93,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}
@@ -158,63 +84,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
      justifyContent="Center"
      alignItems="Center"
    >
-      {pttMode && (
-        <Chip
-          variant={pttActive ? 'Success' : 'Warning'}
-          fill="Soft"
-          radii="400"
-          style={{
-            position: 'absolute',
-            top: '-2.2rem',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            pointerEvents: 'none',
-            whiteSpace: 'nowrap',
-          }}
-          outlined
-        >
-          <Text size="T200" style={{ fontWeight: 700 }}>
-            {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
-          </Text>
-        </Chip>
-      )}
-      {shareConfirm && (
-        <Box
-          style={{
-            position: 'absolute',
-            bottom: '110%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: 'var(--bg-surface)',
-            border: '1px solid var(--border-color)',
-            borderRadius: '0.75rem',
-            padding: '1rem 1.25rem',
-            zIndex: 100,
-            minWidth: '260px',
-            boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0.75rem',
-          }}
-        >
-          <Text size="T300" style={{ fontWeight: 600 }}>Share your screen?</Text>
-          <Text size="T200" style={{ opacity: 0.75 }}>Your screen will be visible to all participants in this call.</Text>
-          <Box gap="200">
-            <Button
-              size="300" variant="Success" fill="Solid" radii="300"
-              onClick={() => { callEmbed.control.toggleScreenshare(); setShareConfirm(false); }}
-            >
-              <Text size="B300">Share</Text>
-            </Button>
-            <Button
-              size="300" variant="Surface" fill="Soft" radii="300" outlined
-              onClick={() => setShareConfirm(false)}
-            >
-              <Text size="B300">Cancel</Text>
-            </Button>
-          </Box>
-        </Box>
-      )}
      <SequenceCard
        className={css.ControlCard}
        variant="SurfaceVariant"
@@ -236,10 +105,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
            <ScreenShareButton
              enabled={screenshare}
-              onToggle={() => screenshare
-                ? callEmbed.control.toggleScreenshare()
-                : setShareConfirm(true)
-              }
+              onToggle={() => callEmbed.control.toggleScreenshare()}
            />
          </Box>
        </Box>
@@ -18,7 +18,7 @@ import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 function LivekitServerMissingMessage() {
  return (
    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your homeserver does not support calling. But you can still join call started by others.
+      Your homeserver does not support calling.
    </Text>
  );
 }
@@ -30,12 +30,12 @@ function JoinMessage({
  hasParticipant?: boolean;
  livekitSupported?: boolean;
 }) {
-  if (hasParticipant) return null;
-
  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!
@@ -68,7 +68,10 @@ function CallPrescreen() {
  const creators = useRoomCreators(room);

  const permissions = useRoomPermissions(creators, powerLevels);
-  const hasPermission = permissions.event(StateEvent.GroupCallMemberPrefix, mx.getSafeUserId());
+  const hasPermission = permissions.stateEvent(
+    StateEvent.GroupCallMemberPrefix,
+    mx.getSafeUserId()
+  );

  const callSession = useCallSession(room);
  const callMembers = useCallMembers(room, callSession);
@@ -77,7 +80,7 @@ function CallPrescreen() {
  const callEmbed = useCallEmbed();
  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;

-  const canJoin = hasPermission && (livekitSupported || hasParticipant);
+  const canJoin = hasPermission && livekitSupported;

  return (
    <Scroll variant="Surface" hideTrack>
@@ -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>
      }
    >
@@ -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 micDenied = micPermission === 'denied';
-
-  const disabled = inOtherCall || !canJoin || micDenied;
+  const disabled = inOtherCall || !canJoin;

  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">
-        {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>
-        )}
+      <Box grow="Yes" direction="Column">
        <Button
          variant={disabled ? 'Secondary' : 'Success'}
          fill={disabled ? 'Soft' : 'Solid'}
@@ -21,7 +21,6 @@ export const CallMemberCard = style({

 export const CallControlContainer = style({
  padding: config.space.S400,
-  position: 'relative',
 });

 export const PrescreenMessage = style({
@@ -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];
@@ -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 } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl, getStateEvent } 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 { usePowerLevels } from '../../hooks/usePowerLevels';
+import { getPowersLevelFromMatrixEvent, 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 { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { getRoomCreatorsForRoomId, useRoomCreators } from '../../hooks/useRoomCreators';
+import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
@@ -59,6 +59,7 @@ import { callChatAtom } from '../../state/callEmbed';
 import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
 import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '../../hooks/useLivekitSupport';
+import { StateEvent } from '../../../types/matrix/room';

 type RoomNavItemMenuProps = {
  room: Room;
@@ -287,8 +288,18 @@ export function RoomNavItem({
  const autoDiscoveryInfo = useAutoDiscoveryInfo();

  const handleStartCall: MouseEventHandler<HTMLAnchorElement> = (evt) => {
-    // Do not join if no livekit support or call is not started by others
-    if (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0) {
+    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()
+    );
+
+    // Do not join if missing permissions or no livekit support
+    if (!hasCallPermission || !livekitSupport(autoDiscoveryInfo)) {
      return;
    }

@@ -367,7 +378,7 @@ export function RoomNavItem({
                aria-label={notificationMode}
              />
            )}
-            {room.isCallRoom() && callMembers.length > 0 && (
+            {callMembers.length > 0 && (
              <Badge variant="Critical" fill="Solid" size="400">
                <Text as="span" size="L400" truncate>
                  {callMembers.length} Live
@@ -23,7 +23,7 @@ export function Permissions({ requestClose }: PermissionsProps) {

  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
-  const permissionGroups = usePermissionGroups(room.isCallRoom());
+  const permissionGroups = usePermissionGroups();

  const [powerEditor, setPowerEditor] = useState(false);

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
 import { PermissionGroup } from '../../common-settings/permissions';

-export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
+export const usePermissionGroups = (): PermissionGroup[] => {
  const groups: PermissionGroup[] = useMemo(() => {
    const messagesGroup: PermissionGroup = {
      name: 'Messages',
@@ -216,13 +216,13 @@ export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {

    return [
      messagesGroup,
-      ...(isCallRoom ? [callSettingsGroup] : []),
+      callSettingsGroup,
      moderationGroup,
      roomOverviewGroup,
      roomSettingsGroup,
      otherSettingsGroup,
    ];
-  }, [isCallRoom]);
+  }, []);

  return groups;
 };
@@ -18,12 +18,18 @@ import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
 import { callChatAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';
+import { useCallEmbed } from '../../hooks/useCallEmbed';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';

 export function Room() {
  const { eventId } = useParams();
  const room = useRoom();
  const mx = useMatrixClient();

+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const callEmbed = useCallEmbed();
+
  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  const screenSize = useScreenSizeContext();
@@ -43,7 +49,7 @@ export function Room() {
    )
  );

-  const callView = room.isCallRoom();
+  const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;

  return (
    <PowerLevelsContextProvider value={powerLevels}>
@@ -436,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();
@@ -1650,7 +1649,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
    }

    const collapsed =
-      !perMessageProfiles &&
      isPrevRendered &&
      !dayDivider &&
      (!newDivider || eventSender === mx.getUserId()) &&
@@ -15,10 +15,6 @@ 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 +54,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 +91,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
  );

  return (
-    <Page ref={roomViewRef} style={getChatBg(chatBackground, isDark)}>
+    <Page ref={roomViewRef}>
      <Box grow="Yes" direction="Column">
        <RoomTimeline
          key={roomId}
@@ -21,6 +21,7 @@ import {
  RectCords,
  Badge,
  Spinner,
+  Button,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { Room } from 'matrix-js-sdk';
@@ -32,7 +33,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';
@@ -69,6 +69,8 @@ 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';

 type RoomMenuProps = {
  room: Room;
@@ -254,6 +256,124 @@ 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}
+            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();
@@ -261,10 +381,19 @@ 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 [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);
@@ -381,23 +510,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"
@@ -472,7 +584,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
              </FocusTrap>
            }
          />
-
+          {!room.isCallRoom() && livekitSupported && hasCallPermission && <CallButton />}
          {screenSize === ScreenSize.Desktop && (
            <TooltipProvider
              position="Bottom"
@@ -286,7 +286,7 @@ export function Search({ requestClose }: SearchProps) {
                  gap="100"
                >
                  <Text size="H6" align="Center">
-                    {result ? 'No Match Found' : `No Rooms'}`}
+                    {result ? 'No Match Found' : 'No Rooms'}
                  </Text>
                  <Text size="T200" align="Center">
                    {result
@@ -4,8 +4,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import LotusLogo from '../../../../../public/res/Lotus.png';
-import pkg from '../../../../../package.json';
+import CinnySVG from '../../../../../public/res/svg/cinny.svg';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';

@@ -39,23 +38,23 @@ export function About({ requestClose }: AboutProps) {
                <Box shrink="No">
                  <img
                    style={{ width: toRem(60), height: toRem(60) }}
-                    src={LotusLogo}
-                    alt="Lotus Chat logo"
+                    src={CinnySVG}
+                    alt="Cinny logo"
                  />
                </Box>
                <Box direction="Column" gap="300">
                  <Box direction="Column" gap="100">
                    <Box gap="100" alignItems="End">
-                      <Text size="H3">Lotus Chat</Text>
-                      <Text size="T200">v{pkg.version}</Text>
+                      <Text size="H3">Cinny</Text>
+                      <Text size="T200">v4.11.1</Text>
                    </Box>
-                    <Text>A Matrix client for Lotus Guild.</Text>
+                    <Text>Yet another matrix client.</Text>
                  </Box>

                  <Box gap="200" wrap="Wrap">
                    <Button
                      as="a"
-                      href="https://code.lotusguild.org/LotusGuild/cinny"
+                      href="https://github.com/cinnyapp/cinny"
                      rel="noreferrer noopener"
                      target="_blank"
                      variant="Secondary"
@@ -68,7 +67,7 @@ export function About({ requestClose }: AboutProps) {
                    </Button>
                    <Button
                      as="a"
-                      href="https://matrix.lotusguild.org"
+                      href="https://cinny.in/#sponsor"
                      rel="noreferrer noopener"
                      target="_blank"
                      variant="Critical"
@@ -28,7 +28,7 @@ function ExportKeys() {
        const blob = new Blob([encKeys], {
          type: 'text/plain;charset=us-ascii',
        });
-        FileSaver.saveAs(blob, 'lotus-keys.txt');
+        FileSaver.saveAs(blob, 'cinny-keys.txt');
      },
      [mx]
    )
@@ -32,7 +32,7 @@ import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { useSetting } from '../../../state/hooks/settings';
-import { ChatBackground, DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
 import { SettingTile } from '../../../components/setting-tile';
 import { KeySymbol } from '../../../utils/key-symbol';
 import { isMacOS } from '../../../utils/user-agent';
@@ -42,13 +42,10 @@ import {
  Theme,
  ThemeKind,
  useSystemThemeKind,
-  useTheme,
  useThemeNames,
  useThemes,
 } from '../../../hooks/useTheme';
 import { stopPropagation } from '../../../utils/keyboard';
-import { BG_OPTIONS, getChatBg } from '../../lotus/chatBackground';
-import { resetBootSequence, runLotusBootSequence } from '../../../../lotus-boot';
 import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
 import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
 import { useDateFormatItems } from '../../../hooks/useDateFormat';
@@ -310,8 +307,6 @@ function Appearance() {
  const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
  const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
  const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
-  const [perMessageProfiles, setPerMessageProfiles] = useSetting(settingsAtom, 'perMessageProfiles');
-  const [lotusTerminal, setLotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

  return (
    <Box direction="Column" gap="100">
@@ -355,56 +350,6 @@ function Appearance() {
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <SettingTile title="Page Zoom" after={<PageZoomInput />} />
      </SequenceCard>
-
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column" gap="200">
-        <SettingTile
-          title="Chat Background"
-          description="Pattern applied behind the message timeline."
-        />
-        <Box style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}>
-          <ChatBgGrid />
-        </Box>
-      </SequenceCard>
-
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Show Profile on Every Message"
-          description="Display avatar and name on each message instead of grouping consecutive messages."
-          after={<Switch variant="Primary" value={perMessageProfiles} onChange={setPerMessageProfiles} />}
-        />
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Lotus Terminal Mode"
-          description="LotusGuild Terminal Design System: Anduril Orange + Ice Cyan + Matrix Green, dot-grid background, CRT scanlines, and boot sequence animation."
-          after={
-            <Box direction="Row" gap="200" align="Center">
-              {lotusTerminal && (
-                <button
-                  type="button"
-                  onClick={() => { resetBootSequence(); runLotusBootSequence(true); }}
-                  title="Replay boot sequence"
-                  style={{
-                    background: 'transparent',
-                    border: '1px solid rgba(255,107,0,0.35)',
-                    color: '#FF6B00',
-                    fontSize: '0.65rem',
-                    padding: '0.2rem 0.6rem',
-                    cursor: 'pointer',
-                    fontFamily: 'inherit',
-                    letterSpacing: '0.1em',
-                    textTransform: 'uppercase',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  ▶ Boot
-                </button>
-              )}
-              <Switch variant="Primary" value={lotusTerminal} onChange={setLotusTerminal} />
-            </Box>
-          }
-        />
-      </SequenceCard>
    </Box>
  );
 }
@@ -766,7 +711,6 @@ function Editor() {
  const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
  const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
  const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const [editorToolbar, setEditorToolbar] = useSetting(settingsAtom, 'editorToolbar');

  return (
    <Box direction="Column" gap="100">
@@ -786,13 +730,6 @@ function Editor() {
          after={<Switch variant="Primary" value={isMarkdown} onChange={setIsMarkdown} />}
        />
      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Formatting Toolbar"
-          description="Show bold, italic, code and other formatting buttons above the message input."
-          after={<Switch variant="Primary" value={editorToolbar} onChange={setEditorToolbar} />}
-        />
-      </SequenceCard>
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <SettingTile
          title="Hide Typing & Read Receipts"
@@ -804,121 +741,6 @@ function Editor() {
  );
 }

-
-function Calls() {
-  const [cameraOnJoin, setCameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');
-  const [callNoiseSuppression, setCallNoiseSuppression] = useSetting(settingsAtom, 'callNoiseSuppression');
-  const [pttMode, setPttMode] = useSetting(settingsAtom, 'pttMode');
-  const [pttKey, setPttKey] = useSetting(settingsAtom, 'pttKey');
-  const [listeningForKey, setListeningForKey] = useState(false);
-
-  const handleKeyBind = () => {
-    setListeningForKey(true);
-    const onKey = (e: KeyboardEvent) => {
-      e.preventDefault();
-      if (e.code === 'Escape') {
-        setListeningForKey(false);
-      } else {
-        setPttKey(e.code);
-        setListeningForKey(false);
-      }
-      window.removeEventListener('keydown', onKey, true);
-    };
-    window.addEventListener('keydown', onKey, true);
-  };
-
-  const keyLabel = (code: string) => code === 'Space' ? 'Space' : code.replace('Key', '').replace('Digit', '');
-
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Calls</Text>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Join with Camera On"
-          description="Enable camera automatically when joining a voice or video call. Camera is off by default."
-          after={<Switch variant="Primary" value={cameraOnJoin} onChange={setCameraOnJoin} />}
-        />
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Noise Suppression"
-          description="Apply AI noise suppression to filter background noise during calls (powered by Element Call)."
-          after={<Switch variant="Primary" value={callNoiseSuppression} onChange={setCallNoiseSuppression} />}
-        />
-      </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column" gap="400">
-        <SettingTile
-          title="Push to Talk"
-          description="Mute your microphone by default. Hold the PTT key to speak."
-          after={<Switch variant="Primary" value={pttMode} onChange={setPttMode} />}
-        />
-        {pttMode && (
-          <SettingTile
-            title="PTT Key Binding"
-            description="Press a key to bind it as your push-to-talk key."
-            after={
-              <Button
-                size="300"
-                variant={listeningForKey ? 'Warning' : 'Secondary'}
-                fill={listeningForKey ? 'Solid' : 'Soft'}
-                radii="300"
-                outlined
-                onClick={handleKeyBind}
-                style={{ minWidth: '90px' }}
-              >
-                <Text size="B300">
-                  {listeningForKey ? 'Press a key…' : keyLabel(pttKey)}
-                </Text>
-              </Button>
-            }
-          />
-        )}
-      </SequenceCard>
-    </Box>
-  );
-}
-
-
-function ChatBgGrid() {
-  const [chatBackground, setChatBackground] = useSetting(settingsAtom, 'chatBackground');
-  const theme = useTheme();
-  const isDark = theme.kind === ThemeKind.Dark;
-
-  return (
-    <Box wrap="Wrap" gap="200">
-      {BG_OPTIONS.map((opt) => (
-        <Box key={opt.value} direction="Column" gap="100" style={{ alignItems: 'center' }}>
-          <button
-            type="button"
-            aria-label={opt.label}
-            aria-pressed={chatBackground === opt.value}
-            onClick={() => setChatBackground(opt.value as ChatBackground)}
-            style={{
-              display: 'block',
-              width: toRem(76),
-              height: toRem(50),
-              borderRadius: toRem(8),
-              cursor: 'pointer',
-              border: chatBackground === opt.value
-                ? '2px solid #980000'
-                : '2px solid rgba(128,128,128,0.25)',
-              padding: 0,
-              overflow: 'hidden',
-              ...getChatBg(opt.value as ChatBackground, isDark),
-            }}
-          />
-          <Text
-            size="T200"
-            style={chatBackground === opt.value ? { color: '#980000' } : undefined}
-          >
-            {opt.label}
-          </Text>
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
 function SelectMessageLayout() {
  const [menuCords, setMenuCords] = useState<RectCords>();
  const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
@@ -1184,7 +1006,6 @@ export function General({ requestClose }: GeneralProps) {
              <DateAndTime />
              <Editor />
              <Messages />
-              <Calls />
            </Box>
          </PageContent>
        </Scroll>
@@ -27,7 +27,7 @@ function EmailNotification() {
            device_display_name: email,
            lang: 'en',
            data: {
-              brand: 'Lotus Chat',
+              brand: 'Cinny',
            },
            append: true,
          });
@@ -15,8 +15,6 @@ import { useResizeObserver } from './useResizeObserver';
 import { CallControlState } from '../plugins/call/CallControlState';
 import { useCallMembersChange, useCallSession } from './useCall';
 import { CallPreferences } from '../state/callPreferences';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';

 const CallEmbedContext = createContext<CallEmbed | undefined>(undefined);

@@ -44,19 +42,15 @@ export const createCallEmbed = (
  dm: boolean,
  themeKind: ElementCallThemeKind,
  container: HTMLElement,
-  pref?: CallPreferences,
-  noiseSuppression = true,
-  forceAudioOff = false
+  pref?: CallPreferences
 ): CallEmbed => {
  const rtcSession = mx.matrixRTC.getRoomSession(room);
  const ongoing =
    MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;

-  const intent = CallEmbed.getIntent(dm, ongoing);
-  const initialAudio = forceAudioOff ? false : (pref?.microphone ?? true);
-  const initialVideo = pref?.video ?? false;
-  const widget = CallEmbed.getWidget(mx, room, intent, themeKind, noiseSuppression, initialAudio, initialVideo);
-  const controlState = pref && new CallControlState(forceAudioOff ? false : pref.microphone, pref.video, pref.sound);
+  const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
+  const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
+  const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);

  const embed = new CallEmbed(mx, room, widget, container, controlState);

@@ -68,8 +62,6 @@ export const useCallStart = (dm = false) => {
  const theme = useTheme();
  const setCallEmbed = useSetAtom(callEmbedAtom);
  const callEmbedRef = useCallEmbedRef();
-  const [callNoiseSuppression] = useSetting(settingsAtom, 'callNoiseSuppression');
-  const [pttMode] = useSetting(settingsAtom, 'pttMode');

  const startCall = useCallback(
    (room: Room, pref?: CallPreferences) => {
@@ -77,11 +69,11 @@ export const useCallStart = (dm = false) => {
      if (!container) {
        throw new Error('Failed to start call, No embed container element found!');
      }
-      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, pref, callNoiseSuppression ?? true, !!pttMode);
+      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, pref);

      setCallEmbed(callEmbed);
    },
-    [mx, dm, theme, setCallEmbed, callEmbedRef, callNoiseSuppression, pttMode]
+    [mx, dm, theme, setCallEmbed, callEmbedRef]
  );

  return startCall;
@@ -109,6 +101,7 @@ export const useCallJoined = (embed?: CallEmbed): boolean => {

 export const useCallHangupEvent = (embed: CallEmbed, callback: () => void) => {
  useClientWidgetApiEvent(embed.call, ElementWidgetActions.HangupCall, callback);
+  useClientWidgetApiEvent(embed.call, ElementWidgetActions.Close, callback);
 };

 export const useCallMemberSoundSync = (embed: CallEmbed) => {
@@ -25,6 +25,10 @@ export const useDateFormatItems = (): DateFormatItem[] =>
        format: 'YYYY/MM/DD',
        name: 'YYYY/MM/DD',
      },
+      {
+        format: 'YYYY-MM-DD',
+        name: 'YYYY-MM-DD',
+      },
      {
        format: '',
        name: 'Custom',
@@ -57,7 +57,7 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
    return draftPl;
  });

-const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
+export const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
  const plContent = mEvent?.getContent<IPowerLevels>();

  const powerLevels = !plContent ? DEFAULT_POWER_LEVELS : fillMissingPowers(plContent);
@@ -1,7 +1,7 @@
 import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, lotusTerminalLightTheme, lotusTerminalTheme, silverTheme } from '../../colors.css';
+import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';

@@ -37,16 +37,6 @@ export const ButterTheme: Theme = {
  kind: ThemeKind.Dark,
  classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
-export const LotusTerminalTheme: Theme = {
-  id: 'lotus-terminal-theme',
-  kind: ThemeKind.Dark,
-  classNames: ['lotus-terminal-theme', lotusTerminalTheme, onDarkFontWeight, 'prism-dark'],
-};
-export const LotusTerminalLightTheme: Theme = {
-  id: 'lotus-terminal-light-theme',
-  kind: ThemeKind.Light,
-  classNames: ['lotus-terminal-light-theme', lotusTerminalLightTheme, onLightFontWeight, 'prism-light'],
-};

 export const useThemes = (): Theme[] => {
  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
@@ -3,39 +3,27 @@ import { configClass, varsClass } from 'folds';
 import {
  DarkTheme,
  LightTheme,
-  LotusTerminalLightTheme,
-  LotusTerminalTheme,
  ThemeContextProvider,
  ThemeKind,
  useActiveTheme,
  useSystemThemeKind,
 } from '../hooks/useTheme';
-import { lotusTerminalBodyClass } from '../../lotus-terminal.css';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
-import { runLotusBootSequence } from '../../lotus-boot';

 export function UnAuthRouteThemeManager() {
  const systemThemeKind = useSystemThemeKind();
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

  useEffect(() => {
    document.body.className = '';
    document.body.classList.add(configClass, varsClass);
-    if (lotusTerminal) {
-      const isLight = systemThemeKind === ThemeKind.Light;
-      document.documentElement.setAttribute('data-theme', isLight ? 'light' : 'dark');
-      document.body.classList.add(...(isLight ? LotusTerminalLightTheme : LotusTerminalTheme).classNames);
-      document.body.classList.add(lotusTerminalBodyClass);
-    } else {
-      document.documentElement.removeAttribute('data-theme');
-      if (systemThemeKind === ThemeKind.Dark) {
-        document.body.classList.add(...DarkTheme.classNames);
-      } else {
-        document.body.classList.add(...LightTheme.classNames);
-      }
+    if (systemThemeKind === ThemeKind.Dark) {
+      document.body.classList.add(...DarkTheme.classNames);
    }
-  }, [systemThemeKind, lotusTerminal]);
+    if (systemThemeKind === ThemeKind.Light) {
+      document.body.classList.add(...LightTheme.classNames);
+    }
+  }, [systemThemeKind]);

  return null;
 }
@@ -43,30 +31,19 @@ export function UnAuthRouteThemeManager() {
 export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
  const activeTheme = useActiveTheme();
  const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
-
-  const terminalIsLight = lotusTerminal && activeTheme.kind === ThemeKind.Light;
-  const effectiveTheme = lotusTerminal
-    ? (terminalIsLight ? LotusTerminalLightTheme : LotusTerminalTheme)
-    : activeTheme;

  useEffect(() => {
    document.body.className = '';
    document.body.classList.add(configClass, varsClass);
-    document.body.classList.add(...effectiveTheme.classNames);
-    if (lotusTerminal) {
-      document.documentElement.setAttribute('data-theme', terminalIsLight ? 'light' : 'dark');
-      document.body.classList.add(lotusTerminalBodyClass);
-      runLotusBootSequence();
-    } else {
-      document.documentElement.removeAttribute('data-theme');
-    }
-    if (monochromeMode && !lotusTerminal) {
+
+    document.body.classList.add(...activeTheme.classNames);
+
+    if (monochromeMode) {
      document.body.style.filter = 'grayscale(1)';
    } else {
      document.body.style.filter = '';
    }
-  }, [effectiveTheme, monochromeMode, lotusTerminal, terminalIsLight]);
+  }, [activeTheme, monochromeMode]);

-  return <ThemeContextProvider value={effectiveTheme}>{children}</ThemeContextProvider>;
+  return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
 }
@@ -1,25 +1,24 @@
 import React from 'react';
 import { Box, Text } from 'folds';
 import * as css from './styles.css';
-import pkg from '../../../../package.json';

 export function AuthFooter() {
  return (
    <Box className={css.AuthFooter} justifyContent="Center" gap="400" wrap="Wrap">
-      <Text as="a" size="T300" href="https://lotusguild.org" target="_blank" rel="noreferrer">
+      <Text as="a" size="T300" href="https://cinny.in" target="_blank" rel="noreferrer">
        About
      </Text>
      <Text
        as="a"
        size="T300"
-        href="https://code.lotusguild.org/LotusGuild/cinny/releases"
+        href="https://github.com/ajbura/cinny/releases"
        target="_blank"
        rel="noreferrer"
      >
-        v{pkg.version}
+        v4.11.1
      </Text>
-      <Text as="a" size="T300" href="https://matrix.lotusguild.org" target="_blank" rel="noreferrer">
-        Community
+      <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
+        Twitter
      </Text>
      <Text as="a" size="T300" href="https://matrix.org" target="_blank" rel="noreferrer">
        Powered by Matrix
@@ -20,7 +20,7 @@ import {
 } from '../../hooks/useClientConfig';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
-import LotusLogo from '../../../../public/res/Lotus.png';
+import CinnySVG from '../../../../public/res/svg/cinny.svg';
 import { ServerPicker } from './ServerPicker';
 import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
 import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
@@ -134,8 +134,8 @@ export function AuthLayout() {
        <Box direction="Column" className={css.AuthCard}>
          <Header className={css.AuthHeader} size="600" variant="Surface">
            <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-              <img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
-              <Text size="H3">Lotus Chat</Text>
+              <img className={css.AuthLogo} src={CinnySVG} alt="Cinny Logo" />
+              <Text size="H3">Cinny</Text>
            </Box>
          </Header>
          <Box className={css.AuthCardContent} direction="Column">
@@ -133,7 +133,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
        user: username,
      },
      password,
-      initial_device_display_name: 'Lotus Chat Web',
+      initial_device_display_name: 'Cinny Web',
    });
  };

@@ -151,7 +151,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
        user: mxIdUsername,
      },
      password,
-      initial_device_display_name: 'Lotus Chat Web',
+      initial_device_display_name: 'Cinny Web',
    });
  };
  const handleEmailLogin = (email: string, password: string) => {
@@ -163,7 +163,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
        address: email,
      },
      password,
-      initial_device_display_name: 'Lotus Chat Web',
+      initial_device_display_name: 'Cinny Web',
    });
  };

@@ -57,7 +57,7 @@ export function TokenLogin({ token }: TokenLoginProps) {
    startLogin(baseUrl, {
      type: 'm.login.token',
      token,
-      initial_device_display_name: 'Lotus Chat Web',
+      initial_device_display_name: 'Cinny Web',
    });
  }, [baseUrl, token, startLogin]);

@@ -109,7 +109,7 @@ function RegisterUIAFlow({
        auth: authDict,
        password,
        username,
-        initial_device_display_name: 'Lotus Chat Web',
+        initial_device_display_name: 'Cinny Web',
      });
    },
    [onRegister, formData]
@@ -250,7 +250,7 @@ export function PasswordRegisterForm({
      auth: {
        session: authData.session,
      },
-      initial_device_display_name: 'Lotus Chat Web',
+      initial_device_display_name: 'Cinny Web',
    });
  };

@@ -3,9 +3,9 @@ import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
 import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
-import LogoSVG from '../../../../public/res/lotus.png';
-import LogoUnreadSVG from '../../../../public/res/lotus-unread.png';
-import LogoHighlightSVG from '../../../../public/res/lotus-highlight.png';
+import LogoSVG from '../../../../public/res/svg/cinny.svg';
+import LogoUnreadSVG from '../../../../public/res/svg/cinny-unread.svg';
+import LogoHighlightSVG from '../../../../public/res/svg/cinny-highlight.svg';
 import NotificationSound from '../../../../public/sound/notification.ogg';
 import InviteSound from '../../../../public/sound/invite.ogg';
 import { notificationPermission, setFavicon } from '../../utils/dom';
@@ -22,7 +22,7 @@ export function SpecVersions({ baseUrl, children }: { baseUrl: string; children:
            <Dialog>
              <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
                <Text>
-                  Failed to connect to homeserver. Either homeserver is down or your internet.
+                  Unable to connect to the homeserver. The homeserver or your internet connection may be down.
                </Text>
                <Button variant="Critical" onClick={retry}>
                  <Text as="span" size="B400">
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
 import { Page, PageHero, PageHeroSection } from '../../components/page';
-import LotusLogo from '../../../../public/res/Lotus.png';
-import pkg from '../../../../package.json';
+import CinnySVG from '../../../../public/res/svg/cinny.svg';

 export function WelcomePage() {
  return (
@@ -15,17 +14,17 @@ export function WelcomePage() {
      >
        <PageHeroSection>
          <PageHero
-            icon={<img width="70" height="70" src={LotusLogo} alt="Lotus Chat" style={{ objectFit: "contain" }} />}
-            title="Welcome to Lotus Chat"
+            icon={<img width="70" height="70" src={CinnySVG} alt="Cinny Logo" />}
+            title="Welcome to Cinny"
            subTitle={
              <span>
-                A Matrix client for Lotus Guild.{' '}
+                Yet another matrix client.{' '}
                <a
-                  href="https://code.lotusguild.org/LotusGuild/cinny/releases"
+                  href="https://github.com/cinnyapp/cinny/releases"
                  target="_blank"
                  rel="noreferrer noopener"
                >
-                  v{pkg.version}
+                  v4.11.1
                </a>
              </span>
            }
@@ -34,7 +33,7 @@ export function WelcomePage() {
              <Box grow="Yes" style={{ maxWidth: toRem(300) }} direction="Column" gap="300">
                <Button
                  as="a"
-                  href="https://code.lotusguild.org/LotusGuild/cinny"
+                  href="https://github.com/cinnyapp/cinny"
                  target="_blank"
                  rel="noreferrer noopener"
                  before={<Icon size="200" src={Icons.Code} />}
@@ -45,7 +44,7 @@ export function WelcomePage() {
                </Button>
                <Button
                  as="a"
-                  href="https://matrix.lotusguild.org"
+                  href="https://cinny.in/#sponsor"
                  target="_blank"
                  rel="noreferrer noopener"
                  fill="Soft"
@@ -29,13 +29,17 @@ export class CallControl extends EventEmitter implements CallControlState {
  }

  private get settingsButton(): HTMLElement | undefined {
-    // EC 0.19.3: settings button has data-testid="settings-bottom-center"
-    return (this.document?.querySelector('[data-testid="settings-bottom-center"]') as HTMLElement) ?? undefined;
+    const leaveBtn = this.document?.querySelector('[data-testid="incall_leave"]');
+
+    const settingsButton = leaveBtn?.previousElementSibling as HTMLElement | null;
+
+    return settingsButton ?? undefined;
  }

  private get reactionsButton(): HTMLElement | undefined {
-    // EC 0.19.3: reactions/raise-hand button has a CSS module class containing "raiseHand"
-    return (this.document?.querySelector('[class*="raiseHand"]') as HTMLElement) ?? undefined;
+    const reactionsButton = this.settingsButton?.previousElementSibling as HTMLElement | null;
+
+    return reactionsButton ?? undefined;
  }

  private get spotlightButton(): HTMLInputElement | undefined {
@@ -97,11 +101,6 @@ export class CallControl extends EventEmitter implements CallControlState {
    this.emitStateUpdate();
  }

-  public async forceState(desired: CallControlState) {
-    this.state = new CallControlState(desired.microphone, desired.video, desired.sound, this.screenshare, this.spotlight);
-    await this.applyState();
-  }
-
  public startObserving() {
    this.controlMutationObserver.disconnect();

@@ -161,8 +160,6 @@ export class CallControl extends EventEmitter implements CallControlState {
  }

  public onControlMutation() {
-    const prevScreenshare = this.screenshare;
-
    const screenshare: boolean = this.screenshareButton?.getAttribute('data-kind') === 'primary';
    const spotlight: boolean = this.spotlightButton?.checked ?? false;

@@ -174,19 +171,6 @@ export class CallControl extends EventEmitter implements CallControlState {
      spotlight
    );
    this.emitStateUpdate();
-
-    // EC auto-switches to spotlight when screenshare starts — revert to grid
-    if (!prevScreenshare && screenshare) {
-      setTimeout(() => { if (this.spotlight) this.gridButton?.click(); }, 600);
-    }
-  }
-
-  public setMicrophone(enabled: boolean) {
-    const payload: ElementMediaStatePayload = {
-      audio_enabled: enabled,
-      video_enabled: this.video,
-    };
-    return this.setMediaState(payload);
  }

  public toggleMicrophone() {
@@ -47,26 +47,43 @@ export class CallEmbed {

  private readonly disposables: Array<() => void> = [];

-  private readonly initialState: CallControlState;
-
-  private styleRetryObserver?: MutationObserver;
-
-  static getIntent(dm: boolean, ongoing: boolean): ElementCallIntent {
-    if (ongoing) {
-      return dm ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExisting;
+  static getIntent(dm: boolean, ongoing: boolean, video?: boolean): ElementCallIntent {
+    if (dm && ongoing) {
+      return video ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExistingDMVoice;
+    }
+    if (dm) {
+      return video ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCallDMVoice;
    }

-    return dm ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCall;
+    if (ongoing) {
+      return video ? ElementCallIntent.JoinExisting : ElementCallIntent.JoinExistingVoice;
+    }
+    return video ? ElementCallIntent.StartCall : ElementCallIntent.StartCallVoice;
+  }
+
+  static dmCall(intent: ElementCallIntent): boolean {
+    return (
+      intent === ElementCallIntent.JoinExistingDM ||
+      intent === ElementCallIntent.JoinExistingDMVoice ||
+      intent === ElementCallIntent.StartCallDM ||
+      intent === ElementCallIntent.StartCallDMVoice
+    );
+  }
+
+  static startingCall(intent: ElementCallIntent): boolean {
+    return (
+      intent === ElementCallIntent.StartCallDM ||
+      intent === ElementCallIntent.StartCallDMVoice ||
+      intent === ElementCallIntent.StartCall ||
+      intent === ElementCallIntent.StartCallVoice
+    );
  }

  static getWidget(
    mx: MatrixClient,
    room: Room,
    intent: ElementCallIntent,
-    themeKind: ElementCallThemeKind,
-    noiseSuppression = true,
-    initialAudio = true,
-    initialVideo = false
+    themeKind: ElementCallThemeKind
  ): Widget {
    const userId = mx.getSafeUserId();
    const deviceId = mx.getDeviceId() ?? '';
@@ -88,11 +105,13 @@ export class CallEmbed {
      perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
      lang: 'en-EN',
      theme: themeKind,
-      noiseSuppression: noiseSuppression.toString(),
-      audio: initialAudio.toString(),
-      video: initialVideo.toString(),
+      header: 'none',
    });

+    if (!room.isCallRoom() && CallEmbed.startingCall(intent)) {
+      params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
+    }
+
    const widgetUrl = new URL(
      `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
      window.location.origin
@@ -153,7 +172,6 @@ export class CallEmbed {

    const controlState = initialControlState ?? new CallControlState(true, false, true);
    this.control = new CallControl(controlState, call, iframe);
-    this.initialState = controlState;

    let initialMediaEvent = true;
    this.disposables.push(
@@ -238,7 +256,6 @@ export class CallEmbed {
    this.disposables.forEach((disposable) => {
      disposable();
    });
-    this.styleRetryObserver?.disconnect();
    this.call.stop();
    this.container.removeChild(this.iframe);
    this.control.dispose();
@@ -257,8 +274,6 @@ export class CallEmbed {
    this.joined = true;
    this.applyStyles();
    this.control.startObserving();
-    // EC ignores io.element.device_mute before join; re-apply desired state now that EC is live
-    this.control.forceState(this.initialState);
  }

  private applyStyles(): void {
@@ -266,33 +281,11 @@ export class CallEmbed {
    if (!doc) return;

    doc.body.style.setProperty('background', 'none', 'important');
-
-    // Inject CSS for things that can't be reliably caught by DOM timing
-    if (!doc.getElementById('lotus-ec-styles')) {
-      const style = doc.createElement('style');
-      style.id = 'lotus-ec-styles';
-      style.textContent = [
-        'body { background: none !important; }',
-        // Hide "using to Device key transport" status line
-        '[style*="height: 0"][style*="z-index: 1"][style*="align-self: center"] { display: none !important; }',
-      ].join('\n');
-      (doc.head ?? doc.body).appendChild(style);
-    }
-
-    // Hide EC built-in controls (we provide our own)
-    const leaveBtn = doc.body.querySelector('[data-testid="incall_leave"]');
-    if (leaveBtn) {
-      this.styleRetryObserver?.disconnect();
-      this.styleRetryObserver = undefined;
-      const controls = leaveBtn.parentElement?.parentElement;
-      if (controls) {
-        controls.style.setProperty('position', 'absolute');
-        controls.style.setProperty('visibility', 'hidden');
-      }
-    } else if (!this.styleRetryObserver) {
-      // Controls not in DOM yet — observe and retry when they appear
-      this.styleRetryObserver = new MutationObserver(() => this.applyStyles());
-      this.styleRetryObserver.observe(doc.body, { childList: true, subtree: true });
+    const controls = doc.body.querySelector('[data-testid="incall_leave"]')?.parentElement
+      ?.parentElement;
+    if (controls) {
+      controls.style.setProperty('position', 'absolute');
+      controls.style.setProperty('visibility', 'hidden');
    }
  }

@@ -1,6 +1,8 @@
 export enum ElementCallIntent {
  StartCall = 'start_call',
  JoinExisting = 'join_existing',
+  StartCallVoice = 'start_call_voice',
+  JoinExistingVoice = 'join_existing_voice',
  StartCallDM = 'start_call_dm',
  JoinExistingDM = 'join_existing_dm',
  StartCallDMVoice = 'start_call_dm_voice',
@@ -78,19 +78,13 @@ export function getCallCapabilities(
    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw
  );

-  capabilities.add(
-    WidgetEventCapability.forRoomEvent(
-      EventDirection.Receive,
-      'org.matrix.msc4075.rtc.notification'
-    ).raw
-  );
-
  [
    'io.element.call.encryption_keys',
    'org.matrix.rageshake_request',
    EventType.Reaction,
    EventType.RoomRedaction,
    'io.element.call.reaction',
+    'org.matrix.msc4075.rtc.notification',
    'org.matrix.msc4310.rtc.decline',
  ].forEach((type) => {
    capabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Send, type).raw);
@@ -16,8 +16,12 @@ export const CodeBlockRule: BlockMDRule = {
  match: (text) => text.match(CODEBLOCK_REG_1),
  html: (match) => {
    const [, g1, g2] = match;
-    const classNameAtt = g1 ? ` class="language-${g1}"` : '';
-    return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}>${g2}</code></pre>`;
+    // use last identifier after dot, e.g. for "example.json" gets us "json" as language code.
+    const langCode = g1 ? g1.substring(g1.lastIndexOf('.') + 1) : null;
+    const filename = g1 !== langCode ? g1 : null;
+    const classNameAtt = langCode ? ` class="language-${langCode}"` : '';
+    const filenameAtt = filename ? ` data-label="${filename}"` : '';
+    return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}${filenameAtt}>${g2}</code></pre>`;
  },
 };

@@ -232,8 +232,9 @@ export function CodeBlock({
  opts: HTMLReactParserOptions;
 }) {
  const code = children[0];
-  const languageClass =
-    code instanceof Element && code.name === 'code' ? code.attribs.class : undefined;
+  const attribs = code instanceof Element && code.name === 'code' ? code.attribs : undefined;
+  const languageClass = attribs?.class;
+  const customLabel = attribs?.['data-label'];
  const language =
    languageClass && languageClass.startsWith('language-')
      ? languageClass.replace('language-', '')
@@ -262,7 +263,7 @@ export function CodeBlock({
      <Header variant="Surface" size="400" className={css.CodeBlockHeader}>
        <Box grow="Yes">
          <Text size="L400" truncate>
-            {language ?? 'Code'}
+            {customLabel ?? language ?? 'Code'}
          </Text>
        </Box>
        <Box shrink="No" gap="200">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Krishan	cead3cac50	Merge branch 'dev' into dm-calls	2026-05-13 18:53:36 +10:00
Ajay Bura	597785bae9	show call not supported message on incoming call notification	2026-05-13 10:09:13 +05:30
Ajay Bura	587e25db13	update call menu style	2026-05-13 10:01:11 +05:30
Ajay Bura	697d0a4e2f	prevent call join if call not supported and started by other party	2026-05-13 09:24:15 +05:30
dependabot[bot]	2864a5e4b8	chore(deps): bump dawidd6/action-download-artifact from 20 to 21 (#2925 ) Bumps [dawidd6/action-download-artifact](https://github.com/dawidd6/action-download-artifact) from 20 to 21. - [Release notes](https://github.com/dawidd6/action-download-artifact/releases) - [Commits](https://github.com/dawidd6/action-download-artifact/compare/8305c0f1062bb0d184d09ef4493ecb9288447732...b6e2e70617bc3265edd6dab6c906732b2f1ae151) --- updated-dependencies: - dependency-name: dawidd6/action-download-artifact dependency-version: '21' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-05-12 15:34:41 +10:00
Ajay Bura	735bc15011	fix: empty heading crash on edit msg (#2929 ) * fix crash when editing message with empty trailing heading * remove unused imports	2026-05-11 22:59:43 +10:00
Ajay Bura	4cdace0ffc	hide header call button from voice rooms	2026-05-07 15:51:04 +05:30
Ajay Bura	73c19555a5	Merge branch 'dev' into dm-calls	2026-05-07 18:30:02 +10:00
Ajay Bura	d086b31530	send notification when starting call in non-voice rooms	2026-05-07 13:59:31 +05:30
Ajay Bura	d5840ae37b	allow option to start call in all rooms	2026-05-07 13:58:48 +05:30
Ajay Bura	5617a6edc6	fix call permission checks	2026-05-07 13:58:18 +05:30
Ajay Bura	37d6c5aece	show incoming call dialog and play sound	2026-05-06 14:49:37 +05:30
Shea	341fedd932	fix: edit lists crashing and list rendering issue in Firefox (#2920 ) * one liner fix editor * fix firefox rendering lists * moved fixes * moved fixes per ajbura	2026-05-03 22:15:08 +10:00
Ajay Bura	084d442afa	allow call widget to send call notification event	2026-04-27 20:15:25 +05:30
Ajay Bura	c7c7f1ab42	only show call button if user have permission	2026-04-26 14:03:29 +05:30
Ajay Bura	d6f19711ba	Merge branch 'dev' into dm-calls	2026-04-26 18:16:27 +10:00
Ajay Bura	4a7eda1f8c	add option to start voice/video call in dms	2026-04-26 13:45:49 +05:30
Ajay Bura	ac89dbb4d0	update element call and widget api	2026-04-26 13:45:33 +05:30
dependabot[bot]	d186d31399	chore(deps): bump actions/setup-node from 6.3.0 to 6.4.0 (#2906 ) Bumps [actions/setup-node](https://github.com/actions/setup-node) from 6.3.0 to 6.4.0. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/53b83947a5a98c8d113130e565377fae1a50d02f...48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e) --- updated-dependencies: - dependency-name: actions/setup-node dependency-version: 6.4.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-21 10:12:30 +10:00
James	098684973e	fix: do not attempt to join call on doubleclick if missing permissions (#2798 ) * fix: do not attempt to join call on doubleclick if missing permissions * update comment * export getPowersLevelFromMatrixEvent for usage elsewhere * only read vc permissions when actually needed instead of reactively	2026-04-16 22:25:53 +10:00
Krishan	b107109453	chore: remove package group definitions from renovate config (#2898 ) Removed group definitions for Slatejs and Call.	2026-04-16 22:00:39 +10:00
dependabot[bot]	a33e8db9a3	chore(deps): bump dawidd6/action-download-artifact from 16 to 20 (#2880 ) Bumps [dawidd6/action-download-artifact](https://github.com/dawidd6/action-download-artifact) from 16 to 20. - [Release notes](https://github.com/dawidd6/action-download-artifact/releases) - [Commits](https://github.com/dawidd6/action-download-artifact/compare/2536c51d3d126276eb39f74d6bc9c72ac6ef30d3...8305c0f1062bb0d184d09ef4493ecb9288447732) --- updated-dependencies: - dependency-name: dawidd6/action-download-artifact dependency-version: '20' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-14 14:36:52 +10:00
dependabot[bot]	fb76e3ecb4	chore(deps): bump actions/upload-artifact from 7.0.0 to 7.0.1 (#2893 ) Bumps [actions/upload-artifact](https://github.com/actions/upload-artifact) from 7.0.0 to 7.0.1. - [Release notes](https://github.com/actions/upload-artifact/releases) - [Commits](https://github.com/actions/upload-artifact/compare/bbbca2ddaa5d8feaa63e36b76fdaad77386f024f...043fb46d1a93c77aae656e7c1c64a875d1fc6a0a) --- updated-dependencies: - dependency-name: actions/upload-artifact dependency-version: 7.0.1 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-14 14:33:37 +10:00
dependabot[bot]	3d79293167	chore(deps): bump softprops/action-gh-release from 2.3.3 to 3.0.0 (#2892 ) Bumps [softprops/action-gh-release](https://github.com/softprops/action-gh-release) from 2.3.3 to 3.0.0. - [Release notes](https://github.com/softprops/action-gh-release/releases) - [Changelog](https://github.com/softprops/action-gh-release/blob/master/CHANGELOG.md) - [Commits](https://github.com/softprops/action-gh-release/compare/6cbd405e2c4e67a21c47fa9e383d020e4e28b836...b4309332981a82ec1c5618f44dd2e27cc8bfbfda) --- updated-dependencies: - dependency-name: softprops/action-gh-release dependency-version: 3.0.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-14 14:33:01 +10:00
dependabot[bot]	74745edcda	chore(deps): bump nginx from 1.29.5-alpine to 1.29.8-alpine (#2894 ) Bumps nginx from 1.29.5-alpine to 1.29.8-alpine. --- updated-dependencies: - dependency-name: nginx dependency-version: 1.29.8-alpine dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-14 14:31:53 +10:00
dependabot[bot]	0812131a97	chore(deps): bump docker/build-push-action from 6.19.2 to 7.1.0 (#2895 ) Bumps [docker/build-push-action](https://github.com/docker/build-push-action) from 6.19.2 to 7.1.0. - [Release notes](https://github.com/docker/build-push-action/releases) - [Commits](https://github.com/docker/build-push-action/compare/10e90e3645eae34f1e60eeb005ba3a3d33f178e8...bcafcacb16a39f128d818304e6c9c0c18556b85f) --- updated-dependencies: - dependency-name: docker/build-push-action dependency-version: 7.1.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-14 14:27:58 +10:00
dependabot[bot]	1068bba5c7	chore(deps): bump docker/login-action from 3.7.0 to 4.1.0 (#2879 ) Bumps [docker/login-action](https://github.com/docker/login-action) from 3.7.0 to 4.1.0. - [Release notes](https://github.com/docker/login-action/releases) - [Commits](https://github.com/docker/login-action/compare/c94ce9fb468520275223c153574b00df6fe4bcc9...4907a6ddec9925e35a0a9e82d7399ccc52663121) --- updated-dependencies: - dependency-name: docker/login-action dependency-version: 4.1.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-04-14 14:26:52 +10:00
Ajay Bura	d3cc7ef822	add Atria call ringtone	2026-04-07 20:23:52 +05:30
DJ Chase	1b5e58a3b4	chore: add matrixrooms.info to directory list (#2844 ) * chore: add matrixrooms.info to directory list matrixrooms.info is a directory of all public Matrix rooms it can find, regardless of homeserver. It is much larger than the morg directory, so is more useful as a general search	2026-03-28 17:35:53 +11:00
Krishan	acae043f31	chore: make error more useful and understandable (#2859 ) * chore: make error more useful and understandable * chore: use similar wording	2026-03-27 21:22:46 +11:00
ranidspace	b4299f8f37	feat: add YYYY-MM-DD (ISO 8601) date format to presets (#2712 ) * Add YYYY-MM-DD (ISO 8601) date format to presets * Fix formatting due to added date format	2026-03-27 21:20:10 +11:00
Krishan	b6adac6714	chore: add notice about SDK replacement (#2778 )	2026-03-25 12:10:15 +11:00
DJ Chase	1c8f203164	chore: add 'Stickers and Emojis' as featured space (#2842 ) * Mention CLA in CONTRIBUTING.md Closes: #2146 * add: 'Stickers and Emojis' to config.json Add #stickers-and-emojis:tastytea.de (space) to config.json	2026-03-25 12:09:16 +11:00
Krishan	0c30ece281	fix: remove typo in no rooms UI (#2834 )	2026-03-23 16:57:52 +11:00
Krishan	4e559e56d4	chore: group related package update together (#2833 )	2026-03-23 16:49:22 +11:00
Krishan	19f28b40ac	chore: use private vulnerability disclosure (#2827 )	2026-03-22 18:29:09 +11:00
Krishan	bcaf43a540	chore: fix link in issue triage template (#2826 ) * chore: fix link in issue triage template * chore: delete .github/PULL_REQUEST_TEMPLATE.md	2026-03-22 18:20:33 +11:00
Krishan	9c7b635e7e	chore: add new issue triage discussion template (#2825 ) * chore: add new issue triage discussion template * chore: ask for desktop app version as well * chore: create preapproved.md	2026-03-22 17:55:53 +11:00
Krishan	65c87dff3a	chore: add git author to the sem release (#2815 )	2026-03-21 12:07:52 +11:00
Krishan	132a76df27	chore: add semantic release (#2759 ) * chore: install deps related to semantic release * chore: add husky config * ci: add a script to update version number on new release * ci: update ci/cd to include semantic release changes * chore: merge dev to semantic-release	2026-03-19 16:26:25 +11:00
DJ Chase	b0954eeddc	fix: Mention CLA in CONTRIBUTING.md (#2804 ) Mention CLA in CONTRIBUTING.md Closes: #2146	2026-03-19 11:41:41 +11:00
Ajay Bura	8f1add6059	fix: prevent codeblock filename drop on edit (#2780 ) prevent codeblock filename drop on edit	2026-03-15 15:37:14 +11:00
Jan Jurzitza	8a78c9699e	feat: allow using filenames in codeblocks (#2455 ) Allow using filenames in codeblocks - If there is a dot in the language name, we instead treat the first line after ``` as the filename and everything after the last dot as the language - we use a custom "data-label" attribute on the code block to specify the name of the file (so only compatible with cinny from this point onwards)	2026-03-14 18:54:03 +11:00
Krishan	0721b29a2c	chore: batch slate related deps (#2775 )	2026-03-14 17:22:57 +11:00
Ajay Bura	3d354909d6	fix: hover state on url preview image and make it keyboard friendly (#2777 ) add hover state on url preview image and make it keyboard friendly	2026-03-14 17:22:18 +11:00
LeaPhant	7570a84dfd	Show image viewer when clicking url preview thumbnail (#2309 ) * Show large image overlay when clicking url preview thumbnail * Move image overlay into its own component * Move ImageOverlay props into extended type * Remove export for internal type	2026-03-14 11:04:55 +05:30
Ajay Bura	0354709625	Merge branch 'dev' into dm-calls	2026-03-13 02:03:12 +11:00
Ajay Bura	acd75838c3	show call view if call is active in room	2026-03-09 09:39:14 +05:30
Ajay Bura	374bfd1ce8	show speaker icon for dm's in call status name	2026-03-09 09:38:45 +05:30
Ajay Bura	13bdf654ef	add option to start video all in DM	2026-03-09 09:27:35 +05:30