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" />