Merge remote-tracking branch 'origin/lotus' into read-me-update

.gitea/workflows/ci.yml

@@ -35,12 +35,12 @@ jobs:
       - name: Install dependencies
         # Harden against transient registry network failures (ECONNRESET etc.):
         # raise npm's built-in fetch retries/timeouts and retry `npm ci` up to
-        # 5 times with backoff before failing the build.
+        # 3 times with backoff before failing the build.
         run: |
           npm config set fetch-retries 5
-          npm config set fetch-retry-mintimeout 10000
-          npm config set fetch-retry-maxtimeout 60000
-          npm config set fetch-timeout 300000
+          npm config set fetch-retry-mintimeout 20000
+          npm config set fetch-retry-maxtimeout 120000
+          npm config set fetch-timeout 600000
           for attempt in 1 2 3; do
             echo "npm ci attempt $attempt…"
             npm ci && break
@@ -79,11 +79,9 @@ jobs:
 
       - name: ESLint
         run: npm run check:eslint
-        continue-on-error: true
-      
+
       - name: Prettier
         run: npm run check:prettier
-        continue-on-error: true
 
       # ── Security (informational — findings shouldn't block a deploy) ─────
       - name: Audit (high/critical)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,27 +0,0 @@
----
-name: Bug Report
-about: Report something that isn't working in Lotus Chat
-title: ''
-labels: bug
----
-
-**Describe the bug**
-A clear and concise description of what went wrong.
-
-**Steps to reproduce**
-
-1. Go to '...'
-2. Click on '...'
-3. See error
-
-**Expected behavior**
-What you expected to happen instead.
-
-**Client info**
-
-- Lotus Chat version (Settings → Help & About):
-- Platform: Web / Desktop (Windows / macOS / Linux)
-- Browser + version (if web):
-
-**Screenshots / logs**
-If applicable, add screenshots or the browser devtools console output.

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1,5 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
+contact_links:
+  - name: Features, Bug Reports, Questions
+    url: https://github.com/cinnyapp/cinny/discussions/new/choose
+    about: Our preferred starting point if you have any questions or suggestions about features or behavior.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,15 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea or improvement for Lotus Chat
-title: ''
-labels: enhancement
----
-
-**What would you like?**
-A clear and concise description of the feature or change.
-
-**Why / use case**
-What problem does it solve, or what does it make better?
-
-**Alternatives considered**
-Any workarounds or other approaches you've thought about.

.github/ISSUE_TEMPLATE/preapproved.md

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

.vscode/settings.json

@@ -1,19 +1,5 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "js/ts.tsdk.path": "node_modules/typescript/lib",
-  "prettier.requireConfig": true,
-
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

README.md

@@ -13,7 +13,38 @@ The source code is licensed under [AGPLv3](LICENSE), the same license as the ups
 The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the original Cinny logo by Ajay Bura and contributors, used under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). The modified logo is © Lotus Guild and is also made available under CC BY 4.0.
 
 ---
