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/features/settings/devices/DeviceTile.tsx

@@ -0,0 +1,332 @@
+import React, { FormEventHandler, ReactNode, useCallback, useEffect, useState } from 'react';
+import {
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Chip,
+  Input,
+  Button,
+  color,
+  Spinner,
+  toRem,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+} from 'folds';
+import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
+import FocusTrap from 'focus-trap-react';
+import { IMyDevice, MatrixError } from 'matrix-js-sdk';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../../utils/time';
+import { BreakWord } from '../../../styles/Text.css';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { LogoutDialog } from '../../../components/LogoutDialog';
+import { stopPropagation } from '../../../utils/keyboard';
+
+export function DeviceTilePlaceholder() {
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      style={{ height: toRem(66) }}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    />
+  );
+}
+
+function DeviceActiveTime({ ts }: { ts: number }) {
+  return (
+    <Text className={BreakWord} size="T200">
+      <Text size="Inherit" as="span" priority="300">
+        {'Last activity: '}
+      </Text>
+      <>
+        {today(ts) && 'Today'}
+        {yesterday(ts) && 'Yesterday'}
+        {!today(ts) && !yesterday(ts) && timeDayMonYear(ts)} {timeHourMinute(ts)}
+      </>
+    </Text>
+  );
+}
+
+function DeviceDetails({ device }: { device: IMyDevice }) {
+  return (
+    <>
+      {typeof device.device_id === 'string' && (
+        <Text className={BreakWord} size="T200" priority="300">
+          Device ID: <i>{device.device_id}</i>
+        </Text>
+      )}
+      {typeof device.last_seen_ip === 'string' && (
+        <Text className={BreakWord} size="T200" priority="300">
+          IP Address: <i>{device.last_seen_ip}</i>
+        </Text>
+      )}
+    </>
+  );
+}
+
+type DeviceKeyDetailsProps = {
+  crypto: CryptoApi;
+};
+export function DeviceKeyDetails({ crypto }: DeviceKeyDetailsProps) {
+  const [keysState, loadKeys] = useAsyncCallback(
+    useCallback(() => {
+      const keys = crypto.getOwnDeviceKeys();
+      return keys;
+    }, [crypto])
+  );
+
+  useEffect(() => {
+    loadKeys();
+  }, [loadKeys]);
+
+  if (keysState.status === AsyncStatus.Error) return null;
+
+  return (
+    <Text className={BreakWord} size="T200" priority="300">
+      Device Key:{' '}
+      <i>{keysState.status === AsyncStatus.Success ? keysState.data.ed25519 : 'loading...'}</i>
+    </Text>
+  );
+}
+
+type DeviceRenameProps = {
+  device: IMyDevice;
+  onCancel: () => void;
+  onRename: () => void;
+  refreshDeviceList: () => Promise<void>;
+};
+function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceRenameProps) {
+  const mx = useMatrixClient();
+
+  const [renameState, rename] = useAsyncCallback<void, MatrixError, [string]>(
+    useCallback(
+      async (name: string) => {
+        await mx.setDeviceDetails(device.device_id, { display_name: name });
+        await refreshDeviceList();
+      },
+      [mx, device.device_id, refreshDeviceList]
+    )
+  );
+
+  const renaming = renameState.status === AsyncStatus.Loading;
+
+  useEffect(() => {
+    if (renameState.status === AsyncStatus.Success) {
+      onRename();
+    }
+  }, [renameState, onRename]);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (renaming) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const nameInput = target?.nameInput as HTMLInputElement | undefined;
+    if (!nameInput) return;
+    const deviceName = nameInput.value.trim();
+    if (!deviceName || deviceName === device.display_name) return;
+
+    rename(deviceName);
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
+      <Text size="L400">Device Name</Text>
+      <Box gap="200">
+        <Box grow="Yes" direction="Column">
+          <Input
+            name="nameInput"
+            size="300"
+            variant="Secondary"
+            radii="300"
+            defaultValue={device.display_name}
+            autoFocus
+            required
+            readOnly={renaming}
+          />
+        </Box>
+        <Box shrink="No" gap="200">
+          <Button
+            type="submit"
+            size="300"
+            variant="Success"
+            radii="300"
+            fill="Solid"
+            disabled={renaming}
+            before={renaming && <Spinner size="100" variant="Success" fill="Solid" />}
+          >
+            <Text size="B300">Save</Text>
+          </Button>
+          <Button
+            type="button"
+            size="300"
+            variant="Secondary"
+            radii="300"
+            fill="Soft"
+            onClick={onCancel}
+            disabled={renaming}
+          >
+            <Text size="B300">Cancel</Text>
+          </Button>
+        </Box>
+      </Box>
+      {renameState.status === AsyncStatus.Error ? (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          {renameState.error.message}
+        </Text>
+      ) : (
+        <Text size="T200">Device names are visible to public.</Text>
+      )}
+    </Box>
+  );
+}
+
+export function DeviceLogoutBtn() {
+  const [prompt, setPrompt] = useState(false);
+
+  const handleClose = () => setPrompt(false);
+
+  return (
+    <>
+      <Chip variant="Secondary" fill="Soft" radii="Pill" onClick={() => setPrompt(true)}>
+        <Text size="B300">Logout</Text>
+      </Chip>
+      {prompt && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                onDeactivate: handleClose,
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <LogoutDialog handleClose={handleClose} />
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </>
+  );
+}
+
+type DeviceDeleteBtnProps = {
+  deviceId: string;
+  deleted: boolean;
+  onDeleteToggle: (deviceId: string) => void;
+  disabled?: boolean;
+};
+export function DeviceDeleteBtn({
+  deviceId,
+  deleted,
+  onDeleteToggle,
+  disabled,
+}: DeviceDeleteBtnProps) {
+  return deleted ? (
+    <Chip
+      variant="Critical"
+      fill="None"
+      radii="Pill"
+      onClick={() => onDeleteToggle(deviceId)}
+      disabled={disabled}
+    >
+      <Text size="B300">Undo</Text>
+    </Chip>
+  ) : (
+    <Chip
+      variant="Secondary"
+      fill="None"
+      radii="Pill"
+      onClick={() => onDeleteToggle(deviceId)}
+      disabled={disabled}
+    >
+      <Icon size="50" src={Icons.Delete} />
+    </Chip>
+  );
+}
+
+type DeviceTileProps = {
+  device: IMyDevice;
+  deleted?: boolean;
+  refreshDeviceList: () => Promise<void>;
+  disabled?: boolean;
+  options?: ReactNode;
+  children?: ReactNode;
+};
+export function DeviceTile({
+  device,
+  deleted,
+  refreshDeviceList,
+  disabled,
+  options,
+  children,
+}: DeviceTileProps) {
+  const activeTs = device.last_seen_ts;
+  const [details, setDetails] = useState(false);
+  const [edit, setEdit] = useState(false);
+
+  const handleRename = useCallback(() => {
+    setEdit(false);
+  }, []);
+
+  return (
+    <>
+      <SettingTile
+        before={
+          <IconButton
+            variant={deleted ? 'Critical' : 'Secondary'}
+            outlined={deleted}
+            radii="300"
+            onClick={() => setDetails(!details)}
+          >
+            <Icon size="50" src={details ? Icons.ChevronBottom : Icons.ChevronRight} />
+          </IconButton>
+        }
+        after={
+          !edit && (
+            <Box shrink="No" alignItems="Center" gap="200">
+              {options}
+              {!deleted && (
+                <Chip
+                  variant="Secondary"
+                  radii="Pill"
+                  onClick={() => setEdit(true)}
+                  disabled={disabled}
+                >
+                  <Text size="B300">Edit</Text>
+                </Chip>
+              )}
+            </Box>
+          )
+        }
+      >
+        <Text size="T300">{device.display_name ?? device.device_id}</Text>
+        <Box direction="Column">
+          {typeof activeTs === 'number' && <DeviceActiveTime ts={activeTs} />}
+          {details && (
+            <>
+              <DeviceDetails device={device} />
+              {children}
+            </>
+          )}
+        </Box>
+      </SettingTile>
+      {edit && (
+        <DeviceRename
+          device={device}
+          onCancel={() => setEdit(false)}
+          onRename={handleRename}
+          refreshDeviceList={refreshDeviceList}
+        />
+      )}
+    </>
+  );
+}