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/features/add-existing/AddExisting.tsx

@@ -97,13 +97,13 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
     (rId) => getRoom(rId)?.name ?? rId,
-    [getRoom]
+    [getRoom],
   );
 
   const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
     allItems,
     getRoomNameStr,
-    SEARCH_OPTS
+    SEARCH_OPTS,
   );
   const queryHighlighRegex = searchResult?.query
     ? makeHighlightRegex(searchResult.query.split(' '))
@@ -142,12 +142,12 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
               suggested: false,
               via,
             },
-            room.roomId
+            room.roomId,
           );
         });
       },
-      [mx, parentId]
-    )
+      [mx, parentId],
+    ),
   );
   const applyingChanges = applyState.status === AsyncStatus.Loading;
 

src/app/features/call-status/CallControl.tsx

@@ -163,7 +163,7 @@ export function CallControl({
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
   const setCallEmbed = useSetAtom(callEmbedAtom);
   const [hangupState, hangup] = useAsyncCallback(
-    useCallback(() => callEmbed.hangup(), [callEmbed])
+    useCallback(() => callEmbed.hangup(), [callEmbed]),
   );
   const exiting =
     hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;

src/app/features/call-status/LiveChip.tsx

@@ -77,7 +77,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
                       getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
                     const avatarMxc = getMemberAvatarMxc(room, userId);
                     const avatarUrl = avatarMxc
-                      ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+                      ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
                       : undefined;
 
                     return (
@@ -93,7 +93,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
                             undefined,
                             userId,
                             getMouseEventCords(evt.nativeEvent),
-                            'Right'
+                            'Right',
                           )
                         }
                         before={

src/app/features/call-status/MemberGlance.tsx

@@ -34,7 +34,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
         const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
         const avatarMxc = getMemberAvatarMxc(room, userId);
         const avatarUrl = avatarMxc
-          ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+          ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
           : undefined;
 
         return (
@@ -52,7 +52,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
                 undefined,
                 userId,
                 getMouseEventCords(evt.nativeEvent),
-                'Top'
+                'Top',
               )
             }
           >

src/app/features/call-status/MemberSpeaking.tsx

@@ -10,7 +10,7 @@ type MemberSpeakingProps = {
 };
 export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) {
   const speakingNames = Array.from(speakers).map(
-    (userId) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId
+    (userId) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId,
   );
   return (
     <Box alignItems="Center" gap="100">

src/app/features/call/CallControls.tsx

@@ -46,11 +46,11 @@ export function CallControls({ callEmbed }: CallControlsProps) {
       if (!element) return;
       setCompact(element.clientWidth < 500);
     }, []),
-    useCallback(() => controlRef.current, [])
+    useCallback(() => controlRef.current, []),
   );
 
   const { microphone, video, sound, screenshare, spotlight } = useCallControlState(
-    callEmbed.control
+    callEmbed.control,
   );
 
   const [cords, setCords] = useState<RectCords>();
@@ -172,7 +172,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   }, [pttMode, pttKey, callEmbed]);
 
   const [hangupState, hangup] = useAsyncCallback(
-    useCallback(() => callEmbed.hangup(), [callEmbed])
+    useCallback(() => callEmbed.hangup(), [callEmbed]),
   );
   const exiting =
     hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;

src/app/features/call/CallMemberCard.tsx

@@ -34,7 +34,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
   const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
   const avatarMxc = getMemberAvatarMxc(room, userId);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
     : undefined;
 
   const audioOnly =
@@ -53,7 +53,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
           undefined,
           userId,
           getMouseEventCords(evt.nativeEvent),
-          'Right'
+          'Right',
         )
       }
     >

src/app/features/call/CallView.tsx

@@ -86,7 +86,7 @@ function CallPrescreen() {
   const permissions = useRoomPermissions(creators, powerLevels);
   const hasPermission = permissions.stateEvent(
     StateEvent.GroupCallMemberPrefix,
-    mx.getSafeUserId()
+    mx.getSafeUserId(),
   );
 
   const callSession = useCallSession(room);

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

@@ -60,7 +60,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
     async (type, content) => {
       await mx.setRoomAccountData(room.roomId, type, content);
     },
-    [mx, room.roomId]
+    [mx, room.roomId],
   );
 
   if (accountDataType !== undefined) {

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

@@ -40,7 +40,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
   const [jsonError, setJSONError] = useState<SyntaxError>();
   const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
     textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT
+    EDITOR_INTENT_SPACE_COUNT,
   );
 
   const [submitState, submit] = useAsyncCallback<
@@ -55,8 +55,8 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
         }
         return mx.sendEvent(room.roomId, evtType as any, evtContent);
       },
-      [mx, room]
-    )
+      [mx, room],
+    ),
   );
   const submitting = submitState.status === AsyncStatus.Loading;
 

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

@@ -47,21 +47,21 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi
 
   const defaultContentStr = useMemo(
     () => JSON.stringify(content, undefined, EDITOR_INTENT_SPACE_COUNT),
-    [content]
+    [content],
   );
 
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [jsonError, setJSONError] = useState<SyntaxError>();
   const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
     textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT
+    EDITOR_INTENT_SPACE_COUNT,
   );
 
   const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
     useCallback(
       (c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
-      [mx, room, type, stateKey]
-    )
+      [mx, room, type, stateKey],
+    ),
   );
   const submitting = submitState.status === AsyncStatus.Loading;
 

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -59,8 +59,8 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
         };
         await mx.sendStateEvent(roomId, StateEvent.PoniesRoomEmotes as any, content, stateKey);
       },
-      [mx, roomId]
-    )
+      [mx, roomId],
+    ),
   );
 
   const creating = addState.status === AsyncStatus.Loading;
@@ -166,7 +166,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
         // eslint-disable-next-line no-await-in-loop
         await mx.sendStateEvent(room.roomId, StateEvent.PoniesRoomEmotes as any, {}, addr.stateKey);
       }
-    }, [mx, room, removedPacks])
+    }, [mx, room, removedPacks]),
   );
   const applyingChanges = applyState.status === AsyncStatus.Loading;
 

src/app/features/common-settings/general/RoomAddress.tsx

@@ -44,7 +44,7 @@ export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesPr
 
   const canEditCanonical = permissions.stateEvent(
     StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    mx.getSafeUserId(),
   );
 
   const [canonicalAlias, publishedAliases] = usePublishedAliases(room);
@@ -241,8 +241,8 @@ function LocalAddressesList({
           await removeLocalAlias(alias);
         }
       },
-      [removeLocalAlias]
-    )
+      [removeLocalAlias],
+    ),
   );
   const [publishState, publish] = useAsyncCallback(publishAliases);
   const [unpublishState, unpublish] = useAsyncCallback(unpublishAliases);
@@ -365,7 +365,7 @@ export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissio
 
   const canEditCanonical = permissions.stateEvent(
     StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    mx.getSafeUserId(),
   );
 
   const [expand, setExpand] = useState(false);

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -49,7 +49,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
       await mx.sendStateEvent(room.roomId, StateEvent.RoomEncryption as any, {
         algorithm: ROOM_ENC_ALGO,
       });
-    }, [mx, room.roomId])
+    }, [mx, room.roomId]),
   );
 
   const enabling = enableState.status === AsyncStatus.Loading;

src/app/features/common-settings/general/RoomHistoryVisibility.tsx

@@ -34,7 +34,7 @@ const useVisibilityStr = () =>
       [HistoryVisibility.Shared]: 'All Messages',
       [HistoryVisibility.WorldReadable]: 'All Messages (Guests)',
     }),
-    []
+    [],
   );
 
 const useVisibilityMenu = () =>
@@ -45,7 +45,7 @@ const useVisibilityMenu = () =>
       HistoryVisibility.Joined,
       HistoryVisibility.WorldReadable,
     ],
-    []
+    [],
   );
 
 type RoomHistoryVisibilityProps = {
@@ -78,8 +78,8 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
         };
         await mx.sendStateEvent(room.roomId, StateEvent.RoomHistoryVisibility as any, content);
       },
-      [mx, room.roomId]
-    )
+      [mx, room.roomId],
+    ),
   );
   const submitting = submitState.status === AsyncStatus.Loading;
 

src/app/features/common-settings/general/RoomJoinRules.tsx

@@ -113,8 +113,8 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
         if (allow.length > 0) c.allow = allow;
         await mx.sendStateEvent(room.roomId, StateEvent.RoomJoinRules as any, c);
       },
-      [mx, room, space, subspaces, roomIdToParents]
-    )
+      [mx, room, space, subspaces, roomIdToParents],
+    ),
   );
 
   const submitting = submitState.status === AsyncStatus.Loading;

src/app/features/common-settings/general/RoomProfile.tsx

@@ -67,7 +67,7 @@ export function RoomProfileEdit({
   const [roomAvatar, setRoomAvatar] = useState(avatar);
 
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication) ?? undefined
+    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication) ?? undefined)
     : undefined;
 
   const [imageFile, setImageFile] = useState<File>();
@@ -104,8 +104,8 @@ export function RoomProfileEdit({
           await mx.sendStateEvent(room.roomId, StateEvent.RoomTopic as any, { topic: roomTopic });
         }
       },
-      [mx, room.roomId]
-    )
+      [mx, room.roomId],
+    ),
   );
   const submitting = submitState.status === AsyncStatus.Loading;
 
@@ -128,7 +128,7 @@ export function RoomProfileEdit({
     submit(
       roomAvatar === avatar ? undefined : roomAvatar || null,
       roomName === name ? undefined : roomName,
-      roomTopic === topic ? undefined : roomTopic
+      roomTopic === topic ? undefined : roomTopic,
     ).then(() => {
       if (alive()) {
         onClose();
@@ -280,7 +280,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
   const canEdit = canEditAvatar || canEditName || canEditTopic;
 
   const avatarUrl = avatar
-    ? mxcUrlToHttp(mx, avatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, avatar, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const [edit, setEdit] = useState(false);

src/app/features/common-settings/general/RoomPublish.tsx

@@ -23,7 +23,7 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
 
   const canEditCanonical = permissions.stateEvent(
     StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    mx.getSafeUserId(),
   );
   const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
   const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -66,8 +66,8 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
           additional_creators: newAdditionalCreators,
         });
       },
-      [mx, room]
-    )
+      [mx, room],
+    ),
   );
 
   const upgrading = upgradeState.status === AsyncStatus.Loading;
