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/components/emoji-board/EmojiBoard.tsx

@@ -41,7 +41,6 @@ import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
-import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
 import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, isIntersectingScrollView, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
@@ -50,6 +49,7 @@ import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -359,16 +359,16 @@ function ImagePackSidebarStack({
 }: {
   mx: MatrixClient;
   packs: ImagePack[];
-  usage: PackUsage;
+  usage: ImageUsage;
   onItemClick: (id: string) => void;
   useAuthentication?: boolean;
 }) {
   const activeGroupId = useAtomValue(activeGroupIdAtom);
   return (
     <SidebarStack>
-      {usage === PackUsage.Emoticon && <SidebarDivider />}
+      {usage === ImageUsage.Emoticon && <SidebarDivider />}
       {packs.map((pack) => {
-        let label = pack.displayName;
+        let label = pack.meta.name;
         if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
         return (
           <SidebarBtn
@@ -384,7 +384,10 @@ function ImagePackSidebarStack({
                 height: toRem(24),
                 objectFit: 'contain',
               }}
-              src={mxcUrlToHttp(mx, pack.getPackAvatarUrl(usage) ?? '', useAuthentication) || pack.avatarUrl}
+              src={
+                mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
+                pack.meta.avatar
+              }
               alt={label || 'Unknown Pack'}
             />
           </SidebarBtn>
@@ -462,130 +465,156 @@ export function SearchEmojiGroup({
   tab: EmojiBoardTab;
   label: string;
   id: string;
-  emojis: Array<ExtendedPackImage | IEmoji>;
+  emojis: Array<PackImageReader | IEmoji>;
   useAuthentication?: boolean;
 }) {
   return (
     <EmojiGroup key={id} id={id} label={label}>
       {tab === EmojiBoardTab.Emoji
-        ? searchResult.sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((emoji) =>
-          'unicode' in emoji ? (
-            <EmojiItem
-              key={emoji.unicode}
-              label={emoji.label}
-              type={EmojiType.Emoji}
-              data={emoji.unicode}
-              shortcode={emoji.shortcode}
-            >
-              {emoji.unicode}
-            </EmojiItem>
-          ) : (
-            <EmojiItem
-              key={emoji.shortcode}
-              label={emoji.body || emoji.shortcode}
-              type={EmojiType.CustomEmoji}
-              data={emoji.url}
-              shortcode={emoji.shortcode}
-            >
-              <img
-                loading="lazy"
-                className={css.CustomEmojiImg}
-                alt={emoji.body || emoji.shortcode}
-                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
-              />
-            </EmojiItem>
-          )
-        )
+        ? searchResult
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
+            .map((emoji) =>
+              'unicode' in emoji ? (
+                <EmojiItem
+                  key={emoji.unicode}
+                  label={emoji.label}
+                  type={EmojiType.Emoji}
+                  data={emoji.unicode}
+                  shortcode={emoji.shortcode}
+                >
+                  {emoji.unicode}
+                </EmojiItem>
+              ) : (
+                <EmojiItem
+                  key={emoji.shortcode}
+                  label={emoji.body || emoji.shortcode}
+                  type={EmojiType.CustomEmoji}
+                  data={emoji.url}
+                  shortcode={emoji.shortcode}
+                >
+                  <img
+                    loading="lazy"
+                    className={css.CustomEmojiImg}
+                    alt={emoji.body || emoji.shortcode}
+                    src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                  />
+                </EmojiItem>
+              )
+            )
         : searchResult.map((emoji) =>
-          'unicode' in emoji ? null : (
-            <StickerItem
-              key={emoji.shortcode}
-              label={emoji.body || emoji.shortcode}
-              type={EmojiType.Sticker}
-              data={emoji.url}
-              shortcode={emoji.shortcode}
-            >
-              <img
-                loading="lazy"
-                className={css.StickerImg}
-                alt={emoji.body || emoji.shortcode}
-                src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
-              />
-            </StickerItem>
-          )
-        )}
+            'unicode' in emoji ? null : (
+              <StickerItem
+                key={emoji.shortcode}
+                label={emoji.body || emoji.shortcode}
+                type={EmojiType.Sticker}
+                data={emoji.url}
+                shortcode={emoji.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.StickerImg}
+                  alt={emoji.body || emoji.shortcode}
+                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                />
+              </StickerItem>
+            )
+          )}
     </EmojiGroup>
   );
 }
 
 export const CustomEmojiGroups = memo(
-  ({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
+  ({
+    mx,
+    groups,
+    useAuthentication,
+  }: {
+    mx: MatrixClient;
+    groups: ImagePack[];
+    useAuthentication?: boolean;
+  }) => (
     <>
       {groups.map((pack) => (
-        <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
-          {pack.getEmojis().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
-            <EmojiItem
-              key={image.shortcode}
-              label={image.body || image.shortcode}
-              type={EmojiType.CustomEmoji}
-              data={image.url}
-              shortcode={image.shortcode}
-            >
-              <img
-                loading="lazy"
-                className={css.CustomEmojiImg}
-                alt={image.body || image.shortcode}
-                src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
-              />
-            </EmojiItem>
-          ))}
+        <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
+          {pack
+            .getImages(ImageUsage.Emoticon)
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
+            .map((image) => (
+              <EmojiItem
+                key={image.shortcode}
+                label={image.body || image.shortcode}
+                type={EmojiType.CustomEmoji}
+                data={image.url}
+                shortcode={image.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.CustomEmojiImg}
+                  alt={image.body || image.shortcode}
+                  src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                />
+              </EmojiItem>
+            ))}
         </EmojiGroup>
       ))}
     </>
   )
 );
 
-export const StickerGroups = memo(({ mx, groups, useAuthentication }: { mx: MatrixClient; groups: ImagePack[]; useAuthentication?: boolean }) => (
-  <>
-    {groups.length === 0 && (
-      <Box
-        style={{ padding: `${toRem(60)} ${config.space.S500}` }}
-        alignItems="Center"
-        justifyContent="Center"
-        direction="Column"
-        gap="300"
-      >
-        <Icon size="600" src={Icons.Sticker} />
-        <Box direction="Inherit">
-          <Text align="Center">No Sticker Packs!</Text>
-          <Text priority="300" align="Center" size="T200">
-            Add stickers from user, room or space settings.
-          </Text>
+export const StickerGroups = memo(
+  ({
+    mx,
+    groups,
+    useAuthentication,
+  }: {
+    mx: MatrixClient;
+    groups: ImagePack[];
+    useAuthentication?: boolean;
+  }) => (
+    <>
+      {groups.length === 0 && (
+        <Box
+          style={{ padding: `${toRem(60)} ${config.space.S500}` }}
+          alignItems="Center"
+          justifyContent="Center"
+          direction="Column"
+          gap="300"
+        >
+          <Icon size="600" src={Icons.Sticker} />
+          <Box direction="Inherit">
+            <Text align="Center">No Sticker Packs!</Text>
+            <Text priority="300" align="Center" size="T200">
+              Add stickers from user, room or space settings.
+            </Text>
+          </Box>
         </Box>
-      </Box>
-    )}
-    {groups.map((pack) => (
-      <EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
-        {pack.getStickers().sort((a, b) => a.shortcode.localeCompare(b.shortcode)).map((image) => (
-          <StickerItem
-            key={image.shortcode}
-            label={image.body || image.shortcode}
-            type={EmojiType.Sticker}
-            data={image.url}
-            shortcode={image.shortcode}
-          >
-            <img
-              loading="lazy"
-              className={css.StickerImg}
-              alt={image.body || image.shortcode}
-              src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
-            />
-          </StickerItem>
-        ))}
-      </EmojiGroup>
-    ))}
-  </>
-));
+      )}
+      {groups.map((pack) => (
+        <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
+          {pack
+            .getImages(ImageUsage.Sticker)
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
+            .map((image) => (
+              <StickerItem
+                key={image.shortcode}
+                label={image.body || image.shortcode}
+                type={EmojiType.Sticker}
+                data={image.url}
+                shortcode={image.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.StickerImg}
+                  alt={image.body || image.shortcode}
+                  src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                />
+              </StickerItem>
+            ))}
+        </EmojiGroup>
+      ))}
+    </>
+  )
+);
 
 export const NativeEmojiGroups = memo(
   ({ groups, labels }: { groups: IEmojiGroup[]; labels: IEmojiGroupLabels }) => (
@@ -609,7 +638,7 @@ export const NativeEmojiGroups = memo(
   )
 );
 
-const getSearchListItemStr = (item: ExtendedPackImage | IEmoji) => {
+const getSearchListItemStr = (item: PackImageReader | IEmoji) => {
   const shortcode = `:${item.shortcode}:`;
   if ('body' in item) {
     return [shortcode, item.body ?? ''];
@@ -646,14 +675,14 @@ export function EmojiBoard({
 }) {
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const stickerTab = tab === EmojiBoardTab.Sticker;
-  const usage = emojiTab ? PackUsage.Emoticon : PackUsage.Sticker;
+  const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
 
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const emojiGroupLabels = useEmojiGroupLabels();
   const emojiGroupIcons = useEmojiGroupIcons();
-  const imagePacks = useRelevantImagePacks(mx, usage, imagePackRooms);
+  const imagePacks = useRelevantImagePacks(usage, imagePackRooms);
   const recentEmojis = useRecentEmoji(mx, 21);
 
   const contentScrollRef = useRef<HTMLDivElement>(null);
@@ -661,8 +690,8 @@ export function EmojiBoard({
   const emojiPreviewTextRef = useRef<HTMLParagraphElement>(null);
 
   const searchList = useMemo(() => {
-    let list: Array<ExtendedPackImage | IEmoji> = [];
-    list = list.concat(imagePacks.flatMap((pack) => pack.getImagesFor(usage)));
+    let list: Array<PackImageReader | IEmoji> = [];
+    list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
     if (emojiTab) list = list.concat(emojis);
     return list;
   }, [emojiTab, usage, imagePacks]);
@@ -688,7 +717,7 @@ export function EmojiBoard({
   const syncActiveGroupId = useCallback(() => {
     const targetEl = contentScrollRef.current;
     if (!targetEl) return;
-    const groupEls = [...targetEl.querySelectorAll('div[data-group-id]')] as HTMLElement[];
+    const groupEls = Array.from(targetEl.querySelectorAll('div[data-group-id]')) as HTMLElement[];
     const groupEl = groupEls.find((el) => isIntersectingScrollView(targetEl, el));
     const groupId = groupEl?.getAttribute('data-group-id') ?? undefined;
     setActiveGroupId(groupId);
@@ -735,7 +764,10 @@ export function EmojiBoard({
       } else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
         const img = document.createElement('img');
         img.className = css.CustomEmojiImg;
-        img.setAttribute('src', mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data);
+        img.setAttribute(
+          'src',
+          mxcUrlToHttp(mx, emojiInfo.data, useAuthentication) || emojiInfo.data
+        );
         img.setAttribute('alt', emojiInfo.shortcode);
         emojiPreviewRef.current.textContent = '';
         emojiPreviewRef.current.appendChild(img);
@@ -903,8 +935,16 @@ export function EmojiBoard({
               {emojiTab && recentEmojis.length > 0 && (
                 <RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
               )}
-              {emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
-              {stickerTab && <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />}
+              {emojiTab && (
+                <CustomEmojiGroups
+                  mx={mx}
+                  groups={imagePacks}
+                  useAuthentication={useAuthentication}
+                />
+              )}
+              {stickerTab && (
+                <StickerGroups mx={mx} groups={imagePacks} useAuthentication={useAuthentication} />
+              )}
               {emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
             </Box>
           </Scroll>