fix success and critical color hover+active color

.github/DISCUSSION_TEMPLATE/issue-triage.yml

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.yml

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

.github/ISSUE_TEMPLATE/preapproved.md

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/SECURITY.md

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

.github/renovate.json

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

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

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

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

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

.github/workflows/docker-pr.yml

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

.github/workflows/netlify-dev.yml

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

.github/workflows/prod-deploy.yml

@@ -12,9 +12,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
           package-manager-cache: false
       - name: Install dependencies
         run: npm ci
@@ -52,7 +52,7 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
+        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
@@ -72,12 +72,12 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
       - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -90,7 +90,7 @@ jobs:
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.husky/pre-commit

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

CONTRIBUTING.md

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

Dockerfile

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

README.md

@@ -16,10 +16,6 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
 - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
 - [Contributing](./CONTRIBUTING.md)
 
-> [!IMPORTANT] 
-We are currently in the [process of replacing the matrix-js-sdk](https://github.com/cinnyapp/cinny/issues/257#issuecomment-3714406704) with our own SDK. As a result, we will not be accepting any pull requests until further notice.
-Thank you for your understanding.
-
 <img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
 
 ## Getting started

config.json

@@ -6,22 +6,22 @@
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [
-      "#cinny:matrix.org",
+      "#cinny-space:matrix.org",
       "#community:matrix.org",
       "#space:unredacted.org",
-      "#librewolf-community:matrix.org",
-      "#stickers-and-emojis:tastytea.de",
-      "#videogames:waywardinn.com",
       "#science-space:matrix.org",
       "#libregaming-games:tchncs.de",
       "#mathematics-on:matrix.org"
     ],
     "rooms": [
-      "#tuwunel:grin.hu",
+      "#cinny:matrix.org",
       "#freesoftware:matrix.org",
-      "#gentoo: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"]
+    "servers": ["matrix.org", "mozilla.org", "unredacted.org"]
   },
 
   "hashRouter": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.12.2",
+  "version": "4.11.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -11,23 +11,11 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "npm run check:eslint && npm run check:prettier",
+    "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit"
-    "prepare": "husky install",
-    "commit": "git-cz",
-    "bump": "node scripts/update-version.js"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx}": "eslint",
-    "*": "prettier --ignore-unknown --write"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
   },
   "keywords": [],
   "author": "Ajay Bura",
@@ -67,8 +55,8 @@
     "jotai": "2.6.0",
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
-    "matrix-js-sdk": "41.5.0",
+    "matrix-js-sdk": "38.2.0",
-    "matrix-widget-api": "1.16.1",
+    "matrix-widget-api": "1.13.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -82,15 +70,15 @@
     "react-i18next": "15.0.0",
     "react-range": "1.8.14",
     "react-router-dom": "6.30.3",
-    "sanitize-html": "2.17.4",
+    "sanitize-html": "2.12.1",
-    "slate": "0.123.0",
+    "slate": "0.112.0",
-    "slate-dom": "0.123.0",
+    "slate-dom": "0.112.2",
-    "slate-history": "0.113.1",
+    "slate-history": "0.110.3",
-    "slate-react": "0.123.0",
+    "slate-react": "0.112.1",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.19.1",
+    "@element-hq/element-call-embedded": "0.16.3",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
@@ -102,13 +90,12 @@
     "@types/react": "18.2.39",
     "@types/react-dom": "18.2.17",
     "@types/react-google-recaptcha": "2.1.8",
-    "@types/sanitize-html": "2.16.1",
+    "@types/sanitize-html": "2.9.0",
     "@types/ua-parser-js": "0.7.36",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
     "@vitejs/plugin-react": "4.2.0",
     "buffer": "6.0.3",
-    "cz-conventional-changelog": "3.3.0",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
@@ -116,8 +103,6 @@
     "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",
     "typescript": "4.9.4",
     "vite": "5.4.19",

scripts/update-version.js

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

src/app/components/CallEmbedProvider.tsx

