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/text-area/Cursor.ts

@@ -0,0 +1,27 @@
+export type CursorDirection = 'forward' | 'backward' | 'none';
+
+export class Cursor {
+  public readonly start: number;
+
+  public readonly end: number;
+
+  public readonly direction: CursorDirection;
+
+  constructor(start: number, end: number, direction: CursorDirection) {
+    this.start = start;
+    this.end = end;
+    this.direction = direction;
+  }
+
+  static fromTextAreaElement(element: HTMLTextAreaElement) {
+    return new Cursor(element.selectionStart, element.selectionEnd, element.selectionDirection);
+  }
+
+  public get selection() {
+    return this.start !== this.end;
+  }
+
+  public get length() {
+    return this.end - this.start;
+  }
+}

src/app/plugins/text-area/Operations.ts

@@ -0,0 +1,7 @@
+import { Cursor } from './Cursor';
+
+export interface Operations {
+  select(cursor: Cursor): void;
+  deselect(cursor: Cursor): void;
+  insert(cursor: Cursor, text: string): Cursor;
+}

src/app/plugins/text-area/TextArea.ts

@@ -0,0 +1,58 @@
+import { Cursor } from './Cursor';
+import { GetTarget } from './type';
+
+export class TextArea {
+  private readonly getTarget: GetTarget;
+
+  constructor(getTarget: GetTarget) {
+    this.getTarget = getTarget;
+  }
+
+  get target() {
+    return this.getTarget();
+  }
+
+  public selection(cursor: Cursor): string {
+    return this.target.value.substring(cursor.start, cursor.end);
+  }
+
+  public lineBeginIndex(cursor: Cursor): number {
+    const beforeValue = this.target.value.substring(0, cursor.start);
+    const lineEndIndex = beforeValue.lastIndexOf('\n');
+    return lineEndIndex + 1;
+  }
+
+  public lineEndIndex(cursor: Cursor): number {
+    const afterValue = this.target.value.substring(cursor.end);
+    const lineEndIndex = afterValue.indexOf('\n');
+    return cursor.end + (lineEndIndex === -1 ? afterValue.length : lineEndIndex);
+  }
+
+  public cursorLines(cursor: Cursor): Cursor {
+    const lineBeginIndex = this.lineBeginIndex(cursor);
+    const lineEndIndex = this.lineEndIndex(cursor);
+
+    const linesCursor = new Cursor(lineBeginIndex, lineEndIndex, 'none');
+    return linesCursor;
+  }
+
+  public prevLine(cursor: Cursor): Cursor | undefined {
+    const currentLineIndex = this.lineBeginIndex(cursor);
+    const prevIndex = currentLineIndex - 1;
+
+    if (prevIndex < 0) return undefined;
+
+    const lineCursor = this.cursorLines(new Cursor(prevIndex, prevIndex, 'none'));
+    return lineCursor;
+  }
+
+  public nextLine(cursor: Cursor): Cursor | undefined {
+    const currentLineIndex = this.lineEndIndex(cursor);
+    const nextIndex = currentLineIndex + 1;
+
+    if (nextIndex > this.target.value.length) return undefined;
+
+    const lineCursor = this.cursorLines(new Cursor(nextIndex, nextIndex, 'none'));
+    return lineCursor;
+  }
+}

src/app/plugins/text-area/TextAreaOperations.ts

@@ -0,0 +1,34 @@
+import { Cursor } from './Cursor';
+import { Operations } from './Operations';
+import { GetTarget } from './type';
+
+export class TextAreaOperations implements Operations {
+  private readonly getTarget: GetTarget;
+
+  constructor(getTarget: GetTarget) {
+    this.getTarget = getTarget;
+  }
+
+  get target() {
+    return this.getTarget();
+  }
+
+  public select(cursor: Cursor) {
+    this.target.setSelectionRange(cursor.start, cursor.end, cursor.direction);
+  }
+
+  public deselect(cursor: Cursor) {
+    if (cursor.direction === 'backward') {
+      this.target.setSelectionRange(cursor.start, cursor.start, 'none');
+      return;
+    }
+    this.target.setSelectionRange(cursor.end, cursor.end, 'none');
+  }
+
+  public insert(cursor: Cursor, text: string): Cursor {
+    const { value } = this.target;
+    this.target.value = `${value.substring(0, cursor.start)}${text}${value.substring(cursor.end)}`;
+
+    return new Cursor(cursor.start, cursor.start + text.length, cursor.direction);
+  }
+}

src/app/plugins/text-area/TextUtils.ts

