chore: upgrade i18next 26, prettier 3, fontsource-variable, domhandler 6, lint-staged 17

- i18next 23->26 + react-i18next 15->17
- prettier 2->3, reformat all files
- replace @fontsource/inter with @fontsource-variable/inter 5, update import path
- domhandler 5->6 (aligns with transitive deps)
- lint-staged 16->17

src/app/components/AccountDataEditor.tsx

@@ -54,7 +54,7 @@ function AccountDataEdit({
 
   const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
     textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT
+    EDITOR_INTENT_SPACE_COUNT,
   );
 
   const [submitState, submit] = useAsyncCallback<void, MatrixError, [string, object]>(submitChange);
@@ -278,7 +278,7 @@ export function AccountDataEditor({
 
   const contentJSONStr = useMemo(
     () => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
-    [data.content]
+    [data.content],
   );
 
   return (

src/app/components/AuthFlowsLoader.tsx

@@ -45,7 +45,7 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
       };
 
       return authFlows;
-    }, [mx])
+    }, [mx]),
   );
 
   useEffect(() => {

src/app/components/BackRouteHandler.tsx

@@ -24,7 +24,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname
+        location.pathname,
       )
     ) {
       navigate(getHomePath());
@@ -37,7 +37,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname
+        location.pathname,
       )
     ) {
       navigate(getDirectPath());
@@ -49,7 +49,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
         caseSensitive: true,
         end: false,
       },
-      location.pathname
+      location.pathname,
     );
     const encodedSpaceIdOrAlias = spaceMatch?.params.spaceIdOrAlias;
     const decodedSpaceIdOrAlias =
@@ -66,7 +66,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname
+        location.pathname,
       )
     ) {
       navigate(getExplorePath());
@@ -79,7 +79,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
           caseSensitive: true,
           end: false,
         },
-        location.pathname
+        location.pathname,
       )
     ) {
       navigate(getInboxPath());

src/app/components/BackupRestore.tsx

@@ -157,7 +157,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
           setRestoreProgress(progress);
         },
       });
-    }, [crypto, setRestoreProgress])
+    }, [crypto, setRestoreProgress]),
   );
 
   const handleRestore = () => {

src/app/components/CallEmbedProvider.tsx

@@ -104,7 +104,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room, dm);
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const session = useCallSession(room);
@@ -115,7 +115,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
       if (members.length === 0) {
         onIgnore();
       }
-    }, [room, session, onIgnore])
+    }, [room, session, onIgnore]),
   );
 
   const playSound = useCallback(() => {
@@ -312,7 +312,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
       const hasCallPermission = permissions.stateEvent(
         StateEvent.GroupCallMemberPrefix,
-        mx.getSafeUserId()
+        mx.getSafeUserId(),
       );
       if (!hasCallPermission) return;
 
@@ -331,7 +331,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
       setCallInfo(info);
     },
-    [mx]
+    [mx],
   );
 
   useEffect(() => {
@@ -355,7 +355,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       });
       setCallInfo(undefined);
     },
-    [mx]
+    [mx],
   );
 
   const handleAnswer = useCallback(
@@ -364,7 +364,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       setCallInfo(undefined);
       navigateRoom(room.roomId);
     },
-    [startCall, navigateRoom]
+    [startCall, navigateRoom],
   );
 
   if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
@@ -390,7 +390,7 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
     embed,
     useCallback(() => {
       setCallEmbed(undefined);
-    }, [setCallEmbed])
+    }, [setCallEmbed]),
   );
 
   return null;
@@ -427,7 +427,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     () => () => {
       activeDragCleanupRef.current?.();
     },
-    []
+    [],
   );
 
   // Track previous pipMode to only reset position when first entering pip (not on callVisible changes)
@@ -510,11 +510,11 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
       if (pipDragRef.current.dragged) {
         el.style.left = `${Math.max(
           0,
-          Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx)
+          Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx),
         )}px`;
         el.style.top = `${Math.max(
           0,
-          Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy)
+          Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy),
         )}px`;
         el.style.right = 'auto';
         el.style.bottom = 'auto';
@@ -563,11 +563,11 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
       if (pipDragRef.current.dragged) {
         el.style.left = `${Math.max(
           0,
-          Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx)
+          Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx),
         )}px`;
         el.style.top = `${Math.max(
           0,
-          Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy)
+          Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy),
         )}px`;
         el.style.right = 'auto';
         el.style.bottom = 'auto';

src/app/components/ConfirmPasswordMatch.tsx

@@ -7,7 +7,7 @@ type ConfirmPasswordMatchProps = {
     match: boolean,
     doMatch: () => void,
     passRef: RefObject<HTMLInputElement>,
-    confPassRef: RefObject<HTMLInputElement>
+    confPassRef: RefObject<HTMLInputElement>,
   ) => ReactNode;
 };
 export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
@@ -28,7 +28,7 @@ export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPassword
     {
       wait: 500,
       immediate: false,
-    }
+    },
   );
 
   return children(match, doMatch, passRef, confPassRef);

src/app/components/DeviceVerificationSetup.tsx

@@ -27,7 +27,7 @@ import { useAlive } from '../hooks/useAlive';
 import { UseStateProvider } from './UseStateProvider';
 
 type UIACallback<T> = (
-  authDict: AuthDict | null
+  authDict: AuthDict | null,
 ) => Promise<[IAuthData, undefined] | [undefined, T]>;
 
 type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
@@ -42,7 +42,7 @@ function makeUIAAction<T>(
   authData: IAuthData,
   performAction: PerformAction<T>,
   resolve: (data: T) => void,
-  reject: (error?: any) => void
+  reject: (error?: any) => void,
 ): UIAAction<T> {
   const action: UIAAction<T> = {
     authData,
@@ -91,7 +91,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
         setNextAuthData(authData);
       }
     },
-    [uiaAction, alive]
+    [uiaAction, alive],
   );
 
   const resetUIA = useCallback(() => {
@@ -118,7 +118,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
                 (err) => {
                   resetUIA();
                   reject(err);
-                }
+                },
               );
               if (alive()) {
                 setUIAAction(action);
@@ -130,7 +130,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
             reject(error);
           });
       }),
-    [alive, resetUIA]
+    [alive, resetUIA],
   );
 
   const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
@@ -159,8 +159,8 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
 
         onComplete(recoveryKeyData.encodedPrivateKey);
       },
-      [mx, onComplete, authUploadDeviceSigningKeys]
-    )
+      [mx, onComplete, authUploadDeviceSigningKeys],
+    ),
   );
 
   const loading = setupState.status === AsyncStatus.Loading;
@@ -316,7 +316,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
         </Box>
       </Dialog>
     );
-  }
+  },
 );
 type DeviceVerificationResetProps = {
   onCancel: () => void;
@@ -375,5 +375,5 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
         )}
       </Dialog>
     );
-  }
+  },
 );

src/app/components/GifPicker.tsx

@@ -27,7 +27,7 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
       onSelect(url, width, height);
       requestClose();
     },
-    [onSelect, requestClose]
+    [onSelect, requestClose],
   );
 
   return (

src/app/components/ImageOverlay.tsx

@@ -41,5 +41,5 @@ export const ImageOverlay = as<'div', ImageOverlayProps>(
         </FocusTrap>
       </OverlayCenter>
     </Overlay>
-  )
+  ),
 );