@@ -170,14 +170,14 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const createContent = useStateEvent(
     room,
-    StateEvent.RoomCreate
+    StateEvent.RoomCreate,
   )?.getContent<IRoomCreateContent>();
   const roomVersion = createContent?.room_version ?? '1';
   const predecessorRoomId = createContent?.predecessor?.room_id;
 
   const tombstoneContent = useStateEvent(
     room,
-    StateEvent.RoomTombstone
+    StateEvent.RoomTombstone,
   )?.getContent<RoomTombstoneEventContent>();
   const replacementRoom = tombstoneContent?.replacement_room;
 

src/app/features/common-settings/members/Members.tsx

@@ -105,13 +105,13 @@ export function Members({ requestClose }: MembersProps) {
         .filter(membershipFilter.filterFn)
         .sort(memberSort.sortFn)
         .sort(memberPowerSort),
-    [members, membershipFilter, memberSort, memberPowerSort]
+    [members, membershipFilter, memberSort, memberPowerSort],
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
     sortedMembers,
     getRoomMemberStr,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
   if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
 
@@ -130,9 +130,9 @@ export function Members({ requestClose }: MembersProps) {
         if (evt.target.value) search(evt.target.value);
         else resetSearch();
       },
-      [search, resetSearch]
+      [search, resetSearch],
     ),
-    { wait: 200 }
+    { wait: 200 },
   );
 
   const handleSearchReset = () => {
@@ -225,7 +225,7 @@ export function Members({ requestClose }: MembersProps) {
                         onClick={
                           ((evt) =>
                             setAnchor(
-                              evt.currentTarget.getBoundingClientRect()
+                              evt.currentTarget.getBoundingClientRect(),
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="SurfaceVariant"
@@ -257,7 +257,7 @@ export function Members({ requestClose }: MembersProps) {
                         onClick={
                           ((evt) =>
                             setAnchor(
-                              evt.currentTarget.getBoundingClientRect()
+                              evt.currentTarget.getBoundingClientRect(),
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="SurfaceVariant"

src/app/features/common-settings/permissions/PermissionGroups.tsx

@@ -42,7 +42,7 @@ export function PermissionGroups({
   const maxPower = useMemo(() => Math.max(...getPowers(powerLevelTags)), [powerLevelTags]);
 
   const [permissionUpdate, setPermissionUpdate] = useState<Map<PermissionLocation, number>>(
-    new Map()
+    new Map(),
   );
 
   useEffect(() => {
@@ -54,7 +54,7 @@ export function PermissionGroups({
   const handleChangePermission = (
     location: PermissionLocation,
     newPower: number,
-    currentPower: number
+    currentPower: number,
   ) => {
     setPermissionUpdate((p) => {
       const up: typeof p = new Map();
@@ -77,16 +77,16 @@ export function PermissionGroups({
           group.items.forEach((item) => {
             const power = getPermissionPower(powerLevels, item.location);
             applyPermissionPower(draftPowerLevels, item.location, power);
-          })
+          }),
         );
         permissionUpdate.forEach((power, location) =>
-          applyPermissionPower(draftPowerLevels, location, power)
+          applyPermissionPower(draftPowerLevels, location, power),
         );
 
         return draftPowerLevels;
       });
       await mx.sendStateEvent(room.roomId, StateEvent.RoomPowerLevels as any, editedPowerLevels);
-    }, [mx, room, powerLevels, permissionUpdate, permissionGroups])
+    }, [mx, room, powerLevels, permissionUpdate, permissionGroups]),
   );
 
   const resetChanges = useCallback(() => {

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -228,7 +228,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
                         onClick={
                           ((evt) =>
                             setCords(
-                              evt.currentTarget.getBoundingClientRect()
+                              evt.currentTarget.getBoundingClientRect(),
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         type="button"
@@ -324,7 +324,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
         return editedTags;
       });
     },
-    [powerLevelTags]
+    [powerLevelTags],
   );
 
   const [applyState, applyChanges] = useAsyncCallback(
@@ -334,7 +334,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
         delete content[power];
       });
       await mx.sendStateEvent(room.roomId, StateEvent.PowerLevelTags as any, content);
-    }, [mx, room, powerLevelTags, editedPowerTags, deleted])
+    }, [mx, room, powerLevelTags, editedPowerTags, deleted]),
   );
 
   const resetChanges = useCallback(() => {

src/app/features/create-chat/CreateChat.tsx

@@ -43,8 +43,8 @@ export function CreateChat({ defaultUserId }: CreateChatProps) {
 
         return result.room_id;
       },
-      [mx]
-    )
+      [mx],
+    ),
   );
   const loading = createState.status === AsyncStatus.Loading;
   const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
@@ -126,7 +126,7 @@ export function CreateChat({ defaultUserId }: CreateChatProps) {
             <b>
               {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
                 ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
+                    (error.data.retry_after_ms as number | undefined) ?? 0,
                   )} minutes!`
                 : error.message}
             </b>

src/app/features/create-room/CreateRoom.tsx

@@ -85,7 +85,7 @@ export function CreateRoomForm({
 
   const [type, setType] = useState(defaultType ?? CreateRoomType.TextRoom);
   const [access, setAccess] = useState(
-    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
+    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private),
   );
   const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
   const { additionalCreators, addAdditionalCreator, removeAdditionalCreator } =
@@ -107,7 +107,7 @@ export function CreateRoomForm({
   };
 
   const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
-    useCallback((data) => createRoom(mx, data), [mx])
+    useCallback((data) => createRoom(mx, data), [mx]),
   );
   const loading = createState.status === AsyncStatus.Loading;
   const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
@@ -317,7 +317,7 @@ export function CreateRoomForm({
             <b>
               {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
                 ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
+                    (error.data.retry_after_ms as number | undefined) ?? 0,
                   )} minutes!`
                 : error.message}
             </b>

src/app/features/create-space/CreateSpace.tsx

@@ -66,7 +66,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
   const allowRestricted = space && restrictedSupported(selectedRoomVersion);
 
   const [access, setAccess] = useState(
-    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private)
+    defaultAccess ?? (allowRestricted ? CreateRoomAccess.Restricted : CreateRoomAccess.Private),
   );
 
   const allowAdditionalCreators = creatorsSupported(selectedRoomVersion);
@@ -88,7 +88,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
   };
 
   const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
-    useCallback((data) => createRoom(mx, data), [mx])
+    useCallback((data) => createRoom(mx, data), [mx]),
   );
   const loading = createState.status === AsyncStatus.Loading;
   const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
