(chore) remove outdated code (#1765)

* optimize room typing members hook

* remove unused code - WIP

* remove old code from initMatrix

* remove twemojify function

* remove old sanitize util

* delete old markdown util

* delete Math atom component

* uninstall unused dependencies

* remove old notification system

* decrypt message in inbox notification center and fix refresh in background

* improve notification

---------

Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>

index.html

@@ -90,12 +90,6 @@
       window.global ||= window;
     </script>
     <div id="root"></div>
-    <audio id="notificationSound">
-      <source src="./public/sound/notification.ogg" type="audio/ogg" />
-    </audio>
-    <audio id="inviteSound">
-      <source src="./public/sound/invite.ogg" type="audio/ogg" />
-    </audio>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

package-lock.json

@@ -13,7 +13,6 @@
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
         "@fontsource/inter": "4.5.14",
-        "@khanacademy/simple-markdown": "0.8.6",
         "@matrix-org/olm": "3.2.14",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
@@ -41,8 +40,6 @@
         "immer": "9.0.16",
         "is-hotkey": "0.2.0",
         "jotai": "2.6.0",
-        "katex": "0.16.10",
-        "linkify-html": "4.0.2",
         "linkify-react": "4.1.1",
         "linkifyjs": "4.0.2",
         "matrix-js-sdk": "29.1.0",
@@ -54,8 +51,6 @@
         "react-aria": "3.29.1",
         "react-autosize-textarea": "7.1.0",
         "react-blurhash": "0.2.0",
-        "react-dnd": "16.0.1",
-        "react-dnd-html5-backend": "16.0.1",
         "react-dom": "18.2.0",
         "react-error-boundary": "4.0.10",
         "react-google-recaptcha": "2.1.0",
@@ -67,7 +62,6 @@
         "slate-history": "0.93.0",
         "slate-react": "0.98.4",
         "tippy.js": "6.3.7",
-        "twemoji": "14.0.2",
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
@@ -1109,18 +1103,6 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
-    "node_modules/@khanacademy/simple-markdown": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz",
-      "integrity": "sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==",
-      "dependencies": {
-        "@types/react": ">=16.0.0"
-      },
-      "peerDependencies": {
-        "react": "16.14.0",
-        "react-dom": "16.14.0"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -1942,21 +1924,6 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@react-dnd/asap": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
-      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
-    },
-    "node_modules/@react-dnd/invariant": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
-      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
-    },
-    "node_modules/@react-dnd/shallowequal": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
-      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
-    },
     "node_modules/@react-stately/calendar": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.4.1.tgz",
@@ -3307,12 +3274,14 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.2.39",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
       "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3354,7 +3323,8 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
     },
     "node_modules/@types/semver": {
       "version": "7.3.13",
@@ -4419,14 +4389,6 @@
         "color-support": "bin.js"
       }
     },
-    "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/compute-scroll-into-view": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
@@ -4723,16 +4685,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/dnd-core": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
-      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
-      "dependencies": {
-        "@react-dnd/asap": "^5.0.1",
-        "@react-dnd/invariant": "^4.0.1",
-        "redux": "^4.2.0"
-      }
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5559,7 +5511,8 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/fast-glob": {
       "version": "3.2.12",
@@ -5796,27 +5749,6 @@
         "react": ">=16.8.0"
       }
     },
-    "node_modules/fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=6 <7 || >=8"
-      }
-    },
-    "node_modules/fs-extra/node_modules/jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -6060,7 +5992,8 @@
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "dev": true
     },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
@@ -6749,17 +6682,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonfile": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
-      "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
-      "dependencies": {
-        "universalify": "^0.1.2"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -6778,21 +6700,6 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
     },
