redesigned app settings and switch to rust crypto (#1988)

* rework general settings

* account settings - WIP

* add missing key prop

* add object url hook

* extract wide modal styles

* profile settings and image editor - WIP

* add outline style to upload card

* remove file param from bind upload atom hook

* add compact variant to upload card

* add  compact upload card renderer

* add option to update profile avatar

* add option to change profile displayname

* allow displayname change based on capabilities check

* rearrange settings components into folders

* add system notification settings

* add initial page param in settings

* convert account data hook to typescript

* add push rule hook

* add notification mode hook

* add notification mode switcher component

* add all messages notification settings options

* add special messages notification settings

* add keyword notifications

* add ignored users section

* improve ignore user list strings

* add about settings

* add access token option in about settings

* add developer tools settings

* add expand button to account data dev tool option

* update folds

* fix editable active element textarea check

* do not close dialog when editable element in focus

* add text area plugins

* add text area intent handler hook

* add newline intent mod in text area

* add next line hotkey in text area intent hook

* add syntax error position dom utility function

* add account data editor

* add button to send new account data in dev tools

* improve custom emoji plugin

* add more custom emojis hooks

* add text util css

* add word break in setting tile title and description

* emojis and sticker user settings - WIP

* view image packs from settings

* emoji pack editing - WIP

* add option to edit pack meta

* change saved changes message

* add image edit and delete controls

* add option to upload pack images and apply changes

* fix state event type when updating image pack

* lazy load pack image tile img

* hide upload image button when user can not edit pack

* add option to add or remove global image packs

* upgrade to rust crypto (#2168)

* update matrix js sdk

* remove dead code

* use rust crypto

* update setPowerLevel usage

* fix types

* fix deprecated isRoomEncrypted method uses

* fix deprecated room.currentState uses

* fix deprecated import/export room keys func

* fix merge issues in image pack file

* fix remaining issues in image pack file

* start indexedDBStore

* update package lock and vite-plugin-top-level-await

* user session settings - WIP

* add useAsync hook

* add password stage uia

* add uia flow matrix error hook

* add UIA action component

* add options to delete sessions

* add sso uia stage

* fix SSO stage complete error

* encryption - WIP

* update user settings encryption terminology

* add default variant to password input

* use password input in uia password stage

* add options for local backup in user settings

* remove typo in import local backup password input label

* online backup - WIP

* fix uia sso action

* move access token settings from about to developer tools

* merge encryption tab into sessions and rename it to devices

* add device placeholder tile

* add logout dialog

* add logout button for current device

* move other devices in component

* render unverified device verification tile

* add learn more section for current device verification

* add device verification status badge

* add info card component

* add index file for password input component

* add types for secret storage

* add component to access secret storage key

* manual verification - WIP

* update matrix-js-sdk to v35

* add manual verification

* use react query for device list

* show unverified tab on sidebar

* fix device list updates

* add session key details to current device

* render restore encryption backup

* fix loading state of restore backup

* fix unverified tab settings closes after verification

* key backup tile - WIP

* fix unverified tab badge

* rename session key to device key in device tile

* improve backup restore functionality

* fix restore button enabled after layout reload during restoring backup

* update backup info on status change

* add backup disconnection failures

* add device verification using sas

* restore backup after verification

* show option to logout on startup error screen

* fix key backup hook update on decryption key cached

* add option to enable device verification

* add device verification reset dialog

* add logout button in settings drawer

* add encrypted message lost on logout

* fix backup restore never finish with 0 keys

* fix setup dialog hides when enabling device verification

* show backup details in menu

* update setup device verification body copy

* replace deprecated method

* fix displayname appear as mxid in settings

* remove old refactored codes

* fix types

src/app/utils/common.ts

@@ -112,3 +112,16 @@ export const randomStr = (len = 12): string => {
   }
   return str;
 };
+
+export const suffixRename = (name: string, validator: (newName: string) => boolean): string => {
+  let suffix = 1;
+  let newName = name;
+  do {
+    newName = name + suffix;
+    suffix += 1;
+  } while (validator(newName));
+
+  return newName;
+};
+
+export const replaceSpaceWithDash = (str: string): string => str.replace(/ /g, '-');

src/app/utils/dom.ts

@@ -6,10 +6,10 @@ export const targetFromEvent = (evt: Event, selector: string): Element | undefin
 export const editableActiveElement = (): boolean =>
   !!document.activeElement &&
   (document.activeElement.nodeName.toLowerCase() === 'input' ||
-    document.activeElement.nodeName.toLowerCase() === 'textbox' ||
+    document.activeElement.nodeName.toLowerCase() === 'textarea' ||
     document.activeElement.getAttribute('contenteditable') === 'true' ||
     document.activeElement.getAttribute('role') === 'input' ||
-    document.activeElement.getAttribute('role') === 'textbox');
+    document.activeElement.getAttribute('role') === 'textarea');
 
 export const isIntersectingScrollView = (
   scrollElement: HTMLElement,
@@ -75,6 +75,9 @@ export const getDataTransferFiles = (dataTransfer: DataTransfer): File[] | undef
   return files;
 };
 
