Release v4.2.2 (#2012)

* Allow service worker to immediately claim pages
* Allow media requests to be cached by browser

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

@@ -12,9 +12,9 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@v4.0.4
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v4.3.4
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v4.3.4
+        uses: actions/upload-artifact@v4.3.6
         with:
           name: pr
           path: ./pr.txt

.github/workflows/cla.yml

@@ -12,7 +12,7 @@ jobs:
       - name: 'CLA Assistant'
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
-        uses: cla-assistant/github-action@v2.4.0
+        uses: cla-assistant/github-action@v2.6.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # the below token should have repo scope and must be manually added by you in the repository's secret

.github/workflows/docker-pr.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v6.5.0
+        uses: docker/build-push-action@v6.9.0
         with:
           context: .
           push: false

.github/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         with:

.github/workflows/netlify-dev.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@v4.0.4
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/prod-deploy.yml

@@ -10,9 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@v4.0.4
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -66,11 +66,11 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3.2.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.5.0
+        uses: docker/setup-buildx-action@v3.6.1
       - name: Login to Docker Hub
         uses: docker/login-action@v3.3.0
         with:
@@ -90,7 +90,7 @@ jobs:
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.5.0
+        uses: docker/build-push-action@v6.9.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.npmrc

@@ -1,3 +1,2 @@
 legacy-peer-deps=true
 save-exact=true
-@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+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,
+  and learning from the experience
+* 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
+  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
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+cinnyapp@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+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
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

README.md

@@ -19,22 +19,24 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
 <img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
 
 ## Getting started
-Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
+* Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
 
-You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+* You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
-To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
+* To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
 You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
+To set default Homeserver on login, register and Explore Community page, place a customized [`config.json`](config.json) in webroot of your choice.
+You will also need to setup redirects to serve the assests. An example setting of redirects for netlify is done in [`netlify.toml`](netlify.toml). You can also set `hashRouter.enabled = true` in [`config.json`](config.json) if you have trouble setting redirects.
+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 change `base: '/app'`.
 
-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
+* Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
-```
+    ```
-docker pull ajbura/cinny
+    docker pull ajbura/cinny
-```
+    ```
-or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
+    or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
-```
+    ```
-docker pull ghcr.io/cinnyapp/cinny:latest
+    docker pull ghcr.io/cinnyapp/cinny:latest
-```
+    ```
 
 <details>
 <summary>PGP Public Key to verify tarball</summary>
@@ -51,16 +53,16 @@ Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
 Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
 jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
 4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
-AdQEEwEIAD4WIQSRri2MHidaaZv+vvuUMwx6UK/M8wUCYnD+DQIbAwUJA8JnAAUL
+AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
-CQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRCUMwx6UK/M88ApC/9HAdbum1lYBC0s
+vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
-1k7GwP2A7B4sQtBWjy771BzybWlHeaeG+BGJwg4YiuowXZMm5dubFJFoI/CfeY07
+YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
-B5aK40/bmT6Xcfkp0VA74c1wUpubBUEJN7tH5HG/OGd9BKeq9E/HHtVaJLVT1k3w
+AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
-Rhv9VuHO6nR30EEp7IDthftotl5S4lio3+W0pKk4TAKV8vjaCNp3y/lAHzoP1BU9
+Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
-bUSao+7GXVeArKBjuqxN+t1uuiaxPH4L0oe2pMVjTig04zGJM5fTVoly859MEcC/
+K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
-R7Taq9RWGfXFmgCXy8Dviz3eOD90vqpCzhX4+ypK0cp2X0UwhMH4dpKUzExmdbhl
+atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
-eBO5GcHB4VxvloRBNf9/Lr7YOTgWejMUw+MlhZE2RE8unfW1LnM/cjL4dhXzO/XB
+AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
-FUHHNq8d6d4e02rfWqw7mZo2/NVJgFRcvzw2rgx7w7CKtCNwF4lNjUetB2waZzDb
+SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
-fAE0kwhK4Iuwvy12JOBzL0Yy9MxANtwUryr/LQz9AmdT4Rwnp0S5AY0EYnD+DQEM
+3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
 ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
 5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
 Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
@@ -69,17 +71,17 @@ s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
 vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
 LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
 H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
-NwARAQABiQG8BBgBCAAmFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmJw/g0CGwwF
+NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
-CQPCZwAACgkQlDMMelCvzPPT7Qv8CjXUEhphZFLwpBfaNOzRNfIXJST9aDit8zHW
+CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
-IMmfSpORVfpU71IyIB3o/DtTUPwCeb8nvNJs7aj1QT1ZUSsqFa3yY2S16V/g8+WN
+XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
-sHca6oDSc1J+A0eEpEL1HbG1b5OPBC0AeGvvMOoqrbqThBZVKg1Jc/0SD3cvKElv
+KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
-aHeCZCNNmfcZ2Ib4HYhhc8//ZtC9TeI+5J/YesctY1M12EoWMxMrc27Y3P5Pa0BI
+gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
-Uc3qxWggPq1vOFYsEshL0w99HyJvREJmQA7Fa0crV+rICxyrBxJeNnEvjH/0KCBU
+N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
-LCkEonLY1QwrxyeeV3VpxGE3zHHE3azOdAjTIoAdzX5f/qhbgYlM68GL2f8xdDkp
+M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
-O0igSGHWhO4F8BfmE7IOTx1Bi7daczp8nCFxh73cKpKB0RUsd9xxrqYpovjmEAlo
+n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
-w7aHpdzt64NQcsrbK10OSVDF3gFa9Vz20/NQvdUrp8jGmAb/8+nYqI94Jsc28H36
+Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
-UeGsouhyuITLwEhScounZDqop+Dx
+mxFo+ioe/ABCufSmyqFye0psX3Sp
-=Zg+6
+=WtqZ
 -----END PGP PUBLIC KEY BLOCK-----
 ```
 </details>

contrib/nginx/cinny.domain.tld.conf

@@ -24,6 +24,7 @@ server {
     rewrite ^/manifest.json$ /manifest.json break;
 
     rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
     rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
 
     rewrite ^/public/(.*)$ /public/$1 break;

docker-nginx.conf

@@ -1,4 +1,7 @@
 server {
+  listen 80;
+  listen [::]:80;
+
   location / {
     root /usr/share/nginx/html;
 
@@ -6,6 +9,7 @@ server {
     rewrite ^/manifest.json$ /manifest.json break;
 
     rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
     rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
 
     rewrite ^/public/(.*)$ /public/$1 break;

netlify.toml

@@ -8,6 +8,11 @@
   to = "/manifest.json"
   status = 200
 
+[[redirects]]
+  from = "/sw.js"
+  to = "/sw.js"
+  status = 200
+
 [[redirects]]
   from = "*/olm.wasm"
   to = "/olm.wasm"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.0.0",
+  "version": "4.2.2",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -24,7 +24,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@matrix-org/olm": "3.2.14",
+    "@matrix-org/olm": "3.2.15",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -48,12 +48,15 @@
     "formik": "2.4.6",
     "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.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "29.1.0",
+    "matrix-js-sdk": "34.8.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.29.0",
@@ -65,6 +68,7 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.13",
     "react-google-recaptcha": "2.1.0",
+    "react-i18next": "15.0.0",
     "react-modal": "3.16.1",
     "react-range": "1.8.14",
     "react-router-dom": "6.20.0",
@@ -102,6 +106,7 @@
     "sass": "1.56.2",
     "typescript": "4.9.4",
     "vite": "5.0.13",
+    "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.1"
   }

public/locales/de.json

@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " hat den Raum Name geändert"
+    }
+  }
+}

public/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " changed room name"
+    }
+  }
+}

src/app/components/BackRouteHandler.tsx

@@ -0,0 +1,86 @@
+import { ReactNode, useCallback } from 'react';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import {
+  getDirectPath,
+  getExplorePath,
+  getHomePath,
+  getInboxPath,
+  getSpacePath,
+} from '../pages/pathUtils';
+import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+
+type BackRouteHandlerProps = {
+  children: (onBack: () => void) => ReactNode;
+};
+export function BackRouteHandler({ children }: BackRouteHandlerProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const goBack = useCallback(() => {
+    if (
+      matchPath(
+        {
+          path: HOME_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getHomePath());
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: DIRECT_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getDirectPath());
+      return;
+    }
+    const spaceMatch = matchPath(
+      {
+        path: SPACE_PATH,
+        caseSensitive: true,
+        end: false,
+      },
+      location.pathname
+    );
+    if (spaceMatch?.params.spaceIdOrAlias) {
+      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: EXPLORE_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getExplorePath());
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: INBOX_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getInboxPath());
+    }
+  }, [navigate, location]);
+
+  return children(goBack);
+}

src/app/components/RenderMessageContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
 import {
   AudioContent,
   DownloadFile,
@@ -27,6 +28,7 @@ import { Image, MediaControl, Video } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
+import { testMatrixTo } from '../plugins/matrix-to';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -38,6 +40,7 @@ type RenderMessageContentProps = {
   urlPreview?: boolean;
   highlightRegex?: RegExp;
   htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
   outlineAttachment?: boolean;
 };
 export function RenderMessageContent({
@@ -50,8 +53,21 @@ export function RenderMessageContent({
   urlPreview,
   highlightRegex,
   htmlReactParserOptions,
+  linkifyOpts,
   outlineAttachment,
 }: RenderMessageContentProps) {
+  const renderUrlsPreview = (urls: string[]) => {
+    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
+    if (filteredUrls.length === 0) return undefined;
+    return (
+      <UrlPreviewHolder>
+        {filteredUrls.map((url) => (
+          <UrlPreviewCard key={url} url={url} ts={ts} />
+        ))}
+      </UrlPreviewHolder>
+    );
+  };
+
   const renderFile = () => (
     <MFile
       content={getContent()}
@@ -95,19 +111,10 @@ export function RenderMessageContent({
             {...props}
             highlightRegex={highlightRegex}
             htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
           />
         )}
-        renderUrlsPreview={
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-          urlPreview
-            ? (urls) => (
-                <UrlPreviewHolder>
-                  {urls.map((url) => (
-                    <UrlPreviewCard key={url} url={url} ts={ts} />
-                  ))}
-                </UrlPreviewHolder>
-              )
-            : undefined
-        }
       />
     );
   }
@@ -123,19 +130,10 @@ export function RenderMessageContent({
             {...props}
             highlightRegex={highlightRegex}
             htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
           />
         )}
-        renderUrlsPreview={
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-          urlPreview
-            ? (urls) => (
-                <UrlPreviewHolder>
-                  {urls.map((url) => (
-                    <UrlPreviewCard key={url} url={url} ts={ts} />
-                  ))}
-                </UrlPreviewHolder>
-              )
-            : undefined
-        }
       />
     );
   }
@@ -150,19 +148,10 @@ export function RenderMessageContent({
             {...props}
             highlightRegex={highlightRegex}
             htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
           />
         )}
-        renderUrlsPreview={
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-          urlPreview
-            ? (urls) => (
-                <UrlPreviewHolder>
-                  {urls.map((url) => (
-                    <UrlPreviewCard key={url} url={url} ts={ts} />
-                  ))}
-                </UrlPreviewHolder>
-              )
-            : undefined
-        }
       />
     );
   }

src/app/components/editor/Elements.tsx

@@ -13,6 +13,8 @@ import { CommandElement, EmoticonElement, LinkElement, MentionElement } from './
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getBeginCommand } from './utils';
 import { BlockType } from './types';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 // Put this at the start and end of an inline component to work around this Chromium bug:
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
@@ -76,6 +78,7 @@ function RenderEmoticonElement({
   children,
 }: { element: EmoticonElement } & RenderElementProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const selected = useSelected();
   const focused = useFocused();
 
@@ -90,7 +93,7 @@ function RenderEmoticonElement({
         {element.key.startsWith('mxc://') ? (
           <img
             className={css.EmoticonImg}
-            src={mx.mxcUrlToHttp(element.key) ?? element.key}
+            src={mxcUrlToHttp(mx, element.key, useAuthentication) ?? element.key}
             alt={element.shortcode}
           />
         ) : (

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

@@ -18,6 +18,8 @@ import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
 import { IEmoji, emojis } from '../../../plugins/emoji';
 import { ExtendedPackImage, PackUsage } from '../../../plugins/custom-emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
 
@@ -48,6 +50,7 @@ export function EmoticonAutocomplete({
   requestClose,
 }: EmoticonAutocompleteProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
 
   const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
   const recentEmoji = useRecentEmoji(mx, 20);
@@ -103,7 +106,7 @@ export function EmoticonAutocomplete({
                 <Box
                   shrink="No"
                   as="img"
-                  src={mx.mxcUrlToHttp(key) || key}
+                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
                   alt={emoticon.shortcode}
                   style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
                 />

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

@@ -17,6 +17,7 @@ import { mDirectAtom } from '../../../state/mDirectList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { factoryRoomIdByActivity } from '../../../utils/sort';
 import { RoomAvatar, RoomIcon } from '../../room-avatar';
+import { getViaServers } from '../../../plugins/via-servers';
 
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
@@ -104,10 +105,14 @@ export function RoomMentionAutocomplete({
   }, [query.text, search, resetSearch]);
 
   const handleAutocomplete: MentionAutoCompleteHandler = (roomAliasOrId, name) => {
+    const mentionRoom = mx.getRoom(roomAliasOrId);
+    const viaServers = mentionRoom ? getViaServers(mentionRoom) : undefined;
     const mentionEl = createMentionElement(
       roomAliasOrId,
       name.startsWith('#') ? name : `#${name}`,
-      roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId
+      roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId,
+      undefined,
+      viaServers
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);

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

