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/hooks/media/useMediaLoading.ts

@@ -6,7 +6,7 @@ export type MediaLoadingData = {
 };
 
 export const useMediaLoading = (
-  getTargetElement: () => HTMLMediaElement | null
+  getTargetElement: () => HTMLMediaElement | null,
 ): MediaLoadingData => {
   const [loadingData, setLoadingData] = useState<MediaLoadingData>({
     loading: false,

src/app/hooks/media/useMediaPlay.ts

@@ -9,7 +9,7 @@ export type MediaPlayControl = {
 };
 
 export const useMediaPlay = (
-  getTargetElement: () => HTMLMediaElement | null
+  getTargetElement: () => HTMLMediaElement | null,
 ): MediaPlayData & MediaPlayControl => {
   const [playing, setPlay] = useState(false);
 
@@ -20,7 +20,7 @@ export const useMediaPlay = (
       if (play) targetEl.play();
       else targetEl.pause();
     },
-    [getTargetElement]
+    [getTargetElement],
   );
 
   useEffect(() => {

src/app/hooks/media/useMediaPlayTimeCallback.ts

@@ -4,7 +4,7 @@ export type PlayTimeCallback = (duration: number, currentTime: number) => void;
 
 export const useMediaPlayTimeCallback = (
   getTargetElement: () => HTMLMediaElement | null,
-  onPlayTimeCallback: PlayTimeCallback
+  onPlayTimeCallback: PlayTimeCallback,
 ): void => {
   useEffect(() => {
     const targetEl = getTargetElement();

src/app/hooks/media/useMediaPlaybackRate.ts

@@ -8,7 +8,7 @@ export type MediaPlaybackRateControl = {
 };
 
 export const useMediaPlaybackRate = (
-  getTargetElement: () => HTMLMediaElement | null
+  getTargetElement: () => HTMLMediaElement | null,
 ): MediaPlaybackRateData & MediaPlaybackRateControl => {
   const [rate, setRate] = useState(1.0);
 
@@ -18,7 +18,7 @@ export const useMediaPlaybackRate = (
       if (!targetEl) return;
       targetEl.playbackRate = playbackRate;
     },
-    [getTargetElement]
+    [getTargetElement],
   );
 
   useEffect(() => {

src/app/hooks/media/useMediaSeek.ts

@@ -9,7 +9,7 @@ export type MediaSeekControl = {
 };
 
 export const useMediaSeek = (
-  getTargetElement: () => HTMLMediaElement | null
+  getTargetElement: () => HTMLMediaElement | null,
 ): MediaSeekData & MediaSeekControl => {
   const [seekData, setSeekData] = useState<MediaSeekData>({
     seeking: false,
@@ -22,7 +22,7 @@ export const useMediaSeek = (
       if (!targetEl) return;
       targetEl.currentTime = time;
     },
-    [getTargetElement]
+    [getTargetElement],
   );
 
   useEffect(() => {

src/app/hooks/media/useMediaVolume.ts

@@ -11,7 +11,7 @@ export type MediaVolumeControl = {
 };
 
 export const useMediaVolume = (
-  getTargetElement: () => HTMLMediaElement | null
+  getTargetElement: () => HTMLMediaElement | null,
 ): MediaVolumeData & MediaVolumeControl => {
   const [volumeData, setVolumeData] = useState<MediaVolumeData>({
     volume: 1,
@@ -24,7 +24,7 @@ export const useMediaVolume = (
       if (!targetEl) return;
       targetEl.muted = mute;
     },
-    [getTargetElement]
+    [getTargetElement],
   );
 
   const setVolume = useCallback(
@@ -33,7 +33,7 @@ export const useMediaVolume = (
       if (!targetEl) return;
       targetEl.volume = volume;
     },
-    [getTargetElement]
+    [getTargetElement],
   );
 
   useEffect(() => {

src/app/hooks/types.ts

@@ -8,5 +8,5 @@ export type RequestEmailTokenResponse = {
 export type RequestEmailTokenCallback = (
   email: string,
   clientSecret: string,
-  nextLink?: string
+  nextLink?: string,
 ) => Promise<RequestEmailTokenResponse>;

src/app/hooks/useAccountData.ts

@@ -14,8 +14,8 @@ export function useAccountData(eventType: string) {
           setEvent(evt);
         }
       },
-      [eventType, setEvent]
-    )
+      [eventType, setEvent],
+    ),
   );
 
   return event;

src/app/hooks/useAccountDataCallback.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 export const useAccountDataCallback = (
   mx: MatrixClient,
-  onAccountData: ClientEventHandlerMap[ClientEvent.AccountData]
+  onAccountData: ClientEventHandlerMap[ClientEvent.AccountData],
 ) => {
   useEffect(() => {
     mx.on(ClientEvent.AccountData, onAccountData);

src/app/hooks/useAccountManagement.ts

@@ -10,7 +10,7 @@ export const useAccountManagementActions = () => {
       accountDeactivate: 'org.matrix.account_deactivate',
       crossSigningReset: 'org.matrix.cross_signing_reset',
     }),
-    []
+    [],
   );
 
   return actions;

src/app/hooks/useAsyncCallback.ts

@@ -33,7 +33,7 @@ export type AsyncCallback<TArgs extends unknown[], TData> = (...args: TArgs) =>
 
 export const useAsync = <TData, TError, TArgs extends unknown[]>(
   asyncCallback: AsyncCallback<TArgs, TData>,
-  onStateChange: (state: AsyncState<TData, TError>) => void
+  onStateChange: (state: AsyncState<TData, TError>) => void,
 ): AsyncCallback<TArgs, TData> => {
   const alive = useAlive();
 
@@ -90,14 +90,14 @@ export const useAsync = <TData, TError, TArgs extends unknown[]>(
         throw e;
       }
     },
-    [asyncCallback, alive, onStateChange]
+    [asyncCallback, alive, onStateChange],
   );
 
   return callback;
 };
 
 export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
-  asyncCallback: AsyncCallback<TArgs, TData>
+  asyncCallback: AsyncCallback<TArgs, TData>,
 ): [AsyncState<TData, TError>, AsyncCallback<TArgs, TData>] => {
   const [state, setState] = useState<AsyncState<TData, TError>>({
     status: AsyncStatus.Idle,
@@ -109,7 +109,7 @@ export const useAsyncCallback = <TData, TError, TArgs extends unknown[]>(
 };
 
 export const useAsyncCallbackValue = <TData, TError>(
-  asyncCallback: AsyncCallback<[], TData>
+  asyncCallback: AsyncCallback<[], TData>,
 ): [AsyncState<TData, TError>, AsyncCallback<[], TData>] => {
   const [state, load] = useAsyncCallback<TData, TError, []>(asyncCallback);
 

src/app/hooks/useAsyncSearch.ts

@@ -19,7 +19,7 @@ export type UseAsyncSearchOptions = AsyncSearchOption & {
 
 export type SearchItemStrGetter<TSearchItem extends object | string | number> = (
   searchItem: TSearchItem,
-  query: string
+  query: string,
 ) => string | string[];
 
 export type UseAsyncSearchResult<TSearchItem extends object | string | number> = {
@@ -32,11 +32,11 @@ export type SearchResetHandler = () => void;
 const performMatch = (
   target: string | string[],
   query: string,
-  options?: UseAsyncSearchOptions
+  options?: UseAsyncSearchOptions,
 ): string | undefined => {
   if (Array.isArray(target)) {
     const matchTarget = target.find((i) =>
-      matchQuery(normalize(i, options?.normalizeOptions), query, options?.matchOptions)
+      matchQuery(normalize(i, options?.normalizeOptions), query, options?.matchOptions),
     );
     return matchTarget ? normalize(matchTarget, options?.normalizeOptions) : undefined;
   }
@@ -50,7 +50,7 @@ export const orderSearchItems = <TSearchItem extends object | string | number>(
   query: string,
   items: TSearchItem[],
   getItemStr: SearchItemStrGetter<TSearchItem>,
-  options?: UseAsyncSearchOptions
+  options?: UseAsyncSearchOptions,
 ): TSearchItem[] => {
   const orderedItems: TSearchItem[] = Array.from(items);
 
@@ -107,7 +107,7 @@ export const orderSearchItems = <TSearchItem extends object | string | number>(
 export const useAsyncSearch = <TSearchItem extends object | string | number>(
   list: TSearchItem[],
   getItemStr: SearchItemStrGetter<TSearchItem>,
-  options?: UseAsyncSearchOptions
+  options?: UseAsyncSearchOptions,
 ): [UseAsyncSearchResult<TSearchItem> | undefined, AsyncSearchHandler, SearchResetHandler] => {
   const [result, setResult] = useState<UseAsyncSearchResult<TSearchItem>>();
 
@@ -135,7 +135,7 @@ export const useAsyncSearch = <TSearchItem extends object | string | number>(
       const normalizedQuery = normalize(query, options?.normalizeOptions);
       searchCallback(normalizedQuery);
     },
-    [searchCallback, options?.normalizeOptions]
+    [searchCallback, options?.normalizeOptions],
   );
 
   const resetHandler: SearchResetHandler = useCallback(() => {
@@ -148,7 +148,7 @@ export const useAsyncSearch = <TSearchItem extends object | string | number>(
       // terminate any ongoing search request on unmount.
       terminateSearch();
     },
-    [terminateSearch]
+    [terminateSearch],
   );
 
   return [result, searchHandler, resetHandler];

src/app/hooks/useCall.ts

@@ -35,7 +35,7 @@ export const useCallSession = (room: Room): MatrixRTCSession => {
 
 export const useCallMembers = (room: Room, session: MatrixRTCSession): CallMembership[] => {
   const [memberships, setMemberships] = useState<CallMembership[]>(
-    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription)
+    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription),
   );
 
   useEffect(() => {

src/app/hooks/useCallEmbed.ts

@@ -46,14 +46,14 @@ export const createCallEmbed = (
   container: HTMLElement,
   pref?: CallPreferences,
   noiseSuppression = true,
-  forceAudioOff = false
+  forceAudioOff = false,
 ): CallEmbed => {
   const rtcSession = mx.matrixRTC.getRoomSession(room);
   const ongoing =
     MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;
 
   const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
-  const initialAudio = forceAudioOff ? false : pref?.microphone ?? true;
+  const initialAudio = forceAudioOff ? false : (pref?.microphone ?? true);
   const initialVideo = pref?.video ?? false;
   const widget = CallEmbed.getWidget(
     mx,
@@ -62,7 +62,7 @@ export const createCallEmbed = (
     themeKind,
     noiseSuppression,
     initialAudio,
-    initialVideo
+    initialVideo,
   );
   const controlState =
     pref && new CallControlState(forceAudioOff ? false : pref.microphone, pref.video, pref.sound);
@@ -94,12 +94,12 @@ export const useCallStart = (dm = false) => {
         container,
         pref,
         callNoiseSuppression ?? true,
-        !!pttMode
+        !!pttMode,
       );
 
       setCallEmbed(callEmbed);
     },
-    [mx, dm, theme, setCallEmbed, callEmbedRef, callNoiseSuppression, pttMode]
+    [mx, dm, theme, setCallEmbed, callEmbedRef, callNoiseSuppression, pttMode],
   );
 
   return startCall;
@@ -113,7 +113,7 @@ export const useCallJoined = (embed?: CallEmbed): boolean => {
     ElementWidgetActions.JoinCall,
     useCallback(() => {
       setJoined(true);
-    }, [])
+    }, []),
   );
 
   useEffect(() => {
@@ -134,7 +134,7 @@ export const useCallMemberSoundSync = (embed: CallEmbed) => {
   const callSession = useCallSession(embed.room);
   useCallMembersChange(
     callSession,
-    useCallback(() => embed.control.applySound(), [embed])
+    useCallback(() => embed.control.applySound(), [embed]),
   );
 };
 
@@ -164,6 +164,6 @@ export const useCallEmbedPlacementSync = (containerViewRef: RefObject<HTMLDivEle
 
   useResizeObserver(
     syncCallEmbedPlacement,
-    useCallback(() => containerViewRef.current, [containerViewRef])
+    useCallback(() => containerViewRef.current, [containerViewRef]),
   );
 };

src/app/hooks/useCallSpeakers.ts

@@ -39,8 +39,8 @@ export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
 
         setSpeakers(s);
       },
-      [callEmbed]
-    )
+      [callEmbed],
+    ),
   );
 
   useEffect(() => {

src/app/hooks/useCategoryHandler.ts

@@ -11,7 +11,7 @@ type CategoryAction =
     };
 export const useCategoryHandler = (
   setAtom: (action: CategoryAction) => void,
-  closed: (categoryId: string) => boolean
+  closed: (categoryId: string) => boolean,
 ) => {
   const handleCategoryClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const categoryId = evt.currentTarget.getAttribute('data-category-id');

src/app/hooks/useCommands.ts

@@ -230,7 +230,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
           const roomIdOrAliases = rawIds.filter(
-            (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias)
+            (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias),
           );
           await Promise.all(roomIdOrAliases.map((idOrAlias) => mx.joinRoom(idOrAlias)));
         },
@@ -369,7 +369,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               ...content,
               displayname: nick,
             },
-            mx.getSafeUserId()
+            mx.getSafeUserId(),
           );
         },
       },
@@ -391,7 +391,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
                 ...content,
                 avatar_url: payload,
               },
-              mx.getSafeUserId()
+              mx.getSafeUserId(),
             );
           }
         },
@@ -442,7 +442,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const startEventId = result.event_id;
 
           const path = `/rooms/${encodeURIComponent(room.roomId)}/context/${encodeURIComponent(
-            startEventId
+            startEventId,
           )}`;
           const eventContext = await mx.http.authedRequest<IContextResponse>(Method.Get, path, {
             limit: 0,
@@ -456,7 +456,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               token,
               20,
               Direction.Forward,
-              undefined
+              undefined,
             );
             const { end, chunk } = response;
             // remove until the latest event;
@@ -466,14 +466,14 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               (roomEvent) =>
                 (messageTypes.length > 0 ? messageTypes.includes(roomEvent.type) : true) &&
                 users.includes(roomEvent.sender) &&
-                roomEvent.unsigned?.redacted_because === undefined
+                roomEvent.unsigned?.redacted_because === undefined,
             );
 
             const eventIds = eventsToDelete.map((roomEvent) => roomEvent.event_id);
 
             // eslint-disable-next-line no-await-in-loop
             await rateLimitedActions(eventIds, (eventId) =>
-              mx.redactEvent(room.roomId, eventId, undefined, { reason })
+              mx.redactEvent(room.roomId, eventId, undefined, { reason }),
             );
           }
         },
@@ -498,7 +498,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
 
           const serverAcl = getStateEvent(
             room,
-            StateEvent.RoomServerAcl
+            StateEvent.RoomServerAcl,
           )?.getContent<RoomServerAclEventContent>();
 
           const aclContent: RoomServerAclEventContent = {
@@ -517,10 +517,10 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           });
 
           aclContent.allow = aclContent.allow?.filter(
-            (servername) => !removeAllowList.includes(servername)
+            (servername) => !removeAllowList.includes(servername),
           );
           aclContent.deny = aclContent.deny?.filter(
-            (servername) => !removeDenyList.includes(servername)
+            (servername) => !removeDenyList.includes(servername),
           );
 
           aclContent.allow?.sort();
@@ -530,7 +530,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         },
       },
     }),
-    [mx, room, navigateRoom]
+    [mx, room, navigateRoom],
   );
 
   return commands;

src/app/hooks/useComposingCheck.ts

@@ -13,7 +13,7 @@ export function useCompositionEndTracking(): void {
     (evt: TimeStamped) => {
       setLastCompositionEnd(evt.timeStamp);
     },
-    [setLastCompositionEnd]
+    [setLastCompositionEnd],
   );
 
   useEffect(() => {
@@ -42,6 +42,6 @@ export function useComposingCheck({
       (evt.keyCode === 229 &&
         typeof compositionEnd !== 'undefined' &&
         evt.timeStamp - compositionEnd < compositionEndThreshold),
-    [compositionEndThreshold, compositionEnd]
+    [compositionEndThreshold, compositionEnd],
   );
 }

src/app/hooks/useDateFormat.ts

@@ -34,5 +34,5 @@ export const useDateFormatItems = (): DateFormatItem[] =>
         name: 'Custom',
       },
     ],
-    []
+    [],
   );

src/app/hooks/useDebounce.ts

@@ -8,7 +8,7 @@ export type DebounceCallback<T extends unknown[]> = (...args: T) => void;
 
 export function useDebounce<T extends unknown[]>(
   callback: DebounceCallback<T>,
-  options?: DebounceOptions
+  options?: DebounceOptions,
 ): DebounceCallback<T> {
   const timeoutIdRef = useRef<number>();
   const { wait, immediate } = options ?? {};
@@ -27,7 +27,7 @@ export function useDebounce<T extends unknown[]>(
         timeoutIdRef.current = undefined;
       }, wait);
     },
-    [callback, wait, immediate]
+    [callback, wait, immediate],
   );
 
   return debounceCallback;

src/app/hooks/useDeviceList.ts

@@ -5,7 +5,7 @@ import { CryptoEvent, CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto-api
 import { useMatrixClient } from './useMatrixClient';
 
 export const useDeviceListChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.DevicesUpdated]
+  onChange: CryptoEventHandlerMap[CryptoEvent.DevicesUpdated],
 ) => {
   const mx = useMatrixClient();
   useEffect(() => {
@@ -46,8 +46,8 @@ export function useDeviceList(): [undefined | IMyDevice[], () => Promise<void>]
           refreshDeviceList();
         }
       },
-      [mx, refreshDeviceList]
-    )
+      [mx, refreshDeviceList],
+    ),
   );
 
   return [deviceList ?? undefined, refreshDeviceList];