-    "node_modules/katex": {
-      "version": "0.16.10",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
-      "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
-      "funding": [
-        "https://opencollective.com/katex",
-        "https://github.com/sponsors/katex"
-      ],
-      "dependencies": {
-        "commander": "^8.3.0"
-      },
-      "bin": {
-        "katex": "cli.js"
-      }
-    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
@@ -6854,14 +6761,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/linkify-html": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/linkify-html/-/linkify-html-4.0.2.tgz",
-      "integrity": "sha512-YcN3tsyutK2Y/uSuoG0zne8FQdoqzrAgNU5ko0DWE7M2oQ3ms4z/202f2W4TvRm9uxKdrsWAullfynANLaVMqw==",
-      "peerDependencies": {
-        "linkifyjs": "^4.0.0"
-      }
-    },
     "node_modules/linkify-react": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/linkify-react/-/linkify-react-4.1.1.tgz",
@@ -7766,43 +7665,6 @@
         "react": ">=15"
       }
     },
-    "node_modules/react-dnd": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
-      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
-      "dependencies": {
-        "@react-dnd/invariant": "^4.0.1",
-        "@react-dnd/shallowequal": "^4.0.1",
-        "dnd-core": "^16.0.1",
-        "fast-deep-equal": "^3.1.3",
-        "hoist-non-react-statics": "^3.3.2"
-      },
-      "peerDependencies": {
-        "@types/hoist-non-react-statics": ">= 3.3.1",
-        "@types/node": ">= 12",
-        "@types/react": ">= 16",
-        "react": ">= 16.14"
-      },
-      "peerDependenciesMeta": {
-        "@types/hoist-non-react-statics": {
-          "optional": true
-        },
-        "@types/node": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-dnd-html5-backend": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
-      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
-      "dependencies": {
-        "dnd-core": "^16.0.1"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -7950,14 +7812,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/redux": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
-      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
-      }
-    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -8711,22 +8565,6 @@
         "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
       }
     },
-    "node_modules/twemoji": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.2.tgz",
-      "integrity": "sha512-BzOoXIe1QVdmsUmZ54xbEH+8AgtOKUiG53zO5vVP2iUu6h5u9lN15NcuS6te4OY96qx0H7JK9vjjl9WQbkTRuA==",
-      "dependencies": {
-        "fs-extra": "^8.0.1",
-        "jsonfile": "^5.0.0",
-        "twemoji-parser": "14.0.0",
-        "universalify": "^0.1.2"
-      }
-    },
-    "node_modules/twemoji-parser": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
-      "integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA=="
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -8875,14 +8713,6 @@
       "resolved": "https://registry.npmjs.org/unhomoglyph/-/unhomoglyph-1.0.6.tgz",
       "integrity": "sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg=="
     },
-    "node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",

package.json

@@ -24,7 +24,6 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
@@ -52,8 +51,6 @@
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
     "jotai": "2.6.0",
-    "katex": "0.16.10",
-    "linkify-html": "4.0.2",
     "linkify-react": "4.1.1",
     "linkifyjs": "4.0.2",
     "matrix-js-sdk": "29.1.0",
@@ -65,8 +62,6 @@
     "react-aria": "3.29.1",
     "react-autosize-textarea": "7.1.0",
     "react-blurhash": "0.2.0",
-    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
     "react-google-recaptcha": "2.1.0",
@@ -78,7 +73,6 @@
     "slate-history": "0.93.0",
     "slate-react": "0.98.4",
     "tippy.js": "6.3.7",