@@ -18,6 +18,7 @@ import { useKeyDown } from '../../../hooks/useKeyDown';
 import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
 import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -84,6 +85,7 @@ export function UserMentionAutocomplete({
   requestClose,
 }: UserMentionAutocompleteProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const roomId: string = room.roomId!;
   const roomAliasOrId = room.getCanonicalAlias() || roomId;
   const members = useRoomMembers(mx, roomId);
@@ -143,7 +145,10 @@ export function UserMentionAutocomplete({
         />
       ) : (
         autoCompleteMembers.map((roomMember) => {
-          const avatarUrl = roomMember.getAvatarUrl(mx.baseUrl, 32, 32, 'crop', undefined, false);
+          const avatarMxcUrl = roomMember.getMxcAvatarUrl();
+          const avatarUrl = avatarMxcUrl
+            ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
+            : undefined;
           return (
             <MenuItem
               key={roomMember.userId}

src/app/components/editor/input.ts

@@ -18,8 +18,14 @@ import {
   ParagraphElement,
   UnorderedListElement,
 } from './slate';
-import { parseMatrixToUrl } from '../../utils/matrix';
 import { createEmoticonElement, createMentionElement } from './utils';
+import {
+  parseMatrixToRoom,
+  parseMatrixToRoomEvent,
+  parseMatrixToUser,
+  testMatrixTo,
+} from '../../plugins/matrix-to';
+import { tryDecodeURIComponent } from '../../utils/dom';
 
 const markNodeToType: Record<string, MarkType> = {
   b: MarkType.Bold,
@@ -68,11 +74,33 @@ const elementToInlineNode = (node: Element): MentionElement | EmoticonElement |
     return createEmoticonElement(src, alt || 'Unknown Emoji');
   }
   if (node.name === 'a') {
-    const { href } = node.attribs;
+    const href = tryDecodeURIComponent(node.attribs.href);
     if (typeof href !== 'string') return undefined;
-    const [mxId] = parseMatrixToUrl(href);
+    if (testMatrixTo(href)) {
-    if (mxId) {
+      const userMention = parseMatrixToUser(href);
-      return createMentionElement(mxId, parseNodeText(node) || mxId, false);
+      if (userMention) {
+        return createMentionElement(userMention, parseNodeText(node) || userMention, false);
+      }
+      const roomMention = parseMatrixToRoom(href);
+      if (roomMention) {
+        return createMentionElement(
+          roomMention.roomIdOrAlias,
+          parseNodeText(node) || roomMention.roomIdOrAlias,
+          false,
+          undefined,
+          roomMention.viaServers
+        );
+      }
+      const eventMention = parseMatrixToRoomEvent(href);
+      if (eventMention) {
+        return createMentionElement(
+          eventMention.roomIdOrAlias,
+          parseNodeText(node) || eventMention.roomIdOrAlias,
+          false,
+          eventMention.eventId,
+          eventMention.viaServers
+        );
+      }
     }
   }
   return undefined;

src/app/components/editor/output.ts

@@ -51,10 +51,19 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
     case BlockType.UnorderedList:
       return `<ul>${children}</ul>`;
 
-    case BlockType.Mention:
+    case BlockType.Mention: {
-      return `<a href="https://matrix.to/#/${encodeURIComponent(node.id)}">${sanitizeText(
+      let fragment = node.id;
-        node.name
+
-      )}</a>`;
+      if (node.eventId) {
+        fragment += `/${node.eventId}`;
+      }
+      if (node.viaServers && node.viaServers.length > 0) {
+        fragment += `?${node.viaServers.map((server) => `via=${server}`).join('&')}`;
+      }
+
+      const matrixTo = `https://matrix.to/#/${fragment}`;
+      return `<a href="${encodeURI(matrixTo)}">${sanitizeText(node.name)}</a>`;
+    }
     case BlockType.Emoticon:
       return node.key.startsWith('mxc://')
         ? `<img data-mx-emoticon src="${node.key}" alt="${sanitizeText(
@@ -62,7 +71,7 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
           )}" title="${sanitizeText(node.shortcode)}" height="32" />`
         : sanitizeText(node.key);
     case BlockType.Link:
-      return `<a href="${encodeURIComponent(node.href)}">${node.children}</a>`;
+      return `<a href="${encodeURI(node.href)}">${node.children}</a>`;
     case BlockType.Command:
       return `/${sanitizeText(node.command)}`;
     default:

src/app/components/editor/slate.d.ts

@@ -29,6 +29,8 @@ export type LinkElement = {
 export type MentionElement = {
   type: BlockType.Mention;
   id: string;
+  eventId?: string;
+  viaServers?: string[];
   highlight: boolean;
   name: string;
   children: Text[];

src/app/components/editor/utils.ts

@@ -158,10 +158,14 @@ export const resetEditorHistory = (editor: Editor) => {
 export const createMentionElement = (
   id: string,
   name: string,
-  highlight: boolean
+  highlight: boolean,
+  eventId?: string,
+  viaServers?: string[]
 ): MentionElement => ({
   type: BlockType.Mention,
   id,
+  eventId,
+  viaServers,
   highlight,
   name,
   children: [{ text: '' }],

src/app/components/emoji-board/EmojiBoard.tsx

@@ -42,13 +42,14 @@ import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
 import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
-import { isUserId } from '../../utils/matrix';
+import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
 import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
 import { mobileOrTablet } from '../../utils/user-agent';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -354,11 +355,13 @@ function ImagePackSidebarStack({
   packs,
   usage,
   onItemClick,
+  useAuthentication,
 }: {
   mx: MatrixClient;
   packs: ImagePack[];
   usage: PackUsage;
   onItemClick: (id: string) => void;
+  useAuthentication?: boolean;
 }) {
   const activeGroupId = useAtomValue(activeGroupIdAtom);
   return (
@@ -381,7 +384,7 @@ function ImagePackSidebarStack({
                 height: toRem(24),
                 objectFit: 'contain',
               }}
-              src={mx.mxcUrlToHttp(pack.getPackAvatarUrl(usage) ?? '') || pack.avatarUrl}
+              src={mxcUrlToHttp(mx, pack.getPackAvatarUrl(usage) ?? '', useAuthentication) || pack.avatarUrl}
               alt={label || 'Unknown Pack'}
             />
           </SidebarBtn>
@@ -453,12 +456,14 @@ export function SearchEmojiGroup({
   label,
   id,
   emojis: searchResult,
+  useAuthentication,
 }: {
   mx: MatrixClient;
   tab: EmojiBoardTab;
   label: string;
   id: string;
   emojis: Array<ExtendedPackImage | IEmoji>;
+  useAuthentication?: boolean;
 }) {
   return (
     <EmojiGroup key={id} id={id} label={label}>
@@ -486,7 +491,7 @@ export function SearchEmojiGroup({
                 loading="lazy"
                 className={css.CustomEmojiImg}
                 alt={emoji.body || emoji.shortcode}
-                  src={mx.mxcUrlToHttp(emoji.url) ?? emoji.url}
+                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
               />
             </EmojiItem>
           )
@@ -504,7 +509,7 @@ export function SearchEmojiGroup({
                 loading="lazy"
                 className={css.StickerImg}
                 alt={emoji.body || emoji.shortcode}
-                  src={mx.mxcUrlToHttp(emoji.url) ?? emoji.url}
+                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
               />
             </StickerItem>
           )
@@ -514,7 +519,7 @@ export function SearchEmojiGroup({
 }
 
 export const CustomEmojiGroups = memo(
-  ({ mx, groups }: { mx: MatrixClient; groups: ImagePack[] }) => (
+  ({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
     <>
       {groups.map((pack) => (
         <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
@@ -530,7 +535,7 @@ export const CustomEmojiGroups = memo(
                 loading="lazy"
                 className={css.CustomEmojiImg}
                 alt={image.body || image.shortcode}
-                src={mx.mxcUrlToHttp(image.url) ?? image.url}
+                src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
               />
             </EmojiItem>
           ))}
@@ -540,7 +545,7 @@ export const CustomEmojiGroups = memo(
   )
 );
 
-export const StickerGroups = memo(({ mx, groups }: { mx: MatrixClient; groups: ImagePack[] }) => (
+export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
   <>
     {groups.length === 0 && (
       <Box
@@ -573,7 +578,7 @@ export const StickerGroups = memo(({ mx, groups }: { mx: MatrixClient; groups: I
               loading="lazy"
               className={css.StickerImg}
               alt={image.body || image.shortcode}
-              src={mx.mxcUrlToHttp(image.url) ?? image.url}
+              src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
             />
           </StickerItem>
         ))}
@@ -645,6 +650,7 @@ export function EmojiBoard({
 
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const emojiGroupLabels = useEmojiGroupLabels();
   const emojiGroupIcons = useEmojiGroupIcons();
   const imagePacks = useRelevantImagePacks(mx, usage, imagePackRooms);
@@ -729,14 +735,14 @@ export function EmojiBoard({
       } else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
         const img = document.createElement('img');
         img.className = css.CustomEmojiImg;
-        img.setAttribute('src', mx.mxcUrlToHttp(emojiInfo.data) || emojiInfo.data);
+        img.setAttribute('src', mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data);
         img.setAttribute('alt', emojiInfo.shortcode);
         emojiPreviewRef.current.textContent = '';
         emojiPreviewRef.current.appendChild(img);
       }
       emojiPreviewTextRef.current.textContent = `:${emojiInfo.shortcode}:`;
     },
-    [mx]
+    [mx, useAuthentication]
   );
 
   const throttleEmojiHover = useThrottle(handleEmojiPreview, {
@@ -829,6 +835,7 @@ export function EmojiBoard({
                 usage={usage}
                 packs={imagePacks}
                 onItemClick={handleScrollToGroup}
+                useAuthentication={useAuthentication}
               />
             )}
             {emojiTab && (
@@ -890,13 +897,14 @@ export function EmojiBoard({
                   id={SEARCH_GROUP_ID}
                   label={result.items.length ? 'Search Results' : 'No Results found'}
                   emojis={result.items}
+                  useAuthentication={useAuthentication}
                 />
               )}
               {emojiTab && recentEmojis.length > 0 && (
                 <RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
               )}
-              {emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} />}
+              {emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
-              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} />}
+              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
               {emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
             </Box>
           </Scroll>

src/app/components/event-readers/EventReaders.tsx

@@ -21,6 +21,7 @@ import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { openProfileViewer } from '../../../client/action/navigation';
 import { UserAvatar } from '../user-avatar';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 export type EventReadersProps = {
   room: Room;
@@ -30,6 +31,7 @@ export type EventReadersProps = {
 export const EventReaders = as<'div', EventReadersProps>(
   ({ className, room, eventId, requestClose, ...props }, ref) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const latestEventReaders = useRoomEventReaders(room, eventId);
 
     const getName = (userId: string) =>
@@ -55,9 +57,10 @@ export const EventReaders = as<'div', EventReadersProps>(
             <Box className={css.Content} direction="Column">
               {latestEventReaders.map((readerId) => {
                 const name = getName(readerId);
-                const avatarUrl = room
+                const avatarMxcUrl = room
                   .getMember(readerId)
-                  ?.getAvatarUrl(mx.baseUrl, 100, 100, 'crop', undefined, false);
+                  ?.getMxcAvatarUrl();
+                const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
 
                 return (
                   <MenuItem

src/app/components/image-viewer/ImageViewer.tsx

@@ -6,6 +6,7 @@ import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
 import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
+import { downloadMedia } from '../../utils/matrix';
 
 export type ImageViewerProps = {
   alt: string;
@@ -18,8 +19,9 @@ export const ImageViewer = as<'div', ImageViewerProps>(
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
     const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
 
-    const handleDownload = () => {
+    const handleDownload = async () => {
-      FileSaver.saveAs(src, alt);
+      const fileContent = await downloadMedia(src);
+      FileSaver.saveAs(fileContent, alt);
     };
 
     return (

src/app/components/message/Reaction.tsx

@@ -5,7 +5,7 @@ import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
 import * as css from './Reaction.css';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../plugins/emoji';
 import { getMemberDisplayName } from '../../utils/room';
-import { eventWithShortcode, getMxIdLocalPart } from '../../utils/matrix';
+import { eventWithShortcode, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 
 export const Reaction = as<
   'button',
@@ -13,8 +13,9 @@ export const Reaction = as<
     mx: MatrixClient;
     count: number;
     reaction: string;
+    useAuthentication?: boolean;
   }
->(({ className, mx, count, reaction, ...props }, ref) => (
+>(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
   <Box
     as="button"
     className={classNames(css.Reaction, className)}
@@ -28,7 +29,8 @@ export const Reaction = as<
       {reaction.startsWith('mxc://') ? (
         <img
           className={css.ReactionImg}
-          src={mx.mxcUrlToHttp(reaction) ?? reaction}
+          src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction
+          }
           alt={reaction}
         />
       ) : (

src/app/components/message/RenderBody.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import parse, { HTMLReactParserOptions } from 'html-react-parser';
 import Linkify from 'linkify-react';
+import { Opts } from 'linkifyjs';
 import { MessageEmptyContent } from './content';
 import { sanitizeCustomHtml } from '../../utils/sanitize';
-import {
+import { highlightText, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
-  LINKIFY_OPTS,
-  highlightText,
-  scaleSystemEmoji,
-} from '../../plugins/react-custom-html-parser';
 
 type RenderBodyProps = {
   body: string;
@@ -15,12 +12,14 @@ type RenderBodyProps = {
 
   highlightRegex?: RegExp;
   htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
 };
 export function RenderBody({
   body,
   customBody,
   highlightRegex,
   htmlReactParserOptions,
+  linkifyOpts,
 }: RenderBodyProps) {
   if (body === '') <MessageEmptyContent />;
   if (customBody) {
@@ -28,7 +27,7 @@ export function RenderBody({
     return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
   }
   return (
-    <Linkify options={LINKIFY_OPTS}>
+    <Linkify options={linkifyOpts}>
       {highlightRegex
         ? highlightText(highlightRegex, scaleSystemEmoji(body))
         : scaleSystemEmoji(body)}

src/app/components/message/Reply.css.ts

@@ -5,6 +5,25 @@ export const ReplyBend = style({
   flexShrink: 0,
 });
 
+export const ThreadIndicator = style({
+  opacity: config.opacity.P300,
+  gap: toRem(2),
+
+  selectors: {
+    'button&': {
+      cursor: 'pointer',
+    },
+    ':hover&': {
+      opacity: config.opacity.P500,
+    },
+  },
+});
+
+export const ThreadIndicatorIcon = style({
+  width: toRem(14),
+  height: toRem(14),
+});
+
 export const Reply = style({
   marginBottom: toRem(1),
   minWidth: 0,

src/app/components/message/Reply.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
-import React, { ReactNode, useEffect, useMemo, useState } from 'react';
+import React, { MouseEventHandler, ReactNode, useEffect, useMemo, useState } from 'react';
 import to from 'await-to-js';
 import classNames from 'classnames';
 import colorMXID from '../../../util/colorMXID';
@@ -22,6 +22,7 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
     <Box
       className={classNames(css.Reply, className)}
       alignItems="Center"
+      alignSelf="Start"
       gap="100"
       {...props}
       ref={ref}
@@ -37,16 +38,26 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
   )
 );
 
+export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
+  <Box className={css.ThreadIndicator} alignItems="Center" alignSelf="Start" {...props} ref={ref}>
+    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
+    <Text size="T200">Threaded reply</Text>
+  </Box>
+));
+
 type ReplyProps = {
   mx: MatrixClient;
   room: Room;
-  timelineSet?: EventTimelineSet;
+  timelineSet?: EventTimelineSet | undefined;
-  eventId: string;
+  replyEventId: string;
+  threadRootId?: string | undefined;
+  onClick?: MouseEventHandler | undefined;
 };
 
-export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ...props }, ref) => {
+export const Reply = as<'div', ReplyProps>((_, ref) => {
+  const { mx, room, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
   const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
-    timelineSet?.findEventById(eventId)
+    timelineSet?.findEventById(replyEventId)
   );
   const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
 
@@ -62,7 +73,7 @@ export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ..
   useEffect(() => {
     let disposed = false;
     const loadEvent = async () => {
-      const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, eventId));
+      const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, replyEventId));
       const mEvent = new MatrixEvent(evt);
       if (disposed) return;
       if (err) {
@@ -78,13 +89,18 @@ export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ..
     return () => {
       disposed = true;
     };
-  }, [replyEvent, mx, room, eventId]);
+  }, [replyEvent, mx, room, replyEventId]);
 
   const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
   const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
   return (
+    <Box direction="Column" {...props} ref={ref}>
+      {threadRootId && (
+        <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
+      )}
       <ReplyLayout
+        as="button"
         userColor={sender ? colorMXID(sender) : undefined}
         username={
           sender && (
@@ -93,8 +109,8 @@ export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ..
             </Text>
           )
         }
-      {...props}
+        data-event-id={replyEventId}
-      ref={ref}
+        onClick={onClick}
       >
         {replyEvent !== undefined ? (
           <Text size="T300" truncate>
@@ -110,5 +126,6 @@ export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ..
           />
         )}
       </ReplyLayout>
+    </Box>
   );
 });

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

@@ -5,7 +5,6 @@ import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getFileSrcUrl } from './util';
 import { IAudioInfo } from '../../../../types/matrix/common';
 import {
   PlayTimeCallback,
@@ -17,6 +16,13 @@ import {
 } from '../../../hooks/media';
 import { useThrottle } from '../../../hooks/useThrottle';
 import { secondsToMinutesAndSeconds } from '../../../utils/common';
+import {
+  decryptFile,
+  downloadEncryptedMedia,
+  downloadMedia,
+  mxcUrlToHttp,
+} from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 const PLAY_TIME_THROTTLE_OPS = {
   wait: 500,
@@ -44,12 +50,16 @@ export function AudioContent({
   renderMediaControl,
 }: AudioContentProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
 
   const [srcState, loadSrc] = useAsyncCallback(
-    useCallback(
+    useCallback(async () => {
-      () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo),
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      [mx, url, mimeType, encInfo]
+      const fileContent = encInfo
-    )
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        : await downloadMedia(mediaUrl);
+      return URL.createObjectURL(fileContent);
+    }, [mx, url, useAuthentication, mimeType, encInfo])
   );
 
   const audioRef = useRef<HTMLAudioElement | null>(null);

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

@@ -20,7 +20,6 @@ import FocusTrap from 'focus-trap-react';
 import { IFileInfo } from '../../../../types/matrix/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getFileSrcUrl, getSrcFile } from './util';
 import { bytesToSize } from '../../../utils/common';
 import {
   READABLE_EXT_TO_MIME_TYPE,
@@ -30,6 +29,13 @@ import {
 } from '../../../utils/mimeTypes';
 import * as css from './style.css';
 import { stopPropagation } from '../../../utils/keyboard';
+import {
+  decryptFile,
+  downloadEncryptedMedia,
+  downloadMedia,
+  mxcUrlToHttp,
+} from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 const renderErrorButton = (retry: () => void, text: string) => (
   <TooltipProvider
@@ -75,21 +81,20 @@ type ReadTextFileProps = {
 };
 export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: ReadTextFileProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const [textViewer, setTextViewer] = useState(false);
 
-  const loadSrc = useCallback(
-    () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo),
-    [mx, url, mimeType, encInfo]
-  );
-
   const [textState, loadText] = useAsyncCallback(
     useCallback(async () => {
-      const src = await loadSrc();
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const blob = await getSrcFile(src);
+      const fileContent = encInfo
-      const text = blob.text();
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        : await downloadMedia(mediaUrl);
+
+      const text = fileContent.text();
       setTextViewer(true);
       return text;
-    }, [loadSrc])
+    }, [mx, useAuthentication, mimeType, encInfo, url])
   );
 
   return (
@@ -166,14 +171,18 @@ export type ReadPdfFileProps = {
 };
 export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: ReadPdfFileProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const [pdfViewer, setPdfViewer] = useState(false);
 
   const [pdfState, loadPdf] = useAsyncCallback(
     useCallback(async () => {
-      const httpUrl = await getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo);
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const fileContent = encInfo
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        : await downloadMedia(mediaUrl);
       setPdfViewer(true);
-      return httpUrl;
+      return URL.createObjectURL(fileContent);
-    }, [mx, url, mimeType, encInfo])
+    }, [mx, url, useAuthentication, mimeType, encInfo])
   );
 
   return (
@@ -240,13 +249,19 @@ export type DownloadFileProps = {
 };
 export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFileProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
-      const httpUrl = await getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo);
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      FileSaver.saveAs(httpUrl, body);
+      const fileContent = encInfo
-      return httpUrl;
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
-    }, [mx, url, mimeType, encInfo, body])
+        : await downloadMedia(mediaUrl);
+
+      const fileURL = URL.createObjectURL(fileContent);
+      FileSaver.saveAs(fileURL, body);
+      return fileURL;
+    }, [mx, url, useAuthentication, mimeType, encInfo, body])
   );
 
   return downloadState.status === AsyncStatus.Error ? (

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

@@ -22,11 +22,12 @@ import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/matrix/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getFileSrcUrl } from './util';
 import * as css from './style.css';
 import { bytesToSize } from '../../../utils/common';
 import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
 import { stopPropagation } from '../../../utils/keyboard';
+import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type RenderViewerProps = {
   src: string;
@@ -69,6 +70,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     ref
   ) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
 
     const [load, setLoad] = useState(false);
@@ -76,10 +78,16 @@ export const ImageContent = as<'div', ImageContentProps>(
     const [viewer, setViewer] = useState(false);
 
     const [srcState, loadSrc] = useAsyncCallback(
-      useCallback(
+      useCallback(async () => {
-        () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType || FALLBACK_MIMETYPE, encInfo),
+        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-        [mx, url, mimeType, encInfo]
+        if (encInfo) {
-      )
+          const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo)
+          );
+          return URL.createObjectURL(fileContent);
+        }
+        return mediaUrl;
+      }, [mx, url, useAuthentication, mimeType, encInfo])
     );
 
     const handleLoad = () => {

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

@@ -2,7 +2,9 @@ import { ReactNode, useCallback, useEffect } from 'react';
 import { IThumbnailContent } from '../../../../types/matrix/common';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getFileSrcUrl } from './util';
+import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
 
 export type ThumbnailContentProps = {
   info: IThumbnailContent;
@@ -10,20 +12,27 @@ export type ThumbnailContentProps = {
 };
 export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
 
   const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
-    useCallback(() => {
+    useCallback(async () => {
       const thumbInfo = info.thumbnail_info;
       const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
+      const encInfo = info.thumbnail_file;
       if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
         throw new Error('Failed to load thumbnail');
       }
-      return getFileSrcUrl(
+
-        mx.mxcUrlToHttp(thumbMxcUrl) ?? '',
+      const mediaUrl = mxcUrlToHttp(mx, thumbMxcUrl, useAuthentication) ?? thumbMxcUrl;
-        thumbInfo.mimetype,
+      if (encInfo) {
-        info.thumbnail_file
+        const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+          decryptFile(encBuf, thumbInfo.mimetype ?? FALLBACK_MIMETYPE, encInfo)
         );
-    }, [mx, info])
+        return URL.createObjectURL(fileContent);
+      }
+
+      return mediaUrl;
+    }, [mx, info, useAuthentication])
   );
 
   useEffect(() => {

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

@@ -22,9 +22,15 @@ import {
 import * as css from './style.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getFileSrcUrl } from './util';
 import { bytesToSize } from '../../../../util/common';
 import { millisecondsToMinutesAndSeconds } from '../../../utils/common';
+import {
+  decryptFile,
+  downloadEncryptedMedia,
+  downloadMedia,
+  mxcUrlToHttp,
+} from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type RenderVideoProps = {
   title: string;
@@ -61,16 +67,22 @@ export const VideoContent = as<'div', VideoContentProps>(
     ref
   ) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const blurHash = info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
 
     const [srcState, loadSrc] = useAsyncCallback(
-      useCallback(
+      useCallback(async () => {
-        () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo),
+        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-        [mx, url, mimeType, encInfo]
+        const fileContent = encInfo
+          ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+              decryptFile(encBuf, mimeType, encInfo)
             )
+          : await downloadMedia(mediaUrl);
+        return URL.createObjectURL(fileContent);
+      }, [mx, url, useAuthentication, mimeType, encInfo])
     );
 
     const handleLoad = () => {

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

@@ -1,23 +0,0 @@
-import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import { decryptFile } from '../../../utils/matrix';
-
-export const getFileSrcUrl = async (
-  httpUrl: string,
-  mimeType: string,
-  encInfo?: EncryptedAttachmentInfo
-): Promise<string> => {
-  if (encInfo) {
-    if (typeof httpUrl !== 'string') throw new Error('Malformed event');
-    const encRes = await fetch(httpUrl, { method: 'GET' });
-    const encData = await encRes.arrayBuffer();
-    const decryptedBlob = await decryptFile(encData, mimeType, encInfo);
-    return URL.createObjectURL(decryptedBlob);
-  }
-  return httpUrl;
-};
-
-export const getSrcFile = async (src: string): Promise<Blob> => {
-  const res = await fetch(src, { method: 'GET' });
-  const blob = await res.blob();
-  return blob;
-};

src/app/components/page/Page.tsx

@@ -87,15 +87,17 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
   />
 ));
 
-export const PageHeader = as<'div'>(({ className, ...props }, ref) => (
+export const PageHeader = as<'div', css.PageHeaderVariants>(
+  ({ className, balance, ...props }, ref) => (
     <Header
       as="header"
       size="600"
-    className={classNames(css.PageHeader, className)}
+      className={classNames(css.PageHeader({ balance }), className)}
       {...props}
       ref={ref}
     />
-));
+  )
+);
 
 export const PageContent = as<'div'>(({ className, ...props }, ref) => (
   <div className={classNames(css.PageContent, className)} {...props} ref={ref} />

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

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
 export const PageNav = style({
@@ -33,11 +34,21 @@ export const PageNavContent = style({
   paddingBottom: config.space.S700,
 });
 
-export const PageHeader = style({
+export const PageHeader = recipe({
+  base: {
     paddingLeft: config.space.S400,
     paddingRight: config.space.S200,
     borderBottomWidth: config.borderWidth.B300,
+  },
+  variants: {
+    balance: {
+      true: {
+        paddingLeft: config.space.S200,
+      },
+    },
+  },
 });
+export type PageHeaderVariants = RecipeVariants<typeof PageHeader>;
 
 export const PageContent = style([
   DefaultReset,

src/app/components/room-card/RoomCard.tsx

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import * as css from './style.css';
 import { RoomAvatar } from '../room-avatar';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { nameInitials } from '../../utils/common';
 import { millify } from '../../plugins/millify';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -32,6 +32,7 @@ import { useJoinedRoomId } from '../../hooks/useJoinedRoomId';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import { getRoomAvatarUrl, getStateEvent } from '../../utils/room';
 import { useStateEventCallback } from '../../hooks/useStateEventCallback';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 type GridColumnCount = '1' | '2' | '3';
 const getGridColumnCount = (gridWidth: number): GridColumnCount => {
@@ -138,6 +139,7 @@ type RoomCardProps = {
   topic?: string;
   memberCount?: number;
   roomType?: string;
+  viaServers?: string[];
   onView?: (roomId: string) => void;
   renderTopicViewer: (name: string, topic: string, requestClose: () => void) => ReactNode;
 };
@@ -152,6 +154,7 @@ export const RoomCard = as<'div', RoomCardProps>(
       topic,
       memberCount,
       roomType,
+      viaServers,
       onView,
       renderTopicViewer,
       ...props
@@ -159,6 +162,7 @@ export const RoomCard = as<'div', RoomCardProps>(
     ref
   ) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
     const joinedRoom = mx.getRoom(joinedRoomId);
     const [topicEvent, setTopicEvent] = useState(() =>
@@ -169,8 +173,8 @@ export const RoomCard = as<'div', RoomCardProps>(
     const fallbackTopic = roomIdOrAlias;
 
     const avatar = joinedRoom
-      ? getRoomAvatarUrl(mx, joinedRoom, 96)
+      ? getRoomAvatarUrl(mx, joinedRoom, 96, useAuthentication)
-      : avatarUrl && mx.mxcUrlToHttp(avatarUrl, 96, 96, 'crop');
+      : avatarUrl && mxcUrlToHttp(mx, avatarUrl, useAuthentication, 96, 96, 'crop');
 
     const roomName = joinedRoom?.name || name || fallbackName;
     const roomTopic =
@@ -194,7 +198,7 @@ export const RoomCard = as<'div', RoomCardProps>(
     );
 
     const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-      useCallback(() => mx.joinRoom(roomIdOrAlias), [mx, roomIdOrAlias])
+      useCallback(() => mx.joinRoom(roomIdOrAlias, { viaServers }), [mx, roomIdOrAlias, viaServers])
     );
     const joining =
       joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;

src/app/components/room-intro/RoomIntro.tsx

@@ -6,7 +6,7 @@ import { openInviteUser } from '../../../client/action/navigation';
 import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
 import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
@@ -14,6 +14,7 @@ import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { mDirectAtom } from '../../state/mDirectList';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 export type RoomIntroProps = {
   room: Room;
@@ -21,6 +22,7 @@ export type RoomIntroProps = {
 
 export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const { navigateRoom } = useRoomNavigate();
   const mDirects = useAtomValue(mDirectAtom);
 
@@ -28,7 +30,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
   const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
-  const avatarHttpUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc) : undefined;
+  const avatarHttpUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
 
   const createContent = createEvent?.getContent<IRoomCreateContent>();
   const ts = createEvent?.getTs();

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

@@ -9,12 +9,16 @@ import {
   useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
 import * as css from './UrlPreviewCard.css';
+import { tryDecodeURIComponent } from '../../utils/dom';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 const linkStyles = { color: color.Success.Main };
 
 export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
   ({ url, ts, ...props }, ref) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const [previewStatus, loadPreview] = useAsyncCallback(
       useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx])
     );
@@ -26,7 +30,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     if (previewStatus.status === AsyncStatus.Error) return null;
 
     const renderContent = (prev: IPreviewUrlResponse) => {
-      const imgUrl = mx.mxcUrlToHttp(prev['og:image'] || '', 256, 256, 'scale', false);
+      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication, 256, 256, 'scale', false);
 
       return (
         <>
@@ -43,7 +47,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
               priority="300"
             >
               {typeof prev['og:site_name'] === 'string' && `${prev['og:site_name']} | `}
-              {decodeURIComponent(url)}
+              {tryDecodeURIComponent(url)}
             </Text>
             <Text truncate priority="400">
               <b>{prev['og:title']}</b>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Scroll, Text, toRem } from 'folds';
+import { Box, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
 import { useAtomValue } from 'jotai';
 import { RoomCard } from '../../components/room-card';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
@@ -8,29 +8,49 @@ import { RoomSummaryLoader } from '../../components/RoomSummaryLoader';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../components/BackRouteHandler';
 
-type JoinBeforeNavigateProps = { roomIdOrAlias: string };
+type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
-export function JoinBeforeNavigate({ roomIdOrAlias }: JoinBeforeNavigateProps) {
+export function JoinBeforeNavigate({
+  roomIdOrAlias,
+  eventId,
+  viaServers,
+}: JoinBeforeNavigateProps) {
   const mx = useMatrixClient();
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const screenSize = useScreenSizeContext();
 
   const handleView = (roomId: string) => {
     if (mx.getRoom(roomId)?.isSpaceRoom()) {
       navigateSpace(roomId);
       return;
     }
-    navigateRoom(roomId);
+    navigateRoom(roomId, eventId);
   };
 
   return (
     <Page>
-      <PageHeader>
+      <PageHeader balance>
+        <Box grow="Yes" gap="200">
+          <Box shrink="No">
+            {screenSize === ScreenSize.Mobile && (
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            )}
+          </Box>
           <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
             <Text size="H3" truncate>
               {roomIdOrAlias}
             </Text>
           </Box>
+        </Box>
       </PageHeader>
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover" size="0">
@@ -46,6 +66,7 @@ export function JoinBeforeNavigate({ roomIdOrAlias }: JoinBeforeNavigateProps) {
                   topic={summary?.topic}
                   memberCount={summary?.num_joined_members}
                   roomType={summary?.room_type}
+                  viaServers={viaServers}
                   renderTopicViewer={(name, topic, requestClose) => (
                     <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
                   )}

src/app/features/lobby/LobbyHeader.tsx

@@ -31,6 +31,10 @@ import { IPowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
 import { stopPropagation } from '../../utils/keyboard';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 type LobbyMenuProps = {
   roomId: string;
@@ -120,21 +124,44 @@ type LobbyHeaderProps = {
 };
 export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const space = useSpace();
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+  const screenSize = useScreenSizeContext();
 
   const name = useRoomName(space);
   const avatarMxc = useRoomAvatar(space);
-  const avatarUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc, 96, 96, 'crop') ?? undefined : undefined;
+  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
   return (
-    <PageHeader className={showProfile ? undefined : css.Header}>
+    <PageHeader className={showProfile ? undefined : css.Header} balance>
       <Box grow="Yes" alignItems="Center" gap="200">
+        {screenSize === ScreenSize.Mobile ? (
+          <>
+            <Box shrink="No">
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            </Box>
+            <Box grow="Yes" justifyContent="Center">
+              {showProfile && (
+                <Text size="H3" truncate>
+                  {name}
+                </Text>
+              )}
+            </Box>
+          </>
+        ) : (
+          <>
             <Box grow="Yes" basis="No" />
             <Box justifyContent="Center" alignItems="Center" gap="300">
               {showProfile && (
@@ -153,7 +180,15 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 </>
               )}
             </Box>
-        <Box shrink="No" grow="Yes" basis="No" justifyContent="End">
+          </>
+        )}
+        <Box
+          shrink="No"
+          grow={screenSize === ScreenSize.Mobile ? 'No' : 'Yes'}
+          basis={screenSize === ScreenSize.Mobile ? 'Yes' : 'No'}
+          justifyContent="End"
+        >
+          {screenSize !== ScreenSize.Mobile && (
             <TooltipProvider
               position="Bottom"
               offset={4}
@@ -169,6 +204,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 </IconButton>
               )}
             </TooltipProvider>
+          )}
           <TooltipProvider
             position="Bottom"
             align="End"

src/app/features/lobby/LobbyHero.tsx

@@ -11,15 +11,18 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import * as css from './LobbyHero.css';
 import { PageHero } from '../../components/page';
 import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 export function LobbyHero() {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const space = useSpace();
 
   const name = useRoomName(space);
   const topic = useRoomTopic(space);
   const avatarMxc = useRoomAvatar(space);
-  const avatarUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc, 96, 96, 'crop') ?? undefined : undefined;
+  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
 
   return (
     <PageHero

src/app/features/lobby/RoomItem.tsx

@@ -39,6 +39,8 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { ErrorCode } from '../../cs-errorcode';
 import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { ItemDraggableTarget, useDraggableItem } from './DnD';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 type RoomJoinButtonProps = {
   roomId: string;
@@ -334,6 +336,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
     ref
   ) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
     const room = getRoom(roomId);
     const targetRef = useRef<HTMLDivElement>(null);
@@ -364,7 +367,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                   name={localSummary.name}
                   topic={localSummary.topic}
                   avatarUrl={
-                    dm ? getDirectRoomAvatarUrl(mx, room, 96) : getRoomAvatarUrl(mx, room, 96)
+                    dm ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication)
                   }
                   memberCount={localSummary.memberCount}
                   suggested={content.suggested}
@@ -418,7 +421,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                         topic={summaryState.data.topic}
                         avatarUrl={
                           summaryState.data?.avatar_url
-                            ? mx.mxcUrlToHttp(summaryState.data.avatar_url, 96, 96, 'crop') ??
+                            ? mxcUrlToHttp(mx, summaryState.data.avatar_url, useAuthentication, 96, 96, 'crop') ??
                             undefined
                             : undefined
                         }

src/app/features/lobby/SpaceItem.tsx

@@ -35,6 +35,8 @@ import { ErrorCode } from '../../cs-errorcode';
 import { useDraggableItem } from './DnD';
 import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/navigation';
 import { stopPropagation } from '../../utils/keyboard';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function SpaceProfileLoading() {
   return (
@@ -408,6 +410,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
     ref
   ) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
     const space = getRoom(roomId);
     const targetRef = useRef<HTMLDivElement>(null);
@@ -432,7 +435,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
                     <SpaceProfile
                       roomId={roomId}
                       name={localSummary.name}
-                      avatarUrl={getRoomAvatarUrl(mx, space, 96)}
+                      avatarUrl={getRoomAvatarUrl(mx, space, 96, useAuthentication)}
                       suggested={content.suggested}
                       closed={closed}
                       categoryId={categoryId}
@@ -469,7 +472,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
                         name={summaryState.data.name || summaryState.data.canonical_alias || roomId}
                         avatarUrl={
                           summaryState.data?.avatar_url
-                            ? mx.mxcUrlToHttp(summaryState.data.avatar_url, 96, 96, 'crop') ??
+                            ? mxcUrlToHttp(mx, summaryState.data.avatar_url, useAuthentication, 96, 96, 'crop') ??
                             undefined
                             : undefined
                         }

src/app/features/message-search/SearchResultGroup.tsx

@@ -3,13 +3,17 @@ import React, { MouseEventHandler, useMemo } from 'react';
 import { IEventWithRoomId, JoinRule, RelationType, Room } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds';
+import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import {
+  factoryRenderLinkifyWithMention,
   getReactCustomHtmlParser,
+  LINKIFY_OPTS,
   makeHighlightRegex,
+  makeMentionCustomProps,
+  renderMatrixMention,
 } from '../../plugins/react-custom-html-parser';
-import { getMxIdLocalPart, isRoomId, isUserId } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-import { openJoinAlias, openProfileViewer } from '../../../client/action/navigation';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
 import {
@@ -31,8 +35,10 @@ import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../.
 import colorMXID from '../../../util/colorMXID';
 import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { UserAvatar } from '../../components/user-avatar';
+import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -51,38 +57,31 @@ export function SearchResultGroup({
   onOpen,
 }: SearchResultGroupProps) {
   const mx = useMatrixClient();
-  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
 
+  const mentionClickHandler = useMentionClickHandler(room.roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
+
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+      ),
+    }),
+    [mx, room, mentionClickHandler]
+  );
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
-      getReactCustomHtmlParser(mx, room, {
+      getReactCustomHtmlParser(mx, room.roomId, {
+        linkifyOpts,
         highlightRegex,
-        handleSpoilerClick: (evt) => {
+        useAuthentication,
-          const target = evt.currentTarget;
+        handleSpoilerClick: spoilerClickHandler,
-          if (target.getAttribute('aria-pressed') === 'true') {
+        handleMentionClick: mentionClickHandler,
-            evt.stopPropagation();
-            target.setAttribute('aria-pressed', 'false');
-            target.style.cursor = 'initial';
-          }
-        },
-        handleMentionClick: (evt) => {
-          const target = evt.currentTarget;
-          const mentionId = target.getAttribute('data-mention-id');
-          if (typeof mentionId !== 'string') return;
-          if (isUserId(mentionId)) {
-            openProfileViewer(mentionId, room.roomId);
-            return;
-          }
-          if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
-            if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
-            else navigateRoom(mentionId);
-            return;
-          }
-          openJoinAlias(mentionId);
-        },
       }),
-    [mx, room, highlightRegex, navigateRoom, navigateSpace]
+    [mx, room, linkifyOpts, highlightRegex, mentionClickHandler, spoilerClickHandler, useAuthentication]
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
@@ -101,6 +100,7 @@ export function SearchResultGroup({
             mediaAutoLoad={mediaAutoLoad}
             urlPreview={urlPreview}
             htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
             highlightRegex={highlightRegex}
             outlineAttachment
           />
@@ -151,7 +151,7 @@ export function SearchResultGroup({
     }
   );
 
-  const handleOpenClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+  const handleOpenClick: MouseEventHandler = (evt) => {
     const eventId = evt.currentTarget.getAttribute('data-event-id');
     if (!eventId) return;
     onOpen(room.roomId, eventId);
@@ -164,7 +164,7 @@ export function SearchResultGroup({
           <Avatar size="200" radii="300">
             <RoomAvatar
               roomId={room.roomId}
-              src={getRoomAvatarUrl(mx, room, 96)}
+              src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
               alt={room.name}
               renderFallback={() => (
                 <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
@@ -186,15 +186,16 @@ export function SearchResultGroup({
             event.sender;
           const senderAvatarMxc = getMemberAvatarMxc(room, event.sender);
 
+          const relation = event.content['m.relates_to'];
           const mainEventId =
-            event.content['m.relates_to']?.rel_type === RelationType.Replace
+            relation?.rel_type === RelationType.Replace ? relation.event_id : event.event_id;
-              ? event.content['m.relates_to'].event_id
-              : event.event_id;
 
           const getContent = (() =>
             event.content['m.new_content'] ?? event.content) as GetContentCallback;
 
-          const replyEventId = event.content['m.relates_to']?.['m.in_reply_to']?.event_id;
+          const replyEventId = relation?.['m.in_reply_to']?.event_id;
+          const threadRootId =
+            relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
           return (
             <SequenceCard
@@ -211,7 +212,7 @@ export function SearchResultGroup({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -243,11 +244,10 @@ export function SearchResultGroup({
                 </Box>
                 {replyEventId && (
                   <Reply
-                    as="button"
                     mx={mx}
                     room={room}
-                    eventId={replyEventId}
+                    replyEventId={replyEventId}
-                    data-event-id={replyEventId}
+                    threadRootId={threadRootId}
                     onClick={handleOpenClick}
                   />
                 )}

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

@@ -28,25 +28,25 @@ import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { usePowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
-import { getOriginBaseUrl, withOriginBaseUrl } from '../../pages/pathUtils';
 import { markAsRead } from '../../../client/action/notifications';
 import { openInviteUser, toggleRoomSettings } from '../../../client/action/navigation';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
-import { useClientConfig } from '../../hooks/useClientConfig';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { stopPropagation } from '../../utils/keyboard';
+import { getMatrixToRoom } from '../../plugins/matrix-to';
+import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
+import { getViaServers } from '../../plugins/via-servers';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 type RoomNavItemMenuProps = {
   room: Room;
-  linkPath: string;
   requestClose: () => void;
 };
 const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
-  ({ room, linkPath, requestClose }, ref) => {
+  ({ room, requestClose }, ref) => {
     const mx = useMatrixClient();
-    const { hashRouter } = useClientConfig();
     const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
     const powerLevels = usePowerLevels(room);
     const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@@ -63,7 +63,9 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     };
 
     const handleCopyLink = () => {
-      copyToClipboard(withOriginBaseUrl(getOriginBaseUrl(hashRouter), linkPath));
+      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
+      const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
+      copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
       requestClose();
     };
 
@@ -174,6 +176,7 @@ export function RoomNavItem({
   linkPath,
 }: RoomNavItemProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const [hover, setHover] = useState(false);
   const { hoverProps } = useHover({ onHoverChange: setHover });
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
@@ -216,7 +219,7 @@ export function RoomNavItem({
                 <RoomAvatar
                   roomId={room.roomId}
                   src={
-                    direct ? getDirectRoomAvatarUrl(mx, room, 96) : getRoomAvatarUrl(mx, room, 96)
+                    direct ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication)
                   }
                   alt={room.name}
                   renderFallback={() => (
@@ -273,11 +276,7 @@ export function RoomNavItem({
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <RoomNavItemMenu
+                <RoomNavItemMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-                  room={room}
-                  linkPath={linkPath}
-                  requestClose={() => setMenuAnchor(undefined)}
-                />
               </FocusTrap>
             }
           >

src/app/features/room/MembersDrawer.tsx

@@ -55,6 +55,7 @@ import { ScrollTopContainer } from '../../components/scroll-top-container';
 import { UserAvatar } from '../../components/user-avatar';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { stopPropagation } from '../../utils/keyboard';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 export const MembershipFilters = {
   filterJoined: (m: RoomMember) => m.membership === Membership.Join,
@@ -171,6 +172,7 @@ type MembersDrawerProps = {
 };
 export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
@@ -426,8 +428,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         }}
                         after={<Icon size="50" src={Icons.Cross} />}
                       >
-                        <Text size="B300">{`${result.items.length || 'No'} ${
+                        <Text size="B300">{`${result.items.length || 'No'} ${result.items.length === 1 ? 'Result' : 'Results'
-                          result.items.length === 1 ? 'Result' : 'Results'
                           }`}</Text>
                       </Chip>
                     )
@@ -483,14 +484,16 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
                   const member = tagOrMember;
                   const name = getName(member);
-                  const avatarUrl = member.getAvatarUrl(
+                  const avatarMxcUrl = member.getMxcAvatarUrl();
-                    mx.baseUrl,
+                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
+                    avatarMxcUrl,
                     100,
                     100,
                     'crop',
                     undefined,
-                    false
+                    false,
-                  );
+                    useAuthentication
+                  ) : undefined;
 
                   return (
                     <MenuItem

src/app/features/room/RoomInput.tsx

@@ -10,7 +10,7 @@ import React, {
 } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
-import { EventType, IContent, MsgType, Room } from 'matrix-js-sdk';
+import { EventType, IContent, MsgType, RelationType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { Transforms, Editor } from 'slate';
 import {
@@ -56,7 +56,7 @@ import {
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import { TUploadContent, encryptFile, getImageInfo, getMxIdLocalPart } from '../../utils/matrix';
+import { TUploadContent, encryptFile, getImageInfo, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
 import { useFilePicker } from '../../hooks/useFilePicker';
 import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
@@ -106,8 +106,9 @@ import { CommandAutocomplete } from './CommandAutocomplete';
 import { Command, SHRUG, useCommands } from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
-import { ReplyLayout } from '../../components/message';
+import { ReplyLayout, ThreadIndicator } from '../../components/message';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 interface RoomInputProps {
   editor: Editor;
@@ -118,6 +119,7 @@ interface RoomInputProps {
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
   ({ editor, fileDropContainerRef, roomId, room }, ref) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const commands = useCommands(mx, room);
@@ -186,9 +188,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       Transforms.insertFragment(editor, msgDraft);
     }, [editor, msgDraft]);
 
-    useEffect(() => {
+    useEffect(
-      if (!mobileOrTablet()) ReactEditor.focus(editor);
+      () => () => {
-      return () => {
         if (!isEmptyEditor(editor)) {
           const parsedDraft = JSON.parse(JSON.stringify(editor.children));
           setMsgDraft(parsedDraft);
@@ -197,8 +198,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         }
         resetEditor(editor);
         resetEditorHistory(editor);
-      };
+      },
-    }, [roomId, editor, setMsgDraft]);
+      [roomId, editor, setMsgDraft]
+    );
 
     const handleRemoveUpload = useCallback(
       (upload: TUploadContent | TUploadContent[]) => {
@@ -310,6 +312,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             event_id: replyDraft.eventId,
           },
         };
+        if (replyDraft.relation?.rel_type === RelationType.Thread) {
+          content['m.relates_to'].event_id = replyDraft.relation.event_id;
+          content['m.relates_to'].rel_type = RelationType.Thread;
+          content['m.relates_to'].is_falling_back = false;
+        }
       }
       mx.sendMessage(roomId, content);
       resetEditor(editor);
@@ -361,7 +368,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     };
 
     const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
-      const stickerUrl = mx.mxcUrlToHttp(mxc);
+      const stickerUrl = mxcUrlToHttp(mx, mxc, useAuthentication);
       if (!stickerUrl) return;
 
       const info = await getImageInfo(
@@ -489,6 +496,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
+                  <Box direction="Column">
+                    {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
                       userColor={colorMXID(replyDraft.userId)}
                       username={
@@ -506,6 +515,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       </Text>
                     </ReplyLayout>
                   </Box>
+                </Box>
               </div>
             )
           }

src/app/features/room/RoomTimeline.tsx

@@ -16,7 +16,7 @@ import {
   EventTimeline,
   EventTimelineSet,
   EventTimelineSetHandlerMap,
-  IEncryptedFile,
+  IContent,
   MatrixClient,
   MatrixEvent,
   Room,
@@ -45,14 +45,9 @@ import {
   toRem,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
-import {
+import { Opts as LinkifyOpts } from 'linkifyjs';
-  decryptFile,
+import { useTranslation } from 'react-i18next';
-  eventWithShortcode,
+import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../utils/matrix';
-  factoryEventSentBy,
-  getMxIdLocalPart,
-  isRoomId,
-  isUserId,
-} from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
 import { useAlive } from '../../hooks/useAlive';
@@ -70,7 +65,13 @@ import {
   ImageContent,
   EventContent,
 } from '../../components/message';
-import { getReactCustomHtmlParser } from '../../plugins/react-custom-html-parser';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../plugins/react-custom-html-parser';
 import {
   canEditEvent,
   decryptAllTimelineEvent,
@@ -85,7 +86,7 @@ import {
 } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { openJoinAlias, openProfileViewer } from '../../../client/action/navigation';
+import { openProfileViewer } from '../../../client/action/navigation';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
 import { Reactions, Message, Event, EncryptedContent } from './message';
 import { useMemberEventParser } from '../../hooks/useMemberEventParser';
@@ -109,10 +110,13 @@ import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
 import { Image } from '../../components/media';
 import { ImageViewer } from '../../components/image-viewer';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -210,18 +214,6 @@ export const getEventIdAbsoluteIndex = (
   return baseIndex + eventIndex;
 };
 
-export const factoryGetFileSrcUrl =
-  (httpUrl: string, mimeType: string, encFile?: IEncryptedFile) => async (): Promise<string> => {
-    if (encFile) {
-      if (typeof httpUrl !== 'string') throw new Error('Malformed event');
-      const encRes = await fetch(httpUrl, { method: 'GET' });
-      const encData = await encRes.arrayBuffer();
-      const decryptedBlob = await decryptFile(encData, mimeType, encFile);
-      return URL.createObjectURL(decryptedBlob);
-    }
-    return httpUrl;
-  };
-
 type RoomTimelineProps = {
   room: Room;
   eventId?: string;
@@ -428,6 +420,7 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
 
 export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const encryptedRoom = mx.isRoomEncrypted(room.roomId);
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
@@ -445,9 +438,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const canRedact = canDoAction('redact', myPowerLevel);
   const canSendReaction = canSendEvent(MessageEvent.Reaction, myPowerLevel);
   const [editId, setEditId] = useState<string>();
-  const { navigateRoom, navigateSpace } = useRoomNavigate();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+  const { navigateRoom } = useRoomNavigate();
+  const mentionClickHandler = useMentionClickHandler(room.roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
 
   const imagePackRooms: Room[] = useMemo(() => {
     const allParentSpaces = [room.roomId].concat(
@@ -487,34 +482,24 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   >();
   const alive = useAlive();
 
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+      ),
+    }),
+    [mx, room, mentionClickHandler]
+  );
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
-      getReactCustomHtmlParser(mx, room, {
+      getReactCustomHtmlParser(mx, room.roomId, {
-        handleSpoilerClick: (evt) => {
+        linkifyOpts,
-          const target = evt.currentTarget;
+        useAuthentication,
-          if (target.getAttribute('aria-pressed') === 'true') {
+        handleSpoilerClick: spoilerClickHandler,
-            evt.stopPropagation();
+        handleMentionClick: mentionClickHandler,
-            target.setAttribute('aria-pressed', 'false');
-            target.style.cursor = 'initial';
-          }
-        },
-        handleMentionClick: (evt) => {
-          const target = evt.currentTarget;
-          const mentionId = target.getAttribute('data-mention-id');
-          if (typeof mentionId !== 'string') return;
-          if (isUserId(mentionId)) {
-            openProfileViewer(mentionId, room.roomId);
-            return;
-          }
-          if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
-            if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
-            else navigateRoom(mentionId);
-            return;
-          }
-          openJoinAlias(mentionId);
-        },
       }),
-    [mx, room, navigateRoom, navigateSpace]
+    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication]
   );
   const parseMemberEvent = useMemberEventParser();
 
@@ -597,7 +582,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         // so timeline can be updated with evt like: edits, reactions etc
         if (atBottomRef.current) {
           if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
-            requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()));
+            requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!));
           }
 
           if (document.hasFocus()) {
@@ -726,6 +711,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           const editableEvtId = editableEvt?.getId();
           if (!editableEvtId) return;
           setEditId(editableEvtId);
+          evt.preventDefault();
         }
       },
       [mx, room, editor]
@@ -819,6 +805,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   }, [scrollToElement, editId]);
 
   const handleJumpToLatest = () => {
+    if (eventId) {
+      navigateRoom(room.roomId, undefined, { replace: true });
+    }
     setTimeline(getInitialTimeline(room));
     scrollToBottomRef.current.count += 1;
     scrollToBottomRef.current.smooth = false;
@@ -835,13 +824,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     markAsRead(mx, room.roomId);
   };
 
-  const handleOpenReply: MouseEventHandler<HTMLButtonElement> = useCallback(
+  const handleOpenReply: MouseEventHandler = useCallback(
     async (evt) => {
-      const replyId = evt.currentTarget.getAttribute('data-reply-id');
+      const targetId = evt.currentTarget.getAttribute('data-event-id');
-      if (typeof replyId !== 'string') return;
+      if (!targetId) return;
-      const replyTimeline = getEventTimeline(room, replyId);
+      const replyTimeline = getEventTimeline(room, targetId);
       const absoluteIndex =
-        replyTimeline && getEventIdAbsoluteIndex(timeline.linkedTimelines, replyTimeline, replyId);
+        replyTimeline && getEventIdAbsoluteIndex(timeline.linkedTimelines, replyTimeline, targetId);
 
       if (typeof absoluteIndex === 'number') {
         scrollToItem(absoluteIndex, {
@@ -856,7 +845,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         });
       } else {
         setTimeline(getEmptyTimeline());
-        loadEventTimeline(replyId);
+        loadEventTimeline(targetId);
       }
     },
     [room, timeline, scrollToItem, loadEventTimeline]
@@ -907,8 +896,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const replyEvt = room.findEventById(replyId);
       if (!replyEvt) return;
       const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
-      const { body, formatted_body: formattedBody }: Record<string, string> =
+      const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
-        editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
+      const { body, formatted_body: formattedBody } = content;
+      const { 'm.relates_to': relation } = replyEvt.getOriginalContent();
       const senderId = replyEvt.getSender();
       if (senderId && typeof body === 'string') {
         setReplyDraft({
@@ -916,6 +906,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           eventId: replyId,
           body,
           formattedBody,
+          relation,
         });
         setTimeout(() => ReactEditor.focus(editor), 100);
       }
@@ -957,6 +948,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     },
     [editor]
   );
+  const { t } = useTranslation();
 
   const renderMatrixEvent = useMatrixEventRenderer<
     [string, MatrixEvent, number, EventTimelineSet, boolean]
@@ -966,7 +958,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const reactionRelations = getEventReactions(timelineSet, mEventId);
         const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
         const hasReactions = reactions && reactions.length > 0;
-        const { replyEventId } = mEvent;
+        const { replyEventId, threadRootId } = mEvent;
         const highlighted = focusItem?.index === item && focusItem.highlight;
 
         const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
@@ -1001,12 +993,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             reply={
               replyEventId && (
                 <Reply
-                  as="button"
                   mx={mx}
                   room={room}
                   timelineSet={timelineSet}
-                  eventId={replyEventId}
+                  replyEventId={replyEventId}
-                  data-reply-id={replyEventId}
+                  threadRootId={threadRootId}
                   onClick={handleOpenReply}
                 />
               )
@@ -1036,6 +1027,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 mediaAutoLoad={mediaAutoLoad}
                 urlPreview={showUrlPreview}
                 htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
                 outlineAttachment={messageLayout === 2}
               />
             )}
@@ -1046,7 +1038,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const reactionRelations = getEventReactions(timelineSet, mEventId);
         const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
         const hasReactions = reactions && reactions.length > 0;
-        const { replyEventId } = mEvent;
+        const { replyEventId, threadRootId } = mEvent;
         const highlighted = focusItem?.index === item && focusItem.highlight;
 
         return (
@@ -1073,12 +1065,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             reply={
               replyEventId && (
                 <Reply
-                  as="button"
                   mx={mx}
                   room={room}
                   timelineSet={timelineSet}
-                  eventId={replyEventId}
+                  replyEventId={replyEventId}
-                  data-reply-id={replyEventId}
+                  threadRootId={threadRootId}
                   onClick={handleOpenReply}
                 />
               )
@@ -1132,6 +1123,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                       mediaAutoLoad={mediaAutoLoad}
                       urlPreview={showUrlPreview}
                       htmlReactParserOptions={htmlReactParserOptions}
+                      linkifyOpts={linkifyOpts}
                       outlineAttachment={messageLayout === 2}
                     />
                   );
@@ -1270,7 +1262,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 <Box grow="Yes" direction="Column">
                   <Text size="T300" priority="300">
                     <b>{senderName}</b>
-                    {' changed room name'}
+                    {t('Organisms.RoomCommon.changed_room_name')}
                   </Text>
                 </Box>
               }

src/app/features/room/RoomTombstone.tsx

@@ -3,11 +3,11 @@ import { Box, Button, Spinner, Text, color } from 'folds';
 
 import * as css from './RoomTombstone.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { genRoomVia } from '../../../util/matrixUtil';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { Membership } from '../../../types/matrix/room';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { getViaServers } from '../../plugins/via-servers';
 
 type RoomTombstoneProps = { roomId: string; body?: string; replacementRoomId: string };
 export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstoneProps) {
@@ -17,7 +17,7 @@ export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstone
   const [joinState, handleJoin] = useAsyncCallback(
     useCallback(() => {
       const currentRoom = mx.getRoom(roomId);
-      const via = currentRoom ? genRoomVia(currentRoom) : [];
+      const via = currentRoom ? getViaServers(currentRoom) : [];
       return mx.joinRoom(replacementRoomId, {
         viaServers: via,
       });

src/app/features/room/RoomView.tsx

@@ -25,6 +25,7 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   if (evt.metaKey || evt.altKey || evt.ctrlKey) {
     return false;
   }
+
   // do not focus on F keys
   if (/^F\d+$/.test(code)) return false;
 
@@ -36,6 +37,9 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
     code.startsWith('Alt') ||
     code.startsWith('Control') ||
     code.startsWith('Arrow') ||
+    code.startsWith('Page') ||
+    code.startsWith('End') ||
+    code.startsWith('Home') ||
     code === 'Tab' ||
     code === 'Space' ||
     code === 'Enter' ||

src/app/features/room/RoomViewHeader.tsx

@@ -20,7 +20,7 @@ import {
   PopOut,
   RectCords,
 } from 'folds';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
@@ -35,15 +35,8 @@ import { useRoom } from '../../hooks/useRoom';
 import { useSetSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
-import {
+import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
-  getHomeSearchPath,
+import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
-  getOriginBaseUrl,
-  getSpaceSearchPath,
-  joinPathComponent,
-  withOriginBaseUrl,
-  withSearchParam,
-} from '../../pages/pathUtils';
-import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
 import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
 import { useRoomUnread } from '../../state/hooks/unread';
@@ -55,19 +48,19 @@ import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { mDirectAtom } from '../../state/mDirectList';
-import { useClientConfig } from '../../hooks/useClientConfig';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
+import { getMatrixToRoom } from '../../plugins/matrix-to';
+import { getViaServers } from '../../plugins/via-servers';
+import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 type RoomMenuProps = {
   room: Room;
-  linkPath: string;
   requestClose: () => void;
 };
-const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
+const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
-  ({ room, linkPath, requestClose }, ref) => {
   const mx = useMatrixClient();
-    const { hashRouter } = useClientConfig();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const powerLevels = usePowerLevelsContext();
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@@ -84,7 +77,9 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
   };
 
   const handleCopyLink = () => {
-      copyToClipboard(withOriginBaseUrl(getOriginBaseUrl(hashRouter), linkPath));
+    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
+    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
+    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
     requestClose();
   };
 
@@ -175,12 +170,12 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
       </Box>
     </Menu>
   );
-  }
+});
-);
 
 export function RoomViewHeader() {
   const navigate = useNavigate();
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const screenSize = useScreenSizeContext();
   const room = useRoom();
   const space = useSpaceOptionally();
@@ -192,11 +187,9 @@ export function RoomViewHeader() {
   const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
-  const avatarUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc, 96, 96, 'crop') ?? undefined : undefined;
+  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
 
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
-  const location = useLocation();
-  const currentPath = joinPathComponent(location);
 
   const handleSearchClick = () => {
     const searchParams: _SearchPathSearchParams = {
@@ -213,19 +206,36 @@ export function RoomViewHeader() {
   };
 
   return (
-    <PageHeader>
+    <PageHeader balance={screenSize === ScreenSize.Mobile}>
       <Box grow="Yes" gap="300">
+        {screenSize === ScreenSize.Mobile && (
+          <BackRouteHandler>
+            {(onBack) => (
+              <Box shrink="No" alignItems="Center">
+                <IconButton onClick={onBack}>
+                  <Icon src={Icons.ArrowLeft} />
+                </IconButton>
+              </Box>
+            )}
+          </BackRouteHandler>
+        )}
         <Box grow="Yes" alignItems="Center" gap="300">
+          {screenSize !== ScreenSize.Mobile && (
             <Avatar size="300">
               <RoomAvatar
                 roomId={room.roomId}
                 src={avatarUrl}
                 alt={name}
                 renderFallback={() => (
-                <RoomIcon size="200" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
+                  <RoomIcon
+                    size="200"
+                    joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                    filled
+                  />
                 )}
               />
             </Avatar>
+          )}
           <Box direction="Column">
             <Text size={topic ? 'H5' : 'H3'} truncate>
               {name}
@@ -336,11 +346,7 @@ export function RoomViewHeader() {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <RoomMenu
+                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-                  room={room}
-                  linkPath={currentPath}
-                  requestClose={() => setMenuAnchor(undefined)}
-                />
               </FocusTrap>
             }
           />

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

@@ -51,7 +51,7 @@ import {
   getMemberAvatarMxc,
   getMemberDisplayName,
 } from '../../../utils/room';
-import { getCanonicalAliasOrRoomId, getMxIdLocalPart } from '../../../utils/matrix';
+import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias, mxcUrlToHttp } from '../../../utils/matrix';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@@ -63,18 +63,11 @@ import { EmojiBoard } from '../../../components/emoji-board';
 import { ReactionViewer } from '../reaction-viewer';
 import { MessageEditor } from './MessageEditor';
 import { UserAvatar } from '../../../components/user-avatar';
-import { useSpaceOptionally } from '../../../hooks/useSpace';
-import { useDirectSelected } from '../../../hooks/router/useDirectSelected';
-import {
-  getDirectRoomPath,
-  getHomeRoomPath,
-  getOriginBaseUrl,
-  getSpaceRoomPath,
-  withOriginBaseUrl,
-} from '../../../pages/pathUtils';
 import { copyToClipboard } from '../../../utils/dom';
-import { useClientConfig } from '../../../hooks/useClientConfig';
 import { stopPropagation } from '../../../utils/keyboard';
+import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
+import { getViaServers } from '../../../plugins/via-servers';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -321,23 +314,13 @@ export const MessageCopyLinkItem = as<
   }
 >(({ room, mEvent, onClose, ...props }, ref) => {
   const mx = useMatrixClient();
-  const { hashRouter } = useClientConfig();
-  const space = useSpaceOptionally();
-  const directSelected = useDirectSelected();
 
   const handleCopy = () => {
     const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    let eventPath = getHomeRoomPath(roomIdOrAlias, mEvent.getId());
+    const eventId = mEvent.getId();
-    if (space) {
+    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-      eventPath = getSpaceRoomPath(
+    if (!eventId) return;
-        getCanonicalAliasOrRoomId(mx, space.roomId),
+    copyToClipboard(getMatrixToRoomEvent(roomIdOrAlias, eventId, viaServers));
-        roomIdOrAlias,
-        mEvent.getId()
-      );
-    } else if (directSelected) {
-      eventPath = getDirectRoomPath(roomIdOrAlias, mEvent.getId());
-    }
-    copyToClipboard(withOriginBaseUrl(getOriginBaseUrl(hashRouter), eventPath));
     onClose?.();
   };
 
@@ -668,6 +651,7 @@ export const Message = as<'div', MessageProps>(
     ref
   ) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const senderId = mEvent.getSender() ?? '';
     const [hover, setHover] = useState(false);
     const { hoverProps } = useHover({ onHoverChange: setHover });
@@ -727,7 +711,7 @@ export const Message = as<'div', MessageProps>(
             userId={senderId}
             src={
               senderAvatarMxc
-                ? mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? undefined
+                ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
                 : undefined
             }
             alt={senderDisplayName}

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

@@ -22,6 +22,7 @@ import { useRelations } from '../../../hooks/useRelations';
 import * as css from './styles.css';
 import { ReactionViewer } from '../reaction-viewer';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 export type ReactionsProps = {
   room: Room;
@@ -33,6 +34,7 @@ export type ReactionsProps = {
 export const Reactions = as<'div', ReactionsProps>(
   ({ className, room, relations, mEventId, canSendReaction, onReactionToggle, ...props }, ref) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const [viewer, setViewer] = useState<boolean | string>(false);
     const myUserId = mx.getUserId();
     const reactions = useRelations(
@@ -86,6 +88,7 @@ export const Reactions = as<'div', ReactionsProps>(
                   onClick={canSendReaction ? () => onReactionToggle(mEventId, key) : undefined}
                   onContextMenu={handleViewReaction}
                   aria-disabled={!canSendReaction}
+                  useAuthentication={useAuthentication}
                 />
               )}
             </TooltipProvider>

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -25,6 +25,7 @@ import { useRelations } from '../../../hooks/useRelations';
 import { Reaction } from '../../../components/message';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
 import { UserAvatar } from '../../../components/user-avatar';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 export type ReactionViewerProps = {
   room: Room;
@@ -35,6 +36,7 @@ export type ReactionViewerProps = {
 export const ReactionViewer = as<'div', ReactionViewerProps>(
   ({ className, room, initialKey, relations, requestClose, ...props }, ref) => {
     const mx = useMatrixClient();
+    const useAuthentication = useMediaAuthentication();
     const reactions = useRelations(
       relations,
       useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
@@ -81,6 +83,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                     count={evts.size}
                     aria-selected={key === selectedKey}
                     onClick={() => setSelectedKey(key)}
+                    useAuthentication={useAuthentication}
                   />
                 );
               })}
@@ -107,14 +110,16 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                   const member = room.getMember(senderId);
                   const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
 
-                  const avatarUrl = member?.getAvatarUrl(
+                  const avatarMxcUrl = member?.getMxcAvatarUrl();
-                    mx.baseUrl,
+                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
+                    avatarMxcUrl,
                     100,
                     100,
                     'crop',
                     undefined,
-                    false
+                    false,
-                  );
+                    useAuthentication
+                  ) : undefined;
 
                   return (
                     <MenuItem

src/app/hooks/router/useSearchParamsViaServers.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { getRoomSearchParams } from '../../pages/pathSearchParam';
+import { decodeSearchParamValueArray } from '../../pages/pathUtils';
+
+export const useSearchParamsViaServers = (): string[] | undefined => {
+  const [searchParams] = useSearchParams();
+  const roomSearchParams = useMemo(() => getRoomSearchParams(searchParams), [searchParams]);
+  const viaServers = roomSearchParams.viaServers
+    ? decodeSearchParamValueArray(roomSearchParams.viaServers)
+    : undefined;
+
+  return viaServers;
+};

src/app/hooks/useDeviceList.js

@@ -1,31 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-
-export function useDeviceList() {
-  const mx = useMatrixClient();
-  const [deviceList, setDeviceList] = useState(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const updateDevices = () => mx.getDevices().then((data) => {
-      if (!isMounted) return;
-      setDeviceList(data.devices || []);
-    });
-    updateDevices();
-
-    const handleDevicesUpdate = (users) => {
-      if (users.includes(mx.getUserId())) {
-        updateDevices();
-      }
-    };
-
-    mx.on('crypto.devicesUpdated', handleDevicesUpdate);
-    return () => {
-      mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
-      isMounted = false;
-    };
-  }, [mx]);
-  return deviceList;
-}

src/app/hooks/useDeviceList.ts

@@ -0,0 +1,35 @@
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+import { CryptoEvent, IMyDevice } from 'matrix-js-sdk';
+import { CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto';
+import { useMatrixClient } from './useMatrixClient';
+
+export function useDeviceList() {
+  const mx = useMatrixClient();
+  const [deviceList, setDeviceList] = useState<IMyDevice[] | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const updateDevices = () =>
+      mx.getDevices().then((data) => {
+        if (!isMounted) return;
+        setDeviceList(data.devices || []);
+      });
+    updateDevices();
+
+    const handleDevicesUpdate: CryptoEventHandlerMap[CryptoEvent.DevicesUpdated] = (users) => {
+      const userId = mx.getUserId();
+      if (userId && users.includes(userId)) {
+        updateDevices();
+      }
+    };
+
+    mx.on(CryptoEvent.DevicesUpdated, handleDevicesUpdate);
+    return () => {
+      mx.removeListener(CryptoEvent.DevicesUpdated, handleDevicesUpdate);
+      isMounted = false;
+    };
+  }, [mx]);
+  return deviceList;
+}

src/app/hooks/useMediaAuthentication.ts

@@ -0,0 +1,11 @@
+import { useSpecVersions } from './useSpecVersions';
+
+export const useMediaAuthentication = (): boolean => {
+  const { versions, unstable_features: unstableFeatures } = useSpecVersions();
+
+  // Media authentication is introduced in spec version 1.11
+  const authenticatedMedia =
+    unstableFeatures?.['org.matrix.msc3916.stable'] || versions.includes('v1.11');
+
+  return authenticatedMedia;
+};

src/app/hooks/useMentionClickHandler.ts

@@ -0,0 +1,44 @@
+import { ReactEventHandler, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRoomNavigate } from './useRoomNavigate';
+import { useMatrixClient } from './useMatrixClient';
+import { isRoomId, isUserId } from '../utils/matrix';
+import { openProfileViewer } from '../../client/action/navigation';
+import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
+import { _RoomSearchParams } from '../pages/paths';
+
+export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
+  const mx = useMatrixClient();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const navigate = useNavigate();
+
+  const handleClick: ReactEventHandler<HTMLElement> = useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      evt.preventDefault();
+      const target = evt.currentTarget;
+      const mentionId = target.getAttribute('data-mention-id');
+      if (typeof mentionId !== 'string') return;
+
+      if (isUserId(mentionId)) {
+        openProfileViewer(mentionId, roomId);
+        return;
+      }
+
+      const eventId = target.getAttribute('data-mention-event-id') || undefined;
+      if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
+        if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
+        else navigateRoom(mentionId, eventId);
+        return;
+      }
+
+      const viaServers = target.getAttribute('data-mention-via') || undefined;
+      const path = getHomeRoomPath(mentionId, eventId);
+
+      navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
+    },
+    [mx, navigate, navigateRoom, navigateSpace, roomId]
+  );
+
+  return handleClick;
+};

src/app/hooks/useParsedLoginFlows.ts

@@ -1,16 +1,10 @@
 import { useMemo } from 'react';
 import { ILoginFlow, IPasswordFlow, ISSOFlow, LoginFlow } from 'matrix-js-sdk/lib/@types/auth';
-import { WithRequiredProp } from '../../types/utils';
 
-export type Required_SSOFlow = WithRequiredProp<ISSOFlow, 'identity_providers'>;
+export const getSSOFlow = (loginFlows: LoginFlow[]): ISSOFlow | undefined =>
-export const getSSOFlow = (loginFlows: LoginFlow[]): Required_SSOFlow | undefined =>
+  loginFlows.find((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas') as
-  loginFlows.find(
+    | ISSOFlow
-    (flow) =>
+    | undefined;
-      (flow.type === 'm.login.sso' || flow.type === 'm.login.cas') &&
-      'identity_providers' in flow &&
-      Array.isArray(flow.identity_providers) &&
-      flow.identity_providers.length > 0
-  ) as Required_SSOFlow | undefined;
 
 export const getPasswordFlow = (loginFlows: LoginFlow[]): IPasswordFlow | undefined =>
   loginFlows.find((flow) => flow.type === 'm.login.password') as IPasswordFlow;
@@ -22,7 +16,7 @@ export const getTokenFlow = (loginFlows: LoginFlow[]): LoginFlow | undefined =>
 export type ParsedLoginFlows = {
   password?: LoginFlow;
   token?: LoginFlow;
-  sso?: Required_SSOFlow;
+  sso?: ISSOFlow;
 };
 export const useParsedLoginFlows = (loginFlows: LoginFlow[]) => {
   const parsedFlow: ParsedLoginFlows = useMemo<ParsedLoginFlows>(

src/app/hooks/useRoomNavigate.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { NavigateOptions, useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { getCanonicalAliasOrRoomId } from '../utils/matrix';
 import {
@@ -12,12 +12,14 @@ import { useMatrixClient } from './useMatrixClient';
 import { getOrphanParents } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
+import { useSelectedSpace } from './router/useSelectedSpace';
 
 export const useRoomNavigate = () => {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
+  const spaceSelectedId = useSelectedSpace();
 
   const navigateSpace = useCallback(
     (roomId: string) => {
@@ -28,24 +30,29 @@ export const useRoomNavigate = () => {
   );
 
   const navigateRoom = useCallback(
-    (roomId: string, eventId?: string) => {
+    (roomId: string, eventId?: string, opts?: NavigateOptions) => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
 
       const orphanParents = getOrphanParents(roomToParents, roomId);
       if (orphanParents.length > 0) {
-        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, orphanParents[0]);
+        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(
-        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId));
+          mx,
+          spaceSelectedId && orphanParents.includes(spaceSelectedId)
+            ? spaceSelectedId
+            : orphanParents[0]
+        );
+        navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomIdOrAlias, eventId), opts);
         return;
       }
 
       if (mDirects.has(roomId)) {
-        navigate(getDirectRoomPath(roomIdOrAlias, eventId));
+        navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts);
         return;
       }
 
-      navigate(getHomeRoomPath(roomIdOrAlias, eventId));
+      navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
     },
-    [mx, navigate, roomToParents, mDirects]
+    [mx, navigate, spaceSelectedId, roomToParents, mDirects]
   );
 
   return {

src/app/hooks/useSpoilerClickHandler.ts

@@ -0,0 +1,14 @@
+import { ReactEventHandler, useCallback } from 'react';
+
+export const useSpoilerClickHandler = (): ReactEventHandler<HTMLElement> => {
+  const handleClick: ReactEventHandler<HTMLElement> = useCallback((evt) => {
+    const target = evt.currentTarget;
+    if (target.getAttribute('aria-pressed') === 'true') {
+      evt.stopPropagation();
+      target.setAttribute('aria-pressed', 'false');
+      target.style.cursor = 'initial';
+    }
+  }, []);
+
+  return handleClick;
+};

src/app/i18n.ts

@@ -0,0 +1,31 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend, { HttpBackendOptions } from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+import { trimTrailingSlash } from './utils/common';
+
+i18n
+  // i18next-http-backend
+  // loads translations from your server
+  // https://github.com/i18next/i18next-http-backend
+  .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init<HttpBackendOptions>({
+    debug: false,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    load: 'languageOnly',
+    backend: {
+      loadPath: `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/locales/{{lng}}.json`,
+    },
+  });
+
+export default i18n;

src/app/molecules/image-pack/ImagePack.jsx

@@ -1,6 +1,4 @@
-import React, {
+import React, { useState, useMemo, useReducer, useEffect } from 'react';
-  useState, useMemo, useReducer, useEffect,
-} from 'react';
 import PropTypes from 'prop-types';
 import './ImagePack.scss';
 
@@ -19,12 +17,16 @@ import ImagePackProfile from './ImagePackProfile';
 import ImagePackItem from './ImagePackItem';
 import ImagePackUpload from './ImagePackUpload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
-const renameImagePackItem = (shortcode) => new Promise((resolve) => {
+const renameImagePackItem = (shortcode) =>
+  new Promise((resolve) => {
     let isCompleted = false;
 
     openReusableDialog(
-    <Text variant="s1" weight="medium">Rename</Text>,
+      <Text variant="s1" weight="medium">
+        Rename
+      </Text>,
       (requestClose) => (
         <div style={{ padding: 'var(--sp-normal)' }}>
           <form
@@ -37,23 +39,19 @@ const renameImagePackItem = (shortcode) => new Promise((resolve) => {
               requestClose();
             }}
           >
-          <Input
+            <Input value={shortcode} name="shortcode" label="Shortcode" autoFocus required />
-            value={shortcode}
-            name="shortcode"
-            label="Shortcode"
-            autoFocus
-            required
-          />
             <div style={{ height: 'var(--sp-normal)' }} />
-          <Button variant="primary" type="submit">Rename</Button>
+            <Button variant="primary" type="submit">
+              Rename
+            </Button>
           </form>
         </div>
       ),
       () => {
         if (!isCompleted) resolve(null);
-    },
+      }
     );
-});
+  });
 
 function getUsage(usage) {
   if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
@@ -79,7 +77,7 @@ function useRoomImagePack(roomId, stateKey) {
 
   const pack = useMemo(() => {
     const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-    return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
+    return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent());
   }, [room, stateKey]);
 
   const sendPackContent = (content) => {
@@ -96,10 +94,13 @@ function useUserImagePack() {
   const mx = useMatrixClient();
   const pack = useMemo(() => {
     const packEvent = mx.getAccountData('im.ponies.user_emotes');
-    return ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
+    return ImagePackBuilder.parsePack(
+      mx.getUserId(),
+      packEvent?.getContent() ?? {
         pack: { display_name: 'Personal' },
         images: {},
-    })
+      }
+    );
   }, [mx]);
 
   const sendPackContent = (content) => {
@@ -119,10 +120,7 @@ function useImagePackHandles(pack, sendPackContent) {
     if (typeof key !== 'string') return undefined;
     let newKey = key?.replace(/\s/g, '_');
     if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(
+      newKey = suffixRename(newKey, (suffixedKey) => pack.getImages().get(suffixedKey));
-        newKey,
-        (suffixedKey) => pack.getImages().get(suffixedKey),
-      );
     }
     return newKey;
   };
@@ -163,7 +161,7 @@ function useImagePackHandles(pack, sendPackContent) {
       'Delete',
       `Are you sure that you want to delete "${key}"?`,
       'Delete',
-      'danger',
+      'danger'
     );
     if (!isConfirmed) return;
     pack.removeImage(key);
@@ -226,6 +224,7 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   const room = mx.getRoom(roomId);
   const [viewMore, setViewMore] = useState(false);
   const [isGlobal, setIsGlobal] = useState(isGlobalPack(mx, roomId, stateKey));
+  const useAuthentication = useMediaAuthentication();
 
   const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
 
@@ -253,7 +252,7 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
       'Delete Pack',
       `Are you sure that you want to delete "${pack.displayName}"?`,
       'Delete',
-      'danger',
+      'danger'
     );
     if (!isConfirmed) return;
     handlePackDelete(stateKey);
@@ -264,7 +263,19 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(
+                pack.avatarUrl,
+                42,
+                42,
+                'crop',
+                undefined,
+                undefined,
+                useAuthentication
+              )
+            : null
+        }
         displayName={pack.displayName ?? 'Unknown'}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
@@ -272,10 +283,8 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         onAvatarChange={canChange ? handleAvatarChange : null}
         onEditProfile={canChange ? handleEditProfile : null}
       />
-      { canChange && (
+      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
-        <ImagePackUpload onUpload={handleAddItem} />
+      {images.length === 0 ? null : (
-      )}
-      { images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -285,7 +294,15 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
           {images.map(([shortcode, image]) => (
             <ImagePackItem
               key={shortcode}
-              url={mx.mxcUrlToHttp(image.mxc)}
+              url={mx.mxcUrlToHttp(
+                image.mxc,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                useAuthentication
+              )}
               shortcode={shortcode}
               usage={getUsage(image.usage)}
               onUsageChange={canChange ? handleUsageItem : undefined}
@@ -299,14 +316,14 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         <div className="image-pack__footer">
           {pack.images.size > 2 && (
             <Button onClick={() => setViewMore(!viewMore)}>
-              {
+              {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
-                viewMore
+            </Button>
-                  ? 'View less'
+          )}
-                  : `View ${pack.images.size - 2} more`
+          {handlePackDelete && (
-              }
+            <Button variant="danger" onClick={handleDeletePack}>
+              Delete Pack
             </Button>
           )}
-          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
         </div>
       )}
       <div className="image-pack__global">
@@ -332,6 +349,7 @@ ImagePack.propTypes = {
 function ImagePackUser() {
   const mx = useMatrixClient();
   const [viewMore, setViewMore] = useState(false);
+  const useAuthentication = useMediaAuthentication();
 
   const { pack, sendPackContent } = useUserImagePack();
 
@@ -350,7 +368,19 @@ function ImagePackUser() {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        avatarUrl={
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(
+                pack.avatarUrl,
+                42,
+                42,
+                'crop',
+                undefined,
+                undefined,
+                useAuthentication
+              )
+            : null
+        }
         displayName={pack.displayName ?? 'Personal'}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
@@ -359,7 +389,7 @@ function ImagePackUser() {
         onEditProfile={handleEditProfile}
       />
       <ImagePackUpload onUpload={handleAddItem} />
-      { images.length === 0 ? null : (
+      {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -369,7 +399,15 @@ function ImagePackUser() {
           {images.map(([shortcode, image]) => (
             <ImagePackItem
               key={shortcode}
-              url={mx.mxcUrlToHttp(image.mxc)}
+              url={mx.mxcUrlToHttp(
+                image.mxc,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                useAuthentication
+              )}
               shortcode={shortcode}
               usage={getUsage(image.usage)}
               onUsageChange={handleUsageItem}
@@ -379,14 +417,10 @@ function ImagePackUser() {
           ))}
         </div>
       )}
-      {(pack.images.size > 2) && (
+      {pack.images.size > 2 && (
         <div className="image-pack__footer">
           <Button onClick={() => setViewMore(!viewMore)}>
-            {
+            {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
-              viewMore
-                ? 'View less'
-                : `View ${pack.images.size - 2} more`
-            }
           </Button>
         </div>
       )}
@@ -435,29 +469,33 @@ function ImagePackGlobal() {
     <div className="image-pack-global">
       <MenuHeader>Global packs</MenuHeader>
       <div>
-        {
+        {roomIdToStateKeys.size > 0 ? (
-          roomIdToStateKeys.size > 0
+          [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
-            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
             const room = mx.getRoom(roomId);
-              return (
+            return stateKeys.map((stateKey) => {
-                stateKeys.map((stateKey) => {
               const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
               const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
               if (!pack) return null;
               return (
                 <div className="image-pack__global" key={pack.id}>
-                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
+                  <Checkbox
+                    variant="positive"
+                    onToggle={() => handleChange(roomId, stateKey)}
+                    isActive
+                  />
                   <div>
                     <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
                     <Text variant="b3">{room.name}</Text>
                   </div>
                 </div>
               );
+            });
           })
-              );
+        ) : (
-            })
+          <div className="image-pack-global__empty">
-            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
+            <Text>No global packs</Text>
-        }
+          </div>
+        )}
       </div>
     </div>
   );

src/app/molecules/space-add-existing/SpaceAddExisting.jsx

@@ -5,7 +5,7 @@ import './SpaceAddExisting.scss';
 
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { joinRuleToIconSrc, getIdServer, genRoomVia } from '../../../util/matrixUtil';
+import { joinRuleToIconSrc, getIdServer } from '../../../util/matrixUtil';
 import { Debounce } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
@@ -27,6 +27,7 @@ import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getViaServers } from '../../plugins/via-servers';
 
 function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
   const mountStore = useStore(roomId);
@@ -69,7 +70,7 @@ function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
 
     const promises = selected.map((rId) => {
       const room = mx.getRoom(rId);
-      const via = genRoomVia(room);
+      const via = getViaServers(room);
       if (via.length === 0) {
         via.push(getIdServer(rId));
       }

src/app/organisms/invite-user/InviteUser.jsx

@@ -18,11 +18,13 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { getDMRoomFor } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
   const [isSearching, updateIsSearching] = useState(false);
   const [searchQuery, updateSearchQuery] = useState({});
   const [users, updateUsers] = useState([]);
+  const useAuthentication = useMediaAuthentication();
 
   const [procUsers, updateProcUsers] = useState(new Set()); // proc stands for processing.
   const [procUserError, updateUserProcError] = useState(new Map());
@@ -222,7 +224,15 @@ function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
           key={userId}
           avatarSrc={
             typeof user.avatar_url === 'string'
-              ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop')
+              ? mx.mxcUrlToHttp(
+                  user.avatar_url,
+                  42,
+                  42,
+                  'crop',
+                  undefined,
+                  undefined,
+                  useAuthentication
+                )
               : null
           }
           name={name}

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -14,15 +14,19 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import './ProfileEditor.scss';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function ProfileEditor({ userId }) {
   const [isEditing, setIsEditing] = useState(false);
   const mx = useMatrixClient();
   const user = mx.getUser(mx.getUserId());
+  const useAuthentication = useMediaAuthentication();
 
   const displayNameRef = useRef(null);
   const [avatarSrc, setAvatarSrc] = useState(
-    user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : null
+    user.avatarUrl
+      ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop', undefined, undefined, useAuthentication)
+      : null
   );
   const [username, setUsername] = useState(user.displayName);
   const [disabled, setDisabled] = useState(true);
@@ -31,13 +35,25 @@ function ProfileEditor({ userId }) {
     let isMounted = true;
     mx.getProfileInfo(mx.getUserId()).then((info) => {
       if (!isMounted) return;
-      setAvatarSrc(info.avatar_url ? mx.mxcUrlToHttp(info.avatar_url, 80, 80, 'crop') : null);
+      setAvatarSrc(
+        info.avatar_url
+          ? mx.mxcUrlToHttp(
+              info.avatar_url,
+              80,
+              80,
+              'crop',
+              undefined,
+              undefined,
+              useAuthentication
+            )
+          : null
+      );
       setUsername(info.displayname);
     });
     return () => {
       isMounted = false;
     };
-  }, [mx, userId]);
+  }, [mx, userId, useAuthentication]);
 
   const handleAvatarUpload = async (url) => {
     if (url === null) {
@@ -54,7 +70,7 @@ function ProfileEditor({ userId }) {
       return;
     }
     mx.setAvatarUrl(url);
-    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
+    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop', undefined, undefined, useAuthentication));
   };
 
   const saveDisplayName = () => {

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -36,6 +36,7 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { getDMRoomFor } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function ModerationTools({ roomId, userId }) {
   const mx = useMatrixClient();
@@ -329,6 +330,7 @@ function useRerenderOnProfileChange(roomId, userId) {
 function ProfileViewer() {
   const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
   useRerenderOnProfileChange(roomId, userId);
+  const useAuthentication = useMediaAuthentication();
 
   const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
@@ -338,7 +340,9 @@ function ProfileViewer() {
     const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(mx, userId);
     const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
     const avatarUrl =
-      avatarMxc && avatarMxc !== 'null' ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
+      avatarMxc && avatarMxc !== 'null'
+        ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop', undefined, undefined, useAuthentication)
+        : null;
 
     const powerLevel = roomMember?.powerLevel || 0;
     const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;

src/app/pages/Router.tsx

@@ -41,7 +41,7 @@ import {
 } from './pathUtils';
 import { ClientBindAtoms, ClientLayout, ClientRoot } from './client';
 import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
-import { Direct, DirectRouteRoomProvider } from './client/direct';
+import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
 import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
 import { Notifications, Inbox, Invites } from './client/inbox';
@@ -160,7 +160,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           }
         >
           {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<p>create</p>} />
+          <Route path={_CREATE_PATH} element={<DirectCreate />} />
           <Route
             path={_ROOM_PATH}
             element={

src/app/pages/auth/AuthFooter.tsx

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

src/app/pages/auth/AuthLayout.tsx

@@ -29,6 +29,7 @@ import { AutoDiscoveryInfoProvider } from '../../hooks/useAutoDiscoveryInfo';
 import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
 import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
 import { AuthServerProvider } from '../../hooks/useAuthServer';
+import { tryDecodeURIComponent } from '../../utils/dom';
 
 const currentAuthPath = (pathname: string): string => {
   if (matchPath(LOGIN_PATH, pathname)) {
@@ -72,7 +73,7 @@ export function AuthLayout() {
   const clientConfig = useClientConfig();
 
   const defaultServer = clientDefaultServer(clientConfig);
-  let server: string = urlEncodedServer ? decodeURIComponent(urlEncodedServer) : defaultServer;
+  let server: string = urlEncodedServer ? tryDecodeURIComponent(urlEncodedServer) : defaultServer;
 
   if (!clientAllowedServer(clientConfig, server)) {
     server = defaultServer;
@@ -94,7 +95,7 @@ export function AuthLayout() {
 
   // if server is mismatches with path server, update path
   useEffect(() => {
-    if (!urlEncodedServer || decodeURIComponent(urlEncodedServer) !== server) {
+    if (!urlEncodedServer || tryDecodeURIComponent(urlEncodedServer) !== server) {
       navigate(
         generatePath(currentAuthPath(location.pathname), {
           server: encodeURIComponent(server),

src/app/pages/auth/SSOLogin.tsx

@@ -4,30 +4,35 @@ import React, { useMemo } from 'react';
 import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
 
 type SSOLoginProps = {
-  providers: IIdentityProvider[];
+  providers?: IIdentityProvider[];
-  asIcons?: boolean;
   redirectUrl: string;
+  saveScreenSpace?: boolean;
 };
-export function SSOLogin({ providers, redirectUrl, asIcons }: SSOLoginProps) {
+export function SSOLogin({ providers, redirectUrl, saveScreenSpace }: SSOLoginProps) {
   const discovery = useAutoDiscoveryInfo();
   const baseUrl = discovery['m.homeserver'].base_url;
   const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
 
-  const getSSOIdUrl = (ssoId: string): string => mx.getSsoLoginUrl(redirectUrl, 'sso', ssoId);
+  const getSSOIdUrl = (ssoId?: string): string => mx.getSsoLoginUrl(redirectUrl, 'sso', ssoId);
 
-  const anyAsBtn = providers.find(
+  const withoutIcon = providers
+    ? providers.find(
         (provider) => !provider.icon || !mx.mxcUrlToHttp(provider.icon, 96, 96, 'crop', false)
-  );
+      )
+    : true;
+
+  const renderAsIcons = withoutIcon ? false : saveScreenSpace && providers && providers.length > 2;
 
   return (
     <Box justifyContent="Center" gap="600" wrap="Wrap">
-      {providers.map((provider) => {
+      {providers ? (
+        providers.map((provider) => {
           const { id, name, icon } = provider;
           const iconUrl = icon && mx.mxcUrlToHttp(icon, 96, 96, 'crop', false);
 
           const buttonTitle = `Continue with ${name}`;
 
-        if (!anyAsBtn && iconUrl && asIcons) {
+          if (renderAsIcons) {
             return (
               <Avatar
                 style={{ cursor: 'pointer' }}
@@ -38,7 +43,7 @@ export function SSOLogin({ providers, redirectUrl, asIcons }: SSOLoginProps) {
                 size="300"
                 radii="300"
               >
-              <AvatarImage src={iconUrl} alt={name} title={buttonTitle} />
+                <AvatarImage src={iconUrl!} alt={name} title={buttonTitle} />
               </Avatar>
             );
           }
@@ -66,7 +71,22 @@ export function SSOLogin({ providers, redirectUrl, asIcons }: SSOLoginProps) {
               </Text>
             </Button>
           );
-      })}
+        })
+      ) : (
+        <Button
+          style={{ width: '100%' }}
+          as="a"
+          href={getSSOIdUrl()}
+          size="500"
+          variant="Secondary"
+          fill="Soft"
+          outlined
+        >
+          <Text align="Center" size="B500" truncate>
+            Continue with SSO
+          </Text>
+        </Button>
+      )}
     </Box>
   );
 }

src/app/pages/auth/login/Login.tsx

@@ -76,9 +76,7 @@ export function Login() {
           <SSOLogin
             providers={parsedFlows.sso.identity_providers}
             redirectUrl={ssoRedirectUrl}
-            asIcons={
+            saveScreenSpace={parsedFlows.password !== undefined}
-              parsedFlows.password !== undefined && parsedFlows.sso.identity_providers.length > 2
-            }
           />
           <span data-spacing-node />
         </>

src/app/pages/auth/register/Register.tsx

@@ -83,10 +83,7 @@ export function Register() {
           <SSOLogin
             providers={sso.identity_providers}
             redirectUrl={ssoRedirectUrl}
-            asIcons={
+            saveScreenSpace={registerFlows.status === RegisterFlowStatus.FlowRequired}
-              registerFlows.status === RegisterFlowStatus.FlowRequired &&
-              sso.identity_providers.length > 2
-            }
           />
           <span data-spacing-node />
         </>

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -22,9 +22,10 @@ import {
   isNotificationEvent,
 } from '../../utils/room';
 import { NotificationType, UnreadInfo } from '../../../types/matrix/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function SystemEmojiFeature() {
   const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
@@ -132,6 +133,7 @@ function MessageNotifications() {
   const notifRef = useRef<Notification>();
   const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
   const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
 
@@ -183,17 +185,17 @@ function MessageNotifications() {
       removed,
       data
     ) => {
+      if (mx.getSyncState() !== 'SYNCING') return;
+      if (document.hasFocus() && (selectedRoomId === room?.roomId || notificationSelected)) return;
       if (
-        mx.getSyncState() !== 'SYNCING' ||
-        selectedRoomId === room?.roomId ||
-        notificationSelected ||
         !room ||
         !data.liveEvent ||
         room.isSpaceRoom() ||
         !isNotificationEvent(mEvent) ||
         getNotificationType(mx, room.roomId) === NotificationType.Mute
-      )
+      ) {
         return;
+      }
 
       const sender = mEvent.getSender();
       const eventId = mEvent.getId();
@@ -216,7 +218,7 @@ function MessageNotifications() {
         notify({
           roomName: room.name ?? 'Unknown',
           roomAvatar: avatarMxc
-            ? mx.mxcUrlToHttp(avatarMxc, 96, 96, 'crop') ?? undefined
+            ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
             : undefined,
           username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
           roomId: room.roomId,
@@ -240,6 +242,7 @@ function MessageNotifications() {
     playSound,
     notify,
     selectedRoomId,
+    useAuthentication,
   ]);
 
   return (

src/app/pages/client/SidebarNav.tsx

@@ -10,7 +10,15 @@ import {
   SidebarItemTooltip,
   SidebarItem,
 } from '../../components/sidebar';
-import { DirectTab, HomeTab, SpaceTabs, InboxTab, ExploreTab, UserTab } from './sidebar';
+import {
+  DirectTab,
+  HomeTab,
+  SpaceTabs,
+  InboxTab,
+  ExploreTab,
+  UserTab,
+  UnverifiedTab,
+} from './sidebar';
 import { openCreateRoom, openSearch } from '../../../client/action/navigation';
 
 export function SidebarNav() {
@@ -65,6 +73,8 @@ export function SidebarNav() {
                 </SidebarItemTooltip>
               </SidebarItem>
 
+              <UnverifiedTab />
+
               <InboxTab />
               <UserTab />
             </SidebarStack>

src/app/pages/client/WelcomePage.tsx

@@ -24,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.0.0
+                  v4.2.2
                 </a>
               </span>
             }

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

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { WelcomePage } from '../WelcomePage';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { getDirectCreateSearchParams } from '../../pathSearchParam';
+import { getDirectPath, getDirectRoomPath } from '../../pathUtils';
+import { getDMRoomFor } from '../../../utils/matrix';
+import { openInviteUser } from '../../../../client/action/navigation';
+import { useDirectRooms } from './useDirectRooms';
+
+export function DirectCreate() {
+  const mx = useMatrixClient();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { userId } = getDirectCreateSearchParams(searchParams);
+  const directs = useDirectRooms();
+
+  useEffect(() => {
+    if (userId) {
+      const room = getDMRoomFor(mx, userId);
+      const { roomId } = room ?? {};
+      if (roomId && directs.includes(roomId)) {
+        navigate(getDirectRoomPath(roomId), { replace: true });
+      } else {
+        openInviteUser(undefined, userId);
+      }
+    } else {
+      navigate(getDirectPath(), { replace: true });
+    }
+  }, [mx, navigate, directs, userId]);
+
+  return <WelcomePage />;
+}

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

@@ -10,12 +10,12 @@ export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const rooms = useDirectRooms();
 
-  const { roomIdOrAlias } = useParams();
+  const { roomIdOrAlias, eventId } = useParams();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
   if (!room || !rooms.includes(room.roomId)) {
-    return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} />;
+    return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} eventId={eventId} />;
   }
 
   return (

src/app/pages/client/direct/index.ts

@@ -1,2 +1,3 @@
 export * from './Direct';
 export * from './RoomProvider';
+export * from './DirectCreate';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Icon, Icons, Scroll, Text } from 'folds';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { useAtomValue } from 'jotai';
 import { useClientConfig } from '../../../hooks/useClientConfig';
 import { RoomCard, RoomCardGrid } from '../../../components/room-card';
@@ -9,21 +9,38 @@ import {
   Page,
   PageContent,
   PageContentCenter,
+  PageHeader,
   PageHero,
   PageHeroSection,
 } from '../../../components/page';
 import { RoomTopicViewer } from '../../../components/room-topic-viewer';
 import * as css from './style.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function FeaturedRooms() {
   const { featuredCommunities } = useClientConfig();
   const { rooms, spaces } = featuredCommunities ?? {};
   const allRooms = useAtomValue(allRoomsAtom);
+  const screenSize = useScreenSizeContext();
   const { navigateSpace, navigateRoom } = useRoomNavigate();
 
   return (
     <Page>
+      {screenSize === ScreenSize.Mobile && (
+        <PageHeader>
+          <Box shrink="No">
+            <BackRouteHandler>
+              {(onBack) => (
+                <IconButton onClick={onBack}>
+                  <Icon src={Icons.ArrowLeft} />
+                </IconButton>
+              )}
+            </BackRouteHandler>
+          </Box>
+        </PageHeader>
+      )}
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent>

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

@@ -13,6 +13,7 @@ import {
   Button,
   Chip,
   Icon,
+  IconButton,
   Icons,
   Input,
   Line,
@@ -42,6 +43,8 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -344,6 +347,7 @@ export function PublicRooms() {
   const userServer = userId && getMxIdServer(userId);
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateSpace, navigateRoom } = useRoomNavigate();
+  const screenSize = useScreenSizeContext();
 
   const [searchParams] = useSearchParams();
   const serverSearchParams = useServerSearchParams(searchParams);
@@ -466,7 +470,7 @@ export function PublicRooms() {
 
   return (
     <Page>
-      <PageHeader>
+      <PageHeader balance>
         {isSearch ? (
           <>
             <Box grow="Yes" basis="No">
@@ -482,20 +486,34 @@ export function PublicRooms() {
             </Box>
 
             <Box grow="No" justifyContent="Center" alignItems="Center" gap="200">
-              <Icon size="400" src={Icons.Search} />
+              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
               <Text size="H3" truncate>
                 Search
               </Text>
             </Box>
-            <Box grow="Yes" />
+            <Box grow="Yes" basis="No" />
           </>
         ) : (
+          <>
+            <Box grow="Yes" basis="No">
+              {screenSize === ScreenSize.Mobile && (
+                <BackRouteHandler>
+                  {(onBack) => (
+                    <IconButton onClick={onBack}>
+                      <Icon src={Icons.ArrowLeft} />
+                    </IconButton>
+                  )}
+                </BackRouteHandler>
+              )}
+            </Box>
             <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
-            <Icon size="400" src={Icons.Category} />
+              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Category} />}
               <Text size="H3" truncate>
                 {server}
               </Text>
             </Box>
+            <Box grow="Yes" basis="No" />
+          </>
         )}
       </PageHeader>
       <Box grow="Yes">

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

@@ -5,17 +5,25 @@ import { RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useHomeRooms } from './useHomeRooms';
+import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
 
 export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const rooms = useHomeRooms();
 
-  const { roomIdOrAlias } = useParams();
+  const { roomIdOrAlias, eventId } = useParams();
+  const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
   if (!room || !rooms.includes(room.roomId)) {
-    return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} />;
+    return (
+      <JoinBeforeNavigate
+        roomIdOrAlias={roomIdOrAlias!}
+        eventId={eventId}
+        viaServers={viaServers}
+      />
+    );
   }
 
   return (

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

@@ -1,22 +1,39 @@
 import React, { useRef } from 'react';
-import { Box, Icon, Icons, Text, Scroll } from 'folds';
+import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
 import { MessageSearch } from '../../../features/message-search';
 import { useHomeRooms } from './useHomeRooms';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function HomeSearch() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
+  const screenSize = useScreenSizeContext();
 
   return (
     <Page>
-      <PageHeader>
+      <PageHeader balance>
-        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+        <Box grow="Yes" alignItems="Center" gap="200">
-          <Icon size="400" src={Icons.Search} />
+          <Box grow="Yes" basis="No">
+            {screenSize === ScreenSize.Mobile && (
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            )}
+          </Box>
+          <Box justifyContent="Center" alignItems="Center" gap="200">
+            {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
             <Text size="H3" truncate>
               Message Search
             </Text>
           </Box>
+          <Box grow="Yes" basis="No" />
+        </Box>
       </PageHeader>
       <Box style={{ position: 'relative' }} grow="Yes">
         <Scroll ref={scrollRef} hideTrack visibility="Hover">

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

@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Icon,
+  IconButton,
   Icons,
   Overlay,
   OverlayBackdrop,
@@ -39,6 +40,9 @@ import { RoomTopicViewer } from '../../../components/room-topic-viewer';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useRoomTopic } from '../../../hooks/useRoomMeta';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 const COMPACT_CARD_WIDTH = 548;
 
@@ -51,6 +55,7 @@ type InviteCardProps = {
 };
 function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const roomName = room.name || room.getCanonicalAlias() || room.roomId;
   const member = room.getMember(userId);
   const memberEvent = member?.events.member;
@@ -107,7 +112,7 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
         <Avatar size="300">
           <RoomAvatar
             roomId={room.roomId}
-            src={direct ? getDirectRoomAvatarUrl(mx, room, 96) : getRoomAvatarUrl(mx, room, 96)}
+            src={direct ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication)}
             alt={roomName}
             renderFallback={() => (
               <Text as="span" size="H6">
@@ -205,6 +210,7 @@ export function Invites() {
     useCallback(() => containerRef.current, []),
     useCallback((width) => setCompact(width <= COMPACT_CARD_WIDTH), [])
   );
+  const screenSize = useScreenSizeContext();
 
   const { navigateRoom, navigateSpace } = useRoomNavigate();
 
@@ -225,13 +231,27 @@ export function Invites() {
 
   return (
     <Page>
-      <PageHeader>
+      <PageHeader balance>
-        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+        <Box grow="Yes" gap="200">
-          <Icon size="400" src={Icons.Mail} />
+          <Box grow="Yes" basis="No">
+            {screenSize === ScreenSize.Mobile && (
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            )}
+          </Box>
+          <Box alignItems="Center" gap="200">
+            {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Mail} />}
             <Text size="H3" truncate>
               Invitations
             </Text>
           </Box>
+          <Box grow="Yes" basis="No" />
+        </Box>
       </PageHeader>
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">

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

@@ -20,13 +20,15 @@ import {
   IRoomEvent,
   JoinRule,
   Method,
+  RelationType,
   Room,
 } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts as LinkifyOpts } from 'linkifyjs';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getMxIdLocalPart, isRoomId, isUserId } from '../../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { InboxNotificationsPathSearchParams } from '../../paths';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -52,8 +54,13 @@ import {
   Username,
 } from '../../../components/message';
 import colorMXID from '../../../../util/colorMXID';
-import { getReactCustomHtmlParser } from '../../../plugins/react-custom-html-parser';
+import {
-import { openJoinAlias, openProfileViewer } from '../../../../client/action/navigation';
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../../plugins/react-custom-html-parser';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
@@ -70,6 +77,11 @@ import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { VirtualTile } from '../../../components/virtualizer';
 import { UserAvatar } from '../../../components/user-avatar';
 import { EncryptedContent } from '../../../features/room/message';
+import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -180,37 +192,29 @@ function RoomNotificationsGroupComp({
   onOpen,
 }: RoomNotificationsGroupProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const mentionClickHandler = useMentionClickHandler(room.roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
 
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+      ),
+    }),
+    [mx, room, mentionClickHandler]
+  );
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
-      getReactCustomHtmlParser(mx, room, {
+      getReactCustomHtmlParser(mx, room.roomId, {
-        handleSpoilerClick: (evt) => {
+        linkifyOpts,
-          const target = evt.currentTarget;
+        useAuthentication,
-          if (target.getAttribute('aria-pressed') === 'true') {
+        handleSpoilerClick: spoilerClickHandler,
-            evt.stopPropagation();
+        handleMentionClick: mentionClickHandler,
-            target.setAttribute('aria-pressed', 'false');
-            target.style.cursor = 'initial';
-          }
-        },
-        handleMentionClick: (evt) => {
-          const target = evt.currentTarget;
-          const mentionId = target.getAttribute('data-mention-id');
-          if (typeof mentionId !== 'string') return;
-          if (isUserId(mentionId)) {
-            openProfileViewer(mentionId, room.roomId);
-            return;
-          }
-          if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
-            if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
-            else navigateRoom(mentionId);
-            return;
-          }
-          openJoinAlias(mentionId);
-        },
       }),
-    [mx, room, navigateRoom, navigateSpace]
+    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IRoomEvent, string, GetContentCallback]>(
@@ -229,6 +233,7 @@ function RoomNotificationsGroupComp({
             mediaAutoLoad={mediaAutoLoad}
             urlPreview={urlPreview}
             htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
             outlineAttachment
           />
         );
@@ -287,6 +292,7 @@ function RoomNotificationsGroupComp({
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
                     htmlReactParserOptions={htmlReactParserOptions}
+                    linkifyOpts={linkifyOpts}
                   />
                 );
               }
@@ -350,7 +356,7 @@ function RoomNotificationsGroupComp({
     }
   );
 
-  const handleOpenClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+  const handleOpenClick: MouseEventHandler = (evt) => {
     const eventId = evt.currentTarget.getAttribute('data-event-id');
     if (!eventId) return;
     onOpen(room.roomId, eventId);
@@ -366,7 +372,7 @@ function RoomNotificationsGroupComp({
           <Avatar size="200" radii="300">
             <RoomAvatar
               roomId={room.roomId}
-              src={getRoomAvatarUrl(mx, room, 96)}
+              src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
               alt={room.name}
               renderFallback={() => (
                 <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
@@ -401,7 +407,10 @@ function RoomNotificationsGroupComp({
           const senderAvatarMxc = getMemberAvatarMxc(room, event.sender);
           const getContent = (() => event.content) as GetContentCallback;
 
-          const replyEventId = event.content['m.relates_to']?.['m.in_reply_to']?.event_id;
+          const relation = event.content['m.relates_to'];
+          const replyEventId = relation?.['m.in_reply_to']?.event_id;
+          const threadRootId =
+            relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
 
           return (
             <SequenceCard
@@ -418,7 +427,7 @@ function RoomNotificationsGroupComp({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? undefined
+                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -450,11 +459,10 @@ function RoomNotificationsGroupComp({
                 </Box>
                 {replyEventId && (
                   <Reply
-                    as="button"
                     mx={mx}
                     room={room}
-                    eventId={replyEventId}
+                    replyEventId={replyEventId}
-                    data-event-id={replyEventId}
+                    threadRootId={threadRootId}
                     onClick={handleOpenClick}
                   />
                 )}
@@ -484,6 +492,7 @@ export function Notifications() {
   const mx = useMatrixClient();
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const screenSize = useScreenSizeContext();
 
   const { navigateRoom } = useRoomNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -549,13 +558,27 @@ export function Notifications() {
 
   return (
     <Page>
-      <PageHeader>
+      <PageHeader balance>
-        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+        <Box grow="Yes" gap="200">
-          <Icon size="400" src={Icons.Message} />
+          <Box grow="Yes" basis="No">
+            {screenSize === ScreenSize.Mobile && (
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            )}
+          </Box>
+          <Box alignItems="Center" gap="200">
+            {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Message} />}
             <Text size="H3" truncate>
               Notification Messages
             </Text>
           </Box>
+          <Box grow="Yes" basis="No" />
+        </Box>
       </PageHeader>
 
       <Box style={{ position: 'relative' }} grow="Yes">

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -47,13 +47,7 @@ import {
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import {
+import { getSpaceLobbyPath, getSpacePath, joinPathComponent } from '../../pathUtils';
-  getOriginBaseUrl,
-  getSpaceLobbyPath,
-  getSpacePath,
-  joinPathComponent,
-  withOriginBaseUrl,
-} from '../../pathUtils';
 import {
   SidebarAvatar,
   SidebarItem,
@@ -67,7 +61,7 @@ import {
 import { RoomUnreadProvider, RoomsUnreadProvider } from '../../../components/RoomUnreadProvider';
 import { useSelectedSpace } from '../../../hooks/router/useSelectedSpace';
 import { UnreadBadge } from '../../../components/unread-badge';
-import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
+import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
 import { RoomAvatar } from '../../../components/room-avatar';
 import { nameInitials, randomStr } from '../../../utils/common';
 import {
@@ -83,7 +77,6 @@ import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFolder';
-import { useClientConfig } from '../../../hooks/useClientConfig';
 import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
@@ -91,6 +84,10 @@ import { markAsRead } from '../../../../client/action/notifications';
 import { copyToClipboard } from '../../../utils/dom';
 import { openInviteUser, openSpaceSettings } from '../../../../client/action/navigation';
 import { stopPropagation } from '../../../utils/keyboard';
+import { getMatrixToRoom } from '../../../plugins/matrix-to';
+import { getViaServers } from '../../../plugins/via-servers';
+import { getRoomAvatarUrl } from '../../../utils/room';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type SpaceMenuProps = {
   room: Room;
@@ -100,7 +97,6 @@ type SpaceMenuProps = {
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
   ({ room, requestClose, onUnpin }, ref) => {
     const mx = useMatrixClient();
-    const { hashRouter } = useClientConfig();
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevels(room);
     const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@@ -124,8 +120,9 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     };
 
     const handleCopyLink = () => {
-      const spacePath = getSpacePath(getCanonicalAliasOrRoomId(mx, room.roomId));
+      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-      copyToClipboard(withOriginBaseUrl(getOriginBaseUrl(hashRouter), spacePath));
+      const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
+      copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
       requestClose();
     };
 
@@ -384,6 +381,7 @@ function SpaceTab({
   onUnpin,
 }: SpaceTabProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const targetRef = useRef<HTMLDivElement>(null);
 
   const spaceDraggable: SidebarDraggable = useMemo(
@@ -436,7 +434,7 @@ function SpaceTab({
               >
                 <RoomAvatar
                   roomId={space.roomId}
-                  src={space.getAvatarUrl(mx.baseUrl, 96, 96, 'crop') ?? undefined}
+                  src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? undefined}
                   alt={space.name}
                   renderFallback={() => (
                     <Text size={folder ? 'H6' : 'H4'}>{nameInitials(space.name, 2)}</Text>
@@ -529,6 +527,7 @@ function ClosedSpaceFolder({
   disabled,
 }: ClosedSpaceFolderProps) {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const handlerRef = useRef<HTMLDivElement>(null);
 
   const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
@@ -561,7 +560,7 @@ function ClosedSpaceFolder({
                     <SidebarAvatar key={sId} size="200" radii="300">
                       <RoomAvatar
                         roomId={space.roomId}
-                        src={space.getAvatarUrl(mx.baseUrl, 96, 96, 'crop') ?? undefined}
+                        src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? undefined}
                         alt={space.name}
                         renderFallback={() => (
                           <Text size="Inherit">

src/app/pages/client/sidebar/UnverifiedTab.css.ts

@@ -0,0 +1,24 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { color, toRem } from 'folds';
+
+const pushRight = keyframes({
+  from: {
+    transform: `translateX(${toRem(2)}) scale(1)`,
+  },
+  to: {
+    transform: 'translateX(0) scale(1)',
+  },
+});
+
+export const UnverifiedTab = style({
+  animationName: pushRight,
+  animationDuration: '400ms',
+  animationIterationCount: 30,
+  animationDirection: 'alternate',
+});
+
+export const UnverifiedAvatar = style({
+  backgroundColor: color.Critical.Container,
+  color: color.Critical.OnContainer,
+  borderColor: color.Critical.ContainerLine,
+});

src/app/pages/client/sidebar/UnverifiedTab.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Badge, color, Icon, Icons, Text } from 'folds';
+import { openSettings } from '../../../../client/action/navigation';
+import { isCrossVerified } from '../../../../util/matrixUtil';
+import {
+  SidebarAvatar,
+  SidebarItem,
+  SidebarItemBadge,
+  SidebarItemTooltip,
+} from '../../../components/sidebar';
+import { useDeviceList } from '../../../hooks/useDeviceList';
+import { tabText } from '../../../organisms/settings/Settings';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import * as css from './UnverifiedTab.css';
+
+export function UnverifiedTab() {
+  const mx = useMatrixClient();
+  const deviceList = useDeviceList();
+  const unverified = deviceList?.filter(
+    (device) => isCrossVerified(mx, device.device_id) === false
+  );
+
+  if (!unverified?.length) return null;
+
+  return (
+    <SidebarItem className={css.UnverifiedTab}>
+      <SidebarItemTooltip tooltip="Unverified Sessions">
+        {(triggerRef) => (
+          <SidebarAvatar
+            className={css.UnverifiedAvatar}
+            as="button"
+            ref={triggerRef}
+            outlined
+            onClick={() => openSettings(tabText.SECURITY)}
+          >
+            <Icon style={{ color: color.Critical.Main }} src={Icons.ShieldUser} />
+          </SidebarAvatar>
+        )}
+      </SidebarItemTooltip>
+      <SidebarItemBadge hasCount>
+        <Badge variant="Critical" size="400" fill="Solid" radii="Pill" outlined={false}>
+          <Text as="span" size="L400">
+            {unverified.length}
+          </Text>
+        </Badge>
+      </SidebarItemBadge>
+    </SidebarItem>
+  );
+}

src/app/pages/client/sidebar/UserTab.tsx

@@ -5,8 +5,9 @@ import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../compone
 import { openSettings } from '../../../../client/action/navigation';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getMxIdLocalPart } from '../../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { nameInitials } from '../../../utils/common';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 type UserProfile = {
   avatar_url?: string;
@@ -14,12 +15,13 @@ type UserProfile = {
 };
 export function UserTab() {
   const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const userId = mx.getUserId()!;
 
   const [profile, setProfile] = useState<UserProfile>({});
   const displayName = profile.displayname ?? getMxIdLocalPart(userId) ?? userId;
   const avatarUrl = profile.avatar_url
-    ? mx.mxcUrlToHttp(profile.avatar_url, 96, 96, 'crop') ?? undefined
+    ? mxcUrlToHttp(mx, profile.avatar_url, useAuthentication, 96, 96, 'crop') ?? undefined
     : undefined;
 
   useEffect(() => {

src/app/pages/client/sidebar/index.ts

@@ -4,3 +4,4 @@ export * from './SpaceTabs';
 export * from './InboxTab';
 export * from './ExploreTab';
 export * from './UserTab';
+export * from './UnverifiedTab';

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

@@ -9,6 +9,7 @@ import { useSpace } from '../../../hooks/useSpace';
 import { getAllParents } from '../../../utils/room';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
+import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
 
 export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
@@ -16,7 +17,8 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const roomToParents = useAtomValue(roomToParentsAtom);
   const allRooms = useAtomValue(allRoomsAtom);
 
-  const { roomIdOrAlias } = useParams();
+  const { roomIdOrAlias, eventId } = useParams();
+  const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
@@ -26,7 +28,13 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
     !allRooms.includes(room.roomId) ||
     !getAllParents(roomToParents, room.roomId).has(space.roomId)
   ) {
-    return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} />;
+    return (
+      <JoinBeforeNavigate
+        roomIdOrAlias={roomIdOrAlias!}
+        eventId={eventId}
+        viaServers={viaServers}
+      />
+    );
   }
 
   return (

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

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Box, Icon, Icons, Text, Scroll } from 'folds';
+import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds';
 import { useAtomValue } from 'jotai';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
 import { MessageSearch } from '../../../features/message-search';
@@ -9,11 +9,14 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
 
 export function SpaceSearch() {
   const mx = useMatrixClient();
   const scrollRef = useRef<HTMLDivElement>(null);
   const space = useSpace();
+  const screenSize = useScreenSizeContext();
 
   const mDirects = useAtomValue(mDirectAtom);
   const roomToParents = useAtomValue(roomToParentsAtom);
@@ -25,13 +28,27 @@ export function SpaceSearch() {
 
   return (
     <Page>
-      <PageHeader>
+      <PageHeader balance>
-        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+        <Box grow="Yes" alignItems="Center" gap="200">
-          <Icon size="400" src={Icons.Search} />
+          <Box grow="Yes" basis="No">
+            {screenSize === ScreenSize.Mobile && (
+              <BackRouteHandler>
+                {(onBack) => (
+                  <IconButton onClick={onBack}>
+                    <Icon src={Icons.ArrowLeft} />
+                  </IconButton>
+                )}
+              </BackRouteHandler>
+            )}
+          </Box>
+          <Box justifyContent="Center" alignItems="Center" gap="200">
+            {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
             <Text size="H3" truncate>
               Message Search
             </Text>
           </Box>
+          <Box grow="Yes" basis="No" />
+        </Box>
       </PageHeader>
       <Box style={{ position: 'relative' }} grow="Yes">
         <Scroll ref={scrollRef} hideTrack visibility="Hover">

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

@@ -34,15 +34,8 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import {
+import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
-  getOriginBaseUrl,
+import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
-  getSpaceLobbyPath,
-  getSpacePath,
-  getSpaceRoomPath,
-  getSpaceSearchPath,
-  withOriginBaseUrl,
-} from '../../pathUtils';
-import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
   useSpaceLobbySelected,
@@ -69,11 +62,12 @@ import { useRoomsUnread } from '../../../state/hooks/unread';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
 import { copyToClipboard } from '../../../utils/dom';
-import { useClientConfig } from '../../../hooks/useClientConfig';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { StateEvent } from '../../../../types/matrix/room';
 import { stopPropagation } from '../../../utils/keyboard';
+import { getMatrixToRoom } from '../../../plugins/matrix-to';
+import { getViaServers } from '../../../plugins/via-servers';
 
 type SpaceMenuProps = {
   room: Room;
@@ -81,7 +75,6 @@ type SpaceMenuProps = {
 };
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
   const mx = useMatrixClient();
-  const { hashRouter } = useClientConfig();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@@ -100,8 +93,9 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   };
 
   const handleCopyLink = () => {
-    const spacePath = getSpacePath(getCanonicalAliasOrRoomId(mx, room.roomId));
+    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    copyToClipboard(withOriginBaseUrl(getOriginBaseUrl(hashRouter), spacePath));
+    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
+    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
     requestClose();
   };