open profile view on left side in member drawer

src/app/components/UserRoomProfileRenderer.tsx

@@ -10,7 +10,7 @@ import { SpaceProvider } from '../hooks/useSpace';
 import { RoomProvider } from '../hooks/useRoom';
 
 function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
-  const { roomId, spaceId, userId, cords } = state;
+  const { roomId, spaceId, userId, cords, position } = state;
   const allJoinedRooms = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allJoinedRooms);
   const room = getRoom(roomId);
@@ -23,7 +23,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
   return (
     <PopOut
       anchor={cords}
-      position="Top"
+      position={position ?? 'Top'}
       align="Start"
       content={
         <FocusTrap

src/app/features/room/MembersDrawer.tsx

@@ -147,7 +147,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (!userId) return;
-    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect());
+    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect(), 'Left');
   };
 
   return (

src/app/state/hooks/userRoomProfile.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { RectCords } from 'folds';
+import { Position, RectCords } from 'folds';
 import { userRoomProfileAtom, UserRoomProfileState } from '../userRoomProfile';
 
 export const useUserRoomProfileState = (): UserRoomProfileState | undefined => {
@@ -24,14 +24,15 @@ type OpenCallback = (
   roomId: string,
   spaceId: string | undefined,
   userId: string,
-  cords: RectCords
+  cords: RectCords,
+  position?: Position
 ) => void;
 export const useOpenUserRoomProfile = (): OpenCallback => {
   const setUserRoomProfile = useSetAtom(userRoomProfileAtom);
 
   const open: OpenCallback = useCallback(
-    (roomId, spaceId, userId, cords) => {
-      setUserRoomProfile({ roomId, spaceId, userId, cords });
+    (roomId, spaceId, userId, cords, position) => {
+      setUserRoomProfile({ roomId, spaceId, userId, cords, position });
     },
     [setUserRoomProfile]
   );

src/app/state/userRoomProfile.ts

@@ -1,4 +1,4 @@
-import { RectCords } from 'folds';
+import { Position, RectCords } from 'folds';
 import { atom } from 'jotai';
 
 export type UserRoomProfileState = {
@@ -6,6 +6,7 @@ export type UserRoomProfileState = {
   roomId: string;
   spaceId?: string;
   cords: RectCords;
+  position?: Position;
 };
 
 export const userRoomProfileAtom = atom<UserRoomProfileState | undefined>(undefined);