chore(deps): update dependency vite to v6 [security]

Bumps [dawidd6/action-download-artifact](https://github.com/dawidd6/action-download-artifact) from 20 to 21.
- [Release notes](https://github.com/dawidd6/action-download-artifact/releases)
- [Commits](https://github.com/dawidd6/action-download-artifact/compare/8305c0f1062bb0d184d09ef4493ecb9288447732...b6e2e70617bc3265edd6dab6c906732b2f1ae151)

---
updated-dependencies:
- dependency-name: dawidd6/action-download-artifact
  dependency-version: '21'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.cinny-config.json

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

.cinny-config.json.bak

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

.env.production

@@ -1,2 +0,0 @@
-VITE_SENTRY_DSN=https://264a5e95c5d31fe080a2e92fb008294d@o4511430568378368.ingest.us.sentry.io/4511430571982849
-VITE_APP_VERSION=lotus

.eslintignore

@@ -0,0 +1,2 @@
+experiment
+node_modules

.eslintrc.cjs

@@ -0,0 +1,72 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    'airbnb',
+    'prettier',
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  "globals": {
+    JSX: "readonly"
+  },
+  plugins: [
+    'react',
+    '@typescript-eslint'
+  ],
+  rules: {
+    'linebreak-style': 0,
+    'no-underscore-dangle': 0,
+    "no-shadow": "off",
+
+    "import/prefer-default-export": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: true,
+      },
+    ],
+
+    'react/no-unstable-nested-components': [
+      'error',
+      { allowAsProps: true },
+    ],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        extensions: [".tsx", ".jsx"],
+      },
+    ],
+
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-shadow": "error"
+  },
+  overrides: [
+    {
+      files: ['*.ts'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
+};

.gitea/workflows/ci.yml

@@ -1,64 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [lotus]
-  pull_request:
-    branches: [lotus]
-
-jobs:
-  build:
-    name: Build & Quality Checks
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-
-      # ── Critical gate — if this fails, nothing deploys ──────────────────
-      - name: Build
-        run: npm run build
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          VITE_APP_VERSION: ${{ github.sha }}
-
-      # ── Quality checks (informational — pre-existing issues exist) ───────
-      - name: TypeScript
-        run: npm run typecheck
-        continue-on-error: true
-
-      - name: ESLint
-        run: npm run check:eslint
-        continue-on-error: true
-
-      - name: Prettier
-        run: npm run check:prettier
-        continue-on-error: true
-
-      # ── Security ─────────────────────────────────────────────────────────
-      - name: Audit (high/critical)
-        run: npm audit --audit-level=high --omit=dev
-        continue-on-error: true
-
-      # ── Bundle size report ───────────────────────────────────────────────
-      - name: Report bundle sizes
-        run: |
-          echo "### Bundle sizes" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "| File | Size | Gzip |" >> $GITHUB_STEP_SUMMARY
-          echo "|------|------|------|" >> $GITHUB_STEP_SUMMARY
-          find dist/assets -name "*.js" -not -name "*.map" | sort | while read f; do
-            name=$(basename "$f")
-            size=$(du -sh "$f" | cut -f1)
-            gzip_size=$(gzip -c "$f" | wc -c | awk '{printf "%.1f kB", $1/1024}')
-            echo "| $name | $size | $gzip_size |" >> $GITHUB_STEP_SUMMARY
-          done

.gitea/workflows/trigger-desktop.yml

@@ -1,40 +0,0 @@
-name: Trigger Desktop Build
-
-on:
-  push:
-    branches: [lotus]
-
-jobs:
-  trigger:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Bump cinny submodule in cinny-desktop
-        env:
-          TOKEN: ${{ secrets.RELEASE_TOKEN }}
-        run: |
-          CINNY_SHA="${{ github.sha }}"
-          git clone "https://x-access-token:$TOKEN@code.lotusguild.org/LotusGuild/cinny-desktop.git" desktop
-          cd desktop
-          git config user.email "ci@lotusguild.org"
-          git config user.name "Lotus CI"
-          git submodule update --init cinny
-          git -C cinny fetch origin
-          git -C cinny checkout "$CINNY_SHA"
-          git add cinny
-          if git diff --cached --quiet; then
-            echo "Submodule already at $CINNY_SHA"
-          else
-            git commit -m "chore: bump cinny submodule to ${CINNY_SHA:0:8}"
-            git push origin main
-          fi
-
-      - name: Dispatch cinny-desktop release build
-        env:
-          TOKEN: ${{ secrets.ACTIONS_TOKEN }}
-        run: |
-          curl -sf -X POST \
-            "https://code.lotusguild.org/api/v1/repos/LotusGuild/cinny-desktop/actions/workflows/release.yml/dispatches" \
-            -H "Authorization: token $TOKEN" \
-            -H "Content-Type: application/json" \
-            -d '{"ref":"main"}'
-          echo "Dispatched release.yml on cinny-desktop/main"

.github/DISCUSSION_TEMPLATE/issue-triage.yml

@@ -1,4 +1,4 @@
-labels: ['needs-confirmation']
+labels: ["needs-confirmation"]
 body:
   - type: markdown #add faqs in future
     attributes:
@@ -7,7 +7,7 @@ body:
         > 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'
+      value: "# Issue Details"
   - type: textarea
     attributes:
       label: Issue Description
@@ -64,7 +64,7 @@ body:
         - Browser: 
         - Cinny Web Version: (app.cinny.in or self hosted)
         - Cinny desktop Version: (appimage or deb or flatpak)
-        - Matrix Homeserver:
+        - Matrix Homeserver: 
       placeholder: |
         - OS: Windows 11
         - Browser: Chrome 120.0.6099.109
@@ -80,12 +80,12 @@ body:
       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: |
         ```
@@ -98,7 +98,7 @@ body:
       render: shell
     validations:
       required: false
-  - type: textarea
+  - type: textarea 
     attributes:
       label: Additional context
       description: |
@@ -119,7 +119,7 @@ body:
         > 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:'
+      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

.github/dependabot.yml

@@ -2,29 +2,29 @@
 
 version: 2
 updates:
-  #   - package-ecosystem: npm
-  #     directory: /
-  #     schedule:
-  #       interval: weekly
-  #       day: "tuesday"
-  #       time: "01:00"
-  #       timezone: "Asia/Kolkata"
-  #     open-pull-requests-limit: 15
+#   - package-ecosystem: npm
+#     directory: /
+#     schedule:
+#       interval: weekly
+#       day: "tuesday"
+#       time: "01:00"
+#       timezone: "Asia/Kolkata"
+#     open-pull-requests-limit: 15
 
   - package-ecosystem: github-actions
     directory: /
     schedule:
       interval: weekly
-      day: 'tuesday'
-      time: '01:00'
-      timezone: 'Asia/Kolkata'
+      day: "tuesday"
+      time: "01:00"
+      timezone: "Asia/Kolkata"
     open-pull-requests-limit: 5
 
   - package-ecosystem: docker
     directory: /
     schedule:
       interval: weekly
-      day: 'tuesday'
-      time: '01:00'
-      timezone: 'Asia/Kolkata'
+      day: "tuesday"
+      time: "01:00"
+      timezone: "Asia/Kolkata"
     open-pull-requests-limit: 5

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

@@ -16,7 +16,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
           package-manager-cache: false
       - name: Install dependencies
         run: npm ci

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

@@ -1,10 +1,10 @@
 name: Deploy PR to Netlify
-run-name: 'Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})'
+run-name: "Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})"
 
 on:
   workflow_run:
-    workflows: ['Build pull request']
-    types: [completed]
+      workflows: ["Build pull request"]
+      types: [completed]
 
 jobs:
   deploy-pull-request:
@@ -21,15 +21,9 @@ jobs:
           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: |
-          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}"
+        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
         uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
         with:
@@ -42,13 +36,13 @@ jobs:
         uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
-          deploy-message: 'Deploy PR ${{ steps.pr.outputs.id }}'
+          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
           alias: ${{ steps.pr.outputs.id }}
           # These don't work because we're in workflow_run
           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
@@ -59,5 +53,5 @@ jobs:
           pr-number: ${{ steps.pr.outputs.id }}
           comment-tag: ${{ steps.pr.outputs.id }}
           message: |
-            Preview: ${{ steps.netlify.outputs.deploy-url }}
-            ⚠️ Exercise caution. Use test accounts. ⚠️
+              Preview: ${{ steps.netlify.outputs.deploy-url }}
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -20,7 +20,7 @@ jobs:
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
-
+        
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
 

.github/workflows/lockfile.yml

@@ -23,4 +23,4 @@ jobs:
           collapsibleThreshold: 25
           failOnDowngrade: false
           path: package-lock.json
-          updateComment: true
+          updateComment: true

.github/workflows/netlify-dev.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
           package-manager-cache: false
       - name: Install dependencies
         run: npm ci

.github/workflows/prod-deploy.yml

@@ -1,23 +1,39 @@
 name: Production deploy
 
 on:
-  release:
-    types: [published]
+  workflow_dispatch:
 
 jobs:
   deploy-and-tarball:
     name: Netlify deploy and tarball
+    outputs:
+      version: ${{ steps.vars.outputs.tag }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
       - name: Setup node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
           package-manager-cache: false
       - name: Install dependencies
         run: npm ci
+      - name: Run semantic release
+        run: npm run semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GIT_AUTHOR_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
+          GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
+          GIT_COMMITTER_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
+      - name: Get version from tag
+        id: vars
+        run: |
+          TAG=$(git describe --tags --abbrev=0) 
+          echo "tag=$TAG" >> $GITHUB_OUTPUT
       - name: Build app
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
@@ -26,7 +42,7 @@ jobs:
         uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
-          deploy-message: 'Prod deploy ${{ github.ref_name }}'
+          deploy-message: 'Prod deploy ${{ steps.vars.outputs.tag }}'
           enable-commit-comment: false
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
@@ -36,9 +52,6 @@ jobs:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
         timeout-minutes: 1
-      - name: Get version from tag
-        id: vars
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
       - name: Create tar.gz
         run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
       - name: Sign tar.gz
@@ -54,12 +67,16 @@ jobs:
       - name: Upload tagged release
         uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
         with:
+          tag_name: ${{ steps.vars.outputs.tag }}
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
   publish-image:
     name: Push Docker image to Docker Hub, GHCR
+    needs: deploy-and-tarball
+    env:
+      VERSION: ${{ needs.deploy-and-tarball.outputs.version }}
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -67,6 +84,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
       - name: Set up QEMU
         uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
       - name: Set up Docker Buildx
@@ -89,6 +108,9 @@ jobs:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ env.VERSION }}
+            type=raw,value=latest
       - name: Build and push Docker image
         uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
@@ -96,4 +118,4 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -4,4 +4,4 @@ node_modules
 devAssets
 
 .DS_Store
-.ideapackage-lock.json
+.idea

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes,
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the
+* Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-- The use of sexualized language or imagery, and sexual attention or
+* The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
   address, without their explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
+standards, including sustained inappropriate behavior,  harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

@@ -5,7 +5,6 @@ First off, thanks for taking the time to contribute! ❤️
 All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
 
 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
->
 > - Star the project
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
@@ -19,7 +18,6 @@ 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.
 
 **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.
@@ -28,9 +26,9 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 
 Example:
 
-| Not ideal                           | Better                                        |
-| ----------------------------------- | --------------------------------------------- |
-| Fixed markAllAsRead in RoomTimeline | Fix read marker when paginating room timeline |
+|Not ideal|Better|
+|---|----|
+|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
 
 It is not always possible to phrase every change in such a manner, but it is desired.
 
@@ -41,7 +39,6 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 **For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
 
 ## Helpful links
-
 - [BEM methodology](http://getbem.com/introduction/)
 - [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
 - [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)

LOTUS_BUGS.md

@@ -1,146 +0,0 @@
-# Lotus Chat — Bug Report & Technical Audit
-**Date:** June 2026
-
-This document tracks identified bugs, edge cases, and architectural discrepancies found during the audit of the Lotus Chat codebase. Recommended fixes are provided for each item.
-
----
-
-## 🚩 Critical & UI Bugs
-
-### 1. Drag-and-Drop Overlay Persistence
-**File:** `src/app/hooks/useFileDrop.ts`
-**Status:** Confirmed (Backlog item #!BUG)
-
-*   **Issue:** The file drop overlay remains visible if a user drags a file over the browser window and then moves the mouse out of the window without dropping.
-*   **Root Cause:** The `dragleave` event does not reliably decrement the internal `dragCounter` when the mouse leaves the browser viewport entirely.
-*   **Recommended Fix:** Update the `handleDragLeave` function to detect when the mouse has left the window by checking if `evt.relatedTarget` is null.
-
-### 2. Stale Member List in Verification Banner
-**File:** `src/app/hooks/useDeviceVerificationStatus.ts`
-**Status:** High Priority
-
-*   **Issue:** The "Unverified Device Warning" banner may fail to appear for users who join a room after it has already been opened in the client.
-*   **Root Cause:** The `memberIds` array is memoized only on `room.roomId`. New members joining the room do not trigger a recalculation of the list, meaning their devices are never checked.
-*   **Recommended Fix:** Add the room's joined member count to the memoization dependencies.
-
-### 3. Night Light Overlay Coverage (Portal Issue)
-**File:** `src/app/pages/App.tsx`
-**Status:** UI Consistency
-
-*   **Issue:** The Night Light (blue light filter) overlay is rendered inside the `#root` div. However, Cinny's modals, tooltips, and popouts are rendered inside a sibling `#portalContainer`.
-*   **Impact:** Modals and tooltips will appear at full brightness, bypassing the filter.
-*   **Recommended Fix:** Move the `NightLightOverlay` component to the end of `document.body` or utilize a Portal to render it inside `#portalContainer` with a high z-index (e.g., 9999).
-
-### 4. Decrypted Media Memory Leak (Gallery & Lightbox)
-**File:** `src/app/features/room/MediaGallery.tsx`
-**Status:** Performance / Memory
-
-*   **Issue:** Every image in the gallery history is decrypted and converted to a Blob URL simultaneously.
-*   **Impact:** Scrolling through long room histories can consume gigabytes of RAM, as Blob URLs are not revoked until the gallery is closed.
-*   **Recommended Fix:** Implement virtualization for the gallery grid. Only decrypt and create URLs for items currently in or near the viewport.
-
----
-
-## 🎨 UI/UX & Visual Consistency
-
-### 1. Search Button Hidden in E2EE Rooms
-**File:** `src/app/features/room/RoomViewHeader.tsx`
-**Status:** Major UX Regression
-
-*   **Issue:** The message search icon is hidden in encrypted rooms.
-*   **Impact:** Users cannot access the "Encrypted Room Search" feature (local cache scan) from the room header, even though the feature is implemented and functional in the search page.
-*   **Recommended Fix:** Remove the `!encryptedRoom` condition from the Search button renderer in the header.
-
-### 2. TDS Design Law Violations (Hardcoded Hex)
-**Files:** `src/app/components/GifPicker.tsx`, `src/app/components/VoiceMessageRecorder.tsx`
-**Status:** Styling Integrity
-
-*   **Issue:** Multiple custom components use hardcoded hex values (e.g., `#FF6B00`, `#060c14`) instead of the CSS variables defined in `lotus-terminal.css.ts`.
-*   **Impact:** These components will not adapt if theme tokens are updated in the central TDS file, and they bypass the "Design Law" established in the backlog.
-*   **Recommended Fix:** Replace all hardcoded hex values with `var(--lt-accent-orange)`, `var(--lt-bg-secondary)`, etc.
-
-### 3. Missing CSS Variable `--bg-surface-variant`
-**Files:** `src/app/features/message-search/MessageSearch.tsx`, `src/app/components/VoiceMessageRecorder.tsx`
-**Status:** UI Bug
-
-*   **Issue:** Components use `var(--bg-surface-variant)`, which is not defined in either `index.css` or `lotus-terminal.css.ts`.
-*   **Impact:** Backgrounds for the voice recorder and search cache panels appear transparent or fall back to browser defaults.
-*   **Recommended Fix:** Define `--bg-surface-variant` in both global themes and the TDS theme, or switch to using `--bg-surface-low`.
-
-### 4. Recent vs. Top Emoji Logic Discrepancy
-**File:** `src/app/plugins/recent-emoji.ts`
-**Status:** Logic Inconsistency
-
-*   **Issue:** The "Quick Reactions" hover bar is described as showing the "3 most recently used emojis." However, the implementation sorts by `usage count`, meaning it actually shows the "most frequently used" emojis.
-*   **Impact:** If a user uses a new emoji, it will not appear in the quick reactions until its total usage count exceeds the current top 3. This contradicts user expectations for a "recently used" list.
-*   **Recommended Fix:** Update `getRecentEmojis` to sort by the order in the array (which is unshifted in `addRecentEmoji`) or add a timestamp to each emoji entry in the account data to allow true chronological sorting.
-
----
-
-## 🔍 Technical Refinements
-
-### 1. Incomplete Python Comment Highlighting
-**File:** `src/app/utils/syntaxHighlight.ts`
-**Status:** Medium Priority
-
-*   **Issue:** Python comments (`#`) are only highlighted if they appear at the very start of a line. Inline comments like `print("hello") # comment` are treated as plain text.
-*   **Recommended Fix:** Update the detection logic to allow `#` after whitespace or tabs.
-
-```typescript
-// Recommended
-(i === 0 || code[i - 1] === '\n' || code[i - 1] === ' ' || code[i - 1] === '\t')
-```
-
-### 2. Duplicate Bookmarking Race Condition
-**File:** `src/app/hooks/useBookmarks.ts`
-**Status:** Data Integrity
-
-*   **Issue:** Rapidly clicking the bookmark button can trigger multiple `setAccountData` calls that read from the same stale local cache, potentially overwriting each other.
-*   **Recommended Fix:** Implement a queue or locking mechanism for account data updates to ensure atomicity.
-
-### 3. Presence Updater Matrix Base URL Access
-**File:** `src/app/hooks/usePresenceUpdater.ts`
-**Status:** Best Practice
-
-*   **Issue:** The code uses a hacky cast: `(mx as unknown as { baseUrl: string }).baseUrl`.
-*   **Recommended Fix:** Use the standard SDK method `mx.getHomeserverUrl()`.
-
-### 4. Encrypted Search Misses Historic Events
-**File:** `src/app/features/message-search/useLocalMessageSearch.ts`
-**Status:** Functional Limitation
-
-*   **Issue:** The search only scans `room.getLiveTimeline().getEvents()`.
-*   **Impact:** If a user has scrolled back and loaded historic messages into linked timelines, those messages will be ignored by the search.
-*   **Recommended Fix:** Iterate through all timelines in the room's primary `TimelineSet` using `room.getUnfilteredTimelineSet().getTimelines()`.
-
-### 5. useAccountDataCallback Memoization Risk
-**File:** `src/app/hooks/useAccountDataCallback.ts`
-**Status:** Maintenance Risk
-
-*   **Issue:** The hook attaches/detaches a Matrix event listener every time the `onAccountData` callback changes. If a component using this hook does not memoize the callback (via `useCallback`), the listener will be churned on every render.
-*   **Impact:** Potential performance degradation and subtle event-handling bugs if listeners are added/removed multiple times per second.
-*   **Recommended Fix:** Add a JSDoc warning to the hook file instructing developers to always wrap the callback in `useCallback`.
-
----
-
-## 📝 Documentation & Accessibility
-
-### 1. Documentation Discrepancy (EC Spotlight)
-**Files:** `LOTUS_FEATURES.md` vs `matrix/README.md`
-
-*   **Issue:** `LOTUS_FEATURES.md` claims there is an "Auto-revert spotlight on screenshare" feature. `matrix/README.md` correctly states this was **removed** as it broke fullscreen views.
-*   **Action:** Update `LOTUS_FEATURES.md` to remove the mention.
-
-### 2. Presence Badge Accessibility
-**File:** `src/app/components/presence/Presence.tsx`
-**Status:** Accessibility
-
-*   **Issue:** `aria-labelledby` refers to a Tooltip ID that may not be in the DOM when the badge is first read by a screen reader.
-*   **Recommended Fix:** Add a descriptive `aria-label` directly to the `Badge` component (e.g., `aria-label="Status: Online"`).
-
-### 3. Missing Status Tooltip on Text
-**File:** `src/app/features/room/MembersDrawer.tsx`
-**Status:** UX Improvement
-
-*   **Issue:** In the members drawer, the status message text is truncated but does not have a tooltip. The tooltip only exists on the small presence dot.
-*   **Recommended Fix:** Wrap the status text in a `TooltipProvider` to allow users to read long status messages.

LOTUS_FEATURES.md

@@ -1,776 +0,0 @@
-# Lotus Chat — Feature Reference
-
-Everything added to Lotus Chat beyond upstream Cinny v4.12.1.
-Last updated: June 2026.
-
----
-
-## Table of Contents
-
-1. [Branding & Identity](#branding--identity)
-2. [LotusGuild Terminal Design System (TDS) v1.2](#lotusguild-terminal-design-system-tds-v12)
-3. [Animated Chat Backgrounds (P5-4)](#animated-chat-backgrounds-p5-4)
-4. [Glassmorphism Sidebar (P5-3)](#glassmorphism-sidebar-p5-3)
-5. [Night Light / Blue Light Filter (P5-5)](#night-light--blue-light-filter-p5-5)
-6. [Voice / Video Call Improvements](#voice--video-call-improvements)
-7. [Per-Message Read Receipts](#per-message-read-receipts)
-8. [Delivery Status Indicators](#delivery-status-indicators)
-9. [Messaging Enhancements](#messaging-enhancements)
-10. [Presence](#presence)
-11. [UX & Composer](#ux--composer)
-12. [Room Customization](#room-customization)
-13. [Moderation](#moderation)
-14. [Notifications](#notifications)
-15. [Server Integration](#server-integration)
-16. [Infrastructure](#infrastructure)
-17. [Key Custom Files](#key-custom-files)
-
----
-
-## Branding & Identity
-
-- Package renamed to `lotus-chat`; description updated in `package.json`
-- App title set to "Lotus Chat" throughout (window title, meta tags, manifest)
-- Favicon, PWA icons (all sizes), and Apple touch icons replaced with `Lotus.png`
-- Lotus logo displayed in the About dialog and Auth page
-- Auth footer: dynamic version pulled from `package.json`; links to `lotusguild.org`, `chat.lotusguild.org`, and `matrix.lotusguild.org`
-- Welcome page tagline: "A Matrix client for Lotus Guild"
-- Encryption key export filename changed to `lotus-keys.txt`
-- `manifest.json` updated with Lotus name, description, and branding colors
-
----
-
-## LotusGuild Terminal Design System (TDS) v1.2
-
-### Dark Mode — `LotusTerminalTheme`
-
-A CRT terminal aesthetic applied globally when the TDS theme is active.
-
-**Visual effects:**
-- Scanline overlay via repeating `linear-gradient` pseudo-element
-- Vignette via radial-gradient overlay
-- Phosphor glow on text and accents via `text-shadow` / `box-shadow`
-
-**Color palette:**
-| Token | Value | Role |
-|---|---|---|
-| `--lt-bg` | `#030508` | Page/panel background |
-| `--lt-accent-orange` | `#FF6B00` | Primary accent |
-| `--lt-accent-cyan` | `#00D4FF` | Secondary accent |
-| `--lt-accent-green` | `#00FF88` | Success / active states |
-| `--lt-text` | `#c4d9ee` | Body text |
-
-**Typography & chrome:**
-- Monospace font stack applied to all UI elements
-- Terminal-style scrollbars (thin, accent-colored track)
-
-**Decorative patterns:**
-- Custom hex-grid CSS background pattern
-- Circuit-board CSS background pattern (switchable)
-
-**Boot sequence:**
-- Matrix-style boot messages on the welcome page; press Escape to skip
-- Implemented in `src/lotus-boot.ts`
-
-**CSS variable family:** all custom tokens use the `--lt-*` prefix, defined in `src/lotus-terminal.css.ts`.
-
-### Light Mode — `LotusTerminalLightTheme`
-
-A full light-palette counterpart to the dark TDS theme.
-
-**Color palette:**
-| Token | Light Value | Role |
-|---|---|---|
-| `--lt-bg` | `#edf0f5` | Page/panel background |
-| `--lt-accent-orange` | `#c44e00` | Primary accent |
-| `--lt-accent-cyan` | `#0062b8` | Secondary accent |
-| `--lt-accent-green` | `#006d35` | Success / active states |
-| `--lt-text` | `#111827` | Body text |
-
-**Differences from dark mode:**
-- CRT effects (scanlines, vignette, phosphor glow) are disabled
-- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass` to avoid bleed into non-TDS themes
-- `ThemeManager.tsx` is responsible for setting the `data-theme` attribute on the `<html>` element when theme changes
-
-### Chat Background Patterns (20+ static)
-
-A library of CSS-only background patterns for the chat area, all using CSS custom properties so they adapt automatically to both TDS dark and light palettes:
-
-- Blueprint grid
-- Carbon fiber
-- Starfield
-- Topographic contours
-- Herringbone
-- Crosshatch
-- Chevron
-- Polka dots
-- Triangles
-- Plaid
-- (and additional variants)
-
----
-
-## Animated Chat Backgrounds (P5-4)
-
-Five CSS-only animated wallpapers implemented with vanilla-extract keyframes. No `<canvas>` element is used — all animation is pure CSS.
-
-### Available Animations
-
-**Digital Rain**
-Two-layer vertical stripe scroll with parallax effect. Wide stripes animate at 8s, narrow stripes at 4s, creating depth.
-
-**Star Drift**
-Three-layer radial-gradient dot field drifting diagonally across the viewport. Each layer moves at a distinct speed and angle.
-
-**Grid Pulse**
-Neon grid lines that expand and contract via a `backgroundSize` keyframe. Grid color follows `--lt-accent-cyan` in dark mode.
-
-**Aurora Flow**
-Four radial-gradient ellipses sweeping across a 200% canvas. Colors use the TDS green/cyan/orange palette and blend softly.
-
-**Fireflies**
-Three layers of warm glowing dots that drift slowly. Dot color follows `--lt-accent-orange` for a warm bioluminescent feel.
-
-### API
-
-```ts
-getChatBg(bg: ChatBg, isDark: boolean, pauseAnimations?: boolean): CSSProperties
-```
-
-Strips all `animation` properties from the returned style object when either `pauseAnimations` is `true` or the `prefers-reduced-motion: reduce` media query is active.
-
-### Settings Integration
-
-A "Pause Background Animations" toggle is exposed in **Settings → Appearance**. The preference is persisted and read by `getChatBg()` at render time.
-
-### Files
-
-- `src/app/styles/Animations.css.ts` — vanilla-extract keyframe definitions
-- `src/app/features/lotus/chatBackground.ts` — `getChatBg()` implementation and pattern registry
-
----
-
-## Glassmorphism Sidebar (P5-3)
-
-An optional frosted-glass sidebar style toggled in **Settings → Appearance**.
-
-**Implementation:**
-- `SidebarGlass` vanilla-extract class applies `background: rgba(3, 5, 8, 0.55)` and `backdropFilter: blur(12px)` to the sidebar element
-- `SidebarNav.tsx` uses a `useEffect` to mirror the active chat background onto `document.body` when the glassmorphism setting is enabled, so the blur filter has meaningful content to work through
-- Degrades gracefully on browsers without `backdrop-filter` support (falls back to the semi-transparent background)
-
----
-
-## Night Light / Blue Light Filter (P5-5)
-
-A warm orange overlay rendered over the entire UI to reduce blue light emission.
-
-**Implementation:**
-- `NightLightOverlay` component mounted directly in `App.tsx`
-- CSS: `position: fixed; inset: 0; pointer-events: none; z-index: 9998`
-- Orange tint color with configurable opacity
-- **Controls:** Toggle to enable/disable + intensity slider ranging from 5% to 80% opacity
-- Settings persisted via the standard Lotus settings store
-
----
-
-## Voice / Video Call Improvements
-
-### Element Call Upgrade
-
-Upgraded embedded Element Call widget from **0.16.3** to **0.19.4**.
-
-### Camera Default Off
-
-Camera starts disabled on join. The `cameraOnJoin` setting is explicitly opt-in and is not persisted to `localStorage` between sessions, preventing the previous behavior where a prior-session preference could unexpectedly enable the camera.
-
-### UI Fixes
-
-- **Deafen button** — corrected tooltip text that was previously swapped with the mute tooltip
-- **Screenshare confirmation** — a confirmation dialog is shown before initiating a screenshare broadcast to the room
-- **Auto-revert spotlight on screenshare** — removed; the 600ms grid-revert click was causing fullscreen screenshare to show avatar tiles instead of the screen. EC now handles layout natively.
-
-### Push to Talk (PTT)
-
-- Configurable keybind; defaults to `Space`
-- Visual indicator shown in both TDS and non-TDS themes while PTT is active
-- Event listener attached to both the main window and the Element Call iframe's `contentWindow` to ensure reliable capture regardless of focus
-- Mic state is preserved correctly when switching into or out of PTT mode
-
-### Push to Deafen
-
-`M` key triggers `toggleSound()` in `CallControls.tsx`, toggling the deafen state without requiring a mouse click.
-
-### Noise Suppression Toggle
-
-A `noiseSuppression` URL parameter is passed to the Element Call widget URL, allowing the noise suppression feature to be toggled from within Lotus settings.
-
-### Call Button Scoping
-
-The call button is shown only in DMs and invite-only rooms that do not have an `m.space.parent` event. It is hidden in public rooms and space channels to avoid accidental broadcast calls.
-
-### Picture-in-Picture (PiP)
-
-- 280×158px floating window that stays on screen when navigating away from the call room
-- Draggable via pointer events with a 5px movement threshold to distinguish drags from clicks; touch events are supported
-- Clicking the PiP window navigates back to the call room
-- Implemented with an imperative `useEffect` style for position overrides because `useCallEmbedPlacementSync` writes geometry directly onto the DOM element, making declarative approaches unreliable
-
-### Call Embed Positioning
-
-- Uses `getBoundingClientRect()` (viewport-relative) instead of the previous `offsetTop`/`offsetLeft` (parent-relative) calculations, fixing misalignment in scrolled layouts
-- Position is synced on mount via `useEffect` with a `ResizeObserver` to handle dynamic layout changes
-
-### Dark Mode in Element Call
-
-`applyStyles()` injects `:root { color-scheme: dark | light }` into the Element Call iframe after the user joins. The theme is also updated when `setTheme()` is called, keeping the call UI in sync with the Lotus theme selection.
-
-### Call Embed Wallpaper
-
-The active `chatBackground` pattern is applied to the `div[data-call-embed-container]` wrapper. The iframe's `html, body` are forced to `background: none !important` so the host pattern shows through.
-
-### TDS Typing Indicator
-
-The animated typing indicator dots use `var(--lt-accent-orange)` as their color when the TDS theme is active, matching the terminal aesthetic.
-
----
-
-## Per-Message Read Receipts
-
-A full per-message read receipt system showing exactly who has seen each message.
-
-### Core Hook — `useRoomReadPositions`
-
-```ts
-useRoomReadPositions(room: Room): Map<eventId, userId[]>
-```
-
-- Listens to `Room.localEchoUpdated` and `RoomMember.typing` events to stay reactive
-- Debounced 150ms to avoid excessive re-renders during rapid receipt updates
-- Located at `src/app/hooks/useRoomReadPositions.ts`
-
-### `nearestRenderableId()`
-
-A utility that walks backward through the event timeline from a given event ID to find the nearest event that is actually rendered (skipping reactions, edits, and other non-display events). Used to map a user's read position to a visible message.
-
-### `ReadPositionsContext`
-
-React context at `src/app/features/room/ReadPositionsContext.ts` that provides the positions map to all timeline components without prop drilling.
-
-### `ReadReceiptAvatars`
-
-A pill of overlapping 24px user avatars displayed at the bottom-right of each message. Shows a maximum of 5 avatars; additional readers are shown as an overflow count (e.g., `+3`).
-
-### "Seen by" Modal — `EventReaders`
-
-Clicking the avatar pill opens a modal (`src/app/components/event-readers/EventReaders.tsx`) listing:
-- User avatar
-- Display name
-- Formatted timestamp of when the receipt was recorded
-- Respects the `hour24Clock` setting for timestamp formatting
-
----
-
-## Delivery Status Indicators
-
-Visual feedback on message delivery state, shown on the sender's own messages:
-
-| State | Indicator |
-|---|---|
-| Sending (local echo) | ⟳ rotating clock icon |
-| Sent (server ACK received) | ✓ checkmark |
-| Failed | ✕ in red; orange glow in TDS |
-
-The indicator is hidden once the server confirms the event (when the internal status transitions to `null`), keeping the timeline clean for settled messages.
-
----
-
-## Messaging Enhancements
-
-### Rich Room Topics
-
-- Topic `formatted_body` is rendered via `sanitizeCustomHtml` + `html-react-parser`, supporting bold, italic, links, and other inline HTML
-- The room header shows a plain-text preview of the topic
-- Clicking the topic preview opens a full modal with the formatted body
-- The room settings topic editor includes a formatting toolbar with **B**, *I*, ~~S~~, and `code` buttons
-
-### Edit History Viewer
-
-`EditHistoryModal.tsx` fetches and displays the full edit history of a message.
-
-- API: `GET /_matrix/client/v1/rooms/{roomId}/relations/{eventId}/m.replace`
-- E2EE fix: the "Original" entry uses `getClearContent()` to retrieve the decrypted content rather than the encrypted payload
-- Accessible from the message context menu
-
-### Inline GIF Preview
-
-- Detects Giphy and Tenor share URLs via pattern matching on the message body
-- Renders matched URLs as `<img loading="lazy">` inline in the message
-- URL is proxied through the Matrix `/_matrix/media/v3/preview_url` endpoint to avoid mixed-content issues
-
-### GIF Picker
-
-- Giphy-powered picker accessible from the composer toolbar
-- The button is only shown when `gifApiKey` is set in `config.json`
-- Selected GIFs are sent as `m.image` events
-- Picker UI is styled with TDS variables when the TDS theme is active
-- Located at `src/app/components/GifPicker.tsx`
-
-### Message Forwarding
-
-Context menu → **Forward** allows forwarding a message to any room the user is a member of.
-
-### Draft Persistence
-
-- Composer drafts are stored in `localStorage` keyed by `roomId`
-- Draft is cleared on successful send
-- The Jotai atom is the primary source of truth; `localStorage` is only read on room mount
-
-### Message Search Date Range
-
-- The search panel accepts `from_ts` and `to_ts` values (epoch milliseconds) passed to the search API
-- A chip shows the active date range with an **×** button to clear it
-
-### Image / Video Captions
-
-Images and videos can be sent with a caption. The caption and media are sent as a single event.
-
-### Location Sharing
-
-`m.location` events render an inline map tile using the coordinates from the event content.
-
-### Deleted Message Placeholders
-
-Redacted events display "This message has been deleted" along with the redaction reason if one was provided, rather than leaving a blank gap in the timeline. This is a one-line change in the `eventRenderer` filter.
-
-### Message Bookmarks
-
-- Bookmarks are stored in `io.lotus.bookmarks` account data, syncing across all devices
-- Maximum of 500 bookmarked entries
-- `BookmarksPanel.tsx` is a sidebar panel accessible from the navigation rail
-- Hook: `src/app/hooks/useBookmarks.ts`
-
-### Message Scheduling
-
-- Implements MSC4140 delayed events for scheduling messages to be sent at a future time
-- `ScheduleMessageModal.tsx` provides the date/time picker UI
-- A collapsible "Scheduled" tray in the room shows all pending scheduled messages with individual cancel buttons
-- Utilities in `src/app/utils/scheduledMessages.ts`
-
-### File Upload Compression (opt-in)
-
-- Implemented in `UploadCardRenderer.tsx`
-- Uses the Canvas API: `canvas.toBlob(callback, 'image/jpeg', 0.82)` for compression
-- A `Switch` toggle in the upload preview UI lets the user opt in per upload
-- Shows before and after file sizes so the user can evaluate the tradeoff
-- Works on all image types except SVG (which cannot be drawn to canvas)
-- On send, the original uncompressed MXC URL is deleted from the media store
-- On cancel, any orphaned MXC from a prior upload is cleaned up via `tryDeleteMxcContent()`
-
-### Richer URL Preview Cards
-
-`UrlPreviewCard.tsx` implements 13 domain-specific card layouts:
-
-| Domain | Layout |
-|---|---|
-| YouTube | Thumbnail, title, channel, duration |
-| Vimeo | Thumbnail, title, author |
-| GitHub | Repo name, description, stars/forks/language |
-| Twitter / X | Avatar, display name, handle, tweet body |
-| Reddit | Subreddit, post title, score, comment count |
-| Spotify | Album art, track/album/playlist name, artist |
-| Twitch | Stream thumbnail, streamer, game, viewer count |
-| Steam | Header image, game name, price, rating |
-| Wikipedia | Article title, extract excerpt |
-| Discord | Server name, invite metadata |
-| npm | Package name, version, description, weekly downloads |
-| Stack Overflow | Question title, vote/answer count, tags |
-| IMDb | Poster, title, year, rating |
-
-Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unparseable preview responses are suppressed entirely rather than showing a blank card.
-
-### Poll Creation
-
-- `PollCreator.tsx` creates stable `m.poll.start` events
-- Supports 2 to 10 answer options
-- Supports both single-choice and multiple-choice modes
-- Accessible via the `Icons.OrderList` button in the composer toolbar
-
-### Poll Display
-
-`PollContent.tsx` renders polls in read-only mode. Handles both the stable `m.poll` format and the legacy MSC3381 unstable `org.matrix.msc3381.poll.start` format. Displays current vote counts and a note directing users to Element to cast votes.
-
-### Voice Message Playback Speed
-
-`AudioContent.tsx` adds a playback speed cycle button to voice message players. Available speeds: `[0.75, 1, 1.5, 2]×`. A `useEffect` sets `audioElement.playbackRate` whenever the speed selection changes.
-
----
-
-## Presence
-
-### Discord-Style Presence Selector
-
-A presence status selector in the user panel offering five modes:
-
-| Mode | Matrix broadcast |
-|---|---|
-| Online | `online` |
-| Idle | `unavailable` |
-| Do Not Disturb | `unavailable` + `status_msg: 'dnd'` |
-| Invisible | `offline` |
-| Auto | Standard Matrix presence lifecycle |
-
-- Selection persists via the `presenceStatus` setting
-- `usePresenceUpdater` short-circuits its automatic presence updates when a manual mode (anything other than Auto) is selected
-
-### Custom Status Message
-
-- Up to 64 characters of free text plus an emoji
-- Optional auto-clear timer with presets: 30 minutes, 1 hour, 4 hours, 1 day, 3 days, 7 days
-- Status is broadcast via `mx.setPresence({ status_msg: ... })`
-- Character counter appears at 56/64 characters remaining to warn of the limit
-
-### Presence Badges
-
-`PresenceBadge` component displays a colored dot indicating presence state. Used in:
-- Members drawer
-- User settings panel
-
-### Presence Avatar Ring
-
-`PresenceRingAvatar` wraps any avatar component using `React.cloneElement` to inject an `outline: 2px solid` ring whose color maps to the user's presence state. `outlineOffset: 2px` ensures the ring sits cleanly outside the avatar regardless of the avatar's `border-radius`.
-
-Applied in:
-- Message timeline
-- Members drawer
-- `@mention` autocomplete dropdown
-- Inbox / notifications panel
-
-### Document Title Unread Count
-
-The browser tab title updates to reflect unread state:
-- `(N) Lotus Chat` — N unread messages
-- `· Lotus Chat` — unread activity without a specific count
-- `Lotus Chat` — no unread items
-
-### Extended Profile Fields
-
-Supports MSC4133 custom profile fields via `PUT /_matrix/client/unstable/uk.tcpip.msc4133/{userId}/{field}`:
-- `m.pronouns` — displayed in profile panels
-- `m.tz` — IANA timezone string (e.g., `America/New_York`)
-
-Hook: `src/app/hooks/useExtendedProfile.ts`
-
-### User Local Time
-
-When a user has `m.tz` set in their profile:
-- Their profile panel shows a clock icon, their current local time, and the timezone abbreviation
-- The displayed time updates every 60 seconds
-- Respects the global `hour24Clock` setting for 12h/24h formatting
-
-Hook: `src/app/hooks/useLocalTime.ts`
-
----
-
-## UX & Composer
-
-### Message Length Counter
-
-A character count indicator is shown in the composer when `charCount > 0`. The counter resets to zero when switching rooms.
-
-### Quick Emoji Reactions on Hover
-
-A hover toolbar appears over messages, showing the 3 most recently used emojis (sourced from `ElementRecentEmoji` account data) as one-click reaction buttons. The buttons are positioned between the emoji-board button and the Reply button. Clicking a quick reaction closes any open emoji picker.
-
-### In-App Notification Toasts
-
-`LotusToastContainer.tsx` displays rich in-app notification toasts with:
-- 24px sender avatar
-- Sender display name
-- Message body preview
-- Room name
-- × dismiss button
-- 4-second auto-dismiss timeout
-- Slide-in animation via `@keyframes lotusToastIn`
-
-OS-level notifications are unchanged and still fire when the window is not focused.
-
-### Collapsible Long Messages
-
-Messages exceeding a configurable line threshold are truncated with a "Show more" toggle.
-
-- Default threshold: 20 lines
-- Threshold is configurable in **Settings → Appearance**
-- Uses CSS `max-height` + `overflow: hidden` with a smooth transition
-- Transition is disabled when `prefers-reduced-motion: reduce` is active
-
-### Message Send Animation
-
-A subtle animation plays on the sender's own messages as they appear in the timeline:
-- `transform: scale(0.97) → scale(1)` combined with `opacity: 0.4 → 1`
-- Duration: 0.15s, ease-out
-- Only applied to the current user's outgoing messages
-- Disabled when `prefers-reduced-motion: reduce` is active
-
-### Right-Click Room Context Menu
-
-Right-clicking a room in the sidebar opens a context menu with:
-- **Mute** with a duration submenu: 15 minutes, 1 hour, 8 hours, 24 hours, Indefinite
-- **Copy Room Link** — copies the `matrix.to` URI to clipboard
-- **Mark as Read** — marks all events in the room as read
-- **Leave Room** — with a confirmation step
-- **Room Settings** — opens the room settings panel
-
-### Unverified Device Warning
-
-- Controlled by the `warnOnUnverifiedDevices` setting (off by default)
-- When enabled, a `Warning.Container` banner is displayed above the composer in encrypted rooms that have unverified device sessions
-- The warning is informational only and never blocks sending
-
-### Sidebar Room Filter
-
-A text input at the top of the room list filters rooms by display name in real time. The filter is cleared automatically when switching sidebar tabs.
-
-### DM Last Message Preview
-
-Direct message entries in the sidebar show:
-- A 48-character truncated preview of the last message body
-- A relative timestamp (e.g., "2m ago")
-- Reactivity via `useRoomLatestRenderedEvent`
-- Encrypted messages show "Encrypted message" if decryption fails; successfully decrypted messages show their plaintext preview
-
-### Room Sort Order
-
-The room list sort order can be configured in **Settings → Appearance**:
-- Recent Activity (default)
-- A → Z (alphabetical)
-- Unread First
-
-Persists via the `homeRoomSort` setting.
-
-### Favorite Rooms
-
-- Rooms can be favorited via the `m.favourite` tag (standard Matrix tag)
-- A "Favorites" section appears above the main room list when any rooms are favorited
-- Favorited rooms display a star indicator in the sidebar
-- Favorites sync across all devices via account data
-
-### Invite Link + QR Code
-
-`RoomShareInvite.tsx` provides a shareable invite UI:
-- 160×160px QR code generated via `api.qrserver.com`
-- "Copy Link" button to copy the `matrix.to` URI
-- Also accessible via a toggle button (⊞) in the Invite modal
-
-### Private Read Receipts
-
-A toggle in **Settings → Privacy** switches between sending `m.read` (public receipts) and `m.read.private` (private receipts visible only to the sender and the server).
-
-### Media Gallery
-
-`MediaGallery.tsx` — a right-side drawer for browsing room media.
-
-- Three tabs: **Images**, **Videos**, **Files**
-- Reads already-decrypted events from the room timeline
-- Encrypted images show a lock placeholder rather than an error
-- "Load More" button triggers `mx.paginateEventTimeline()` to fetch older media
-
-### Knock-to-Join
-
-- `RoomIntro.tsx` shows a "Request to Join" button for knock-restricted rooms
-- Clicking sends `mx.knockRoom(roomId)` with an optional reason
-- The members drawer shows a "Pending Requests" section for room admins, listing users who have knocked
-
-### Code Syntax Highlighting (TDS)
-
-`syntaxHighlight.ts` provides TDS-aware syntax highlighting using inline styles derived from `--lt-accent-*` CSS variables. Supported languages: JavaScript, TypeScript, JSX, TSX, Python, Rust. Falls back to ReactPrism for unsupported languages.
-
-### Room Emoji Prefix
-
-A leading emoji in a room name is rendered at 1.15× size in the sidebar for visual hierarchy. An emoji picker button (😊) is added to all room name input fields, prepending the selected emoji to the room name.
-
----
-
-## Room Customization
-
-### Personal Room Name Overrides
-
-- Users can set a personal display name for any room, stored in `io.lotus.room_names` account data
-- A pencil indicator in the sidebar shows rooms with active overrides
-- Overrides sync across all devices
-- Applied consistently in: room header, sidebar, room intro, and call overlay
-
-### Export Room History
-
-`ExportRoomHistory.tsx` exports a room's message history in three formats:
-
-- **Plain Text** — human-readable transcript
-- **JSON** — raw event data
-- **HTML** — styled, self-contained page
-
-Features:
-- Optional date range filter
-- Progress indicator during export
-- Uses `mx.paginateEventTimeline()` to retrieve history in chunks
-- E2EE-aware: exports decrypted content for rooms the user has keys for
-
-### Room Activity / Mod Log
-
-`RoomActivityLog.tsx` provides a searchable log of administrative events in the room:
-
-- Member join/leave/kick/ban events
-- Power level changes
-- Room name, topic, avatar, and ACL changes
-- Human-readable descriptions for each event type
-- Type filter to narrow results
-- "Load More" button for pagination
-
-### Server ACL Editor
-
-`RoomServerACL.tsx` — UI for editing `m.room.server_acl` state events.
-
-- Separate allow and deny server lists
-- Wildcard validation (e.g., `*.example.com`)
-- "Allow IP literal addresses" toggle
-- Read-only for users without admin power level
-
-### Room Stats / Insights
-
-`RoomInsights.tsx` (not shown by default; accessible as a non-default tab in room settings).
-
-- Top 5 most active members (bar chart by message count)
-- Top 5 most-used reactions
-- Media breakdown by type (images, videos, files)
-- 24-hour activity heatmap showing message volume by hour of day
-
----
-
-## Moderation
-
-### Report Room
-
-`ReportRoomModal.tsx` provides a UI for reporting a room to the homeserver.
-
-- API: `POST /_matrix/client/v3/rooms/{roomId}/report`
-- Category dropdown for classifying the report
-- Modal auto-closes 1.5 seconds after a successful submission
-- Hidden for rooms the user owns and for server notice rooms
-
-### Policy List / Ban List Viewer
-
-Accessible via **Room/Space Settings → Policy Lists** (admin only).
-
-- Displays the room's subscribed policy lists in read-only format
-- Subscribe (join) and unsubscribe (leave) controls for each list
-- Enforcement is delegated to Draupnir or equivalent tooling; Lotus only manages list membership
-
----
-
-## Notifications
-
-### Custom Notification Sounds
-
-- `messageSoundId` and `inviteSoundId` settings select from a predefined map
-- Sound options defined in `notificationSounds.ts` as `NOTIFICATION_SOUND_MAP`
-- Preview (▶) buttons in the settings panel let users audition sounds before selecting
-- Separate sound selection for: `notification`, `invite`, `call`, `none`
-
-### Notification Quiet Hours
-
-- Controlled by `quietHoursEnabled`, `quietHoursStart`, and `quietHoursEnd` settings
-- Correctly handles overnight spans (e.g., 22:00 → 07:00)
-- Gates both `notify()` (visual/OS notifications) and `playSound()` (audio alerts)
-- When active, notifications are silently dropped rather than queued
-
-### Full Push Rule Editor
-
-A complete UI for managing Matrix push notification rules:
-
-- Displays rules by kind: `override`, `room`, `sender`, `underride`
-- Enable/disable toggle per rule
-- Delete button for removable rules
-- Add-rule form for creating new `room` and `sender` rules
-
----
-
-## Server Integration
-
-### Server Support Contact
-
-- Fetches `/.well-known/matrix/support` on the user's homeserver
-- Contact information is displayed in **Settings → Help & About**
-- Styled with TDS cyan when the TDS theme is active
-- Degrades gracefully with no error shown on 404 responses
-
-### Server Notices
-
-`m.server_notice` rooms receive special treatment:
-- A `Chip variant="Warning"` badge reading "Server Notice" is shown in the room header
-- The composer is read-only (no message input)
-- Invite, Report Room, and Room Settings menu items are hidden
-
----
-
-## Infrastructure
-
-### Authenticated Media
-
-`mxcUrlToHttp()` calls now use the correct argument order for MSC3916 authenticated media:
-
-```ts
-mxcUrlToHttp(mx, mxcUrl, useAuthentication, width, height, 'crop')
-```
-
-The `useAuthentication` parameter was previously mispositioned, causing unauthenticated requests to be sent for media in rooms that required authentication.
-
-### Upstream Tracking
-
-- An `upstream` git remote pointing to `github.com/cinnyapp/cinny` is maintained for merge tracking
-- A daily divergence check runs via `cinny-upstream-check.sh` on LXC 106
-- This enables prompt review of upstream security patches and feature releases
-
-### Rolldown CJS Interop — millify
-
-`src/app/plugins/millify.ts` re-exports `millify` as a named import to bypass the `__toESM` interop bug in the Rolldown bundler, which caused the default export of CJS modules to be undefined at runtime.
-
-### Sentry Noise Filter
-
-`ignoreErrors: ['Request timed out']` is added to `Sentry.init()` to suppress a high-volume, low-signal error caused by transient network conditions. This keeps the Sentry issue queue focused on actionable errors.
-
-### URL Preview Default in Encrypted Rooms
-
-The `encUrlPreview` setting defaults to `true` rather than `false`. A security advisory chip in **Settings → Privacy** explains the tradeoff (the homeserver can see which URLs are being previewed) so users can make an informed choice.
-
----
-
-## Key Custom Files
-
-| File | Purpose |
-|---|---|
-| `src/lotus-terminal.css.ts` | TDS CSS variable definitions, scanline/vignette effects, dark + light palette tokens |
-| `src/lotus-boot.ts` | Matrix-style boot sequence animation on the welcome page |
-| `src/app/hooks/useRoomReadPositions.ts` | Reactive hook returning `Map<eventId, userId[]>` for per-message read receipts |
-| `src/app/features/room/ReadPositionsContext.ts` | React context providing read positions map to timeline components |
-| `src/app/components/read-receipt-avatars/` | `ReadReceiptAvatars` component — overlapping avatar pill with overflow count |
-| `src/app/components/event-readers/EventReaders.tsx` | "Seen by" modal listing readers with display name and timestamp |
-| `src/app/components/GifPicker.tsx` | Giphy-powered GIF picker, TDS-styled, gated on `gifApiKey` in config |
-| `src/app/features/call/CallControls.tsx` | Push to Deafen (M key), PTT visual indicator, TDS typing dots |
-| `src/app/plugins/call/CallControl.ts` | `onControlMutation()` state tracking, screenshare audio mute logic, call button scoping |
-| `src/app/components/CallEmbedProvider.tsx` | PiP window, draggable overlay, navigate-on-click, imperative geometry sync |
-| `src/app/plugins/call/CallEmbed.ts` | `getBoundingClientRect()`-based embed positioning, ResizeObserver sync, dark mode injection |
-| `src/app/plugins/millify.ts` | Named re-export of `millify` to fix Rolldown `__toESM` CJS interop bug |
-| `src/app/features/room/MediaGallery.tsx` | Images/Videos/Files gallery drawer with pagination and E2EE awareness |
-| `src/app/features/room/PollCreator.tsx` | Poll creation UI for stable `m.poll.start`, single/multiple choice, 2–10 options |
-| `src/app/features/common-settings/general/RoomShareInvite.tsx` | QR code + copy link invite sharing modal |
-| `src/app/utils/syntaxHighlight.ts` | TDS-aware syntax highlighter using `--lt-accent-*` inline styles |
-| `src/app/features/room-settings/ExportRoomHistory.tsx` | Plain Text / JSON / HTML room history export with date range and E2EE support |
-| `src/app/features/room-settings/RoomActivityLog.tsx` | Human-readable mod log for member and state change events |
-| `src/app/features/room-settings/RoomServerACL.tsx` | `m.room.server_acl` editor with allow/deny lists and wildcard validation |
-| `src/app/features/room-settings/RoomInsights.tsx` | Room stats: top members, top reactions, media breakdown, activity heatmap |
-| `src/app/features/bookmarks/BookmarksPanel.tsx` | Bookmarks sidebar panel backed by `io.lotus.bookmarks` account data |
-| `src/app/hooks/useBookmarks.ts` | Hook for reading and mutating the bookmarks account data entry |
-| `src/app/features/room/ScheduleMessageModal.tsx` | MSC4140 delayed event scheduling UI with date/time picker |
-| `src/app/utils/scheduledMessages.ts` | Helpers for creating, listing, and cancelling MSC4140 delayed events |
-| `src/app/hooks/useExtendedProfile.ts` | MSC4133 extended profile fields (`m.pronouns`, `m.tz`) read/write |
-| `src/app/hooks/useLocalTime.ts` | Derives current local time from `m.tz` profile field, updates every 60s |
-| `src/app/components/url-preview/UrlPreviewCard.tsx` | 13 domain-specific URL preview layouts plus generic fallback with favicon |

LOTUS_TODO.md

@@ -1,437 +0,0 @@
-# Lotus Chat — Work Backlog
-
-**Repo:** `lotus` branch at `https://code.lotusguild.org/LotusGuild/cinny`  
-**Deploy:** push to `lotus` → CI → auto-deploy to `chat.lotusguild.org` (~11 min)
-
----
-
-## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
-
-> **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
-> Do NOT hardcode hex values. Do NOT invent new variable names. Do NOT deviate from the design tokens defined in that file.
-> The canonical variable reference: `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green`, `--lt-glow-orange`, `--lt-box-glow-*`, `--lt-border-color`, etc.
-> Reference implementation for code patterns: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css)
-> This rule applies to EVERY task in this file without exception.
-
----
-
-Completed features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md).
-
----
-
-Legend:
-
-- `[AUDIT REQUIRED]` — at least one assumption needs code/server verification before implementing
-- `[SERVER CHECK]` — depends on a Synapse feature or MSC; verify on `matrix.lotusguild.org`
-- `[LOW PRIORITY]` — implement after all higher-priority items
-- `[EXTREME COMPLEXITY]` — multi-sprint, plan separately before touching
-- `[BLOCKED]` — cannot build until a server upgrade, upstream MSC, or dependency resolves
-- `[IMPROVE]` — feature exists in upstream Cinny; this task enhances it for Lotus Chat
-
-Status: `[ ]` pending · `[~]` in progress · `[x]` completed
-
----
-
-## Server Capabilities (as of June 2026)
-
-- **Homeserver:** `matrix.lotusguild.org`
-- **Synapse version:** `1.153.0` (2026-05-19) — fully up to date
-- **Matrix spec:** up to `v1.12` formally; newer MSC features via `unstable_features`
-
-### Confirmed facts
-
-| Finding                                                                       | Impact                                                                                                                                        |
-| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| **MSC flags ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` | All safe to use now |
-| **MSC flags OFF:** `msc4306` (thread subscriptions) · `msc3882` · `msc3912` · `msc4155` | These features are BLOCKED |
-| **MSC3266** room summary: returns 404 | Room Preview feature BLOCKED |
-| **MSC3892** relation redaction: not in flags | Reaction Redaction feature BLOCKED |
-| **MSC4260** report user: server at v1.12, endpoint may not exist | Report User feature BLOCKED |
-| **MSC4151** report room: HTTP 405 on GET = endpoint exists (POST only) | Report Room live ✅ |
-| `folds AvatarImage` does NOT accept children | Add frame/overlay inside `UserAvatar.tsx` itself — optional `frameName` prop |
-| No in-app toast system exists (was) | Built `ToastProvider` + Jotai queue; at `App.tsx:65` |
-| `useUnverifiedDeviceCount()` hook exists | `src/app/hooks/useDeviceVerificationStatus.ts:65-106` |
-| Voice player: `AudioContent.tsx:44-223` | Playback rate on hidden `<audio>` at line 217 |
-| `CallControl.setMicrophone(bool)` at `CallControl.ts:206-212` | For AFK auto-mute |
-| `CallControl.toggleSound()` at `CallControl.ts:230-251` | Push-to-deafen — just wire a hotkey to this |
-| matrix-js-sdk has NO arbitrary profile field methods | Use `mx.http.authedRequest()` for MSC4133 |
-| Sanitizer (`sanitize.ts`) allows table, div, span, a, code, hr | LFG HTML card is safe locally; test on Element/FluffyChat |
-| Sanitizer STRIPS `<math>`/MathML tags | Math/LaTeX task must also modify sanitizer |
-| Service worker EXISTS at `src/sw.ts` | Quick-reply task: add `notificationclick` handler |
-| `knockSupported()` utility exists at `matrix.ts:376-391` | Knock UX: only need "Request to Join" in `RoomIntro.tsx` |
-| `KeywordMessages.tsx` already has custom keyword push rules | Full push rule editor: only non-keyword rule types need new UI |
-| `getMatrixToRoom()` in `matrix-to.ts` generates invite URLs | Invite link: just add QR code to room settings |
-| Cindy CANNOT inject audio into EC call stream | In-call soundboard must be redesigned as local-only |
-| Folds uses vanilla-extract in non-TDS, NOT CSS custom properties | Custom accent color: must create new vanilla-extract theme variant dynamically |
-| Theme presets need ~50 CSS custom properties each | Significant design work before coding |
-| `useCallSpeakers.ts` CSS MutationObserver polling | Visual speaking indicator: TDS ring animation on top of existing data |
-| MSC3489/3672 live location: BOTH false on server | Live Location BLOCKED |
-
----
-
-## Key File Reference
-
-| What you need                    | File                                                          | Lines               |
-| -------------------------------- | ------------------------------------------------------------- | ------------------- |
-| Global keydown hook              | `src/app/hooks/useKeyDown.ts`                                 | whole file          |
-| Room navigation                  | `src/app/hooks/useRoomNavigate.ts`                            | 19-72               |
-| All room IDs atom                | `src/app/state/room-list/roomList.ts`                         | `allRoomsAtom`      |
-| Room unread counts               | `src/app/state/room/roomToUnread.ts`                          | `roomToUnreadAtom`  |
-| Overlay portal provider          | `src/app/pages/App.tsx`                                       | 65                  |
-| Portal container div             | `index.html`                                                  | 101                 |
-| Room settings tabs               | `src/app/features/room-settings/RoomSettings.tsx`             | 27-56               |
-| State event read/write pattern   | `src/app/features/common-settings/general/RoomEncryption.tsx` | 42-52               |
-| Power level checker              | `src/app/hooks/usePowerLevels.ts`                             | whole file          |
-| Slash command registration       | `src/app/hooks/useCommands.ts`                                | 140-537             |
-| Chat background picker           | `src/app/features/settings/general/General.tsx`               | 945-981             |
-| Chat backgrounds definition      | `src/app/features/lotus/chatBackground.ts`                    | whole file          |
-| Matrix.to URL builder            | `src/app/plugins/matrix-to.ts`                                | `getMatrixToRoom()` |
-| Media event content types        | `src/app/types/matrix/common.ts`                              | 46-91               |
-| Media URL conversion             | `src/app/utils/matrix.ts`                                     | `mxcUrlToHttp()`    |
-| Message pagination (search)      | `src/app/features/message-search/useMessageSearch.ts`         | 74-121              |
-| Infinite pagination pattern      | `src/app/features/message-search/MessageSearch.tsx`           | 234-365             |
-| Poll event format                | `src/app/components/message/content/PollContent.tsx`          | 1-320               |
-| Theme class application          | `src/app/hooks/useTheme.ts`                                   | 25-60               |
-| Animations file                  | `src/app/styles/Animations.css.ts`                            | whole file          |
-| Message status (EventStatus)     | `src/app/features/room/message/Message.tsx`                   | 84-142              |
-| Call member change events        | `src/app/hooks/useCall.ts`                                    | 37-52               |
-| Mic control in calls             | `src/app/plugins/call/CallControl.ts`                         | 206-212             |
-| Device verification hook         | `src/app/hooks/useDeviceVerificationStatus.ts`                | 65-106              |
-| Knock room support check         | `src/app/utils/matrix.ts`                                     | 376-391             |
-| Room join button location        | `src/app/components/room-intro/RoomIntro.tsx`                 | 25-119              |
-| Notification mute via push rules | `src/app/hooks/useRoomsNotificationPreferences.ts`            | 110-150             |
-| Message text body CSS            | `src/app/components/message/layout/layout.css.ts`             | 182-205             |
-
----
-
-## Known Bugs
-
-### [!] BUG · Drag-and-drop file overlay doesn't dismiss on hover-away
-
-**Confirmed bug** — drag a file over the window without dropping: the drop overlay persists.  
-**Fix:** Ensure `dragleave` fires correctly at the window/document level. Child element boundaries can cause spurious `dragleave` — use a counter or `relatedTarget` check.  
-**[AUDIT REQUIRED]** Find the drag-and-drop overlay component in `RoomInput.tsx` or the room view. Confirm the exact event listener structure.  
-**Complexity:** Low (bug fix).
-
----
-
-## Priority 3 — Higher complexity / lower daily frequency
-
-### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
-
-**What:** Comprehensive audit and fix pass targeting the critical user paths:
-
-- Room list navigation (keyboard-only)
-- Reading messages in the timeline (screen reader announces new messages)
-- Composing and sending a reply
-- Opening and closing modals (focus trap, return focus)
-- ARIA labels on all icon-only buttons  
-  **Scope:** Do NOT attempt to make every corner of the app AA-compliant in one pass — focus on the golden path (open app → find room → read → reply → send).  
-  **[AUDIT REQUIRED]** — Run an automated audit first: `npx axe-core` or browser DevTools accessibility tree. Document every violation before writing a single line of code. Prioritize by severity (critical > serious > moderate).  
-  **Complexity:** Medium-High (audit is the main work).
-
----
-
-### [ ] P3-6 · Configurable Composer Toolbar
-
-**What:** Let users rearrange or hide individual composer toolbar buttons (GIF, Sticker, Emoji, File, Voice, Location). Changes stored in `settingsAtom`. Access via a small "⚙ Customize toolbar" option in toolbar overflow.  
-**[AUDIT REQUIRED]** — Audit the current toolbar button rendering in `RoomInput.tsx`. Understand the layout system (is it a fixed array or already mapped from config?). Drag-to-reorder may require a DnD library; consider whether reorder is worth the complexity vs just toggle-visibility.  
-**Complexity:** Medium-High (drag reorder adds significant complexity).
-
----
-
-### [ ] P3-8 · Thread Panel (full side drawer)
-
-**⚠️ LARGEST FEATURE — requires its own planning session before implementation.**  
-**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.  
-Features:
-
-- Click "Reply in Thread" → opens thread drawer on the right
-- Thread root event shown at the top of the panel
-- Full message rendering for all in-thread replies (reuse timeline components)
-- Reply input at the bottom (full composer with formatting, emoji, etc.)
-- Unread count badge on the thread button in the main timeline
-- Keyboard shortcut to close thread panel  
-  **Architecture:**
-- New Jotai atom: `activeThreadEventId: string | null`
-- New component: `src/app/features/room/thread/ThreadPanel.tsx`
-- Rendered alongside `RoomView` as a conditional right panel (mirror the members drawer pattern)
-- Filter events in timeline to `m.thread` relation for the active root event ID
-- Shares the same `mx` client and room reference as the main timeline  
-  **[AUDIT REQUIRED]** — Deeply audit how `m.thread` relation events are currently stored and retrieved in the matrix-js-sdk. Understand the thread aggregation API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Check if `RoomTimeline.tsx` currently filters out thread replies from the main timeline (it should — confirm).  
-  **Complexity:** High.
-
----
-
-## Priority 4 — Specialized, high complexity, or low priority
-
-### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
-
-**Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).  
-**What:** Per-thread notification toggle: "All messages" vs "Mentions only". Accessible from the thread panel header. Tracks unread counts separately per thread.  
-**[AUDIT REQUIRED]** — Implement after Thread Panel. Requires understanding how the SDK tracks per-thread unread counts.  
-**Complexity:** Medium (after thread panel exists).
-
----
-
-### [ ] P4-2 · Thread Subscriptions (MSC4306) [BLOCKED]
-
-**Spec:** MSC4306 (Synapse experimental). Depends on Thread Panel (#P3-8).  
-**What:** "Follow thread" button to receive notifications for a thread you haven't posted in. Uses MSC4306 subscription endpoint.  
-**[SERVER CHECK]** — `org.matrix.msc4306 = false` on `matrix.lotusguild.org` — BLOCKED until server enables it.  
-**Complexity:** Medium (after thread panel exists).
-
----
-
-### [ ] P4-3 · Knock-to-join Notifications for Admins
-
-**Note:** The basic knock-to-join UX is covered in P1-11 (completed). This task adds the admin notification side.  
-**What:** Space/room admins see a notification badge when there are pending knock requests. A "Pending Join Requests" section in the members drawer or room settings. Approve (invite) or deny (kick) each knock.  
-**Complexity:** Medium.
-
----
-
-### [ ] P4-4 · Math / LaTeX Rendering in Messages (LOW PRIORITY)
-
-**Spec:** CS-API §11.5 (stable) — `formatted_body` can contain LaTeX.  
-**What:** Render `$...$` or `$$...$$` LaTeX expressions in message bodies. Use KaTeX (lightweight, ~100KB, renders server-side-compatible CSS). Must gracefully fall back to raw LaTeX text if KaTeX fails.  
-**Note:** This is LOW PRIORITY — only useful for academic/technical communities. Implement last.  
-**[AUDIT REQUIRED]** — Confirm KaTeX bundle size impact on the Vite bundle. Check if matrix-js-sdk's HTML sanitizer strips LaTeX before it reaches the renderer. The formatted_body sanitization pipeline is the main risk here.  
-**Complexity:** Low-Medium.
-
----
-
-### [ ] P4-5 · Live Location Sharing (MSC3489 + MSC3672) (LOW PRIORITY, HIGH COMPLEXITY) [BLOCKED]
-
-**Spec:** MSC3489 + MSC3672. Implemented in Element Web.  
-**Note:** Static location sharing is already implemented. This adds live/real-time GPS beacons. Very low priority per user preference.  
-**What:** Start sharing live location → creates `m.beacon_info` state event → client posts `m.beacon` events on a timer → other users see your position update live on a map.  
-**[SERVER CHECK]** — `org.matrix.msc3489 = false` AND `org.matrix.msc3672 = false` on `matrix.lotusguild.org` — BLOCKED.  
-**Complexity:** High. Requires background geolocation API + live map rendering.
-
----
-
-### [ ] P4-6 · OIDC / SSO Next-Gen Auth (MSC3861) (EXTREME COMPLEXITY, LOW PRIORITY)
-
-**Spec:** MSC3861, merged Matrix spec v1.15. Uses Matrix Authentication Service (MAS).  
-**Context:** ~80% of homeserver users have LLDAP/Authelia/SSO accounts. SSO is currently enabled on `matrix.lotusguild.org` but accounts are not yet linked. This would allow users to log in via their SSO credentials.  
-**What:** OAuth 2.0 / OIDC login flow, token refresh, account management page linking Matrix identity to SSO identity.  
-**EXTREME COMPLEXITY** — requires: MAS deployment/configuration on the homeserver, significant auth flow changes in the client, token refresh handling, session management overhaul.  
-**[SERVER CHECK]** — Before any client work, audit whether MAS is already deployed on `compute-storage-01`. Check: `pct exec 151 -- systemctl status matrix-authentication-service` or similar.  
-**Complexity:** Extreme. Multi-sprint project. Plan separately.
-
----
-
-## Priority 5 — Gamer / Aesthetic / Customization
-
-### [ ] P5-1 · Custom Accent Color Picker (non-TDS mode only)
-
-**What:** A hex/HSL color picker in Settings → Appearance. Chosen color replaces the primary accent throughout the UI: buttons, badges, active states, highlights, presence dot, links. Applied via a CSS custom property override injected into `<head>`.  
-**IMPORTANT:** This feature is completely inactive when TDS is enabled — TDS has its own fixed palette. Add this setting under a "Non-TDS Themes" section that is hidden when TDS is active.  
-**[AUDIT REQUIRED]** Identify all CSS custom properties that constitute the "accent color" in non-TDS mode. Map them to the folds/vanilla-extract token names.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-2 · Additional Color Theme Presets
-
-**What:** 5 new one-click theme presets alongside TDS. Each must be a complete, polished system with proper contrast ratios (WCAG AA). All implemented as vanilla-extract themes matching the existing TDS pattern.  
-Themes:
-
-1. **Cyberpunk** — deep navy bg (`#0a0015`), electric purple (`#bf5fff`) + hot pink (`#ff2d9b`) accents, neon glow
-2. **Ocean** — deep sea blue bg (`#020b18`), teal (`#00c9b1`) + aqua (`#0096d6`) accents, soft feel
-3. **Blood Red** — near-black bg (`#0d0203`), deep crimson (`#7a0010`) + bright red (`#ff2233`) accents
-4. **Classic Matrix** — pure black bg (`#000000`), phosphor green (`#00ff41`) text + accents
-5. **Midnight** — dark charcoal (`#111827`), cool blue-grey (`#6b7ca8`) accents, clean minimal  
-   **[AUDIT REQUIRED]** Study `src/lotus-terminal.css.ts` for the full token list before designing themes. All tokens must be covered.  
-   **Complexity:** Medium (design effort is the main cost).
-
----
-
-### [ ] P5-9 · LFG (Looking for Group) Slash Command
-
-**What:** `/lfg` generates a formatted LFG post visible on ALL Matrix clients using standard `m.room.message` HTML. Fields: Game, Players Needed, Platform, Skill Level, Description, DM link. Other clients see clean formatted HTML; Lotus Chat renders an enhanced styled card.  
-**[AUDIT REQUIRED]** Test which HTML tags survive Matrix HTML sanitization on Element/FluffyChat before designing the card structure. Test with minimal HTML.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-10 · Voice Channel User Limit
-
-**What:** Admins set max participants via custom state event `io.lotus.voice_limit: { max_users: N }`. Show "Channel Full (5/5)" to users over the limit. Local enforcement only.  
-**[AUDIT REQUIRED]** Check if Element Call has its own participant limit that should be integrated with rather than duplicated.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-11 · AFK / Idle Auto-Mute in Voice
-
-**What:** Auto-mute mic after X minutes of silence (detected via Web Audio AnalyserNode). Show "You were auto-muted due to inactivity" toast with click-to-unmute. Admin-configurable via `io.lotus.afk_timeout` state event. Disableable in Settings → Calls.  
-**[AUDIT REQUIRED]** Verify auto-mute must go through the same CallControl bridge as manual mute.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-12 · Seasonal / Event Themes
-
-**What:** Automatic + manually toggleable seasonal overlays with CSS particle effects and accent color variants:
-
-- **Halloween** (Oct 15–Nov 1): purple particles, orange accents, spider web pattern
-- **Christmas** (Dec 10–Jan 2): snow fall, red/green accents, snowflake pattern
-- **New Year** (Dec 31–Jan 1): firework burst animation, gold accents
-- **Pride** (June): rainbow gradient accent cycle  
-  All toggleable manually in Settings → Appearance regardless of date. Respects `prefers-reduced-motion`.  
-  **[AUDIT REQUIRED]** Design against existing CSS animation system in `lotus-terminal.css.ts`.  
-  **Complexity:** Medium.
-
----
-
-### [ ] P5-13 · Avatar Frame / Border Decorations
-
-**What:** Decorative CSS rings/frames rendered around user avatars. Built-in options: TDS Glow (animated orange pulsing), Cyberpunk (rotating gradient), Minimal (thin ring), Gold (supporter cosmetic). Stored in Matrix account data `io.lotus.avatar_frame`. Only visible in Lotus Chat.  
-**[AUDIT REQUIRED]** Verify folds Avatar component allows overlay decoration without breaking child-type constraints (see previous white-circle avatar bug).  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-14 · Animated Avatar Overlay Decorations (Discord-style)
-
-**What:** Animated WebM/GIF overlays that float around avatars (transparent center showing avatar). Curated built-in set OR user-uploaded mxc:// overlay. Stored in account data. Only Lotus Chat users see them.  
-**[AUDIT REQUIRED]** See #P5-13 audit. Also decide: curated set only vs user-uploadable.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-15 · In-Call Soundboard
-
-**What:** Grid of short audio clips playable into the call audio stream via Web Audio API (AudioBufferSourceNode → MediaStreamDestinationNode → mixed with mic). Built-in clips + user-uploadable custom clips (stored as mxc://). Accessible from call controls bar.  
-**[AUDIT REQUIRED]** Verify the Element Call integration exposes the mic MediaStream for mixing. This is the highest-risk part of this feature.  
-**Complexity:** High.
-
----
-
-### [ ] P5-16 · Custom Join / Leave Sound Effects
-
-**What:** Local-only sounds when participants join/leave a call you're in. Built-in options + per-user settable. Detect via Element Call participant list change events.  
-**[AUDIT REQUIRED]** Find how Element Call exposes join/leave participant events to the parent window via postMessage bridge.  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-20 · Quick Reply from Browser Notification
-
-**What:** Inline reply field in browser notification toasts via Notification Actions API. Reply sends as threaded reply to the triggering message.  
-**[AUDIT REQUIRED]** (1) Verify browser Notification Actions API support in target browsers. (2) This requires a Service Worker to handle the reply event — confirm if Lotus Chat has one or needs one.  
-**Complexity:** Medium-High.
-
----
-
-### [ ] P5-21 · Custom @Mention Highlight Color
-
-**What:** Each user sets their own mention highlight color in Settings → Appearance. Applied as `--user-mention-color` CSS property override on mention-highlighted message rows.  
-**Complexity:** Low.
-
----
-
-### [ ] P5-22 · Font Selector for the UI
-
-**What:** Font picker in Settings → Appearance. Options: JetBrains Mono, Inter, Geist, Fira Code, OpenDyslexic, System Default. Applied via CSS custom property overrides.  
-**[AUDIT REQUIRED]** Check if any fonts are already globally loaded to avoid double-loading.  
-**Complexity:** Low-Medium.
-
----
-
-### [ ] P5-27 · Notification Profile Presets (Gaming / Work / Sleep)
-
-**What:** Saved presets that change all notification settings atomically. Gaming (mentions only), Work (DMs + mentions), Sleep (all off). Quick-switch from sidebar or settings.  
-**Complexity:** Medium.
-
----
-
-## Blocked Features
-
-These features are confirmed desirable but cannot be built until the listed dependency is resolved.
-Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `unstable_features` to see if they've become available.
-
-### [BLOCKED] · Live Location Sharing (MSC3489 + MSC3672)
-
-**Blocked by:** `org.matrix.msc3489 = false` AND `org.matrix.msc3672 = false` on `matrix.lotusguild.org` (confirmed from unstable_features).  
-**What it would do:** Real-time GPS beacon streaming upgrading the existing static location share.  
-**Action when unblocked:** Both MSCs must be enabled on the homeserver before any client work.
-
-### [BLOCKED] · Reaction / Relation Redaction (MSC3892)
-
-**Blocked by:** `org.matrix.msc3892` = false on `matrix.lotusguild.org`  
-**What it would do:** Cleanly remove a reaction without redacting the parent message.  
-**Current behavior:** Full event redaction — acceptable fallback, no user-facing issue.  
-**Action when unblocked:** Find `onReactionToggle` redaction call site; swap in MSC3892 endpoint with fallback.
-
-### [BLOCKED] · Room Preview Before Joining (MSC3266)
-
-**Blocked by:** `GET /v1/rooms/{id}/summary` returns 404 — endpoint not available on this server  
-**What it would do:** Show room name, topic, avatar, member count before joining.  
-**Action when unblocked:** Build pre-join preview card; trigger on unjoined room navigation.
-
-### [BLOCKED] · Thread Subscriptions (MSC4306)
-
-**Blocked by:** `org.matrix.msc4306` = false on `matrix.lotusguild.org`  
-**What it would do:** Follow a thread without posting; get notifications for replies.  
-**Action when unblocked:** Add "Follow thread" button in the thread panel header (depends on #P3-8 Thread Panel).
-
-### [BLOCKED] · Report User (MSC4260)
-
-**Blocked by:** Server declares only spec v1.12; MSC4260 merged in v1.14 — endpoint may not exist  
-**What it would do:** Report a specific user to homeserver admins (separate from reporting a message).  
-**Note:** Report Message already exists in upstream Cinny. This would add Report User to the profile panel.  
-**Action when unblocked:** Test `POST /_matrix/client/v3/users/{userId}/report`; if 200, add button to user profile.
-
----
-
-## Pending Audits
-
-### [ ] Audit-3 · Profile banner image — Matrix protocol support
-
-Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banner field. `uk.tcpip.msc4133.stable = true` on our server — check if a `banner_url` or similar field is defined. If no cross-client standard exists, do not implement.
-
----
-
-## Implementation Notes
-
-### ⚠️ TDS DESIGN LAW (repeated here for emphasis)
-
-> Every TDS color, animation, glow, border, shadow, and font value MUST come from `/root/code/web_template/base.css`.  
-> Never hardcode hex values. Never invent CSS variable names.  
-> Key variables: `--lt-accent-orange` · `--lt-accent-cyan` · `--lt-accent-green` · `--lt-glow-*` · `--lt-box-glow-*` · `--lt-border-color` · `--lt-font-mono`  
-> Reference implementation: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css)  
-> This applies without exception to every task marked `[IMPROVE]`, `[Build]`, or any UI change.
-
-### Design Rules
-
-- All new components must respect both TDS dark (`LotusTerminalTheme`) and TDS light (`LotusTerminalLightTheme`) modes
-- Non-TDS theme work (custom accent color, theme presets) uses vanilla-extract theme files — match the pattern in `src/lotus-terminal.css.ts`
-- Code syntax highlighting token classes: `.tok-kw .tok-str .tok-num .tok-cmt .tok-fn` (defined in `web_template/base.css`)
-- `folds AvatarImage` does NOT accept children — wrap Avatar components externally for overlays/frames/borders
-
-### CI/CD Pipeline
-
-```
-edit → commit → git push origin lotus
-→ Gitea Actions: tsc --noEmit, eslint, prettier (~3 min)
-→ Webhook: lotus_deploy.sh on LXC 106 polls CI, then npm ci && npm run build → rsync
-→ Live at chat.lotusguild.org (~11 min total)
-```
-
-### Per-Feature Checklist (before marking complete)
-
-- [ ] `npx tsc --noEmit` — zero TypeScript errors
-- [ ] `npx eslint src/` — zero new errors (warnings OK if pre-existing)
-- [ ] `npx prettier --check src/` — formatting passes
-- [ ] `README.md` updated (Lotus-custom features only — not upstream Cinny features)
-- [ ] `landing/index.html` updated if the feature appears in the comparison table
-- [ ] Visually tested at `chat.lotusguild.org` after CI deploys
-
-### Homeserver Access (for server audits)
-
-- **Synapse (Matrix):** LXC 151 on `compute-storage-01` — `pct exec 151 -- bash`
-- **Config:** `/etc/matrix-synapse/homeserver.yaml`
-- **Version check:** `curl -s https://matrix.lotusguild.org/_matrix/client/versions`

LOTUS_TODO_REFERENCE.md

@@ -1,99 +0,0 @@
-# Lotus Chat — Implementation Reference for Backlog
-**Date:** June 2026
-
-This document provides technical guidance, file paths, and architectural notes for unimplemented items in `LOTUS_TODO.md` to assist engineers during development.
-
----
-
-## 🧵 Priority 3 — Higher Complexity
-
-### P3-8 · Thread Panel (Full Side Drawer)
-**⚠️ Largest Feature**
-
-*   **Objective:** Add a right-side drawer to view and reply to threads (`m.thread` relations).
-*   **Key Files to Reference:**
-    *   `src/app/features/room/RoomView.tsx`: Main layout. Needs to render the new `ThreadPanel` component conditionally.
-    *   `src/app/features/room/MembersDrawer.tsx`: Use this as a pattern for side drawers (fixed width, toggleable).
-    *   `src/app/features/room/message/Message.tsx`: Check `isThreadedMessage` logic and the `onReplyClick(ev, true)` handler.
-*   **Architecture:**
-    *   Create `activeThreadEventIdAtom` in a new state file.
-    *   `ThreadPanel` should reuse `Timeline` components but filter for events where `m.relates_to.event_id === activeThreadEventId` and `rel_type === 'm.thread'`.
-    *   **SDK API:** Use `mx.getThread(eventId)` or the aggregations API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`.
-*   **Note:** `RoomTimeline.tsx` currently has `handleReplyClick` (Line 978) which already supports starting threads.
-
----
-
-## 🛠️ Priority 4 — Specialized Features
-
-### P4-3 · Knock-to-join Notifications for Admins
-*   **Objective:** Alert admins when users are knocking and provide an easy way to approve/deny.
-*   **Key Files:**
-    *   `src/app/features/room/MembersDrawer.tsx`: Already contains logic to show "Pending Requests" (Line 412).
-    *   `src/app/hooks/useRoomsNotificationPreferences.ts`: Add logic to detect `Membership.Knock` events in joined rooms where the user has invite permissions.
-*   **Implementation:**
-    *   Create a hook `usePendingKnocks(room)` that returns `room.getMembersWithMembership(Membership.Knock)`.
-    *   Add a notification badge to the "Members" icon in the room header if knocks > 0.
-
-### P4-4 · Math / LaTeX Rendering
-*   **Objective:** Render `$...$` and `$$...$$` blocks using KaTeX.
-*   **Key Files:**
-    *   `src/app/utils/sanitize.ts`: **Critical.** The sanitizer currently strips many tags. You must allow specific KaTeX/MathML outputs.
-    *   `src/app/plugins/react-custom-html-parser.ts`: Add a custom rule to detect LaTeX patterns in plain text or handle the specific HTML from the server.
-    *   `src/app/styles/CustomHtml.css.ts`: Add KaTeX CSS import/styles.
-
----
-
-## 🎨 Priority 5 — Gamer / Aesthetic / Customization
-
-### P5-1 · Custom Accent Color Picker
-*   **Objective:** User-defined accent color for non-TDS themes.
-*   **Key Files:**
-    *   `src/app/hooks/useTheme.ts`: Central theme logic.
-    *   `src/app/state/settings.ts`: Add `customAccentColor: string` to the settings atom.
-*   **Implementation:**
-    *   Inject a `<style>` block into `<head>` that overrides CSS variables.
-    *   **Variables to target:** `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green` (or their non-TDS equivalents in `folds`).
-
-### P5-10 · Voice Channel User Limit
-*   **Objective:** Prevent joining a voice channel if the user limit is reached.
-*   **Key Files:**
-    *   `src/app/features/call/CallView.tsx`: Join logic site.
-*   **Implementation:**
-    *   In `CallPrescreen` (Line 77), retrieve the `io.lotus.voice_limit` state event from the room.
-    *   Compare `callMembers.length` with the `max_users` value from the event content.
-    *   If current members >= limit, disable the `canJoin` flag and display a "Channel Full" message.
-
-### P5-13 · Avatar Frame / Border Decorations
-*   **Objective:** Add cosmetic frames around user avatars.
-*   **Key Files:**
-    *   `src/app/components/user-avatar/UserAvatar.tsx`: Rendering site.
-*   **Implementation:**
-    *   Add an optional `frameName` prop to the `UserAvatar` component.
-    *   Since `folds` components like `AvatarImage` are restrictive, wrap the entire return value (both fallback and image paths) in a new `Box` container that applies the frame/glow effects via CSS.
-
-### P5-21 · Custom @Mention Highlight Color
-*   **Objective:** Persistent background highlight for messages that mention the user.
-*   **Key Files:**
-    *   `src/app/components/message/layout/layout.css.ts`: Styling site.
-    *   `src/app/features/room/message/Message.tsx`: Logic site.
-*   **Implementation:**
-    *   In `layout.css.ts`, add a `mention` variant to the `MessageBase` recipe that sets a static `backgroundColor`.
-    *   In `Message.tsx`, pass the `isMentioned` boolean (Line 800) into the `MessageBase` component as a new prop to trigger the highlight variant.
-
-### P5-20 · Quick Reply from Browser Notification
-*   **Objective:** Inline reply in OS notifications.
-*   **Key Files:**
-    *   `src/sw.ts`: Handle the `notificationclick` event.
-*   **Implementation:**
-    *   Check for `event.reply` in the service worker.
-    *   Use the `accessToken` and `baseUrl` stored in the `sessions` map (already implemented in `sw.ts`) to send a Matrix message via `fetch` directly from the Service Worker.
-    *   **Crucial:** Ensure the message is sent as a relation if the notification was for a thread.
-
----
-
-## 🧪 Pending Audits Guidance
-
-### Audit-3 · Profile Banner Image
-*   **Task:** Check if MSC4133 or Matrix v1.16 defines a banner field.
-*   **Update:** Matrix spec does not currently have a stable `m.banner` field. Most clients use `org.matrix.msc4133.banner_url` (unstable).
-*   **Recommendation:** Use `mx.http.authedRequest` to experiment with this field on `matrix.lotusguild.org`.

README.md

@@ -1,149 +1,115 @@
-# Lotus Chat
+# Cinny
+<p>
+    <a href="https://github.com/ajbura/cinny/releases">
+        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
+    <a href="https://hub.docker.com/r/ajbura/cinny">
+        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
+    <a href="https://fosstodon.org/@cinnyapp">
+        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
+    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
+        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
+    <a href="https://cinny.in/#sponsor">
+        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
+</p>
 
-A Matrix chat client built for Lotus Guild — fast, private, and packed with the features you actually want.
+A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
+- [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
+- [Contributing](./CONTRIBUTING.md)
 
-**Deployed at [chat.lotusguild.org](https://chat.lotusguild.org)** &nbsp;|&nbsp; Forked from [Cinny](https://github.com/cinnyapp/cinny) v4.12.1
+> [!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">
 
-## Features
+## Getting started
+The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.
 
-### Messaging
+You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
-- See who has read each message, and track delivery status (sending / sent / failed)
-- Bookmark any message and revisit saved messages from the sidebar
-- Schedule messages to send at a specific time
-- Click "edited" on any message to see the full edit history
-- Drafts are saved automatically and survive page reloads
-- Long messages collapse automatically — click "Read more" to expand
-- Forward messages to other rooms
-- Create and view polls directly in chat
-- Share your location with an inline map embed
-- Add captions to image and video uploads
-- Optionally compress images before uploading — shows before/after file sizes
-- GIF links from Giphy and Tenor auto-preview inline
-- Search for and send GIFs from a built-in GIF picker
-- Control voice message playback speed: 0.75× / 1× / 1.5× / 2×
-- Search messages with a date range filter
-- Room topics support rich formatting (bold, links, italics)
-- Deleted messages show a placeholder instead of disappearing
-- Code blocks highlight syntax for JS/TS, Python, and Rust
-- Rich link preview cards for YouTube, GitHub, Twitter/X, Reddit, Spotify, Twitch, Steam, Wikipedia, Discord, npm, Stack Overflow, and IMDb
+## Self-hosting
+To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).
 
-### Calls & Voice
+* The default homeservers and explore pages are defined in [`config.json`](config.json).
 
-- Push to Talk with a configurable keybind (default: Space)
-- Push to Deafen with the M key
-- Camera starts turned off by default when joining a call
-- Screenshare requires confirmation before going live
-- Toggle noise suppression on or off
-- Calls float in a draggable picture-in-picture window when you navigate away
-- Your chat background shows through the call view
-- Dark/light mode inside calls matches your Lotus Chat theme
-- Calls are available in DMs and private groups only — no accidental mass rings
+* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
+    * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
 
-### Customization & Appearance
+* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
+    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
 
-- LotusGuild Terminal Design System (TDS) — a CRT terminal-inspired dark theme
-- TDS light mode variant for daytime use
-- 20+ static chat background patterns
-- 5 animated chat backgrounds: Digital Rain, Star Drift, Grid Pulse, Aurora Flow, Fireflies
-- Toggle to pause background animations
-- Glassmorphism sidebar — frosted glass effect that lets the background show through
-- Night Light / blue light filter with an adjustable intensity slider
-- Emoji prefixes on room names render larger in the sidebar (e.g. 🎮 general)
-- Rename any room for yourself only — other members see the original name
-- Emoji picker on all room name inputs
-
-### Presence & Profile
-
-- Discord-style presence selector: Online, Idle, Do Not Disturb, Invisible, or Auto
-- Custom status message with emoji and an optional auto-clear timer
-- Colored presence ring on member avatars (green / yellow / red)
-- Profile fields for pronouns and timezone
-- When a user's timezone is set, their current local time appears in their profile
-- Unread count shown in the browser tab title
-
-### Moderation & Privacy
-
-- Report any room to homeserver admins from the room menu
-- View policy lists and ban lists (Draupnir-compatible, read-only)
-- Toggle private read receipts so others can't see when you've read messages
-- Optional warning when an encrypted room contains unverified devices
-- Full push rule editor in notification settings
-- View and edit Server ACL rules in room settings
-- Filterable room activity / mod log (joins, kicks, bans, power level changes, etc.)
-- Room stats and insights panel (active members, top reactions, media breakdown, activity heatmap)
-- Export room history as plain text, JSON, or HTML with optional date range filter
-
-### Notifications
-
-- In-app toast notifications appear bottom-right when the window is focused
-- Custom notification sounds per category (messages, invites)
-- Quiet hours — suppress notifications during a configured time window
-- Click a toast to jump directly to the room or DM
-
-### UX
-
-- Filter and search rooms in the sidebar
-- Favorite rooms sync across devices and appear in a pinned section
-- Sort rooms by recent activity, alphabetical, or unread first
-- DM rows show a message preview and relative timestamp
-- Right-click a room for a context menu: mute with duration, copy link, mark as read
-- Quick emoji reactions appear on message hover — one click to react
-- Knock-to-join: request access to a room; admins approve or deny from the members list
-- Media gallery drawer: browse all images, videos, and files shared in a room
-- Invite link and QR code in room settings
-- Pending knock requests shown in the members list for room admins
-- Homeserver support contact displayed in Help & About (MSC1929)
-- Server notice rooms are visually distinct from regular DMs
-
----
-
-## Desktop App
-
-Lotus Chat has a desktop app for Windows, macOS, and Linux. It wraps the same web client in a native window with automatic background updates — no need to reinstall for new versions.
-
-### Download
-
-Download the latest release from the [Releases page on code.lotusguild.org](https://code.lotusguild.org).
-
-### SmartScreen Warning (Windows)
-
-When you first run the installer on Windows, you may see a popup that says **"Windows protected your PC"** with the app listed as an unknown publisher. This is normal.
-
-**Why it happens:** Windows SmartScreen flags any app that does not have an expensive commercial code-signing certificate from a major CA. Lotus Chat is signed with its own key for update verification, but that key is not in Microsoft's pre-approved list.
-
-**How to install anyway:**
-
-1. Click **"More info"** in the SmartScreen dialog.
-2. A **"Run anyway"** button will appear.
-3. Click it to proceed with installation.
-
-After the first install, automatic in-app updates handle all future versions — you will not see this prompt again for updates.
-
----
-
-## For Developers
-
-The source code lives in `/root/code/cinny`. All changes should be made on the `lotus` branch. Push to `origin/lotus` and CI will automatically build and deploy to [chat.lotusguild.org](https://chat.lotusguild.org) in approximately 11 minutes — no manual build or deploy steps required.
-
-See [LOTUS_FEATURES.md](LOTUS_FEATURES.md) for the full feature changelog and [LOTUS_TODO.md](LOTUS_TODO.md) for the work backlog.
-
-### Build
-
-```bash
-npm ci && npm run build   # outputs to dist/
-```
-
-If the build is killed due to out-of-memory:
-
-```bash
-NODE_OPTIONS=--max_old_space_size=6144 npm run build
-```
-
-### CI/CD
+<details><summary><b>PGP Public Key to verify tarball</b></summary>
 
 ```
-edit → commit → git push    →    ~11 min    →    live at chat.lotusguild.org
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
+6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
+FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
+K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
+leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
+Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
+Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
+jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
+4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
+AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
+vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
+YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
+AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
+Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
+K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
+atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
+AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
+SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
+3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
+ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
+5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
+Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
+QPqfGDpowBwRkkOsGz/XVcesJ1Pzg4bKivTS9kZjZSyT9RRSY8As0sVUN57AwYul
+s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
+vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
+LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
+H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
+NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
+CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
+XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
+KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
+gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
+N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
+M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
+n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
+Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
+mxFo+ioe/ABCufSmyqFye0psX3Sp
+=WtqZ
+-----END PGP PUBLIC KEY BLOCK-----
 ```
+</details>
+
+## Local development
+> [!TIP]
+> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Krypton LTS (v24.13.1).
+
+Execute the following commands to start a development server:
+```sh
+npm ci # Installs all dependencies
+npm start # Serve a development version
+```
+
+To build the app:
+```sh
+npm run build # Compiles the app into the dist/ directory
+```
+
+### Running with Docker
+This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
+use this locally, you can build the container like so:
+```
+docker build -t cinny:latest .
+```
+
+You can then run the container you've built with a command similar to this:
+```
+docker run -p 8080:80 cinny:latest
+```
+
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.

config.json

@@ -1,16 +1,32 @@
 {
-  "defaultHomeserver": 0,
-  "homeserverList": ["matrix.lotusguild.org", "matrix.org", "mozilla.org"],
+  "defaultHomeserver": 1,
+  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
   "allowCustomHomeservers": true,
+
   "featuredCommunities": {
     "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
+    "spaces": [
+      "#cinny-space:matrix.org",
+      "#community:matrix.org",
+      "#space:unredacted.org",
+      "#science-space:matrix.org",
+      "#libregaming-games:tchncs.de",
+      "#mathematics-on:matrix.org",
+      "#stickers-and-emojis:tastytea.de"
+    ],
+    "rooms": [
+      "#cinny:matrix.org",
+      "#freesoftware:matrix.org",
+      "#pcapdroid:matrix.org",
+      "#gentoo:matrix.org",
+      "#PrivSec.dev:arcticfoxes.net",
+      "#disroot:aria-net.org"
+    ],
+    "servers": ["matrixrooms.info", "matrix.org", "mozilla.org", "unredacted.org"]
   },
+
   "hashRouter": {
     "enabled": false,
     "basename": "/"
-  },
-  "gifApiKey": ""
+  }
 }

eslint.config.mjs

@@ -1,126 +0,0 @@
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
-import tsPlugin from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-import reactPlugin from 'eslint-plugin-react';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
-import eslintConfigPrettier from 'eslint-config-prettier';
-import globals from 'globals';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
-export default [
-  { ignores: ['node_modules/**', 'dist/**', 'experiment/**'] },
-  js.configs.recommended,
-  tsPlugin.configs['flat/eslint-recommended'],
-  ...tsPlugin.configs['flat/recommended'],
-  reactPlugin.configs.flat.recommended,
-  reactHooksPlugin.configs.flat['recommended'],
-  // Register jsx-a11y plugin (rules selectively enabled below)
-  { plugins: { 'jsx-a11y': jsxA11yPlugin } },
-  // airbnb-base via FlatCompat (JS/import rules; no React plugin, no getFilename issue)
-  ...compat.extends('airbnb-base'),
-  eslintConfigPrettier,
-  {
-    languageOptions: {
-      parser: tsParser,
-      globals: {
-        ...globals.browser,
-        ...globals.es2021,
-        JSX: 'readonly',
-      },
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-      },
-    },
-    settings: {
-      react: {
-        version: '18.2.0',
-      },
-    },
-    rules: {
-      'linebreak-style': 0,
-      'no-unused-vars': 'off', // handled by @typescript-eslint/no-unused-vars
-      'no-underscore-dangle': 0,
-      'no-shadow': 'off',
-
-      // Stylistic rules — off for this codebase
-      'no-console': 'off',
-      'no-continue': 'off',
-      'no-nested-ternary': 'off',
-      'no-plusplus': 'off',
-      'no-param-reassign': 'off',
-      'no-restricted-syntax': 'off',
-      'no-restricted-globals': 'off',
-      'no-constant-condition': 'off',
-      'prefer-destructuring': 'off',
-      'no-useless-assignment': 'off',
-      'preserve-caught-error': 'off',
-      'consistent-return': 'off',
-      'no-use-before-define': 'off',
-
-      'import/prefer-default-export': 'off',
-      'import/extensions': 'off',
-      'import/no-unresolved': 'off',
-      'import/no-extraneous-dependencies': [
-        'error',
-        {
-          devDependencies: true,
-        },
-      ],
-
-      'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
-      'react/jsx-filename-extension': [
-        'error',
-        {
-          extensions: ['.tsx', '.jsx'],
-        },
-      ],
-
-      'react/display-name': 'off',
-      'react/require-default-props': 'off',
-      'react/jsx-props-no-spreading': 'off',
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': 'error',
-      // React Compiler rules added in react-hooks v7 — disabled until React Compiler is adopted
-      'react-hooks/react-compiler': 'off',
-      'react-hooks/incompatible-library': 'off',
-      'react-hooks/refs': 'off',
-      'react-hooks/set-state-in-effect': 'off',
-      'react-hooks/set-state-in-render': 'off',
-      'react-hooks/immutability': 'off',
-      'react-hooks/purity': 'off',
-      'react-hooks/use-memo': 'off',
-
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
-      ],
-      '@typescript-eslint/no-shadow': 'error',
-      '@typescript-eslint/no-explicit-any': 'warn',
-
-      // jsx-a11y — media captions not required for this app
-      'jsx-a11y/media-has-caption': 'off',
-      'jsx-a11y/no-noninteractive-element-interactions': 'off',
-      'jsx-a11y/alt-text': 'off',
-    },
-  },
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    rules: {
-      'no-undef': 'off',
-    },
-  },
-];

index.html

@@ -1,44 +1,36 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Lotus Chat</title>
-    <meta name="name" content="Lotus Chat" />
-    <meta name="author" content="Lotus Guild" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+    <title>Cinny</title>
+    <meta name="name" content="Cinny" />
+    <meta name="author" content="Ajay Bura" />
     <meta
       name="description"
-      content="Lotus Chat — the Lotus Guild Matrix client. Secure, fast, and built for our community."
+      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
     />
-    <meta name="keywords" content="lotus chat, lotus guild, matrix, matrix client" />
-
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Lotus Chat" />
-    <meta property="og:url" content="https://chat.lotusguild.org" />
     <meta
-      property="og:image"
-      content="https://chat.lotusguild.org/public/res/android/android-chrome-192x192.png"
+      name="keywords"
+      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
     />
+
+    <meta property="og:title" content="Cinny" />
+    <meta property="og:url" content="https://cinny.in" />
+    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
     <meta
       property="og:description"
-      content="Lotus Chat — the Lotus Guild Matrix client. Secure, fast, and built for our community."
+      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
     />
     <meta name="theme-color" content="#000000" />
-    <meta name="color-scheme" content="dark light" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap"
-      rel="stylesheet"
-    />
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
 
     <link rel="manifest" href="/manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Lotus Chat" />
-    <meta name="apple-mobile-web-app-title" content="Lotus Chat" />
+    <meta name="application-name" content="Cinny" />
+    <meta name="apple-mobile-web-app-title" content="Cinny" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "lotus-chat",
-  "version": "4.12.2-lotus",
-  "description": "Lotus Chat — Matrix client for Lotus Guild",
+  "name": "cinny",
+  "version": "4.11.1",
+  "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
   "engines": {
@@ -16,9 +16,9 @@
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
     "typecheck": "tsc --noEmit",
-    "prepare": "husky",
+    "prepare": "husky install",
     "commit": "git-cz",
-    "postinstall": "node scripts/patch-folds.mjs"
+    "semantic-release": "semantic-release"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": "eslint",
@@ -29,117 +29,132 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
+  "release": {
+    "branches": [
+      "dev"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "node scripts/update-version.js ${nextRelease.version}"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json",
+            "package-lock.json",
+            "src/app/features/settings/about/About.tsx",
+            "src/app/pages/auth/AuthFooter.tsx",
+            "src/app/pages/client/WelcomePage.tsx"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  },
   "keywords": [],
   "author": "Ajay Bura",
   "license": "AGPL-3.0-only",
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@eslint/eslintrc": "3.3.5",
-    "@eslint/js": "10.0.1",
-    "@fontsource-variable/inter": "5.2.8",
-    "@giphy/js-fetch-api": "5.8.0",
-    "@giphy/js-types": "5.1.0",
-    "@giphy/js-util": "5.2.0",
-    "@giphy/react-components": "10.1.2",
-    "@sentry/react": "10.53.1",
-    "@tanstack/react-query": "5.100.13",
-    "@tanstack/react-query-devtools": "5.100.13",
-    "@tanstack/react-virtual": "3.13.25",
-    "@types/dompurify": "3.2.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+    "@fontsource/inter": "4.5.14",
+    "@tanstack/react-query": "5.24.1",
+    "@tanstack/react-query-devtools": "5.24.1",
+    "@tanstack/react-virtual": "3.2.0",
+    "@vanilla-extract/css": "1.9.3",
+    "@vanilla-extract/recipes": "0.3.0",
+    "@vanilla-extract/vite-plugin": "3.7.1",
     "await-to-js": "3.0.0",
     "badwords-list": "2.0.1-4",
-    "blurhash": "2.0.5",
+    "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
-    "chroma-js": "3.2.0",
-    "classnames": "2.5.1",
+    "chroma-js": "3.1.2",
+    "classnames": "2.3.2",
     "dateformat": "5.0.3",
-    "dayjs": "1.11.20",
-    "domhandler": "6.0.1",
-    "dompurify": "3.4.5",
-    "emojibase": "17.0.0",
-    "emojibase-data": "17.0.0",
+    "dayjs": "1.11.10",
+    "domhandler": "5.0.3",
+    "emojibase": "15.3.1",
+    "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
-    "focus-trap-react": "12.0.2",
+    "focus-trap-react": "10.0.2",
     "folds": "2.6.2",
-    "globals": "17.6.0",
-    "html-dom-parser": "7.1.0",
-    "html-react-parser": "6.1.2",
-    "i18next": "26.2.0",
-    "i18next-browser-languagedetector": "8.2.1",
-    "i18next-http-backend": "4.0.0",
-    "immer": "11.1.8",
+    "html-dom-parser": "4.0.0",
+    "html-react-parser": "4.2.0",
+    "i18next": "23.12.2",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-http-backend": "2.5.2",
+    "immer": "9.0.16",
     "is-hotkey": "0.2.0",
-    "jotai": "2.20.0",
-    "linkify-react": "4.3.3",
-    "linkifyjs": "4.3.3",
-    "lodash": "4.18.1",
-    "matrix-js-sdk": "41.6.0-rc.0",
-    "matrix-widget-api": "1.17.0",
+    "jotai": "2.6.0",
+    "linkify-react": "4.3.2",
+    "linkifyjs": "4.3.2",
+    "matrix-js-sdk": "38.2.0",
+    "matrix-widget-api": "1.13.0",
     "millify": "6.1.0",
-    "pdfjs-dist": "5.7.284",
+    "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
-    "react": "19.2.6",
-    "react-aria": "3.48.0",
-    "react-blurhash": "0.3.0",
-    "react-colorful": "5.7.0",
-    "react-dom": "19.2.6",
-    "react-error-boundary": "6.1.1",
-    "react-google-recaptcha": "3.1.0",
-    "react-i18next": "17.0.8",
-    "react-range": "1.10.0",
-    "react-router-dom": "7.15.1",
-    "sanitize-html": "2.17.4",
-    "slate": "0.124.1",
-    "slate-dom": "0.124.1",
+    "react": "18.2.0",
+    "react-aria": "3.29.1",
+    "react-blurhash": "0.2.0",
+    "react-colorful": "5.6.1",
+    "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.13",
+    "react-google-recaptcha": "2.1.0",
+    "react-i18next": "15.0.0",
+    "react-range": "1.8.14",
+    "react-router-dom": "6.30.3",
+    "sanitize-html": "2.12.1",
+    "slate": "0.123.0",
+    "slate-dom": "0.123.0",
     "slate-history": "0.113.1",
-    "slate-react": "0.124.2",
-    "styled-components": "6.4.2",
-    "ua-parser-js": "2.0.10"
+    "slate-react": "0.123.0",
+    "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.19.4",
-    "@rollup/plugin-inject": "5.0.5",
-    "@rollup/plugin-wasm": "6.2.2",
-    "@sentry/vite-plugin": "5.3.0",
-    "@types/chroma-js": "3.1.2",
-    "@types/file-saver": "2.0.7",
+    "@element-hq/element-call-embedded": "0.16.3",
+    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@rollup/plugin-inject": "5.0.3",
+    "@rollup/plugin-wasm": "6.1.1",
+    "@semantic-release/exec": "7.1.0",
+    "@semantic-release/git": "10.0.1",
+    "@types/chroma-js": "3.1.1",
+    "@types/file-saver": "2.0.5",
     "@types/is-hotkey": "0.1.10",
-    "@types/node": "25.9.1",
-    "@types/prismjs": "1.26.6",
-    "@types/react": "19.2.15",
-    "@types/react-dom": "19.2.3",
-    "@types/react-google-recaptcha": "2.1.9",
-    "@types/sanitize-html": "2.16.1",
-    "@types/ua-parser-js": "0.7.39",
-    "@typescript-eslint/eslint-plugin": "8.59.4",
-    "@typescript-eslint/parser": "8.59.4",
-    "@vanilla-extract/css": "1.20.1",
-    "@vanilla-extract/recipes": "0.5.7",
-    "@vanilla-extract/vite-plugin": "5.2.2",
-    "@vitejs/plugin-react": "6.0.2",
+    "@types/node": "18.11.18",
+    "@types/prismjs": "1.26.0",
+    "@types/react": "18.2.39",
+    "@types/react-dom": "18.2.17",
+    "@types/react-google-recaptcha": "2.1.8",
+    "@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": "9.39.4",
+    "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.29.1",
+    "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": "17.0.5",
-    "prettier": "3.8.3",
-    "typescript": "6.0.3",
-    "vite": "8.0.14",
-    "vite-plugin-pwa": "1.3.0",
-    "vite-plugin-static-copy": "4.1.0"
-  },
-  "overrides": {
-    "@giphy/js-util": {
-      "dompurify": ">=3.3.4"
-    },
-    "js-cookie": ">=3.0.6"
+    "lint-staged": "16.3.2",
+    "prettier": "2.8.1",
+    "semantic-release": "25.0.3",
+    "typescript": "4.9.4",
+    "vite": "6.4.2",
+    "vite-plugin-pwa": "0.20.5",
+    "vite-plugin-static-copy": "1.0.4",
+    "vite-plugin-top-level-await": "1.4.4"
   }
 }

public/config.json

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

public/manifest.json

@@ -1,14 +1,14 @@
 {
-  "name": "Lotus Chat",
-  "short_name": "Lotus Chat",
-  "description": "Lotus Chat \u2014 the Lotus Guild Matrix client",
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "Yet another matrix client",
   "dir": "auto",
   "lang": "en-US",
   "display": "standalone",
   "orientation": "portrait",
   "start_url": "./",
-  "background_color": "#0a0a0a",
-  "theme_color": "#980000",
+  "background_color": "#fff",
+  "theme_color": "#fff",
   "icons": [
     {
       "src": "./public/android/android-chrome-36x36.png",
@@ -55,20 +55,5 @@
       "sizes": "512x512",
       "type": "image/png"
     }
-  ],
-  "categories": ["social", "communication", "productivity"],
-  "shortcuts": [
-    {
-      "name": "New Message",
-      "short_name": "DM",
-      "description": "Open a new direct message",
-      "url": "/",
-      "icons": [
-        {
-          "src": "res/android/android-chrome-96x96.png",
-          "sizes": "96x96"
-        }
-      ]
-    }
   ]
 }

public/res/svg/cinny-highlight.svg

@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-  </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
-  <circle cx="14.5" cy="14.5" r="3" fill="#45B83B"/>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_1961)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#45B83B"/>
+</g>
+<defs>
+<clipPath id="clip0_2707_1961">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/res/svg/cinny-unread.svg

@@ -1,14 +1,13 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-  </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
-  <circle cx="14.5" cy="14.5" r="3" fill="#989898"/>
-</svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2707_2015)">
+<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
+<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
+<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#989898"/>
+</g>
+<defs>
+<clipPath id="clip0_2707_2015">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/res/svg/cinny.svg

@@ -1,13 +1,19 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#980000" fill-opacity="0.88">
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-  </g>
-  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
+	</g>
+	<g>
+		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
+			c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
+			C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
+			C4.2,16.1,1.9,13.8,1.2,10.8z"/>
+		<circle cx="9.5" cy="6.4" r="0.5"/>
+	</g>
+</g>
 </svg>

scripts/patch-folds.mjs

@@ -1,26 +0,0 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { join, dirname } from 'path';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const foldsPath = join(__dirname, '../node_modules/folds/dist/index.js');
-
-try {
-  let content = readFileSync(foldsPath, 'utf8');
-
-  // Defensive guard: if src is not a function, render null instead of crashing
-  const original = 'children: src(filled)';
-  const patched = 'children: typeof src === "function" ? src(filled) : null';
-
-  if (content.includes(patched)) {
-    console.log('folds patch already applied.');
-  } else if (content.includes(original)) {
-    content = content.replace(original, patched);
-    writeFileSync(foldsPath, content, 'utf8');
-    console.log('Applied defensive Icon src guard to folds.');
-  } else {
-    console.warn('Warning: folds Icon patch target not found - may need updating.');
-  }
-} catch (e) {
-  console.warn('Warning: Could not patch folds:', e.message);
-}

scripts/update-version.js

@@ -1,7 +1,7 @@
-import fs from 'fs';
-import path from 'path';
-import { execSync } from 'child_process';
-import { fileURLToPath } from 'url';
+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);
@@ -9,26 +9,26 @@ const __dirname = path.dirname(__filename);
 const version = process.argv[2];
 
 if (!version) {
-  console.error('Version argument missing');
+  console.error("Version argument missing");
   process.exit(1);
 }
 
-const root = path.resolve(__dirname, '..');
+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',
+  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',
+  "src/app/features/settings/about/About.tsx",
+  "src/app/pages/auth/AuthFooter.tsx",
+  "src/app/pages/client/WelcomePage.tsx",
 ];
 
 files.forEach((filePath) => {
@@ -39,10 +39,10 @@ files.forEach((filePath) => {
     return;
   }
 
-  const content = fs.readFileSync(absPath, 'utf8');
+  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/AccountDataEditor.tsx

@@ -54,7 +54,7 @@ function AccountDataEdit({
 
   const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
     textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT,
+    EDITOR_INTENT_SPACE_COUNT
   );
 
   const [submitState, submit] = useAsyncCallback<void, MatrixError, [string, object]>(submitChange);
@@ -127,7 +127,6 @@ function AccountDataEdit({
             <Input
               variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
               name="typeInput"
-              aria-label="Account data type"
               size="400"
               radii="300"
               readOnly={type.length > 0 || submitting}
@@ -171,7 +170,6 @@ function AccountDataEdit({
         <TextAreaComponent
           ref={textAreaRef}
           name="contentTextArea"
-          aria-label="JSON content"
           style={{
             fontFamily: 'monospace',
           }}
@@ -278,7 +276,7 @@ export function AccountDataEditor({
 
   const contentJSONStr = useMemo(
     () => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
-    [data.content],
+    [data.content]
   );
 
   return (
@@ -296,7 +294,7 @@ export function AccountDataEditor({
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
+            <IconButton onClick={requestClose} variant="Surface">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/AuthFlowsLoader.tsx

@@ -45,11 +45,11 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
       };
 
       return authFlows;
-    }, [mx]),
+    }, [mx])
   );
 
   useEffect(() => {
-    load().catch(() => {});
+    load();
   }, [load]);
 
   if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {

src/app/components/AuthSkeleton.tsx

@@ -1,71 +0,0 @@
-import React, { useId } from 'react';
-
-export function AuthSkeleton() {
-  const id = useId().replace(/:/g, '');
-  const shimmerKeyframes = `
-    @keyframes shimmer-${id} {
-      0%   { background-position: -400px 0; }
-      100% { background-position: 400px 0; }
-    }
-  `;
-
-  const shimmer = {
-    background:
-      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
-    backgroundSize: '800px 100%',
-    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
-    borderRadius: '4px',
-  } as React.CSSProperties;
-
-  return (
-    <>
-      <style>{shimmerKeyframes}</style>
-      <div
-        style={
-          {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minHeight: '100dvh',
-            padding: '16px',
-            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
-            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
-          } as React.CSSProperties
-        }
-      >
-        {/* Card */}
-        <div
-          style={{
-            width: '100%',
-            maxWidth: '360px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '24px',
-          }}
-        >
-          {/* Logo + app name */}
-          <div
-            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}
-          >
-            <div style={{ ...shimmer, width: '64px', height: '64px', borderRadius: '50%' }} />
-            <div style={{ ...shimmer, width: '100px', height: '20px' }} />
-          </div>
-
-          {/* Server picker */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            <div style={{ ...shimmer, width: '80px', height: '12px' }} />
-            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
-          </div>
-
-          {/* Form fields */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
-            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
-            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

src/app/components/BackRouteHandler.tsx

@@ -24,7 +24,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname,
+        location.pathname
       )
     ) {
       navigate(getHomePath());
@@ -37,7 +37,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname,
+        location.pathname
       )
     ) {
       navigate(getDirectPath());
@@ -49,7 +49,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
         caseSensitive: true,
         end: false,
       },
-      location.pathname,
+      location.pathname
     );
     const encodedSpaceIdOrAlias = spaceMatch?.params.spaceIdOrAlias;
     const decodedSpaceIdOrAlias =
@@ -66,7 +66,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname,
+        location.pathname
       )
     ) {
       navigate(getExplorePath());
@@ -79,7 +79,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname,
+        location.pathname
       )
     ) {
       navigate(getInboxPath());

src/app/components/BackupRestore.tsx

@@ -157,7 +157,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
           setRestoreProgress(progress);
         },
       });
-    }, [crypto, setRestoreProgress]),
+    }, [crypto, setRestoreProgress])
   );
 
   const handleRestore = () => {
@@ -178,7 +178,6 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
           )}
           <IconButton
             aria-pressed={!!menuCords}
-            aria-label="Backup options"
             size="300"
             variant="Surface"
             radii="300"

src/app/components/CallEmbedProvider.tsx

@@ -1,31 +1,5 @@
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useRef } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import FocusTrap from 'focus-trap-react';
-import {
-  Avatar,
-  Box,
-  Button,
-  color,
-  config,
-  Dialog,
-  Icon,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  toRem,
-} from 'folds';
-import {
-  EventTimelineSetHandlerMap,
-  EventType,
-  JoinRule,
-  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,374 +7,11 @@ import {
   useCallJoined,
   useCallThemeSync,
   useCallMemberSoundSync,
-  useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
-import { CallEmbed, useCallControlState } from '../plugins/call';
+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 { useRemoteAllMuted } from '../hooks/useCallSpeakers';
-import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
-import { mDirectAtom } from '../state/mDirectList';
-import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
-import { mxcUrlToHttp, getMxIdLocalPart } from '../utils/matrix';
-import { RoomAvatar, RoomIcon } from './room-avatar';
-import { useRoomNavigate } from '../hooks/useRoomNavigate';
-import { getChatBg } from '../features/lotus/chatBackground';
-import { useTheme, ThemeKind } from '../hooks/useTheme';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
-import { getStateEvent, getMemberDisplayName } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
-import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
-import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
-import { useLivekitSupport } from '../hooks/useLivekitSupport';
-import { CallAvatarAnimation } from '../styles/Animations.css';
-import { webRTCSupported } from '../utils/rtc';
-
-const PIP_MIN_W = 200;
-const PIP_MIN_H = 112;
-
-type Corner = 'se' | 'sw' | 'ne' | 'nw';
-
-/** Normalise the element to top/left positioning so resize math is uniform. */
-function normaliseToTopLeft(el: HTMLElement) {
-  const rect = el.getBoundingClientRect();
-  el.style.left = `${rect.left}px`;
-  el.style.top = `${rect.top}px`;
-  el.style.width = `${rect.width}px`;
-  el.style.height = `${rect.height}px`;
-  el.style.right = 'auto';
-  el.style.bottom = 'auto';
-}
-
-type IncomingCallInfo = {
-  room: Room;
-  sender: string;
-  senderTs: number;
-  lifetime: number;
-  intent?: string;
-  notificationType: RTCNotificationType;
-  refEventId: string;
-};
-type IncomingCallProps = {
-  dm: boolean;
-  info: IncomingCallInfo;
-  onIgnore: () => void;
-  onAnswer: (room: Room, video: boolean) => void;
-  onReject: (room: Room, eventId: string) => void;
-};
-function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const livekitSupported = useLivekitSupport();
-  const rtcSupported = webRTCSupported();
-  const canAnswer = livekitSupported && rtcSupported;
-  const { room } = info;
-
-  const audioRef = useRef<HTMLAudioElement>(null);
-
-  const roomName = useRoomName(room);
-  const roomAvatar = useRoomAvatar(room, dm);
-  const avatarUrl = roomAvatar
-    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined)
-    : undefined;
-
-  const session = useCallSession(room);
-  useCallMembersChange(
-    session,
-    useCallback(
-      (members) => {
-        if (members.length === 0) {
-          onIgnore();
-        }
-      },
-      [onIgnore],
-    ),
-  );
-
-  const playSound = useCallback(() => {
-    const audioElement = audioRef.current;
-    audioElement?.play().catch(() => undefined);
-  }, []);
-
-  useEffect(() => {
-    const audioEl = audioRef.current;
-    if (info.notificationType === 'ring') {
-      playSound();
-    }
-    return () => {
-      if (audioEl) {
-        audioEl.pause();
-        audioEl.currentTime = 0;
-      }
-    };
-  }, [playSound, info.notificationType]);
-
-  useEffect(() => {
-    const remaining = info.senderTs + info.lifetime - Date.now();
-    if (remaining <= 0) {
-      onIgnore();
-      return;
-    }
-    const id = setTimeout(onIgnore, remaining);
-    return () => clearTimeout(id);
-  }, [info.senderTs, info.lifetime, onIgnore]);
-
-  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">
-                  {getMemberDisplayName(info.room, info.sender) ??
-                    getMxIdLocalPart(info.sender) ??
-                    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">
-                      {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice 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={dm ? 'Critical' : 'Secondary'}
-                    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;
-
-      // Only ring for DMs or private non-space group chats.
-      // Space voice channels and public rooms fire room-level RTC notifications
-      // whenever anyone joins — ringing every member is incorrect behaviour.
-      const isDirect = directs.has(room.roomId);
-      const isSpaceChild = !!getStateEvent(room, StateEvent.SpaceParent);
-      const joinRule = room.getJoinRule();
-      const isPrivateGroup =
-        !isSpaceChild &&
-        (joinRule === JoinRule.Invite ||
-          joinRule === JoinRule.Knock ||
-          joinRule === JoinRule.Restricted);
-      if (!isDirect && !isPrivateGroup) 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, directs],
-  );
-
-  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);
@@ -411,49 +22,18 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
     embed,
     useCallback(() => {
       setCallEmbed(undefined);
-    }, [setCallEmbed]),
+    }, [setCallEmbed])
   );
 
   return null;
 }
 
-/** Shown inside the PiP window when the local microphone is muted. */
-function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
-  const allMuted = useRemoteAllMuted(callEmbed);
-  if (!allMuted) return null;
-  return (
-    <div
-      aria-label="Microphone muted"
-      style={{
-        position: 'absolute',
-        bottom: '8px',
-        left: '8px',
-        zIndex: 3,
-        background: 'rgba(0,0,0,0.60)',
-        backdropFilter: 'blur(4px)',
-        borderRadius: '6px',
-        padding: '3px 7px',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '4px',
-        pointerEvents: 'none',
-        color: color.Critical.Main,
-        fontSize: '13px',
-        lineHeight: 1,
-        userSelect: 'none',
-      }}
-    >
-      <Icon size="100" src={Icons.MicMute} filled />
-    </div>
-  );
-}
-
 type CallEmbedProviderProps = {
   children?: ReactNode;
 };
 export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const callEmbed = useAtomValue(callEmbedAtom);
-  const callEmbedRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const callEmbedRef = useRef<HTMLDivElement>(null);
   const joined = useCallJoined(callEmbed);
 
   const selectedRoom = useSelectedRoom();
@@ -461,341 +41,13 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const screenSize = useScreenSizeContext();
 
   const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
-  const inCallRoom = callEmbed && selectedRoom === callEmbed.roomId;
-  const callActive = callEmbed && joined;
-  const callVisible = inCallRoom && callActive && !chatOnlyView;
-  const pipMode = callActive && !inCallRoom;
-  const { navigateRoom } = useRoomNavigate();
 
-  const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
-
-  // Sync pip mode into CallControl so it can adjust behavior accordingly
-  useEffect(() => {
-    if (!callEmbed) return;
-    callEmbed.control.setPipMode(!!pipMode);
-  }, [pipMode, callEmbed]);
-
-  // When entering pip with screenshare active (or screenshare starts while in pip),
-  // enable spotlight so the screenshare fills the pip window.
-  // When screenshare ends, release the spotlight we auto-enabled.
-  const pipAutoSpotlightRef = React.useRef(false);
-  useEffect(() => {
-    if (!pipMode || !callEmbed) return;
-    if (pipScreenshare) {
-      if (!callEmbed.control.spotlight) {
-        callEmbed.control.toggleSpotlight();
-        pipAutoSpotlightRef.current = true;
-      }
-    } else if (pipAutoSpotlightRef.current) {
-      if (callEmbed.control.spotlight) callEmbed.control.toggleSpotlight();
-      pipAutoSpotlightRef.current = false;
-    }
-  }, [pipMode, pipScreenshare, callEmbed]);
-
-  const theme = useTheme();
-  const isDark = theme.kind === ThemeKind.Dark;
-  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
-  const wallpaperStyle = React.useMemo(
-    () => getChatBg(chatBackground, isDark),
-    [chatBackground, isDark],
-  );
-
-  const pipDragRef = React.useRef<{
-    startX: number;
-    startY: number;
-    origLeft: number;
-    origTop: number;
-    dragged: boolean;
-  } | null>(null);
-  const activeDragCleanupRef = React.useRef<(() => void) | null>(null);
-  React.useEffect(
-    () => () => {
-      activeDragCleanupRef.current?.();
-    },
-    [],
-  );
-
-  // Track previous pipMode to only reset position when entering/exiting pip
-  const prevPipModeRef = React.useRef(false);
-
-  React.useEffect(() => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    const wasInPip = prevPipModeRef.current;
-    prevPipModeRef.current = !!pipMode;
-    if (pipMode) {
-      if (!wasInPip) {
-        const saved = localStorage.getItem('pip-position');
-        const savedPos = saved ? (JSON.parse(saved) as { left: number; top: number }) : null;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-        if (savedPos) {
-          el.style.left = `${Math.max(0, Math.min(savedPos.left, window.innerWidth - 280))}px`;
-          el.style.top = `${Math.max(0, Math.min(savedPos.top, window.innerHeight - 158))}px`;
-        } else {
-          el.style.left = `${window.innerWidth - 280 - 16}px`;
-          el.style.top = `${window.innerHeight - 158 - 72}px`;
-        }
-        el.style.width = '280px';
-        el.style.height = '158px';
-        el.style.borderRadius = '12px';
-        el.style.overflow = 'hidden';
-        el.style.zIndex = '99';
-        el.style.boxShadow = '0 8px 32px rgba(0,0,0,0.55)';
-        el.style.border = '1px solid rgba(255,255,255,0.1)';
-      }
-      el.style.visibility = 'visible';
-    } else {
-      if (wasInPip) {
-        // Exiting pip: clear all pip styles; syncCallEmbedPlacement will restore correct position
-        el.style.top = '';
-        el.style.left = '';
-        el.style.bottom = '';
-        el.style.right = '';
-        el.style.width = '';
-        el.style.height = '';
-        el.style.borderRadius = '';
-        el.style.overflow = '';
-        el.style.zIndex = '';
-        el.style.boxShadow = '';
-        el.style.border = '';
-      }
-      // syncCallEmbedPlacement owns top/left/width/height; don't clear them on visibility changes
-      el.style.visibility = callVisible ? '' : 'hidden';
-    }
-  }, [pipMode, callVisible]);
-
-  React.useEffect(() => {
-    if (!pipMode) return;
-    const onPipWindowResize = (): void => {
-      const el = callEmbedRef.current;
-      if (!el) return;
-      // Normalise bottom/right → top/left so clamp math works regardless of initial position.
-      if (!el.style.left || el.style.left === 'auto') normaliseToTopLeft(el);
-      const l = parseFloat(el.style.left);
-      const t = parseFloat(el.style.top);
-      if (!isNaN(l))
-        el.style.left = `${Math.max(0, Math.min(l, window.innerWidth - el.offsetWidth))}px`;
-      if (!isNaN(t))
-        el.style.top = `${Math.max(0, Math.min(t, window.innerHeight - el.offsetHeight))}px`;
-    };
-    window.addEventListener('resize', onPipWindowResize);
-    return () => window.removeEventListener('resize', onPipWindowResize);
-  }, [pipMode, callEmbedRef]);
-
-  const handlePipDoubleClick = (e: React.MouseEvent) => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    e.stopPropagation();
-    const margin = 16;
-    const w = el.offsetWidth;
-    const h = el.offsetHeight;
-    const elRect = el.getBoundingClientRect();
-    const cx = elRect.left + w / 2;
-    const cy = elRect.top + h / 2;
-    const snapLeft = cx < window.innerWidth / 2 ? margin : window.innerWidth - w - margin;
-    const snapTop = cy < window.innerHeight / 2 ? margin : window.innerHeight - h - margin;
-    el.style.left = `${snapLeft}px`;
-    el.style.top = `${snapTop}px`;
-    el.style.right = 'auto';
-    el.style.bottom = 'auto';
-    el.style.transition = 'left 0.18s ease, top 0.18s ease';
-    setTimeout(() => {
-      if (el) el.style.transition = '';
-    }, 200);
-    localStorage.setItem('pip-position', JSON.stringify({ left: snapLeft, top: snapTop }));
-  };
-
-  const handlePipMouseDown = (e: React.MouseEvent) => {
-    const el = callEmbedRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    pipDragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      dragged: false,
-    };
-    const onMove = (ev: MouseEvent) => {
-      if (!pipDragRef.current || !el) return;
-      const dx = ev.clientX - pipDragRef.current.startX;
-      const dy = ev.clientY - pipDragRef.current.startY;
-      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5) {
-        pipDragRef.current.dragged = true;
-        document.body.style.cursor = 'grabbing';
-        document.body.style.userSelect = 'none';
-      }
-      if (pipDragRef.current.dragged) {
-        el.style.left = `${Math.max(
-          0,
-          Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx),
-        )}px`;
-        el.style.top = `${Math.max(
-          0,
-          Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy),
-        )}px`;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-      }
-    };
-    const onUp = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      activeDragCleanupRef.current = null;
-      if (el && pipDragRef.current?.dragged) {
-        const savedRect = el.getBoundingClientRect();
-        localStorage.setItem(
-          'pip-position',
-          JSON.stringify({ left: savedRect.left, top: savedRect.top }),
-        );
-      }
-      setTimeout(() => {
-        if (pipDragRef.current) pipDragRef.current.dragged = false;
-      }, 0);
-    };
-    activeDragCleanupRef.current = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  };
-
-  const handlePipTouchStart = (e: React.TouchEvent) => {
-    const el = callEmbedRef.current;
-    if (!el || e.touches.length !== 1) return;
-    const touch = e.touches[0];
-    const rect = el.getBoundingClientRect();
-    pipDragRef.current = {
-      startX: touch.clientX,
-      startY: touch.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      dragged: false,
-    };
-    const onTouchMove = (ev: TouchEvent) => {
-      if (!pipDragRef.current || !el || ev.touches.length !== 1) return;
-      ev.preventDefault();
-      const t = ev.touches[0];
-      const dx = t.clientX - pipDragRef.current.startX;
-      const dy = t.clientY - pipDragRef.current.startY;
-      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5)
-        pipDragRef.current.dragged = true;
-      if (pipDragRef.current.dragged) {
-        el.style.left = `${Math.max(
-          0,
-          Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx),
-        )}px`;
-        el.style.top = `${Math.max(
-          0,
-          Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy),
-        )}px`;
-        el.style.right = 'auto';
-        el.style.bottom = 'auto';
-      }
-    };
-    const onTouchEnd = () => {
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-      activeDragCleanupRef.current = null;
-      if (el && pipDragRef.current?.dragged) {
-        const savedRect = el.getBoundingClientRect();
-        localStorage.setItem(
-          'pip-position',
-          JSON.stringify({ left: savedRect.left, top: savedRect.top }),
-        );
-      }
-      setTimeout(() => {
-        if (pipDragRef.current) pipDragRef.current.dragged = false;
-      }, 0);
-    };
-    activeDragCleanupRef.current = () => {
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-    };
-    document.addEventListener('touchmove', onTouchMove, { passive: false });
-    document.addEventListener('touchend', onTouchEnd);
-  };
-
-  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const el = callEmbedRef.current;
-    if (!el) return;
-    normaliseToTopLeft(el);
-    const sx = e.clientX;
-    const sy = e.clientY;
-    const sw = el.offsetWidth;
-    const sh = el.offsetHeight;
-    const sl = parseFloat(el.style.left);
-    const st = parseFloat(el.style.top);
-    document.body.style.cursor = `${corner}-resize`;
-    document.body.style.userSelect = 'none';
-    const onMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - sx;
-      const dy = ev.clientY - sy;
-      let w = sw;
-      let h = sh;
-      let l = sl;
-      let t = st;
-      if (corner === 'se') {
-        w = sw + dx;
-        h = sh + dy;
-      }
-      if (corner === 'sw') {
-        w = sw - dx;
-        h = sh + dy;
-        l = sl + sw - Math.max(PIP_MIN_W, w);
-      }
-      if (corner === 'ne') {
-        w = sw + dx;
-        h = sh - dy;
-        t = st + sh - Math.max(PIP_MIN_H, h);
-      }
-      if (corner === 'nw') {
-        w = sw - dx;
-        h = sh - dy;
-        l = sl + sw - Math.max(PIP_MIN_W, w);
-        t = st + sh - Math.max(PIP_MIN_H, h);
-      }
-      w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
-      h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
-      l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
-      t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
-      el.style.width = `${w}px`;
-      el.style.height = `${h}px`;
-      el.style.left = `${l}px`;
-      el.style.top = `${t}px`;
-    };
-    const onUp = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      activeDragCleanupRef.current = null;
-    };
-    activeDragCleanupRef.current = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  };
+  const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;
 
   return (
     <CallEmbedContextProvider value={callEmbed}>
       {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>
-        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
-        {children}
-      </CallEmbedRefContextProvider>
+      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
       <div
         data-call-embed-container
         style={{
@@ -805,92 +57,9 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
           left: 0,
           width: '100%',
           height: '50%',
-          ...(callVisible && !pipMode ? wallpaperStyle : {}),
         }}
         ref={callEmbedRef}
-      >
-        {pipMode && callEmbed && (
-          <>
-            <div
-              role="button"
-              tabIndex={0}
-              aria-label="Return to call"
-              onMouseDown={handlePipMouseDown}
-              onTouchStart={handlePipTouchStart}
-              onDoubleClick={handlePipDoubleClick}
-              onClick={() => {
-                if (!pipDragRef.current?.dragged) navigateRoom(callEmbed.roomId);
-              }}
-              onKeyDown={(e) => e.key === 'Enter' && navigateRoom(callEmbed.roomId)}
-              style={{
-                position: 'absolute',
-                inset: 0,
-                zIndex: 1,
-                background: 'transparent',
-                cursor: 'grab',
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                padding: '6px',
-              }}
-            >
-              <div
-                style={{
-                  background: 'rgba(0,0,0,0.65)',
-                  backdropFilter: 'blur(4px)',
-                  borderRadius: '6px',
-                  padding: '3px 8px',
-                  color: '#fff',
-                  fontSize: '11px',
-                  fontWeight: 600,
-                  pointerEvents: 'none',
-                }}
-              >
-                ↗ Return to call
-              </div>
-            </div>
-            <PipMuteOverlay callEmbed={callEmbed} />
-            {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
-              const s = corner.includes('s');
-              const e2 = corner.includes('e');
-              const dots = [
-                [3, 3],
-                [3, 10],
-                [10, 3],
-              ].map(([a, b]) => ({
-                position: 'absolute' as const,
-                width: 5,
-                height: 5,
-                borderRadius: '50%',
-                background: 'rgba(255,255,255,0.65)',
-                boxShadow: '0 0 3px rgba(0,0,0,0.4)',
-                [s ? 'bottom' : 'top']: a,
-                [e2 ? 'right' : 'left']: b,
-              }));
-              return (
-                <div
-                  key={corner}
-                  onMouseDown={(ev) => handleResizeMouseDown(ev, corner)}
-                  onClick={(ev) => ev.stopPropagation()}
-                  style={{
-                    position: 'absolute',
-                    width: '24px',
-                    height: '24px',
-                    [s ? 'bottom' : 'top']: 0,
-                    [e2 ? 'right' : 'left']: 0,
-                    cursor: `${corner}-resize`,
-                    zIndex: 2,
-                  }}
-                >
-                  {dots.map((style, i) => (
-                    <div key={i} style={style} />
-                  ))}
-                </div>
-              );
-            })}
-          </>
-        )}
-      </div>
+      />
     </CallEmbedContextProvider>
   );
 }

src/app/components/CapabilitiesLoader.tsx

@@ -12,7 +12,7 @@ export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
   const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
 
   useEffect(() => {
-    load().catch(() => {});
+    load();
   }, [load]);
 
   return children(state.status === AsyncStatus.Success ? state.data : undefined);

src/app/components/ClientConfigLoader.tsx

@@ -21,7 +21,7 @@ export function ClientConfigLoader({ fallback, error, children }: ClientConfigLo
   const ignoreCallback = useCallback(() => setIgnoreError(true), []);
 
   useEffect(() => {
-    load().catch(() => undefined);
+    load();
   }, [load]);
 
   if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {

src/app/components/ConfirmPasswordMatch.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
 import { useDebounce } from '../hooks/useDebounce';
 
 type ConfirmPasswordMatchProps = {
@@ -7,13 +7,13 @@ type ConfirmPasswordMatchProps = {
     match: boolean,
     doMatch: () => void,
     passRef: RefObject<HTMLInputElement>,
-    confPassRef: RefObject<HTMLInputElement>,
+    confPassRef: RefObject<HTMLInputElement>
   ) => ReactNode;
 };
 export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
   const [match, setMatch] = useState(initialValue);
-  const passRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
-  const confPassRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
+  const passRef = useRef<HTMLInputElement>(null);
+  const confPassRef = useRef<HTMLInputElement>(null);
 
   const doMatch = useDebounce(
     useCallback(() => {
@@ -28,7 +28,7 @@ export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPassword
     {
       wait: 500,
       immediate: false,
-    },
+    }
   );
 
   return children(match, doMatch, passRef, confPassRef);

src/app/components/DeviceVerification.tsx

@@ -137,6 +137,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
       >
         {sasData.sas.emoji?.map(([emoji, name], index) => (
           <Box
+            // eslint-disable-next-line react/no-array-index-key
             key={`${emoji}${name}${index}`}
             direction="Column"
             gap="100"
@@ -258,16 +259,9 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
           <Dialog variant="Surface">
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
-                <Text as="h2" size="H4">
-                  Device Verification
-                </Text>
+                <Text size="H4">Device Verification</Text>
               </Box>
-              <IconButton
-                size="300"
-                radii="300"
-                onClick={handleCancel}
-                aria-label="Cancel verification"
-              >
+              <IconButton size="300" radii="300" onClick={handleCancel}>
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>
@@ -316,5 +310,9 @@ export function ReceiveSelfDeviceVerification() {
 
   if (!request) return null;
 
+  if (!request.isSelfVerification) {
+    return null;
+  }
+
   return <DeviceVerification request={request} onExit={handleExit} />;
 }

src/app/components/DeviceVerificationSetup.tsx

@@ -27,7 +27,7 @@ import { useAlive } from '../hooks/useAlive';
 import { UseStateProvider } from './UseStateProvider';
 
 type UIACallback<T> = (
-  authDict: AuthDict | null,
+  authDict: AuthDict | null
 ) => Promise<[IAuthData, undefined] | [undefined, T]>;
 
 type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
@@ -42,7 +42,7 @@ function makeUIAAction<T>(
   authData: IAuthData,
   performAction: PerformAction<T>,
   resolve: (data: T) => void,
-  reject: (error?: any) => void,
+  reject: (error?: any) => void
 ): UIAAction<T> {
   const action: UIAAction<T> = {
     authData,
@@ -91,7 +91,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
         setNextAuthData(authData);
       }
     },
-    [uiaAction, alive],
+    [uiaAction, alive]
   );
 
   const resetUIA = useCallback(() => {
@@ -118,7 +118,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
                 (err) => {
                   resetUIA();
                   reject(err);
-                },
+                }
               );
               if (alive()) {
                 setUIAAction(action);
@@ -130,7 +130,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
             reject(error);
           });
       }),
-    [alive, resetUIA],
+    [alive, resetUIA]
   );
 
   const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
@@ -159,8 +159,8 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
 
         onComplete(recoveryKeyData.encodedPrivateKey);
       },
-      [mx, onComplete, authUploadDeviceSigningKeys],
-    ),
+      [mx, onComplete, authUploadDeviceSigningKeys]
+    )
   );
 
   const loading = setupState.status === AsyncStatus.Loading;
@@ -299,11 +299,9 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
-              Setup Device Verification
-            </Text>
+            <Text size="H4">Setup Device Verification</Text>
           </Box>
-          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel}>
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -316,7 +314,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
         </Box>
       </Dialog>
     );
-  },
+  }
 );
 type DeviceVerificationResetProps = {
   onCancel: () => void;
@@ -336,11 +334,9 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
-              Reset Device Verification
-            </Text>
+            <Text size="H4">Reset Device Verification</Text>
           </Box>
-          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel}>
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -375,5 +371,5 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
         )}
       </Dialog>
     );
-  },
+  }
 );

src/app/components/GifPicker.tsx

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

src/app/components/ImageOverlay.tsx

@@ -41,5 +41,5 @@ export const ImageOverlay = as<'div', ImageOverlayProps>(
         </FocusTrap>
       </OverlayCenter>
     </Overlay>
-  ),
+  )
 );

src/app/components/JoinRulesSwitcher.tsx

@@ -33,7 +33,7 @@ export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
       [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
       [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
     }),
-    [roomType],
+    [roomType]
   );
 
 type JoinRuleLabels = Record<ExtendedJoinRules, string>;
@@ -47,7 +47,7 @@ export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
       [JoinRule.Public]: 'Public',
       [JoinRule.Private]: 'Invite Only',
     }),
-    [],
+    []
   );
 
 type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
@@ -79,7 +79,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
       setCords(undefined);
       onChange(selectedRule);
     },
-    [onChange],
+    [onChange]
   );
 
   return (

src/app/components/LobbySkeleton.tsx

@@ -1,118 +0,0 @@
-import React, { useId } from 'react';
-
-const ROOM_ROWS = [
-  { w: '160px', indent: false },
-  { w: '120px', indent: true },
-  { w: '140px', indent: true },
-  { w: '130px', indent: true },
-  { w: '150px', indent: false },
-  { w: '110px', indent: true },
-];
-
-export function LobbySkeleton() {
-  const id = useId().replace(/:/g, '');
-  const shimmerKeyframes = `
-    @keyframes shimmer-${id} {
-      0%   { background-position: -400px 0; }
-      100% { background-position: 400px 0; }
-    }
-  `;
-
-  const shimmer = {
-    background:
-      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
-    backgroundSize: '800px 100%',
-    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
-    borderRadius: '4px',
-  } as React.CSSProperties;
-
-  return (
-    <>
-      <style>{shimmerKeyframes}</style>
-      <div
-        style={
-          {
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-            height: '100%',
-            overflow: 'hidden',
-            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
-            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
-          } as React.CSSProperties
-        }
-      >
-        {/* Header — matches LobbyHeader (56px) */}
-        <div
-          style={{
-            height: '56px',
-            borderBottom: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            padding: '0 16px',
-            flexShrink: 0,
-          }}
-        >
-          <div
-            style={{
-              ...shimmer,
-              width: '32px',
-              height: '32px',
-              borderRadius: '50%',
-              flexShrink: 0,
-            }}
-          />
-          <div style={{ ...shimmer, width: '130px', height: '16px' }} />
-          <div style={{ flex: 1 }} />
-          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
-          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
-        </div>
-
-        <div style={{ flex: 1, overflowY: 'hidden', display: 'flex', flexDirection: 'column' }}>
-          {/* Hero — matches PageHero with large avatar + title + subtitle */}
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              padding: '32px 16px 24px',
-              gap: '12px',
-              flexShrink: 0,
-            }}
-          >
-            <div style={{ ...shimmer, width: '72px', height: '72px', borderRadius: '50%' }} />
-            <div style={{ ...shimmer, width: '180px', height: '20px' }} />
-            <div style={{ ...shimmer, width: '240px', height: '13px' }} />
-          </div>
-
-          {/* Room list rows */}
-          <div style={{ flex: 1, padding: '8px 0' }}>
-            {ROOM_ROWS.map((row, i) => (
-              <div
-                key={i}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '10px',
-                  padding: `6px 16px 6px ${row.indent ? '36px' : '16px'}`,
-                }}
-              >
-                <div
-                  style={{
-                    ...shimmer,
-                    width: '18px',
-                    height: '18px',
-                    borderRadius: '4px',
-                    flexShrink: 0,
-                  }}
-                />
-                <div style={{ ...shimmer, width: row.w, height: '14px' }} />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

src/app/components/LogoutDialog.tsx

@@ -21,13 +21,13 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const verificationStatus = useDeviceVerificationStatus(
       mx.getCrypto(),
       mx.getSafeUserId(),
-      mx.getDeviceId() ?? undefined,
+      mx.getDeviceId() ?? undefined
     );
 
     const [logoutState, logout] = useAsyncCallback<void, Error, []>(
       useCallback(async () => {
         await logoutClient(mx);
-      }, [mx]),
+      }, [mx])
     );
 
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
@@ -43,9 +43,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
-              Logout
-            </Text>
+            <Text size="H4">Logout</Text>
           </Box>
         </Header>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
@@ -87,5 +85,5 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
         </Box>
       </Dialog>
     );
-  },
+  }
 );

src/app/components/ManualVerification.tsx

@@ -126,7 +126,7 @@ export function ManualVerificationTile({
   const [method, setMethod] = useState(
     hasPassphrase
       ? ManualVerificationMethod.RecoveryPassphrase
-      : ManualVerificationMethod.RecoveryKey,
+      : ManualVerificationMethod.RecoveryKey
   );
 
   const verifyAndRestoreBackup = useCallback(
@@ -143,11 +143,11 @@ export function ManualVerificationTile({
 
       await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
     },
-    [mx, secretStorageKeyId],
+    [mx, secretStorageKeyId]
   );
 
   const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
-    verifyAndRestoreBackup,
+    verifyAndRestoreBackup
   );
   const verifying = verifyState.status === AsyncStatus.Loading;
 

src/app/components/MediaConfigLoader.tsx

@@ -12,7 +12,7 @@ export function MediaConfigLoader({ children }: MediaConfigLoaderProps) {
   const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx]));
 
   useEffect(() => {
-    load().catch(() => {});
+    load();
   }, [load]);
 
   return children(state.status === AsyncStatus.Success ? state.data : undefined);

src/app/components/MemberVerificationBadge.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
-import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
-
-type MemberVerificationBadgeProps = {
-  userId: string;
-};
-
-export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
-  const vs = useUserVerifiedStatus(userId);
-  if (vs === 'unknown') return null;
-  const color =
-    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
-  const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
-  return (
-    <TooltipProvider
-      position="Top"
-      tooltip={
-        <Tooltip>
-          <Text size="T200">{label}</Text>
-        </Tooltip>
-      }
-    >
-      {(ref) => (
-        <span
-          ref={ref}
-          title={label}
-          style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
-        >
-          <Icon size="100" src={Icons.ShieldUser} style={{ color }} />
-        </span>
-      )}
-    </TooltipProvider>
-  );
-}

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import {
@@ -41,7 +43,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
     const [pdfJSState, loadPdfJS] = usePdfJSLoader();
     const [docState, loadPdfDocument] = usePdfDocumentLoader(
       pdfJSState.status === AsyncStatus.Success ? pdfJSState.data : undefined,
-      src,
+      src
     );
     const isLoading =
       pdfJSState.status === AsyncStatus.Loading || docState.status === AsyncStatus.Loading;
@@ -106,7 +108,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
         <Header className={css.PdfViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
+            <IconButton size="300" radii="300" onClick={requestClose}>
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>
@@ -255,5 +257,5 @@ export const PdfViewer = as<'div', PdfViewerProps>(
         )}
       </Box>
     );
-  },
+  }
 );

src/app/components/RenderMessageContent.tsx

@@ -22,7 +22,6 @@ import {
   RenderBody,
   ThumbnailContent,
   UnsupportedContent,
-  VerificationRequestContent,
   VideoContent,
 } from './message';
 import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
@@ -38,7 +37,6 @@ type RenderMessageContentProps = {
   msgType: string;
   ts: number;
   edited?: boolean;
-  onEditHistoryClick?: () => void;
   getContent: <T>() => T;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
@@ -46,14 +44,12 @@ type RenderMessageContentProps = {
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
-  eventId?: string;
 };
 export function RenderMessageContent({
   displayName,
   msgType,
   ts,
   edited,
-  onEditHistoryClick,
   getContent,
   mediaAutoLoad,
   urlPreview,
@@ -61,7 +57,6 @@ export function RenderMessageContent({
   htmlReactParserOptions,
   linkifyOpts,
   outlineAttachment,
-  eventId,
 }: RenderMessageContentProps) {
   const renderUrlsPreview = (urls: string[]) => {
     const filteredUrls = urls.filter((url) => !testMatrixTo(url));
@@ -81,7 +76,6 @@ export function RenderMessageContent({
         <MText
           style={{ marginTop: config.space.S200 }}
           edited={edited}
-          onEditHistoryClick={onEditHistoryClick}
           content={content}
           renderBody={(props) => (
             <RenderBody
@@ -138,7 +132,6 @@ export function RenderMessageContent({
     return (
       <MText
         edited={edited}
-        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -149,7 +142,6 @@ export function RenderMessageContent({
           />
         )}
         renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        eventId={eventId}
       />
     );
   }
@@ -159,7 +151,6 @@ export function RenderMessageContent({
       <MEmote
         displayName={displayName}
         edited={edited}
-        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -170,7 +161,6 @@ export function RenderMessageContent({
           />
         )}
         renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        eventId={eventId}
       />
     );
   }
@@ -179,7 +169,6 @@ export function RenderMessageContent({
     return (
       <MNotice
         edited={edited}
-        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -190,7 +179,6 @@ export function RenderMessageContent({
           />
         )}
         renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        eventId={eventId}
       />
     );
   }
@@ -276,9 +264,5 @@ export function RenderMessageContent({
     return <MBadEncrypted />;
   }
 
-  if (msgType === 'm.key.verification.request') {
-    return <VerificationRequestContent />;
-  }
-
   return <UnsupportedContent />;
 }

src/app/components/RoomNotificationSwitcher.tsx

@@ -17,7 +17,7 @@ const useRoomNotificationModes = (): RoomNotificationMode[] =>
       RoomNotificationMode.SpecialMessages,
       RoomNotificationMode.Mute,
     ],
-    [],
+    []
   );
 
 const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
@@ -28,7 +28,7 @@ const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
       [RoomNotificationMode.SpecialMessages]: 'Mention & Keywords',
       [RoomNotificationMode.Mute]: 'Mute',
     }),
-    [],
+    []
   );
 
 type NotificationModeSwitcherProps = {
@@ -37,7 +37,7 @@ type NotificationModeSwitcherProps = {
   children: (
     handleOpen: MouseEventHandler<HTMLButtonElement>,
     opened: boolean,
-    changing: boolean,
+    changing: boolean
   ) => ReactNode;
 };
 export function RoomNotificationModeSwitcher({

src/app/components/RoomSkeleton.tsx

@@ -1,125 +0,0 @@
-import React, { useId } from 'react';
-
-const MESSAGES = [
-  { showAvatar: true, lines: [{ w: '55%' }, { w: '35%' }] },
-  { showAvatar: false, lines: [{ w: '72%' }] },
-  { showAvatar: false, lines: [{ w: '48%' }, { w: '60%' }] },
-  { showAvatar: true, lines: [{ w: '80%' }] },
-  { showAvatar: false, lines: [{ w: '40%' }] },
-  { showAvatar: true, lines: [{ w: '65%' }, { w: '50%' }, { w: '30%' }] },
-  { showAvatar: false, lines: [{ w: '58%' }] },
-  { showAvatar: true, lines: [{ w: '45%' }] },
-  { showAvatar: false, lines: [{ w: '70%' }, { w: '25%' }] },
-];
-
-export function RoomSkeleton() {
-  const id = useId().replace(/:/g, '');
-  const shimmerKeyframes = `
-    @keyframes shimmer-${id} {
-      0%   { background-position: -400px 0; }
-      100% { background-position: 400px 0; }
-    }
-  `;
-
-  const shimmer = {
-    background:
-      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
-    backgroundSize: '800px 100%',
-    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
-    borderRadius: '4px',
-  } as React.CSSProperties;
-
-  return (
-    <>
-      <style>{shimmerKeyframes}</style>
-      <div
-        style={
-          {
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-            height: '100%',
-            overflow: 'hidden',
-            // CSS vars resolve against both light and dark themes automatically
-            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
-            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
-          } as React.CSSProperties
-        }
-      >
-        {/* Header — matches PageHeader size="600" (56px) */}
-        <div
-          style={{
-            height: '56px',
-            borderBottom: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            padding: '0 16px',
-            flexShrink: 0,
-          }}
-        >
-          {/* Avatar */}
-          <div
-            style={{
-              ...shimmer,
-              width: '32px',
-              height: '32px',
-              borderRadius: '50%',
-              flexShrink: 0,
-            }}
-          />
-          {/* Room name */}
-          <div style={{ ...shimmer, width: '140px', height: '16px' }} />
-          {/* Spacer */}
-          <div style={{ flex: 1 }} />
-          {/* Icon buttons */}
-          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
-          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
-        </div>
-
-        {/* Timeline */}
-        <div style={{ flex: 1, overflowY: 'hidden', padding: '16px 0' }}>
-          {MESSAGES.map((msg, i) => (
-            <div
-              key={i}
-              style={{
-                display: 'flex',
-                gap: '12px',
-                padding: '4px 16px',
-                alignItems: 'flex-start',
-                marginBottom: msg.showAvatar ? '8px' : '2px',
-              }}
-            >
-              {/* Avatar — only shown on first message in a group */}
-              <div style={{ width: '36px', flexShrink: 0 }}>
-                {msg.showAvatar && (
-                  <div style={{ ...shimmer, width: '36px', height: '36px', borderRadius: '50%' }} />
-                )}
-              </div>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', flex: 1 }}>
-                {/* Username on first in group */}
-                {msg.showAvatar && (
-                  <div style={{ ...shimmer, width: '90px', height: '12px', marginBottom: '2px' }} />
-                )}
-                {msg.lines.map((line, j) => (
-                  <div key={j} style={{ ...shimmer, width: line.w, height: '14px' }} />
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Input bar */}
-        <div
-          style={{
-            borderTop: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
-            padding: '12px 16px',
-            flexShrink: 0,
-          }}
-        >
-          <div style={{ ...shimmer, width: '100%', height: '44px', borderRadius: '8px' }} />
-        </div>
-      </div>
-    </>
-  );
-}

src/app/components/SecretStorage.tsx

@@ -36,7 +36,7 @@ export function SecretStorageRecoveryPassphrase({
           passphrase,
           salt,
           iterations,
-          bits,
+          bits
         );
 
         const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
@@ -47,8 +47,8 @@ export function SecretStorageRecoveryPassphrase({
 
         return decodedRecoveryKey;
       },
-      [mx, keyContent],
-    ),
+      [mx, keyContent]
+    )
   );
 
   const drivingKey = driveKeyState.status === AsyncStatus.Loading;
@@ -80,7 +80,6 @@ export function SecretStorageRecoveryPassphrase({
           <Text size="L400">Recovery Passphrase</Text>
           <PasswordInput
             name="recoveryPassphraseInput"
-            aria-label="Recovery passphrase"
             size="400"
             variant="Secondary"
             radii="300"
@@ -140,8 +139,8 @@ export function SecretStorageRecoveryKey({
 
         return decodedRecoveryKey;
       },
-      [mx, keyContent],
-    ),
+      [mx, keyContent]
+    )
   );
 
   const drivingKey = driveKeyState.status === AsyncStatus.Loading;
@@ -171,7 +170,6 @@ export function SecretStorageRecoveryKey({
           <Text size="L400">Recovery Key</Text>
           <PasswordInput
             name="recoveryKeyInput"
-            aria-label="Recovery key"
             size="400"
             variant="Secondary"
             radii="300"

src/app/components/ServerConfigsLoader.tsx

@@ -31,14 +31,10 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
       const authMetadata = promiseFulfilledResult(result[2]);
       let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
 
-      // Only validate if the server returned metadata — a rejected promise means no native
-      // Matrix OIDC (MSC3861/MAS), which is normal for servers using traditional SSO.
-      if (authMetadata !== undefined) {
-        try {
-          validatedAuthMetadata = validateAuthMetadata(authMetadata);
-        } catch (e) {
-          console.error(e);
-        }
+      try {
+        validatedAuthMetadata = validateAuthMetadata(authMetadata);
+      } catch (e) {
+        console.error(e);
       }
 
       return {
@@ -46,7 +42,7 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
         mediaConfig,
         authMetadata: validatedAuthMetadata,
       };
-    }, [mx]),
+    }, [mx])
   );
 
   const configs: ServerConfigs =

src/app/components/SpaceChildDirectsProvider.tsx

@@ -21,7 +21,7 @@ export function SpaceChildDirectsProvider({
   const childDirects = useSpaceChildren(
     allRoomsAtom,
     spaceId,
-    useChildDirectScopeFactory(mx, mDirects, roomToParents),
+    useChildDirectScopeFactory(mx, mDirects, roomToParents)
   );
 
   return children(childDirects);

src/app/components/SpaceChildRoomsProvider.tsx

@@ -21,7 +21,7 @@ export function SpaceChildRoomsProvider({
   const childRooms = useSpaceChildren(
     allRoomsAtom,
     spaceId,
-    useChildRoomScopeFactory(mx, mDirects, roomToParents),
+    useChildRoomScopeFactory(mx, mDirects, roomToParents)
   );
 
   return children(childRooms);

src/app/components/SpecVersionsLoader.tsx

@@ -15,14 +15,14 @@ export function SpecVersionsLoader({
   children,
 }: SpecVersionsLoaderProps) {
   const [state, load] = useAsyncCallback(
-    useCallback(() => specVersions(fetch, baseUrl), [baseUrl]),
+    useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
   );
   const [ignoreError, setIgnoreError] = useState(false);
 
   const ignoreCallback = useCallback(() => setIgnoreError(true), []);
 
   useEffect(() => {
-    load().catch(() => {});
+    load();
   }, [load]);
 
   if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
@@ -38,6 +38,6 @@ export function SpecVersionsLoader({
       ? state.data
       : {
           versions: [],
-        },
+        }
   );
 }

src/app/components/UIAFlowOverlay.tsx

@@ -55,7 +55,6 @@ export function UIAFlowOverlay({
                 <IconButton
                   ref={anchorRef}
                   variant="Critical"
-                  aria-label="Cancel authentication"
                   size="300"
                   onClick={onCancel}
                   radii="Pill"

src/app/components/VoiceMessageRecorder.tsx

@@ -1,306 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
-
-type RecorderState = 'idle' | 'recording' | 'preview';
-
-interface VoiceRecorderProps {
-  onSend: (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => void;
-  onError?: (err: string) => void;
-}
-
-function formatDuration(ms: number): string {
-  const totalSec = Math.floor(ms / 1000);
-  const m = Math.floor(totalSec / 60);
-  const s = totalSec % 60;
-  return `${m}:${s.toString().padStart(2, '0')}`;
-}
-
-function normalizeWaveform(samples: number[]): number[] {
-  if (samples.length === 0) return Array(20).fill(0);
-  const max = Math.max(...samples, 1);
-  const count = Math.min(samples.length, 100);
-  const step = samples.length / count;
-  const result: number[] = [];
-  for (let i = 0; i < count; i += 1) {
-    const idx = Math.floor(i * step);
-    result.push(Math.round((samples[idx] / max) * 1024));
-  }
-  return result;
-}
-
-const WAVEFORM_BARS = 40;
-
-export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
-  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
-  const [state, setState] = useState<RecorderState>('idle');
-  const [durationMs, setDurationMs] = useState(0);
-  const [waveformBars, setWaveformBars] = useState<number[]>(Array(WAVEFORM_BARS).fill(0));
-  const [previewBlob, setPreviewBlob] = useState<Blob | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<Blob[]>([]);
-  const analyserRef = useRef<AnalyserNode | null>(null);
-  const audioCtxRef = useRef<AudioContext | null>(null);
-  const rawSamplesRef = useRef<number[]>([]);
-  const startTimeRef = useRef<number>(0);
-  const animFrameRef = useRef<number>(0);
-  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  const previewMimeRef = useRef('audio/ogg;codecs=opus');
-  const previewDurationRef = useRef(0);
-
-  const stopAll = useCallback(() => {
-    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (audioCtxRef.current) {
-      audioCtxRef.current.close();
-      audioCtxRef.current = null;
-    }
-    analyserRef.current = null;
-  }, []);
-
-  useEffect(
-    () => () => {
-      stopAll();
-      if (previewUrl) URL.revokeObjectURL(previewUrl);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  const startRecording = useCallback(async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const mimeType = MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
-        ? 'audio/ogg;codecs=opus'
-        : 'audio/webm;codecs=opus';
-      previewMimeRef.current = mimeType;
-
-      const mr = new MediaRecorder(stream, { mimeType });
-      mediaRecorderRef.current = mr;
-      chunksRef.current = [];
-      rawSamplesRef.current = [];
-      startTimeRef.current = Date.now();
-
-      const audioCtx = new AudioContext();
-      audioCtxRef.current = audioCtx;
-      const source = audioCtx.createMediaStreamSource(stream);
-      const analyser = audioCtx.createAnalyser();
-      analyser.fftSize = 256;
-      source.connect(analyser);
-      analyserRef.current = analyser;
-
-      const buf = new Uint8Array(analyser.frequencyBinCount);
-      const tick = () => {
-        if (!analyserRef.current) return;
-        analyserRef.current.getByteFrequencyData(buf);
-        const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
-        rawSamplesRef.current.push(avg);
-
-        setWaveformBars((prev) => {
-          const next = [...prev.slice(1), Math.round((avg / 255) * 100)];
-          return next;
-        });
-        animFrameRef.current = requestAnimationFrame(tick);
-      };
-      animFrameRef.current = requestAnimationFrame(tick);
-
-      timerRef.current = setInterval(() => {
-        setDurationMs(Date.now() - startTimeRef.current);
-      }, 100);
-
-      mr.ondataavailable = (e) => {
-        if (e.data.size > 0) chunksRef.current.push(e.data);
-      };
-
-      mr.onstop = () => {
-        stream.getTracks().forEach((t) => t.stop());
-        const blob = new Blob(chunksRef.current, { type: mimeType });
-        previewDurationRef.current = Date.now() - startTimeRef.current;
-        setPreviewBlob(blob);
-        setPreviewUrl((prev) => {
-          if (prev) URL.revokeObjectURL(prev);
-          return URL.createObjectURL(blob);
-        });
-        setState('preview');
-      };
-
-      mr.start(250);
-      setState('recording');
-    } catch {
-      onError?.('Microphone access denied');
-    }
-  }, [onError]);
-
-  const stopRecording = useCallback(() => {
-    stopAll();
-    if (mediaRecorderRef.current?.state === 'recording') {
-      mediaRecorderRef.current.stop();
-    }
-  }, [stopAll]);
-
-  const cancelRecording = useCallback(() => {
-    stopAll();
-    const mr = mediaRecorderRef.current;
-    if (mr?.state === 'recording') {
-      mr.ondataavailable = null;
-      mr.onstop = null;
-      mr.stop();
-    }
-    setPreviewBlob(null);
-    setPreviewUrl((prev) => {
-      if (prev) URL.revokeObjectURL(prev);
-      return null;
-    });
-    rawSamplesRef.current = [];
-    setWaveformBars(Array(WAVEFORM_BARS).fill(0));
-    setDurationMs(0);
-    setState('idle');
-  }, [stopAll]);
-
-  const sendVoice = useCallback(() => {
-    if (!previewBlob) return;
-    const waveform = normalizeWaveform(rawSamplesRef.current);
-    onSend(previewBlob, previewMimeRef.current, previewDurationRef.current, waveform);
-    cancelRecording();
-  }, [previewBlob, onSend, cancelRecording]);
-
-  const barMax = Math.max(...waveformBars, 1);
-
-  if (state === 'idle') {
-    return (
-      <IconButton
-        onClick={startRecording}
-        aria-label="Record voice message"
-        variant="SurfaceVariant"
-        size="300"
-        radii="300"
-        title="Record voice message"
-      >
-        <Icon src={Icons.Mic} size="100" />
-      </IconButton>
-    );
-  }
-
-  if (state === 'recording') {
-    return (
-      <Box
-        data-voice-recorder="recording"
-        alignItems="Center"
-        gap="200"
-        style={{
-          background: 'var(--bg-surface-variant)',
-          borderRadius: config.radii.R300,
-          padding: `${toRem(4)} ${toRem(8)}`,
-        }}
-      >
-        <Box
-          data-voice-rec-dot
-          style={{
-            width: toRem(8),
-            height: toRem(8),
-            borderRadius: '50%',
-            background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
-            flexShrink: 0,
-            animation: 'pttLivePulse 900ms ease-in-out infinite',
-          }}
-        />
-        <Text
-          size="T200"
-          style={{
-            minWidth: toRem(32),
-            fontVariantNumeric: 'tabular-nums',
-            ...(lotusTerminal
-              ? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 }
-              : {}),
-          }}
-        >
-          {formatDuration(durationMs)}
-        </Text>
-        <Box
-          data-voice-waveform
-          alignItems="Center"
-          gap="100"
-          style={{ height: toRem(20), overflow: 'hidden', flexShrink: 0 }}
-        >
-          {waveformBars.map((h, i) => (
-            <div
-              key={i}
-              style={{
-                width: toRem(2),
-                height: toRem(2 + (h / barMax) * 16),
-                borderRadius: toRem(1),
-                background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
-                flexShrink: 0,
-              }}
-            />
-          ))}
-        </Box>
-        <IconButton
-          onClick={stopRecording}
-          aria-label="Stop recording"
-          variant="Primary"
-          fill="Soft"
-          size="300"
-          radii="300"
-          title="Stop recording"
-        >
-          <Icon src={Icons.Pause} size="100" />
-        </IconButton>
-        <IconButton
-          onClick={cancelRecording}
-          aria-label="Cancel recording"
-          variant="SurfaceVariant"
-          size="300"
-          radii="300"
-          title="Cancel"
-        >
-          <Icon src={Icons.Cross} size="100" />
-        </IconButton>
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      alignItems="Center"
-      gap="200"
-      style={{
-        background: 'var(--bg-surface-variant)',
-        borderRadius: config.radii.R300,
-        padding: `${toRem(4)} ${toRem(8)}`,
-      }}
-    >
-      {previewUrl && (
-        <audio src={previewUrl} controls style={{ height: toRem(28), maxWidth: toRem(180) }} />
-      )}
-      <Text size="T200" style={{ fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>
-        {formatDuration(previewDurationRef.current)}
-      </Text>
-      <IconButton
-        onClick={sendVoice}
-        aria-label="Send voice message"
-        variant="Primary"
-        fill="Soft"
-        size="300"
-        radii="300"
-        title="Send voice message"
-      >
-        <Icon src={Icons.Send} size="100" />
-      </IconButton>
-      <IconButton
-        onClick={cancelRecording}
-        aria-label="Discard voice message"
-        variant="SurfaceVariant"
-        size="300"
-        radii="300"
-        title="Discard"
-      >
-        <Icon src={Icons.Delete} size="100" />
-      </IconButton>
-    </Box>
-  );
-}

src/app/components/create-room/AdditionalCreatorInput.tsx

@@ -35,7 +35,7 @@ import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-ht
 export const useAdditionalCreators = (defaultCreators?: string[]) => {
   const mx = useMatrixClient();
   const [additionalCreators, setAdditionalCreators] = useState<string[]>(
-    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? [],
+    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
   );
 
   const addAdditionalCreator = (userId: string) => {
@@ -90,12 +90,12 @@ export function AdditionalCreatorInput({
   const [validUserId, setValidUserId] = useState<string>();
   const filteredUsers = useMemo(
     () => directUsers.filter((userId) => !additionalCreators.includes(userId)),
-    [directUsers, additionalCreators],
+    [directUsers, additionalCreators]
   );
   const [result, search, resetSearch] = useAsyncSearch(
     filteredUsers,
     getUserIdString,
-    SEARCH_OPTIONS,
+    SEARCH_OPTIONS
   );
   const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
 

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -42,9 +42,9 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
           throw e;
         }
       },
-      [mx],
+      [mx]
     ),
-    setAliasAvail,
+    setAliasAvail
   );
   const aliasAvailable: boolean | undefined =
     aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;

src/app/components/create-room/utils.ts

@@ -15,7 +15,7 @@ import { CreateRoomAccess } from './types';
 export const createRoomCreationContent = (
   type: RoomType | undefined,
   allowFederation: boolean,
-  additionalCreators: string[] | undefined,
+  additionalCreators: string[] | undefined
 ): object => {
   const content: Record<string, any> = {};
   if (typeof type === 'string') {
@@ -34,7 +34,7 @@ export const createRoomCreationContent = (
 export const createRoomJoinRulesState = (
   access: CreateRoomAccess,
   parent: Room | undefined,
-  knock: boolean,
+  knock: boolean
 ) => {
   let content: RoomJoinRulesEventContent = {
     join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
@@ -136,7 +136,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     creation_content: createRoomCreationContent(
       data.type,
       data.allowFederation,
-      data.additionalCreators,
+      data.additionalCreators
     ),
     power_level_content_override:
       data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
@@ -158,7 +158,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
         suggested: false,
         via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
       },
-      result.room_id,
+      result.room_id
     );
   }
 

src/app/components/cutout-card/CutoutCard.tsx

@@ -11,5 +11,5 @@ export const CutoutCard = as<'div', { variant?: TContainerColor }>(
       {...props}
       ref={ref}
     />
-  ),
+  )
 );

src/app/components/editor/Editor.preview.tsx

@@ -23,11 +23,7 @@ export function EditorPreview() {
 
   return (
     <>
-      <IconButton
-        variant="SurfaceVariant"
-        aria-label="Open editor preview"
-        onClick={() => setOpen(!open)}
-      >
+      <IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
         <Icon src={Icons.BlockQuote} />
       </IconButton>
       <Overlay open={open} backdrop={<OverlayBackdrop />}>
@@ -46,7 +42,7 @@ export function EditorPreview() {
                   editor={editor}
                   placeholder="Send a message..."
                   before={
-                    <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Attach">
+                    <IconButton variant="SurfaceVariant" size="300" radii="300">
                       <Icon src={Icons.PlusCircle} />
                     </IconButton>
                   }
@@ -57,20 +53,14 @@ export function EditorPreview() {
                         size="300"
                         radii="300"
                         onClick={() => setToolbar(!toolbar)}
-                        aria-label={toolbar ? 'Hide formatting toolbar' : 'Show formatting toolbar'}
                         aria-pressed={toolbar}
                       >
                         <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
                       </IconButton>
-                      <IconButton
-                        variant="SurfaceVariant"
-                        size="300"
-                        radii="300"
-                        aria-label="Insert emoji"
-                      >
+                      <IconButton variant="SurfaceVariant" size="300" radii="300">
                         <Icon src={Icons.Smile} />
                       </IconButton>
-                      <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Send">
+                      <IconButton variant="SurfaceVariant" size="300" radii="300">
                         <Icon src={Icons.Send} />
                       </IconButton>
                     </>

src/app/components/editor/Editor.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import React, {
   ClipboardEventHandler,
   KeyboardEventHandler,
@@ -35,7 +36,7 @@ const withInline = (editor: Editor): Editor => {
 
   editor.isInline = (element) =>
     [BlockType.Mention, BlockType.Emoticon, BlockType.Link, BlockType.Command].includes(
-      element.type,
+      element.type
     ) || isInline(element);
 
   return editor;
@@ -87,11 +88,11 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       onChange,
       onPaste,
     },
-    ref,
+    ref
   ) => {
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
-      [],
+      []
     );
 
     const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
@@ -102,7 +103,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
         const shortcutToggled = toggleKeyboardShortcut(editor, evt);
         if (shortcutToggled) evt.preventDefault();
       },
-      [editor, onKeyDown],
+      [editor, onKeyDown]
     );
 
     const renderPlaceholder = useCallback(
@@ -114,7 +115,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
           </Text>
         </span>
       ),
-      [],
+      []
     );
 
     return (
@@ -139,8 +140,6 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                 data-editable-name={editableName}
                 className={css.EditorTextarea}
                 placeholder={placeholder}
-                aria-label={placeholder ?? 'Message input'}
-                aria-multiline="true"
                 renderPlaceholder={renderPlaceholder}
                 renderElement={renderElement}
                 renderLeaf={renderLeaf}
@@ -159,5 +158,5 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
         </Slate>
       </div>
     );
-  },
+  }
 );

src/app/components/editor/Toolbar.tsx

@@ -54,8 +54,8 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
   );
 }
 
-type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode; label?: string };
-export function MarkButton({ format, icon, tooltip, label }: MarkButtonProps) {
+type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
+export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
   const editor = useSlate();
   const disableInline = isBlockActive(editor, BlockType.CodeBlock);
 
@@ -76,7 +76,6 @@ export function MarkButton({ format, icon, tooltip, label }: MarkButtonProps) {
           variant="SurfaceVariant"
           onClick={handleClick}
           aria-pressed={isMarkActive(editor, format)}
-          aria-label={label}
           size="400"
           radii="300"
           disabled={disableInline}
@@ -92,9 +91,8 @@ type BlockButtonProps = {
   format: BlockType;
   icon: IconSrc;
   tooltip: ReactNode;
-  label?: string;
 };
-export function BlockButton({ format, icon, tooltip, label }: BlockButtonProps) {
+export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
   const editor = useSlate();
 
   const handleClick = () => {
@@ -110,7 +108,6 @@ export function BlockButton({ format, icon, tooltip, label }: BlockButtonProps)
           variant="SurfaceVariant"
           onClick={handleClick}
           aria-pressed={isBlockActive(editor, format)}
-          aria-label={label}
           size="400"
           radii="300"
         >
@@ -168,7 +165,6 @@ export function HeadingBlockButton() {
                   <IconButton
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(1)}
-                    aria-label="Heading 1"
                     size="400"
                     radii="300"
                   >
@@ -184,7 +180,6 @@ export function HeadingBlockButton() {
                   <IconButton
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(2)}
-                    aria-label="Heading 2"
                     size="400"
                     radii="300"
                   >
@@ -200,7 +195,6 @@ export function HeadingBlockButton() {
                   <IconButton
                     ref={triggerRef}
                     onClick={() => handleMenuSelect(3)}
-                    aria-label="Heading 3"
                     size="400"
                     radii="300"
                   >
@@ -217,9 +211,7 @@ export function HeadingBlockButton() {
         style={{ width: 'unset' }}
         variant="SurfaceVariant"
         onClick={handleMenuOpen}
-        aria-label={level ? `Heading ${level}` : 'Heading'}
-        aria-expanded={isActive}
-        aria-haspopup="menu"
+        aria-pressed={isActive}
         size="400"
         radii="300"
       >
@@ -355,7 +347,6 @@ export function Toolbar() {
                   ref={triggerRef}
                   variant="SurfaceVariant"
                   onClick={() => setIsMarkdown(!isMarkdown)}
-                  aria-label={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'}
                   aria-pressed={isMarkdown}
                   size="300"
                   radii="300"

src/app/components/editor/autocomplete/AutocompleteMenu.tsx

@@ -23,7 +23,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
   };
 
   return (
-    <div className={css.AutocompleteMenuBase} onMouseDown={(e) => e.preventDefault()}>
+    <div className={css.AutocompleteMenuBase}>
       <div className={css.AutocompleteMenuContainer}>
         <FocusTrap
           focusTrapOptions={{

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -51,14 +51,14 @@ export function EmoticonAutocomplete({
     const list: Array<EmoticonSearchItem> = [];
     return list.concat(
       imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
-      emojis,
+      emojis
     );
   }, [imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,
     getEmoticonSearchStr,
-    SEARCH_OPTIONS,
+    SEARCH_OPTIONS
   );
   const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
 
@@ -95,7 +95,6 @@ export function EmoticonAutocomplete({
             key={emoticon.shortcode + key}
             as="button"
             radii="300"
-            onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
             onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
               onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
             }

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -42,7 +42,6 @@ function UnknownRoomMentionItem({
     <MenuItem
       as="button"
       radii="300"
-      onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
       onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) => onTabPress(evt, handleSelect)}
       onClick={handleSelect}
       before={
@@ -92,9 +91,9 @@ export function RoomMentionAutocomplete({
         if (alias) return [r.name, alias];
         return r.name;
       },
-      [mx],
+      [mx]
     ),
-    SEARCH_OPTIONS,
+    SEARCH_OPTIONS
   );
 
   const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20);
@@ -112,7 +111,7 @@ export function RoomMentionAutocomplete({
       name.startsWith('#') ? name : `#${name}`,
       roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId,
       undefined,
-      viaServers,
+      viaServers
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);
@@ -150,7 +149,6 @@ export function RoomMentionAutocomplete({
               key={rId}
               as="button"
               radii="300"
-              onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
               onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
                 onTabPress(evt, handleSelect)
               }