src/app/components/JoinRulesSwitcher.tsx

@@ -33,7 +33,7 @@ export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
       [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
       [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
     }),
-    [roomType]
+    [roomType],
   );
 
 type JoinRuleLabels = Record<ExtendedJoinRules, string>;
@@ -47,7 +47,7 @@ export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
       [JoinRule.Public]: 'Public',
       [JoinRule.Private]: 'Invite Only',
     }),
-    []
+    [],
   );
 
 type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
@@ -79,7 +79,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
       setCords(undefined);
       onChange(selectedRule);
     },
-    [onChange]
+    [onChange],
   );
 
   return (

src/app/components/LogoutDialog.tsx

@@ -21,13 +21,13 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const verificationStatus = useDeviceVerificationStatus(
       mx.getCrypto(),
       mx.getSafeUserId(),
-      mx.getDeviceId() ?? undefined
+      mx.getDeviceId() ?? undefined,
     );
 
     const [logoutState, logout] = useAsyncCallback<void, Error, []>(
       useCallback(async () => {
         await logoutClient(mx);
-      }, [mx])
+      }, [mx]),
     );
 
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
@@ -87,5 +87,5 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
         </Box>
       </Dialog>
     );
-  }
+  },
 );

src/app/components/ManualVerification.tsx

@@ -126,7 +126,7 @@ export function ManualVerificationTile({
   const [method, setMethod] = useState(
     hasPassphrase
       ? ManualVerificationMethod.RecoveryPassphrase
-      : ManualVerificationMethod.RecoveryKey
+      : ManualVerificationMethod.RecoveryKey,
   );
 
   const verifyAndRestoreBackup = useCallback(
@@ -143,11 +143,11 @@ export function ManualVerificationTile({
 
       await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
     },
-    [mx, secretStorageKeyId]
+    [mx, secretStorageKeyId],
   );
 
   const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
-    verifyAndRestoreBackup
+    verifyAndRestoreBackup,
   );
   const verifying = verifyState.status === AsyncStatus.Loading;
 

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -43,7 +43,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
     const [pdfJSState, loadPdfJS] = usePdfJSLoader();
     const [docState, loadPdfDocument] = usePdfDocumentLoader(
       pdfJSState.status === AsyncStatus.Success ? pdfJSState.data : undefined,
-      src
+      src,
     );
     const isLoading =
       pdfJSState.status === AsyncStatus.Loading || docState.status === AsyncStatus.Loading;
@@ -257,5 +257,5 @@ export const PdfViewer = as<'div', PdfViewerProps>(
         )}
       </Box>
     );
-  }
+  },
 );

src/app/components/RoomNotificationSwitcher.tsx

@@ -17,7 +17,7 @@ const useRoomNotificationModes = (): RoomNotificationMode[] =>
       RoomNotificationMode.SpecialMessages,
       RoomNotificationMode.Mute,
     ],
-    []
+    [],
   );
 
 const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
@@ -28,7 +28,7 @@ const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
       [RoomNotificationMode.SpecialMessages]: 'Mention & Keywords',
       [RoomNotificationMode.Mute]: 'Mute',
     }),
-    []
+    [],
   );
 
 type NotificationModeSwitcherProps = {
@@ -37,7 +37,7 @@ type NotificationModeSwitcherProps = {
   children: (
     handleOpen: MouseEventHandler<HTMLButtonElement>,
     opened: boolean,
-    changing: boolean
+    changing: boolean,
   ) => ReactNode;
 };
 export function RoomNotificationModeSwitcher({

src/app/components/SecretStorage.tsx

@@ -36,7 +36,7 @@ export function SecretStorageRecoveryPassphrase({
           passphrase,
           salt,
           iterations,
-          bits
+          bits,
         );
 
         const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
@@ -47,8 +47,8 @@ export function SecretStorageRecoveryPassphrase({
 
         return decodedRecoveryKey;
       },
-      [mx, keyContent]
-    )
+      [mx, keyContent],
+    ),
   );
 
   const drivingKey = driveKeyState.status === AsyncStatus.Loading;
@@ -140,8 +140,8 @@ export function SecretStorageRecoveryKey({
 
         return decodedRecoveryKey;
       },
-      [mx, keyContent]
-    )
+      [mx, keyContent],
+    ),
   );
 
   const drivingKey = driveKeyState.status === AsyncStatus.Loading;

src/app/components/ServerConfigsLoader.tsx

@@ -42,7 +42,7 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
         mediaConfig,
         authMetadata: validatedAuthMetadata,
       };
-    }, [mx])
+    }, [mx]),
   );
 
   const configs: ServerConfigs =

src/app/components/SpaceChildDirectsProvider.tsx

