open new user profile in all places

src/app/components/event-readers/EventReaders.tsx

@@ -19,9 +19,10 @@ import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { openProfileViewer } from '../../../client/action/navigation';
 import { UserAvatar } from '../user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../hooks/useSpace';
 
 export type EventReadersProps = {
   room: Room;
@@ -33,6 +34,8 @@ export const EventReaders = as<'div', EventReadersProps>(
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const latestEventReaders = useRoomEventReaders(room, eventId);
+    const openProfile = useOpenUserRoomProfile();
+    const space = useSpaceOptionally();
 
     const getName = (userId: string) =>
       getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -57,19 +60,32 @@ export const EventReaders = as<'div', EventReadersProps>(
             <Box className={css.Content} direction="Column">
               {latestEventReaders.map((readerId) => {
                 const name = getName(readerId);
-                const avatarMxcUrl = room
+                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
-                  .getMember(readerId)
+                const avatarUrl = avatarMxcUrl
-                  ?.getMxcAvatarUrl();
+                  ? mx.mxcUrlToHttp(
-                const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication) : undefined;
+                      avatarMxcUrl,
+                      100,
+                      100,
+                      'crop',
+                      undefined,
+                      false,
+                      useAuthentication
+                    )
+                  : undefined;
 
                 return (
                   <MenuItem
                     key={readerId}
                     style={{ padding: `0 ${config.space.S200}` }}
                     radii="400"
-                    onClick={() => {
+                    onClick={(event) => {
-                      requestClose();
+                      openProfile(
-                      openProfileViewer(readerId, room.roomId);
+                        room.roomId,
+                        space?.roomId,
+                        readerId,
+                        event.currentTarget.getBoundingClientRect(),
+                        'Bottom'
+                      );
                     }}
                     before={
                       <Avatar size="200">

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

@@ -20,12 +20,13 @@ import { getMemberDisplayName } from '../../../utils/room';
 import { eventWithShortcode, getMxIdLocalPart } from '../../../utils/matrix';
 import * as css from './ReactionViewer.css';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { openProfileViewer } from '../../../../client/action/navigation';
 import { useRelations } from '../../../hooks/useRelations';
 import { Reaction } from '../../../components/message';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../../hooks/useSpace';
 
 export type ReactionViewerProps = {
   room: Room;
@@ -41,6 +42,8 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
       relations,
       useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
     );
+    const space = useSpaceOptionally();
+    const openProfile = useOpenUserRoomProfile();
 
     const [selectedKey, setSelectedKey] = useState<string>(() => {
       if (initialKey) return initialKey;
@@ -111,24 +114,31 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                   const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
 
                   const avatarMxcUrl = member?.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
+                  const avatarUrl = avatarMxcUrl
-                    avatarMxcUrl,
+                    ? mx.mxcUrlToHttp(
-                    100,
+                        avatarMxcUrl,
-                    100,
+                        100,
-                    'crop',
+                        100,
-                    undefined,
+                        'crop',
-                    false,
+                        undefined,
-                    useAuthentication
+                        false,
-                  ) : undefined;
+                        useAuthentication
+                      )
+                    : undefined;
 
                   return (
                     <MenuItem
                       key={senderId}
                       style={{ padding: `0 ${config.space.S200}` }}
                       radii="400"
-                      onClick={() => {
+                      onClick={(event) => {
-                        requestClose();
+                        openProfile(
-                        openProfileViewer(senderId, room.roomId);
+                          room.roomId,
+                          space?.roomId,
+                          senderId,
+                          event.currentTarget.getBoundingClientRect(),
+                          'Bottom'
+                        );
                       }}
                       before={
                         <Avatar size="200">

src/app/hooks/useMentionClickHandler.ts

@@ -3,14 +3,17 @@ import { useNavigate } from 'react-router-dom';
 import { useRoomNavigate } from './useRoomNavigate';
 import { useMatrixClient } from './useMatrixClient';
 import { isRoomId, isUserId } from '../utils/matrix';
-import { openProfileViewer } from '../../client/action/navigation';
 import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
 import { _RoomSearchParams } from '../pages/paths';
+import { useOpenUserRoomProfile } from '../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from './useSpace';
 
 export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
   const mx = useMatrixClient();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const navigate = useNavigate();
+  const openProfile = useOpenUserRoomProfile();
+  const space = useSpaceOptionally();
 
   const handleClick: ReactEventHandler<HTMLElement> = useCallback(
     (evt) => {
@@ -21,7 +24,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
       if (typeof mentionId !== 'string') return;
 
       if (isUserId(mentionId)) {
-        openProfileViewer(mentionId, roomId);
+        openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
         return;
       }
 
@@ -37,7 +40,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
       navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
     },
-    [mx, navigate, navigateRoom, navigateSpace, roomId]
+    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
   );
 
   return handleClick;