@@ -60,17 +60,17 @@ export const useDeviceIds = (devices: IMyDevice[] | undefined): string[] => {
 };
 
 export const useSplitCurrentDevice = (
-  devices: IMyDevice[] | undefined
+  devices: IMyDevice[] | undefined,
 ): [IMyDevice | undefined, IMyDevice[] | undefined] => {
   const mx = useMatrixClient();
   const currentDeviceId = mx.getDeviceId();
   const currentDevice = useMemo(
     () => devices?.find((d) => d.device_id === currentDeviceId),
-    [devices, currentDeviceId]
+    [devices, currentDeviceId],
   );
   const otherDevices = useMemo(
     () => devices?.filter((device) => device.device_id !== currentDeviceId),
-    [devices, currentDeviceId]
+    [devices, currentDeviceId],
   );
 
   return [currentDevice, otherDevices];

src/app/hooks/useDeviceVerificationStatus.ts

@@ -17,7 +17,7 @@ export const useDeviceVerificationDetect = (
   crypto: CryptoApi | undefined,
   userId: string,
   deviceId: string | undefined,
-  callback: (status: VerificationStatus) => void
+  callback: (status: VerificationStatus) => void,
 ): void => {
   const mx = useMatrixClient();
 
@@ -45,15 +45,15 @@ export const useDeviceVerificationDetect = (
           updateStatus();
         }
       },
-      [userId, updateStatus]
-    )
+      [userId, updateStatus],
+    ),
   );
 };
 
 export const useDeviceVerificationStatus = (
   crypto: CryptoApi | undefined,
   userId: string,
-  deviceId: string | undefined
+  deviceId: string | undefined,
 ): VerificationStatus => {
   const [verificationStatus, setVerificationStatus] = useState(VerificationStatus.Unknown);
 
@@ -65,7 +65,7 @@ export const useDeviceVerificationStatus = (
 export const useUnverifiedDeviceCount = (
   crypto: CryptoApi | undefined,
   userId: string,
-  devices: string[]
+  devices: string[],
 ): number | undefined => {
   const [unverifiedCount, setUnverifiedCount] = useState<number>();
   const alive = useAlive();
@@ -94,8 +94,8 @@ export const useUnverifiedDeviceCount = (
           updateCount();
         }
       },
-      [userId, updateCount]
-    )
+      [userId, updateCount],
+    ),
   );
 
   useEffect(() => {

src/app/hooks/useElementSizeObserver.ts

@@ -3,7 +3,7 @@ import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
 
 export const useElementSizeObserver = <T extends Element>(
   element: () => T | null,
-  onResize: (width: number, height: number, element: T) => void
+  onResize: (width: number, height: number, element: T) => void,
 ) => {
   useResizeObserver(
     useCallback(
@@ -16,8 +16,8 @@ export const useElementSizeObserver = <T extends Element>(
           onResize(clientWidth, clientHeight, target);
         }
       },
-      [element, onResize]
+      [element, onResize],
     ),
-    element
+    element,
   );
 };

src/app/hooks/useEmailNotifications.ts

@@ -11,7 +11,7 @@ type EmailNotificationResult = {
 
 export const useEmailNotifications = (): [
   EmailNotificationResult | undefined | null,
-  RefreshHandler
+  RefreshHandler,
 ] => {
   const mx = useMatrixClient();
 
@@ -26,7 +26,7 @@ export const useEmailNotifications = (): [
 
       const pushers = (await mx.getPushers())?.pushers;
       const emailPusher = pushers.find(
-        (pusher) => pusher.app_id === 'm.email' && emailAddresses.includes(pusher.pushkey)
+        (pusher) => pusher.app_id === 'm.email' && emailAddresses.includes(pusher.pushkey),
       );
 
       if (emailPusher?.pushkey) {
@@ -40,7 +40,7 @@ export const useEmailNotifications = (): [
         enabled: false,
         email: emailAddresses[0],
       };
-    }, [mx])
+    }, [mx]),
   );
 
   if (emailState.status === AsyncStatus.Success) {

src/app/hooks/useFileDrop.ts

@@ -7,12 +7,12 @@ export const useFileDropHandler = (onDrop: (file: File[]) => void): DragEventHan
       const files = getDataTransferFiles(evt.dataTransfer);
       if (files) onDrop(files);
     },