@@ -21,7 +21,7 @@ export function SpaceChildDirectsProvider({
   const childDirects = useSpaceChildren(
     allRoomsAtom,
     spaceId,
-    useChildDirectScopeFactory(mx, mDirects, roomToParents)
+    useChildDirectScopeFactory(mx, mDirects, roomToParents),
   );
 
   return children(childDirects);

src/app/components/SpaceChildRoomsProvider.tsx

@@ -21,7 +21,7 @@ export function SpaceChildRoomsProvider({
   const childRooms = useSpaceChildren(
     allRoomsAtom,
     spaceId,
-    useChildRoomScopeFactory(mx, mDirects, roomToParents)
+    useChildRoomScopeFactory(mx, mDirects, roomToParents),
   );
 
   return children(childRooms);

src/app/components/SpecVersionsLoader.tsx

@@ -15,7 +15,7 @@ export function SpecVersionsLoader({
   children,
 }: SpecVersionsLoaderProps) {
   const [state, load] = useAsyncCallback(
-    useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
+    useCallback(() => specVersions(fetch, baseUrl), [baseUrl]),
   );
   const [ignoreError, setIgnoreError] = useState(false);
 
@@ -38,6 +38,6 @@ export function SpecVersionsLoader({
       ? state.data
       : {
           versions: [],
-        }
+        },
   );
 }

src/app/components/create-room/AdditionalCreatorInput.tsx

@@ -35,7 +35,7 @@ import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-ht
 export const useAdditionalCreators = (defaultCreators?: string[]) => {
   const mx = useMatrixClient();
   const [additionalCreators, setAdditionalCreators] = useState<string[]>(
-    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
+    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? [],
   );
 
   const addAdditionalCreator = (userId: string) => {
@@ -90,12 +90,12 @@ export function AdditionalCreatorInput({
   const [validUserId, setValidUserId] = useState<string>();
   const filteredUsers = useMemo(
     () => directUsers.filter((userId) => !additionalCreators.includes(userId)),
-    [directUsers, additionalCreators]
+    [directUsers, additionalCreators],
   );
   const [result, search, resetSearch] = useAsyncSearch(
     filteredUsers,
     getUserIdString,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
   const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
 

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -42,9 +42,9 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
           throw e;
         }
       },
-      [mx]
+      [mx],
     ),
-    setAliasAvail
+    setAliasAvail,
   );
   const aliasAvailable: boolean | undefined =
     aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;

src/app/components/create-room/utils.ts

@@ -15,7 +15,7 @@ import { CreateRoomAccess } from './types';
 export const createRoomCreationContent = (
   type: RoomType | undefined,
   allowFederation: boolean,
-  additionalCreators: string[] | undefined
+  additionalCreators: string[] | undefined,
 ): object => {
   const content: Record<string, any> = {};
   if (typeof type === 'string') {
@@ -34,7 +34,7 @@ export const createRoomCreationContent = (
 export const createRoomJoinRulesState = (
   access: CreateRoomAccess,
   parent: Room | undefined,
-  knock: boolean
+  knock: boolean,
 ) => {
   let content: RoomJoinRulesEventContent = {
     join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
@@ -136,7 +136,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     creation_content: createRoomCreationContent(
       data.type,
       data.allowFederation,
-      data.additionalCreators
+      data.additionalCreators,
     ),
     power_level_content_override:
       data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
@@ -158,7 +158,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
         suggested: false,
         via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
       },
-      result.room_id
+      result.room_id,
     );
   }
 

src/app/components/cutout-card/CutoutCard.tsx

@@ -11,5 +11,5 @@ export const CutoutCard = as<'div', { variant?: TContainerColor }>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/editor/Editor.tsx

@@ -36,7 +36,7 @@ const withInline = (editor: Editor): Editor => {
 
   editor.isInline = (element) =>
     [BlockType.Mention, BlockType.Emoticon, BlockType.Link, BlockType.Command].includes(
-      element.type
+      element.type,
     ) || isInline(element);
 
   return editor;
@@ -88,11 +88,11 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       onChange,
       onPaste,
     },
-    ref
+    ref,
   ) => {
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
-      []
+      [],
     );
 
     const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
@@ -103,7 +103,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
         const shortcutToggled = toggleKeyboardShortcut(editor, evt);
         if (shortcutToggled) evt.preventDefault();
       },
-      [editor, onKeyDown]
+      [editor, onKeyDown],
     );
 
     const renderPlaceholder = useCallback(
@@ -115,7 +115,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
           </Text>
         </span>
       ),
-      []
+      [],
     );
 
     return (
@@ -160,5 +160,5 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
         </Slate>
       </div>
     );
-  }
+  },
 );

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -51,14 +51,14 @@ export function EmoticonAutocomplete({
     const list: Array<EmoticonSearchItem> = [];
     return list.concat(
       imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
-      emojis
+      emojis,
     );
   }, [imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,
     getEmoticonSearchStr,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
   const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
 

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -91,9 +91,9 @@ export function RoomMentionAutocomplete({
         if (alias) return [r.name, alias];
         return r.name;
       },
-      [mx]
+      [mx],
     ),
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
 
   const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20);
@@ -111,7 +111,7 @@ export function RoomMentionAutocomplete({
       name.startsWith('#') ? name : `#${name}`,
       roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId,
       undefined,
-      viaServers
+      viaServers,
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -98,7 +98,7 @@ export function UserMentionAutocomplete({
 
   const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
   const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter(
-    withAllowedMembership
+    withAllowedMembership,
   );
 
   useEffect(() => {
@@ -110,7 +110,7 @@ export function UserMentionAutocomplete({
     const mentionEl = createMentionElement(
       uId,
       name.startsWith('@') ? name : `@${name}`,
-      mx.getUserId() === uId || roomAliasOrId === uId
+      mx.getUserId() === uId || roomAliasOrId === uId,
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);

src/app/components/editor/autocomplete/autocompleteQuery.ts

@@ -22,7 +22,7 @@ export type AutocompleteQuery<TPrefix extends string> = {
 export const getAutocompletePrefix = <TPrefix extends string>(
   editor: Editor,
   queryRange: BaseRange,
-  validPrefixes: readonly TPrefix[]
+  validPrefixes: readonly TPrefix[],
 ): TPrefix | undefined => {
   const world = Editor.string(editor, queryRange);
   return validPrefixes.find((p) => world.startsWith(p));
@@ -31,13 +31,13 @@ export const getAutocompletePrefix = <TPrefix extends string>(
 export const getAutocompleteQueryText = (
   editor: Editor,
   queryRange: BaseRange,
-  prefix: string
+  prefix: string,
 ): string => Editor.string(editor, queryRange).slice(prefix.length);
 
 export const getAutocompleteQuery = <TPrefix extends string>(
   editor: Editor,
   queryRange: BaseRange,
-  validPrefixes: readonly TPrefix[]
+  validPrefixes: readonly TPrefix[],
 ): AutocompleteQuery<TPrefix> | undefined => {
   const prefix = getAutocompletePrefix(editor, queryRange, validPrefixes);
   if (!prefix) return undefined;

src/app/components/editor/input.ts

@@ -77,7 +77,7 @@ const getInlineNodeMarkType = (node: Element): MarkType | undefined => {
 const getInlineMarkElement = (
   markType: MarkType,
   node: Element,
-  getChild: (child: ChildNode) => InlineElement[]
+  getChild: (child: ChildNode) => InlineElement[],
 ): InlineElement[] => {
   const children = node.children.flatMap(getChild);
   const mdSequence = node.attribs['data-md'];
@@ -115,7 +115,7 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
           getText(node) || roomMention.roomIdOrAlias,
           false,
           undefined,
-          roomMention.viaServers
+          roomMention.viaServers,
         );
       }
       const eventMention = parseMatrixToRoomEvent(href);
@@ -125,7 +125,7 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
           getText(node) || eventMention.roomIdOrAlias,
           false,
           eventMention.eventId,
-          eventMention.viaServers
+          eventMention.viaServers,
         );
       }
     }
@@ -167,7 +167,7 @@ const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): In
 
 const parseBlockquoteNode = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
 ): BlockQuoteElement[] | ParagraphElement[] => {
   const quoteLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
@@ -259,7 +259,7 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
 const parseListMarkdown = (
   node: Element,
   processText: ProcessTextCallback,
-  depth = 0
+  depth = 0,
 ): ParagraphElement[] => {
   const md = isTag(node) && node.name === 'ul' ? '*' : '-';
   const prefix = node.attribs['data-md'] ?? md;
@@ -269,7 +269,7 @@ const parseListMarkdown = (
   const digit = digitOrChar ? parseInt(digitOrChar, 10) : undefined;
 
   const lines: ParagraphElement[] = [];
-  let lineNo = digit === undefined || Number.isNaN(digit) ? digitOrChar ?? 1 : digit;
+  let lineNo = digit === undefined || Number.isNaN(digit) ? (digitOrChar ?? 1) : digit;
   const pushLine = (line: InlineElement[]) => {
     lines.push({
       type: BlockType.Paragraph,
@@ -353,7 +353,7 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
 };
 const parseListNode = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
 ): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
   if (node.attribs['data-md'] !== undefined) {
     return parseListMarkdown(node, processText);
@@ -385,7 +385,7 @@ const parseListNode = (
 };
 const parseHeadingNode = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
 ): HeadingElement | ParagraphElement => {
   const children = getInlineElement(node, processText);
 
@@ -411,7 +411,7 @@ const parseHeadingNode = (
 export const domToEditorInput = (
   domNodes: ChildNode[],
   processText: ProcessTextCallback,
-  processLineStartText: ProcessTextCallback
+  processLineStartText: ProcessTextCallback,
 ): Descendant[] => {
   const children: Descendant[] = [];
 

src/app/components/editor/output.ts

@@ -74,7 +74,7 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
     case BlockType.Emoticon:
       return node.key.startsWith('mxc://')
         ? `<img data-mx-emoticon src="${node.key}" alt="${sanitizeText(
-            node.shortcode
+            node.shortcode,
           )}" title="${sanitizeText(node.shortcode)}" height="32" />`
         : sanitizeText(node.key);
     case BlockType.Link:
@@ -92,12 +92,12 @@ const ignoreHTMLParseInlineMD = (text: string): string =>
     text,
     HTML_TAG_REG_G,
     (match) => match[0],
-    (txt) => parseInlineMD(txt)
+    (txt) => parseInlineMD(txt),
   ).join('');
 
 export const toMatrixCustomHTML = (
   node: Descendant | Descendant[],
-  opts: OutputOptions
+  opts: OutputOptions,
 ): string => {
   let markdownLines = '';
   const parseNode = (n: Descendant, index: number, targetNodes: Descendant[]) => {

src/app/components/editor/utils.ts

@@ -160,7 +160,7 @@ export const createMentionElement = (
   name: string,
   highlight: boolean,
   eventId?: string,
-  viaServers?: string[]
+  viaServers?: string[],
 ): MentionElement => ({
   type: BlockType.Mention,
   id,
@@ -180,7 +180,7 @@ export const createEmoticonElement = (key: string, shortcode: string): EmoticonE
 
 export const createLinkElement = (
   href: string,
-  children: string | FormattedText[]
+  children: string | FormattedText[],
 ): LinkElement => ({
   type: BlockType.Link,
   href,
@@ -213,7 +213,7 @@ interface PointUntilCharOptions {
 export const getPointUntilChar = (
   editor: Editor,
   cursorPoint: BasePoint,
-  options: PointUntilCharOptions
+  options: PointUntilCharOptions,
 ): BasePoint | undefined => {
   let targetPoint: BasePoint | undefined;
   let prevPoint: BasePoint | undefined;

src/app/components/emoji-board/EmojiBoard.tsx

@@ -71,7 +71,7 @@ type StickerGroupItem = {
 
 const useGroups = (
   tab: EmojiBoardTab,
-  imagePacks: ImagePack[]
+  imagePacks: ImagePack[],
 ): [EmojiGroupItem[], StickerGroupItem[]] => {
   const mx = useMatrixClient();
 
@@ -309,7 +309,7 @@ function EmojiGroupHolder({
         shortcode: emojiInfo.shortcode,
       });
     },
-    [setPreviewData]
+    [setPreviewData],
   );
 
   const throttleEmojiHover = useThrottle(handleEmojiPreview, {
@@ -385,7 +385,7 @@ export function EmojiBoard({
 
   const previewAtom = useMemo(
     () => createPreviewDataAtom(emojiTab ? DefaultEmojiPreview : undefined),
-    [emojiTab]
+    [emojiTab],
   );
   const activeGroupIdAtom = useMemo(() => atom<string | undefined>(undefined), []);
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
@@ -404,7 +404,7 @@ export function EmojiBoard({
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,
     getEmoticonSearchStr,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
 
   const searchedItems = result?.items.slice(0, 100);
@@ -416,9 +416,9 @@ export function EmojiBoard({
         if (term) search(term);
         else resetSearch();
       },
-      [search, resetSearch]
+      [search, resetSearch],
     ),
-    { wait: 200 }
+    { wait: 200 },
   );
 
   const contentScrollRef = useRef<HTMLDivElement>(null);

src/app/components/emoji-board/useEmojiGroupIcons.ts

@@ -17,5 +17,5 @@ export const useEmojiGroupIcons = (): IEmojiGroupIcons =>
       [EmojiGroupId.Symbol]: Icons.Peace,
       [EmojiGroupId.Flag]: Icons.Flag,
     }),
-    []
+    [],
   );

src/app/components/emoji-board/useEmojiGroupLabels.ts

@@ -15,5 +15,5 @@ export const useEmojiGroupLabels = (): IEmojiGroupLabels =>
       [EmojiGroupId.Symbol]: 'Symbols',
       [EmojiGroupId.Flag]: 'Flags',
     }),
-    []
+    [],
   );

src/app/components/event-readers/EventReaders.tsx

@@ -104,7 +104,8 @@ export const EventReaders = as<'div', EventReadersProps>(
                 const name = getName(readerId);
                 const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
                 const avatarUrl = avatarMxcUrl
-                  ? mxcUrlToHttp(mx, avatarMxcUrl, useAuthentication, 100, 100, 'crop') ?? undefined
+                  ? (mxcUrlToHttp(mx, avatarMxcUrl, useAuthentication, 100, 100, 'crop') ??
+                    undefined)
                   : undefined;
                 const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;
 
@@ -119,7 +120,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                         space?.roomId,
                         readerId,
                         getMouseEventCords(event.nativeEvent),
-                        'Bottom'
+                        'Bottom',
                       );
                     }}
                     before={
@@ -162,5 +163,5 @@ export const EventReaders = as<'div', EventReadersProps>(
         </Box>
       </Box>
     );
-  }
+  },
 );

src/app/components/image-editor/ImageEditor.tsx

@@ -47,5 +47,5 @@ export const ImageEditor = as<'div', ImageEditorProps>(
         </Box>
       </Box>
     );
-  }
+  },
 );

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

@@ -57,7 +57,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
           Array.from(savedImages).find(([, img]) => img.shortcode === shortcode) !== undefined;
         return hasInSaved;
       },
-      [imagePack, savedImages, uploadedImages]
+      [imagePack, savedImages, uploadedImages],
     );
 
     const pickFiles = useFilePicker(
@@ -74,9 +74,9 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
 
           setFiles((f) => [...f, ...uniqueFiles]);
         },
-        [hasImageWithShortcode]
+        [hasImageWithShortcode],
       ),
-      true
+      true,
     );
 
     const handleMetaSave = useCallback(
@@ -88,10 +88,10 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
               ...imagePack.meta.content,
               ...m?.content,
               ...editedMeta.content,
-            })
+            }),
         );
       },
-      [imagePack.meta]
+      [imagePack.meta],
     );
 
     const handleMetaCancel = () => setMetaEditing(false);
@@ -104,10 +104,10 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
               ...imagePack.meta.content,
               ...m?.content,
               usage: usg,
-            })
+            }),
         );
       },
