hidden shit, and online status bars, search settings

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

@@ -24,7 +24,7 @@ import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
-import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
+import { getCanonicalAliasOrRoomId, guessDmRoomUserId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
 import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
@@ -46,6 +46,8 @@ import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { StateEvent } from '../../../types/matrix/room';
 import { mDirectAtom } from '../../state/mDirectList';
 import { useOpenCreateSubRoomModal } from '../../state/hooks/createRoomModal';
+import { PresenceAvatar } from '../../components/presence';
+import { Presence, useUserPresence } from '../../hooks/useUserPresence';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -289,13 +291,17 @@ export function RoomNavItem({
   const avatarUrl = direct
     ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
     : getRoomAvatarUrl(mx, room, 96, useAuthentication);
+
+  const mDirects = useAtomValue(mDirectAtom);
+  const isDirect = Boolean(direct || mDirects.has(room.roomId));
+  const dmUserId = isDirect ? guessDmRoomUserId(room, mx.getSafeUserId()) : undefined;
+  const dmPresence = useUserPresence(dmUserId ?? '');
   
   const shouldShowIcon = !hideIcon || (hideIcon && avatarUrl);
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const mDirects = useAtomValue(mDirectAtom);
 
   // Get first participated thread for preview
   const firstThreadPreview = useMemo(() => {
@@ -317,7 +323,7 @@ export function RoomNavItem({
 
   // Get parent space for DMs
   const parentSpaceInfo = (() => {
-    if (!direct || !mDirects.has(room.roomId)) return undefined;
+    if (!isDirect || !mDirects.has(room.roomId)) return undefined;
     
     const orphanParents = getOrphanParents(roomToParents, room.roomId);
     if (orphanParents.length === 0) return undefined;
@@ -383,29 +389,60 @@ export function RoomNavItem({
         <NavLink to={linkPath} onClick={handleRoomClick}>
           <NavItemContent>
             <Box as="span" grow="Yes" alignItems="Center" gap={shouldShowIcon ? "200" : "100"}>
-              {shouldShowIcon && (
-                <Avatar size="200" radii="400">
-                  {showAvatar || avatarUrl ? (
-                  <RoomAvatar
-                    roomId={room.roomId}
-                    src={avatarUrl}
-                    alt={room.name}
-                    renderFallback={() => (
-                      <Text as="span" size="H6">
-                        {nameInitials(room.name)}
-                      </Text>
-                    )}
-                  />
+              {shouldShowIcon &&
+                (isDirect ? (
+                  <PresenceAvatar
+                    presence={
+                      dmUserId && dmUserId !== mx.getSafeUserId()
+                        ? dmPresence?.presence ?? Presence.Offline
+                        : Presence.Offline
+                    }
+                  >
+                    <Avatar size="200" radii="400">
+                      {showAvatar || avatarUrl ? (
+                        <RoomAvatar
+                          roomId={room.roomId}
+                          src={avatarUrl}
+                          alt={room.name}
+                          renderFallback={() => (
+                            <Text as="span" size="H6">
+                              {nameInitials(room.name)}
+                            </Text>
+                          )}
+                        />
+                      ) : (
+                        <RoomIcon
+                          style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                          filled={selected}
+                          size="100"
+                          joinRule={room.getJoinRule()}
+                        />
+                      )}
+                    </Avatar>
+                  </PresenceAvatar>
                 ) : (
-                  <RoomIcon
-                    style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
-                    filled={selected}
-                    size="100"
-                    joinRule={room.getJoinRule()}
-                  />
-                )}
-                </Avatar>
-              )}
+                  <Avatar size="200" radii="400">
+                    {showAvatar || avatarUrl ? (
+                      <RoomAvatar
+                        roomId={room.roomId}
+                        src={avatarUrl}
+                        alt={room.name}
+                        renderFallback={() => (
+                          <Text as="span" size="H6">
+                            {nameInitials(room.name)}
+                          </Text>
+                        )}
+                      />
+                    ) : (
+                      <RoomIcon
+                        style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                        filled={selected}
+                        size="100"
+                        joinRule={room.getJoinRule()}
+                      />
+                    )}
+                  </Avatar>
+                ))}
               <Box as="span" grow="Yes" direction="Column" style={{ overflow: 'hidden', minWidth: 0 }}>
                 <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
                   {room.name}