-
+## Development Environment Setup
+#### Getting correct Node version
+- Ensure you have the correct version of node installed, specified in `.node-version`
+- Use this command from the terminal to install nvm 
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
+``` 
+- Reload your terminal shell using (for Ubuntu):
+```bash
+source ~/.bashrc
+```
+- Install the specified Node version 
+```bash
+NODE_VERSION="$(tr -d '[:space:]' < .node-version)"
+nvm install "$NODE_VERSION"
+nvm use "$NODE_VERSION"
+```
+- verify the correct version was installed by running
+```bash
+node --version
+```
+and comparing the output to what is listed in `.node-version`
+#### Install npm packages
+- To install the npm packages listed in `package.json` run: 
+```bash
+ npm i 
+ ```
+### Start Development Server
+```bash
+npm run start
+```
+You should now have an active development server at `localhost:8080`, where you can make changes to the code and see the UI update in real time
 ## Features
 
 ### Messaging

build/lotus-denoise.js

@@ -19,11 +19,10 @@
  *
  * Any failure falls back to the unprocessed mic so calls never break.
  */
-// TODO: MAKE THIS A TS FILE
 (function () {
   'use strict';
 
-  let params;
+  var params;
   try {
     params = new URLSearchParams(window.location.search);
     if (params.get('lotusDenoise') !== 'ml') return;
@@ -34,31 +33,31 @@
   // Derive the parent origin for postMessage targetOrigin from the parentUrl
   // widget param (a full URL) so denoise-status messages aren't broadcast with
   // '*'. Fall back to this frame's own origin if parentUrl is missing/malformed.
-  let targetOrigin;
+  var targetOrigin;
   try {
-    let parentUrl = params.get('parentUrl');
+    var parentUrl = params.get('parentUrl');
     targetOrigin = parentUrl ? new URL(parentUrl).origin : window.location.origin;
   } catch (e) {
     targetOrigin = window.location.origin;
   }
 
-  let md = navigator.mediaDevices;
+  var md = navigator.mediaDevices;
   if (!md || typeof md.getUserMedia !== 'function') return;
   if (typeof AudioWorkletNode === 'undefined' || typeof AudioContext === 'undefined') return;
 
-  let ASSET_BASE = './denoise/';
+  var ASSET_BASE = './denoise/';
 
-  let MODEL = params.get('lotusModel') || 'rnnoise';
+  var MODEL = params.get('lotusModel') || 'rnnoise';
   // DTLN (@workadventure) targets 16 kHz and does not resample internally, so
   // its whole graph runs in a 16 kHz context; RNNoise/Speex (sapphi) and
   // DeepFilterNet 3 are 48 kHz fullband. The processed MediaStreamTrack is
   // published to LiveKit either way (WebRTC/Opus resamples as needed).
-  let SAMPLE_RATE = MODEL === 'dtln' ? 16000 : 48000;
-  let USE_NATIVE_NS = params.get('lotusNativeNS') === 'true';
-  let USE_GATE = params.get('lotusGate') === 'true';
-  let GATE_THRESHOLD = parseFloat(params.get('lotusGateThreshold') || '-45');
+  var SAMPLE_RATE = MODEL === 'dtln' ? 16000 : 48000;
+  var USE_NATIVE_NS = params.get('lotusNativeNS') === 'true';
+  var USE_GATE = params.get('lotusGate') === 'true';
+  var GATE_THRESHOLD = parseFloat(params.get('lotusGateThreshold') || '-45');
 
-  let PROCESSORS = {
+  var PROCESSORS = {
     rnnoise: {
       name: '@sapphi-red/web-noise-suppressor/rnnoise',
       script: 'rnnoiseWorklet.js',
@@ -92,9 +91,9 @@
     },
   };
 
-  let origGetUserMedia = md.getUserMedia.bind(md);
-  let wasmPromises = {};
-  let ctxPromise = null;
+  var origGetUserMedia = md.getUserMedia.bind(md);
+  var wasmPromises = {};
+  var ctxPromise = null;
 
   function checkSimd() {
     try {
@@ -113,12 +112,12 @@
 
   function loadWasm(modelId) {
     if (wasmPromises[modelId]) return wasmPromises[modelId];
-    let p = PROCESSORS[modelId];
+    var p = PROCESSORS[modelId];
     if (!p || !p.wasm) return Promise.resolve(null);
 
     wasmPromises[modelId] = (modelId === 'rnnoise' ? checkSimd() : Promise.resolve(false)).then(
       function (simd) {
-        let file = simd && p.simdWasm ? p.simdWasm : p.wasm;
+        var file = simd && p.simdWasm ? p.simdWasm : p.wasm;
         return fetch(ASSET_BASE + file).then(function (r) {
           if (!r.ok) {
             if (simd && p.simdWasm)
@@ -138,7 +137,7 @@
   function getContext() {
     if (!ctxPromise) {
       ctxPromise = (function () {
-        let ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        var ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
         if (ctx.sampleRate !== SAMPLE_RATE) {
           try {
             ctx.close();
@@ -147,7 +146,7 @@
         }
         // Load worklet modules. DTLN registers its own processor via the
         // dynamic-imported helper (see buildMlNode), so it needs nothing here.
-        let scripts = [];
+        var scripts = [];
         if (MODEL === 'rnnoise' || MODEL === 'speex') scripts.push(PROCESSORS[MODEL].script);
         if (USE_GATE) scripts.push(PROCESSORS.gate.script);
 
@@ -170,7 +169,7 @@
     return ctxPromise;
   }
 
-  let hasNotifiedActive = false;
+  var hasNotifiedActive = false;
 
   // Build the ML denoise AudioWorkletNode. RNNoise/Speex are flat sapphi
   // worklets we instantiate directly with the fetched WASM binary. DTLN comes
@@ -188,9 +187,9 @@
     if (MODEL === 'deepfilternet') {
       // Resolve an absolute self-hosted base so the package's cdnUrl override
       // fetches our vendored df_bg.wasm + ONNX model (never the upstream CDN).
-      let dfnBase = new URL(ASSET_BASE + 'deepfilternet', window.location.href).href;
+      var dfnBase = new URL(ASSET_BASE + 'deepfilternet', window.location.href).href;
       return import(ASSET_BASE + PROCESSORS.deepfilternet.esm).then(function (mod) {
-        let core = new mod.DeepFilterNet3Core({
+        var core = new mod.DeepFilterNet3Core({
           sampleRate: SAMPLE_RATE,
           noiseReductionLevel: 80,
           assetConfig: { cdnUrl: dfnBase },
@@ -213,8 +212,7 @@
         });
       });
     }
-
-    let node = new AudioWorkletNode(ctx, PROCESSORS[MODEL].name, {
+    var node = new AudioWorkletNode(ctx, PROCESSORS[MODEL].name, {
       channelCount: 1,
       numberOfInputs: 1,
       numberOfOutputs: 1,
@@ -232,21 +230,21 @@
   }
 
   function processStream(stream) {
-    let audioTracks = stream.getAudioTracks();
+    var audioTracks = stream.getAudioTracks();
     if (audioTracks.length === 0) return Promise.resolve(stream);
 
     return Promise.all([loadWasm(MODEL), getContext()])
       .then(function (res) {
-        let wasmBinary = res[0];
-        let ctx = res[1];
+        var wasmBinary = res[0];
+        var ctx = res[1];
 
-        let source = ctx.createMediaStreamSource(stream);
-        let dest = ctx.createMediaStreamDestination();
-        let head = source;
+        var source = ctx.createMediaStreamSource(stream);
+        var dest = ctx.createMediaStreamDestination();
+        var head = source;
 
         // 1. Optional Noise Gate
         if (USE_GATE) {
-          let gateNode = new AudioWorkletNode(ctx, PROCESSORS.gate.name, {
+          var gateNode = new AudioWorkletNode(ctx, PROCESSORS.gate.name, {
             processorOptions: {
               openThreshold: GATE_THRESHOLD,
               closeThreshold: GATE_THRESHOLD - 5,
@@ -260,7 +258,7 @@
 
         // 2. ML Processor
         return buildMlNode(ctx, wasmBinary).then(function (ml) {
-          let mlNode = ml.node;
+          var mlNode = ml.node;
           head.connect(mlNode);
           mlNode.connect(dest);
 
@@ -268,15 +266,15 @@
           // the track handoff — audio flows via bypassUntilReady meanwhile.
           if (ml.ready && typeof ml.ready.then === 'function') {
             ml.ready.catch(function (err) {
-              let m = err instanceof Error ? err.message : String(err);
+              var m = err instanceof Error ? err.message : String(err);
               console.error('[lotus-denoise] ' + MODEL + ' init failed:', m);
             });
           }
 
-          let origTrack = audioTracks[0];
-          let processedTrack = dest.stream.getAudioTracks()[0];
+          var origTrack = audioTracks[0];
+          var processedTrack = dest.stream.getAudioTracks()[0];
 
-          let torndown = false;
+          var torndown = false;
           function cleanup() {
             if (torndown) return;
             torndown = true;
@@ -295,7 +293,7 @@
             } catch (e) {}
           }
 
-          let rawStop = processedTrack.stop.bind(processedTrack);
+          var rawStop = processedTrack.stop.bind(processedTrack);
           processedTrack.stop = function () {
             cleanup();
             rawStop();
@@ -321,7 +319,7 @@
             );
           }
 
-          let out = new MediaStream();
+          var out = new MediaStream();
           out.addTrack(processedTrack);
           stream.getVideoTracks().forEach(function (t) {
             out.addTrack(t);
@@ -330,7 +328,7 @@
         });
       })
       .catch(function (e) {
-        let msg = e instanceof Error ? e.message : String(e);
+        var msg = e instanceof Error ? e.message : String(e);
         console.error('[lotus-denoise] Setup failed:', msg);
         window.parent.postMessage(
           { type: 'lotus-denoise-status', active: false, error: msg },
@@ -341,10 +339,10 @@
   }
 
   navigator.mediaDevices.getUserMedia = function (constraints) {
-    let wantsAudio = !!(constraints && constraints.audio);
-    let effective = constraints;
+    var wantsAudio = !!(constraints && constraints.audio);
+    var effective = constraints;
     if (wantsAudio) {
-      let audioC =
+      var audioC =
         typeof constraints.audio === 'object' ? Object.assign({}, constraints.audio) : {};
       audioC.noiseSuppression = USE_NATIVE_NS;
       audioC.channelCount = 1;

package.json

@@ -41,21 +41,24 @@
     "@eslint/eslintrc": "3.3.5",
     "@eslint/js": "10.0.1",
     "@fontsource-variable/inter": "5.2.8",
+    "@giphy/js-fetch-api": "5.8.0",
     "@giphy/js-types": "5.1.0",
+    "@giphy/js-util": "5.2.0",
     "@giphy/react-components": "10.1.2",
     "@sapphi-red/web-noise-suppressor": "0.3.5",
     "@tanstack/react-query": "5.100.13",
     "@tanstack/react-query-devtools": "5.100.13",
     "@tanstack/react-virtual": "3.13.25",
-    "@workadventure/noise-suppression": "0.1.1",
+    "@workadventure/noise-suppression": "0.0.4",
     "await-to-js": "3.0.0",
     "badwords-list": "2.0.1-4",
     "blurhash": "2.0.5",
     "browser-encrypt-attachment": "0.3.0",
     "chroma-js": "3.2.0",
     "classnames": "2.5.1",
+    "dateformat": "5.0.3",
     "dayjs": "1.11.20",
-    "deepfilternet3-noise-filter": "1.3.0",
+    "deepfilternet3-noise-filter": "1.2.1",
     "domhandler": "6.0.1",
     "emojibase": "17.0.0",
     "emojibase-data": "17.0.0",
@@ -72,13 +75,12 @@
     "is-hotkey": "0.2.0",
     "jotai": "2.20.0",
     "jsqr": "1.4.0",
-    "katex": "0.16.47",
+    "katex": "0.16.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
     "matrix-js-sdk": "41.7.0",
     "matrix-widget-api": "1.17.0",
     "millify": "6.1.0",
-    "oidc-client-ts": "3.5.0",
     "pdfjs-dist": "5.7.284",
     "prismjs": "1.30.0",
     "qrcode": "1.5.4",
@@ -92,8 +94,8 @@
     "react-google-recaptcha": "3.1.0",
     "react-i18next": "17.0.8",
     "react-range": "1.10.0",
-    "react-router": "8.3.0",
-    "sanitize-html": "2.17.6",
+    "react-router-dom": "7.15.1",
+    "sanitize-html": "2.17.4",
     "slate": "0.124.1",
     "slate-dom": "0.124.1",
     "slate-history": "0.113.1",
@@ -109,6 +111,7 @@
     "@types/chroma-js": "3.1.2",
     "@types/file-saver": "2.0.7",
     "@types/is-hotkey": "0.1.10",
+    "@types/katex": "0.16.8",
     "@types/node": "25.9.1",
     "@types/prismjs": "1.26.6",
     "@types/qrcode": "1.5.6",
@@ -116,22 +119,28 @@
     "@types/react-dom": "19.2.3",
     "@types/react-google-recaptcha": "2.1.9",
     "@types/sanitize-html": "2.16.1",
+    "@types/ua-parser-js": "0.7.39",
     "@typescript-eslint/eslint-plugin": "8.59.4",
     "@typescript-eslint/parser": "8.59.4",
     "@vanilla-extract/css": "1.20.1",
     "@vanilla-extract/recipes": "0.5.7",
     "@vanilla-extract/vite-plugin": "5.2.2",
     "@vitejs/plugin-react": "6.0.2",
+    "buffer": "6.0.3",
+    "cz-conventional-changelog": "3.3.0",
     "eslint": "9.39.4",
+    "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.1.1",
     "husky": "9.1.7",
+    "lint-staged": "17.0.5",
     "prettier": "3.8.3",
     "tsx": "4.22.4",
     "typescript": "6.0.3",
-    "vite": "8.2.0",
+    "vite": "8.0.14",
     "vite-plugin-pwa": "1.3.0",
     "vite-plugin-static-copy": "4.1.0"
   },
@@ -140,9 +149,5 @@
       "dompurify": ">=3.3.4"
     },
     "js-cookie": ">=3.0.6"
-  },
-  "allowScripts": {
-    "esbuild@0.28.1": true,
-    "protobufjs@7.6.5": true
   }
 }

src/app/components/BackRouteHandler.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useCallback } from 'react';
-import { matchPath, useLocation, useNavigate } from 'react-router';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import {
   getDirectPath,
   getExplorePath,

src/app/components/nav/NavItem.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { ComponentProps, forwardRef } from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { as } from 'folds';
 import * as css from './styles.css';
 

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

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';

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

@@ -1,6 +1,6 @@
 import { Box, Button, color, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { VerificationRequest } from 'matrix-js-sdk/lib/crypto-api';
 import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
 import { VerificationStatus } from '../../hooks/useDeviceVerificationStatus';

src/app/features/create-chat/CreateChat.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds';
 import React, { FormEventHandler, useCallback, useState } from 'react';
 import { ICreateRoomStateEvent, MatrixError, Preset, Visibility } from 'matrix-js-sdk';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import { addRoomIdToMDirect, isUserId } from '../../utils/matrix';

src/app/features/lobby/Lobby.tsx

@@ -2,7 +2,7 @@ import React, { MouseEventHandler, useCallback, useMemo, useRef, useState } from
 import { Box, Chip, Icon, IconButton, Icons, Line, Scroll, Spinner, Text, config } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';

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

@@ -17,7 +17,7 @@ import {
 import { useAtom, useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import { EventTimeline, EventType, Room, SearchOrderBy } from 'matrix-js-sdk';
 import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';

src/app/features/room/CallChatView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSetAtom } from 'jotai';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds';
 import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';

src/app/features/room/Room.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Box, Line } from 'folds';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { RoomView } from './RoomView';

src/app/features/room/RoomViewHeader.tsx

@@ -25,7 +25,7 @@ import {
   Button,
 } from 'folds';
 import { useAtom } from 'jotai';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Room } from 'matrix-js-sdk';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';

src/app/hooks/router/useCreateSelected.ts

@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router';
+import { useMatch } from 'react-router-dom';
 import { getCreatePath } from '../../pages/pathUtils';
 
 export const useCreateSelected = (): boolean => {

src/app/hooks/router/useDirectSelected.ts

@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router';
+import { useMatch } from 'react-router-dom';
 import { getDirectCreatePath, getDirectPath } from '../../pages/pathUtils';
 
 export const useDirectSelected = (): boolean => {

src/app/hooks/router/useExploreSelected.ts

@@ -1,4 +1,4 @@
-import { useMatch, useParams } from 'react-router';
+import { useMatch, useParams } from 'react-router-dom';
 import { getExploreFeaturedPath, getExplorePath } from '../../pages/pathUtils';
 
 export const useExploreSelected = (): boolean => {

src/app/hooks/router/useHomeSelected.ts

@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router';
+import { useMatch } from 'react-router-dom';
 import {
   getHomeCreatePath,
   getHomeJoinPath,

src/app/hooks/router/useInbox.ts

@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router';
+import { useMatch } from 'react-router-dom';
 import {
   getInboxInvitesPath,
   getInboxNotificationsPath,

src/app/hooks/router/useSearchParamsViaServers.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import { getRoomSearchParams } from '../../pages/pathSearchParam';
 import { decodeSearchParamValueArray } from '../../pages/pathUtils';
 

src/app/hooks/router/useSelectedRoom.ts

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { getCanonicalAliasRoomId, isRoomAlias } from '../../utils/matrix';
 import { useMatrixClient } from '../useMatrixClient';
 

src/app/hooks/router/useSelectedSpace.ts

@@ -1,4 +1,4 @@
-import { useMatch, useParams } from 'react-router';
+import { useMatch, useParams } from 'react-router-dom';
 import { getCanonicalAliasRoomId, isRoomAlias } from '../../utils/matrix';
 import { useMatrixClient } from '../useMatrixClient';
 import { getSpaceLobbyPath, getSpaceSearchPath } from '../../pages/pathUtils';

src/app/hooks/useDeepLinkNavigate.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { useMatrixClient } from './useMatrixClient';
 import { useRoomNavigate } from './useRoomNavigate';
 import { isRoomId } from '../utils/matrix';

src/app/hooks/useMentionClickHandler.ts

@@ -1,5 +1,5 @@
 import { ReactEventHandler, useCallback } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { useRoomNavigate } from './useRoomNavigate';
 import { useMatrixClient } from './useMatrixClient';
 import { isRoomId, isUserId } from '../utils/matrix';

src/app/hooks/useNavToActivePathMapper.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSetAtom } from 'jotai';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { useNavToActivePathAtom } from '../state/hooks/navToActivePath';
 
 export const useNavToActivePathMapper = (navId: string) => {

src/app/hooks/useRoomNavigate.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { NavigateOptions, useNavigate } from 'react-router';
+import { NavigateOptions, useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { getCanonicalAliasOrRoomId } from '../utils/matrix';
 import {

src/app/hooks/useTauriToastActions.ts

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { MsgType } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
 import { useTauriEvent } from './useTauri';

src/app/pages/App.tsx

@@ -11,7 +11,7 @@ import {
   toRem,
   TooltipContainerProvider,
 } from 'folds';
-import { RouterProvider } from 'react-router';
+import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 

src/app/pages/MobileFriendly.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { useMatch } from 'react-router';
+import { useMatch } from 'react-router-dom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from './paths';
 

src/app/pages/RouteError.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useRouteError, isRouteErrorResponse } from 'react-router';
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
 import { Box, Button, config, Text, toRem } from 'folds';
 
 export function RouteError() {

src/app/pages/Router.tsx

@@ -6,7 +6,7 @@ import {
   createHashRouter,
   createRoutesFromElements,
   redirect,
-} from 'react-router';
+} from 'react-router-dom';
 import { RoomSkeleton } from '../components/RoomSkeleton';
 import { LobbySkeleton } from '../components/LobbySkeleton';
 import { AuthSkeleton } from '../components/AuthSkeleton';

src/app/pages/auth/AuthLayout.tsx

@@ -1,6 +1,13 @@
 import React, { useCallback, useEffect } from 'react';
 import { Box, Header, Scroll, Spinner, Text, color } from 'folds';
-import { Outlet, generatePath, matchPath, useLocation, useNavigate, useParams } from 'react-router';
+import {
+  Outlet,
+  generatePath,
+  matchPath,
+  useLocation,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
 import classNames from 'classnames';
 
 import { AuthFooter } from './AuthFooter';

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text, color } from 'folds';
-import { Link, useSearchParams } from 'react-router';
+import { Link, useSearchParams } from 'react-router-dom';
 import { SSOAction } from 'matrix-js-sdk';
 import { useAuthFlows } from '../../../hooks/useAuthFlows';
 import { useAuthServer } from '../../../hooks/useAuthServer';

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

@@ -18,7 +18,7 @@ import {
   config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { MatrixError } from 'matrix-js-sdk';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
 import { EMAIL_REGEX } from '../../../utils/regex';

src/app/pages/auth/login/loginUtil.ts

@@ -1,7 +1,7 @@
 import to from 'await-to-js';
 import { LoginRequest, LoginResponse, MatrixError, createClient } from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { ClientConfig, clientAllowedServer } from '../../../hooks/useClientConfig';
 import { autoDiscovery, specVersions } from '../../../cs-api';
 import { ErrorCode } from '../../../cs-errorcode';

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text, color } from 'folds';
-import { Link, useSearchParams } from 'react-router';
+import { Link, useSearchParams } from 'react-router-dom';
 import { SSOAction } from 'matrix-js-sdk';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { RegisterFlowStatus, useAuthFlows } from '../../../hooks/useAuthFlows';

src/app/pages/auth/register/registerUtil.ts

@@ -7,7 +7,7 @@ import {
   RegisterResponse,
 } from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { LoginPathSearchParams } from '../../paths';
 import { ErrorCode } from '../../../cs-errorcode';
 import {

src/app/pages/auth/reset-password/PasswordResetForm.tsx

@@ -12,7 +12,7 @@ import {
   color,
   config,
 } from 'folds';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { AuthDict, AuthType, MatrixError, createClient } from 'matrix-js-sdk';
 import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';

src/app/pages/auth/reset-password/ResetPassword.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from 'folds';
 import React, { useMemo } from 'react';
-import { Link, useSearchParams } from 'react-router';
+import { Link, useSearchParams } from 'react-router-dom';
 import { getLoginPath } from '../../pathUtils';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { PasswordResetForm } from './PasswordResetForm';

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -1,6 +1,6 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   ClientEvent,
   ClientEventHandlerMap,

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

@@ -19,7 +19,7 @@ import {
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { factoryRoomIdByActivity } from '../../../utils/sort';
 import {

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getDirectCreateSearchParams } from '../../pathSearchParam';

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';

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

@@ -1,5 +1,5 @@
 import React, { FormEventHandler, useCallback, useRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import {
   Avatar,

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

@@ -27,7 +27,7 @@ import {
   config,
   toRem,
 } from 'folds';
-import { useNavigate, useParams, useSearchParams } from 'react-router';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
 import { useQuery } from '@tanstack/react-query';

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

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   Avatar,
   Box,

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';

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

@@ -12,7 +12,7 @@ import {
   config,
   toRem,
 } from 'folds';
-import { useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import {
   INotification,
   INotificationsResponse,

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

@@ -1,7 +1,7 @@
 import React, { MouseEventHandler, useState } from 'react';
 import { Box, config, Icon, Icons, Menu, PopOut, RectCords, Text } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
 import { stopPropagation } from '../../../utils/keyboard';
 import { SequenceCard } from '../../../components/sequence-card';

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

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, forwardRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon, Icons } from 'folds';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
 import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
 import { useExploreSelected } from '../../../hooks/router/useExploreSelected';

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

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, forwardRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
 import { useAtomValue } from 'jotai';
 import FocusTrap from 'focus-trap-react';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { Icon, Icons } from 'folds';
 import { useAtomValue } from 'jotai';
 import {

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

@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import {
   Box,
   Icon,

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useSpaces } from '../../../state/hooks/roomList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';

src/app/pages/pathUtils.ts

@@ -1,4 +1,4 @@
-import { generatePath, Path } from 'react-router';
+import { generatePath, Path } from 'react-router-dom';
 import {
   DIRECT_CREATE_PATH,
   DIRECT_PATH,

src/app/state/navToActivePath.test.ts

@@ -2,7 +2,7 @@ import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { createStore } from 'jotai';
 import { enableMapSet } from 'immer';
-import type { Path } from 'react-router';
+import type { Path } from 'react-router-dom';
 
 // `makeNavToActivePathAtom(userId)` is a factory: localStorage is read when the
 // returned atom is first created/accessed (not at module load), but we still

src/app/state/navToActivePath.ts

@@ -1,6 +1,6 @@
 import { WritableAtom, atom } from 'jotai';
 import { produce } from 'immer';
-import { Path } from 'react-router';
+import { Path } from 'react-router-dom';
 import {
   atomWithLocalStorage,
   getLocalStorageItem,

src/app/utils/translation/engine.ts

@@ -69,7 +69,7 @@ export interface ChromeLanguageDetectorFactory {
 
 declare global {
   // eslint-disable-next-line vars-on-top
-  let Translator: ChromeTranslatorFactory | undefined;
+  var Translator: ChromeTranslatorFactory | undefined;
   // eslint-disable-next-line vars-on-top
-  let LanguageDetector: ChromeLanguageDetectorFactory | undefined;
+  var LanguageDetector: ChromeLanguageDetectorFactory | undefined;
 }

vite.config.js

@@ -7,7 +7,7 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { VitePWA } from 'vite-plugin-pwa';
 import fs from 'fs';
 import path from 'path';
-import buildConfig from './build.config.ts';
+import buildConfig from './build.config';
 
 const copyFiles = {
   targets: [
@@ -227,7 +227,7 @@ const vendorChunks = (id) => {
   if (id.includes('node_modules/matrix-js-sdk')) return 'matrix-sdk';
   if (id.includes('node_modules/react-dom')) return 'react-dom';
   if (
-    id.includes('node_modules/react-router') ||
+    id.includes('node_modules/react-router-dom') ||
     id.includes('node_modules/@remix-run') ||
     id.includes('node_modules/react-router/')
   )
@@ -282,7 +282,7 @@ export default defineConfig({
         dontCacheBustURLsMatching: /assets\//,
         // Raised above the 2 MB default so the ~5.5 MB matrix-sdk crypto wasm
         // (hash-busted and hot on every session) is precached deliberately.
-        maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+        maximumFileSizeToCacheInBytes: 6 * 1024 * 1024,
         // codeSplitting: false is not yet supported by vite-plugin-pwa 1.3.0;
         // the inlineDynamicImports deprecation warning from Vite is from pwa internal build
       },
@@ -293,8 +293,10 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    define: {
-      global: 'globalThis',
+    rolldownOptions: {
+      define: {
+        global: 'globalThis',
+      },
     },
   },
   build: {