-      [imagePack.meta]
+      [imagePack.meta],
     );
 
     const handleUploadRemove = useCallback((file: TUploadContent) => {
@@ -123,13 +123,13 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
         };
         const image = PackImageReader.fromPackImage(
           getFileNameWithoutExt(data.file.name),
-          packImage
+          packImage,
         );
         if (!image) return;
         handleUploadRemove(data.file);
         setUploadedImages((imgs) => [image, ...imgs]);
       },
-      [handleUploadRemove]
+      [handleUploadRemove],
     );
 
     const handleImageEdit = (shortcode: string) => {
@@ -164,7 +164,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
           ? new PackImageReader(
               suffixRename(image.shortcode, hasImageWithShortcode),
               image.url,
-              image.content
+              image.content,
             )
           : image;
 
@@ -199,7 +199,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
         images.forEach((img) => pushImage(img));
 
         return onUpdate?.(pack);
-      }, [imagePack, images, savedMeta, uploadedImages, savedImages, deleteImages, onUpdate])
+      }, [imagePack, images, savedMeta, uploadedImages, savedImages, deleteImages, onUpdate]),
     );
 
     useEffect(() => {
@@ -384,5 +384,5 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
         )}
       </Box>
     );
-  }
+  },
 );

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

@@ -53,7 +53,7 @@ export function ImagePackProfile({ meta, canEdit, onEdit }: ImagePackProfileProp
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const avatarUrl = meta.avatar
-    ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined
+    ? (mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined)
     : undefined;
 
   return (
@@ -101,7 +101,7 @@ export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfil
   const useAuthentication = useMediaAuthentication();
   const [avatar, setAvatar] = useState(meta.avatar);
 
-  const avatarUrl = avatar ? mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined : undefined;
+  const avatarUrl = avatar ? (mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined) : undefined;
 
   const [imageFile, setImageFile] = useState<File>();
   const avatarFileUrl = useObjectURL(imageFile);

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

@@ -32,7 +32,7 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
       {
         roomId: room.roomId,
         stateKey,
-      }
+      },
     );
   }, [room.roomId, stateKey]);
   const imagePack = useRoomImagePack(room, stateKey) ?? fallbackPack;
