chore: upgrade TypeScript 4.9 to 5.9, ESLint 8.29 to 8.57, @typescript-eslint 5 to 7

Resolves all TS2345/TS2347/TS7006 type errors introduced by stricter TypeScript 5.x.
Fix Icons.Settings to Icons.Setting, cast account data returns, fix implicit any.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/components/CallEmbedProvider.tsx

@@ -467,7 +467,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
       });
       el.style.visibility = callVisible ? '' : 'hidden';
     }
-    prevPipModeRef.current = pipMode;
+    prevPipModeRef.current = !!pipMode;
   }, [pipMode, callVisible]);
 
   React.useEffect(() => {

src/app/components/GifPicker.tsx

@@ -49,7 +49,9 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
         </div>
       )}
       <Box style={{ padding: '8px 8px 4px' }}>
-        <SearchBar style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }} />
+        <div style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }}>
+          <SearchBar />
+        </div>
       </Box>
       <div
         style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}

src/app/components/editor/Toolbar.tsx

@@ -279,42 +279,32 @@ export function Toolbar() {
               <MarkButton
                 format={MarkType.Bold}
                 icon={Icons.Bold}
-                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} label="Bold" />}
+                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
               />
               <MarkButton
                 format={MarkType.Italic}
                 icon={Icons.Italic}
-                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} label="Italic" />}
+                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
               />
               <MarkButton
                 format={MarkType.Underline}
                 icon={Icons.Underline}
-                tooltip={
-                  <BtnTooltip text="Underline" shortCode={`${modKey} + U`} label="Underline" />
-                }
+                tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
               />
               <MarkButton
                 format={MarkType.StrikeThrough}
                 icon={Icons.Strike}
-                tooltip={
-                  <BtnTooltip
-                    text="Strike Through"
-                    shortCode={`${modKey} + S`}
-                    label="Strikethrough"
-                  />
-                }
+                tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`} />}
               />
               <MarkButton
                 format={MarkType.Code}
                 icon={Icons.Code}
-                tooltip={
-                  <BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} label="Inline code" />
-                }
+                tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
               />
               <MarkButton
                 format={MarkType.Spoiler}
                 icon={Icons.EyeBlind}
-                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} label="Spoiler" />}
+                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
               />
             </Box>
             <Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
@@ -323,34 +313,22 @@ export function Toolbar() {
             <BlockButton
               format={BlockType.BlockQuote}
               icon={Icons.BlockQuote}
-              tooltip={
-                <BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} label="Block quote" />
-              }
+              tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} />}
             />
             <BlockButton
               format={BlockType.CodeBlock}
               icon={Icons.BlockCode}
-              tooltip={
-                <BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} label="Code block" />
-              }
+              tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} />}
             />
             <BlockButton
               format={BlockType.OrderedList}
               icon={Icons.OrderList}
-              tooltip={
-                <BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} label="Ordered list" />
-              }
+              tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} />}
             />
             <BlockButton
               format={BlockType.UnorderedList}
               icon={Icons.UnorderList}
-              tooltip={
-                <BtnTooltip
-                  text="Unordered List"
-                  shortCode={`${modKey} + 8`}
-                  label="Unordered list"
-                />
-              }
+              tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`} />}
             />
             <HeadingBlockButton />
           </Box>

src/app/components/image-pack-view/ImagePackContent.tsx

