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/pages/client/inbox/Invites.tsx

@@ -107,7 +107,7 @@ const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean
   const senderId = memberEvent?.getSender();
 
   const senderName = senderId
-    ? getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId
+    ? (getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId)
     : undefined;
   const inviteTs = memberEvent?.getTs();
   const reason =
@@ -177,10 +177,10 @@ function InviteCard({
         await addRoomIdToMDirect(mx, invite.roomId, dmUserId);
       }
       onNavigate(invite.roomId, invite.isSpace);
-    }, [mx, invite, userId, onNavigate])
+    }, [mx, invite, userId, onNavigate]),
   );
   const [leaveState, leave] = useAsyncCallback<Record<string, never>, MatrixError, []>(
-    useCallback(() => mx.leave(invite.roomId), [mx, invite])
+    useCallback(() => mx.leave(invite.roomId), [mx, invite]),
   );
 
   const joining =
@@ -482,7 +482,7 @@ function UnknownInvites({
       const roomIds = invites.map((invite) => invite.roomId);
 
       await rateLimitedActions(roomIds, (roomId) => mx.leave(roomId));
-    }, [mx, invites])
+    }, [mx, invites]),
   );
 
   const declining = declineAllStatus.status === AsyncStatus.Loading;
@@ -560,7 +560,7 @@ function SpamInvites({
       const roomIds = invites.map((invite) => invite.roomId);
 
       await rateLimitedActions(roomIds, (roomId) => mx.leave(roomId));
-    }, [mx, invites])
+    }, [mx, invites]),
   );
 
   const [reportAllStatus, reportAll] = useAsyncCallback(
@@ -568,18 +568,18 @@ function SpamInvites({
       const roomIds = invites.map((invite) => invite.roomId);
 
       await rateLimitedActions(roomIds, (roomId) => mx.reportRoom(roomId, 'Spam Invite'));
-    }, [mx, invites])
+    }, [mx, invites]),
   );
 
   const ignoredUsers = useIgnoredUsers();
   const unignoredUsers = Array.from(new Set(invites.map((invite) => invite.senderId))).filter(
-    (user) => !ignoredUsers.includes(user)
+    (user) => !ignoredUsers.includes(user),
   );
   const [blockAllStatus, blockAll] = useAsyncCallback(
     useCallback(
       () => mx.setIgnoredUsers([...ignoredUsers, ...unignoredUsers]),
-      [mx, ignoredUsers, unignoredUsers]
-    )
+      [mx, ignoredUsers, unignoredUsers],
+    ),
   );
 
   const declining = declineAllStatus.status === AsyncStatus.Loading;