@@ -46,10 +46,10 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
         address.roomId,
         StateEvent.PoniesRoomEmotes,
         packContent,
-        address.stateKey
+        address.stateKey,
       );
     },
-    [mx, imagePack]
+    [mx, imagePack],
   );
 
   return (

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

@@ -29,7 +29,7 @@ export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
 
   const allUsages: ImageUsage[][] = useMemo(
     () => [[ImageUsage.Emoticon], [ImageUsage.Sticker], [ImageUsage.Sticker, ImageUsage.Emoticon]],
-    []
+    [],
   );
 
   return (

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

@@ -15,7 +15,7 @@ export function UserImagePack() {
     async (packContent: PackContent) => {
       await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, packContent);
     },
-    [mx]
+    [mx],
   );
 
   return <ImagePackContent imagePack={imagePack ?? defaultPack} canEdit onUpdate={handleUpdate} />;

src/app/components/image-viewer/ImageViewer.tsx

@@ -93,5 +93,5 @@ export const ImageViewer = as<'div', ImageViewerProps>(
         </Box>
       </Box>
     );
-  }
+  },
 );

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -69,12 +69,12 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
         const membership = room.getMember(userId)?.membership;
         return membership !== Membership.Join;
       }),
-    [directUsers, room]
+    [directUsers, room],
   );
   const [result, search, resetSearch] = useAsyncSearch(
     filteredUsers,
     getUserIdString,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
   const queryHighlighRegex = result?.query
     ? makeHighlightRegex(result.query.split(' '))
@@ -85,8 +85,8 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
       async (userId, reason) => {
         await mx.invite(room.roomId, userId, reason);
       },
-      [mx, room]
-    )
+      [mx, room],
+    ),
   );
 
   const inviting = inviteState.status === AsyncStatus.Loading;

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -32,7 +32,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
       mx.leave(roomId);
-    }, [mx, roomId])
+    }, [mx, roomId]),
   );
 
   const handleLeave = () => {

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -32,7 +32,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
       mx.leave(roomId);
-    }, [mx, roomId])
+    }, [mx, roomId]),
   );
 
   const handleLeave = () => {

src/app/components/media/Image.tsx

@@ -5,5 +5,5 @@ import * as css from './media.css';
 export const Image = forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement>>(
   ({ className, alt, ...props }, ref) => (
     <img className={classNames(css.Image, className)} alt={alt} {...props} ref={ref} />
-  )
+  ),
 );

src/app/components/media/MediaControls.tsx

@@ -23,5 +23,5 @@ export const MediaControl = as<'div', MediaControlProps>(
       {after && <Box direction="Column">{after}</Box>}
       {children}
     </Box>
-  )
+  ),
 );

src/app/components/media/Video.tsx

@@ -6,5 +6,5 @@ export const Video = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLVideoE
   ({ className, ...props }, ref) => (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     <video className={classNames(css.Video, className)} {...props} ref={ref} />
-  )
+  ),
 );

src/app/components/member-tile/MemberTile.tsx

@@ -49,5 +49,5 @@ export const MemberTile = as<'button', MemberTileProps>(
         {after}
       </AsMemberTile>
     );
-  }
+  },
 );

src/app/components/message/FileHeader.tsx

@@ -36,7 +36,7 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
       const fileURL = URL.createObjectURL(fileContent);
       FileSaver.saveAs(fileURL, filename);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, filename])
+    }, [mx, url, useAuthentication, mimeType, encInfo, filename]),
   );
 
   const downloading = downloadState.status === AsyncStatus.Loading;
@@ -52,8 +52,8 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
         downloading
           ? 'Downloading...'
           : hasError
-          ? 'Download failed, click to retry'
-          : 'Download file'
+            ? 'Download failed, click to retry'
+            : 'Download file'
       }
     >
       {downloading ? (

src/app/components/message/Reaction.tsx

@@ -60,7 +60,7 @@ export function ReactionTooltipMsg({ room, reaction, events }: ReactionTooltipMs
     (ev: MatrixEvent) =>
       getMemberDisplayName(room, ev.getSender() ?? 'Unknown') ??
       getMxIdLocalPart(ev.getSender() ?? 'Unknown') ??
-      'Unknown'
+      'Unknown',
   );
 
   return (

src/app/components/message/Reply.tsx

@@ -34,7 +34,7 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
         {children}
       </Box>
     </Box>
-  )
+  ),
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
@@ -75,12 +75,12 @@ export const Reply = as<'div', ReplyProps>(
       legacyUsernameColor,
       ...props
     },
-    ref
+    ref,
   ) => {
     const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
     const getFromLocalTimeline = useCallback(
       () => timelineSet?.findEventById(replyEventId),
-      [timelineSet, replyEventId]
+      [timelineSet, replyEventId],
     );
     const replyEvent = useRoomEvent(room, replyEventId, getFromLocalTimeline);
 
@@ -134,5 +134,5 @@ export const Reply = as<'div', ReplyProps>(
         </ReplyLayout>
       </Box>
     );
-  }
+  },
 );

src/app/components/message/Time.tsx

@@ -41,5 +41,5 @@ export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
         {time}
       </Text>
     );
-  }
+  },
 );

src/app/components/message/attachment/Attachment.tsx

@@ -12,7 +12,7 @@ export const Attachment = as<'div', css.AttachmentVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export const AttachmentHeader = as<'div'>(({ className, ...props }, ref) => (

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

@@ -60,7 +60,7 @@ export function AudioContent({
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
         : await downloadMedia(mediaUrl);
       return URL.createObjectURL(fileContent);
-    }, [mx, url, useAuthentication, mimeType, encInfo])
+    }, [mx, url, useAuthentication, mimeType, encInfo]),
   );
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -75,7 +75,7 @@ export function AudioContent({
         URL.revokeObjectURL(srcState.data);
       }
     },
-    [srcState]
+    [srcState],
   );
 
   const [currentTime, setCurrentTime] = useState(0);
