open profile view on left side in member drawer

This commit is contained in:
Ajay Bura 2025-08-09 16:23:20 +05:30
parent 2f77b3fd85
commit a44cefedcf
4 changed files with 10 additions and 8 deletions

View file

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

View file

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

View file

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

View file

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