-    [onDrop]
+    [onDrop],
   );
 
 export const useFileDropZone = (
   zoneRef: RefObject<HTMLElement>,
-  onDrop: (file: File[]) => void
+  onDrop: (file: File[]) => void,
 ): boolean => {
   const dragStateRef = useRef<'start' | 'leave' | 'over'>();
   const [active, setActive] = useState(false);

src/app/hooks/useFilePasteHandler.ts

@@ -7,5 +7,5 @@ export const useFilePasteHandler = (onPaste: (file: File[]) => void): ClipboardE
       const files = getDataTransferFiles(evt.clipboardData);
       if (files) onPaste(files);
     },
-    [onPaste]
+    [onPaste],
   );

src/app/hooks/useFilePicker.ts

@@ -3,7 +3,7 @@ import { selectFile } from '../utils/dom';
 
 export const useFilePicker = <M extends boolean | undefined = undefined>(
   onSelect: (file: M extends true ? File[] : File) => void,
-  multiple?: M
+  multiple?: M,
 ) =>
   useCallback(
     async (accept: string) => {
@@ -11,5 +11,5 @@ export const useFilePicker = <M extends boolean | undefined = undefined>(
       if (!file) return;
       onSelect(file);
     },
-    [multiple, onSelect]
+    [multiple, onSelect],
   );

src/app/hooks/useGetRoom.ts

@@ -22,7 +22,7 @@ export const useGetRoom = (rooms: Set<string>): GetRoomCallback => {
       }
       return undefined;
     },
-    [mx, rooms]
+    [mx, rooms],
   );
 
   return getRoom;

src/app/hooks/useImagePackRooms.ts

@@ -5,7 +5,7 @@ import { useMatrixClient } from './useMatrixClient';
 
 export const useImagePackRooms = (
   roomId: string,
-  roomToParents: Map<string, Set<string>>
+  roomToParents: Map<string, Set<string>>,
 ): Room[] => {
   const mx = useMatrixClient();
 

src/app/hooks/useImagePacks.ts

@@ -26,8 +26,8 @@ export const useUserImagePack = (): ImagePack | undefined => {
           setUserPack(getUserImagePack(mx));
         }
       },
-      [mx]
-    )
+      [mx],
+    ),
   );
 
   return userPack;
@@ -45,8 +45,8 @@ export const useGlobalImagePacks = (): ImagePack[] => {
           setGlobalPacks(getGlobalImagePacks(mx));
         }
       },
-      [mx]
-    )
+      [mx],
+    ),
   );
 
   useStateEventCallback(
@@ -59,15 +59,15 @@ export const useGlobalImagePacks = (): ImagePack[] => {
         if (eventType === StateEvent.PoniesRoomEmotes && roomId && typeof stateKey === 'string') {
           const global = !!globalPacks.find(
             (pack) =>
-              pack.address && pack.address.roomId === roomId && pack.address.stateKey === stateKey
+              pack.address && pack.address.roomId === roomId && pack.address.stateKey === stateKey,
           );
           if (global) {
             setGlobalPacks(getGlobalImagePacks(mx));
           }
         }
       },
-      [mx, globalPacks]
-    )
+      [mx, globalPacks],
+    ),
   );
 
   return globalPacks;
@@ -89,8 +89,8 @@ export const useRoomImagePack = (room: Room, stateKey: string): ImagePack | unde
           setRoomPack(getRoomImagePack(room, stateKey));
         }
       },
-      [room, stateKey]
-    )
+      [room, stateKey],
+    ),
   );
 
   return roomPack;
@@ -111,8 +111,8 @@ export const useRoomImagePacks = (room: Room): ImagePack[] => {
           setRoomPacks(getRoomImagePacks(room));
         }
       },
-      [room]
-    )
+      [room],
+    ),
   );
 
   return roomPacks;
@@ -133,8 +133,8 @@ export const useRoomsImagePacks = (rooms: Room[]) => {
           setRoomPacks(rooms.flatMap(getRoomImagePacks));
         }
       },
-      [rooms]
-    )
+      [rooms],
+    ),
   );
 
   return roomPacks;
@@ -151,7 +151,7 @@ export const useRelevantImagePacks = (usage: ImageUsage, rooms: Room[]): ImagePa
 
     const relPacks = packs.concat(
       globalPacks,
-      roomsPacks.filter((pack) => !globalPackIds.has(pack.id))
+      roomsPacks.filter((pack) => !globalPackIds.has(pack.id)),
     );
 
     return relPacks.filter((pack) => pack.getImages(usage).length > 0);

src/app/hooks/useIntersectionObserver.ts

@@ -10,13 +10,13 @@ export type IntersectionObserverOpts = {
 
 export const getIntersectionObserverEntry = (
   target: Element | Document,
-  entries: IntersectionObserverEntry[]
+  entries: IntersectionObserverEntry[],
 ): IntersectionObserverEntry | undefined => entries.find((entry) => entry.target === target);
 
 export const useIntersectionObserver = (
   onIntersectionCallback: OnIntersectionCallback,
   opts?: IntersectionObserverOpts | (() => IntersectionObserverOpts),
-  observeElement?: Element | null | (() => Element | null)
+  observeElement?: Element | null | (() => Element | null),
 ): IntersectionObserver | undefined => {
   const [intersectionObserver, setIntersectionObserver] = useState<IntersectionObserver>();
 

src/app/hooks/useKeyBackup.ts

@@ -10,7 +10,7 @@ import { useMatrixClient } from './useMatrixClient';
 import { useAlive } from './useAlive';
 
 export const useKeyBackupStatusChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupStatus]
+  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupStatus],
 ) => {
   const mx = useMatrixClient();
 
@@ -40,7 +40,7 @@ export const useKeyBackupStatus = (crypto: CryptoApi): boolean => {
 };
 
 export const useKeyBackupSessionsRemainingChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupSessionsRemaining]
+  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupSessionsRemaining],
 ) => {
   const mx = useMatrixClient();
 
@@ -53,7 +53,7 @@ export const useKeyBackupSessionsRemainingChange = (
 };
 
 export const useKeyBackupFailedChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupFailed]
+  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupFailed],
 ) => {
   const mx = useMatrixClient();
 
@@ -66,7 +66,7 @@ export const useKeyBackupFailedChange = (
 };
 
 export const useKeyBackupDecryptionKeyCached = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupDecryptionKeyCached]
+  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupDecryptionKeyCached],
 ) => {
   const mx = useMatrixClient();
 
@@ -86,7 +86,7 @@ export const useKeyBackupSync = (): [number, string | undefined] => {
     useCallback((count) => {
       setRemaining(count);
       setFailure(undefined);
-    }, [])
+    }, []),
   );
 
   useKeyBackupFailedChange(
@@ -95,7 +95,7 @@ export const useKeyBackupSync = (): [number, string | undefined] => {
         setFailure(f);
         setRemaining(0);
       }
-    }, [])
+    }, []),
   );
 
   return [remaining, failure];