@@ -94,7 +94,7 @@ export function AudioContent({
   }, []);
   useMediaPlayTimeCallback(
     getAudioRef,
-    useThrottle(handlePlayTimeCallback, PLAY_TIME_THROTTLE_OPS)
+    useThrottle(handlePlayTimeCallback, PLAY_TIME_THROTTLE_OPS),
   );
 
   const handlePlay = () => {
@@ -162,7 +162,7 @@ export function AudioContent({
         </Chip>
 
         <Text size="T200">{`${secondsToMinutesAndSeconds(
-          currentTime
+          currentTime,
         )} / ${secondsToMinutesAndSeconds(duration)}`}</Text>
       </>
     ),

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

@@ -12,7 +12,7 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
         {reason ? `This message has been deleted — ${reason}` : 'This message has been deleted'}
       </i>
     </Box>
-  )
+  ),
 );
 
 export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...props }, ref) => (

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

@@ -95,7 +95,7 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
       const text = fileContent.text();
       setTextViewer(true);
       return text;
-    }, [mx, useAuthentication, mimeType, encInfo, url])
+    }, [mx, useAuthentication, mimeType, encInfo, url]),
   );
 
   return (
@@ -184,7 +184,7 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
         : await downloadMedia(mediaUrl);
       setPdfViewer(true);
       return URL.createObjectURL(fileContent);
-    }, [mx, url, useAuthentication, mimeType, encInfo])
+    }, [mx, url, useAuthentication, mimeType, encInfo]),
   );
 
   return (
@@ -264,7 +264,7 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
       const fileURL = URL.createObjectURL(fileContent);
       FileSaver.saveAs(fileURL, body);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, body])
+    }, [mx, url, useAuthentication, mimeType, encInfo, body]),
   );
 
   return downloadState.status === AsyncStatus.Error ? (
@@ -309,5 +309,5 @@ export const FileContent = as<'div', FileContentProps>(
       {mimeType === 'application/pdf' && renderAsPdfFile()}
       {children}
     </Box>
-  )
+  ),
 );

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

@@ -74,7 +74,7 @@ export const ImageContent = as<'div', ImageContentProps>(
       renderImage,
       ...props
     },
-    ref
+    ref,
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
@@ -91,12 +91,12 @@ export const ImageContent = as<'div', ImageContentProps>(
         if (!mediaUrl) throw new Error('Invalid media URL');
         if (encInfo) {
           const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
-            decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo)
+            decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo),
           );
           return URL.createObjectURL(fileContent);
         }
         return mediaUrl;
-      }, [mx, url, useAuthentication, mimeType, encInfo])
+      }, [mx, url, useAuthentication, mimeType, encInfo]),
     );
 
     const handleLoad = () => {
@@ -257,5 +257,5 @@ export const ImageContent = as<'div', ImageContentProps>(
         )}
       </Box>
     );
-  }
+  },
 );

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

@@ -34,7 +34,7 @@ function computeVotes(
   mx: ReturnType<typeof useMatrixClient>,
   roomId: string,
   eventId: string,
-  isStable: boolean
+  isStable: boolean,
 ): VoteState {
   const empty: VoteState = { counts: new Map(), myVote: null, total: 0 };
   const room = mx.getRoom(roomId);
@@ -44,12 +44,12 @@ function computeVotes(
   const stableRels = timelineSet.relations.getChildEventsForEvent(
     eventId,
     'm.reference',
-    'm.poll.response'
+    'm.poll.response',
   );
   const unstableRels = timelineSet.relations.getChildEventsForEvent(
     eventId,
     'org.matrix.msc3381.poll.response' as any,
-    'org.matrix.msc3381.poll.response'
+    'org.matrix.msc3381.poll.response',
   );
 
   // Collect all response events; per-sender keep only latest
@@ -129,12 +129,12 @@ export function PollContent({
     const stableRels = timelineSet.relations.getChildEventsForEvent(
       eventId,
       'm.reference',
-      'm.poll.response'
+      'm.poll.response',
     );
     const unstableRels = timelineSet.relations.getChildEventsForEvent(
       eventId,
       'org.matrix.msc3381.poll.response' as any,
-      'org.matrix.msc3381.poll.response'
+      'org.matrix.msc3381.poll.response',
     );
 
     stableRels?.on(RelationsEvent.Add, refresh);

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

@@ -27,13 +27,13 @@ export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
       if (!mediaUrl) throw new Error('Invalid media URL');
       if (encInfo) {
         const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
-          decryptFile(encBuf, thumbInfo.mimetype ?? FALLBACK_MIMETYPE, encInfo)
+          decryptFile(encBuf, thumbInfo.mimetype ?? FALLBACK_MIMETYPE, encInfo),
         );
         return URL.createObjectURL(fileContent);
       }
 
       return mediaUrl;
-    }, [mx, info, useAuthentication])
+    }, [mx, info, useAuthentication]),
   );
 
   useEffect(() => {

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

@@ -69,7 +69,7 @@ export const VideoContent = as<'div', VideoContentProps>(
       renderVideo,
       ...props
     },
-    ref
+    ref,
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
@@ -85,11 +85,11 @@ export const VideoContent = as<'div', VideoContentProps>(
         if (!mediaUrl) throw new Error('Invalid media URL');
         const fileContent = encInfo
           ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
-              decryptFile(encBuf, mimeType, encInfo)
+              decryptFile(encBuf, mimeType, encInfo),
             )
           : await downloadMedia(mediaUrl);
         return URL.createObjectURL(fileContent);
-      }, [mx, url, useAuthentication, mimeType, encInfo])
+      }, [mx, url, useAuthentication, mimeType, encInfo]),
     );
 
     const handleLoad = () => {
@@ -237,5 +237,5 @@ export const VideoContent = as<'div', VideoContentProps>(
         )}
       </Box>
     );
-  }
+  },
 );

src/app/components/message/layout/Base.tsx

@@ -8,12 +8,12 @@ export const MessageBase = as<'div', css.MessageBaseVariants>(
     <div
       className={classNames(
         css.MessageBase({ highlight, selected, collapse, autoCollapse, space }),
-        className
+        className,
       )}
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export const AvatarBase = as<'span'>(({ className, ...props }, ref) => (
@@ -38,5 +38,5 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/message/layout/Bubble.tsx

@@ -59,5 +59,5 @@ export const BubbleLayout = as<'div', BubbleLayoutProps>(
         )}
       </Box>
     </Box>
-  )
+  ),
 );

src/app/components/message/layout/Compact.tsx

@@ -14,5 +14,5 @@ export const CompactLayout = as<'div', CompactLayoutProps>(
       </Box>
       {children}
     </Box>
-  )
+  ),
 );

src/app/components/message/placeholder/CompactPlaceholder.tsx

@@ -23,5 +23,5 @@ export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
         <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
       </CompactLayout>
     );
-  }
+  },
 );

src/app/components/message/placeholder/DefaultPlaceholder.tsx

@@ -35,5 +35,5 @@ export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
         </Box>
       </ModernLayout>
     );
-  }
+  },
 );

src/app/components/message/placeholder/LinePlaceholder.tsx

@@ -11,5 +11,5 @@ export const LinePlaceholder = as<'div', css.LinePlaceholderVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/nav/NavCategoryHeader.tsx

@@ -15,5 +15,5 @@ export const NavCategoryHeader = as<'div', NavCategoryHeaderProps>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/nav/NavItem.tsx