@@ -64,12 +64,12 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
       useCallback(
         (pickedFiles: File[]) => {
           const uniqueFiles = pickedFiles.map((file) => {
-            const fileName = replaceSpaceWithDash(file.name);
+            const fileName = replaceSpaceWithDash((file as File).name);
             if (hasImageWithShortcode(fileName)) {
               const uniqueName = suffixRename(fileName, hasImageWithShortcode);
               return renameFile(file, uniqueName);
             }
-            return fileName !== file.name ? renameFile(file, fileName) : file;
+            return fileName !== (file as File).name ? renameFile(file, fileName) : file;
           });
 
           setFiles((f) => [...f, ...uniqueFiles]);
@@ -122,7 +122,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
           info: getImageInfo(imgEl, data.file),
         };
         const image = PackImageReader.fromPackImage(
-          getFileNameWithoutExt(data.file.name),
+          getFileNameWithoutExt((data.file as File).name),
           packImage,
         );
         if (!image) return;
@@ -361,7 +361,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
             )}
             {files.map((file) => (
               <SequenceCard
-                key={file.name}
+                key={(file as File).name}
                 style={{ padding: config.space.S300 }}
                 variant="SurfaceVariant"
                 direction="Column"

src/app/components/image-pack-view/RoomImagePack.tsx

@@ -22,7 +22,10 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
+  const canEditImagePack = permissions.stateEvent(
+    StateEvent.PoniesRoomEmotes as unknown as keyof import('matrix-js-sdk').StateEvents,
+    userId,
+  );
 
   const fallbackPack = useMemo(() => {
     const fakePackId = randomStr(4);
@@ -44,8 +47,8 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
 
       await mx.sendStateEvent(
         address.roomId,
-        StateEvent.PoniesRoomEmotes,
-        packContent,
+        StateEvent.PoniesRoomEmotes as unknown as keyof import('matrix-js-sdk').StateEvents,
+        packContent as any,
         address.stateKey,
       );
     },

src/app/components/image-pack-view/UserImagePack.tsx

@@ -13,7 +13,10 @@ export function UserImagePack() {
 
   const handleUpdate = useCallback(
     async (packContent: PackContent) => {
-      await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, packContent);
+      await mx.setAccountData(
+        AccountDataEvent.PoniesUserEmotes as unknown as keyof import('matrix-js-sdk').AccountDataEvents,
+        packContent,
+      );
     },
     [mx],
   );

src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx

@@ -114,7 +114,7 @@ export function ReadReceiptAvatars({
           })}
           {extra > 0 && (
             <Text
-              size="T100"
+              size="T200"
               style={{ paddingLeft: '4px', color: color.SurfaceVariant.OnContainer }}
             >
               +{extra}

src/app/components/upload-card/CompactUploadCardRenderer.tsx

@@ -77,7 +77,7 @@ export function CompactUploadCardRenderer({
       {upload.status === UploadStatus.Success ? (
         <>
           <Text size="H6" truncate>
-            {file.name}
+            {(file as File).name}
           </Text>
           <Icon style={{ color: color.Success.Main }} src={Icons.Check} size="100" />
         </>

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -28,7 +28,7 @@ function PreviewImage({ fileItem }: PreviewImageProps) {
         height: toRem(152),
         filter: metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
       }}
-      alt={originalFile.name}
+      alt={(originalFile as File).name}
       src={fileUrl}
     />
   );
@@ -227,7 +227,7 @@ export function UploadCardRenderer({
       }
     >
       <Text size="H6" truncate>
-        {file.name}
+        {(file as File).name}
       </Text>
       {upload.status === UploadStatus.Success && (
         <Icon style={{ color: color.Success.Main }} src={Icons.Check} size="100" />

src/app/features/call/CallMemberCard.tsx

@@ -1,4 +1,5 @@
-import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { type SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc';
 import React, { useState } from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -58,7 +58,8 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      await mx.setRoomAccountData(room.roomId, type, content);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await mx.setRoomAccountData(room.roomId, type as any, content);
     },
     [mx, room.roomId],
   );

src/app/features/room/RoomInput.tsx

@@ -814,7 +814,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               )}
               {gifError && (
                 <Text
-                  size="T100"
+                  size="T200"
                   style={{
                     color: 'var(--tc-danger-normal)',
                     padding: '2px 6px',

src/app/features/room/RoomTimeline.tsx

@@ -27,7 +27,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
-import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { type SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {

src/app/features/room/message/ForwardMessageDialog.tsx

@@ -39,7 +39,8 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
   const forward = (roomId: string, roomName: string) => {
     const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
     delete fwdContent['m.relates_to'];
-    mx.sendEvent(roomId, mEvent.getType(), fwdContent as any);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (mx as any).sendEvent(roomId, mEvent.getType(), fwdContent);
     setSentTo(roomName);
     setTimeout(onClose, 1200);
   };

src/app/features/room/message/Message.tsx

@@ -83,6 +83,7 @@ import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
+import { ForwardMessageDialog } from './ForwardMessageDialog';
 
 // Delivery status indicator for own messages
 function DeliveryStatus({

src/app/features/room/message/MessageEditor.tsx

@@ -153,7 +153,8 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           },
         };
 
-        return mx.sendMessage(roomId, content);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return mx.sendMessage(roomId, content as any);
       }, [mx, editor, roomId, mEvent, isMarkdown, getPrevBodyAndFormattedBody]),
     );
 

src/app/features/room/msgContent.ts

@@ -54,8 +54,8 @@ export const getImageMsgContent = async (
 
   const content: IContent = {
     msgtype: MsgType.Image,
-    filename: file.name,
-    body: metadata.caption?.trim() || file.name,
+    filename: (file as File).name,
+    body: metadata.caption?.trim() || (file as File).name,
     [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
   };
   if (imgEl) {
@@ -89,8 +89,8 @@ export const getVideoMsgContent = async (
 
   const content: IContent = {
     msgtype: MsgType.Video,
-    filename: file.name,
-    body: metadata.caption?.trim() || file.name,
+    filename: (file as File).name,
+    body: metadata.caption?.trim() || (file as File).name,
     [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
   };
   if (videoEl) {
@@ -130,8 +130,8 @@ export const getAudioMsgContent = (item: TUploadItem, mxc: string): IContent =>
   const { file, encInfo } = item;
   const content: IContent = {
     msgtype: MsgType.Audio,
-    filename: file.name,
-    body: file.name,
+    filename: (file as File).name,
+    body: (file as File).name,
     info: {
       mimetype: file.type,
       size: file.size,
@@ -152,8 +152,8 @@ export const getFileMsgContent = (item: TUploadItem, mxc: string): IContent => {
   const { file, encInfo } = item;
   const content: IContent = {
     msgtype: MsgType.File,
-    body: file.name,
-    filename: file.name,
+    body: (file as File).name,
+    filename: (file as File).name,
     info: {
       mimetype: file.type,
       size: file.size,

src/app/features/search/Search.tsx

@@ -251,7 +251,7 @@ export function Search({ requestClose }: SearchProps) {
             allowOutsideClick: true,
             clickOutsideDeactivates: true,
             onDeactivate: requestClose,
-            escapeDeactivates: (evt) => {
+            escapeDeactivates: (evt: KeyboardEvent) => {
               evt.stopPropagation();
               return true;
             },

src/app/features/settings/developer-tools/DevelopTools.tsx

@@ -25,7 +25,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      await mx.setAccountData(type, content);
+      await (mx as any).setAccountData(type, content);
     },
     [mx],
   );
@@ -34,7 +34,9 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
     return (
       <AccountDataEditor
         type={accountDataType ?? undefined}
-        content={accountDataType ? mx.getAccountData(accountDataType)?.getContent() : undefined}
+        content={
+          accountDataType ? (mx as any).getAccountData(accountDataType)?.getContent() : undefined
+        }
         submitChange={submitAccountData}
         requestClose={() => setAccountDataType(undefined)}
       />

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -1,3 +1,4 @@
+import { MatrixEvent } from 'matrix-js-sdk';
 import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Box,
@@ -303,7 +304,9 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
   const [applyState, applyChanges] = useAsyncCallback(
     useCallback(async () => {
       const content =
-        mx.getAccountData(AccountDataEvent.PoniesEmoteRooms)?.getContent<EmoteRoomsContent>() ?? {};
+        (
+          (mx as any).getAccountData(AccountDataEvent.PoniesEmoteRooms) as MatrixEvent | undefined
+        )?.getContent<EmoteRoomsContent>() ?? {};
       const updatedContent: EmoteRoomsContent = JSON.parse(JSON.stringify(content));
 
       selectedPacks.forEach((addr) => {
@@ -320,7 +323,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
         }
       });
 
-      await mx.setAccountData(AccountDataEvent.PoniesEmoteRooms, updatedContent);
+      await (mx as any).setAccountData(AccountDataEvent.PoniesEmoteRooms, updatedContent);
     }, [mx, selectedPacks, removedPacks]),
   );
 

src/app/features/settings/notifications/KeywordMessages.tsx

@@ -192,7 +192,7 @@ export function KeywordMessagesNotifications() {
           <KeywordInput />
         </SettingTile>
       </SequenceCard>
-      {keywordPushRules.map((pushRule) => (
+      {keywordPushRules.map((pushRule: any) => (
         <SequenceCard
           key={pushRule.rule_id}
           className={SequenceCardStyle}

src/app/hooks/useAccountData.ts

@@ -1,10 +1,13 @@
+import { MatrixEvent } from 'matrix-js-sdk';
 import { useState, useCallback } from 'react';
 import { useMatrixClient } from './useMatrixClient';
 import { useAccountDataCallback } from './useAccountDataCallback';
 
-export function useAccountData(eventType: string) {
+export function useAccountData(eventType: string): MatrixEvent | undefined {
   const mx = useMatrixClient();
-  const [event, setEvent] = useState(() => mx.getAccountData(eventType));
+  const [event, setEvent] = useState<MatrixEvent | undefined>(
+    () => (mx as any).getAccountData(eventType) as MatrixEvent | undefined,
+  );
 
   useAccountDataCallback(
     mx,

src/app/hooks/useRoomReadPositions.ts

@@ -54,11 +54,11 @@ export function useRoomReadPositions(room: Room): Map<string, string[]> {
     };
     const onMembership = (): void => setPositions(computePositions(room, myUserId));
     room.on(RoomEvent.Receipt, onReceipt);
-    room.on(RoomMemberEvent.Membership, onMembership);
+    (room as any).on(RoomMemberEvent.Membership, onMembership);
     return () => {
       if (debounceTimer !== null) clearTimeout(debounceTimer);
       room.removeListener(RoomEvent.Receipt, onReceipt);
-      room.removeListener(RoomMemberEvent.Membership, onMembership);
+      (room as any).removeListener(RoomMemberEvent.Membership, onMembership);
     };
   }, [room, myUserId]);
 

src/app/hooks/useRoomsNotificationPreferences.ts

@@ -47,17 +47,17 @@ export const useRoomsNotificationPreferences = (): RoomsNotificationPreferences
       allMessages: new Set(),
     };
 
-    override.forEach((rule) => {
+    override.forEach((rule: any) => {
       if (isRoomId(rule.rule_id) && getNotificationMode(rule.actions) === NotificationMode.OFF) {
         pref.mute.add(rule.rule_id);
       }
     });
-    room.forEach((rule) => {
+    room.forEach((rule: any) => {
       if (getNotificationMode(rule.actions) === NotificationMode.OFF) {
         pref.specialMessages.add(rule.rule_id);
       }
     });
-    room.forEach((rule) => {
+    room.forEach((rule: any) => {
       if (getNotificationMode(rule.actions) !== NotificationMode.OFF) {
         pref.allMessages.add(rule.rule_id);
       }

src/app/pages/client/ClientRoot.tsx

@@ -223,7 +223,8 @@ export function ClientRoot({ children }: ClientRootProps) {
                   {startState.status === AsyncStatus.Error && (
                     <Text>{`Failed to start. ${startState.error.message}`}</Text>
                   )}
-                  {loadState.error?.message !== IDB_VERSION_CONFLICT && (
+                  {('error' in loadState ? (loadState as any).error?.message : undefined) !==
+                    IDB_VERSION_CONFLICT && (
                     <Button variant="Critical" onClick={mx ? () => startMatrix(mx) : loadMatrix}>
                       <Text as="span" size="B400">
                         Retry

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -752,7 +752,7 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
 
         const newSpacesContent = makeCinnySpacesContent(mx, newItems);
         localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
-        mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
+        (mx as any).setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
       },
       [mx, sidebarItems, setOpenedFolder, localEchoSidebarItem, orphanSpaces],
     ),
@@ -798,7 +798,7 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
 
       const newSpacesContent = makeCinnySpacesContent(mx, newItems);
       localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
-      mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
+      (mx as any).setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
     },
     [mx, sidebarItems, orphanSpaces, localEchoSidebarItem],
   );

src/app/plugins/pdfjs-dist.ts

@@ -42,6 +42,7 @@ export const createPage = async (
   canvas.height = pageViewport.height;
 
   page.render({
+    canvas,
     canvasContext: context,
     viewport: pageViewport,
   });

src/app/plugins/react-custom-html-parser.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  DOMNode,
   Element,
   Text as DOMText,
   HTMLReactParserOptions,
@@ -302,7 +303,7 @@ export function CodeBlock({
         hideTrack
       >
         <div id="code-block-content" className={css.CodeBlockInternal}>
-          {domToReact(children, opts)}
+          {domToReact(children as unknown as DOMNode[], opts)}
         </div>
       </Scroll>
       {largeCodeBlock && !expanded && <Box className={css.CodeBlockBottomShadow} />}
@@ -330,7 +331,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'h1') {
           return (
             <Text {...props} className={css.Heading} size="H2">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -338,7 +339,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'h2') {
           return (
             <Text {...props} className={css.Heading} size="H3">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -346,7 +347,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'h3') {
           return (
             <Text {...props} className={css.Heading} size="H4">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -354,7 +355,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'h4') {
           return (
             <Text {...props} className={css.Heading} size="H4">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -362,7 +363,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'h5') {
           return (
             <Text {...props} className={css.Heading} size="H5">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -370,7 +371,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'h6') {
           return (
             <Text {...props} className={css.Heading} size="H6">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -378,7 +379,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'p') {
           return (
             <Text {...props} className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit">
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -390,7 +391,7 @@ export const getReactCustomHtmlParser = (
         if (name === 'blockquote') {
           return (
             <Text {...props} size="Inherit" as="blockquote" className={css.BlockQuote}>
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </Text>
           );
         }
@@ -398,23 +399,24 @@ export const getReactCustomHtmlParser = (
         if (name === 'ul') {
           return (
             <ul {...props} className={css.List}>
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </ul>
           );
         }
         if (name === 'ol') {
           return (
             <ol {...props} className={css.List}>
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </ol>
           );
         }
 
         if (name === 'code') {
           if (parent && 'name' in parent && parent.name === 'pre') {
-            const codeReact = domToReact(children, opts);
+            const codeReact = domToReact(children as unknown as DOMNode[], opts);
             if (typeof codeReact === 'string') {
-              let lang = props.className;
+              let lang: string | undefined =
+                typeof props.className === 'string' ? props.className : undefined;
               if (lang === 'language-rs') lang = 'language-rust';
               else if (lang === 'language-js') lang = 'language-javascript';
               else if (lang === 'language-ts') lang = 'language-typescript';
@@ -435,13 +437,13 @@ export const getReactCustomHtmlParser = (
           } else {
             return (
               <Text as="code" size="T300" className={css.Code} {...props}>
-                {domToReact(children, opts)}
+                {domToReact(children as unknown as DOMNode[], opts)}
               </Text>
             );
           }
         }
 
-        if (name === 'a' && testMatrixTo(tryDecodeURIComponent(props.href))) {
+        if (name === 'a' && testMatrixTo(tryDecodeURIComponent(String(props.href)))) {
           const content = children.find((child) => !(child instanceof DOMText))
             ? undefined
             : children.map((c) => (c instanceof DOMText ? c.data : '')).join();
@@ -449,7 +451,7 @@ export const getReactCustomHtmlParser = (
           const mention = renderMatrixMention(
             mx,
             roomId,
-            tryDecodeURIComponent(props.href),
+            tryDecodeURIComponent(String(props.href)),
             makeMentionCustomProps(params.handleMentionClick, content),
           );
 
@@ -471,14 +473,14 @@ export const getReactCustomHtmlParser = (
               aria-pressed={true}
               style={{ cursor: 'pointer' }}
             >
-              {domToReact(children, opts)}
+              {domToReact(children as unknown as DOMNode[], opts)}
             </span>
           );
         }
 
         if (name === 'img') {
-          const htmlSrc = mxcUrlToHttp(mx, props.src, params.useAuthentication);
-          if (htmlSrc && props.src.startsWith('mxc://') === false) {
+          const htmlSrc = mxcUrlToHttp(mx, String(props.src), params.useAuthentication);
+          if (htmlSrc && String(props.src).startsWith('mxc://') === false) {
             return (
               <a href={htmlSrc} target="_blank" rel="noreferrer noopener">
                 {props.alt || props.title || htmlSrc}

src/app/plugins/recent-emoji.ts

@@ -42,7 +42,7 @@ export function addRecentEmoji(mx: MatrixClient, unicode: string) {
     entry[1] += 1;
   }
   recentEmoji.unshift(entry);
-  mx.setAccountData(AccountDataEvent.ElementRecentEmoji, {
+  (mx as any).setAccountData(AccountDataEvent.ElementRecentEmoji, {
     recent_emoji: recentEmoji.slice(0, 100),
   });
 }

src/app/state/typingMembers.ts

@@ -72,6 +72,8 @@ const timeoutReceipt = (
   return Date.now() - target.ts >= timeout;
 };
 
+const typingTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
 export const roomIdToTypingMembersAtom = atom<
   IRoomIdToTypingMembers,
   [IRoomIdToTypingMembersAction],

src/app/utils/matrix.ts

@@ -113,7 +113,7 @@ export const encryptFile = async (
 }> => {
   const dataBuffer = await file.arrayBuffer();
   const encryptedAttachment = await encryptAttachment(dataBuffer);
-  const encFile = new File([encryptedAttachment.data], file.name, {
+  const encFile = new File([encryptedAttachment.data], (file as File).name, {
     type: file.type,
   });
   return {