@@ -126,8 +126,8 @@ export const useKeyBackupInfo = (crypto: CryptoApi): KeyBackupInfo | undefined |
           fetchInfo();
         }
       },
-      [fetchInfo]
-    )
+      [fetchInfo],
+    ),
   );
 
   return info;
@@ -135,7 +135,7 @@ export const useKeyBackupInfo = (crypto: CryptoApi): KeyBackupInfo | undefined |
 
 export const useKeyBackupTrust = (
   crypto: CryptoApi,
-  backupInfo: KeyBackupInfo
+  backupInfo: KeyBackupInfo,
 ): BackupTrustInfo | undefined => {
   const alive = useAlive();
   const [trust, setTrust] = useState<BackupTrustInfo>();

src/app/hooks/useMatrixEventRenderer.ts

@@ -14,7 +14,7 @@ export const useMatrixEventRenderer =
   <T extends unknown[]>(
     typeToRenderer: EventRendererOpts<T>,
     renderStateEvent?: EventRenderer<T>,
-    renderEvent?: EventRenderer<T>
+    renderEvent?: EventRenderer<T>,
   ): RenderMatrixEvent<T> =>
   (eventType, isStateEvent, ...args) => {
     const renderer = typeToRenderer[eventType];

src/app/hooks/useMemberFilter.ts

@@ -45,12 +45,12 @@ export const useMembershipFilterMenu = (): MembershipFilterItem[] =>
         filterFn: MembershipFilter.filterBanned,
       },
     ],
-    []
+    [],
   );
 
 export const useMembershipFilter = (
   index: number,
-  membershipFilter: MembershipFilterItem[]
+  membershipFilter: MembershipFilterItem[],
 ): MembershipFilterItem => {
   const filter = membershipFilter[index] ?? membershipFilter[0];
   return filter;

src/app/hooks/useMemberPowerCompare.ts

@@ -19,7 +19,7 @@ export const useMemberPowerCompare = (creators: Set<string>, powerLevels: IPower
 
       return aPower > bPower;
     },
-    [creators, powerLevels]
+    [creators, powerLevels],
   );
 
   return {

src/app/hooks/useMemberPowerTag.ts

@@ -12,7 +12,7 @@ export type GetMemberPowerTag = (userId: string) => MemberPowerTag;
 export const useGetMemberPowerTag = (
   room: Room,
   creators: Set<string>,
-  powerLevels: IPowerLevels
+  powerLevels: IPowerLevels,
 ) => {
   const creatorsTag = useRoomCreatorsTag();
   const powerLevelTags = usePowerLevelTags(room, powerLevels);
@@ -26,7 +26,7 @@ export const useGetMemberPowerTag = (
       const power = readPowerLevel.user(powerLevels, userId);
       return getPowerLevelTag(powerLevelTags, power);
     },
-    [creators, creatorsTag, powerLevels, powerLevelTags]
+    [creators, creatorsTag, powerLevels, powerLevelTags],
   );
 
   return getMemberPowerTag;
@@ -35,16 +35,16 @@ export const useGetMemberPowerTag = (
 export const getPowerTagIconSrc = (
   mx: MatrixClient,
   useAuthentication: boolean,
-  icon: MemberPowerTagIcon
+  icon: MemberPowerTagIcon,
 ): string | undefined =>
   icon?.key?.startsWith('mxc://')
-    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
+    ? (mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻')
     : icon?.key;
 
 export const useAccessiblePowerTagColors = (
   themeKind: ThemeKind,
   creatorsTag: MemberPowerTag,
-  powerLevelTags: PowerLevelTags
+  powerLevelTags: PowerLevelTags,
 ): Map<string, string> => {
   const accessibleColors: Map<string, string> = useMemo(() => {
     const colors: Map<string, string> = new Map();
@@ -67,7 +67,7 @@ export const useAccessiblePowerTagColors = (
 
 export const useFlattenPowerTagMembers = (
   members: RoomMember[],
-  getTag: GetMemberPowerTag
+  getTag: GetMemberPowerTag,
 ): Array<MemberPowerTag | RoomMember> => {
   const PLTagOrRoomMember = useMemo(() => {
     let prevTag: MemberPowerTag | undefined;

src/app/hooks/useMemberSort.ts

@@ -39,7 +39,7 @@ export const useMemberSortMenu = (): MemberSortItem[] =>
         sortFn: MemberSort.Oldest,
       },
     ],
-    []
+    [],
   );
 
 export const useMemberSort = (index: number, memberSort: MemberSortItem[]): MemberSortItem => {
@@ -49,7 +49,7 @@ export const useMemberSort = (index: number, memberSort: MemberSortItem[]): Memb
 
 export const useMemberPowerSort = (
   creators: Set<string>,
-  getPowerLevel: (userId: string) => number
+  getPowerLevel: (userId: string) => number,
 ): MemberSortFn => {
   const sort: MemberSortFn = useCallback(
     (a, b) => {
@@ -61,7 +61,7 @@ export const useMemberPowerSort = (
 
       return getPowerLevel(b.userId) - getPowerLevel(a.userId);
     },
-    [creators]
+    [creators],
   );
 
   return sort;

src/app/hooks/useMembership.ts

@@ -6,13 +6,13 @@ export const useMembership = (room: Room, userId: string): Membership => {
   const member = room.getMember(userId);
 
   const [membership, setMembership] = useState<Membership>(
-    () => (member?.membership as Membership | undefined) ?? Membership.Leave
+    () => (member?.membership as Membership | undefined) ?? Membership.Leave,
   );
 
   useEffect(() => {
     const handleMembershipChange: RoomMemberEventHandlerMap[RoomMemberEvent.Membership] = (
       event,
-      m
+      m,
     ) => {
       if (event.getRoomId() === room.roomId && m.userId === userId) {
         setMembership((m.membership as Membership | undefined) ?? Membership.Leave);

src/app/hooks/useMentionClickHandler.ts

@@ -40,7 +40,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
       navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
     },
-    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
+    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile],
   );
 
   return handleClick;

src/app/hooks/useMessageLayout.ts

@@ -22,5 +22,5 @@ export const useMessageLayoutItems = (): MessageLayoutItem[] =>
         name: 'Bubble',
       },
     ],
-    []
+    [],
   );

src/app/hooks/useMessageSpacing.ts

@@ -34,5 +34,5 @@ export const useMessageSpacingItems = (): MessageSpacingItem[] =>
         name: 'Large',
       },
     ],
-    []
+    [],
   );

src/app/hooks/useMutationObserver.ts

@@ -4,17 +4,17 @@ export type OnMutationCallback = (mutations: MutationRecord[]) => void;
 
 export const getMutationRecord = (
   target: Node,
-  mutations: MutationRecord[]
+  mutations: MutationRecord[],
 ): MutationRecord | undefined => mutations.find((mutation) => mutation.target === target);
 
 export const useMutationObserver = (
   onMutationCallback: OnMutationCallback,
   observeElement?: Node | null | (() => Node | null),
-  options?: MutationObserverInit
+  options?: MutationObserverInit,
 ): MutationObserver => {
   const mutationObserver = useMemo(
     () => new MutationObserver(onMutationCallback),
-    [onMutationCallback]
+    [onMutationCallback],
   );
 
   useEffect(() => () => mutationObserver?.disconnect(), [mutationObserver]);

src/app/hooks/useMutualRooms.ts

@@ -47,7 +47,7 @@ const fetchAllMutualRooms = async (mx: MatrixClient, userId: string): Promise<st
       undefined,
       {
         prefix: '/_matrix/client/v1',
-      }
+      },
     );
     result.joined.forEach((r) => mutualRooms.add(r));
     nextBatch = result.next_batch;
@@ -67,7 +67,7 @@ export const useMutualRooms = (userId: string): AsyncState<string[], unknown> =>
       if (support) return fetchAllMutualRooms(mx, userId);
       if (unstableSupport) return mx._unstable_getSharedRooms(userId);
       return Promise.resolve([]);
-    }, [mx, userId, unstableSupport, support])
+    }, [mx, userId, unstableSupport, support]),
   );
 
   return mutualRoomsState;

src/app/hooks/useNotificationMode.ts

