feat: implement useMarkAsRead hook for improved unread state management and update notification handling

src/app/pages/client/sidebar/DirectTab.tsx

@@ -3,6 +3,9 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
+import PaarrotSVG from '../../../../../public/res/svg/paarrot.svg';
+import PaarrotUnreadSVG from '../../../../../public/res/svg/paarrot-unread.svg';
+import PaarrotHighlightSVG from '../../../../../public/res/svg/paarrot-highlight.svg';
 import { useDirects } from '../../../state/hooks/roomList';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
@@ -21,7 +24,7 @@ import { UnreadBadge } from '../../../components/unread-badge';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useDirectRooms } from '../direct/useDirectRooms';
-import { markAsRead } from '../../../utils/notifications';
+import { useMarkRoomsAsRead } from '../../../hooks/useMarkAsRead';
 import { stopPropagation } from '../../../utils/keyboard';
 import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
@@ -34,10 +37,11 @@ const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
   const mx = useMatrixClient();
+  const markRoomsAsRead = useMarkRoomsAsRead(mx);
 
   const handleMarkAsRead = () => {
     if (!unread) return;
-    orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
+    markRoomsAsRead(orphanRooms, hideActivity);
     requestClose();
   };
 
@@ -98,11 +102,20 @@ export function DirectTab() {
           <SidebarAvatar
             as="button"
             ref={triggerRef}
-            outlined
             onClick={handleDirectClick}
             onContextMenu={handleContextMenu}
           >
-            <Icon src={Icons.User} filled={directSelected} />
+            <img
+              src={
+                directUnread?.highlight
+                  ? PaarrotHighlightSVG
+                  : directUnread?.total
+                  ? PaarrotUnreadSVG
+                  : PaarrotSVG
+              }
+              alt="Direct Messages"
+              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+            />
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>