Resolved merge conflict

src/app/components/JoinRulesSwitcher.tsx

@@ -17,12 +17,16 @@ import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
 
-type JoinRuleIcons = Record<JoinRule, IconSrc>;
+export type ExtraJoinRules = 'knock_restricted';
+export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
+
+type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
 export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
   useMemo(
     () => ({
       [JoinRule.Invite]: Icons.HashLock,
       [JoinRule.Knock]: Icons.HashLock,
+      knock_restricted: Icons.Hash,
       [JoinRule.Restricted]: Icons.Hash,
       [JoinRule.Public]: Icons.HashGlobe,
       [JoinRule.Private]: Icons.HashLock,
@@ -34,6 +38,7 @@ export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
     () => ({
       [JoinRule.Invite]: Icons.SpaceLock,
       [JoinRule.Knock]: Icons.SpaceLock,
+      knock_restricted: Icons.Space,
       [JoinRule.Restricted]: Icons.Space,
       [JoinRule.Public]: Icons.SpaceGlobe,
       [JoinRule.Private]: Icons.SpaceLock,
@@ -41,12 +46,13 @@ export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
     []
   );
 
-type JoinRuleLabels = Record<JoinRule, string>;
+type JoinRuleLabels = Record<ExtendedJoinRules, string>;
 export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
   useMemo(
     () => ({
       [JoinRule.Invite]: 'Invite Only',
       [JoinRule.Knock]: 'Knock & Invite',
+      knock_restricted: 'Space Members or Knock',
       [JoinRule.Restricted]: 'Space Members',
       [JoinRule.Public]: 'Public',
       [JoinRule.Private]: 'Invite Only',
@@ -54,7 +60,7 @@ export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
     []
   );
 
-type JoinRulesSwitcherProps<T extends JoinRule[]> = {
+type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
   icons: JoinRuleIcons;
   labels: JoinRuleLabels;
   rules: T;
@@ -63,7 +69,7 @@ type JoinRulesSwitcherProps<T extends JoinRule[]> = {
   disabled?: boolean;
   changing?: boolean;
 };
-export function JoinRulesSwitcher<T extends JoinRule[]>({
+export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
   icons,
   labels,
   rules,
@@ -79,7 +85,7 @@ export function JoinRulesSwitcher<T extends JoinRule[]>({
   };
 
   const handleChange = useCallback(
-    (selectedRule: JoinRule) => {
+    (selectedRule: ExtendedJoinRules) => {
       setCords(undefined);
       onChange(selectedRule);
     },
@@ -131,7 +137,7 @@ export function JoinRulesSwitcher<T extends JoinRule[]>({
         fill="Soft"
         radii="300"
         outlined
-        before={<Icon size="100" src={icons[value]} />}
+        before={<Icon size="100" src={icons[value] ?? icons[JoinRule.Restricted]} />}
         after={
           changing ? (
             <Spinner size="100" variant="Secondary" fill="Soft" />
@@ -142,7 +148,7 @@ export function JoinRulesSwitcher<T extends JoinRule[]>({
         onClick={handleOpenMenu}
         disabled={disabled}
       >
-        <Text size="B300">{labels[value]}</Text>
+        <Text size="B300">{labels[value] ?? 'Unsupported'}</Text>
       </Button>
     </PopOut>
   );

src/app/components/SecretStorage.tsx

@@ -1,7 +1,6 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
 import { PasswordInput } from './password-input';
 import {
   SecretStorageKeyContent,
@@ -29,11 +28,16 @@ export function SecretStorageRecoveryPassphrase({
   const [driveKeyState, submitPassphrase] = useAsyncCallback<
     Uint8Array,
     Error,
-    Parameters<typeof deriveKey>
+    Parameters<typeof deriveRecoveryKeyFromPassphrase>
   >(
     useCallback(
       async (passphrase, salt, iterations, bits) => {
-        const decodedRecoveryKey = await deriveKey(passphrase, salt, iterations, bits);
+        const decodedRecoveryKey = await deriveRecoveryKeyFromPassphrase(
+          passphrase,
+          salt,
+          iterations,
+          bits
+        );
 
         const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
 

src/app/components/message/content/ImageContent.tsx

@@ -30,6 +30,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
+import { validBlurHash } from '../../../utils/blurHash';
 
 type RenderViewerProps = {
   src: string;
@@ -77,7 +78,7 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
+    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);

src/app/components/message/content/VideoContent.tsx

@@ -31,6 +31,7 @@ import {
   mxcUrlToHttp,
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { validBlurHash } from '../../../utils/blurHash';
 
 type RenderVideoProps = {
   title: string;
@@ -68,7 +69,7 @@ export const VideoContent = as<'div', VideoContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME];
+    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);

src/app/components/text-viewer/TextViewer.tsx

@@ -24,7 +24,7 @@ export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentPro
     >
       <ErrorBoundary fallback={<code>{text}</code>}>
         <Suspense fallback={<code>{text}</code>}>
-          <ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
+          <ReactPrism key={text}>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
         </Suspense>
       </ErrorBoundary>
     </Text>