remove dead code

.npmrc

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

Dockerfile

@@ -3,7 +3,7 @@ FROM node:17.9.0-alpine3.15 as builder
 
 WORKDIR /src
 
-COPY .npmrc package.json package-lock.json /src/
+COPY package.json package-lock.json /src/
 RUN npm ci
 COPY . /src/
 RUN npm run build

package.json

@@ -4,8 +4,8 @@
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "npm": ">=6.14.8",
-    "node": ">=14.15.0"
+    "npm": ">=6.14.8 <=8.5.5",
+    "node": ">=14.15.0 <=17.9.0"
   },
   "scripts": {
     "start": "webpack serve --config ./webpack.dev.js --open",
@@ -15,69 +15,71 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "4.5.12",
-    "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.3",
-    "@matrix-org/olm": "3.2.12",
-    "@tippyjs/react": "4.2.6",
-    "babel-polyfill": "6.26.0",
-    "blurhash": "1.1.5",
-    "browser-encrypt-attachment": "0.3.0",
-    "dateformat": "5.0.3",
-    "emojibase-data": "7.0.1",
-    "file-saver": "2.0.5",
-    "flux": "4.0.3",
-    "formik": "2.2.9",
-    "html-react-parser": "3.0.4",
-    "katex": "0.16.2",
-    "linkify-html": "4.0.0-beta.5",
-    "linkifyjs": "4.0.0-beta.5",
-    "matrix-js-sdk": "19.4.0",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.1.3",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
-    "react-google-recaptcha": "2.1.0",
-    "react-modal": "3.15.1",
-    "sanitize-html": "2.7.1",
-    "tippy.js": "6.3.7",
-    "twemoji": "14.0.2"
+    "@fontsource/inter": "^4.5.12",
+    "@fontsource/roboto": "^4.5.8",
+    "@khanacademy/simple-markdown": "^0.8.3",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
+    "@tippyjs/react": "^4.2.6",
+    "babel-polyfill": "^6.26.0",
+    "blurhash": "^1.1.5",
+    "browser-encrypt-attachment": "^0.3.0",
+    "dateformat": "^5.0.3",
+    "emojibase-data": "^7.0.1",
+    "file-saver": "^2.0.5",
+    "flux": "^4.0.3",
+    "formik": "^2.2.9",
+    "html-react-parser": "^3.0.4",
+    "katex": "^0.16.2",
+    "linkify-html": "^4.0.0-beta.5",
+    "linkifyjs": "^4.0.0-beta.5",
+    "matrix-js-sdk": "^19.4.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-autosize-textarea": "^7.1.0",
+    "react-blurhash": "^0.1.3",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
+    "react-dom": "^17.0.2",
+    "react-google-recaptcha": "^2.1.0",
+    "react-modal": "^3.15.1",
+    "sanitize-html": "^2.7.1",
+    "tippy.js": "^6.3.7",
+    "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.18.13",
-    "@babel/preset-env": "7.18.10",
-    "@babel/preset-react": "7.18.6",
-    "assert": "2.0.0",
-    "babel-loader": "8.2.5",
-    "browserify-fs": "1.0.0",
-    "buffer": "6.0.3",
-    "clean-webpack-plugin": "4.0.0",
-    "copy-webpack-plugin": "11.0.0",
-    "crypto-browserify": "3.12.0",
-    "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "4.0.0",
-    "eslint": "8.23.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.1",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "html-loader": "4.1.0",
-    "html-webpack-plugin": "5.3.1",
-    "mini-css-extract-plugin": "2.6.1",
-    "path-browserify": "1.0.1",
-    "sass": "1.54.5",
-    "sass-loader": "13.0.2",
-    "stream-browserify": "3.0.0",
-    "style-loader": "3.3.1",
-    "url": "0.11.0",
-    "util": "0.12.4",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.10.1",
-    "webpack-merge": "5.7.3"
+    "@babel/core": "^7.18.13",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "assert": "^2.0.0",
+    "babel-loader": "^8.2.5",
+    "browserify-fs": "^1.0.0",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.23.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "favicons": "^6.2.2",
+    "favicons-webpack-plugin": "^5.0.2",
+    "html-loader": "^4.1.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "path-browserify": "^1.0.1",
+    "sass": "^1.54.5",
+    "sass-loader": "^13.0.2",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.1",
+    "webpack-merge": "^5.7.3"
   }
 }

public/index.html

@@ -15,28 +15,6 @@
     <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
     <meta property="og:description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
     <meta name="theme-color" content="#000000">