@@ -23,11 +23,11 @@ export const NavItem = as<
 export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
   ({ className, ...props }, ref) => (
     <Link className={classNames(css.NavLink, className)} {...props} ref={ref} />
-  )
+  ),
 );
 
 export const NavButton = as<'button'>(
   ({ as: AsNavButton = 'button', className, ...props }, ref) => (
     <AsNavButton className={classNames(css.NavLink, className)} {...props} ref={ref} />
-  )
+  ),
 );

src/app/components/nav/NavItemContent.tsx

@@ -6,5 +6,5 @@ import * as css from './styles.css';
 export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text className={classNames(css.NavItemContent, className)} size="T300" {...props} ref={ref} />
-  )
+  ),
 );

src/app/components/nav/NavItemOptions.tsx

@@ -13,5 +13,5 @@ export const NavItemOptions = as<'div', ComponentProps<typeof Box>>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/page/Page.tsx

@@ -53,7 +53,7 @@ export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export function PageNavContent({
@@ -98,7 +98,7 @@ export const PageHeader = as<'div', css.PageHeaderVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export const PageContent = as<'div'>(({ className, ...props }, ref) => (
@@ -127,7 +127,7 @@ export const PageHeroSection = as<'div', ComponentProps<typeof Box>>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export function PageHero({

src/app/components/password-input/PasswordInput.tsx

@@ -42,5 +42,5 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
         )}
       </UseStateProvider>
     );
-  }
+  },
 );

src/app/components/power/PowerColorBadge.tsx

@@ -17,5 +17,5 @@ export const PowerColorBadge = as<'span', PowerColorBadgeProps>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/power/PowerSelector.tsx

@@ -46,7 +46,7 @@ export const PowerSelector = forwardRef<HTMLDivElement, PowerSelectorProps>(
         </Scroll>
       </Box>
     </Menu>
-  )
+  ),
 );
 
 type PowerSwitcherProps = PowerSelectorProps & {

src/app/components/presence/Presence.tsx

@@ -76,5 +76,5 @@ export const AvatarPresence = as<'div', AvatarPresenceProps>(
       )}
       {children}
     </Box>
-  )
+  ),
 );

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

@@ -93,7 +93,7 @@ export function ReadReceiptAvatars({
             const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
             const avatarMxc = room.getMember(userId)?.getMxcAvatarUrl();
             const avatarUrl = avatarMxc
-              ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ?? undefined
+              ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ?? undefined)
               : undefined;
             return (
               <StackedAvatar

src/app/components/room-card/RoomCard.tsx

@@ -50,7 +50,7 @@ export function RoomCardGrid({ children }: { children: ReactNode }) {
 
   useElementSizeObserver(
     useCallback(() => gridRef.current, []),
-    useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), [])
+    useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), []),
   );
 
   return (
@@ -159,14 +159,14 @@ export const RoomCard = as<'div', RoomCardProps>(
       renderTopicViewer,
       ...props
     },
-    ref
+    ref,
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
     const joinedRoom = mx.getRoom(joinedRoomId);
     const [topicEvent, setTopicEvent] = useState(() =>
-      joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined
+      joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined,
     );
 
     const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
@@ -193,12 +193,15 @@ export const RoomCard = as<'div', RoomCardProps>(
             setTopicEvent(getStateEvent(joinedRoom, StateEvent.RoomTopic));
           }
         },
-        [joinedRoom]
-      )
+        [joinedRoom],
+      ),
     );
 
     const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-      useCallback(() => mx.joinRoom(roomIdOrAlias, { viaServers }), [mx, roomIdOrAlias, viaServers])
+      useCallback(
+        () => mx.joinRoom(roomIdOrAlias, { viaServers }),
+        [mx, roomIdOrAlias, viaServers],
+      ),
     );
     const joining =
       joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
@@ -316,5 +319,5 @@ export const RoomCard = as<'div', RoomCardProps>(
         )}
       </RoomCardBase>
     );
-  }
+  },
 );

src/app/components/room-intro/RoomIntro.tsx

@@ -43,7 +43,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
   const prevRoomId = createContent?.predecessor?.room_id;
 
   const [prevRoomState, joinPrevRoom] = useAsyncCallback(
-    useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
+    useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx]),
   );
 
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');

src/app/components/scroll-top-container/ScrollTopContainer.tsx

@@ -27,10 +27,10 @@ export const ScrollTopContainer = as<
           onVisibilityChange?.(entry.isIntersecting);
         }
       },
-      [anchorRef, onVisibilityChange]
+      [anchorRef, onVisibilityChange],
     ),
     useCallback(() => ({ root: scrollRef?.current }), [scrollRef]),
-    useCallback(() => anchorRef.current, [anchorRef])
+    useCallback(() => anchorRef.current, [anchorRef]),
   );
 
   if (onTop) return null;

src/app/components/sequence-card/SequenceCard.tsx

@@ -20,19 +20,19 @@ export const SequenceCard = as<
       mergeBorder,
       ...props
     },
-    ref
+    ref,
   ) => (
     <Box
       as={AsSequenceCard}
       className={classNames(
         css.SequenceCard({ radii, outlined, mergeBorder }),
         ContainerColor({ variant }),
-        className
+        className,
       )}
       data-first-child={firstChild}
       data-last-child={lastChild}
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/sidebar/SidebarItem.tsx

@@ -10,7 +10,7 @@ export const SidebarItem = as<'div', css.SidebarItemVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
@@ -20,7 +20,7 @@ export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export function SidebarItemTooltip({
@@ -57,7 +57,7 @@ export const SidebarAvatar = as<'div', css.SidebarAvatarVariants & ComponentProp
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
@@ -67,7 +67,7 @@ export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 export const SidebarFolderDropTarget = as<'div', css.SidebarFolderDropTargetVariants>(
@@ -77,5 +77,5 @@ export const SidebarFolderDropTarget = as<'div', css.SidebarFolderDropTargetVari
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/components/sidebar/SidebarStack.tsx

@@ -6,5 +6,5 @@ import * as css from './Sidebar.css';
 export const SidebarStack = as<'div'>(
   ({ as: AsSidebarStack = 'div', className, ...props }, ref) => (
     <AsSidebarStack className={classNames(css.SidebarStack, className)} {...props} ref={ref} />
-  )
+  ),
 );

src/app/components/stacked-avatar/StackedAvatar.tsx

@@ -14,5 +14,5 @@ export const StackedAvatar = as<'span', css.StackedAvatarVariants & StackedAvata
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

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

@@ -28,7 +28,7 @@ export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentPro
         </Suspense>
       </ErrorBoundary>
     </Text>
-  )
+  ),
 );
 
 export type TextViewerProps = {
@@ -83,5 +83,5 @@ export const TextViewer = as<'div', TextViewerProps>(
         </Box>
       </Box>
     );
-  }
+  },
 );

src/app/components/time-date/DatePicker.tsx

@@ -125,5 +125,5 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         </Box>
       </Menu>
     );
-  }
+  },
 );

src/app/components/time-date/TimePicker.tsx

@@ -149,5 +149,5 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
         </Box>
       </Menu>
     );
-  }
+  },
 );

src/app/components/typing-indicator/TypingIndicator.tsx