@@ -255,7 +255,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF
             <b>
               {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
                 ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
+                    (error.data.retry_after_ms as number | undefined) ?? 0,
                   )} minutes!`
                 : error.message}
             </b>

src/app/features/lobby/DnD.tsx

@@ -21,7 +21,7 @@ export const useDraggableItem = (
   item: HierarchyItem,
   targetRef: RefObject<HTMLElement>,
   onDragging: (item?: HierarchyItem) => void,
-  dragHandleRef?: RefObject<HTMLElement>
+  dragHandleRef?: RefObject<HTMLElement>,
 ): boolean => {
   const [dragging, setDragging] = useState(false);
 
@@ -121,7 +121,7 @@ export function AfterItemDropTarget({
 export const useDnDMonitor = (
   scrollRef: RefObject<HTMLElement>,
   onDragging: (item?: HierarchyItem) => void,
-  onReorder: (item: HierarchyItem, container: DropContainerData) => void
+  onReorder: (item: HierarchyItem, container: DropContainerData) => void,
 ) => {
   useEffect(() => {
     const scrollElement = scrollRef.current;
@@ -140,7 +140,7 @@ export const useDnDMonitor = (
       }),
       autoScrollForElements({
         element: scrollElement,
-      })
+      }),
     );
   }, [scrollRef, onDragging, onReorder]);
 };

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -49,7 +49,7 @@ function SuggestMenuItem({
     useCallback(() => {
       const newContent: MSpaceChildContent = { ...content, suggested: !content.suggested };
       return mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, newContent, roomId);
-    }, [mx, parentId, roomId, content])
+    }, [mx, parentId, roomId, content]),
   );
 
   useEffect(() => {
@@ -86,8 +86,8 @@ function RemoveMenuItem({
   const [removeState, handleRemove] = useAsyncCallback(
     useCallback(
       () => mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, {}, roomId),
-      [mx, parentId, roomId]
-    )
+      [mx, parentId, roomId],
+    ),
   );
 
   useEffect(() => {

src/app/features/lobby/Lobby.tsx

@@ -60,7 +60,7 @@ import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 const useCanDropLobbyItem = (
   space: Room,
   roomsPowerLevels: Map<string, IPowerLevels>,
-  getRoom: (roomId: string) => Room | undefined
+  getRoom: (roomId: string) => Room | undefined,
 ): CanDropCallback => {
   const mx = useMatrixClient();
 
@@ -87,7 +87,7 @@ const useCanDropLobbyItem = (
 
       return true;
     },
-    [space, roomsPowerLevels, getRoom, mx]
+    [space, roomsPowerLevels, getRoom, mx],
   );
 
   const canDropRoom: CanDropCallback = useCallback(
@@ -107,7 +107,7 @@ const useCanDropLobbyItem = (
 
         const canChangeJoinRuleAllow = itemPermissions.stateEvent(
           StateEvent.RoomJoinRules,
-          mx.getSafeUserId()
+          mx.getSafeUserId(),
         );
         if (!canChangeJoinRuleAllow) {
           return false;
@@ -125,7 +125,7 @@ const useCanDropLobbyItem = (
       }
       return true;
     },
-    [mx, getRoom, roomsPowerLevels]
+    [mx, getRoom, roomsPowerLevels],
   );
 
   const canDrop: CanDropCallback = useCallback(
@@ -142,7 +142,7 @@ const useCanDropLobbyItem = (
 
       return canDropRoom(item, container);
     },
-    [canDropSpace, canDropRoom]
+    [canDropSpace, canDropRoom],
   );
 
   return canDrop;
@@ -168,7 +168,7 @@ export function Lobby() {
   const [onTop, setOnTop] = useState(true);
   const [closedCategories, setClosedCategories] = useAtom(useClosedLobbyCategoriesAtom());
   const [sidebarItems] = useSidebarItems(
-    useOrphanSpaces(mx, allRoomsAtom, useAtomValue(roomToParentsAtom))
+    useOrphanSpaces(mx, allRoomsAtom, useAtomValue(roomToParentsAtom)),
   );
   const sidebarSpaces = useMemo(() => {
     const sideSpaces = sidebarItems.flatMap((item) => {
@@ -183,7 +183,7 @@ export function Lobby() {
 
   useElementSizeObserver(
     useCallback(() => heroSectionRef.current, []),
-    useCallback((w, height) => setHeroSectionHeight(height), [])
+    useCallback((w, height) => setHeroSectionHeight(height), []),
   );
 
   const getRoom = useGetRoom(allJoinedRooms);
@@ -197,8 +197,8 @@ export function Lobby() {
       (childId) =>
         closedCategories.has(makeLobbyCategoryId(space.roomId, childId)) ||
         (draggingItem ? 'space' in draggingItem : false),
-      [closedCategories, space.roomId, draggingItem]
-    )
+      [closedCategories, space.roomId, draggingItem],
+    ),
   );
 
   const virtualizer = useVirtualizer({
@@ -220,8 +220,8 @@ export function Lobby() {
             return [getRoom(i.space.roomId), ...childRooms];
           })
           .filter((r) => !!r) as Room[],
-      [hierarchy, getRoom]
-    )
+      [hierarchy, getRoom],
+    ),
   );
 
   const canDrop: CanDropCallback = useCanDropLobbyItem(space, roomsPowerLevels, getRoom);
@@ -275,13 +275,13 @@ export function Lobby() {
               reorder.item.parentId,
               StateEvent.SpaceChild as any,
               { ...reorder.item.content, order: reorder.orderKey },
-              reorder.item.roomId
+              reorder.item.roomId,
             );
           });
         }
       },
-      [mx, hierarchy, lex, roomsPowerLevels]
-    )
+      [mx, hierarchy, lex, roomsPowerLevels],
+    ),
   );
   const reorderingSpace = reorderSpaceState.status === AsyncStatus.Loading;
 
@@ -310,7 +310,7 @@ export function Lobby() {
           // restricted room from one space to another
           const joinRuleContent = getStateEvent(
             itemRoom,
-            StateEvent.RoomJoinRules
+            StateEvent.RoomJoinRules,
           )?.getContent<RoomJoinRulesEventContent>();
 
           if (joinRuleContent) {
@@ -326,7 +326,7 @@ export function Lobby() {
         }
 
         const itemSpaces = Array.from(
-          hierarchy?.find((i) => i.space.roomId === containerParentId)?.rooms ?? []
+          hierarchy?.find((i) => i.space.roomId === containerParentId)?.rooms ?? [],
         );
 
         const beforeItem: HierarchyItem | undefined =
@@ -362,13 +362,13 @@ export function Lobby() {
               containerParentId,
               StateEvent.SpaceChild as any,
               { ...reorder.item.content, order: reorder.orderKey },
-              reorder.item.roomId
+              reorder.item.roomId,
             );
           });
         }
       },
-      [mx, hierarchy, lex]
-    )
+      [mx, hierarchy, lex],
+    ),
   );
   const reorderingRoom = reorderRoomState.status === AsyncStatus.Loading;
   const reordering = reorderingRoom || reorderingSpace;
@@ -387,8 +387,8 @@ export function Lobby() {
           reorderRoom(item, container.item);
         }
       },
-      [reorderRoom, reorderSpace, canDrop]
-    )
+      [reorderRoom, reorderSpace, canDrop],
+    ),
   );
 
   const handleSpacesFound = useCallback(
@@ -401,11 +401,11 @@ export function Lobby() {
         return current.size === newItems.size ? current : newItems;
       });
     },
-    [setSpaceRooms]
+    [setSpaceRooms],
   );
 
   const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
-    closedCategories.has(categoryId)
+    closedCategories.has(categoryId),
   );
 
   const handleOpenRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -424,7 +424,7 @@ export function Lobby() {
       const newSpacesContent = makeCinnySpacesContent(mx, newItems);
       mx.setAccountData(AccountDataEvent.CinnySpaces as any, newSpacesContent as any);
     },
-    [mx, sidebarItems, sidebarSpaces]
+    [mx, sidebarItems, sidebarSpaces],
   );
 
   return (

src/app/features/lobby/LobbyHeader.tsx

@@ -132,7 +132,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
         </Box>
       </Menu>
     );
-  }
+  },
 );
 
 type LobbyHeaderProps = {
@@ -150,7 +150,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
   const name = useRoomName(space);
   const avatarMxc = useRoomAvatar(space);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {

src/app/features/lobby/LobbyHero.tsx

@@ -23,7 +23,7 @@ export function LobbyHero() {
   const topic = useRoomTopic(space);
   const avatarMxc = useRoomAvatar(space);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   return (

src/app/features/lobby/RoomItem.tsx

@@ -47,7 +47,7 @@ function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) {
   const mx = useMatrixClient();
 
   const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via])
+    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via]),
   );
 
   const canJoin = joinState.status === AsyncStatus.Idle || joinState.status === AsyncStatus.Error;
@@ -309,7 +309,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
       getRoom,
       ...props
     },
-    ref
+    ref,
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
@@ -402,8 +402,8 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                   topic={summary.topic}
                   avatarUrl={
                     summary?.avatar_url
-                      ? mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
-                        undefined
+                      ? (mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
+                        undefined)
                       : undefined
                   }
                   memberCount={summary.num_joined_members}
@@ -419,5 +419,5 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
         {after}
       </SequenceCard>
     );
-  }
+  },
 );

src/app/features/lobby/SpaceHierarchy.tsx

@@ -63,7 +63,7 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       onOpenRoom,
       onSpacesFound,
     },
-    ref
+    ref,
   ) => {
     const mx = useMatrixClient();
 
@@ -228,5 +228,5 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
         )}
       </Box>
     );
-  }
+  },
 );

src/app/features/lobby/SpaceItem.tsx

@@ -113,7 +113,7 @@ function UnjoinedSpaceProfile({
   const mx = useMatrixClient();
 
   const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via])
+    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via]),
   );
 
   const canJoin = joinState.status === AsyncStatus.Idle || joinState.status === AsyncStatus.Error;
@@ -423,7 +423,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
       getRoom,
       ...props
     },
-    ref
+    ref,
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
@@ -484,8 +484,14 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
                     name={summary.name || summary.canonical_alias || roomId}
                     avatarUrl={
                       summary?.avatar_url
-                        ? mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
-                          undefined
+                        ? (mxcUrlToHttp(
+                            mx,
+                            summary.avatar_url,
+                            useAuthentication,
+                            96,
+                            96,
+                            'crop',
+                          ) ?? undefined)
                         : undefined
                     }
                     suggested={content.suggested}
@@ -505,5 +511,5 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
         {after}
       </Box>
     );
-  }
+  },
 );

src/app/features/message-search/MessageSearch.tsx

@@ -33,7 +33,7 @@ const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSe
       rooms: searchParams.get('rooms') ?? undefined,
       senders: searchParams.get('senders') ?? undefined,
     }),
-    [searchParams]
+    [searchParams],
   );
 
 type MessageSearchProps = {
@@ -69,7 +69,7 @@ export function MessageSearch({
   const searchParamRooms = useMemo(() => {
     if (searchPathSearchParams.rooms) {
       const joinedRoomIds = decodeSearchParamValueArray(searchPathSearchParams.rooms).filter(
-        (rId) => allRooms.includes(rId)
+        (rId) => allRooms.includes(rId),
       );
       return joinedRoomIds;
     }

src/app/features/message-search/SearchFilters.tsx

@@ -134,13 +134,13 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
     (rId) => mx.getRoom(rId)?.name ?? rId,
-    [mx]
+    [mx],
   );
 
   const [searchResult, _searchRoom, resetSearch] = useAsyncSearch(
     roomList,
     getRoomNameStr,
-    SEARCH_OPTS
+    SEARCH_OPTS,
   );
   const rooms = Array.from(searchResult?.items ?? roomList).sort(factoryRoomIdByAtoZ(mx));
 

src/app/features/message-search/SearchResultGroup.tsx

@@ -95,10 +95,10 @@ export function SearchResultGroup({
     () => ({
       ...LINKIFY_OPTS,
       render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler)),
       ),
     }),
-    [mx, room, mentionClickHandler]
+    [mx, room, mentionClickHandler],
   );
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
@@ -117,7 +117,7 @@ export function SearchResultGroup({
       mentionClickHandler,
       spoilerClickHandler,
       useAuthentication,
-    ]
+    ],
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
@@ -184,7 +184,7 @@ export function SearchResultGroup({
           </Text>
         </Box>
       );
-    }
+    },
   );
 
   const handleOpenClick: MouseEventHandler = (evt) => {
@@ -263,14 +263,14 @@ export function SearchResultGroup({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(
+                            ? (mxcUrlToHttp(
                                 mx,
                                 senderAvatarMxc,
                                 useAuthentication,
                                 48,
                                 48,
-                                'crop'
-                              ) ?? undefined
+                                'crop',
+                              ) ?? undefined)
                             : undefined
                         }
                         alt={displayName}

src/app/features/message-search/useMessageSearch.ts

@@ -108,7 +108,7 @@ export const useMessageSearch = (params: MessageSearchParams) => {
       });
       return parseSearchResult(r);
     },
-    [mx, term, order, rooms, senders]
+    [mx, term, order, rooms, senders],
   );
 
   return searchMessages;

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -23,5 +23,5 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
         {children}
       </Text>
     </Chip>
-  )
+  ),
 );

src/app/features/room-nav/RoomNavItem.tsx

@@ -216,7 +216,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
         </Box>
       </Menu>
     );
-  }
+  },
 );
 
 function CallChatToggle() {
@@ -261,7 +261,7 @@ function RoomNavItem_({
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const typingMember = useRoomTypingMember(room.roomId).filter(
-    (receipt) => receipt.userId !== mx.getUserId()
+    (receipt) => receipt.userId !== mx.getUserId(),
   );
 
   const roomName = useRoomName(room);
@@ -296,7 +296,7 @@ function RoomNavItem_({
 
     const hasCallPermission = permissions.stateEvent(
       StateEvent.GroupCallMemberPrefix,
-      mx.getSafeUserId()
+      mx.getSafeUserId(),
     );
 
     // Do not join if missing permissions or no livekit support or no webRTC support

src/app/features/room-settings/RoomSettings.tsx

@@ -53,7 +53,7 @@ const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
         icon: Icons.Terminal,
       },
     ],
-    []
+    [],
   );
 
 type RoomSettingsProps = {
@@ -71,7 +71,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
   const joinRuleContent = useRoomJoinRule(room);
 
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const screenSize = useScreenSizeContext();

src/app/features/room/CommandAutocomplete.tsx

@@ -43,7 +43,7 @@ export function CommandAutocomplete({
   const [result, search, resetSearch] = useAsyncSearch(
     commandNames,
     useCallback((commandName: string) => commandName, []),
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
 
   const autoCompleteNames = result ? result.items : commandNames;

src/app/features/room/MembersDrawer.tsx

@@ -206,13 +206,13 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
 
   const filteredMembers = useMemo(
     () => members.filter(membershipFilter.filterFn).sort(memberSort.sortFn).sort(memberPowerSort),
-    [members, membershipFilter, memberSort, memberPowerSort]
+    [members, membershipFilter, memberSort, memberPowerSort],
   );
 
   const [result, search, resetSearch] = useAsyncSearch(
     filteredMembers,
     getRoomMemberStr,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
   if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
 
@@ -233,9 +233,9 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
         if (evt.target.value) search(evt.target.value);
         else resetSearch();
       },
-      [search, resetSearch]
+      [search, resetSearch],
     ),
-    { wait: 200 }
+    { wait: 200 },
   );
 
   const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -276,7 +276,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         onClick={
                           ((evt) =>
                             setAnchor(
-                              evt.currentTarget.getBoundingClientRect()
+                              evt.currentTarget.getBoundingClientRect(),
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
@@ -308,7 +308,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         onClick={
                           ((evt) =>
                             setAnchor(
-                              evt.currentTarget.getBoundingClientRect()
+                              evt.currentTarget.getBoundingClientRect(),
                             )) as MouseEventHandler<HTMLButtonElement>
                         }
                         variant="Background"
@@ -421,7 +421,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         onClick={handleMemberClick}
                         pressed={openProfileUserId === tagOrMember.userId}
                         typing={typingMembers.some(
-                          (receipt) => receipt.userId === tagOrMember.userId
+                          (receipt) => receipt.userId === tagOrMember.userId,
                         )}
                       />
                     </div>

src/app/features/room/Room.tsx

@@ -46,8 +46,8 @@ export function Room() {
           markAsRead(mx, room.roomId, hideActivity);
         }
       },
-      [mx, room.roomId, hideActivity]
-    )
+      [mx, room.roomId, hideActivity],
+    ),
   );
 
   const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;

src/app/features/room/RoomInput.tsx

@@ -31,7 +31,7 @@ import {
 
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 const GifPicker = React.lazy(() =>
-  import('../../components/GifPicker').then((m) => ({ default: m.GifPicker }))
+  import('../../components/GifPicker').then((m) => ({ default: m.GifPicker })),
 );
 import { useClientConfig } from '../../hooks/useClientConfig';
 import {
@@ -60,7 +60,7 @@ import {
 } from '../../components/editor';
 import { EmojiBoardTab } from '../../components/emoji-board/types';
 const EmojiBoard = React.lazy(() =>
-  import('../../components/emoji-board').then((m) => ({ default: m.EmojiBoard }))
+  import('../../components/emoji-board').then((m) => ({ default: m.EmojiBoard })),
 );
 import { UseStateProvider } from '../../components/UseStateProvider';
 import {
@@ -159,7 +159,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const accessibleTagColors = useAccessiblePowerTagColors(
       theme.kind,
       creatorsTag,
-      powerLevelTags
+      powerLevelTags,
     );
 
     const replyPowerTag = replyUserID ? getMemberPowerTag(replyUserID) : undefined;
@@ -173,7 +173,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const [selectedFiles, setSelectedFiles] = useAtom(roomIdToUploadItemsAtomFamily(roomId));
     const uploadFamilyObserverAtom = createUploadFamilyObserverAtom(
       roomUploadAtomFamily,
-      selectedFiles.map((f) => f.file)
+      selectedFiles.map((f) => f.file),
     );
     const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
 
@@ -196,7 +196,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           } as any);
         },
         () => setLocating(false),
-        { timeout: 10000 }
+        { timeout: 10000 },
       );
     };
 
@@ -213,7 +213,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
         if (room.hasEncryptionStateEvent()) {
           const encryptFiles = fulfilledPromiseSettledResult(
-            await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
+            await Promise.allSettled(safeFiles.map((f) => encryptFile(f))),
           );
           encryptFiles.forEach((ef) =>
             fileItems.push({
@@ -221,7 +221,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               metadata: {
                 markedAsSpoiler: false,
               },
-            })
+            }),
           );
         } else {
           safeFiles.forEach((f) =>
@@ -232,7 +232,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               metadata: {
                 markedAsSpoiler: false,
               },
-            })
+            }),
           );
         }
         setSelectedFiles({
@@ -240,7 +240,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           item: fileItems,
         });
       },
-      [setSelectedFiles, room]
+      [setSelectedFiles, room],
     );
     const pickFile = useFilePicker(handleFiles, true);
     const handlePaste = useFilePasteHandler(handleFiles);
@@ -254,7 +254,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     useElementSizeObserver(
       useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
-      useCallback((width) => setHideStickerBtn(width < 500), [])
+      useCallback((width) => setHideStickerBtn(width < 500), []),
     );
 
     const didRestoreDraft = React.useRef(false);
@@ -277,7 +277,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         resetEditor(editor);
         resetEditorHistory(editor);
       },
-      [roomId, editor, setMsgDraft]
+      [roomId, editor, setMsgDraft],
     );
 
     const handleFileMetadata = useCallback(
@@ -288,7 +288,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           replacement: { ...fileItem, metadata },
         });
       },
-      [setSelectedFiles]
+      [setSelectedFiles],
     );
 
     const handleRemoveUpload = useCallback(
@@ -300,7 +300,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         });
         uploads.forEach((u) => roomUploadAtomFamily.remove(u));
       },
-      [setSelectedFiles, selectedFiles]
+      [setSelectedFiles, selectedFiles],
     );
 
     const handleCancelUpload = (uploads: Upload[]) => {
@@ -343,7 +343,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           allowTextFormatting: true,
           allowBlockMarkdown: isMarkdown,
           allowInlineMarkdown: isMarkdown,
-        })
+        }),
       );
       let msgType = MsgType.Text;
 
@@ -434,7 +434,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           setReplyDraft(undefined);
         }
       },
-      [submit, setReplyDraft, enterForNewline, autocompleteQuery, isComposing]
+      [submit, setReplyDraft, enterForNewline, autocompleteQuery, isComposing],
     );
 
     const handleKeyUp: KeyboardEventHandler = useCallback(
@@ -454,7 +454,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           : undefined;
         setAutocompleteQuery(query);
       },
-      [editor, sendTypingStatus, hideActivity]
+      [editor, sendTypingStatus, hideActivity],
     );
 
     const handleCloseAutocomplete = useCallback(() => {
@@ -497,7 +497,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
           const uploadRes = await mx.uploadContent(
             new File([blob], 'image.gif', { type: 'image/gif' }),
-            { type: 'image/gif', name: 'image.gif', includeFilename: false }
+            { type: 'image/gif', name: 'image.gif', includeFilename: false },
           );
           const mxcUrl = (uploadRes as { content_uri: string }).content_uri;
           if (!mxcUrl) return;
@@ -514,7 +514,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           setTimeout(() => setGifError(null), 4000);
         }
       },
-      [mx, roomId]
+      [mx, roomId],
     );
 
     const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
@@ -523,7 +523,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
       const info = await getImageInfo(
         await loadImageElement(stickerUrl),
-        await getImageUrlBlob(stickerUrl)
+        await getImageUrlBlob(stickerUrl),
       );
 
       mx.sendEvent(roomId, EventType.Sticker, {
@@ -703,7 +703,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                     anchor={
                       emojiBoardTab === undefined
                         ? undefined
-                        : emojiBtnRef.current?.getBoundingClientRect() ?? undefined
+                        : (emojiBtnRef.current?.getBoundingClientRect() ?? undefined)
                     }
                     content={
                       <React.Suspense fallback={null}>
@@ -774,7 +774,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       align="End"
                       anchor={
                         gifOpen
-                          ? gifBtnRef.current?.getBoundingClientRect() ?? undefined
+                          ? (gifBtnRef.current?.getBoundingClientRect() ?? undefined)
                           : undefined
                       }
                       content={
@@ -871,5 +871,5 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         />
       </div>
     );
-  }
+  },
 );

src/app/features/room/RoomInputPlaceholder.tsx

@@ -7,5 +7,5 @@ import * as css from './RoomInputPlaceholder.css';
 export const RoomInputPlaceholder = as<'div', ComponentProps<typeof Box>>(
   ({ className, ...props }, ref) => (
     <Box className={classNames(css.RoomInputPlaceholder, className)} {...props} ref={ref} />
-  )
+  ),
 );

src/app/features/room/RoomTimeline.tsx

@@ -141,7 +141,7 @@ const TimelineFloat = as<'div', css.TimelineFloatVariants>(
       {...props}
       ref={ref}
     />
-  )
+  ),
 );
 
 const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
@@ -151,7 +151,7 @@ const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
       {children}
       <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
     </Box>
-  )
+  ),
 );
 
 export const getLiveTimeline = (room: Room): EventTimeline =>
@@ -164,7 +164,7 @@ export const getEventTimeline = (room: Room, eventId: string): EventTimeline | u
 
 export const getFirstLinkedTimeline = (
   timeline: EventTimeline,
-  direction: Direction
+  direction: Direction,
 ): EventTimeline => {
   const linkedTm = timeline.getNeighbouringTimeline(direction);
   if (!linkedTm) return timeline;
@@ -194,7 +194,7 @@ export const getTimelinesEventsCount = (timelines: EventTimeline[]): number => {
 
 export const getTimelineAndBaseIndex = (
   timelines: EventTimeline[],
-  index: number
+  index: number,
 ): [EventTimeline | undefined, number] => {
   let uptoTimelineLen = 0;
   const timeline = timelines.find((t) => {
@@ -215,7 +215,7 @@ export const getTimelineEvent = (timeline: EventTimeline, index: number): Matrix
 export const getEventIdAbsoluteIndex = (
   timelines: EventTimeline[],
   eventTimeline: EventTimeline,
-  eventId: string
+  eventId: string,
 ): number | undefined => {
   const timelineIndex = timelines.findIndex((t) => t === eventTimeline);
   if (timelineIndex === -1) return undefined;
@@ -245,12 +245,12 @@ const useEventTimelineLoader = (
   mx: MatrixClient,
   room: Room,
   onLoad: (eventId: string, linkedTimelines: EventTimeline[], evtAbsIndex: number) => void,
-  onError: (err: Error | null) => void
+  onError: (err: Error | null) => void,
 ) => {
   const loadEventTimeline = useCallback(
     async (eventId: string) => {
       const [err, replyEvtTimeline] = await to(
-        mx.getEventTimeline(room.getUnfilteredTimelineSet(), eventId)
+        mx.getEventTimeline(room.getUnfilteredTimelineSet(), eventId),
       );
       if (!replyEvtTimeline) {
         onError(err ?? null);
@@ -266,7 +266,7 @@ const useEventTimelineLoader = (
 
       onLoad(eventId, linkedTimelines, absIndex);
     },
-    [mx, room, onLoad, onError]
+    [mx, room, onLoad, onError],
   );
 
   return loadEventTimeline;
@@ -276,7 +276,7 @@ const useTimelinePagination = (
   mx: MatrixClient,
   timeline: Timeline,
   setTimeline: Dispatch<SetStateAction<Timeline>>,
-  limit: number
+  limit: number,
 ) => {
   const timelineRef = useRef(timeline);
   timelineRef.current = timeline;
@@ -288,7 +288,7 @@ const useTimelinePagination = (
     const recalibratePagination = (
       linkedTimelines: EventTimeline[],
       timelinesEventsCount: number[],
-      backwards: boolean
+      backwards: boolean,
     ) => {
       const topTimeline = linkedTimelines[0];
       const timelineMatch = (mt: EventTimeline) => (t: EventTimeline) => t === mt;
@@ -322,7 +322,7 @@ const useTimelinePagination = (
       if (!timelineToPaginate) return;
 
       const paginationToken = timelineToPaginate.getPaginationToken(
-        backwards ? Direction.Backward : Direction.Forward
+        backwards ? Direction.Backward : Direction.Forward,
       );
       if (
         !paginationToken &&
@@ -338,7 +338,7 @@ const useTimelinePagination = (
         mx.paginateEventTimeline(timelineToPaginate, {
           backwards,
           limit,
-        })
+        }),
       );
       if (err) {
         fetching = false;
@@ -346,7 +346,7 @@ const useTimelinePagination = (
       }
       const fetchedTimeline =
         timelineToPaginate.getNeighbouringTimeline(
-          backwards ? Direction.Backward : Direction.Forward
+          backwards ? Direction.Backward : Direction.Forward,
         ) ?? timelineToPaginate;
       // Decrypt all event ahead of render cycle
       const roomId = fetchedTimeline.getRoomId();
@@ -372,7 +372,7 @@ const useLiveEventArrive = (room: Room, onArrive: (mEvent: MatrixEvent) => void)
       eventRoom,
       toStartOfTimeline,
       removed,
-      data
+      data,
     ) => {
       if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
       onArrive(mEvent);
@@ -472,7 +472,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const accessiblePowerTagColors = useAccessiblePowerTagColors(
     theme.kind,
     creatorsTag,
-    powerLevelTags
+    powerLevelTags,
   );
 
   const permissions = useRoomPermissions(creators, powerLevels);
@@ -524,10 +524,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     () => ({
       ...LINKIFY_OPTS,
       render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler)),
       ),
     }),
-    [mx, room, mentionClickHandler]
+    [mx, room, mentionClickHandler],
   );
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
@@ -537,12 +537,12 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
       }),
-    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication]
+    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication],
   );
   const parseMemberEvent = useMemberEventParser();
 
   const [timeline, setTimeline] = useState<Timeline>(() =>
-    eventId ? getEmptyTimeline() : getInitialTimeline(room)
+    eventId ? getEmptyTimeline() : getInitialTimeline(room),
   );
   const timelineRef = React.useRef(timeline);
   timelineRef.current = timeline;
@@ -571,7 +571,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     mx,
     timeline,
     setTimeline,
-    PAGINATION_LIMIT
+    PAGINATION_LIMIT,
   );
 
   const getScrollElement = useCallback(() => scrollRef.current, []);
@@ -587,7 +587,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         (index: number) =>
           (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
           undefined,
-        []
+        [],
       ),
       onEnd: handleTimelinePagination,
     });
@@ -613,14 +613,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           },
         });
       },
-      [alive]
+      [alive],
     ),
     useCallback(() => {
       if (!alive()) return;
       setTimeline(getInitialTimeline(room));
       scrollToBottomRef.current.count += 1;
       scrollToBottomRef.current.smooth = false;
-    }, [alive, room])
+    }, [alive, room]),
   );
 
   useLiveEventArrive(
@@ -661,15 +661,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           setUnreadInfo(getRoomUnreadInfo(room));
         }
       },
-      [mx, room, unreadInfo, hideActivity]
-    )
+      [mx, room, unreadInfo, hideActivity],
+    ),
   );
 
   const handleOpenEvent = useCallback(
     async (
       evtId: string,
       highlight = true,
-      onScroll: ((scrolled: boolean) => void) | undefined = undefined
+      onScroll: ((scrolled: boolean) => void) | undefined = undefined,
     ) => {
       const evtTimeline = getEventTimeline(room, evtId);
       const absoluteIndex =
@@ -693,7 +693,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         loadEventTimeline(evtId);
       }
     },
-    [room, scrollToItem, loadEventTimeline]
+    [room, scrollToItem, loadEventTimeline],
   );
 
   useLiveTimelineRefresh(
@@ -702,7 +702,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       if (liveTimelineLinked) {
         setTimeline(getInitialTimeline(room));
       }
-    }, [room, liveTimelineLinked])
+    }, [room, liveTimelineLinked]),
   );
 
   // Stay at bottom when room editor resize
@@ -725,7 +725,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         }
       };
     }, [getScrollElement, roomInputRef]),
-    useCallback(() => roomInputRef.current, [roomInputRef])
+    useCallback(() => roomInputRef.current, [roomInputRef]),
   );
 
   const tryAutoMarkAsRead = useCallback(() => {
@@ -745,7 +745,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     useCallback((entry: IntersectionObserverEntry) => {
       if (!entry.isIntersecting) setAtBottom(false);
     }, []),
-    { wait: 1000 }
+    { wait: 1000 },
   );
   useIntersectionObserver(
     useCallback(
@@ -761,16 +761,16 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           }
         }
       },
-      [debounceSetAtBottom, tryAutoMarkAsRead]
+      [debounceSetAtBottom, tryAutoMarkAsRead],
     ),
     useCallback(
       () => ({
         root: getScrollElement(),
         rootMargin: '100px',
       }),
-      [getScrollElement]
+      [getScrollElement],
     ),
-    useCallback(() => atBottomAnchorRef.current, [])
+    useCallback(() => atBottomAnchorRef.current, []),
   );
 
   useDocumentFocusChange(
@@ -790,8 +790,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           tryAutoMarkAsRead();
         }
       },
-      [tryAutoMarkAsRead, unreadInfo, handleOpenEvent]
-    )
+      [tryAutoMarkAsRead, unreadInfo, handleOpenEvent],
+    ),
   );
 
   // Handle up arrow edit
@@ -806,7 +806,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           isEmptyEditor(editor)
         ) {
           const editableEvt = getLatestEditableEvt(room.getLiveTimeline(), (mEvt) =>
-            canEditEvent(mx, mEvt)
+            canEditEvent(mx, mEvt),
           );
           const editableEvtId = editableEvt?.getId();
           if (!editableEvtId) return;
@@ -814,8 +814,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           evt.preventDefault();
         }
       },
-      [mx, room, editor]
-    )
+      [mx, room, editor],
+    ),
   );
 
   useEffect(() => {
@@ -931,7 +931,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       if (!targetId) return;
       handleOpenEvent(targetId);
     },
-    [handleOpenEvent]
+    [handleOpenEvent],
   );
 
   const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -947,10 +947,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         room.roomId,
         space?.roomId,
         userId,
-        evt.currentTarget.getBoundingClientRect()
+        evt.currentTarget.getBoundingClientRect(),
       );
     },
-    [room, space, openUserRoomProfile]
+    [room, space, openUserRoomProfile],
   );
   const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (evt) => {
@@ -965,13 +965,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         createMentionElement(
           userId,
           name.startsWith('@') ? name : `@${name}`,
-          userId === mx.getUserId()
-        )
+          userId === mx.getUserId(),
+        ),
       );
       ReactEditor.focus(editor);
       moveCursor(editor);
     },
-    [mx, room, editor]
+    [mx, room, editor],
   );
 
   const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -1001,7 +1001,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         setTimeout(() => ReactEditor.focus(editor), 100);
       }
     },
-    [room, setReplyDraft, editor]
+    [room, setReplyDraft, editor],
   );
 
   const handleReactionToggle = useCallback(
@@ -1022,10 +1022,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       mx.sendEvent(
         room.roomId,
         MessageEvent.Reaction as any,
-        getReactionContent(targetEventId, key, rShortcode)
+        getReactionContent(targetEventId, key, rShortcode),
       );
     },
-    [mx, room]
+    [mx, room],
   );
   const handleEdit = useCallback(
     (editEvtId?: string) => {
@@ -1036,7 +1036,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       setEditId(undefined);
       ReactEditor.focus(editor);
     },
-    [editor]
+    [editor],
   );
   const { t } = useTranslation();
 
@@ -1938,7 +1938,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           />
         </Event>
       );
-    }
+    },
   );
 
   let prevEvent: MatrixEvent | undefined;
@@ -2014,7 +2014,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           mEvent,
           item,
           timelineSet,
-          collapsed
+          collapsed,
         );
     prevEvent = mEvent;
     isPrevRendered = !!eventJSX;

src/app/features/room/RoomTombstone.tsx

@@ -21,7 +21,7 @@ export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstone
       return mx.joinRoom(replacementRoomId, {
         viaServers: via,
       });
-    }, [mx, roomId, replacementRoomId])
+    }, [mx, roomId, replacementRoomId]),
   );
   const replacementRoom = mx.getRoom(replacementRoomId);
 

src/app/features/room/RoomView.tsx

@@ -92,14 +92,14 @@ export function RoomView({ eventId }: { eventId?: string }) {
           ReactEditor.focus(editor);
         }
       },
-      [editor]
-    )
+      [editor],
+    ),
   );
 
   const chatBgStyle = useMemo(
     () =>
       getChatBg(lotusTerminal && chatBackground === 'none' ? 'tactical' : chatBackground, isDark),
-    [chatBackground, lotusTerminal, isDark]
+    [chatBackground, lotusTerminal, isDark],
   );
 
   return (

src/app/features/room/RoomViewFollowing.tsx

@@ -40,7 +40,8 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
     const names = latestEventReaders
       .filter((readerId) => readerId !== mx.getUserId())
       .map(
-        (readerId) => getMemberDisplayName(room, readerId) ?? getMxIdLocalPart(readerId) ?? readerId
+        (readerId) =>
+          getMemberDisplayName(room, readerId) ?? getMxIdLocalPart(readerId) ?? readerId,
       );
 
     const eventId = latestEvent?.getId();
@@ -141,5 +142,5 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
         </Box>
       </>
     );
-  }
+  },
 );

src/app/features/room/RoomViewHeader.tsx

@@ -303,7 +303,7 @@ const CallMenu = forwardRef<HTMLDivElement, CallMenuProps>(
         </Box>
       </Menu>
     );
-  }
+  },
 );
 
 function CallButton() {
@@ -398,7 +398,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
 
   const hasCallPermission = permissions.stateEvent(
     StateEvent.GroupCallMemberPrefix,
-    mx.getSafeUserId()
+    mx.getSafeUserId(),
   );
   const livekitSupported = useLivekitSupport();
   const rtcSupported = webRTCSupported();
@@ -414,7 +414,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const name = useRoomName(room);
   const topic = useRoomTopic(room);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');

src/app/features/room/RoomViewTyping.tsx

@@ -27,10 +27,10 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
           .filter((receipt) => receipt.userId !== myUserId)
           .map(
             (receipt) =>
-              getMemberDisplayName(room, receipt.userId) ?? getMxIdLocalPart(receipt.userId)
+              getMemberDisplayName(room, receipt.userId) ?? getMxIdLocalPart(receipt.userId),
           )
           .reverse(),
-      [typingMembers, myUserId, room]
+      [typingMembers, myUserId, room],
     );
 
     if (typingNames.length === 0) {
@@ -45,7 +45,7 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
           type: 'DELETE',
           roomId: room.roomId,
           userId: receipt.userId,
-        })
+        }),
       );
     };
 
@@ -129,5 +129,5 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
         </Box>
       </div>
     );
-  }
+  },
 );

src/app/features/room/jump-to-time/JumpToTime.tsx

@@ -73,8 +73,8 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
         const result = await mx.timestampToEvent(room.roomId, newTs, Direction.Forward);
         return result.event_id;
       },
-      [mx, room]
-    )
+      [mx, room],
+    ),
   );
 
   const handleSubmit = () => {

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

@@ -176,7 +176,7 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
         <Line size="300" />
       </>
     );
-  }
+  },
 );
 
 export const MessageAllReactionItem = as<
@@ -461,8 +461,8 @@ export const MessageDeleteItem = as<
     useCallback(
       (eventId: string, reason?: string) =>
         mx.redactEvent(room.roomId, eventId, undefined, reason ? { reason } : undefined),
-      [mx, room]
-    )
+      [mx, room],
+    ),
   );
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -590,8 +590,8 @@ export const MessageReportItem = as<
     useCallback(
       (eventId: string, score: number, reason: string) =>
         mx.reportEvent(room.roomId, eventId, score, reason),
-      [mx, room]
-    )
+      [mx, room],
+    ),
   );
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -726,7 +726,7 @@ export type MessageProps = {
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
   onReplyClick: (
     ev: Parameters<MouseEventHandler<HTMLButtonElement>>[0],
-    startThread?: boolean
+    startThread?: boolean,
   ) => void;
   onEditId?: (eventId?: string) => void;
   onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
@@ -776,7 +776,7 @@ export const Message = React.memo(
         children,
         ...props
       },
-      ref
+      ref,
     ) => {
       const mx = useMatrixClient();
       const useAuthentication = useMediaAuthentication();
@@ -784,7 +784,7 @@ export const Message = React.memo(
       const readPositions = useReadPositions();
       const readReceiptUsers = hideReadReceipts
         ? []
-        : readPositions.get(mEvent.getId() ?? '') ?? [];
+        : (readPositions.get(mEvent.getId() ?? '') ?? []);
       const isMine = mEvent.getSender() === mx.getUserId();
       const lotusTerminal = lotusTerminalProp;
 
@@ -870,8 +870,8 @@ export const Message = React.memo(
               userId={senderId}
               src={
                 senderAvatarMxc
-                  ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
-                    undefined
+                  ? (mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
+                    undefined)
                   : undefined
               }
               alt={senderDisplayName}
@@ -1254,8 +1254,8 @@ export const Message = React.memo(
           )}
         </MessageBase>
       );
-    }
-  )
+    },
+  ),
 );
 
 export type EventProps = {
@@ -1282,7 +1282,7 @@ export const Event = React.memo(
         children,
         ...props
       },
-      ref
+      ref,
     ) => {
       const mx = useMatrixClient();
       const [hover, setHover] = useState(false);
@@ -1409,6 +1409,6 @@ export const Event = React.memo(
           <div onContextMenu={handleContextMenu}>{children}</div>
         </MessageBase>
       );
-    }
-  )
+    },
+  ),
 );

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

@@ -78,7 +78,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
     const getPrevBodyAndFormattedBody = useCallback((): [
       string | undefined,
       string | undefined,
-      IMentions | undefined
+      IMentions | undefined,
     ] => {
       const evtId = mEvent.getId()!;
       const evtTimeline = room.getTimelineForEvent(evtId);
@@ -105,7 +105,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
             allowTextFormatting: true,
             allowBlockMarkdown: isMarkdown,
             allowInlineMarkdown: isMarkdown,
-          })
+          }),
         );
 
         const [prevBody, prevCustomHtml, prevMentions] = getPrevBodyAndFormattedBody();
@@ -154,7 +154,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
         };
 
         return mx.sendMessage(roomId, content);
-      }, [mx, editor, roomId, mEvent, isMarkdown, getPrevBodyAndFormattedBody])
+      }, [mx, editor, roomId, mEvent, isMarkdown, getPrevBodyAndFormattedBody]),
     );
 
     const handleSave = useCallback(() => {
@@ -177,7 +177,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           onCancel();
         }
       },
-      [onCancel, handleSave, enterForNewline, isComposing]
+      [onCancel, handleSave, enterForNewline, isComposing],
     );
 
     const handleKeyUp: KeyboardEventHandler = useCallback(
@@ -193,7 +193,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           : undefined;
         setAutocompleteQuery(query);
       },
-      [editor]
+      [editor],
     );
 
     const handleCloseAutocomplete = useCallback(() => {
@@ -330,7 +330,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
                           onClick={
                             ((evt) =>
                               setAnchor(
-                                evt.currentTarget.getBoundingClientRect()
+                                evt.currentTarget.getBoundingClientRect(),
                               )) as MouseEventHandler<HTMLButtonElement>
                           }
                           variant="SurfaceVariant"
@@ -355,5 +355,5 @@ export const MessageEditor = as<'div', MessageEditorProps>(
         />
       </div>
     );
-  }
+  },
 );

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

@@ -39,7 +39,7 @@ export const Reactions = as<'div', ReactionsProps>(
     const myUserId = mx.getUserId();
     const reactions = useRelations(
       relations,
-      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
+      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], []),
     );
 
     const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -126,5 +126,5 @@ export const Reactions = as<'div', ReactionsProps>(
         )}
       </Box>
     );
-  }
+  },
 );

src/app/features/room/msgContent.ts

@@ -22,7 +22,7 @@ const generateThumbnailContent = async (
   mx: MatrixClient,
   img: HTMLImageElement | HTMLVideoElement,
   dimensions: [number, number],
-  encrypt: boolean
+  encrypt: boolean,
 ): Promise<IThumbnailContent> => {
   const thumbnail = await getThumbnail(img, ...dimensions);
   if (!thumbnail) throw new Error('Can not create thumbnail!');
@@ -46,7 +46,7 @@ const generateThumbnailContent = async (
 export const getImageMsgContent = async (
   mx: MatrixClient,
   item: TUploadItem,
-  mxc: string
+  mxc: string,
 ): Promise<IContent> => {
   const { file, originalFile, encInfo, metadata } = item;
   const [imgError, imgEl] = await to(loadImageElement(getImageFileUrl(originalFile)));
@@ -80,7 +80,7 @@ export const getImageMsgContent = async (
 export const getVideoMsgContent = async (
   mx: MatrixClient,
   item: TUploadItem,
-  mxc: string
+  mxc: string,
 ): Promise<IContent> => {
   const { file, originalFile, encInfo, metadata } = item;
 
@@ -99,14 +99,14 @@ export const getVideoMsgContent = async (
         mx,
         videoEl,
         getThumbnailDimensions(videoEl.videoWidth, videoEl.videoHeight),
-        !!encInfo
-      )
+        !!encInfo,
+      ),
     );
     if (thumbContent && thumbContent.thumbnail_info) {
       thumbContent.thumbnail_info[MATRIX_BLUR_HASH_PROPERTY_NAME] = encodeBlurHash(
         videoEl,
         512,
-        scaleYDimension(videoEl.videoWidth, 512, videoEl.videoHeight)
+        scaleYDimension(videoEl.videoWidth, 512, videoEl.videoHeight),
       );
     }
     if (thumbError) console.warn(thumbError);

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -41,7 +41,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
     const useAuthentication = useMediaAuthentication();
     const reactions = useRelations(
       relations,
-      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
+      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], []),
     );
     const space = useSpaceOptionally();
     const openProfile = useOpenUserRoomProfile();
@@ -123,7 +123,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                         'crop',
                         undefined,
                         false,
-                        useAuthentication
+                        useAuthentication,
                       )
                     : undefined;
 
@@ -138,7 +138,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                           space?.roomId,
                           senderId,
                           getMouseEventCords(event.nativeEvent),
-                          'Bottom'
+                          'Bottom',
                         );
                       }}
                       before={
@@ -166,5 +166,5 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
         </Box>
       </Box>
     );
-  }
+  },
 );

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -124,7 +124,7 @@ function PinnedMessage({
       };
 
       return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, newContent);
-    }, [room, eventId, mx])
+    }, [room, eventId, mx]),
   );
 
   const handleOpenClick: MouseEventHandler = (evt) => {
@@ -199,8 +199,8 @@ function PinnedMessage({
               userId={sender}
               src={
                 senderAvatarMxc
-                  ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
-                    undefined
+                  ? (mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
+                    undefined)
                   : undefined
               }
               alt={displayName}
@@ -266,7 +266,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
     const accessibleTagColors = useAccessiblePowerTagColors(
       theme.kind,
       creatorsTag,
-      powerLevelTags
+      powerLevelTags,
     );
 
     const pinnedEvents = useRoomPinnedEvents(room);
@@ -298,10 +298,10 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
       () => ({
         ...LINKIFY_OPTS,
         render: factoryRenderLinkifyWithMention((href) =>
-          renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+          renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler)),
         ),
       }),
-      [mx, room, mentionClickHandler]
+      [mx, room, mentionClickHandler],
     );
     const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
       () =>
@@ -311,7 +311,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
           handleSpoilerClick: spoilerClickHandler,
           handleMentionClick: mentionClickHandler,
         }),
-      [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+      [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication],
     );
 
     const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
@@ -442,7 +442,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
             </Text>
           </Box>
         );
-      }
+      },
     );
 
     const handleOpen = (roomId: string, eventId: string) => {
@@ -542,5 +542,5 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
         </Box>
       </Menu>
     );
-  }
+  },
 );

src/app/features/search/Search.tsx

@@ -77,7 +77,7 @@ const useTopActiveRooms = (
   searchRoomType: SearchRoomType | undefined,
   rooms: string[],
   directs: string[],
-  spaces: string[]
+  spaces: string[],
 ) => {
   const mx = useMatrixClient();
 
@@ -98,7 +98,7 @@ const useTopActiveRooms = (
 const getDmUserId = (
   roomId: string,
   getRoom: (roomId: string) => Room | undefined,
-  myUserId: string
+  myUserId: string,
 ): string | undefined => {
   const room = getRoom(roomId);
   const targetUserId = room && guessDmRoomUserId(room, myUserId);
@@ -109,7 +109,7 @@ const useSearchTargetRooms = (
   searchRoomType: SearchRoomType | undefined,
   rooms: string[],
   directs: string[],
-  spaces: string[]
+  spaces: string[],
 ) =>
   useMemo(() => {
     if (searchRoomType === undefined) {
@@ -167,7 +167,7 @@ export function Search({ requestClose }: SearchProps) {
       }
       return roomName;
     },
-    [getRoom, mDirects, mx]
+    [getRoom, mDirects, mx],
   );
 
   const [result, search, resetSearch] = useAsyncSearch(targetRooms, getTargetStr, SEARCH_OPTIONS);
@@ -441,8 +441,8 @@ export function SearchModalRenderer() {
           setOpen(true);
         }
       },
-      [opened, setOpen]
-    )
+      [opened, setOpen],
+    ),
   );
 
   return opened && <Search requestClose={() => setOpen(false)} />;

src/app/features/settings/Settings.tsx

@@ -89,7 +89,7 @@ const useSettingsMenuItems = (): SettingsMenuItem[] =>
         icon: Icons.Info,
       },
     ],
-    []
+    [],
   );
 
 type SettingsProps = {
@@ -103,7 +103,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
   const profile = useUserProfile(userId);
   const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
   const avatarUrl = profile.avatarUrl
-    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const screenSize = useScreenSizeContext();

src/app/features/settings/account/ContactInfo.tsx

@@ -9,7 +9,7 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 export function ContactInformation() {
   const mx = useMatrixClient();
   const [threePIdsState, loadThreePIds] = useAsyncCallback(
-    useCallback(() => mx.getThreePids(), [mx])
+    useCallback(() => mx.getThreePids(), [mx]),
   );
   const threePIds =
     threePIdsState.status === AsyncStatus.Success ? threePIdsState.data.threepids : undefined;

src/app/features/settings/account/IgnoredUserList.tsx

@@ -19,8 +19,8 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
       async (uId: string) => {
         await mx.setIgnoredUsers([...userList, uId]);
       },
-      [mx, userList]
-    )
+      [mx, userList],
+    ),
   );
   const ignoring = ignoreState.status === AsyncStatus.Loading;
 
@@ -102,8 +102,8 @@ function IgnoredUserChip({ userId, userList }: { userId: string; userList: strin
   const [unignoreState, unignore] = useAsyncCallback(
     useCallback(
       () => mx.setIgnoredUsers(userList.filter((uId) => uId !== userId)),
-      [mx, userId, userList]
-    )
+      [mx, userId, userList],
+    ),
   );
 
   const handleUnignore = () => unignore();

src/app/features/settings/account/Profile.tsx

@@ -57,7 +57,7 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
 
   const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
   const avatarUrl = profile.avatarUrl
-    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const [imageFile, setImageFile] = useState<File>();
@@ -79,7 +79,7 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
       mx.setAvatarUrl(mxc);
       handleRemoveUpload();
     },
-    [mx, handleRemoveUpload]
+    [mx, handleRemoveUpload],
   );
 
   const handleRemoveAvatar = () => {
@@ -219,7 +219,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
   const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
 
   const [changeState, changeDisplayName] = useAsyncCallback(
-    useCallback((name: string) => mx.setDisplayName(name), [mx])
+    useCallback((name: string) => mx.setDisplayName(name), [mx]),
   );
   const changingDisplayName = changeState.status === AsyncStatus.Loading;
 

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

@@ -15,14 +15,14 @@ type AccountDataProps = {
 export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataProps) {
   const mx = useMatrixClient();
   const [accountDataTypes, setAccountDataKeys] = useState(() =>
-    Array.from(mx.store.accountData.keys())
+    Array.from(mx.store.accountData.keys()),
   );
 
   useAccountDataCallback(
     mx,
     useCallback(() => {
       setAccountDataKeys(Array.from(mx.store.accountData.keys()));
-    }, [mx])
+    }, [mx]),
   );
 
   return (

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

@@ -27,7 +27,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
     async (type, content) => {
       await mx.setAccountData(type, content);
     },
-    [mx]
+    [mx],
   );
 
   if (accountDataType !== undefined) {

src/app/features/settings/devices/DeviceTile.tsx

@@ -86,7 +86,7 @@ export function DeviceKeyDetails({ crypto }: DeviceKeyDetailsProps) {
     useCallback(() => {
       const keys = crypto.getOwnDeviceKeys();
       return keys;
-    }, [crypto])
+    }, [crypto]),
   );
 
   useEffect(() => {
@@ -118,8 +118,8 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
         await mx.setDeviceDetails(device.device_id, { display_name: name });
         await refreshDeviceList();
       },
-      [mx, device.device_id, refreshDeviceList]
-    )
+      [mx, device.device_id, refreshDeviceList],
+    ),
   );
 
   const renaming = renameState.status === AsyncStatus.Loading;

src/app/features/settings/devices/Devices.tsx

@@ -49,19 +49,19 @@ export function Devices({ requestClose }: DevicesProps) {
   const verificationStatus = useDeviceVerificationStatus(
     crypto,
     mx.getSafeUserId(),
-    currentDevice?.device_id
+    currentDevice?.device_id,
   );
 
   const otherDevicesId = useDeviceIds(otherDevices);
   const unverifiedDeviceCount = useUnverifiedDeviceCount(
     crypto,
     mx.getSafeUserId(),
-    otherDevicesId
+    otherDevicesId,
   );
 
   const defaultSecretStorageKeyId = useSecretStorageDefaultKeyId();
   const defaultSecretStorageKeyContent = useSecretStorageKeyContent(
-    defaultSecretStorageKeyId ?? ''
+    defaultSecretStorageKeyId ?? '',
   );
 
   return (

src/app/features/settings/devices/LocalBackup.tsx

@@ -30,8 +30,8 @@ function ExportKeys() {
         });
         FileSaver.saveAs(blob, 'lotus-keys.txt');
       },
-      [mx]
-    )
+      [mx],
+    ),
   );
 
   const exporting = exportState.status === AsyncStatus.Loading;
@@ -176,8 +176,8 @@ function ImportKeys({ file, onDone }: ImportKeysProps) {
 
         await crypto.importRoomKeysAsJson(keys);
       },
-      [file, mx]
-    )
+      [file, mx],
+    ),
   );
 
   const decrypting = decryptState.status === AsyncStatus.Loading;

src/app/features/settings/devices/OtherDevices.tsx

@@ -37,7 +37,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
       withSearchParam(authUrl, {
         action: accountManagementActions.sessionsList,
       }),
-      '_blank'
+      '_blank',
     );
   }, [authMetadata, accountManagementActions]);
 
@@ -51,10 +51,10 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
           action: accountManagementActions.sessionEnd,
           device_id: deviceId,
         }),
-        '_blank'
+        '_blank',
       );
     },
-    [authMetadata, accountManagementActions]
+    [authMetadata, accountManagementActions],
   );
 
   const handleToggleDelete = useCallback((deviceId: string) => {
@@ -78,7 +78,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
       async (authDict?: AuthDict) => {
         await mx.deleteMultipleDevices(Array.from(deleted), authDict);
       },
-      [mx, deleted]
+      [mx, deleted],
     ),
     useCallback(
       (state: typeof deleteState) => {
@@ -88,11 +88,11 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
         }
         setDeleteState(state);
       },
-      [refreshDeviceList]
-    )
+      [refreshDeviceList],
+    ),
   );
   const [authData, deleteError] = useUIAMatrixError(
-    deleteState.status === AsyncStatus.Error ? deleteState.error : undefined
+    deleteState.status === AsyncStatus.Error ? deleteState.error : undefined,
   );
   const deleting = deleteState.status === AsyncStatus.Loading || authData !== undefined;
 

src/app/features/settings/devices/Verification.tsx

@@ -177,7 +177,7 @@ export function VerifyOtherDeviceTile({ crypto, deviceId }: VerifyOtherDeviceTil
       const requestPromise = crypto.requestDeviceVerification(mx.getSafeUserId(), deviceId);
       return requestPromise;
     }, [mx, crypto, deviceId]),
-    setRequestState
+    setRequestState,
   );
 
   const handleExit = useCallback(() => {
@@ -277,7 +277,7 @@ export function DeviceVerificationOptions() {
         withSearchParam(authUrl, {
           action: accountManagementActions.crossSigningReset,
         }),
-        '_blank'
+        '_blank',
       );
       return;
     }

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

@@ -95,7 +95,7 @@ function GlobalPackSelector({
   const removeSelected = (adds: PackAddress[]) => {
     setSelected((addresses) => {
       const newAddresses = addresses.filter(
-        (addr) => !adds.find((address) => packAddressEqual(addr, address))
+        (addr) => !adds.find((address) => packAddressEqual(addr, address)),
       );
       return newAddresses;
     });
@@ -141,7 +141,7 @@ function GlobalPackSelector({
                 .map((pack) => pack.address)
                 .filter((addr) => addr !== undefined);
               const allSelected = roomPackAddresses.every((addr) =>
-                selected.find((address) => packAddressEqual(addr, address))
+                selected.find((address) => packAddressEqual(addr, address)),
               );
 
               return (
@@ -269,9 +269,9 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
   const nonGlobalPacks = useMemo(
     () =>
       roomsImagePack.filter(
-        (pack) => !globalPacks.find((p) => packAddressEqual(pack.address, p.address))
+        (pack) => !globalPacks.find((p) => packAddressEqual(pack.address, p.address)),
       ),
-    [roomsImagePack, globalPacks]
+    [roomsImagePack, globalPacks],
   );
 
   const [selectedPacks, setSelectedPacks] = useState<PackAddress[]>([]);
@@ -280,9 +280,9 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
   const unselectedGlobalPacks = useMemo(
     () =>
       nonGlobalPacks.filter(
-        (pack) => !selectedPacks.find((addr) => packAddressEqual(pack.address, addr))
+        (pack) => !selectedPacks.find((addr) => packAddressEqual(pack.address, addr)),
       ),
-    [selectedPacks, nonGlobalPacks]
+    [selectedPacks, nonGlobalPacks],
   );
 
   const handleRemove = (address: PackAddress) => {
@@ -321,7 +321,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
       });
 
       await mx.setAccountData(AccountDataEvent.PoniesEmoteRooms, updatedContent);
-    }, [mx, selectedPacks, removedPacks])
+    }, [mx, selectedPacks, removedPacks]),
   );
 
   const resetChanges = useCallback(() => {

src/app/features/settings/general/General.tsx

@@ -85,7 +85,7 @@ const ThemeSelector = as<'div', ThemeSelectorProps>(
         ))}
       </Box>
     </Menu>
-  )
+  ),
 );
 
 function SelectTheme({ disabled }: { disabled?: boolean }) {
@@ -321,7 +321,7 @@ function Appearance() {
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [perMessageProfiles, setPerMessageProfiles] = useSetting(
     settingsAtom,
-    'perMessageProfiles'
+    'perMessageProfiles',
   );
   const [lotusTerminal, setLotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
 
@@ -831,7 +831,7 @@ function Calls() {
   const [cameraOnJoin, setCameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');
   const [callNoiseSuppression, setCallNoiseSuppression] = useSetting(
     settingsAtom,
-    'callNoiseSuppression'
+    'callNoiseSuppression',
   );
   const [pttMode, setPttMode] = useSetting(settingsAtom, 'pttMode');
   const [pttKey, setPttKey] = useSetting(settingsAtom, 'pttKey');
@@ -843,7 +843,7 @@ function Calls() {
       if (keyListenerRef.current)
         window.removeEventListener('keydown', keyListenerRef.current, true);
     },
-    []
+    [],
   );
 
   const handleKeyBind = useCallback(() => {
@@ -1104,15 +1104,15 @@ function SelectMessageSpacing() {
 function Messages() {
   const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
     settingsAtom,
-    'legacyUsernameColor'
+    'legacyUsernameColor',
   );
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
     settingsAtom,
-    'hideMembershipEvents'
+    'hideMembershipEvents',
   );
   const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(
     settingsAtom,
-    'hideNickAvatarEvents'
+    'hideNickAvatarEvents',
   );
   const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');

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

@@ -18,7 +18,7 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 const getAllMessageDefaultRule = (
   ruleId: RuleId,
   encrypted: boolean,
-  oneToOne: boolean
+  oneToOne: boolean,
 ): PushRuleData => {
   const conditions: PushRuleCondition[] = [];
   if (oneToOne)
@@ -66,7 +66,7 @@ function AllMessagesModeSwitcher({
       const actions = getModeActions(mode);
       await mx.setPushRuleActions('global', kind, ruleId, actions);
     },
-    [mx, getModeActions, kind, ruleId]
+    [mx, getModeActions, kind, ruleId],
   );
 
   return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
@@ -76,7 +76,7 @@ export function AllMessagesNotifications() {
   const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
   const pushRules = useMemo(
     () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
-    [pushRulesEvt]
+    [pushRulesEvt],
   );
 
   return (

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

@@ -33,8 +33,8 @@ function KeywordInput() {
         });
         setKeyword('');
       },
-      [mx]
-    )
+      [mx],
+    ),
   );
   const addingKeyword = keywordState.status === AsyncStatus.Loading;
 
@@ -114,8 +114,8 @@ function KeywordCross({ pushRule }: PushRulesProps) {
   const [removeState, remove] = useAsyncCallback(
     useCallback(
       () => mx.deletePushRule('global', PushRuleKind.ContentSpecific, pushRule.rule_id),
-      [mx, pushRule]
-    )
+      [mx, pushRule],
+    ),
   );
 
   const removing = removeState.status === AsyncStatus.Loading;
@@ -145,10 +145,10 @@ function KeywordModeSwitcher({ pushRule }: PushRulesProps) {
         'global',
         PushRuleKind.ContentSpecific,
         pushRule.rule_id,
-        actions
+        actions,
       );
     },
-    [mx, getModeActions, pushRule]
+    [mx, getModeActions, pushRule],
   );
 
   return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
@@ -158,13 +158,13 @@ export function KeywordMessagesNotifications() {
   const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
   const pushRules = useMemo(
     () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
-    [pushRulesEvt]
+    [pushRulesEvt],
   );
 
   const keywordPushRules = useMemo(() => {
     const content = pushRules.global.content ?? [];
     return content.filter(
-      (pushRule) => pushRule.default === false && typeof pushRule.pattern === 'string'
+      (pushRule) => pushRule.default === false && typeof pushRule.pattern === 'string',
     );
   }, [pushRules]);
 

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

@@ -28,7 +28,7 @@ const useNotificationModeStr = (): Record<NotificationMode, string> =>
       [NotificationMode.Notify]: 'Notify Silent',
       [NotificationMode.NotifyLoud]: 'Notify Loud',
     }),
-    []
+    [],
   );
 
 type NotificationModeSwitcherProps = {

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

@@ -32,7 +32,7 @@ const getDefaultIsUserMention = (userId: string): PushRuleData =>
         key: 'content.m\\.mentions.user_ids',
         value: userId,
       },
-    ]
+    ],
   );
 
 const DefaultContainsDisplayName = makePushRuleData(
@@ -43,7 +43,7 @@ const DefaultContainsDisplayName = makePushRuleData(
     {
       kind: ConditionKind.ContainsDisplayName,
     },
-  ]
+  ],
 );
 
 const getDefaultContainsUsername = (username: string) =>
@@ -52,7 +52,7 @@ const getDefaultContainsUsername = (username: string) =>
     RuleId.ContainsUserName,
     getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
     undefined,
-    username
+    username,
   );
 
 const DefaultIsRoomMention = makePushRuleData(
@@ -69,7 +69,7 @@ const DefaultIsRoomMention = makePushRuleData(
       kind: ConditionKind.SenderNotificationPermission,
       key: 'room',
     },
-  ]
+  ],
 );
 
 const DefaultAtRoomNotification = makePushRuleData(
@@ -86,7 +86,7 @@ const DefaultAtRoomNotification = makePushRuleData(
       kind: ConditionKind.SenderNotificationPermission,
       key: 'room',
     },
-  ]
+  ],
 );
 
 type PushRulesProps = {
@@ -105,7 +105,7 @@ function MentionModeSwitcher({ ruleId, pushRules, defaultPushRuleData }: PushRul
       const actions = getModeActions(mode);
       await mx.setPushRuleActions('global', kind, ruleId, actions);
     },
-    [mx, getModeActions, kind, ruleId]
+    [mx, getModeActions, kind, ruleId],
   );
 
   return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
@@ -118,7 +118,7 @@ export function SpecialMessagesNotifications() {
   const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
   const pushRules = useMemo(
     () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
-    [pushRulesEvt]
+    [pushRulesEvt],
   );
 
   return (

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

@@ -39,8 +39,8 @@ function EmailNotification() {
           kind: null,
         } as unknown as IPusherRequest);
       },
-      [mx]
-    )
+      [mx],
+    ),
   );
 
   const handleChange = (value: boolean) => {
@@ -89,7 +89,7 @@ export function SystemNotification() {
   const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
   const [isNotificationSounds, setIsNotificationSounds] = useSetting(
     settingsAtom,
-    'isNotificationSounds'
+    'isNotificationSounds',
   );
 
   const requestNotificationPermission = () => {

src/app/features/space-settings/SpaceSettings.tsx

@@ -53,7 +53,7 @@ const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
         icon: Icons.Terminal,
       },
     ],
-    []
+    [],
   );
 
 type SpaceSettingsProps = {
@@ -71,7 +71,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
   const joinRuleContent = useRoomJoinRule(room);
 
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined)
     : undefined;
 
   const screenSize = useScreenSizeContext();