@@ -0,0 +1,5 @@
+export class TextUtils {
+  static multiline(str: string) {
+    return str.indexOf('\n') !== -1;
+  }
+}

src/app/plugins/text-area/index.ts

@@ -0,0 +1,6 @@
+export * from './Cursor';
+export * from './mods';
+export * from './Operations';
+export * from './TextArea';
+export * from './TextAreaOperations';
+export * from './TextUtils';

src/app/plugins/text-area/mods/Intent.ts

@@ -0,0 +1,102 @@
+import { Cursor } from '../Cursor';
+import { Operations } from '../Operations';
+import { TextArea } from '../TextArea';
+
+export class Intent {
+  public readonly textArea: TextArea;
+
+  public readonly operations: Operations;
+
+  public readonly size: number;
+
+  public readonly str: string;
+
+  private intentReg: RegExp;
+
+  constructor(size: number, textArea: TextArea, operations: Operations) {
+    this.textArea = textArea;
+    this.operations = operations;
+    this.size = size;
+    this.intentReg = /^\s*/;
+
+    this.str = '';
+    for (let i = 0; i < size; i += 1) this.str += ' ';
+  }
+
+  private lineIntent(cursor: Cursor): string {
+    const lines = this.textArea.cursorLines(cursor);
+    const selection = this.textArea.selection(lines);
+    const match = selection.match(this.intentReg);
+    if (!match) return '';
+    return match[0];
+  }
+
+  public moveForward(cursor: Cursor): Cursor {
+    const linesCursor = this.textArea.cursorLines(cursor);
+
+    const selection = this.textArea.selection(linesCursor);
+    const lines = selection.split('\n');
+
+    const intentLines = lines.map((line) => `${this.str}${line}`);
+    this.operations.insert(linesCursor, intentLines.join('\n'));
+
+    const addedIntentLength = lines.length * this.str.length;
+    return new Cursor(
+      cursor.start === linesCursor.start ? cursor.start : cursor.start + this.str.length,
+      cursor.end + addedIntentLength,
+      cursor.direction
+    );
+  }
+
+  public moveBackward(cursor: Cursor): Cursor {
+    const linesCursor = this.textArea.cursorLines(cursor);
+
+    const selection = this.textArea.selection(linesCursor);
+    const lines = selection.split('\n');
+
+    const intentLines = lines.map((line) => {
+      if (line.startsWith(this.str)) return line.substring(this.str.length);
+      return line.replace(this.intentReg, '');
+    });
+    const intentCursor = this.operations.insert(linesCursor, intentLines.join('\n'));
+
+    const firstLineTrimLength = lines[0].length - intentLines[0].length;
+    const lastLine = this.textArea.cursorLines(
+      new Cursor(intentCursor.end, intentCursor.end, 'none')
+    );
+
+    const start = Math.max(cursor.start - firstLineTrimLength, linesCursor.start);
+    const trimmedContentLength = linesCursor.length - intentCursor.length;
+    const end = Math.max(lastLine.start, cursor.end - trimmedContentLength);
+    return new Cursor(start, end, cursor.direction);
+  }
+
+  public addNewLine(cursor: Cursor): Cursor {
+    const lineIntent = this.lineIntent(cursor);
+    const line = `\n${lineIntent}`;
+
+    const insertCursor = this.operations.insert(cursor, line);
+    return new Cursor(insertCursor.end, insertCursor.end, 'none');
+  }
+
+  public addNextLine(cursor: Cursor): Cursor {
+    const lineIntent = this.lineIntent(cursor);
+    const line = `\n${lineIntent}`;
+
+    const currentLine = this.textArea.cursorLines(cursor);
+    const lineCursor = new Cursor(currentLine.end, currentLine.end, 'none');
+    const insertCursor = this.operations.insert(lineCursor, line);
+    return new Cursor(insertCursor.end, insertCursor.end, 'none');
+  }
+
+  public addPreviousLine(cursor: Cursor): Cursor {
+    const lineIntent = this.lineIntent(cursor);
+    const line = `\n${lineIntent}`;
+
+    const prevLine = this.textArea.prevLine(cursor);
+    const insertIndex = prevLine?.end ?? 0;
+    const lineCursor = new Cursor(insertIndex, insertIndex, 'none');
+    const insertCursor = this.operations.insert(lineCursor, line);
+    return new Cursor(insertCursor.end, insertCursor.end, 'none');
+  }
+}

src/app/plugins/text-area/mods/index.ts

@@ -0,0 +1 @@
+export * from './Intent';

src/app/plugins/text-area/type.ts

@@ -0,0 +1 @@
+export type GetTarget = () => HTMLTextAreaElement;