-
-
-    <link id="favicon" rel="shortcut icon" href="./favicon.ico" />
-
-    <link rel="manifest" href="./manifest.json" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Cinny" />
-    <meta name="apple-mobile-web-app-title" content="Cinny" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
-    <link rel="apple-touch-icon" sizes="57x57" href="./res/apple/apple-touch-icon-57x57.png"/>
-    <link rel="apple-touch-icon" sizes="60x60" href="./res/apple/apple-touch-icon-60x60.png"/>
-    <link rel="apple-touch-icon" sizes="72x72" href="./res/apple/apple-touch-icon-72x72.png"/>
-    <link rel="apple-touch-icon" sizes="76x76" href="./res/apple/apple-touch-icon-76x76.png"/>
-    <link rel="apple-touch-icon" sizes="114x114" href="./res/apple/apple-touch-icon-114x114.png"/>
-    <link rel="apple-touch-icon" sizes="120x120" href="./res/apple/apple-touch-icon-120x120.png"/>
-    <link rel="apple-touch-icon" sizes="144x144" href="./res/apple/apple-touch-icon-144x144.png"/>
-    <link rel="apple-touch-icon" sizes="152x152" href="./res/apple/apple-touch-icon-152x152.png"/>
-    <link rel="apple-touch-icon" sizes="167x167" href="./res/apple/apple-touch-icon-167x167.png"/>
-    <link rel="apple-touch-icon" sizes="180x180" href="./res/apple/apple-touch-icon-180x180.png"/>
-
 </head>
 <body id="appBody">
     <div id="root"></div>

public/manifest.json