@@ -21,5 +21,5 @@ export const TypingIndicator = as<'div', TypingIndicatorProps>(
       <span className={css.TypingDot({ size, index: '1', animated: !disableAnimation })} />
       <span className={css.TypingDot({ size, index: '2', animated: !disableAnimation })} />
     </Box>
-  )
+  ),
 );

src/app/components/uia-stages/EmailStage.tsx

@@ -103,14 +103,14 @@ export function EmailStageDialog({
         session,
       });
     },
-    [submitAuthDict, session, clientSecret]
+    [submitAuthDict, session, clientSecret],
   );
 
   const handleEmailSubmit = useCallback(
     (userEmail: string) => {
       requestEmailToken(userEmail, clientSecret);
     },
-    [clientSecret, requestEmailToken]
+    [clientSecret, requestEmailToken],
   );
 
   useEffect(() => {

src/app/components/uia-stages/RegistrationTokenStage.tsx

@@ -91,7 +91,7 @@ export function RegistrationTokenStageDialog({
         session,
       });
     },
-    [session, submitAuthDict]
+    [session, submitAuthDict],
   );
 
   useEffect(() => {

src/app/components/uia-stages/TermsStage.tsx

@@ -47,7 +47,7 @@ export function AutoTermsStageDialog({ stageData, submitAuthDict, onCancel }: St
         type: AuthType.Terms,
         session,
       }),
-    [session, submitAuthDict]
+    [session, submitAuthDict],
   );
 
   useEffect(() => {

src/app/components/upload-board/UploadBoard.tsx

@@ -59,14 +59,14 @@ export function UploadBoardHeader({
       }
       return acc;
     },
-    { loaded: 0, total: 0 }
+    { loaded: 0, total: 0 },
   );
 
   const handleSend = async () => {
     if (sendingRef.current) return;
     sendingRef.current = true;
     await onSend(
-      uploads.filter((upload) => upload.status === UploadStatus.Success) as UploadSuccess[]
+      uploads.filter((upload) => upload.status === UploadStatus.Success) as UploadSuccess[],
     );
     sendingRef.current = false;
   };

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

@@ -28,7 +28,7 @@ export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.Uploa
       </Box>
       {bottom}
     </Box>
-  )
+  ),
 );
 
 type UploadCardProgressProps = {

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -24,7 +24,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     const useAuthentication = useMediaAuthentication();
     const [viewer, setViewer] = useState(false);
     const [previewStatus, loadPreview] = useAsyncCallback(
-      useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx])
+      useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx]),
     );
 
     useEffect(() => {
@@ -41,7 +41,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
         256,
         256,
         'scale',
-        false
+        false,
       );
 
       const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication);
@@ -105,7 +105,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
         )}
       </UrlPreview>
     );
-  }
+  },
 );
 
 export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
@@ -133,8 +133,8 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
         root: scrollRef.current,
         rootMargin: '10px',
       }),
-      []
-    )
+      [],
+    ),
   );
 
   useEffect(() => {

src/app/components/user-profile/CreatorChip.tsx

@@ -62,7 +62,7 @@ export function CreatorChip() {
                     openSpaceSettings(
                       room.roomId,
                       space?.roomId,
-                      SpaceSettingsPage.PermissionsPage
+                      SpaceSettingsPage.PermissionsPage,
                     );
                   } else {
                     openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);

src/app/components/user-profile/PowerChip.tsx

@@ -187,8 +187,8 @@ export function PowerChip({ userId }: { userId: string }) {
       async (power: number) => {
         await mx.setPowerLevel(room.roomId, userId, power);
       },
-      [mx, userId, room]
-    )
+      [mx, userId, room],
+    ),
   );
   const changing = powerState.status === AsyncStatus.Loading;
   const error = powerState.status === AsyncStatus.Error;
@@ -301,13 +301,13 @@ export function PowerChip({ userId }: { userId: string }) {
                       openSpaceSettings(
                         room.roomId,
                         space?.roomId,
-                        SpaceSettingsPage.PermissionsPage
+                        SpaceSettingsPage.PermissionsPage,
                       );
                     } else {
                       openRoomSettings(
                         room.roomId,
                         space?.roomId,
-                        RoomSettingsPage.PermissionsPage
+                        RoomSettingsPage.PermissionsPage,
                       );
                     }
                     close();

src/app/components/user-profile/UserChips.tsx

@@ -459,7 +459,7 @@ export function OptionsChip({ userId }: { userId: string }) {
       const users = ignoredUsers.filter((u) => u !== userId);
       if (!ignored) users.push(userId);
       await mx.setIgnoredUsers(users);
-    }, [mx, ignoredUsers, userId, ignored])
+    }, [mx, ignoredUsers, userId, ignored]),
   );
   const ignoring = ignoreState.status === AsyncStatus.Loading;
 

src/app/components/user-profile/UserModeration.tsx

@@ -75,7 +75,7 @@ export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBan
   const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
       await mx.unban(room.roomId, userId);
-    }, [mx, room, userId])
+    }, [mx, room, userId]),
   );
   const banning = unbanState.status === AsyncStatus.Loading;
   const error = unbanState.status === AsyncStatus.Error;
@@ -150,7 +150,7 @@ export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: User
   const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
       await mx.kick(room.roomId, userId);
-    }, [mx, room, userId])
+    }, [mx, room, userId]),
   );
   const kicking = kickState.status === AsyncStatus.Loading;
   const error = kickState.status === AsyncStatus.Error;
@@ -230,19 +230,19 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer
   const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
       await mx.kick(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
+    }, [mx, room, userId, getReason]),
   );
 
   const [banState, ban] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
       await mx.ban(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
+    }, [mx, room, userId, getReason]),
   );
 
   const [inviteState, invite] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
       await mx.invite(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
+    }, [mx, room, userId, getReason]),
   );
 
   const disabled =

src/app/components/virtualizer/VirtualTile.tsx

@@ -16,5 +16,5 @@ export const VirtualTile = as<'div', VirtualTileProps>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );

src/app/cs-api.ts

@@ -28,13 +28,13 @@ export type AutoDiscoveryInfo = Record<string, unknown> & {
     {
       livekit_service_url: string;
       type: 'livekit';
-    }
+    },
   ];
 };
 
 export const autoDiscovery = async (
   request: typeof fetch,
-  server: string
+  server: string,
 ): Promise<[AutoDiscoveryError, undefined] | [undefined, AutoDiscoveryInfo]> => {
   const host = /^https?:\/\//.test(server) ? trimTrailingSlash(server) : `https://${server}`;
   const autoDiscoveryUrl = `${host}/.well-known/matrix/client`;
@@ -99,7 +99,7 @@ export const autoDiscovery = async (
   content['m.homeserver'].base_url = trimTrailingSlash(baseUrl);
   if (content['m.identity_server']) {
     content['m.identity_server'].base_url = trimTrailingSlash(
-      content['m.identity_server'].base_url
+      content['m.identity_server'].base_url,
     );
   }
 
@@ -112,7 +112,7 @@ export type SpecVersions = {
 };
 export const specVersions = async (
   request: typeof fetch,
-  baseUrl: string
+  baseUrl: string,
 ): Promise<SpecVersions> => {
   const res = await request(`${trimTrailingSlash(baseUrl)}/_matrix/client/versions`);