+export const renameFile = (file: File, name: string): File =>
+  new File([file], name, { type: file.type });
+
 export const getImageUrlBlob = async (url: string) => {
   const res = await fetch(url);
   const blob = await res.blob();
@@ -204,3 +207,13 @@ export const tryDecodeURIComponent = (encodedURIComponent: string): string => {
     return encodedURIComponent;
   }
 };
+
+export const syntaxErrorPosition = (error: SyntaxError): number | undefined => {
+  const match = error.message.match(/position\s(\d+)\s/);
+  if (!match) return undefined;
+
+  const posStr = match[1];
+  const position = parseInt(posStr, 10);
+  if (Number.isNaN(position)) return undefined;
+  return position;
+};

src/app/utils/keyboard.ts

@@ -34,6 +34,15 @@ export const onEnterOrSpace =
   };
 
 export const stopPropagation = (evt: KeyboardEvent): boolean => {
+  const ae = document.activeElement;
+  const editableActiveElement = ae
+    ? ae.nodeName.toLowerCase() === 'input' ||
+      ae.nodeName.toLowerCase() === 'textarea' ||
+      ae.getAttribute('contenteditable') === 'true'
+    : false;
+
+  if (editableActiveElement) return false;
+
   evt.stopPropagation();
   return true;
 };

src/app/utils/matrix-crypto.ts

@@ -0,0 +1,14 @@
+import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
+
+export const verifiedDevice = async (
+  api: CryptoApi,
+  userId: string,
+  deviceId: string
+): Promise<boolean | null> => {
+  const status = await api.getDeviceVerificationStatus(userId, deviceId);
+
+  if (!status) return null;
+
+  const verified = status.crossSigningVerified;
+  return verified;
+};

src/app/utils/matrix.ts

@@ -4,6 +4,7 @@ import {
   encryptAttachment,
 } from 'browser-encrypt-attachment';
 import {
+  EventTimeline,
   MatrixClient,
   MatrixError,
   MatrixEvent,
@@ -173,7 +174,7 @@ export const eventWithShortcode = (ev: MatrixEvent) =>
 export const getDMRoomFor = (mx: MatrixClient, userId: string): Room | undefined => {
   const dmLikeRooms = mx
     .getRooms()
-    .filter((room) => mx.isRoomEncrypted(room.roomId) && room.getMembers().length <= 2);
+    .filter((room) => room.hasEncryptionStateEvent() && room.getMembers().length <= 2);
 
   return dmLikeRooms.find((room) => room.getMember(userId));
 };
@@ -205,7 +206,9 @@ export const guessDmRoomUserId = (room: Room, myUserId: string): string => {
   if (member) return member.userId;
 
   // if there are no joined members other than us, use the oldest member
-  const member1 = getOldestMember(room.currentState.getMembers());
+  const member1 = getOldestMember(
+    room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getMembers() ?? []
+  );
   return member1?.userId ?? myUserId;
 };
 

src/app/utils/mimeTypes.ts

@@ -134,3 +134,8 @@ export const getFileNameExt = (fileName: string): string => {
   const extStart = fileName.lastIndexOf('.') + 1;
   return fileName.slice(extStart);
 };
+export const getFileNameWithoutExt = (fileName: string): string => {
+  const extStart = fileName.lastIndexOf('.');
+  if (extStart === 0 || extStart === -1) return fileName;
+  return fileName.slice(0, extStart);
+};

src/app/utils/room.ts

@@ -30,10 +30,12 @@ export const getStateEvent = (
   room: Room,
   eventType: StateEvent,
   stateKey = ''
-): MatrixEvent | undefined => room.currentState.getStateEvents(eventType, stateKey) ?? undefined;
+): MatrixEvent | undefined =>
+  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType, stateKey) ??
+  undefined;
 
 export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[] =>
-  room.currentState.getStateEvents(eventType);
+  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType) ?? [];
 
 export const getAccountData = (
   mx: MatrixClient,