@@ -736,7 +736,7 @@ export function Invites() {
   const [compact, setCompact] = useState(document.body.clientWidth <= COMPACT_CARD_WIDTH);
   useElementSizeObserver(
     useCallback(() => containerRef.current, []),
-    useCallback((width) => setCompact(width <= COMPACT_CARD_WIDTH), [])
+    useCallback((width) => setCompact(width <= COMPACT_CARD_WIDTH), []),
   );
   const screenSize = useScreenSizeContext();
 

src/app/pages/client/inbox/Notifications.tsx

@@ -111,7 +111,7 @@ type SilentReloadTimeline = () => Promise<void>;
 
 const groupNotifications = (
   notifications: INotification[],
-  allowRooms: Set<string>
+  allowRooms: Set<string>,
 ): RoomNotificationsGroup[] => {
   const groups: RoomNotificationsGroup[] = [];
   notifications.forEach((notification) => {
@@ -133,7 +133,7 @@ const groupNotifications = (
 
 const useNotificationTimeline = (
   paginationLimit: number,
-  onlyHighlight?: boolean
+  onlyHighlight?: boolean,
 ): [NotificationTimeline, LoadTimeline, SilentReloadTimeline] => {
   const mx = useMatrixClient();
   const allRooms = useAtomValue(allRoomsAtom);
@@ -149,10 +149,10 @@ const useNotificationTimeline = (
       return mx.http.authedRequest<INotificationsResponse>(
         Method.Get,
         '/notifications',
-        queryParams
+        queryParams,
       );
     },
-    [mx]
+    [mx],
   );
 
   const loadTimeline: LoadTimeline = useCallback(
@@ -163,7 +163,7 @@ const useNotificationTimeline = (
       const data = await fetchNotifications(
         from,
         paginationLimit,
-        onlyHighlight ? 'highlight' : undefined
+        onlyHighlight ? 'highlight' : undefined,
       );
       const groups = groupNotifications(data.notifications, allJoinedRooms);
 
@@ -177,7 +177,7 @@ const useNotificationTimeline = (
         return currentTimeline;
       });
     },
-    [paginationLimit, onlyHighlight, fetchNotifications, allJoinedRooms]
+    [paginationLimit, onlyHighlight, fetchNotifications, allJoinedRooms],
   );
 
   /**
@@ -188,7 +188,7 @@ const useNotificationTimeline = (
     const data = await fetchNotifications(
       undefined,
       paginationLimit,
-      onlyHighlight ? 'highlight' : undefined
+      onlyHighlight ? 'highlight' : undefined,
     );
     const groups = groupNotifications(data.notifications, allJoinedRooms);
     setNotificationTimeline({
@@ -243,10 +243,10 @@ function RoomNotificationsGroupComp({
     () => ({
       ...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>(
     () =>
@@ -256,7 +256,7 @@ function RoomNotificationsGroupComp({
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
       }),
-    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication],
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IRoomEvent, string, GetContentCallback]>(
@@ -318,7 +318,7 @@ function RoomNotificationsGroupComp({
                 const editedEvent = getEditedEvent(
                   evt.event_id,
                   mEvent,
-                  evtTimeline.getTimelineSet()
+                  evtTimeline.getTimelineSet(),
                 );
                 const getContent = (() =>
                   editedEvent?.getContent()['m.new_content'] ??
@@ -395,7 +395,7 @@ function RoomNotificationsGroupComp({
           </Text>
         </Box>
       );
-    }
+    },
   );
 
   const handleOpenClick: MouseEventHandler = (evt) => {
@@ -484,14 +484,14 @@ function RoomNotificationsGroupComp({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(
+                            ? (mxcUrlToHttp(
                                 mx,
                                 senderAvatarMxc,
                                 useAuthentication,
                                 48,
                                 48,
-                                'crop'
-                              ) ?? undefined
+                                'crop',
+                              ) ?? undefined)
                             : undefined
                         }
                         alt={displayName}
@@ -550,13 +550,13 @@ function RoomNotificationsGroupComp({
 }
 
 const useNotificationsSearchParams = (
-  searchParams: URLSearchParams
+  searchParams: URLSearchParams,
 ): InboxNotificationsPathSearchParams =>
   useMemo(
     () => ({
       only: searchParams.get('only') ?? undefined,
     }),
-    [searchParams]
+    [searchParams],
   );
 
 const DEFAULT_REFRESH_MS = 7000;
@@ -585,7 +585,7 @@ export function Notifications() {
       setSearchParams(
         new URLSearchParams({
           only: 'highlight',
-        })
+        }),
       );
       return;
     }
@@ -594,7 +594,7 @@ export function Notifications() {
 
   const [notificationTimeline, _loadTimeline, silentReloadTimeline] = useNotificationTimeline(
     24,
-    onlyHighlight
+    onlyHighlight,
   );
   const [timelineState, loadTimeline] = useAsyncCallback(_loadTimeline);
 
@@ -610,12 +610,12 @@ export function Notifications() {
     useCallback(() => {
       silentReloadTimeline();
     }, [silentReloadTimeline]),
-    refreshIntervalTime
+    refreshIntervalTime,
   );
 
   const handleScrollTopVisibility = useCallback(
     (onTop: boolean) => setRefreshIntervalTime(onTop ? DEFAULT_REFRESH_MS : -1),
-    []
+    [],
   );
 
   useEffect(() => {