Use rust crypto instead of libolm

src/app/components/CapabilitiesAndMediaConfigLoader.tsx

@@ -19,7 +19,7 @@ export function CapabilitiesAndMediaConfigLoader({
     []
   >(
     useCallback(async () => {
-      const result = await Promise.allSettled([mx.getCapabilities(true), mx.getMediaConfig()]);
+      const result = await Promise.allSettled([mx.getCapabilities(), mx.getMediaConfig()]);
       const capabilities = promiseFulfilledResult(result[0]);
       const mediaConfig = promiseFulfilledResult(result[1]);
       return [capabilities, mediaConfig];

src/app/components/CapabilitiesLoader.tsx

@@ -9,7 +9,7 @@ type CapabilitiesLoaderProps = {
 export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
   const mx = useMatrixClient();
 
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(true), [mx]));
+  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
 
   useEffect(() => {
     load();

src/app/features/lobby/Lobby.tsx

@@ -3,7 +3,8 @@ import { Box, Icon, IconButton, Icons, Line, Scroll, config } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
 import { useNavigate } from 'react-router-dom';
-import { IJoinRuleEventContent, JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
+import { JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
+import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { useSpace } from '../../hooks/useSpace';
 import { Page, PageContent, PageContentCenter, PageHeroSection } from '../../components/page';
 import { HierarchyItem, useSpaceHierarchy } from '../../hooks/useSpaceHierarchy';
@@ -258,7 +259,7 @@ export function Lobby() {
         const joinRuleContent = getStateEvent(
           itemRoom,
           StateEvent.RoomJoinRules
-        )?.getContent<IJoinRuleEventContent>();
+        )?.getContent<RoomJoinRulesEventContent>();
 
         if (joinRuleContent) {
           const allow =

src/app/features/room/RoomInput.tsx

@@ -157,7 +157,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         const safeFiles = files.map(safeFile);
         const fileItems: TUploadItem[] = [];
 
-        if (mx.isRoomEncrypted(roomId)) {
+        if (room.hasEncryptionStateEvent()) {
           const encryptFiles = fulfilledPromiseSettledResult(
             await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
           );
@@ -172,7 +172,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           item: fileItems,
         });
       },
-      [setSelectedFiles, roomId, mx]
+      [setSelectedFiles, room]
     );
     const pickFile = useFilePicker(handleFiles, true);
     const handlePaste = useFilePasteHandler(handleFiles);

src/app/features/room/RoomTimeline.tsx

@@ -336,7 +336,10 @@ const useTimelinePagination = (
           backwards ? Direction.Backward : Direction.Forward
         ) ?? timelineToPaginate;
       // Decrypt all event ahead of render cycle
-      if (mx.isRoomEncrypted(fetchedTimeline.getRoomId() ?? '')) {
+      const roomId = fetchedTimeline.getRoomId();
+      const room = roomId ? mx.getRoom(roomId) : null;
+
+      if (room?.hasEncryptionStateEvent()) {
         await to(decryptAllTimelineEvent(mx, fetchedTimeline));
       }
 
@@ -421,15 +424,14 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
 export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const encryptedRoom = mx.isRoomEncrypted(room.roomId);
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
-  const showUrlPreview = encryptedRoom ? encUrlPreview : urlPreview;
+  const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const powerLevels = usePowerLevelsContext();

src/app/molecules/image-pack/ImagePack.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useMemo, useReducer, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { EventTimeline } from 'matrix-js-sdk';
 import './ImagePack.scss';
 
 import { openReusableDialog } from '../../../client/action/navigation';
@@ -18,7 +19,11 @@ import ImagePackItem from './ImagePackItem';
 import ImagePackUpload from './ImagePackUpload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { getStateEvent } from '../../utils/room';
 
+const renameImagePackItem = (shortcode) =>
+  new Promise((resolve) => {
+    let isCompleted = false;
 const renameImagePackItem = (shortcode) =>
   new Promise((resolve) => {
     let isCompleted = false;
@@ -52,6 +57,35 @@ const renameImagePackItem = (shortcode) =>
       }
     );
   });
+    openReusableDialog(
+      <Text variant="s1" weight="medium">
+        Rename
+      </Text>,
+      (requestClose) => (
+        <div style={{ padding: 'var(--sp-normal)' }}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const sc = e.target.shortcode.value;
+              if (sc.trim() === '') return;
+              isCompleted = true;
+              resolve(sc.trim());
+              requestClose();
+            }}
+          >
+            <Input value={shortcode} name="shortcode" label="Shortcode" autoFocus required />
+            <div style={{ height: 'var(--sp-normal)' }} />
+            <Button variant="primary" type="submit">
+              Rename
+            </Button>
+          </form>
+        </div>
+      ),
+      () => {
+        if (!isCompleted) resolve(null);
+      }
+    );
+  });
 
 function getUsage(usage) {
   if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
@@ -76,7 +110,7 @@ function useRoomImagePack(roomId, stateKey) {
   const room = mx.getRoom(roomId);
 
   const pack = useMemo(() => {
-    const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+    const packEvent = getStateEvent(room, 'im.ponies.room_emotes', stateKey);
     return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent());
   }, [room, stateKey]);
 
@@ -101,6 +135,13 @@ function useUserImagePack() {
         images: {},
       }
     );
+    return ImagePackBuilder.parsePack(
+      mx.getUserId(),
+      packEvent?.getContent() ?? {
+        pack: { display_name: 'Personal' },
+        images: {},
+      }
+    );
   }, [mx]);
 
   const sendPackContent = (content) => {
@@ -121,6 +162,7 @@ function useImagePackHandles(pack, sendPackContent) {
     let newKey = key?.replace(/\s/g, '_');
     if (pack.getImages().get(newKey)) {
       newKey = suffixRename(newKey, (suffixedKey) => pack.getImages().get(suffixedKey));
+      newKey = suffixRename(newKey, (suffixedKey) => pack.getImages().get(suffixedKey));
     }
     return newKey;
   };
@@ -245,14 +287,18 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   };
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room
+    .getLiveTimeline()
+    .getState(EventTimeline.FORWARDS)
+    ?.hasSufficientPowerLevelFor('state_default', myPowerlevel);
 
   const handleDeletePack = async () => {
     const isConfirmed = await confirmDialog(
       'Delete Pack',
       `Are you sure that you want to delete "${pack.displayName}"?`,
       'Delete',
       'danger'
+      'danger'
     );
     if (!isConfirmed) return;
     handlePackDelete(stateKey);
@@ -284,6 +330,8 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         onEditProfile={canChange ? handleEditProfile : null}
       />
       {canChange && <ImagePackUpload onUpload={handleAddItem} />}
+      {images.length === 0 ? null : (
+      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
       {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
@@ -319,6 +367,12 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
               {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
             </Button>
           )}
+          {handlePackDelete && (
+            <Button variant="danger" onClick={handleDeletePack}>
+              Delete Pack
+              {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
+            </Button>
+          )}
           {handlePackDelete && (
             <Button variant="danger" onClick={handleDeletePack}>
               Delete Pack
@@ -389,6 +443,7 @@ function ImagePackUser() {
         onEditProfile={handleEditProfile}
       />
       <ImagePackUpload onUpload={handleAddItem} />
+      {images.length === 0 ? null : (
       {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
@@ -417,10 +472,12 @@ function ImagePackUser() {
           ))}
         </div>
       )}
+      {pack.images.size > 2 && (
       {pack.images.size > 2 && (
         <div className="image-pack__footer">
           <Button onClick={() => setViewMore(!viewMore)}>
             {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
+            {viewMore ? 'View less' : `View ${pack.images.size - 2} more`}
           </Button>
         </div>
       )}
@@ -473,7 +530,7 @@ function ImagePackGlobal() {
           [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
             const room = mx.getRoom(roomId);
             return stateKeys.map((stateKey) => {
-              const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+              const data = getStateEvent(room, 'im.ponies.room_emotes', stateKey);
               const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
               if (!pack) return null;
               return (

src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx

@@ -41,7 +41,7 @@ function ExportE2ERoomKeys() {
       type: cons.status.IN_FLIGHT,
     });
     try {
-      const keys = await mx.exportRoomKeys();
+      const keys = await mx.getCrypto()?.exportRoomKeys();
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,

src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx

@@ -46,7 +46,7 @@ function ImportE2ERoomKeys() {
           type: cons.status.IN_FLIGHT,
         });
       }
-      await mx.importRoomKeys(JSON.parse(keys));
+      await mx.getCrypto()?.importRoomKeys(JSON.parse(keys));
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,

src/app/molecules/room-aliases/RoomAliases.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomAliases.scss';
+import { EventTimeline } from 'matrix-js-sdk';
 
 import cons from '../../../client/state/cons';
 import { Debounce } from '../../../util/common';
@@ -108,7 +109,7 @@ function RoomAliases({ roomId }) {
   const [deleteAlias, setDeleteAlias] = useState(null);
   const [validate, setValidateToDefault, handleAliasChange] = useValidate(hsString);
 
-  const canPublishAlias = room.currentState.maySendStateEvent('m.room.canonical_alias', userId);
+  const canPublishAlias = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('m.room.canonical_alias', userId);
 
   useEffect(() => {
     isMountedStore.setItem(true)

src/app/molecules/room-emojis/RoomEmojis.jsx

@@ -1,6 +1,7 @@
 import React, { useReducer, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomEmojis.scss';
+import { EventTimeline } from 'matrix-js-sdk';
 
 import { suffixRename } from '../../../util/common';
 
@@ -10,12 +11,13 @@ import Input from '../../atoms/input/Input';
 import Button from '../../atoms/button/Button';
 import ImagePack from '../image-pack/ImagePack';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getStateEvent, getStateEvents } from '../../utils/room';
 
 function useRoomPacks(room) {
   const mx = useMatrixClient();
   const [, forceUpdate] = useReducer((count) => count + 1, 0);
 
-  const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
+  const packEvents = getStateEvents(room, 'im.ponies.room_emotes');
   const unUsablePacks = [];
   const usablePacks = packEvents.filter((mEvent) => {
     if (typeof mEvent.getContent()?.images !== 'object') {
@@ -40,7 +42,7 @@ function useRoomPacks(room) {
     };
   }, [room, mx]);
 
-  const isStateKeyAvailable = (key) => !room.currentState.getStateEvents('im.ponies.room_emotes', key);
+  const isStateKeyAvailable = (key) => !getStateEvent(room, 'im.ponies.room_emotes', key);
 
   const createPack = async (name) => {
     const packContent = {
@@ -80,7 +82,7 @@ function RoomEmojis({ roomId }) {
 
   const { usablePacks, createPack, deletePack } = useRoomPacks(room);
 
-  const canChange = room.currentState.maySendStateEvent('im.ponies.room_emote', mx.getUserId());
+  const canChange = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('im.ponies.room_emote', mx.getUserId());
 
   const handlePackCreate = (e) => {
     e.preventDefault();

src/app/molecules/room-encryption/RoomEncryption.jsx

@@ -1,21 +1,22 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './RoomEncryption.scss';
-
+import { EventTimeline } from 'matrix-js-sdk';
 
 import Text from '../../atoms/text/Text';
 import Toggle from '../../atoms/button/Toggle';
 import SettingTile from '../setting-tile/SettingTile';
 
 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getStateEvents } from '../../utils/room';
 
 function RoomEncryption({ roomId }) {
   const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
-  const encryptionEvents = room.currentState.getStateEvents('m.room.encryption');
+  const encryptionEvents = getStateEvents(room, 'm.room.encryption');
   const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
-  const canEnableEncryption = room.currentState.maySendStateEvent('m.room.encryption', mx.getUserId());
+  const canEnableEncryption = room.getLiveTimeline().getState(EventTimeline.FORWARDS).maySendStateEvent('m.room.encryption', mx.getUserId());
 
   const handleEncryptionEnable = async () => {
     const joinRule = room.getJoinRule();

src/app/molecules/room-permissions/RoomPermissions.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomPermissions.scss';
+import { EventTimeline } from 'matrix-js-sdk';
 
 import { getPowerLabel } from '../../../util/matrixUtil';
 import { openReusableContextMenu } from '../../../client/action/navigation';
@@ -16,6 +17,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getStateEvent } from '../../utils/room';
 
 const permissionsInfo = {
   users_default: {
@@ -176,9 +178,9 @@ function RoomPermissions({ roomId }) {
   useRoomStateUpdate(roomId);
   const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
-  const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
+  const pLEvent = getStateEvent(room, 'm.room.power_levels');
   const permissions = pLEvent.getContent();
-  const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId());
+  const canChangePermission = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.maySendStateEvent('m.room.power_levels', mx.getUserId());
   const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel ?? 100;
 
   const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {

src/app/molecules/room-visibility/RoomVisibility.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import './RoomVisibility.scss';
-
+import { EventTimeline } from 'matrix-js-sdk';
 
 import Text from '../../atoms/text/Text';
 import RadioButton from '../../atoms/button/RadioButton';
@@ -74,7 +74,7 @@ function RoomVisibility({ roomId }) {
   const roomVersion = Number(mCreate?.room_version ?? 0);
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.hasSufficientPowerLevelFor('state_default', myPowerlevel);
 
   const items = [{
     iconSrc: isSpace ? SpaceLockIC : HashLockIC,