-    "twemoji": "14.0.2",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {

src/app/atoms/avatar/Avatar.jsx

@@ -2,17 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
 import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
 import { avatarInitials } from '../../../util/common';
 
-const Avatar = React.forwardRef(({
+const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
-  text, bgColor, iconSrc, iconColor, imageSrc, size,
-}, ref) => {
   let textSize = 's1';
   if (size === 'large') textSize = 'h1';
   if (size === 'small') textSize = 'b1';
@@ -20,34 +16,34 @@ const Avatar = React.forwardRef(({
 
   return (
     <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
-      {
+      {imageSrc !== null ? (
-        imageSrc !== null
-          ? (
         <img
           draggable="false"
           src={imageSrc}
-              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
+          onLoad={(e) => {
-              onError={(e) => { e.target.src = ImageBrokenSVG; }}
+            e.target.style.backgroundColor = 'transparent';
+          }}
+          onError={(e) => {
+            e.target.src = ImageBrokenSVG;
+          }}
           alt=""
         />
-          )
+      ) : (
-          : (
         <span
           style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
           className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
         >
-              {
+          {iconSrc !== null ? (
-                iconSrc !== null
+            <RawIcon size={size} src={iconSrc} color={iconColor} />
-                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
+          ) : (
-                  : text !== null && (
+            text !== null && (
               <Text variant={textSize} primary>
-                      {twemojify(avatarInitials(text))}
+                {avatarInitials(text)}
               </Text>
             )
-              }
+          )}
         </span>
-          )
+      )}
-      }
     </div>
   );
 });

src/app/atoms/math/Math.jsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './Math.scss';
-
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
-
-import 'katex/dist/contrib/copy-tex';
-
-const Math = React.memo(({
-  content, throwOnError, errorColor, displayMode,
-}) => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
-  }, [content, throwOnError, errorColor, displayMode]);
-
-  return <span ref={ref} />;
-});
-Math.defaultProps = {
-  throwOnError: null,
-  errorColor: null,
-  displayMode: null,
-};
-Math.propTypes = {
-  content: PropTypes.string.isRequired,
-  throwOnError: PropTypes.bool,
-  errorColor: PropTypes.string,
-  displayMode: PropTypes.bool,
-};
-
-export default Math;

src/app/atoms/math/Math.scss

@@ -1,3 +0,0 @@
-.katex-display {
-  margin: 0 !important;
-}

src/app/features/room/RoomInput.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
 import { EventType, IContent, MsgType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
@@ -56,7 +56,6 @@ import {
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import initMatrix from '../../../client/initMatrix';
 import { TUploadContent, encryptFile, getImageInfo, getMxIdLocalPart } from '../../utils/matrix';
 import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
 import { useFilePicker } from '../../hooks/useFilePicker';
@@ -95,6 +94,7 @@ import {
 } from './msgContent';
 import colorMXID from '../../../util/colorMXID';
 import {
+  getAllParents,
   getMemberDisplayName,
   parseReplyBody,
   parseReplyFormattedBody,
@@ -107,6 +107,7 @@ import { Command, SHRUG, useCommands } from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import { ReplyLayout } from '../../components/message';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
 
 interface RoomInputProps {
   editor: Editor;
@@ -121,6 +122,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const commands = useCommands(mx, room);
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
+    const roomToParents = useAtomValue(roomToParentsAtom);
 
     const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
     const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
@@ -133,13 +135,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
 
     const imagePackRooms: Room[] = useMemo(() => {
-      const allParentSpaces = [roomId, ...(initMatrix.roomList?.getAllParentSpaces(roomId) ?? [])];
+      const allParentSpaces = [roomId].concat(Array.from(getAllParents(roomToParents, roomId)));
       return allParentSpaces.reduce<Room[]>((list, rId) => {
         const r = mx.getRoom(rId);
         if (r) list.push(r);
         return list;
       }, []);
-    }, [mx, roomId]);
+    }, [mx, roomId, roomToParents]);
 
     const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
     const [autocompleteQuery, setAutocompleteQuery] =

src/app/features/room/RoomTimeline.tsx

@@ -28,7 +28,7 @@ import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
 import to from 'await-to-js';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import {
   Badge,
   Box,
@@ -74,6 +74,7 @@ import { getReactCustomHtmlParser } from '../../plugins/react-custom-html-parser
 import {
   canEditEvent,
   decryptAllTimelineEvent,
+  getAllParents,
   getEditedEvent,
   getEventReactions,
   getLatestEditableEvt,
@@ -103,14 +104,15 @@ import { createMentionElement, isEmptyEditor, moveCursor } from '../../component
 import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
-import initMatrix from '../../../client/initMatrix';
 import { useKeyDown } from '../../hooks/useKeyDown';
-import cons from '../../../client/state/cons';
 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';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -444,18 +446,19 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   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 imagePackRooms: Room[] = useMemo(() => {
-    const allParentSpaces = [
+    const allParentSpaces = [room.roomId].concat(
-      room.roomId,
+      Array.from(getAllParents(roomToParents, room.roomId))
-      ...(initMatrix.roomList?.getAllParentSpaces(room.roomId) ?? []),
+    );
-    ];
     return allParentSpaces.reduce<Room[]>((list, rId) => {
       const r = mx.getRoom(rId);
       if (r) list.push(r);
       return list;
     }, []);
-  }, [mx, room]);
+  }, [mx, room, roomToParents]);
 
   const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
   const readUptoEventIdRef = useRef<string>();
@@ -794,15 +797,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   // Remove unreadInfo on mark as read
   useEffect(() => {
-    const handleFullRead = (rId: string) => {
+    if (!unread) {
-      if (rId !== room.roomId) return;
       setUnreadInfo(undefined);
-    };
+    }
-    initMatrix.notifications?.on(cons.events.notifications.FULL_READ, handleFullRead);
+  }, [unread]);
-    return () => {
-      initMatrix.notifications?.removeListener(cons.events.notifications.FULL_READ, handleFullRead);
-    };
-  }, [room]);
 
   // scroll out of view msg editor in view.
   useEffect(() => {

src/app/hooks/useCategorizedSpaces.js

@@ -1,25 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-import cons from '../../client/state/cons';
-
-export function useCategorizedSpaces() {
-  const { accountData } = initMatrix;
-  const [categorizedSpaces, setCategorizedSpaces] = useState([...accountData.categorizedSpaces]);
-
-  useEffect(() => {
-    const handleCategorizedSpaces = () => {
-      setCategorizedSpaces([...accountData.categorizedSpaces]);
-    };
-    accountData.on(cons.events.accountData.CATEGORIZE_SPACE_UPDATED, handleCategorizedSpaces);
-    return () => {
-      accountData.removeListener(
-        cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
-        handleCategorizedSpaces,
-      );
-    };
-  }, []);
-
-  return [categorizedSpaces];
-}

src/app/hooks/useCommands.ts

@@ -114,12 +114,12 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Leave current room.',
         exe: async (payload) => {
           if (payload.trim() === '') {
-            roomActions.leave(room.roomId);
+            mx.leave(room.roomId);
             return;
           }
           const rawIds = payload.split(' ');
           const roomIds = rawIds.filter((id) => isRoomId(id));
-          roomIds.map((id) => roomActions.leave(id));
+          roomIds.map((id) => mx.leave(id));
         },
       },
       [Command.Invite]: {

src/app/hooks/usePreviousValue.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const usePreviousValue = <T>(currentValue: T, initialValue: T) => {
+  const valueRef = useRef(initialValue);
+
+  useEffect(() => {
+    valueRef.current = currentValue;
+  }, [currentValue]);
+
+  return valueRef.current;
+};

src/app/hooks/useRoomTypingMembers.ts

@@ -1,10 +1,26 @@
 import { useAtomValue } from 'jotai';
-import { useMemo } from 'react';
+import { selectAtom } from 'jotai/utils';
-import { roomIdToTypingMembersAtom, selectRoomTypingMembersAtom } from '../state/typingMembers';
+import { useCallback } from 'react';
+import {
+  IRoomIdToTypingMembers,
+  TypingReceipt,
+  roomIdToTypingMembersAtom,
+} from '../state/typingMembers';
+
+const typingReceiptEqual = (a: TypingReceipt, b: TypingReceipt): boolean =>
+  a.userId === b.userId && a.ts === b.ts;
+
+const equalTypingMembers = (x: TypingReceipt[], y: TypingReceipt[]): boolean => {
+  if (x.length !== y.length) return false;
+  return x.every((a, i) => typingReceiptEqual(a, y[i]));
+};
 
 export const useRoomTypingMember = (roomId: string) => {
-  const typing = useAtomValue(
+  const selector = useCallback(
-    useMemo(() => selectRoomTypingMembersAtom(roomId, roomIdToTypingMembersAtom), [roomId])
+    (roomToTyping: IRoomIdToTypingMembers) => roomToTyping.get(roomId) ?? [],
+    [roomId]
   );
+
+  const typing = useAtomValue(selectAtom(roomIdToTypingMembersAtom, selector, equalTypingMembers));
   return typing;
 };

src/app/hooks/useSelectedSpace.js

@@ -1,21 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import cons from '../../client/state/cons';
-import navigation from '../../client/state/navigation';
-
-export function useSelectedSpace() {
-  const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
-
-  useEffect(() => {
-    const onSpaceSelected = (roomId) => {
-      setSpaceId(roomId);
-    };
-    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-    return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-    };
-  }, []);
-
-  return [spaceId];
-}

src/app/hooks/useSelectedTab.js

@@ -1,21 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import cons from '../../client/state/cons';
-import navigation from '../../client/state/navigation';
-
-export function useSelectedTab() {
-  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
-
-  useEffect(() => {
-    const onTabSelected = (tabId) => {
-      setSelectedTab(tabId);
-    };
-    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    };
-  }, []);
-
-  return [selectedTab];
-}

src/app/hooks/useSpaceShortcut.js

@@ -1,25 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-import cons from '../../client/state/cons';
-
-export function useSpaceShortcut() {
-  const { accountData } = initMatrix;
-  const [spaceShortcut, setSpaceShortcut] = useState([...accountData.spaceShortcut]);
-
-  useEffect(() => {
-    const onSpaceShortcutUpdated = () => {
-      setSpaceShortcut([...accountData.spaceShortcut]);
-    };
-    accountData.on(cons.events.accountData.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-    return () => {
-      accountData.removeListener(
-        cons.events.accountData.SPACE_SHORTCUT_UPDATED,
-        onSpaceShortcutUpdated,
-      );
-    };
-  }, []);
-
-  return [spaceShortcut];
-}

src/app/molecules/dialog/Dialog.jsx

@@ -2,16 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Dialog.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import Text from '../../atoms/text/Text';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import RawModal from '../../atoms/modal/RawModal';
 
 function Dialog({
-  className, isOpen, title, onAfterOpen, onAfterClose,
+  className,
-  contentOptions, onRequestClose, closeFromOutside, children,
+  isOpen,
+  title,
+  onAfterOpen,
+  onAfterClose,
+  contentOptions,
+  onRequestClose,
+  closeFromOutside,
+  children,
   invisibleScroll,
 }) {
   return (
@@ -28,19 +33,19 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              {
+              {typeof title === 'string' ? (
-                typeof title === 'string'
+                <Text variant="h2" weight="medium" primary>
-                  ? <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
+                  {title}
-                  : title
+                </Text>
-              }
+              ) : (
+                title
+              )}
             </TitleWrapper>
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
             <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
-              <div className="dialog__content-container">
+              <div className="dialog__content-container">{children}</div>
-                {children}
-              </div>
             </ScrollView>
           </div>
         </div>

src/app/molecules/following-members/FollowingMembers.jsx

@@ -1,61 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import './FollowingMembers.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import { openReadReceipts } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
-
-import { getUsersActionJsx } from '../../organisms/room/common';
-
-function FollowingMembers({ roomTimeline }) {
-  const [followingMembers, setFollowingMembers] = useState([]);
-  const { roomId } = roomTimeline;
-  const mx = initMatrix.matrixClient;
-  const myUserId = mx.getUserId();
-
-  useEffect(() => {
-    const updateFollowingMembers = () => {
-      setFollowingMembers(roomTimeline.getLiveReaders());
-    };
-    const updateOnEvent = (event, room) => {
-      if (room.roomId !== roomId) return;
-      setFollowingMembers(roomTimeline.getLiveReaders());
-    };
-    updateFollowingMembers();
-    roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
-    mx.on('Room.timeline', updateOnEvent);
-    return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
-      mx.removeListener('Room.timeline', updateOnEvent);
-    };
-  }, [roomTimeline, roomId]);
-
-  const filteredM = followingMembers.filter((userId) => userId !== myUserId);
-
-  return (
-    filteredM.length !== 0 && (
-      <button
-        className="following-members"
-        onClick={() => openReadReceipts(roomId, followingMembers)}
-        type="button"
-      >
-        <RawIcon size="extra-small" src={TickMarkIC} />
-        <Text variant="b2">
-          {getUsersActionJsx(roomId, filteredM, 'following the conversation.')}
-        </Text>
-      </button>
-    )
-  );
-}
-
-FollowingMembers.propTypes = {
-  roomTimeline: PropTypes.shape({}).isRequired,
-};
-
-export default FollowingMembers;

src/app/molecules/following-members/FollowingMembers.scss

@@ -1,31 +0,0 @@
-@use '../../partials/text';
-
-.following-members {
-  width: 100%;
-  padding: 0 var(--sp-normal);
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  cursor: pointer;
-  
-  & .ic-raw {
-    min-width: var(--ic-extra-small);
-    opacity: 0.4;
-    margin: 0 var(--sp-extra-tight);
-  }
-  & .text {
-    @extend .cp-txt__ellipsis;
-    color: var(--tc-surface-low);
-    b {
-      color: var(--tc-surface-normal);
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background-color: var(--bg-surface-hover);
-  }
-  &:active {
-    background-color: var(--bg-surface-active);
-  }
-}

src/app/molecules/image-lightbox/ImageLightbox.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImageLightbox.scss';
-import FileSaver from 'file-saver';
-
-import Text from '../../atoms/text/Text';
-import RawModal from '../../atoms/modal/RawModal';
-import IconButton from '../../atoms/button/IconButton';
-
-import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
-import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
-
-function ImageLightbox({
-  url, alt, isOpen, onRequestClose,
-}) {
-  const handleDownload = () => {
-    FileSaver.saveAs(url, alt);
-  };
-
-  return (
-    <RawModal
-      className="image-lightbox__modal"
-      overlayClassName="image-lightbox__overlay"
-      isOpen={isOpen}
-      onRequestClose={onRequestClose}
-      size="large"
-    >
-      <div className="image-lightbox__header">
-        <Text variant="b2" weight="medium">{alt}</Text>
-        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
-        <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
-      </div>
-      <div className="image-lightbox__content">
-        <img src={url} alt={alt} />
-      </div>
-    </RawModal>
-  );
-}
-
-ImageLightbox.propTypes = {
-  url: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func.isRequired,
-};
-
-export default ImageLightbox;

src/app/molecules/image-lightbox/ImageLightbox.scss

@@ -1,50 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-
-.image-lightbox__modal {
-  box-shadow: none;
-  width: unset;
-  gap: var(--sp-normal);
-
-  border-radius: 0;
-  pointer-events: none;
-
-  & .text {
-    color: white;
-  }
-  & .ic-raw {
-    background-color: white;
-  }
-}
-
-.image-lightbox__overlay {
-  background-color: var(--bg-overlay-low);
-}
-
-
-.image-lightbox__header > *,
-.image-lightbox__content > * {
-  pointer-events: all;
-}
-.image-lightbox__header {
-  display: flex;
-  align-items: center;
-
-  & > .text {
-    @extend .cp-fx__item-one;
-    @extend .cp-txt__ellipsis;
-  }
-}
-.image-lightbox__content {
-  display: flex;
-  justify-content: center;
-  max-height: 80vh;
-
-  & img {
-    background-color: var(--bg-surface-low);
-    object-fit: contain;
-    max-width: 100%;
-    max-height: 100%;
-    border-radius: var(--bo-radius);
-  }
-}