@@ -9,10 +9,10 @@ export enum NotificationMode {
 
 export const getNotificationMode = (actions: PushRuleAction[]): NotificationMode => {
   const soundTweak = actions.find(
-    (action) => typeof action === 'object' && action.set_tweak === TweakName.Sound
+    (action) => typeof action === 'object' && action.set_tweak === TweakName.Sound,
   );
   const notify = actions.find(
-    (action) => typeof action === 'string' && action === PushRuleActionName.Notify
+    (action) => typeof action === 'string' && action === PushRuleActionName.Notify,
   );
 
   if (notify && soundTweak) return NotificationMode.NotifyLoud;
@@ -26,7 +26,7 @@ export type NotificationModeOptions = {
 };
 export const getNotificationModeActions = (
   mode: NotificationMode,
-  options?: NotificationModeOptions
+  options?: NotificationModeOptions,
 ): PushRuleAction[] => {
   if (mode === NotificationMode.OFF) return [];
 
@@ -51,11 +51,11 @@ export const getNotificationModeActions = (
 
 export type GetNotificationModeCallback = (mode: NotificationMode) => PushRuleAction[];
 export const useNotificationModeActions = (
-  options?: NotificationModeOptions
+  options?: NotificationModeOptions,
 ): GetNotificationModeCallback => {
   const getAction: GetNotificationModeCallback = useCallback(
     (mode) => getNotificationModeActions(mode, options),
-    [options]
+    [options],
   );
 
   return getAction;

src/app/hooks/useObjectURL.ts

@@ -10,7 +10,7 @@ export const useObjectURL = (object?: Blob): string | undefined => {
     () => () => {
       if (url) URL.revokeObjectURL(url);
     },
-    [url]
+    [url],
   );
 
   return url;

src/app/hooks/usePan.ts

@@ -13,7 +13,7 @@ const INITIAL_PAN = {
 export const usePan = (active: boolean) => {
   const [pan, setPan] = useState<Pan>(INITIAL_PAN);
   const [cursor, setCursor] = useState<'grab' | 'grabbing' | 'initial'>(
-    active ? 'grab' : 'initial'
+    active ? 'grab' : 'initial',
   );
 
   useEffect(() => {
@@ -61,7 +61,7 @@ export const usePan = (active: boolean) => {
       document.removeEventListener('mouseup', handleMouseUp);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     },
-    []
+    [],
   );
 
   return {

src/app/hooks/useParsedLoginFlows.ts

@@ -25,7 +25,7 @@ export const useParsedLoginFlows = (loginFlows: LoginFlow[]) => {
       token: getTokenFlow(loginFlows),
       sso: getSSOFlow(loginFlows),
     }),
-    [loginFlows]
+    [loginFlows],
   );
 
   return parsedFlow;

src/app/hooks/usePasswordEmail.ts

@@ -4,7 +4,7 @@ import { AsyncState, useAsyncCallback } from './useAsyncCallback';
 import { RequestEmailTokenCallback, RequestEmailTokenResponse } from './types';
 
 export const usePasswordEmail = (
-  mx: MatrixClient
+  mx: MatrixClient,
 ): [AsyncState<RequestEmailTokenResponse, MatrixError>, RequestEmailTokenCallback] => {
   const sendAttemptRef = useRef(1);
 
@@ -19,7 +19,7 @@ export const usePasswordEmail = (
         result,
       };
     },
-    [mx]
+    [mx],
   );
 
   const [passwordEmailState, passwordEmail] = useAsyncCallback<

src/app/hooks/usePowerLevelTags.ts

@@ -109,7 +109,7 @@ export const usePowerLevelTags = (room: Room, powerLevels: IPowerLevels): PowerL
 
 export const getPowerLevelTag = (
   powerLevelTags: PowerLevelTags,
-  powerLevel: number
+  powerLevel: number,
 ): MemberPowerTag => {
   const tag: MemberPowerTag | undefined = powerLevelTags[powerLevel];
   return tag ?? generateFallbackTag(powerLevelTags, powerLevel);

src/app/hooks/usePowerLevels.ts

@@ -69,7 +69,7 @@ export function usePowerLevels(room: Room): IPowerLevels {
   const powerLevelsEvent = useStateEvent(room, StateEvent.RoomPowerLevels);
   const powerLevels: IPowerLevels = useMemo(
     () => getPowersLevelFromMatrixEvent(powerLevelsEvent),
-    [powerLevelsEvent]
+    [powerLevelsEvent],
   );
 
   return powerLevels;
@@ -114,8 +114,8 @@ export const useRoomsPowerLevels = (rooms: Room[]): Map<string, IPowerLevels> =>
           setRoomToPowerLevels(getRoomsPowerLevels());
         }
       },
-      [rooms, getRoomsPowerLevels]
-    )
+      [rooms, getRoomsPowerLevels],
+    ),
   );
 
   return roomToPowerLevels;
@@ -171,7 +171,7 @@ export const readPowerLevel: ReadPowerLevelAPI = {
 export const useGetMemberPowerLevel = (powerLevels: IPowerLevels) => {
   const callback = useCallback(
     (userId?: string): number => readPowerLevel.user(powerLevels, userId),
-    [powerLevels]
+    [powerLevels],
   );
 
   return callback;
@@ -209,7 +209,7 @@ export type PermissionLocation =
 
 export const getPermissionPower = (
   powerLevels: IPowerLevels,
-  location: PermissionLocation
+  location: PermissionLocation,
 ): number => {
   if ('user' in location) {
     return readPowerLevel.user(powerLevels, location.key);
@@ -230,7 +230,7 @@ export const getPermissionPower = (
 export const applyPermissionPower = (
   powerLevels: IPowerLevels,
   location: PermissionLocation,
-  power: number
+  power: number,
 ): IPowerLevels => {
   if ('user' in location) {
     if (typeof location.key === 'string') {

src/app/hooks/usePushRule.ts

@@ -20,7 +20,7 @@ export const makePushRuleData = (
   conditions?: PushRuleCondition[],
   pattern?: string,
   enabled?: boolean,
-  _default?: boolean
+  _default?: boolean,
 ): PushRuleData => ({
   kind,
   pushRule: {
@@ -43,7 +43,7 @@ export const orderedPushRuleKinds: PushRuleKind[] = [
 
 export const getPushRule = (
   pushRules: IPushRules,
-  ruleId: RuleId | string
+  ruleId: RuleId | string,
 ): PushRuleData | undefined => {
   const { global } = pushRules;
 
@@ -67,5 +67,5 @@ export const getPushRule = (
 
 export const usePushRule = (
   pushRules: IPushRules,
-  ruleId: RuleId | string
+  ruleId: RuleId | string,
 ): PushRuleData | undefined => useMemo(() => getPushRule(pushRules, ruleId), [pushRules, ruleId]);

src/app/hooks/useRegisterEmail.ts

@@ -4,7 +4,7 @@ import { AsyncState, useAsyncCallback } from './useAsyncCallback';
 import { RequestEmailTokenCallback, RequestEmailTokenResponse } from './types';
 
 export const useRegisterEmail = (
-  mx: MatrixClient
+  mx: MatrixClient,
 ): [AsyncState<RequestEmailTokenResponse, MatrixError>, RequestEmailTokenCallback] => {
   const sendAttemptRef = useRef(1);
 
@@ -19,7 +19,7 @@ export const useRegisterEmail = (
         result,
       };
     },
-    [mx]
+    [mx],
   );
 
   const [registerEmailState, registerEmail] = useAsyncCallback<

src/app/hooks/useRelations.ts

@@ -3,7 +3,7 @@ import { RelationsEvent, type Relations } from 'matrix-js-sdk/lib/models/relatio
 
 export const useRelations = <T>(
   relations: Relations,
-  getRelations: (relations: Relations) => T
+  getRelations: (relations: Relations) => T,
 ) => {
   const [data, setData] = useState(() => getRelations(relations));
 

src/app/hooks/useResizeObserver.ts

@@ -4,12 +4,12 @@ export type OnResizeCallback = (entries: ResizeObserverEntry[]) => void;
 
 export const getResizeObserverEntry = (
   target: Element,
-  entries: ResizeObserverEntry[]
+  entries: ResizeObserverEntry[],
 ): ResizeObserverEntry | undefined => entries.find((entry) => entry.target === target);
 
 export const useResizeObserver = (
   onResizeCallback: OnResizeCallback,
-  observeElement?: Element | null | (() => Element | null)
+  observeElement?: Element | null | (() => Element | null),
 ): ResizeObserver => {
   const resizeObserver = useMemo(() => new ResizeObserver(onResizeCallback), [onResizeCallback]);
 

src/app/hooks/useRestoreBackupOnVerification.ts

@@ -19,6 +19,6 @@ export const useRestoreBackupOnVerification = () => {
           setRestoreProgress(progress);
         },
       });
-    }, [mx, setRestoreProgress])
+    }, [mx, setRestoreProgress]),
   );
 };

src/app/hooks/useRoomAliases.ts

@@ -11,7 +11,7 @@ import { getStateEvent } from '../utils/room';
 export const usePublishedAliases = (room: Room): [string | undefined, string[]] => {
   const aliasContent = useStateEvent(
     room,
-    StateEvent.RoomCanonicalAlias
+    StateEvent.RoomCanonicalAlias,
   )?.getContent<RoomCanonicalAliasEventContent>();
 
   const canonicalAlias = aliasContent?.alias;
@@ -38,7 +38,7 @@ export const useSetMainAlias = (room: Room): ((alias: string | undefined) => Pro
     async (alias: string | undefined) => {
       const content = getStateEvent(
         room,
-        StateEvent.RoomCanonicalAlias
+        StateEvent.RoomCanonicalAlias,
       )?.getContent<RoomCanonicalAliasEventContent>();
 
       const altAliases: string[] = [];
@@ -58,14 +58,14 @@ export const useSetMainAlias = (room: Room): ((alias: string | undefined) => Pro
 
       await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
     },
-    [mx, room]
+    [mx, room],
   );
 
   return mainAlias;
 };
 
 export const usePublishUnpublishAliases = (
-  room: Room
+  room: Room,
 ): {
   publishAliases: (aliases: string[]) => Promise<void>;
   unpublishAliases: (aliases: string[]) => Promise<void>;
@@ -75,7 +75,7 @@ export const usePublishUnpublishAliases = (
     async (aliases: string[]) => {
       const content = getStateEvent(
         room,
-        StateEvent.RoomCanonicalAlias
+        StateEvent.RoomCanonicalAlias,
       )?.getContent<RoomCanonicalAliasEventContent>();
       const altAliases = content?.alt_aliases ?? [];
 
@@ -92,14 +92,14 @@ export const usePublishUnpublishAliases = (
 
       await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
     },
-    [mx, room]
+    [mx, room],
   );
 
   const unpublishAliases = useCallback(
     async (aliases: string[]) => {
       const content = getStateEvent(
         room,
-        StateEvent.RoomCanonicalAlias
+        StateEvent.RoomCanonicalAlias,
       )?.getContent<RoomCanonicalAliasEventContent>();
       const altAliases: string[] = [];
 
@@ -116,7 +116,7 @@ export const usePublishUnpublishAliases = (
 
       await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
     },
-    [mx, room]
+    [mx, room],
   );
 
   return {
@@ -126,7 +126,7 @@ export const usePublishUnpublishAliases = (
 };
 
 export const useLocalAliases = (
-  roomId: string
+  roomId: string,
 ): {
   localAliasesState: AsyncState<string[], MatrixError>;
   addLocalAlias: (alias: string) => Promise<void>;
@@ -139,7 +139,7 @@ export const useLocalAliases = (
     useCallback(async () => {
       const content = await mx.getLocalAliases(roomId);
       return content.aliases;
-    }, [mx, roomId])
+    }, [mx, roomId]),
   );
 
   useEffect(() => {
@@ -151,7 +151,7 @@ export const useLocalAliases = (
       await mx.createAlias(alias, roomId);
       if (alive()) await loadAliases();
     },
-    [mx, roomId, loadAliases, alive]
+    [mx, roomId, loadAliases, alive],
   );
 
   const removeLocalAlias = useCallback(
@@ -159,7 +159,7 @@ export const useLocalAliases = (
       await mx.deleteAlias(alias);
       if (alive()) await loadAliases();
     },
-    [mx, loadAliases, alive]
+    [mx, loadAliases, alive],
   );
 
   return {

src/app/hooks/useRoomCreators.ts

@@ -32,7 +32,7 @@ export const useRoomCreators = (room: Room): Set<string> => {
 
   const creators = useMemo(
     () => (createEvent ? getRoomCreators(createEvent) : new Set<string>()),
-    [createEvent]
+    [createEvent],
   );
 
   return creators;

src/app/hooks/useRoomDirectoryVisibility.ts

@@ -10,7 +10,7 @@ export const useRoomDirectoryVisibility = (roomId: string) => {
     useCallback(async () => {
       const v = await mx.getRoomDirectoryVisibility(roomId);
       return v.visibility === Visibility.Public;
-    }, [mx, roomId])
+    }, [mx, roomId]),
   );
 
   useEffect(() => {
@@ -21,11 +21,11 @@ export const useRoomDirectoryVisibility = (roomId: string) => {
     async (visibility: boolean) => {
       await mx.setRoomDirectoryVisibility(
         roomId,
-        visibility ? Visibility.Public : Visibility.Private
+        visibility ? Visibility.Public : Visibility.Private,
       );
       await loadVisibility();
     },
-    [mx, roomId, loadVisibility]
+    [mx, roomId, loadVisibility],
   );
 
   return {

src/app/hooks/useRoomEvent.ts

@@ -37,7 +37,7 @@ const useFetchEvent = (room: Room, eventId: string) => {
 export const useRoomEvent = (
   room: Room,
   eventId: string,
-  getLocally?: () => MatrixEvent | undefined
+  getLocally?: () => MatrixEvent | undefined,
 ) => {
   const event = useMemo(() => {
     if (getLocally) return getLocally();

src/app/hooks/useRoomEventReaders.ts

@@ -33,7 +33,7 @@ export const useRoomEventReaders = (room: Room, eventId?: string): string[] => {
     const handleLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (
       event,
       r,
-      oldEventId
+      oldEventId,
     ) => {
       // update members on local event id replaced
       // with server generated id

src/app/hooks/useRoomNavigate.ts

@@ -29,7 +29,7 @@ export const useRoomNavigate = () => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
       navigate(getSpacePath(roomIdOrAlias));
     },
-    [mx, navigate]
+    [mx, navigate],
   );
 
   const navigateRoom = useCallback(
@@ -50,7 +50,7 @@ export const useRoomNavigate = () => {
 
         navigate(
           getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId),
-          opts
+          opts,
         );
         return;
       }
@@ -62,7 +62,7 @@ export const useRoomNavigate = () => {
 
       navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
     },
-    [mx, navigate, spaceSelectedId, roomToParents, mDirects, developerTools]
+    [mx, navigate, spaceSelectedId, roomToParents, mDirects, developerTools],
   );
 
   return {

src/app/hooks/useRoomPermissions.ts

@@ -15,7 +15,7 @@ export type RoomPermissionsAPI = {
 
 export const getRoomPermissionsAPI = (
   creators: Set<string>,
-  powerLevels: IPowerLevels
+  powerLevels: IPowerLevels,
 ): RoomPermissionsAPI => {
   const api: RoomPermissionsAPI = {
     event: (type, userId) => {
@@ -49,11 +49,11 @@ export const getRoomPermissionsAPI = (
 
 export const useRoomPermissions = (
   creators: Set<string>,
-  powerLevels: IPowerLevels
+  powerLevels: IPowerLevels,
 ): RoomPermissionsAPI => {
   const api: RoomPermissionsAPI = useMemo(
     () => getRoomPermissionsAPI(creators, powerLevels),
-    [creators, powerLevels]
+    [creators, powerLevels],
   );
 
   return api;

src/app/hooks/useRoomReadPositions.ts

@@ -8,7 +8,7 @@ import { reactionOrEditEvent } from '../utils/room';
 function nearestRenderableId(
   liveEvents: MatrixEvent[],
   eventIndex: Map<string, number>,
-  evtId: string
+  evtId: string,
 ): string | null {
   const idx = eventIndex.get(evtId) ?? -1;
   if (idx === -1) return null;

src/app/hooks/useRoomTypingMembers.ts

@@ -18,7 +18,7 @@ const equalTypingMembers = (x: TypingReceipt[], y: TypingReceipt[]): boolean =>
 export const useRoomTypingMember = (roomId: string) => {
   const selector = useCallback(
     (roomToTyping: IRoomIdToTypingMembers) => roomToTyping.get(roomId) ?? [],
-    [roomId]
+    [roomId],
   );
 
   const typing = useAtomValue(selectAtom(roomIdToTypingMembersAtom, selector, equalTypingMembers));

src/app/hooks/useRoomsNotificationPreferences.ts

@@ -19,7 +19,7 @@ export type RoomsNotificationPreferences = {
 };
 
 const RoomsNotificationPreferencesContext = createContext<RoomsNotificationPreferences | null>(
-  null
+  null,
 );
 export const RoomsNotificationPreferencesProvider = RoomsNotificationPreferencesContext.Provider;
 
@@ -78,7 +78,7 @@ export enum RoomNotificationMode {
 
 export const getRoomNotificationMode = (
   preferences: RoomsNotificationPreferences,
-  roomId: string
+  roomId: string,
 ): RoomNotificationMode => {
   if (preferences.mute.has(roomId)) {
     return RoomNotificationMode.Mute;
@@ -95,7 +95,7 @@ export const getRoomNotificationMode = (
 
 export const useRoomNotificationPreference = (
   preferences: RoomsNotificationPreferences,
-  roomId: string
+  roomId: string,
 ): RoomNotificationMode =>
   useMemo(() => getRoomNotificationMode(preferences, roomId), [preferences, roomId]);
 
@@ -111,7 +111,7 @@ export const setRoomNotificationPreference = async (
   mx: MatrixClient,
   roomId: string,
   mode: RoomNotificationMode,
-  previousMode: RoomNotificationMode
+  previousMode: RoomNotificationMode,
 ): Promise<void> => {
   // remove the old preference
   if (
@@ -158,8 +158,8 @@ export const useSetRoomNotificationPreference = (roomId: string) => {
     useCallback(
       (mode: RoomNotificationMode, previousMode: RoomNotificationMode) =>
         setRoomNotificationPreference(mx, roomId, mode, previousMode),
-      [mx, roomId]
-    )
+      [mx, roomId],
+    ),
   );
 
   return {

src/app/hooks/useScreenSize.ts

@@ -21,7 +21,7 @@ export const useScreenSize = (): ScreenSize => {
 
   useElementSizeObserver(
     useCallback(() => document.body, []),
-    useCallback((width) => setSize(getScreenSize(width)), [])
+    useCallback((width) => setSize(getScreenSize(width)), []),
   );
 
   return size;

src/app/hooks/useSidebarItems.ts

@@ -22,7 +22,7 @@ export type InCinnySpacesContent = {
 export const parseSidebar = (
   mx: MatrixClient,
   orphanSpaces: string[],
-  content?: InCinnySpacesContent
+  content?: InCinnySpacesContent,
 ) => {
   const sidebar = content?.sidebar ?? content?.shortcut ?? [];
   const orphans = new Set(orphanSpaces);
@@ -64,14 +64,14 @@ export const parseSidebar = (
 };
 
 export const useSidebarItems = (
-  orphanSpaces: string[]
+  orphanSpaces: string[],
 ): [SidebarItems, Dispatch<SetStateAction<SidebarItems>>] => {
   const mx = useMatrixClient();
 
   const [sidebarItems, setSidebarItems] = useState(() => {
     const inCinnySpacesContent = getAccountData(
       mx,
-      AccountDataEvent.CinnySpaces
+      AccountDataEvent.CinnySpaces,
     )?.getContent<InCinnySpacesContent>();
     return parseSidebar(mx, orphanSpaces, inCinnySpacesContent);
   });
@@ -79,7 +79,7 @@ export const useSidebarItems = (
   useEffect(() => {
     const inCinnySpacesContent = getAccountData(
       mx,
-      AccountDataEvent.CinnySpaces
+      AccountDataEvent.CinnySpaces,
     )?.getContent<InCinnySpacesContent>();
     setSidebarItems(parseSidebar(mx, orphanSpaces, inCinnySpacesContent));
   }, [mx, orphanSpaces]);
@@ -93,8 +93,8 @@ export const useSidebarItems = (
           setSidebarItems(parseSidebar(mx, orphanSpaces, newContent));
         }
       },
-      [mx, orphanSpaces]
-    )
+      [mx, orphanSpaces],
+    ),
   );
 
   return [sidebarItems, setSidebarItems];
@@ -124,7 +124,7 @@ export const sidebarItemWithout = (items: SidebarItems, roomId: string) => {
 
 export const makeCinnySpacesContent = (
   mx: MatrixClient,
-  items: SidebarItems
+  items: SidebarItems,
 ): InCinnySpacesContent => {
   const currentInSpaces =
     getAccountData(mx, AccountDataEvent.CinnySpaces)?.getContent<InCinnySpacesContent>() ?? {};

src/app/hooks/useSpaceHierarchy.ts

@@ -38,7 +38,7 @@ const hierarchyItemByOrder: SortFunc<HierarchyItem> = (a, b) =>
 const getHierarchySpaces = (
   rootSpaceId: string,
   getRoom: GetRoomCallback,
-  spaceRooms: Set<string>
+  spaceRooms: Set<string>,
 ): HierarchyItemSpace[] => {
   const rootSpaceItem: HierarchyItemSpace = {
     roomId: rootSpaceId,
@@ -97,7 +97,7 @@ const getSpaceHierarchy = (
   rootSpaceId: string,
   spaceRooms: Set<string>,
   getRoom: (roomId: string) => Room | undefined,
-  closedCategory: (spaceId: string) => boolean
+  closedCategory: (spaceId: string) => boolean,
 ): SpaceHierarchy[] => {
   const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(rootSpaceId, getRoom, spaceRooms);
 
@@ -138,13 +138,13 @@ export const useSpaceHierarchy = (
   spaceId: string,
   spaceRooms: Set<string>,
   getRoom: (roomId: string) => Room | undefined,
-  closedCategory: (spaceId: string) => boolean
+  closedCategory: (spaceId: string) => boolean,
 ): SpaceHierarchy[] => {
   const mx = useMatrixClient();
   const roomToParents = useAtomValue(roomToParentsAtom);
 
   const [hierarchyAtom] = useState(() =>
-    atom(getSpaceHierarchy(spaceId, spaceRooms, getRoom, closedCategory))
+    atom(getSpaceHierarchy(spaceId, spaceRooms, getRoom, closedCategory)),
   );
   const [hierarchy, setHierarchy] = useAtom(hierarchyAtom);
 
@@ -164,8 +164,8 @@ export const useSpaceHierarchy = (
           setHierarchy(getSpaceHierarchy(spaceId, spaceRooms, getRoom, closedCategory));
         }
       },
-      [spaceId, roomToParents, setHierarchy, spaceRooms, getRoom, closedCategory]
-    )
+      [spaceId, roomToParents, setHierarchy, spaceRooms, getRoom, closedCategory],
+    ),
   );
 
   return hierarchy;
@@ -175,7 +175,7 @@ const getSpaceJoinedHierarchy = (
   rootSpaceId: string,
   getRoom: GetRoomCallback,
   excludeRoom: (parentId: string, roomId: string) => boolean,
-  sortRoomItems: (parentId: string, items: HierarchyItem[]) => HierarchyItem[]
+  sortRoomItems: (parentId: string, items: HierarchyItem[]) => HierarchyItem[],
 ): HierarchyItem[] => {
   const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(rootSpaceId, getRoom, new Set());
 
@@ -221,7 +221,7 @@ export const useSpaceJoinedHierarchy = (
   spaceId: string,
   getRoom: GetRoomCallback,
   excludeRoom: (parentId: string, roomId: string) => boolean,
-  sortByActivity: (spaceId: string) => boolean
+  sortByActivity: (spaceId: string) => boolean,
 ): HierarchyItem[] => {
   const mx = useMatrixClient();
   const roomToParents = useAtomValue(roomToParentsAtom);
@@ -235,11 +235,11 @@ export const useSpaceJoinedHierarchy = (
       items.sort(hierarchyItemTs).sort(hierarchyItemByOrder);
       return items;
     },
-    [mx, sortByActivity]
+    [mx, sortByActivity],
   );
 
   const [hierarchyAtom] = useState(() =>
-    atom(getSpaceJoinedHierarchy(spaceId, getRoom, excludeRoom, sortRoomItems))
+    atom(getSpaceJoinedHierarchy(spaceId, getRoom, excludeRoom, sortRoomItems)),
   );
   const [hierarchy, setHierarchy] = useAtom(hierarchyAtom);
 
@@ -259,8 +259,8 @@ export const useSpaceJoinedHierarchy = (
           setHierarchy(getSpaceJoinedHierarchy(spaceId, getRoom, excludeRoom, sortRoomItems));
         }
       },
-      [spaceId, roomToParents, setHierarchy, getRoom, excludeRoom, sortRoomItems]
-    )
+      [spaceId, roomToParents, setHierarchy, getRoom, excludeRoom, sortRoomItems],
+    ),
   );
 
   return hierarchy;
@@ -276,7 +276,7 @@ export type FetchSpaceHierarchyLevelData = {
 };
 export const useFetchSpaceHierarchyLevel = (
   roomId: string,
-  enable: boolean
+  enable: boolean,
 ): FetchSpaceHierarchyLevelData => {
   const mx = useMatrixClient();
   const pageNoRef = useRef(0);
@@ -287,7 +287,7 @@ export const useFetchSpaceHierarchyLevel = (
     string | undefined
   > = useCallback(
     ({ pageParam }) => mx.getRoomHierarchy(roomId, PER_PAGE_COUNT, 1, false, pageParam),
-    [roomId, mx]
+    [roomId, mx],
   );
 
   const queryResponse = useInfiniteQuery({

src/app/hooks/useStateEvent.ts

@@ -20,13 +20,13 @@ export const useStateEvent = (room: Room, eventType: StateEvent, stateKey = '')
           forceUpdate();
         }
       },
-      [room, eventType, stateKey, forceUpdate]
-    )
+      [room, eventType, stateKey, forceUpdate],
+    ),
   );
 
   return useMemo(
     () => getStateEvent(room, eventType, stateKey),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [room, eventType, stateKey, updateCount]
+    [room, eventType, stateKey, updateCount],
   );
 };

src/app/hooks/useStateEventCallback.ts

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 export type StateEventCallback = (
   event: MatrixEvent,
   state: RoomState,
-  lastStateEvent: MatrixEvent | null
+  lastStateEvent: MatrixEvent | null,
 ) => void;
 
 export const useStateEventCallback = (mx: MatrixClient, onStateEvent: StateEventCallback) => {

src/app/hooks/useSyncState.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 export const useSyncState = (
   mx: MatrixClient | undefined,
-  onChange: ClientEventHandlerMap[ClientEvent.Sync]
+  onChange: ClientEventHandlerMap[ClientEvent.Sync],
 ): void => {
   useEffect(() => {
     mx?.on(ClientEvent.Sync, onChange);

src/app/hooks/useTextAreaCodeEditor.ts

@@ -6,7 +6,7 @@ import { GetTarget } from '../plugins/text-area/type';
 
 export const useTextAreaCodeEditor = (
   textAreaRef: MutableRefObject<HTMLTextAreaElement | null>,
-  intentSpaceCount: number
+  intentSpaceCount: number,
 ) => {
   const getTarget: GetTarget = useCallback(() => {
     const target = textAreaRef.current;

src/app/hooks/useTextAreaIntent.ts

@@ -5,7 +5,7 @@ import { Cursor, Intent, Operations, TextArea } from '../plugins/text-area';
 export const useTextAreaIntentHandler = (
   textArea: TextArea,
   operations: Operations,
-  intent: Intent
+  intent: Intent,
 ) => {
   const handler: KeyboardEventHandler<HTMLTextAreaElement> = useCallback(
     (evt) => {
@@ -51,7 +51,7 @@ export const useTextAreaIntentHandler = (
         operations.select(intent.addPreviousLine(cursor));
       }
     },
-    [textArea, operations, intent]
+    [textArea, operations, intent],
   );
 
   return handler;

src/app/hooks/useTheme.ts

@@ -73,13 +73,13 @@ export const useThemeNames = (): Record<string, string> =>
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
     }),
-    []
+    [],
   );
 
 export const useSystemThemeKind = (): ThemeKind => {
   const darkModeQueryList = useMemo(() => window.matchMedia('(prefers-color-scheme: dark)'), []);
   const [themeKind, setThemeKind] = useState<ThemeKind>(
-    darkModeQueryList.matches ? ThemeKind.Dark : ThemeKind.Light
+    darkModeQueryList.matches ? ThemeKind.Dark : ThemeKind.Light,
   );
 
   useEffect(() => {
@@ -112,8 +112,8 @@ export const useActiveTheme = (): Theme => {
 
   const selectedTheme =
     systemThemeKind === ThemeKind.Dark
-      ? themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme
-      : themes.find((theme) => theme.id === lightThemeId) ?? LightTheme;
+      ? (themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme)
+      : (themes.find((theme) => theme.id === lightThemeId) ?? LightTheme);
 
   return selectedTheme;
 };

src/app/hooks/useThrottle.ts

@@ -9,7 +9,7 @@ export type ThrottleCallback<T extends unknown[]> = (...args: T) => void;
 
 export function useThrottle<T extends unknown[]>(
   callback: ThrottleCallback<T>,
-  options?: ThrottleOptions
+  options?: ThrottleOptions,
 ): ThrottleCallback<T> {
   const timeoutIdRef = useRef<number>();
   const argsRef = useRef<T>();
@@ -34,7 +34,7 @@ export function useThrottle<T extends unknown[]>(
         timeoutIdRef.current = undefined;
       }, wait);
     },
-    [callback, wait, immediate]
+    [callback, wait, immediate],
   );
 
   return debounceCallback;

src/app/hooks/useTimeoutToggle.ts

@@ -30,7 +30,7 @@ export function useTimeoutToggle(duration = 1500, initial = false): [boolean, ()
     () => () => {
       clear();
     },
-    []
+    [],
   );
 
   return [active, trigger];

src/app/hooks/useUIAFlows.ts

@@ -76,7 +76,7 @@ export const useUIAFlow = (authData: IAuthData, uiaFlow: UIAFlow): UIAFlowInterf
 
   const hasStage = useCallback(
     (stageType: string): boolean => uiaFlow.stages.includes(stageType),
-    [uiaFlow]
+    [uiaFlow],
   );
 
   const getStageInfo = useCallback(
@@ -85,7 +85,7 @@ export const useUIAFlow = (authData: IAuthData, uiaFlow: UIAFlow): UIAFlowInterf
 
       return params[stageType];
     },
-    [hasStage, params]
+    [hasStage, params],
   );
 
   return {
@@ -96,7 +96,7 @@ export const useUIAFlow = (authData: IAuthData, uiaFlow: UIAFlow): UIAFlowInterf
 };
 
 export const useUIAMatrixError = (
-  error?: MatrixError
+  error?: MatrixError,
 ): [undefined, undefined] | [IAuthData, undefined] | [undefined, MatrixError] => {
   if (!error) return [undefined, undefined];
   if (error.httpStatus === 401) return [error.data as IAuthData, undefined];

src/app/hooks/useUserPresence.ts

@@ -54,5 +54,5 @@ export const usePresenceLabel = (): Record<Presence, string> =>
       [Presence.Unavailable]: 'Busy',
       [Presence.Offline]: 'Away',
     }),
-    []
+    [],
   );

src/app/hooks/useUserProfile.ts

@@ -36,7 +36,7 @@ export const useUserProfile = (userId: string): UserProfile => {
       setProfile({
         avatarUrl: info.avatar_url,
         displayName: info.displayname,
-      })
+      }),
     );
 
     user?.on(UserEvent.AvatarUrl, onAvatarChange);

src/app/hooks/useUserTrustStatusChange.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useMatrixClient } from './useMatrixClient';
 
 export const useUserTrustStatusChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.UserTrustStatusChanged]
+  onChange: CryptoEventHandlerMap[CryptoEvent.UserTrustStatusChanged],
 ) => {
   const mx = useMatrixClient();
 

src/app/hooks/useVerificationRequest.ts

@@ -13,7 +13,7 @@ import {
 import { useMatrixClient } from './useMatrixClient';
 
 export const useVerificationRequestReceived = (
-  onRequest: CryptoEventHandlerMap[CryptoEvent.VerificationRequestReceived]
+  onRequest: CryptoEventHandlerMap[CryptoEvent.VerificationRequestReceived],
 ) => {
   const mx = useMatrixClient();
 
@@ -27,7 +27,7 @@ export const useVerificationRequestReceived = (
 
 export const useVerificationRequestChange = (
   request: VerificationRequest,
-  onChange: VerificationRequestEventHandlerMap[VerificationRequestEvent.Change]
+  onChange: VerificationRequestEventHandlerMap[VerificationRequestEvent.Change],
 ) => {
   useEffect(() => {
     request.on(VerificationRequestEvent.Change, onChange);
@@ -44,7 +44,7 @@ export const useVerificationRequestPhase = (request: VerificationRequest): Verif
     request,
     useCallback(() => {
       setPhase(request.phase);
-    }, [request])
+    }, [request]),
   );
 
   return phase;
@@ -52,7 +52,7 @@ export const useVerificationRequestPhase = (request: VerificationRequest): Verif
 
 export const useVerifierCancel = (
   verifier: Verifier,
-  onCallback: VerifierEventHandlerMap[VerifierEvent.Cancel]
+  onCallback: VerifierEventHandlerMap[VerifierEvent.Cancel],
 ) => {
   useEffect(() => {
     verifier.on(VerifierEvent.Cancel, onCallback);
@@ -64,7 +64,7 @@ export const useVerifierCancel = (
 
 export const useVerifierShowSas = (
   verifier: Verifier,
-  onCallback: VerifierEventHandlerMap[VerifierEvent.ShowSas]
+  onCallback: VerifierEventHandlerMap[VerifierEvent.ShowSas],
 ) => {
   useEffect(() => {
     verifier.on(VerifierEvent.ShowSas, onCallback);
@@ -76,7 +76,7 @@ export const useVerifierShowSas = (
 
 export const useVerifierShowReciprocateQr = (
   verifier: Verifier,
-  onCallback: VerifierEventHandlerMap[VerifierEvent.ShowReciprocateQr]
+  onCallback: VerifierEventHandlerMap[VerifierEvent.ShowReciprocateQr],
 ) => {
   useEffect(() => {
     verifier.on(VerifierEvent.ShowReciprocateQr, onCallback);

src/app/hooks/useVirtualPaginator.ts

@@ -78,7 +78,7 @@ const getDropIndex = (
   range: ItemRange,
   dropDirection: Direction,
   getItemElement: (index: number) => HTMLElement | undefined,
-  pageThreshold = 1
+  pageThreshold = 1,
 ): number | undefined => {
   const fromBackward = dropDirection === Direction.Backward;
   const items = fromBackward ? generateItems(range) : generateItems(range).reverse();
@@ -115,7 +115,7 @@ type RestoreAnchorData = [number | undefined, HTMLElement | undefined];
 const getRestoreAnchor = (
   range: ItemRange,
   getItemElement: (index: number) => HTMLElement | undefined,
-  direction: Direction
+  direction: Direction,
 ): RestoreAnchorData => {
   let scrollAnchorEl: HTMLElement | undefined;
   const scrollAnchorItem = (
@@ -145,7 +145,7 @@ const getRestoreScrollData = (scrollTop: number, restoreAnchorData: RestoreAncho
 
 const useObserveAnchorHandle = (
   intersectionObserver: ReturnType<typeof useIntersectionObserver>,
-  anchorType: Direction
+  anchorType: Direction,
 ): HandleObserveAnchor =>
   useMemo<HandleObserveAnchor>(() => {
     let anchor: HTMLElement | null = null;
@@ -160,7 +160,7 @@ const useObserveAnchorHandle = (
   }, [intersectionObserver, anchorType]);
 
 export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
-  options: VirtualPaginatorOptions<TScrollElement>
+  options: VirtualPaginatorOptions<TScrollElement>,
 ): VirtualPaginator => {
   const { count, limit, range, onRangeChange, getScrollElement, getItemElement, onEnd } = options;
 
@@ -224,7 +224,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
       });
       return true;
     },
-    [getScrollElement]
+    [getScrollElement],
   );
 
   const scrollToItem = useCallback<ScrollToItem>(
@@ -261,7 +261,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
       }
       return scrollToElement(itemElement, opts);
     },
-    [getScrollElement, scrollToElement, getItemElement, onRangeChange]
+    [getScrollElement, scrollToElement, getItemElement, onRangeChange],
   );
 
   const paginate = useCallback(
@@ -279,7 +279,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
         if (scrollEl) {
           restoreScrollRef.current = getRestoreScrollData(
             scrollEl.scrollTop,
-            getRestoreAnchor({ start, end }, getItemElement, Direction.Backward)
+            getRestoreAnchor({ start, end }, getItemElement, Direction.Backward),
           );
         }
         if (scrollEl) {
@@ -297,7 +297,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
         if (scrollEl) {
           restoreScrollRef.current = getRestoreScrollData(
             scrollEl.scrollTop,
-            getRestoreAnchor({ start, end }, getItemElement, Direction.Forward)
+            getRestoreAnchor({ start, end }, getItemElement, Direction.Forward),
           );
         }
         end = Math.min(end + currentLimit, currentCount);
@@ -312,25 +312,25 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
         end,
       });
     },
-    [getScrollElement, getItemElement, onEnd, onRangeChange]
+    [getScrollElement, getItemElement, onEnd, onRangeChange],
   );
 
   const handlePaginatorElIntersection: OnIntersectionCallback = useCallback(
     (entries) => {
       const anchorB = entries.find(
-        (entry) => entry.target.getAttribute(PAGINATOR_ANCHOR_ATTR) === Direction.Backward
+        (entry) => entry.target.getAttribute(PAGINATOR_ANCHOR_ATTR) === Direction.Backward,
       );
       if (anchorB?.isIntersecting) {
         paginate(Direction.Backward);
       }
       const anchorF = entries.find(
-        (entry) => entry.target.getAttribute(PAGINATOR_ANCHOR_ATTR) === Direction.Forward
+        (entry) => entry.target.getAttribute(PAGINATOR_ANCHOR_ATTR) === Direction.Forward,
       );
       if (anchorF?.isIntersecting) {
         paginate(Direction.Forward);
       }
     },
-    [paginate]
+    [paginate],
   );
 
   const intersectionObserver = useIntersectionObserver(
@@ -339,8 +339,8 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
       () => ({
         root: getScrollElement(),
       }),
-      [getScrollElement]
-    )
+      [getScrollElement],
+    ),
   );
 
   const observeBackAnchor = useObserveAnchorHandle(intersectionObserver, Direction.Backward);
@@ -396,10 +396,10 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
     const scrollElement = getScrollElement();
     if (!scrollElement) return;
     const backAnchor = scrollElement.querySelector(
-      `[${PAGINATOR_ANCHOR_ATTR}="${Direction.Backward}"]`
+      `[${PAGINATOR_ANCHOR_ATTR}="${Direction.Backward}"]`,
     ) as HTMLElement | null;
     const frontAnchor = scrollElement.querySelector(
-      `[${PAGINATOR_ANCHOR_ATTR}="${Direction.Forward}"]`
+      `[${PAGINATOR_ANCHOR_ATTR}="${Direction.Forward}"]`,
     ) as HTMLElement | null;
 
     if (backAnchor && isIntersectingScrollView(scrollElement, backAnchor)) {