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/plugins/custom-emoji/utils.ts

@@ -0,0 +1,88 @@
+import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
+import { ImagePack } from './ImagePack';
+import { EmoteRoomsContent, ImageUsage } from './types';
+import { StateEvent } from '../../../types/matrix/room';
+import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
+import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { PackMetaReader } from './PackMetaReader';
+import { PackAddress } from './PackAddress';
+
+export function packAddressEqual(a1?: PackAddress, a2?: PackAddress): boolean {
+  if (!a1 && !a2) return true;
+  if (!a1 || !a2) return false;
+  return a1.roomId === a2.roomId && a1.stateKey === a2.stateKey;
+}
+
+export function imageUsageEqual(u1: ImageUsage[], u2: ImageUsage[]) {
+  return u1.length === u2.length && u1.every((u) => u2.includes(u));
+}
+
+export function packMetaEqual(a: PackMetaReader, b: PackMetaReader): boolean {
+  return (
+    a.name === b.name &&
+    a.avatar === b.avatar &&
+    a.attribution === b.attribution &&
+    imageUsageEqual(a.usage, b.usage)
+  );
+}
+
+export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
+  return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
+    const packId = packEvent.getId();
+    if (!packId) return imagePacks;
+    imagePacks.push(ImagePack.fromMatrixEvent(packId, packEvent));
+    return imagePacks;
+  }, []);
+}
+
+export function getRoomImagePack(room: Room, stateKey: string): ImagePack | undefined {
+  const packEvent = getStateEvent(room, StateEvent.PoniesRoomEmotes, stateKey);
+  if (!packEvent) return undefined;
+  const packId = packEvent.getId();
+  if (!packId) return undefined;
+  return ImagePack.fromMatrixEvent(packId, packEvent);
+}
+
+export function getRoomImagePacks(room: Room): ImagePack[] {
+  const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
+  return makeImagePacks(packEvents);
+}
+
+export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
+  const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
+    | EmoteRoomsContent
+    | undefined;
+  if (typeof emoteRoomsContent !== 'object') return [];
+
+  const { rooms: roomIdToPackInfo } = emoteRoomsContent;
+  if (typeof roomIdToPackInfo !== 'object') return [];
+
+  const roomIds = Object.keys(roomIdToPackInfo);
+
+  const packs = roomIds.flatMap((roomId) => {
+    if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
+    const room = mx.getRoom(roomId);
+    if (!room) return [];
+    const packStateKeyToUnknown = roomIdToPackInfo[roomId];
+    const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
+    const globalPackEvents = packEvents.filter((mE) => {
+      const stateKey = mE.getStateKey();
+      if (typeof stateKey === 'string') return !!packStateKeyToUnknown[stateKey];
+      return false;
+    });
+    return makeImagePacks(globalPackEvents);
+  });
+
+  return packs;
+}
+
+export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
+  const packEvent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes);
+  const userId = mx.getUserId();
+  if (!packEvent || !userId) {
+    return undefined;
+  }
+
+  const userImagePack = ImagePack.fromMatrixEvent(userId, packEvent);
+  return userImagePack;
+}