fix - statuses sticking, and badge rendering

.changeset/fix-status-sticking-issue.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix status sometimes sticking in member tile

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

@@ -26,12 +26,7 @@ import { useNavigate } from 'react-router-dom';
 import { NavButton, NavItem, NavItemContent, NavItemOptions } from '$components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge';
 import { RoomAvatar, RoomIcon } from '$components/room-avatar';
-import {
-  getDirectRoomAvatarUrl,
-  getRoomAvatarUrl,
-  getStateEvent,
-  roomHaveUnread,
-} from '$utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl, roomHaveUnread } from '$utils/room';
 import { nameInitials } from '$utils/common';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useRoomUnread } from '$state/hooks/unread';
@@ -61,7 +56,7 @@ import { useRoomCreators } from '$hooks/useRoomCreators';
 import { useRoomPermissions } from '$hooks/useRoomPermissions';
 import { InviteUserPrompt } from '$components/invite-user-prompt';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
-import { useRoomName } from '$hooks/useRoomMeta';
+import { useRoomName, useRoomTopic } from '$hooks/useRoomMeta';
 import { nicknamesAtom } from '$state/nicknames';
 import { useRoomNavigate } from '$hooks/useRoomNavigate';
 
@@ -74,7 +69,6 @@ import { CallControlState } from '$plugins/call/CallControlState';
 import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '$hooks/useLivekitSupport';
 import { Presence, useUserPresence } from '$hooks/useUserPresence';
-import { StateEvent } from '$types/matrix/room';
 import { AvatarPresence, PresenceBadge } from '$components/presence';
 import { RoomNavUser } from './RoomNavUser';
 
@@ -293,13 +287,8 @@ export function RoomNavItem({
   const matrixRoomName = useRoomName(room);
   const roomName = (dmUserId && nicknames[dmUserId]) || matrixRoomName;
   const presence = useUserPresence(dmUserId ?? '');
-  const [topicEvent, setTopicEvent] = useState(getStateEvent(room, StateEvent.RoomTopic));
-
-  // Ensures that the description does not stick to the position the room is in the row
-  useEffect(() => setTopicEvent(getStateEvent(room, StateEvent.RoomTopic)), [room, setTopicEvent]);
-  const roomDescription = direct
-    ? (customDMCards && (topicEvent?.getContent().topic as string)) || presence?.status
-    : undefined;
+  const getRoomTopic = useRoomTopic(room);
+  const roomTopic = direct ? ((customDMCards && getRoomTopic) ?? presence?.status) : undefined;
 
   const { navigateRoom } = useRoomNavigate();
   const navigate = useNavigate();
@@ -449,7 +438,7 @@ export function RoomNavItem({
                 >
                   {roomName}
                 </Text>
-                {roomDescription && (
+                {roomTopic && (
                   <Text
                     truncate
                     size="T200"
@@ -459,7 +448,7 @@ export function RoomNavItem({
                       marginTop: '-2px',
                     }}
                   >
-                    {roomDescription}
+                    {roomTopic}
                   </Text>
                 )}
               </Box>

src/app/hooks/useUserPresence.ts

@@ -25,22 +25,27 @@ const getUserPresence = (user: User): UserPresence => ({
 export const useUserPresence = (userId: string): UserPresence | undefined => {
   const mx = useMatrixClient();
   const user = mx.getUser(userId);
-
   const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined));
 
   useEffect(() => {
-    const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => {
-      if (u.userId === user?.userId) {
+    if (!user) {
+      setPresence(undefined);
+      return undefined;
+    }
+    setPresence(getUserPresence(user));
+    const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (e, u) => {
+      if (u.userId === user.userId) {
         setPresence(getUserPresence(user));
       }
     };
-    user?.on(UserEvent.Presence, updatePresence);
-    user?.on(UserEvent.CurrentlyActive, updatePresence);
-    user?.on(UserEvent.LastPresenceTs, updatePresence);
+    user.on(UserEvent.Presence, updatePresence);
+    user.on(UserEvent.CurrentlyActive, updatePresence);
+    user.on(UserEvent.LastPresenceTs, updatePresence);
+
     return () => {
-      user?.removeListener(UserEvent.Presence, updatePresence);
-      user?.removeListener(UserEvent.CurrentlyActive, updatePresence);
-      user?.removeListener(UserEvent.LastPresenceTs, updatePresence);
+      user.removeListener(UserEvent.Presence, updatePresence);
+      user.removeListener(UserEvent.CurrentlyActive, updatePresence);
+      user.removeListener(UserEvent.LastPresenceTs, updatePresence);
     };
   }, [user]);
 

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

@@ -15,7 +15,7 @@ import {
 } from '$components/sidebar';
 import { RoomAvatar } from '$components/room-avatar';
 import { UserAvatar } from '$components/user-avatar';
-import { getDirectRoomAvatarUrl } from '$utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '$utils/room';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { nameInitials } from '$utils/common';
 import { getCanonicalAliasOrRoomId, mxcUrlToHttp } from '$utils/matrix';
@@ -69,7 +69,10 @@ function DMItem({ room, selected }: DMItemProps) {
         <Avatar size="400" radii="400">
           <RoomAvatar
             roomId={room.roomId}
-            src={getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)}
+            src={
+              getRoomAvatarUrl(mx, room, 96, useAuthentication) ||
+              getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+            }
             alt={room.name}
             renderFallback={() => (
               <Text as="span" size="H6">