@@ -1,59 +0,0 @@
-{
-  "name": "Cinny",
-  "short_name": "Cinny",
-  "description": "Yet another matrix client",
-  "dir": "auto",
-  "lang": "en-US",
-  "display": "standalone",
-  "orientation": "portrait",
-  "start_url": "/",
-  "background_color": "#fff",
-  "theme_color": "#fff",
-  "icons": [
-    {
-      "src": "android-chrome-36x36.png",
-      "sizes": "36x36",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-48x48.png",
-      "sizes": "48x48",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-256x256.png",
-      "sizes": "256x256",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
-}

src/app/hooks/useAccountData.js

@@ -5,12 +5,12 @@ import initMatrix from '../../client/initMatrix';
 
 export function useAccountData(eventType) {
   const mx = initMatrix.matrixClient;
-  const [event, setEvent] = useState(mx.getAccountData(eventType));
+  const [event, setEvent] = useState(mx.getAccountData(eventType)?.getContent());
 
   useEffect(() => {
     const handleChange = (mEvent) => {
       if (mEvent.getType() !== eventType) return;
-      setEvent(mEvent);
+      setEvent(mEvent.getContent());
     };
     mx.on('accountData', handleChange);
     return () => {

src/app/molecules/global-notification/GlobalNotification.jsx

@@ -53,7 +53,7 @@ export function getTypeActions(type, highlightValue = false) {
 
 function useGlobalNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData('m.push_rules');
   const underride = pushRules?.global?.underride ?? [];
   const rulesToType = {
     [DM]: notifType.ON,

src/app/molecules/global-notification/IgnoreUserList.jsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import './IgnoreUserList.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import * as roomActions from '../../../client/action/room';
-
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
-
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-import { useAccountData } from '../../hooks/useAccountData';
-
-function IgnoreUserList() {
-  useAccountData('m.ignored_user_list');
-  const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();
-
-  const handleSubmit = (evt) => {
-    evt.preventDefault();
-    const { ignoreInput } = evt.target.elements;
-    const value = ignoreInput.value.trim();
-    const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
-    if (userIds.length === 0) return;
-    ignoreInput.value = '';
-    roomActions.ignore(userIds);
-  };
-
-  return (
-    <div className="ignore-user-list">
-      <MenuHeader>Ignored users</MenuHeader>
-      <SettingTile
-        title="Ignore user"
-        content={(
-          <div className="ignore-user-list__users">
-            <Text variant="b3">Ignore userId if you do not want to receive their messages or invites.</Text>
-            <form onSubmit={handleSubmit}>
-              <Input name="ignoreInput" required />
-              <Button variant="primary" type="submit">Ignore</Button>
-            </form>
-            {ignoredUsers.length > 0 && (
-              <div>
-                {ignoredUsers.map((uId) => (
-                  <Chip
-                    iconSrc={CrossIC}
-                    key={uId}
-                    text={uId}
-                    iconColor={CrossIC}
-                    onClick={() => roomActions.unignore([uId])}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      />
-    </div>
-  );
-}
-
-export default IgnoreUserList;

src/app/molecules/global-notification/IgnoreUserList.scss

@@ -1,17 +0,0 @@
-.ignore-user-list {
-  &__users {
-    & form,
-    & > div:last-child {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--sp-tight);
-    }
-
-    & form {
-      margin: var(--sp-extra-tight) 0 var(--sp-normal);
-      .input-container {
-        flex-grow: 1;
-      }
-    }
-  }
-}

src/app/molecules/global-notification/KeywordNotification.jsx

@@ -29,7 +29,7 @@ const KEYWORD = 'keyword';
 
 function useKeywordNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData('m.push_rules');
   const override = pushRules?.global?.override ?? [];
   const content = pushRules?.global?.content ?? [];
 

src/app/molecules/global-notification/KeywordNotification.scss

@@ -3,12 +3,11 @@
     & form,
     & > div:last-child {
       display: flex;
-      flex-wrap: wrap;
       gap: var(--sp-tight);
     }
 
     & form {
-      margin: var(--sp-extra-tight) 0 var(--sp-normal);
+      margin: var(--sp-ultra-tight) 0 var(--sp-normal);
       .input-container {
         flex-grow: 1;
       }

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

@@ -11,7 +11,7 @@ import { selectRoom, openReusableContextMenu } from '../../../client/action/navi
 import * as roomActions from '../../../client/action/room';
 
 import {
-  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices,
+  getUsername, getUsernameOfRoomMember, getPowerLabel, hasDMWith, hasDevices
 } from '../../../util/matrixUtil';
 import { getEventCords } from '../../../util/common';
 import colorMXID from '../../../util/colorMXID';
@@ -209,18 +209,19 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
   };
 
   const toggleIgnore = async () => {
-    const isIgnored = mx.getIgnoredUsers().includes(userId);
+    const ignoredUsers = mx.getIgnoredUsers();
+    const uIndex = ignoredUsers.indexOf(userId);
+    if (uIndex >= 0) {
+      if (uIndex === -1) return;
+      ignoredUsers.splice(uIndex, 1);
+    } else ignoredUsers.push(userId);
 
     try {
       setIsIgnoring(true);
-      if (isIgnored) {
-        await roomActions.unignore([userId]);
-      } else {
-        await roomActions.ignore([userId]);
-      }
+      await mx.setIgnoredUsers(ignoredUsers);
 
       if (isMountedRef.current === false) return;
-      setIsUserIgnored(!isIgnored);
+      setIsUserIgnored(uIndex < 0);
       setIsIgnoring(false);
     } catch {
       setIsIgnoring(false);

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -8,6 +8,13 @@ import twemoji from 'twemoji';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
+import { toggleMarkdown } from '../../../client/action/settings';
+import * as roomActions from '../../../client/action/room';
+import {
+  openCreateRoom,
+  openPublicRooms,
+  openInviteUser,
+} from '../../../client/action/navigation';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
 
@@ -15,7 +22,37 @@ import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
 import FollowingMembers from '../../molecules/following-members/FollowingMembers';
 import { addRecentEmoji, getRecentEmojis } from '../emoji-board/recent';
-import commands from './commands';
+
+const commands = [{
+  name: 'markdown',
+  description: 'Toggle markdown for messages.',
+  exe: () => toggleMarkdown(),
+}, {
+  name: 'startDM',
+  isOptions: true,
+  description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
+  exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
+}, {
+  name: 'createRoom',
+  description: 'Create new room',
+  exe: () => openCreateRoom(),
+}, {
+  name: 'join',
+  isOptions: true,
+  description: 'Join room with alias. Example: /join/#cinny:matrix.org',
+  exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
+}, {
+  name: 'leave',
+  description: 'Leave current room',
+  exe: (roomId) => {
+    roomActions.leave(roomId);
+  },
+}, {
+  name: 'invite',
+  isOptions: true,
+  description: 'Invite user to room. Example: /invite/@johndoe:matrix.org',
+  exe: (roomId, searchTerm) => openInviteUser(roomId, searchTerm),
+}];
 
 function CmdItem({ onClick, children }) {
   return (
@@ -34,16 +71,16 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
     const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
     return cmds.map((cmd) => (
       <CmdItem
-        key={cmd}
+        key={cmd.name}
         onClick={() => {
           fireCmd({
             prefix: cmdPrefix,
             option,
-            result: commands[cmd],
+            result: cmd,
           });
         }}
       >
-        <Text variant="b2">{`${cmd}${cmd.isOptions ? cmdOptString : ''}`}</Text>
+        <Text variant="b2">{`${cmd.name}${cmd.isOptions ? cmdOptString : ''}`}</Text>
       </CmdItem>
     ));
   }
@@ -172,8 +209,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     const mx = initMatrix.matrixClient;
     const setupSearch = {
       '/': () => {
-        asyncSearch.setup(Object.keys(commands), { isContain: true });
-        setCmd({ prefix, suggestions: Object.keys(commands) });
+        asyncSearch.setup(commands, { keys: ['name'], isContain: true });
+        setCmd({ prefix, suggestions: commands });
       },
       ':': () => {
         const parentIds = initMatrix.roomList.getAllParentSpaces(roomId);
@@ -205,9 +242,8 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   }
   function fireCmd(myCmd) {
     if (myCmd.prefix === '/') {
-      viewEvent.emit('cmd_fired', {
-        replace: `/${myCmd.result.name}`,
-      });
+      myCmd.result.exe(roomId, myCmd.option);
+      viewEvent.emit('cmd_fired');
     }
     if (myCmd.prefix === ':') {
       if (!myCmd.result.mxc) addRecentEmoji(myCmd.result.unicode);

src/app/organisms/room/RoomViewHeader.jsx

@@ -33,10 +33,9 @@ function RoomViewHeader({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
-  const room = mx.getRoom(roomId);
-  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
-  const roomName = room.name;
+  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  const roomName = mx.getRoom(roomId).name;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
@@ -94,7 +93,7 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
+      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
       <IconButton

src/app/organisms/room/RoomViewInput.jsx

@@ -21,7 +21,6 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import { MessageReply } from '../../molecules/message/Message';
 
 import StickerBoard from '../sticker-board/StickerBoard';
-import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
@@ -34,8 +33,6 @@ import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
-import commands from './commands';
-
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
@@ -185,54 +182,30 @@ function RoomViewInput({
     };
   }, [roomId]);
 
-  const sendBody = async (body, msgType = 'm.text') => {
+  const sendMessage = async () => {
+    requestAnimationFrame(() => deactivateCmdAndEmit());
+    const msgBody = textAreaRef.current.value;
     if (roomsInput.isSending(roomId)) return;
+    if (msgBody.trim() === '' && attachment === null) return;
     sendIsTyping(false);
 
-    roomsInput.setMessage(roomId, body);
+    roomsInput.setMessage(roomId, msgBody);
     if (attachment !== null) {
       roomsInput.setAttachment(roomId, attachment);
     }
     textAreaRef.current.disabled = true;
     textAreaRef.current.style.cursor = 'not-allowed';
-    await roomsInput.sendInput(roomId, msgType);
+    await roomsInput.sendInput(roomId);
     textAreaRef.current.disabled = false;
     textAreaRef.current.style.cursor = 'unset';
     focusInput();
 
     textAreaRef.current.value = roomsInput.getMessage(roomId);
+    viewEvent.emit('message_sent');
     textAreaRef.current.style.height = 'unset';
     if (replyTo !== null) setReplyTo(null);
   };
 
-  const processCommand = (cmdBody) => {
-    const spaceIndex = cmdBody.indexOf(' ');
-    const cmdName = cmdBody.slice(1, spaceIndex > -1 ? spaceIndex : undefined);
-    const cmdData = spaceIndex > -1 ? cmdBody.slice(spaceIndex + 1) : '';
-    if (!commands[cmdName]) {
-      confirmDialog('Invalid Command', `"${cmdName}" is not a valid command.`, 'Alright');
-      return;
-    }
-    if (['me', 'shrug'].includes(cmdName)) {
-      commands[cmdName].exe(roomId, cmdData, (message, msgType) => sendBody(message, msgType));
-      return;
-    }
-    commands[cmdName].exe(roomId, cmdData);
-  };
-
-  const sendMessage = async () => {
-    requestAnimationFrame(() => deactivateCmdAndEmit());
-    const msgBody = textAreaRef.current.value.trim();
-    if (msgBody.startsWith('/')) {
-      processCommand(msgBody.trim());
-      textAreaRef.current.value = '';
-      textAreaRef.current.style.height = 'unset';
-      return;
-    }
-    if (msgBody === '' && attachment === null) return;
-    sendBody(msgBody, 'm.text');
-  };
-
   const handleSendSticker = async (data) => {
     roomsInput.sendSticker(roomId, data);
   };

src/app/organisms/room/commands.jsx

@@ -1,211 +0,0 @@
-import React from 'react';
-import './commands.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import * as roomActions from '../../../client/action/room';
-import { hasDMWith, hasDevices } from '../../../util/matrixUtil';
-import { selectRoom, openReusableDialog } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
-
-const MXID_REG = /^@\S+:\S+$/;
-const ROOM_ID_ALIAS_REG = /^(#|!)\S+:\S+$/;
-const ROOM_ID_REG = /^!\S+:\S+$/;
-const MXC_REG = /^mxc:\/\/\S+$/;
-
-export function processMxidAndReason(data) {
-  let reason;
-  let idData = data;
-  const reasonMatch = data.match(/\s-r\s/);
-  if (reasonMatch) {
-    idData = data.slice(0, reasonMatch.index);
-    reason = data.slice(reasonMatch.index + reasonMatch[0].length);
-    if (reason.trim() === '') reason = undefined;
-  }
-  const rawIds = idData.split(' ');
-  const userIds = rawIds.filter((id) => id.match(MXID_REG));
-  return {
-    userIds,
-    reason,
-  };
-}
-
-const commands = {
-  me: {
-    name: 'me',
-    description: 'Display action',
-    exe: (roomId, data, onSuccess) => {
-      const body = data.trim();
-      if (body === '') return;
-      onSuccess(body, 'm.emote');
-    },
-  },
-  shrug: {
-    name: 'shrug',
-    description: 'Send ¯\\_(ツ)_/¯ as message',
-    exe: (roomId, data, onSuccess) => onSuccess(
-      `¯\\_(ツ)_/¯${data.trim() !== '' ? ` ${data}` : ''}`,
-      'm.text',
-    ),
-  },
-  help: {
-    name: 'help',
-    description: 'View all commands',
-    // eslint-disable-next-line no-use-before-define
-    exe: () => openHelpDialog(),
-  },
-  startdm: {
-    name: 'startdm',
-    description: 'Start DM with user. Example: /startdm userId1 userId2',
-    exe: async (roomId, data) => {
-      const mx = initMatrix.matrixClient;
-      const rawIds = data.split(' ');
-      const userIds = rawIds.filter((id) => id.match(MXID_REG) && id !== mx.getUserId());
-      if (userIds.length === 0) return;
-      if (userIds.length === 1) {
-        const dmRoomId = hasDMWith(userIds[0]);
-        if (dmRoomId) {
-          selectRoom(dmRoomId);
-          return;
-        }
-      }
-      const devices = await Promise.all(userIds.map(hasDevices));
-      const isEncrypt = devices.every((hasDevice) => hasDevice);
-      const result = await roomActions.createDM(userIds, isEncrypt);
-      selectRoom(result.room_id);
-    },
-  },
-  join: {
-    name: 'join',
-    description: 'Join room with alias. Example: /join alias1 alias2',
-    exe: (roomId, data) => {
-      const rawIds = data.split(' ');
-      const roomIds = rawIds.filter((id) => id.match(ROOM_ID_ALIAS_REG));
-      roomIds.map((id) => roomActions.join(id));
-    },
-  },
-  leave: {
-    name: 'leave',
-    description: 'Leave current room.',
-    exe: (roomId, data) => {
-      if (data.trim() === '') {
-        roomActions.leave(roomId);
-        return;
-      }
-      const rawIds = data.split(' ');
-      const roomIds = rawIds.filter((id) => id.match(ROOM_ID_REG));
-      roomIds.map((id) => roomActions.leave(id));
-    },
-  },
-  invite: {
-    name: 'invite',
-    description: 'Invite user to room. Example: /invite userId1 userId2 [-r reason]',
-    exe: (roomId, data) => {
-      const { userIds, reason } = processMxidAndReason(data);
-      userIds.map((id) => roomActions.invite(roomId, id, reason));
-    },
-  },
-  disinvite: {
-    name: 'disinvite',
-    description: 'Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]',
-    exe: (roomId, data) => {
-      const { userIds, reason } = processMxidAndReason(data);
-      userIds.map((id) => roomActions.kick(roomId, id, reason));
-    },
-  },
-  kick: {
-    name: 'kick',
-    description: 'Kick user from room. Example: /kick userId1 userId2 [-r reason]',
-    exe: (roomId, data) => {
-      const { userIds, reason } = processMxidAndReason(data);
-      userIds.map((id) => roomActions.kick(roomId, id, reason));
-    },
-  },
-  ban: {
-    name: 'ban',
-    description: 'Ban user from room. Example: /ban userId1 userId2 [-r reason]',
-    exe: (roomId, data) => {
-      const { userIds, reason } = processMxidAndReason(data);
-      userIds.map((id) => roomActions.ban(roomId, id, reason));
-    },
-  },
-  unban: {
-    name: 'unban',
-    description: 'Unban user from room. Example: /unban userId1 userId2',
-    exe: (roomId, data) => {
-      const rawIds = data.split(' ');
-      const userIds = rawIds.filter((id) => id.match(MXID_REG));
-      userIds.map((id) => roomActions.unban(roomId, id));
-    },
-  },
-  ignore: {
-    name: 'ignore',
-    description: 'Ignore user. Example: /ignore userId1 userId2',
-    exe: (roomId, data) => {
-      const rawIds = data.split(' ');
-      const userIds = rawIds.filter((id) => id.match(MXID_REG));
-      if (userIds.length > 0) roomActions.ignore(userIds);
-    },
-  },
-  unignore: {
-    name: 'unignore',
-    description: 'Unignore user. Example: /unignore userId1 userId2',
-    exe: (roomId, data) => {
-      const rawIds = data.split(' ');
-      const userIds = rawIds.filter((id) => id.match(MXID_REG));
-      if (userIds.length > 0) roomActions.unignore(userIds);
-    },
-  },
-  myroomnick: {
-    name: 'myroomnick',
-    description: 'Change my room nick',
-    exe: (roomId, data) => {
-      const nick = data.trim();
-      if (nick === '') return;
-      roomActions.setMyRoomNick(roomId, nick);
-    },
-  },
-  myroomavatar: {
-    name: 'myroomavatar',
-    description: 'Change my room avatar. Example /myroomavatar mxc://xyzabc',
-    exe: (roomId, data) => {
-      if (data.match(MXC_REG)) {
-        roomActions.setMyRoomAvatar(roomId, data);
-      }
-    },
-  },
-  converttodm: {
-    name: 'converttodm',
-    description: 'Convert room to direct message',
-    exe: (roomId) => {
-      roomActions.convertToDm(roomId);
-    },
-  },
-  converttoroom: {
-    name: 'converttoroom',
-    description: 'Convert direct message to room',
-    exe: (roomId) => {
-      roomActions.convertToRoom(roomId);
-    },
-  },
-};
-
-function openHelpDialog() {
-  openReusableDialog(
-    <Text variant="s1" weight="medium">Commands</Text>,
-    () => (
-      <div className="commands-dialog">
-        {Object.keys(commands).map((cmdName) => (
-          <SettingTile
-            key={cmdName}
-            title={cmdName}
-            content={<Text variant="b3">{commands[cmdName].description}</Text>}
-          />
-        ))}
-      </div>
-    ),
-  );
-}
-
-export default commands;

src/app/organisms/room/commands.scss

@@ -1,10 +0,0 @@
-.commands-dialog {
-  & > * {
-    padding: var(--sp-tight) var(--sp-normal);
-    border-bottom: 1px solid var(--bg-surface-border);
-    &:last-child {
-      border-bottom: none;
-      margin-bottom: var(--sp-extra-loose);
-    }
-  }
-}

src/app/organisms/settings/Settings.jsx

@@ -27,7 +27,6 @@ import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/Expor
 import { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';
 import GlobalNotification from '../../molecules/global-notification/GlobalNotification';
 import KeywordNotification from '../../molecules/global-notification/KeywordNotification';
-import IgnoreUserList from '../../molecules/global-notification/IgnoreUserList';
 
 import ProfileEditor from '../profile-editor/ProfileEditor';
 import CrossSigning from './CrossSigning';
@@ -174,7 +173,6 @@ function NotificationsSection() {
       </div>
       <GlobalNotification />
       <KeywordNotification />
-      <IgnoreUserList />
     </>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -40,7 +40,6 @@
 .settings-notifications,
 .global-notification,
 .keyword-notification,
-.ignore-user-list,
 .settings-security__card,
 .settings-security .device-manage,
 .settings-about__card,

src/client/action/room.js

@@ -6,7 +6,7 @@ import { getIdServer } from '../../util/matrixUtil';
 /**
  * https://github.com/matrix-org/matrix-react-sdk/blob/1e6c6e9d800890c732d60429449bc280de01a647/src/Rooms.js#L73
  * @param {string} roomId Id of room to add
- * @param {string} userId User id to which dm || undefined to remove
+ * @param {string} userId User id to which dm
  * @returns {Promise} A promise
  */
 function addRoomToMDirect(roomId, userId) {
@@ -79,23 +79,13 @@ function guessDMRoomTargetId(room, myUserId) {
   return oldestMember.userId;
 }
 
-function convertToDm(roomId) {
-  const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-  return addRoomToMDirect(roomId, guessDMRoomTargetId(room, mx.getUserId()));
-}
-
-function convertToRoom(roomId) {
-  return addRoomToMDirect(roomId, undefined);
-}
-
 /**
  *
  * @param {string} roomId
  * @param {boolean} isDM
  * @param {string[]} via
  */
-async function join(roomIdOrAlias, isDM = false, via = undefined) {
+async function join(roomIdOrAlias, isDM, via) {
   const mx = initMatrix.matrixClient;
   const roomIdParts = roomIdOrAlias.split(':');
   const viaServers = via || [roomIdParts[1]];
@@ -160,10 +150,10 @@ async function create(options, isDM = false) {
   }
 }
 
-async function createDM(userIdOrIds, isEncrypted = true) {
+async function createDM(userId, isEncrypted = true) {
   const options = {
     is_direct: true,
-    invite: Array.isArray(userIdOrIds) ? userIdOrIds : [userIdOrIds],
+    invite: [userId],
     visibility: 'private',
     preset: 'trusted_private_chat',
     initial_state: [],
@@ -272,10 +262,10 @@ async function createRoom(opts) {
   return result;
 }
 
-async function invite(roomId, userId, reason) {
+async function invite(roomId, userId) {
   const mx = initMatrix.matrixClient;
 
-  const result = await mx.invite(roomId, userId, undefined, reason);
+  const result = await mx.invite(roomId, userId);
   return result;
 }
 
@@ -300,21 +290,6 @@ async function unban(roomId, userId) {
   return result;
 }
 
-async function ignore(userIds) {
-  const mx = initMatrix.matrixClient;
-
-  let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
-  ignoredUsers = [...new Set(ignoredUsers)];
-  await mx.setIgnoredUsers(ignoredUsers);
-}
-
-async function unignore(userIds) {
-  const mx = initMatrix.matrixClient;
-
-  const ignoredUsers = mx.getIgnoredUsers();
-  await mx.setIgnoredUsers(ignoredUsers.filter((id) => !userIds.includes(id)));
-}
-
 async function setPowerLevel(roomId, userId, powerLevel) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
@@ -325,37 +300,9 @@ async function setPowerLevel(roomId, userId, powerLevel) {
   return result;
 }
 
-async function setMyRoomNick(roomId, nick) {
-  const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
-  const content = mEvent?.getContent();
-  if (!content) return;
-  await mx.sendStateEvent(roomId, 'm.room.member', {
-    ...content,
-    displayname: nick,
-  }, mx.getUserId());
-}
-
-async function setMyRoomAvatar(roomId, mxc) {
-  const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-  const mEvent = room.currentState.getStateEvents('m.room.member', mx.getUserId());
-  const content = mEvent?.getContent();
-  if (!content) return;
-  await mx.sendStateEvent(roomId, 'm.room.member', {
-    ...content,
-    avatar_url: mxc,
-  }, mx.getUserId());
-}
-
 export {
-  convertToDm,
-  convertToRoom,
   join, leave,
   createDM, createRoom,
   invite, kick, ban, unban,
-  ignore, unignore,
   setPowerLevel,
-  setMyRoomNick, setMyRoomAvatar,
 };

src/client/state/Notifications.js

@@ -37,8 +37,6 @@ class Notifications extends EventEmitter {
   constructor(roomList) {
     super();
 
-    this.initialized = false;
-    this.favicon = LogoSVG;
     this.matrixClient = roomList.matrixClient;
     this.roomList = roomList;
 
@@ -52,7 +50,6 @@ class Notifications extends EventEmitter {
   }
 
   async _initNoti() {
-    this.initialized = false;
     this.roomIdToNoti = new Map();
 
     const addNoti = (roomId) => {
@@ -66,8 +63,6 @@ class Notifications extends EventEmitter {
     };
     [...this.roomList.rooms].forEach(addNoti);
     [...this.roomList.directs].forEach(addNoti);
-
-    this.initialized = true;
     this._updateFavicon();
   }
 
@@ -141,7 +136,6 @@ class Notifications extends EventEmitter {
   }
 
   async _updateFavicon() {
-    if (!this.initialized) return;
     let unread = false;
     let highlight = false;
     [...this.roomIdToNoti.values()].find((noti) => {
@@ -152,16 +146,11 @@ class Notifications extends EventEmitter {
       if (unread && highlight) return true;
       return false;
     });
-    let newFavicon = LogoSVG;
-    if (unread && !highlight) {
-      newFavicon = LogoUnreadSVG;
+    if (!unread) {
+      setFavicon(LogoSVG);
+      return;
     }
-    if (unread && highlight) {
-      newFavicon = LogoHighlightSVG;
-    }
-    if (newFavicon === this.favicon) return;
-    this.favicon = newFavicon;
-    setFavicon(this.favicon);
+    setFavicon(highlight ? LogoHighlightSVG : LogoUnreadSVG);
   }
 
   _setNoti(roomId, total, highlight) {

src/client/state/RoomList.js

@@ -257,10 +257,10 @@ class RoomList extends EventEmitter {
       const latestMDirects = this.getMDirects();
 
       latestMDirects.forEach((directId) => {
+        const myRoom = this.matrixClient.getRoom(directId);
         if (this.mDirects.has(directId)) return;
         this.mDirects.add(directId);
 
-        const myRoom = this.matrixClient.getRoom(directId);
         if (myRoom === null) return;
         if (myRoom.getMyMembership() === 'join') {
           this.directs.add(directId);
@@ -268,19 +268,6 @@ class RoomList extends EventEmitter {
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         }
       });
-
-      [...this.directs].forEach((directId) => {
-        if (latestMDirects.has(directId)) return;
-        this.mDirects.delete(directId);
-
-        const myRoom = this.matrixClient.getRoom(directId);
-        if (myRoom === null) return;
-        if (myRoom.getMyMembership() === 'join') {
-          this.directs.delete(directId);
-          this.rooms.add(directId);
-          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-        }
-      });
     });
 
     this.matrixClient.on('Room.name', (room) => {

src/client/state/RoomsInput.js

@@ -274,7 +274,7 @@ class RoomsInput extends EventEmitter {
     return this.roomIdToInput.get(roomId)?.isSending || false;
   }
 
-  async sendInput(roomId, msgType) {
+  async sendInput(roomId) {
     const room = this.matrixClient.getRoom(roomId);
     const input = this.getInput(roomId);
     input.isSending = true;
@@ -288,7 +288,7 @@ class RoomsInput extends EventEmitter {
       const rawMessage = input.message;
       let content = {
         body: rawMessage,
-        msgtype: msgType ?? 'm.text',
+        msgtype: 'm.text',
       };
 
       // Apply formatting if relevant
@@ -459,14 +459,12 @@ class RoomsInput extends EventEmitter {
     const room = this.matrixClient.getRoom(roomId);
     const isReply = typeof mEvent.getWireContent()['m.relates_to']?.['m.in_reply_to'] !== 'undefined';
 
-    const msgtype = mEvent.getWireContent().msgtype ?? 'm.text';
-
     const content = {
       body: ` * ${editedBody}`,
-      msgtype,
+      msgtype: 'm.text',
       'm.new_content': {
         body: editedBody,
-        msgtype,
+        msgtype: 'm.text',
       },
       'm.relates_to': {
         event_id: mEvent.getId(),

src/util/common.js

@@ -120,9 +120,12 @@ export function cssVar(name) {
 }
 
 export function setFavicon(url) {
-  const favicon = document.querySelector('#favicon');
-  if (!favicon) return;
-  favicon.setAttribute('href', url);
+  const oldFav = document.querySelector('[rel=icon]');
+  oldFav.parentElement.removeChild(oldFav);
+  const fav = document.createElement('link');
+  fav.rel = 'icon';
+  fav.href = url;
+  document.head.appendChild(fav);
 }
 
 export function copyToClipboard(text) {

src/util/mimetypes.js

@@ -26,13 +26,12 @@ export const ALLOWED_BLOB_MIMETYPES = [
 ];
 
 export function getBlobSafeMimeType(mimetype) {
-  const [type] = mimetype.split(';');
-  if (!ALLOWED_BLOB_MIMETYPES.includes(type)) {
+  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
     return 'application/octet-stream';
   }
   // Required for Chromium browsers
-  if (type === 'video/quicktime') {
+  if (mimetype === 'video/quicktime') {
     return 'video/mp4';
   }
-  return type;
+  return mimetype;
 }

webpack.common.js

@@ -1,4 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
 const webpack = require('webpack');
 
@@ -51,12 +52,27 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({ template: './public/index.html' }),
+    new FaviconsWebpackPlugin({
+      logo: './public/res/svg/cinny.svg',
+      mode: 'webapp',
+      devMode: 'light',
+      favicons: {
+        appName: 'Cinny',
+        appDescription: 'Yet another matrix client',
+        developerName: 'Ajay Bura',
+        developerURL: 'https://github.com/ajbura',
+        icons: {
+          coast: false,
+          yandex: false,
+          appleStartup: false,
+        }
+      }
+    }),
     new CopyPlugin({
       patterns: [
-        { from: 'node_modules/@matrix-org/olm/olm.wasm' },
+        { from: 'olm.wasm' },
         { from: '_redirects' },
         { from: 'config.json' },
-        { from: 'public/res/android'}
       ],
     }),
     new webpack.ProvidePlugin({