@@ -1,31 +1,6 @@
-/* eslint-disable jsx-a11y/media-has-caption */
+import React, { ReactNode, useCallback, useRef } from 'react';
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import FocusTrap from 'focus-trap-react';
+import { config } from 'folds';
-import {
-  Avatar,
-  Box,
-  Button,
-  color,
-  config,
-  Dialog,
-  Icon,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  toRem,
-} from 'folds';
-import {
-  EventTimelineSetHandlerMap,
-  EventType,
-  RelationType,
-  Room,
-  RoomEvent,
-} from 'matrix-js-sdk';
-import { IRTCNotificationContent, RTCNotificationType } from 'matrix-js-sdk/lib/matrixrtc/types';
-import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import {
   CallEmbedContextProvider,
   CallEmbedRefContextProvider,
@@ -33,319 +8,11 @@ import {
   useCallJoined,
   useCallThemeSync,
   useCallMemberSoundSync,
-  useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { CallEmbed } from '../plugins/call';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import CallSound from '../../../public/sound/call.ogg';
-import { useCallMembersChange, useCallSession } from '../hooks/useCall';
-import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
-import { mDirectAtom } from '../state/mDirectList';
-import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
-import { mxcUrlToHttp } from '../utils/matrix';
-import { RoomAvatar, RoomIcon } from './room-avatar';
-import { useRoomNavigate } from '../hooks/useRoomNavigate';
-import { getStateEvent } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
-import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
-import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
-import { useLivekitSupport } from '../hooks/useLivekitSupport';
-import { CallAvatarAnimation } from '../styles/Animations.css';
-import { webRTCSupported } from '../utils/rtc';
-
-type IncomingCallInfo = {
-  room: Room;
-  sender: string;
-  senderTs: number;
-  lifetime: number;
-  intent?: string;
-  notificationType: RTCNotificationType;
-  refEventId: string;
-};
-type IncomingCallProps = {
-  dm: boolean;
-  info: IncomingCallInfo;
-  onIgnore: () => void;
-  onAnswer: (room: Room, video: boolean) => void;
-  onReject: (room: Room, eventId: string) => void;
-};
-function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const livekitSupported = useLivekitSupport();
-  const rtcSupported = webRTCSupported();
-  const canAnswer = livekitSupported && rtcSupported;
-  const { room } = info;
-
-  const audioRef = useRef<HTMLAudioElement>(null);
-
-  const roomName = useRoomName(room);
-  const roomAvatar = useRoomAvatar(room, dm);
-  const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
-    : undefined;
-
-  const session = useCallSession(room);
-  useCallMembersChange(
-    session,
-    useCallback(
-      (members) => {
-        if (members.length === 0) {
-          onIgnore();
-        }
-      },
-      [onIgnore]
-    )
-  );
-
-  const playSound = useCallback(() => {
-    const audioElement = audioRef.current;
-    audioElement?.play();
-  }, []);
-
-  useEffect(() => {
-    if (info.notificationType === 'ring') {
-      playSound();
-    }
-  }, [playSound, info.notificationType]);
-
-  return (
-    <>
-      <Overlay open backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => onIgnore(),
-              clickOutsideDeactivates: false,
-              escapeDeactivates: false,
-            }}
-          >
-            <Dialog style={{ maxWidth: toRem(324) }}>
-              <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
-                <Text size="T200" align="Center">
-                  {info.sender}
-                </Text>
-                <Box direction="Column" gap="500" alignItems="Center">
-                  <Box shrink="No">
-                    <Avatar size="500" className={CallAvatarAnimation}>
-                      <RoomAvatar
-                        roomId={room.roomId}
-                        src={avatarUrl}
-                        alt={roomName}
-                        renderFallback={() => (
-                          <RoomIcon
-                            roomType={room.getType()}
-                            size="400"
-                            joinRule={room.getJoinRule()}
-                            filled
-                          />
-                        )}
-                      />
-                    </Avatar>
-                  </Box>
-                  <Box grow="Yes" direction="Column" gap="100">
-                    <Text size="H3" align="Center" truncate>
-                      {roomName}
-                    </Text>
-                    <Text size="T300">Incoming Call</Text>
-                  </Box>
-                </Box>
-                {!livekitSupported && (
-                  <Text
-                    style={{ margin: 'auto', color: color.Critical.Main }}
-                    size="L400"
-                    align="Center"
-                  >
-                    Your homeserver does not support calling.
-                  </Text>
-                )}
-                {!webRTCSupported && (
-                  <Text
-                    style={{ margin: 'auto', color: color.Critical.Main }}
-                    size="L400"
-                    align="Center"
-                  >
-                    Your browser does not support WebRTC, which is required for calling.
-                  </Text>
-                )}
-                <Box direction="Column" gap="300">
-                  <Button
-                    style={{ flexGrow: 1 }}
-                    variant="Success"
-                    size="400"
-                    radii="400"
-                    onClick={() => onAnswer(room, info.intent === 'video')}
-                    before={
-                      <Icon
-                        size="200"
-                        src={info.intent === 'video' ? Icons.VideoCamera : Icons.Phone}
-                        filled
-                      />
-                    }
-                    disabled={!canAnswer}
-                  >
-                    <Text as="span" size="B400">
-                      Answer
-                    </Text>
-                  </Button>
-                  <Button
-                    style={{ flexGrow: 1 }}
-                    variant="Success"
-                    fill="Soft"
-                    size="400"
-                    radii="400"
-                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
-                    before={<Icon size="200" src={Icons.Cross} filled />}
-                  >
-                    <Text as="span" size="B400">
-                      {dm ? 'Reject' : 'Ignore'}
-                    </Text>
-                  </Button>
-                </Box>
-              </Box>
-            </Dialog>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-      <audio ref={audioRef} loop style={{ display: 'none' }}>
-        <source src={CallSound} type="audio/ogg" />
-      </audio>
-    </>
-  );
-}
-
-type IncomingCallListenerProps = {
-  callEmbed?: CallEmbed;
-  joined?: boolean;
-};
-function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps) {
-  const mx = useMatrixClient();
-  const directs = useAtomValue(mDirectAtom);
-  const { navigateRoom } = useRoomNavigate();
-
-  const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
-  const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
-  const startCall = useCallStart(dm);
-
-  const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
-    async (event, room, toStartOfTimeline, removed, data) => {
-      // only process rtc notification reference events.
-      // we do not want to wait to decrypt all events.
-      if (event.getRelation()?.rel_type !== RelationType.Reference) return;
-
-      if (event.isEncrypted()) {
-        if (!event.isBeingDecrypted()) {
-          await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
-        }
-        await event.getDecryptionPromise();
-      }
-
-      if (
-        !room ||
-        event.getType() !== EventType.RTCNotification ||
-        event.getSender() === mx.getSafeUserId() ||
-        !data.liveEvent
-      ) {
-        return;
-      }
-
-      const sender = event.getSender();
-      const content = event.getContent<IRTCNotificationContent>();
-      const senderTs =
-        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
-      const lifetime = Math.min(content.lifetime, 120000);
-      const notificationType = content.notification_type;
-      const relation =
-        event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
-      const refEventId = relation?.event_id;
-
-      const mention =
-        content['m.mentions']?.room ||
-        content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
-      if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
-        return;
-      }
-
-      const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
-      const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
-      const creators = getRoomCreatorsForRoomId(mx, room.roomId);
-      const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
-      const hasCallPermission = permissions.stateEvent(
-        StateEvent.GroupCallMemberPrefix,
-        mx.getSafeUserId()
-      );
-      if (!hasCallPermission) return;
-
-      const info: IncomingCallInfo = {
-        room,
-        sender,
-        senderTs,
-        lifetime,
-        intent:
-          'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
-            ? content['m.call.intent']
-            : undefined,
-        notificationType,
-        refEventId,
-      };
-
-      setCallInfo(info);
-    },
-    [mx]
-  );
-
-  useEffect(() => {
-    mx.on(RoomEvent.Timeline, handleTimelineEvent);
-    return () => {
-      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-    };
-  }, [mx, handleTimelineEvent]);
-
-  const handleIgnore = useCallback(() => {
-    setCallInfo(undefined);
-  }, []);
-
-  const handleReject = useCallback(
-    (room: Room, eventId: string) => {
-      mx.sendEvent(room.roomId, EventType.RTCDecline, {
-        'm.relates_to': {
-          rel_type: RelationType.Reference,
-          event_id: eventId,
-        },
-      });
-      setCallInfo(undefined);
-    },
-    [mx]
-  );
-
-  const handleAnswer = useCallback(
-    (room: Room, video: boolean) => {
-      startCall(room, { microphone: true, video, sound: true });
-      setCallInfo(undefined);
-      navigateRoom(room.roomId);
-    },
-    [startCall, navigateRoom]
-  );
-
-  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
-    return null;
-  }
-  return !joined && callInfo ? (
-    <IncomingCall
-      dm={dm}
-      info={callInfo}
-      onIgnore={handleIgnore}
-      onAnswer={handleAnswer}
-      onReject={handleReject}
-    />
-  ) : null;
-}
 
 function CallUtils({ embed }: { embed: CallEmbed }) {
   const setCallEmbed = useSetAtom(callEmbedAtom);
@@ -381,10 +48,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   return (
     <CallEmbedContextProvider value={callEmbed}>
       {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>
+      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
-        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
-        {children}
-      </CallEmbedRefContextProvider>
       <div
         data-call-embed-container
         style={{

src/app/components/ImageOverlay.tsx

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

src/app/components/editor/input.ts

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

src/app/components/editor/output.ts

@@ -11,7 +11,7 @@ import {
 } from '../../plugins/markdown';
 import { findAndReplace } from '../../utils/findAndReplace';
 import { sanitizeForRegex } from '../../utils/regex';
-import { isUserId } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
 
 export type OutputOptions = {
   allowTextFormatting?: boolean;
@@ -215,7 +215,7 @@ export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): M
       if (node.name === '@room') {
         mentionData.room = true;
       }
-
+      
       if (isUserId(node.id) && node.id !== mx.getUserId()) {
         mentionData.users.add(node.id);
       }

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

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

src/app/components/page/Page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Box, Spinner } from 'folds';
-import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
 import * as css from './styles.css';
 import { CallRoomName } from './CallRoomName';
 import { CallControl } from './CallControl';
-import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
 import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { MemberGlance } from './MemberGlance';
@@ -22,7 +20,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const { room } = callEmbed;
 
   const callSession = useCallSession(room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(room, callSession);
   const screenSize = useScreenSize();
   const callJoined = useCallJoined(callEmbed);
   const speakers = useCallSpeakers(callEmbed);
@@ -33,7 +31,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
 
   return (
     <Box
-      className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
+      className={css.CallStatus}
       shrink="No"
       gap="400"
       alignItems={compact ? undefined : 'Center'}

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

@@ -82,7 +82,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
 
                     return (
                       <MenuItem
-                        key={callMember.memberId}
+                        key={callMember.membershipID}
                         size="400"
                         variant="Surface"
                         radii="300"

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

@@ -29,7 +29,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
   return (
     <Box alignItems="Center">
       {visibleMembers.map((callMember) => {
-        const { userId } = callMember;
+        const userId = callMember.sender;
         if (!userId) return null;
         const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
         const avatarMxc = getMemberAvatarMxc(room, userId);
@@ -39,7 +39,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
 
         return (
           <StackedAvatar
-            key={callMember.memberId}
+            key={callMember.membershipID}
             className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
             title={name}
             as="button"

src/app/features/call/CallMemberCard.tsx

@@ -1,4 +1,4 @@
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import React, { useState } from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -12,6 +12,12 @@ import { UserAvatar } from '../../components/user-avatar';
 import { getMouseEventCords } from '../../utils/dom';
 import * as css from './styles.css';
 
+interface MemberWithMembershipData {
+  membershipData?: SessionMembershipData & {
+    'm.call.intent': 'video' | 'audio';
+  };
+}
+
 type CallMemberCardProps = {
   member: CallMembership;
 };
@@ -22,7 +28,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
 
   const openUserProfile = useOpenUserRoomProfile();
 
-  const { userId } = member;
+  const userId = member.sender;
   if (!userId) return null;
 
   const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -31,12 +37,13 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
     : undefined;
 
-  const audioOnly = member.callIntent === 'audio';
+  const audioOnly =
+    (member as unknown as MemberWithMembershipData).membershipData?.['m.call.intent'] === 'audio';
 
   return (
     <SequenceCard
       as="button"
-      key={member.memberId}
+      key={member.membershipID}
       className={css.CallMemberCard}
       variant="SurfaceVariant"
       radii="500"
@@ -85,7 +92,7 @@ export function CallMemberRenderer({
   return (
     <>
       {truncatedMembers.map((member) => (
-        <CallMemberCard key={member.memberId} member={member} />
+        <CallMemberCard key={member.membershipID} member={member} />
       ))}
       {members.length > max && (
         <SequenceCard

src/app/features/call/CallView.tsx

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

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

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

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

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

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

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

src/app/features/lobby/Lobby.tsx

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

src/app/features/lobby/SpaceItem.tsx

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

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

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

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

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

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

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

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

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

src/app/features/room/CallChatView.tsx

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

src/app/features/room/MembersDrawer.tsx

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

src/app/features/room/Room.tsx

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

src/app/features/room/RoomTimeline.tsx

@@ -27,6 +27,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
+import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
@@ -1474,7 +1475,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const content = mEvent.getContent();
+        const content = mEvent.getContent<SessionMembershipData>();
         const prevContent = mEvent.getPrevContent();
 
         const callJoined = content.application;

src/app/features/room/RoomView.tsx

@@ -14,7 +14,6 @@ import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
-import { Page } from '../../components/page';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
@@ -91,7 +90,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
   );
 
   return (
-    <Page ref={roomViewRef}>
+    <Box grow="Yes" direction="Column" ref={roomViewRef}>
       <Box grow="Yes" direction="Column">
         <RoomTimeline
           key={roomId}
@@ -135,6 +134,6 @@ export function RoomView({ eventId }: { eventId?: string }) {
         </div>
         {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
-    </Page>
+    </Box>
   );
 }

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

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

src/app/features/room/RoomViewHeader.tsx

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

src/app/features/search/Search.tsx

@@ -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

src/app/features/settings/about/About.tsx

@@ -46,7 +46,7 @@ export function About({ requestClose }: AboutProps) {
                   <Box direction="Column" gap="100">
                     <Box gap="100" alignItems="End">
                       <Text size="H3">Cinny</Text>
-                      <Text size="T200">v4.12.2</Text>
+                      <Text size="T200">v4.11.0</Text>
                     </Box>
                     <Text>Yet another matrix client.</Text>
                   </Box>

src/app/hooks/useCall.ts

@@ -2,7 +2,6 @@ import { Room } from 'matrix-js-sdk';
 import {
   MatrixRTCSession,
   MatrixRTCSessionEvent,
-  MatrixRTCSessionEventHandlerMap,
 } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import { useEffect, useState } from 'react';
@@ -34,27 +33,32 @@ export const useCallSession = (room: Room): MatrixRTCSession => {
   return session;
 };
 
-export const useCallMembersChange = (
+export const useCallMembers = (room: Room, session: MatrixRTCSession): CallMembership[] => {
-  session: MatrixRTCSession,
+  const [memberships, setMemberships] = useState<CallMembership[]>(
-  callback: (members: CallMembership[]) => void
+    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription)
-): void => {
+  );
+
   useEffect(() => {
-    const handleMembershipsChange: MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.MembershipsChanged] =
+    const updateMemberships = () => {
-      (oldestMembership, newMemberships) => {
+      setMemberships(MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription));
-        callback(newMemberships);
-      };
-
-    session.on(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
-    return () => {
-      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
     };
-  }, [session, callback]);
-};
 
-export const useCallMembers = (session: MatrixRTCSession): CallMembership[] => {
+    updateMemberships();
-  const [memberships, setMemberships] = useState<CallMembership[]>(session.memberships);
 
-  useCallMembersChange(session, setMemberships);
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [session, room]);
 
   return memberships;
 };
+
+export const useCallMembersChange = (session: MatrixRTCSession, callback: () => void): void => {
+  useEffect(() => {
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, callback);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, callback);
+    };
+  }, [session, callback]);
+};

src/app/hooks/useCallEmbed.ts

@@ -1,4 +1,5 @@
 import { createContext, RefObject, useCallback, useContext, useEffect, useState } from 'react';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { MatrixClient, Room } from 'matrix-js-sdk';
 import { useSetAtom } from 'jotai';
 import {
@@ -44,9 +45,10 @@ export const createCallEmbed = (
   pref?: CallPreferences
 ): CallEmbed => {
   const rtcSession = mx.matrixRTC.getRoomSession(room);
-  const ongoing = rtcSession.memberships.length > 0;
+  const ongoing =
+    MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;
 
-  const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
+  const intent = CallEmbed.getIntent(dm, ongoing);
   const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
   const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);
 
@@ -99,7 +101,6 @@ 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) => {

src/app/hooks/useCallSpeakers.ts

@@ -8,7 +8,7 @@ import { useCallJoined } from './useCallEmbed';
 export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const [speakers, setSpeakers] = useState(new Set<string>());
   const callSession = useCallSession(callEmbed.room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(callEmbed.room, callSession);
   const joined = useCallJoined(callEmbed);
 
   const videoContainers = useMemo(() => {

src/app/hooks/useDateFormat.ts

@@ -25,10 +25,6 @@ export const useDateFormatItems = (): DateFormatItem[] =>
         format: 'YYYY/MM/DD',
         name: 'YYYY/MM/DD',
       },
-      {
-        format: 'YYYY-MM-DD',
-        name: 'YYYY-MM-DD',
-      },
       {
         format: '',
         name: 'Custom',

src/app/hooks/useMutualRooms.ts

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-import { MatrixClient, Method } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
 import { AsyncState, useAsyncCallbackValue } from './useAsyncCallback';
 import { useSpecVersions } from './useSpecVersions';
 
-export const useUnstableMutualRoomsSupport = (): boolean => {
+export const useMutualRoomsSupport = (): boolean => {
   const { unstable_features: unstableFeatures } = useSpecVersions();
 
   const supported =
@@ -15,59 +14,16 @@ export const useUnstableMutualRoomsSupport = (): boolean => {
   return !!supported;
 };
 
-export const useMutualRoomsSupport = (): boolean => {
-  const { unstable_features: unstableFeatures, versions } = useSpecVersions();
-
-  const supported =
-    versions.includes('v1.19') ||
-    unstableFeatures?.['uk.half-shot.msc2666.query_mutual_rooms.stable'];
-
-  return !!supported;
-};
-
-type MutualRoomsOK = {
-  joined: string[];
-  next_batch?: string;
-  count: number;
-};
-
-const fetchAllMutualRooms = async (mx: MatrixClient, userId: string): Promise<string[]> => {
-  const mutualRooms: Set<string> = new Set();
-
-  let nextBatch: string | undefined;
-  do {
-    // eslint-disable-next-line no-await-in-loop
-    const result = await mx.http.authedRequest<MutualRoomsOK>(
-      Method.Get,
-      '/mutual_rooms',
-      {
-        user_id: userId,
-        from: nextBatch,
-      },
-      undefined,
-      {
-        prefix: '/_matrix/client/v1',
-      }
-    );
-    result.joined.forEach((r) => mutualRooms.add(r));
-    nextBatch = result.next_batch;
-  } while (typeof nextBatch === 'string');
-
-  return Array.from(mutualRooms);
-};
-
 export const useMutualRooms = (userId: string): AsyncState<string[], unknown> => {
   const mx = useMatrixClient();
 
-  const unstableSupport = useUnstableMutualRoomsSupport();
+  const supported = useMutualRoomsSupport();
-  const support = useMutualRoomsSupport();
 
   const [mutualRoomsState] = useAsyncCallbackValue(
-    useCallback(() => {
+    useCallback(
-      if (support) return fetchAllMutualRooms(mx, userId);
+      () => (supported ? mx._unstable_getSharedRooms(userId) : Promise.resolve([])),
-      if (unstableSupport) return mx._unstable_getSharedRooms(userId);
+      [mx, userId, supported]
-      return Promise.resolve([]);
+    )
-    }, [mx, userId, unstableSupport, support])
   );
 
   return mutualRoomsState;

src/app/hooks/usePowerLevels.ts

@@ -57,7 +57,7 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
     return draftPl;
   });
 
-export const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
+const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
   const plContent = mEvent?.getContent<IPowerLevels>();
 
   const powerLevels = !plContent ? DEFAULT_POWER_LEVELS : fillMissingPowers(plContent);

src/app/hooks/useTheme.ts

@@ -1,7 +1,6 @@
-import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { lightTheme, butterTheme, darkTheme, silverTheme, moonlightTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -14,6 +13,8 @@ export type Theme = {
   id: string;
   kind: ThemeKind;
   classNames: string[];
+  flat?: boolean;
+  gradient?: string;
 };
 
 export const LightTheme: Theme = {
@@ -25,21 +26,31 @@ export const LightTheme: Theme = {
 export const SilverTheme: Theme = {
   id: 'silver-theme',
   kind: ThemeKind.Light,
-  classNames: ['silver-theme', silverTheme, onLightFontWeight, 'prism-light'],
+  classNames: [silverTheme, onLightFontWeight, 'prism-light'],
 };
+
 export const DarkTheme: Theme = {
   id: 'dark-theme',
   kind: ThemeKind.Dark,
-  classNames: ['dark-theme', darkTheme, onDarkFontWeight, 'prism-dark'],
+  classNames: ['global-dark', darkTheme, onDarkFontWeight, 'prism-dark'],
 };
 export const ButterTheme: Theme = {
   id: 'butter-theme',
   kind: ThemeKind.Dark,
-  classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
+  classNames: ['global-dark', butterTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const MoonlightTheme: Theme = {
+  id: 'moonlight-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['global-dark', moonlightTheme, onDarkFontWeight, 'prism-dark'],
+  flat: true,
 };
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(
+    () => [LightTheme, SilverTheme, DarkTheme, ButterTheme, MoonlightTheme],
+    []
+  );
 
   return themes;
 };
@@ -51,6 +62,7 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [MoonlightTheme.id]: 'Moonlight',
     }),
     []
   );

src/app/pages/ThemeManager.tsx

@@ -39,9 +39,9 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
     document.body.classList.add(...activeTheme.classNames);
 
     if (monochromeMode) {
-      document.body.style.filter = 'grayscale(1)';
+      document.body.style.setProperty('filter', 'grayscale(1)');
     } else {
-      document.body.style.filter = '';
+      document.body.style.removeProperty('filter');
     }
   }, [activeTheme, monochromeMode]);
 

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.12.2
+        v4.11.0
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter

src/app/pages/client/SpecVersions.tsx

@@ -22,7 +22,7 @@ export function SpecVersions({ baseUrl, children }: { baseUrl: string; children:
             <Dialog>
               <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
                 <Text>
-                  Unable to connect to the homeserver. The homeserver or your internet connection may be down.
+                  Failed to connect to homeserver. Either homeserver is down or your internet.
                 </Text>
                 <Button variant="Critical" onClick={retry}>
                   <Text as="span" size="B400">

src/app/pages/client/WelcomePage.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
 import { Page, PageHero, PageHeroSection } from '../../components/page';
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import { useTheme } from '../../hooks/useTheme';
 
 export function WelcomePage() {
+  const theme = useTheme();
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <Box
         grow="Yes"
         style={{ padding: config.space.S400, paddingBottom: config.space.S700 }}
@@ -24,7 +26,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.12.2
+                  v4.11.0
                 </a>
               </span>
             }

src/app/pages/client/create/Create.tsx

@@ -9,12 +9,14 @@ import {
 } from '../../../components/page';
 import { CreateSpaceForm } from '../../../features/create-space';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function Create() {
   const { navigateSpace } = useRoomNavigate();
+  const theme = useTheme();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent>

src/app/pages/client/direct/Direct.tsx

@@ -107,7 +107,12 @@ function DirectHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton
+              aria-pressed={!!menuAnchor}
+              variant="Background"
+              fill="None"
+              onClick={handleOpenMenu}
+            >
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/pages/client/direct/DirectCreate.tsx

@@ -17,10 +17,12 @@ import {
 } from '../../../components/page';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateChat } from '../../../features/create-chat';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function DirectCreate() {
   const mx = useMatrixClient();
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -38,7 +40,7 @@ export function DirectCreate() {
   }, [mx, navigate, directs, userId]);
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader balance outlined={false}>
           <Box grow="Yes" alignItems="Center" gap="200">

src/app/pages/client/explore/Featured.tsx

@@ -18,8 +18,10 @@ import * as css from './style.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function FeaturedRooms() {
+  const theme = useTheme();
   const { featuredCommunities } = useClientConfig();
   const { rooms, spaces } = featuredCommunities ?? {};
   const allRooms = useAtomValue(allRoomsAtom);
@@ -27,7 +29,7 @@ export function FeaturedRooms() {
   const { navigateSpace, navigateRoom } = useRoomNavigate();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader>
           <Box shrink="No">

src/app/pages/client/explore/Server.tsx

@@ -45,6 +45,7 @@ import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -343,6 +344,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
 export function PublicRooms() {
   const { server } = useParams();
   const mx = useMatrixClient();
+  const theme = useTheme();
   const userId = mx.getUserId();
   const userServer = userId && getMxIdServer(userId);
   const allRooms = useAtomValue(allRoomsAtom);
@@ -469,7 +471,7 @@ export function PublicRooms() {
   };
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         {isSearch ? (
           <>

src/app/pages/client/home/CreateRoom.tsx

@@ -12,14 +12,16 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateRoomForm } from '../../../features/create-room';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function HomeCreateRoom() {
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   const { navigateRoom } = useRoomNavigate();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       {screenSize === ScreenSize.Mobile && (
         <PageHeader balance outlined={false}>
           <Box grow="Yes" alignItems="Center" gap="200">

src/app/pages/client/home/Home.tsx

@@ -121,7 +121,12 @@ function HomeHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton
+              aria-pressed={!!menuAnchor}
+              variant="Background"
+              fill="None"
+              onClick={handleOpenMenu}
+            >
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/pages/client/home/Search.tsx

@@ -5,14 +5,16 @@ import { MessageSearch } from '../../../features/message-search';
 import { useHomeRooms } from './useHomeRooms';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function HomeSearch() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
   const screenSize = useScreenSizeContext();
+  const theme = useTheme();
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/inbox/Invites.tsx

@@ -67,6 +67,7 @@ import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useTheme } from '../../../hooks/useTheme';
 
 const COMPACT_CARD_WIDTH = 548;
 
@@ -693,6 +694,7 @@ function SpamInvites({
 
 export function Invites() {
   const mx = useMatrixClient();
+  const theme = useTheme();
   const useAuthentication = useMediaAuthentication();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const allRooms = useAtomValue(allRoomsAtom);
@@ -746,7 +748,7 @@ export function Invites() {
   };
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/inbox/Notifications.tsx

@@ -563,6 +563,7 @@ const DEFAULT_REFRESH_MS = 7000;
 
 export function Notifications() {
   const mx = useMatrixClient();
+  const theme = useTheme();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
@@ -635,7 +636,7 @@ export function Notifications() {
   }, [timelineState, notificationTimeline, lastVItemIndex, loadTimeline]);
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/space/Search.tsx

@@ -11,9 +11,11 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useTheme } from '../../../hooks/useTheme';
 
 export function SpaceSearch() {
   const mx = useMatrixClient();
+  const theme = useTheme();
   const scrollRef = useRef<HTMLDivElement>(null);
   const space = useSpace();
   const screenSize = useScreenSizeContext();
@@ -27,7 +29,7 @@ export function SpaceSearch() {
   );
 
   return (
-    <Page>
+    <Page transparent={theme.flat}>
       <PageHeader balance>
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" basis="No">

src/app/pages/client/space/Space.tsx

@@ -273,7 +273,12 @@ function SpaceHeader() {
             {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
           </Box>
           <Box shrink="No">
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton
+              aria-pressed={!!menuAnchor}
+              variant="Background"
+              fill="None"
+              onClick={handleOpenMenu}
+            >
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>

src/app/plugins/call/CallEmbed.ts

@@ -47,36 +47,12 @@ export class CallEmbed {
 
   private readonly disposables: Array<() => void> = [];
 
-  static getIntent(dm: boolean, ongoing: boolean, video?: boolean): ElementCallIntent {
+  static getIntent(dm: boolean, ongoing: boolean): ElementCallIntent {
-    if (dm && ongoing) {
-      return video ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExistingDMVoice;
-    }
-    if (dm) {
-      return video ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCallDMVoice;
-    }
-
     if (ongoing) {
-      return video ? ElementCallIntent.JoinExisting : ElementCallIntent.JoinExistingVoice;
+      return dm ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExisting;
     }
-    return video ? ElementCallIntent.StartCall : ElementCallIntent.StartCallVoice;
-  }
 
-  static dmCall(intent: ElementCallIntent): boolean {
+    return dm ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCall;
-    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(
@@ -105,13 +81,8 @@ export class CallEmbed {
       perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
       lang: 'en-EN',
       theme: themeKind,
-      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

src/app/plugins/call/CallWidgetDriver.ts

@@ -8,6 +8,7 @@ import {
   type IWidgetApiErrorResponseDataDetails,
   type ISearchUserDirectoryResult,
   type IGetMediaConfigResult,
+  type UpdateDelayedEventAction,
   OpenIDRequestState,
   SimpleObservable,
   IOpenIDUpdate,
@@ -52,11 +53,14 @@ export class CallWidgetDriver extends WidgetDriver {
     stateKey: string | null = null,
     targetRoomId: string | null = null
   ): Promise<ISendEventDetails> {
+    const client = this.mx;
     const roomId = targetRoomId || this.inRoomId;
 
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
     let r: { event_id: string } | null;
     if (typeof stateKey === 'string') {
-      r = await this.mx.sendStateEvent(
+      r = await client.sendStateEvent(
         roomId,
         eventType as keyof StateEvents,
         content as StateEvents[keyof StateEvents],
@@ -64,9 +68,9 @@ export class CallWidgetDriver extends WidgetDriver {
       );
     } else if (eventType === EventType.RoomRedaction) {
       // special case: extract the `redacts` property and call redact
-      r = await this.mx.redactEvent(roomId, content.redacts);
+      r = await client.redactEvent(roomId, content.redacts);
     } else {
-      r = await this.mx.sendEvent(
+      r = await client.sendEvent(
         roomId,
         eventType as keyof TimelineEvents,
         content as TimelineEvents[keyof TimelineEvents]
@@ -84,8 +88,11 @@ export class CallWidgetDriver extends WidgetDriver {
     stateKey: string | null = null,
     targetRoomId: string | null = null
   ): Promise<ISendDelayedEventDetails> {
+    const client = this.mx;
     const roomId = targetRoomId || this.inRoomId;
 
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
     let delayOpts;
     if (delay !== null) {
       delayOpts = {
@@ -103,7 +110,7 @@ export class CallWidgetDriver extends WidgetDriver {
     let r: SendDelayedEventResponse | null;
     if (stateKey !== null) {
       // state event
-      r = await this.mx._unstable_sendDelayedStateEvent(
+      r = await client._unstable_sendDelayedStateEvent(
         roomId,
         delayOpts,
         eventType as keyof StateEvents,
@@ -112,7 +119,7 @@ export class CallWidgetDriver extends WidgetDriver {
       );
     } else {
       // message event
-      r = await this.mx._unstable_sendDelayedEvent(
+      r = await client._unstable_sendDelayedEvent(
         roomId,
         delayOpts,
         null,
@@ -127,16 +134,15 @@ export class CallWidgetDriver extends WidgetDriver {
     };
   }
 
-  public async cancelScheduledDelayedEvent(delayId: string): Promise<void> {
+  public async updateDelayedEvent(
-    await this.mx._unstable_cancelScheduledDelayedEvent(delayId);
+    delayId: string,
-  }
+    action: UpdateDelayedEventAction
+  ): Promise<void> {
+    const client = this.mx;
 
-  public async restartScheduledDelayedEvent(delayId: string): Promise<void> {
+    if (!client) throw new Error('Not in a room or not attached to a client');
-    await this.mx._unstable_restartScheduledDelayedEvent(delayId);
-  }
 
-  public async sendScheduledDelayedEvent(delayId: string): Promise<void> {
+    await client._unstable_updateDelayedEvent(delayId, action);
-    await this.mx._unstable_sendScheduledDelayedEvent(delayId);
   }
 
   public async sendToDevice(
@@ -144,8 +150,10 @@ export class CallWidgetDriver extends WidgetDriver {
     encrypted: boolean,
     contentMap: { [userId: string]: { [deviceId: string]: object } }
   ): Promise<void> {
+    const client = this.mx;
+
     if (encrypted) {
-      const crypto = this.mx.getCrypto();
+      const crypto = client.getCrypto();
       if (!crypto) throw new Error('E2EE not enabled');
 
       // attempt to re-batch these up into a single request
@@ -171,11 +179,11 @@ export class CallWidgetDriver extends WidgetDriver {
             JSON.parse(stringifiedContent)
           );
 
-          await this.mx.queueToDevice(batch);
+          await client.queueToDevice(batch);
         })
       );
     } else {
-      await this.mx.queueToDevice({
+      await client.queueToDevice({
         eventType,
         batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
           Object.entries(userContentMap).map(([deviceId, content]) => ({
@@ -255,6 +263,7 @@ export class CallWidgetDriver extends WidgetDriver {
     limit?: number,
     direction?: 'f' | 'b'
   ): Promise<IReadEventRelationsResult> {
+    const client = this.mx;
     const dir = direction as Direction;
     const targetRoomId = roomId ?? this.inRoomId ?? undefined;
 
@@ -262,7 +271,7 @@ export class CallWidgetDriver extends WidgetDriver {
       throw new Error('Error while reading the current room');
     }
 
-    const { events, nextBatch, prevBatch } = await this.mx.relations(
+    const { events, nextBatch, prevBatch } = await client.relations(
       targetRoomId,
       eventId,
       relationType ?? null,
@@ -281,7 +290,9 @@ export class CallWidgetDriver extends WidgetDriver {
     searchTerm: string,
     limit?: number
   ): Promise<ISearchUserDirectoryResult> {
-    const { limited, results } = await this.mx.searchUserDirectory({ term: searchTerm, limit });
+    const client = this.mx;
+
+    const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });
 
     return {
       limited,
@@ -294,11 +305,15 @@ export class CallWidgetDriver extends WidgetDriver {
   }
 
   public async getMediaConfig(): Promise<IGetMediaConfigResult> {
-    return this.mx.getMediaConfig();
+    const client = this.mx;
+
+    return client.getMediaConfig();
   }
 
   public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
-    const uploadResult = await this.mx.uploadContent(file);
+    const client = this.mx;
+
+    const uploadResult = await client.uploadContent(file);
 
     return { contentUri: uploadResult.content_uri };
   }

src/app/plugins/call/types.ts

@@ -1,8 +1,6 @@
 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',

src/app/plugins/call/utils.ts

@@ -15,8 +15,6 @@ export function getCallCapabilities(
 
   capabilities.add(MatrixCapabilities.Screenshots);
   capabilities.add(MatrixCapabilities.AlwaysOnScreen);
-  capabilities.add(MatrixCapabilities.MSC4039UploadFile);
-  capabilities.add(MatrixCapabilities.MSC4039DownloadFile);
   capabilities.add(MatrixCapabilities.MSC3846TurnServers);
   capabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
   capabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
@@ -80,13 +78,19 @@ 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);

src/app/plugins/markdown/block/parser.ts

@@ -1,5 +1,12 @@
 import { replaceMatch } from '../internal';
-import { BlockQuoteRule, CodeBlockRule, ESC_BLOCK_SEQ, HeadingRule, ListRule } from './rules';
+import {
+  BlockQuoteRule,
+  CodeBlockRule,
+  ESC_BLOCK_SEQ,
+  HeadingRule,
+  OrderedListRule,
+  UnorderedListRule,
+} from './rules';
 import { runBlockRule } from './runner';
 import { BlockMDParser } from './type';
 
@@ -16,7 +23,8 @@ export const parseBlockMD: BlockMDParser = (text, parseInline) => {
 
   if (!result) result = runBlockRule(text, CodeBlockRule, parseBlockMD, parseInline);
   if (!result) result = runBlockRule(text, BlockQuoteRule, parseBlockMD, parseInline);
-  if (!result) result = runBlockRule(text, ListRule, parseBlockMD, parseInline);
+  if (!result) result = runBlockRule(text, OrderedListRule, parseBlockMD, parseInline);
+  if (!result) result = runBlockRule(text, UnorderedListRule, parseBlockMD, parseInline);
   if (!result) result = runBlockRule(text, HeadingRule, parseBlockMD, parseInline);
 
   // replace \n with <br/> because want to preserve empty lines

src/app/plugins/markdown/block/rules.ts

@@ -10,22 +10,14 @@ export const HeadingRule: BlockMDRule = {
   },
 };
 
-// opening fence: 3 or more backticks
+const CODEBLOCK_MD_1 = '```';
-// capture the exact fence length in group 1
+const CODEBLOCK_REG_1 = /^`{3}(\S*)\n((?:.*\n)+?)`{3} *(?!.)\n?/m;
-// optional info string in group 2
-// code content in group 3
-// closing fence must match the exact same fence sequence via \1
-const CODEBLOCK_REG_1 = /^(`{3,})(?!`)(\S*)\n((?:.*\n)+?)\1 *(?!.)\n?/m;
 export const CodeBlockRule: BlockMDRule = {
   match: (text) => text.match(CODEBLOCK_REG_1),
   html: (match) => {
-    const [, fence, g1, g2] = match;
+    const [, g1, g2] = match;
-    // use last identifier after dot, e.g. for "example.json" gets us "json" as language code.
+    const classNameAtt = g1 ? ` class="language-${g1}"` : '';
-    const langCode = g1 ? g1.substring(g1.lastIndexOf('.') + 1) : null;
+    return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}>${g2}</code></pre>`;
-    const filename = g1 !== langCode ? g1 : null;
-    const classNameAtt = langCode ? ` class="language-${langCode}"` : '';
-    const filenameAtt = filename ? ` data-label="${filename}"` : '';
-    return `<pre data-md="${fence}"><code${classNameAtt}${filenameAtt}>${g2}</code></pre>`;
   },
 };
 
@@ -52,146 +44,55 @@ export const BlockQuoteRule: BlockMDRule = {
 };
 
 const ORDERED_LIST_MD_1 = '-';
+const O_LIST_ITEM_PREFIX = /^(-|[\da-zA-Z]\.) */;
+const O_LIST_START = /^([\d])\./;
+const O_LIST_TYPE = /^([aAiI])\./;
+const O_LIST_TRAILING_NEWLINE = /\n$/;
+const ORDERED_LIST_REG_1 = /(^(?:-|[\da-zA-Z]\.) +.+\n?)+/m;
+export const OrderedListRule: BlockMDRule = {
+  match: (text) => text.match(ORDERED_LIST_REG_1),
+  html: (match, parseInline) => {
+    const [listText] = match;
+    const [, listStart] = listText.match(O_LIST_START) ?? [];
+    const [, listType] = listText.match(O_LIST_TYPE) ?? [];
+
+    const lines = listText
+      .replace(O_LIST_TRAILING_NEWLINE, '')
+      .split('\n')
+      .map((lineText) => {
+        const line = lineText.replace(O_LIST_ITEM_PREFIX, '');
+        const txt = parseInline ? parseInline(line) : line;
+        return `<li><p>${txt}</p></li>`;
+      })
+      .join('');
+
+    const dataMdAtt = `data-md="${listType || listStart || ORDERED_LIST_MD_1}"`;
+    const startAtt = listStart ? ` start="${listStart}"` : '';
+    const typeAtt = listType ? ` type="${listType}"` : '';
+    return `<ol ${dataMdAtt}${startAtt}${typeAtt}>${lines}</ol>`;
+  },
+};
+
 const UNORDERED_LIST_MD_1 = '*';
-const LIST_ITEM_REG = /^( *)([-*]|[\da-zA-Z]\.) +(.+)$/;
+const U_LIST_ITEM_PREFIX = /^\* */;
-type ListType = 'ol' | 'ul';
+const U_LIST_TRAILING_NEWLINE = /\n$/;
-
+const UNORDERED_LIST_REG_1 = /(^\* +.+\n?)+/m;
-function getListType(marker: string): ListType {
+export const UnorderedListRule: BlockMDRule = {
-  return marker === '*' ? 'ul' : 'ol';
+  match: (text) => text.match(UNORDERED_LIST_REG_1),
-}
-
-function getOrderedMeta(marker: string) {
-  const startMatch = marker.match(/^(\d)\./);
-  const typeMatch = marker.match(/^([aAiI])\./);
-
-  return {
-    start: startMatch?.[1],
-    type: typeMatch?.[1],
-  };
-}
-
-interface ParsedLine {
-  indent: number;
-  marker: string;
-  content: string;
-  listType: ListType;
-}
-
-function parseLines(text: string): ParsedLine[] {
-  return text
-    .replace(/\n$/, '')
-    .split('\n')
-    .map((line) => {
-      const match = line.match(LIST_ITEM_REG);
-
-      if (!match) return null;
-
-      const [, spaces, marker, content] = match;
-
-      return {
-        indent: spaces.length,
-        marker,
-        content,
-        listType: getListType(marker),
-      };
-    })
-    .filter(Boolean) as ParsedLine[];
-}
-
-function openList(line: ParsedLine) {
-  if (line.listType === 'ul') {
-    return `<ul data-md="${UNORDERED_LIST_MD_1}">`;
-  }
-  const { type, start } = getOrderedMeta(line.marker);
-  const dataMdAtt = `data-md="${type || start || ORDERED_LIST_MD_1}"`;
-  const startAtt = start ? ` start="${start}"` : '';
-  const typeAtt = type ? ` type="${type}"` : '';
-  return `<ol ${dataMdAtt}${startAtt}${typeAtt}>`;
-}
-
-function closeList(listType: ListType) {
-  return listType === 'ul' ? '</ul>' : '</ol>';
-}
-
-function buildList(lines: ParsedLine[], parseInline?: (s: string) => string): string {
-  let html = '';
-
-  const stack: ('ul' | 'ol')[] = [];
-
-  lines.forEach((line, index) => {
-    const prev = lines[index - 1];
-    const next = lines[index + 1];
-
-    const content = parseInline ? parseInline(line.content) : line.content;
-
-    // FIRST ITEM
-    if (!prev) {
-      html += openList(line);
-      stack.push(line.listType);
-    }
-
-    // DEEPER INDENT > open nested list
-    else if (line.indent > prev.indent) {
-      html += openList(line);
-      stack.push(line.listType);
-    }
-
-    // SAME LEVEL
-    else if (line.indent === prev.indent) {
-      html += '</li>';
-
-      // different list type
-      if (line.listType !== prev.listType) {
-        html += closeList(stack.pop()!);
-
-        html += openList(line);
-        stack.push(line.listType);
-      }
-    }
-
-    // GOING BACK UP
-    else if (line.indent < prev.indent) {
-      html += '</li>';
-
-      while (stack.length > line.indent + 1) {
-        html += closeList(stack.pop()!);
-        html += '</li>';
-      }
-
-      if (line.listType !== stack[stack.length - 1]) {
-        html += closeList(stack.pop()!);
-
-        html += openList(line);
-        stack.push(line.listType);
-      }
-    }
-
-    html += `<li><p>${content}</p>`;
-
-    // LAST ITEM cleanup
-    if (!next) {
-      html += '</li>';
-
-      while (stack.length) {
-        html += closeList(stack.pop()!);
-      }
-    }
-  });
-
-  return html;
-}
-
-const LIST_REG_1 = /^(?: *(?:[-*]|[\da-zA-Z]\.) +.+\n?)+/m;
-export const ListRule: BlockMDRule = {
-  match: (text) => text.match(LIST_REG_1),
   html: (match, parseInline) => {
     const [listText] = match;
 
-    const lines = parseLines(listText);
+    const lines = listText
+      .replace(U_LIST_TRAILING_NEWLINE, '')
+      .split('\n')
+      .map((lineText) => {
+        const line = lineText.replace(U_LIST_ITEM_PREFIX, '');
+        const txt = parseInline ? parseInline(line) : line;
+        return `<li><p>${txt}</p></li>`;
+      })
+      .join('');
 
-    const html = buildList(lines, parseInline);
+    return `<ul data-md="${UNORDERED_LIST_MD_1}">${lines}</ul>`;
-
-    return html;
   },
 };
 

src/app/plugins/react-custom-html-parser.tsx

@@ -232,9 +232,8 @@ export function CodeBlock({
   opts: HTMLReactParserOptions;
 }) {
   const code = children[0];
-  const attribs = code instanceof Element && code.name === 'code' ? code.attribs : undefined;
+  const languageClass =
-  const languageClass = attribs?.class;
+    code instanceof Element && code.name === 'code' ? code.attribs.class : undefined;
-  const customLabel = attribs?.['data-label'];
   const language =
     languageClass && languageClass.startsWith('language-')
       ? languageClass.replace('language-', '')
@@ -263,7 +262,7 @@ export function CodeBlock({
       <Header variant="Surface" size="400" className={css.CodeBlockHeader}>
         <Box grow="Yes">
           <Text size="L400" truncate>
-            {customLabel ?? language ?? 'Code'}
+            {language ?? 'Code'}
           </Text>
         </Box>
         <Box shrink="No" gap="200">

src/app/state/settings.ts

@@ -1,13 +1,7 @@
 import { atom } from 'jotai';
 
 const STORAGE_KEY = 'settings';
-export type DateFormat =
+export type DateFormat = 'D MMM YYYY' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | '';
-  | 'D MMM YYYY'
-  | 'DD/MM/YYYY'
-  | 'MM/DD/YYYY'
-  | 'YYYY/MM/DD'
-  | 'YYYY-MM-DD'
-  | '';
 export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500';
 export enum MessageLayout {
   Modern = 0,

src/app/styles/Animations.css.ts

@@ -1,47 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-import { color, toRem } from 'folds';
-
-const wobble = keyframes({
-  '0%': {
-    transform: 'translateX(0) rotateZ(0deg)',
-  },
-  '20%': {
-    transform: `translateX(-${toRem(4)}) rotateZ(-4deg)`,
-  },
-  '40%': {
-    transform: `translateX(${toRem(4)}) rotateZ(4deg)`,
-  },
-  '60%': {
-    transform: `translateX(-${toRem(3)}) rotateZ(-3deg)`,
-  },
-  '80%': {
-    transform: `translateX(${toRem(3)}) rotateZ(3deg)`,
-  },
-  '100%': {
-    transform: 'translateX(0) rotateZ(0deg)',
-  },
-});
-
-const glowPulse = keyframes({
-  '0%': {
-    boxShadow: `0 0 0 ${toRem(0)} ${color.Success.ContainerActive}`,
-  },
-  '100%': {
-    boxShadow: `0 0 0 ${toRem(8)} ${color.Success.ContainerActive}`,
-  },
-});
-
-export const WobbleAnimation = style({
-  animation: `${wobble} 2000ms ease-in-out`,
-  animationIterationCount: 'infinite',
-});
-
-export const GlowAnimation = style({
-  animation: `${glowPulse} 2000ms ease-out`,
-  animationIterationCount: 'infinite',
-});
-
-export const CallAvatarAnimation = style({
-  animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
-  animationIterationCount: 'infinite',
-});

src/app/styles/CustomHtml.css.ts

@@ -120,23 +120,12 @@ export const CodeBlockBottomShadow = style({
   background: `linear-gradient(to top, #00000022, #00000000)`,
 });
 
-const BaseList = style({});
 export const List = style([
-  BaseList,
   DefaultReset,
   MarginSpaced,
   {
     padding: `0 ${config.space.S100}`,
     paddingLeft: config.space.S600,
-    selectors: {
-      '& &': {
-        marginTop: config.space.S200,
-        marginBottom: config.space.S200,
-      },
-      'li:last-child &': {
-        marginBottom: 0,
-      },
-    },
   },
 ]);
 

src/app/styles/Patterns.css.ts

@@ -2,8 +2,8 @@ import { style } from '@vanilla-extract/css';
 import { color, toRem } from 'folds';
 
 export const BackgroundDotPattern = style({
-  backgroundImage: `radial-gradient(${color.Background.ContainerActive} ${toRem(2)}, ${
+  backgroundImage: `radial-gradient(${color.Background.ContainerActive} ${toRem(
-    color.Background.Container
+    2
-  } ${toRem(2)})`,
+  )}, transparent ${toRem(2)})`,
   backgroundSize: `${toRem(40)} ${toRem(40)}`,
 });

src/app/utils/dom.ts

@@ -233,15 +233,7 @@ export const notificationPermission = (permission: NotificationPermission) => {
   if ('Notification' in window) {
     return window.Notification.permission === permission;
   }
-  try {
+  return false;
-    // https://stackoverflow.com/questions/29774836/failed-to-construct-notification-illegal-constructor
-    // https://issues.chromium.org/issues/40415865
-    // eslint-disable-next-line no-new
-    new Notification('');
-  } catch {
-    return false;
-  }
-  return true;
 };
 
 export const getMouseEventCords = (event: MouseEvent) => ({

src/app/utils/mimeTypes.ts

@@ -31,7 +31,6 @@ export const APPLICATION_MIME_TYPES = [
   'application/javascript',
   'application/xhtml+xml',
   'application/xml',
-  'application/ogg',
 ];
 
 export const TEXT_MIME_TYPE = [
@@ -116,10 +115,6 @@ export const getBlobSafeMimeType = (mimeType: string) => {
   if (type === 'video/quicktime') {
     return 'video/mp4';
   }
-  // Fixes missing playback for Ogg audio
-  if (type === 'application/ogg') {
-    return 'audio/ogg';
-  }
   return type;
 };
 

src/app/utils/rtc.ts

@@ -1,4 +0,0 @@
-export const webRTCSupported = () =>
-  ['RTCPeerConnection', 'webkitRTCPeerConnection', 'mozRTCPeerConnection', 'RTCIceGatherer'].some(
-    (item) => item in window
-  );

src/app/utils/sanitize.ts

@@ -71,7 +71,7 @@ const permittedTagToAttributes = {
   ul: ['data-md'],
   a: ['name', 'target', 'href', 'rel', 'data-md'],
   img: ['width', 'height', 'alt', 'title', 'src', 'data-mx-emoticon'],
-  code: ['class', 'data-md', 'data-label'],
+  code: ['class', 'data-md'],
   strong: ['data-md'],
   i: ['data-md'],
   em: ['data-md'],

src/colors.css.ts

@@ -1,7 +1,115 @@
-import { createTheme } from '@vanilla-extract/css';
+import { createTheme, createThemeContract } from '@vanilla-extract/css';
 import { color } from 'folds';
 
-export const silverTheme = createTheme(color, {
+export const extendedColor = createThemeContract({
+  background: '',
+});
+
+const ThemeContract = {
+  ...extendedColor,
+  ...color,
+};
+
+export const lightTheme = createTheme(ThemeContract, {
+  background: '#F2F2F2',
+  Background: {
+    Container: '#F2F2F2',
+    ContainerHover: '#E5E5E5',
+    ContainerActive: '#D9D9D9',
+    ContainerLine: '#CCCCCC',
+    OnContainer: '#000000',
+  },
+
+  Surface: {
+    Container: '#FFFFFF',
+    ContainerHover: '#F2F2F2',
+    ContainerActive: '#E5E5E5',
+    ContainerLine: '#D9D9D9',
+    OnContainer: '#000000',
+  },
+
+  SurfaceVariant: {
+    Container: '#F2F2F2',
+    ContainerHover: '#E5E5E5',
+    ContainerActive: '#D9D9D9',
+    ContainerLine: '#CCCCCC',
+    OnContainer: '#000000',
+  },
+
+  Primary: {
+    Main: '#1858D5',
+    MainHover: '#164FC0',
+    MainActive: '#144BB5',
+    MainLine: '#1346AA',
+    OnMain: '#FFFFFF',
+    Container: '#E8EEFB',
+    ContainerHover: '#DCE6F9',
+    ContainerActive: '#D1DEF7',
+    ContainerLine: '#C5D5F5',
+    OnContainer: '#113E95',
+  },
+
+  Secondary: {
+    Main: '#000000',
+    MainHover: '#1A1A1A',
+    MainActive: '#262626',
+    MainLine: '#333333',
+    OnMain: '#FFFFFF',
+    Container: '#D9D9D9',
+    ContainerHover: '#CCCCCC',
+    ContainerActive: '#BFBFBF',
+    ContainerLine: '#B2B2B2',
+    OnContainer: '#0D0D0D',
+  },
+
+  Success: {
+    Main: '#00844C',
+    MainHover: '#007744',
+    MainActive: '#007041',
+    MainLine: '#006A3D',
+    OnMain: '#FFFFFF',
+    Container: '#E5F3ED',
+    ContainerHover: '#D9EDE4',
+    ContainerActive: '#CCE6DB',
+    ContainerLine: '#BFE0D2',
+    OnContainer: '#005C35',
+  },
+
+  Warning: {
+    Main: '#A85400',
+    MainHover: '#974C00',
+    MainActive: '#8F4700',
+    MainLine: '#864300',
+    OnMain: '#FFFFFF',
+    Container: '#F6EEE5',
+    ContainerHover: '#F2E5D9',
+    ContainerActive: '#EEDDCC',
+    ContainerLine: '#E9D4BF',
+    OnContainer: '#763B00',
+  },
+
+  Critical: {
+    Main: '#C40E0E',
+    MainHover: '#AC0909',
+    MainActive: '#A60C0C',
+    MainLine: '#9C0B0B',
+    OnMain: '#FFFFFF',
+    Container: '#F9E7E7',
+    ContainerHover: '#F6DBDB',
+    ContainerActive: '#F3CFCF',
+    ContainerLine: '#F0C3C3',
+    OnContainer: '#890A0A',
+  },
+
+  Other: {
+    FocusRing: 'rgba(0 0 0 / 50%)',
+    Shadow: 'rgba(0 0 0 / 20%)',
+    Overlay: 'rgba(0 0 0 / 50%)',
+  },
+});
+
+export const silverTheme = createTheme(ThemeContract, {
+  background: '#DEDEDE',
   Background: {
     Container: '#DEDEDE',
     ContainerHover: '#D3D3D3',
@@ -99,6 +207,7 @@ export const silverTheme = createTheme(color, {
 });
 
 const darkThemeData = {
+  background: color.Background.Container,
   Background: {
     Container: '#1A1A1A',
     ContainerHover: '#262626',
@@ -195,9 +304,9 @@ const darkThemeData = {
   },
 };
 
-export const darkTheme = createTheme(color, darkThemeData);
+export const darkTheme = createTheme(ThemeContract, darkThemeData);
 
-export const butterTheme = createTheme(color, {
+export const butterTheme = createTheme(ThemeContract, {
   ...darkThemeData,
   Background: {
     Container: '#1A1916',
@@ -236,3 +345,107 @@ export const butterTheme = createTheme(color, {
     OnContainer: '#F2EED3',
   },
 });
+
+export const moonlightTheme = createTheme(ThemeContract, {
+  background: 'linear-gradient(to top right, #000546, #000)',
+
+  Background: {
+    Container: '#000000',
+    ContainerHover: '#01032B',
+    ContainerActive: '#020546',
+    ContainerLine: '#030977',
+    OnContainer: '#EAEBFF',
+  },
+
+  Surface: {
+    Container: '#01032B',
+    ContainerHover: '#020546',
+    ContainerActive: '#03075E',
+    ContainerLine: '#030977',
+    OnContainer: '#EAEBFF',
+  },
+
+  SurfaceVariant: {
+    Container: '#020546',
+    ContainerHover: '#03075E',
+    ContainerActive: '#030977',
+    ContainerLine: '#030977',
+    OnContainer: '#EAEBFF',
+  },
+
+  Primary: {
+    Main: '#0043FF',
+    MainHover: '#1A56FF',
+    MainActive: '#3369FF',
+    MainLine: '#4D7BFF',
+    OnMain: '#FFFFFF',
+
+    Container: '#00144D',
+    ContainerHover: '#001B66',
+    ContainerActive: '#002180',
+    ContainerLine: '#002899',
+    OnContainer: '#FFFFFF',
+  },
+
+  Secondary: {
+    Main: '#E5E7FF',
+    MainHover: '#CCCFFF',
+    MainActive: '#B2B6FF',
+    MainLine: '#999EFF',
+    OnMain: '#000000',
+
+    Container: '#030763',
+    ContainerHover: '#04097C',
+    ContainerActive: '#050B94',
+    ContainerLine: '#050CAD',
+    OnContainer: '#FFFFFF',
+  },
+
+  Success: {
+    Main: '#00FF95',
+    MainHover: '#00E586',
+    MainActive: '#00CC77',
+    MainLine: '#4DFFB5',
+    OnMain: '#0B2E22',
+
+    Container: '#004D3B',
+    ContainerHover: '#00664F',
+    ContainerActive: '#008062',
+    ContainerLine: '#008062',
+    OnContainer: '#CCF2E2',
+  },
+
+  Warning: {
+    Main: '#FF9933',
+    MainHover: '#FFA64D',
+    MainActive: '#FFB266',
+    MainLine: '#FFBF80',
+    OnMain: '#000000',
+
+    Container: '#4D2600',
+    ContainerHover: '#663200',
+    ContainerActive: '#803F00',
+    ContainerLine: '#994C00',
+    OnContainer: '#F3E2D1',
+  },
+
+  Critical: {
+    Main: '#FF0000',
+    MainHover: '#E50000',
+    MainActive: '#CC0000',
+    MainLine: '#FF4D4D',
+    OnMain: '#ffffff',
+
+    Container: '#4D0000',
+    ContainerHover: '#660000',
+    ContainerActive: '#800000',
+    ContainerLine: '#990000',
+    OnContainer: '#F5D6D6',
+  },
+
+  Other: {
+    FocusRing: 'hsla(237, 100%, 70%, 0.6)',
+    Shadow: 'rgba(0, 0, 0, 0.9)',
+    Overlay: 'rgba(0, 0, 0, 0.8)',
+  },
+});

src/index.css

@@ -22,8 +22,7 @@
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
 }
 
-.dark-theme,
+.global-dark {
-.butter-theme {
   --tc-link: hsl(213deg 100% 80%);
 
   --mx-uc-1: hsl(208, 100%, 75%);
@@ -129,9 +128,3 @@ textarea {
 audio:not([controls]) {
   display: none !important;
 }
-
-/* Fix Firefox rendering lists that have empty items with those items collapsed in on eachother */
-li p::before {
-  content: '';
-  display: inline-block;
-}

src/index.css.ts

@@ -0,0 +1,10 @@
+import { globalStyle } from '@vanilla-extract/css';
+import { color } from 'folds';
+import { extendedColor } from './colors.css';
+
+globalStyle('body', {
+  background: extendedColor.background,
+  borderColor: color.Background.ContainerLine,
+  outlineColor: color.Background.ContainerLine,
+  color: color.Background.OnContainer,
+});

src/index.tsx

@@ -5,6 +5,7 @@ import { enableMapSet } from 'immer';
 import '@fontsource/inter/variable.css';
 import 'folds/dist/style.css';
 import { configClass, varsClass } from 'folds';
+import './index.css.ts';
 
 enableMapSet();