From 9264bf6adb9e441741cfd49cb10333a32430be70 Mon Sep 17 00:00:00 2001 From: Rodean Fraser Date: Tue, 11 Nov 2025 21:49:59 -0500 Subject: [PATCH 1/2] feature/BA-2725 profile summary drawer --- .../context/ChatRoomProvider/constants.ts | 8 +++ .../common/context/ChatRoomProvider/index.tsx | 3 + .../common/context/ChatRoomProvider/types.ts | 16 +++++ .../common/graphql/fragments/RoomTitle.ts | 7 +- .../modules/messages/common/utils.ts | 17 +++-- .../AllChatRoomsList/ChatRoomItem/index.tsx | 4 +- .../ChatRoomHeader/ChatRoomOptions/index.tsx | 4 ++ .../ChatRoomHeader/ChatRoomOptions/types.ts | 1 + .../web/ChatRoom/ChatRoomHeader/index.tsx | 27 +++++-- .../web/ChatRoomsComponent/constants.ts | 1 + .../messages/web/ChatRoomsComponent/index.tsx | 18 +++-- .../messages/web/ChatRoomsComponent/types.ts | 3 + .../MessagesList/__storybook__/stories.tsx | 2 + .../web/ProfileSummary/Body/index.tsx | 71 +++++++++++++++++++ .../web/ProfileSummary/Body/styled.tsx | 32 +++++++++ .../messages/web/ProfileSummary/Body/types.ts | 10 +++ .../web/ProfileSummary/Header/index.tsx | 30 ++++++++ .../web/ProfileSummary/Header/styled.tsx | 15 ++++ .../web/ProfileSummary/Header/types.ts | 7 ++ .../messages/web/ProfileSummary/index.tsx | 43 +++++++++++ .../messages/web/ProfileSummary/types.ts | 3 + .../web/icons/ProfileNoCircleIcon/index.tsx | 20 ++++++ .../components/web/icons/index.ts | 1 + 23 files changed, 326 insertions(+), 17 deletions(-) create mode 100644 packages/components/modules/messages/web/ProfileSummary/Body/index.tsx create mode 100644 packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx create mode 100644 packages/components/modules/messages/web/ProfileSummary/Body/types.ts create mode 100644 packages/components/modules/messages/web/ProfileSummary/Header/index.tsx create mode 100644 packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx create mode 100644 packages/components/modules/messages/web/ProfileSummary/Header/types.ts create mode 100644 packages/components/modules/messages/web/ProfileSummary/index.tsx create mode 100644 packages/components/modules/messages/web/ProfileSummary/types.ts create mode 100644 packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx diff --git a/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts b/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts index a5046481..19f23a3c 100644 --- a/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts +++ b/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts @@ -3,4 +3,12 @@ import { ChatRoomState } from './types' export const INITIAL_CHAT_ROOM_STATE: ChatRoomState = { id: undefined, participants: undefined, + leftPanelContent: 0, + singleChatProfileDetails: { + pk: undefined, + name: undefined, + username: undefined, + imageUrl: undefined, + biography: undefined, + }, } diff --git a/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx b/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx index 58c69091..ab4819df 100644 --- a/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx +++ b/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx @@ -14,8 +14,11 @@ const ChatRoomProvider: FC = ({ children }) => { if (!storeRef.current) { storeRef.current = create((set) => ({ ...INITIAL_CHAT_ROOM_STATE, + setChatRoom: (state: ChatRoomState) => set(state), resetChatRoom: () => set({ ...INITIAL_CHAT_ROOM_STATE }), + setLeftPanelContent: (content: number) => set({ leftPanelContent: content }), + setSingleChatProfileDetails: (details) => set({ singleChatProfileDetails: { ...details } }), })) } return {children} diff --git a/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts b/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts index 6b095cbb..923e1ce5 100644 --- a/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts +++ b/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts @@ -1,6 +1,14 @@ export type ChatRoomState = { id?: string participants?: (string | null | undefined)[] + leftPanelContent?: number + singleChatProfileDetails?: { + pk: number | undefined + name: string | null | undefined + username: string | null | undefined + imageUrl: string | null | undefined + biography?: string | null | undefined + } } type ChatRoomFunctions = { @@ -9,6 +17,14 @@ type ChatRoomFunctions = { replace?: boolean | undefined, ) => void resetChatRoom: () => void + setLeftPanelContent: (content: number) => void + setSingleChatProfileDetails: (details: { + pk: number | undefined + name: string | undefined + username: string | undefined + imageUrl: string | undefined + biography?: string | undefined + }) => void } export type UseChatRoom = ChatRoomState & ChatRoomFunctions diff --git a/packages/components/modules/messages/common/graphql/fragments/RoomTitle.ts b/packages/components/modules/messages/common/graphql/fragments/RoomTitle.ts index 3afb5001..1b095ec0 100644 --- a/packages/components/modules/messages/common/graphql/fragments/RoomTitle.ts +++ b/packages/components/modules/messages/common/graphql/fragments/RoomTitle.ts @@ -9,10 +9,15 @@ export const RoomTitleFragment = graphql` node { profile { id + pk name - image(width: 100, height: 100) { + image(width: 128, height: 128) { url } + biography + urlPath { + path + } } role } diff --git a/packages/components/modules/messages/common/utils.ts b/packages/components/modules/messages/common/utils.ts index 4b33c955..91c60b0c 100644 --- a/packages/components/modules/messages/common/utils.ts +++ b/packages/components/modules/messages/common/utils.ts @@ -20,12 +20,15 @@ export const useGroupNameAndAvatar = ( headerRef as GroupTitleFragment$key, ) return { + pk: undefined, + path: undefined, + biography: undefined, title: header?.title, avatar: header?.image?.url, } } -const useRoomNameAndAvatar = (headerRef: RoomTitleFragment$key | null | undefined) => { +export const useSingleChatDetails = (headerRef: RoomTitleFragment$key | null | undefined) => { const { currentProfile } = useCurrentProfile() const header = useFragment(RoomTitleFragment, headerRef) if (!header?.participants) { @@ -39,22 +42,28 @@ const useRoomNameAndAvatar = (headerRef: RoomTitleFragment$key | null | undefine ) if (otherParticipant === undefined) { return { + pk: undefined, title: 'Deleted User', avatar: undefined, + path: undefined, + biography: undefined, } } return { + pk: otherParticipant?.node?.profile?.pk, title: otherParticipant?.node?.profile?.name, avatar: otherParticipant?.node?.profile?.image?.url, + path: otherParticipant?.node?.profile?.urlPath?.path, + biography: otherParticipant?.node?.profile?.biography, } } -export const useNameAndAvatar = (roomHeader: TitleFragment$data) => { - const roomNameAndAvatar = useRoomNameAndAvatar(roomHeader) +export const useChatroomDetails = (roomHeader: TitleFragment$data) => { + const singleChatDetails = useSingleChatDetails(roomHeader) const groupNameAndAvatar = useGroupNameAndAvatar(roomHeader) if (roomHeader.isGroup) return groupNameAndAvatar - return roomNameAndAvatar + return singleChatDetails } export const getParticipantCountString = (participantCount: number | null | undefined) => { diff --git a/packages/components/modules/messages/web/AllChatRoomsList/ChatRoomItem/index.tsx b/packages/components/modules/messages/web/AllChatRoomsList/ChatRoomItem/index.tsx index 79883293..f39f6128 100644 --- a/packages/components/modules/messages/web/AllChatRoomsList/ChatRoomItem/index.tsx +++ b/packages/components/modules/messages/web/AllChatRoomsList/ChatRoomItem/index.tsx @@ -21,7 +21,7 @@ import { TitleFragment, UnreadMessagesCountFragment, useArchiveChatRoomMutation, - useNameAndAvatar, + useChatroomDetails, useUnreadChatMutation, } from '../../../common' import { StyledChatCard } from './styled' @@ -52,7 +52,7 @@ const ChatRoomItem: FC = ({ const chatCardRef = useRef(null) const { currentProfile } = useCurrentProfile() - const { title, avatar } = useNameAndAvatar(headerFragment) + const { title, avatar } = useChatroomDetails(headerFragment) const { lastMessageTime } = lastMessageFragment const lastMessage = lastMessageFragment.lastMessage?.content diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx index 5c5a0b77..dc6046ac 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx @@ -11,11 +11,15 @@ const ChatRoomOptions: FC = ({ onArchiveClicked, onDetailsClicked, onLeaveClicked, + onContactDetailsClicked, }) => ( {isArchived ? 'Unarchive Chat' : 'Archive Chat'} + + Contact Details + {isGroup ? ( <> diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts index 1547823d..d5a9564b 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts @@ -5,4 +5,5 @@ export interface ChatRoomOptionsProps { onArchiveClicked: () => void onDetailsClicked: () => void onLeaveClicked: () => void + onContactDetailsClicked: () => void } diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx index 279744e1..20a9e695 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import { useCurrentProfile } from '@baseapp-frontend/authentication' import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars' @@ -20,10 +20,11 @@ import { getParticipantCountString, useArchiveChatRoomMutation, useChatRoom, + useChatroomDetails, useCheckIsAdmin, - useNameAndAvatar, } from '../../../common' import { RoomTitleFragment } from '../../../common/graphql/fragments/RoomTitle' +import { LEFT_PANEL_CONTENT } from '../../ChatRoomsComponent/constants' import LeaveGroupDialog from '../../__shared__/LeaveGroupDialog' import ChatRoomOptions from './ChatRoomOptions' import { BackButtonContainer, ChatHeaderContainer, ChatTitleContainer } from './styled' @@ -37,14 +38,28 @@ const ChatRoomHeader: FC = ({ roomId, }) => { const roomHeader = useFragment(TitleFragment, roomTitleRef) + const [open, setOpen] = useState(false) const { currentProfile } = useCurrentProfile() const isUpToMd = useResponsive('up', 'md') - const { resetChatRoom } = useChatRoom() + const { resetChatRoom, setSingleChatProfileDetails, setLeftPanelContent } = useChatRoom() const { isGroup } = roomHeader - const { title, avatar } = useNameAndAvatar(roomHeader) + const { title, avatar, path, pk, biography } = useChatroomDetails(roomHeader) + + useEffect(() => { + if (!isGroup) { + setSingleChatProfileDetails({ + pk: pk ?? undefined, + name: title ?? '', + username: path ?? '', + imageUrl: avatar ?? '', + biography: biography ?? '', + }) + } + }, [pk, title, path, avatar, biography]) + const { participants } = useFragment(RoomTitleFragment, roomHeader) const { isSoleAdmin } = useCheckIsAdmin(participants as MembersListFragment$data['participants']) const members = getParticipantCountString(participantsCount) @@ -148,6 +163,10 @@ const ChatRoomHeader: FC = ({ popover.onClose() setOpen(true) }} + onContactDetailsClicked={() => { + popover.onClose() + setLeftPanelContent(LEFT_PANEL_CONTENT.profileSummary) + }} /> diff --git a/packages/components/modules/messages/web/ChatRoomsComponent/constants.ts b/packages/components/modules/messages/web/ChatRoomsComponent/constants.ts index e7c1ee55..9ebf389f 100644 --- a/packages/components/modules/messages/web/ChatRoomsComponent/constants.ts +++ b/packages/components/modules/messages/web/ChatRoomsComponent/constants.ts @@ -4,4 +4,5 @@ export const LEFT_PANEL_CONTENT = { createGroupChat: 2, editGroupChat: 3, groupDetails: 4, + profileSummary: 5, } as const diff --git a/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx b/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx index d1dc3521..8b1bcb87 100644 --- a/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx +++ b/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx @@ -1,6 +1,6 @@ 'use client' -import { FC, useState } from 'react' +import { FC } from 'react' import { useResponsive } from '@baseapp-frontend/design-system/hooks/web' @@ -13,10 +13,11 @@ import ChatRoom from '../ChatRoom' import DefaultGroupChatCreate from '../GroupChatCreate' import DefaultGroupChatDetails from '../GroupChatDetails' import DefaultGroupChatEdit from '../GroupChatEdit' +import DefaultProfileSummary from '../ProfileSummary' import DefaultSingleChatCreate from '../SingleChatCreate' import { LEFT_PANEL_CONTENT } from './constants' import { ChatRoomContainer, ChatRoomsContainer, ChatRoomsListContainer } from './styled' -import { ChatRoomsComponentProps, LeftPanelContentValues } from './types' +import { ChatRoomsComponentProps } from './types' const ChatRoomsComponent: FC = ({ chatRoomsQueryData, @@ -31,15 +32,14 @@ const ChatRoomsComponent: FC = ({ GroupChatEditComponentProps = {}, SingleChatCreateComponent = DefaultSingleChatCreate, SingleChatCreateComponentProps = {}, + ProfileSummaryComponent = DefaultProfileSummary, }) => { const isUpToMd = useResponsive('up', 'md') - const [leftPanelContent, setLeftPanelContent] = useState( - LEFT_PANEL_CONTENT.chatRoomList, - ) const [groupDetailsQueryRef, loadGroupDetailsQuery] = useQueryLoader(GroupDetailsQuery) - const { id: selectedRoom } = useChatRoom() + + const { id: selectedRoom, leftPanelContent, setLeftPanelContent } = useChatRoom() const displayGroupDetails = () => { if (selectedRoom) { @@ -99,6 +99,12 @@ const ChatRoomsComponent: FC = ({ {...SingleChatCreateComponentProps} /> ) + case LEFT_PANEL_CONTENT.profileSummary: + return ( + setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)} + /> + ) default: return ( SingleChatCreateComponent?: FC SingleChatCreateComponentProps?: Partial + ProfileSummaryComponent?: FC + ProfileSummaryComponentProps?: Partial } diff --git a/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx b/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx index d183fc12..15ff668e 100644 --- a/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx +++ b/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx @@ -10,6 +10,8 @@ const mockChatRoomStore = create((set) => ({ id: 'room-123', setChatRoom: (newState) => set(newState), resetChatRoom: () => set({ id: '' }), + setLeftPanelContent: (_content) => {}, + setSingleChatProfileDetails: (_details) => {}, })) const meta: Meta = { diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx b/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx new file mode 100644 index 00000000..d230f345 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx @@ -0,0 +1,71 @@ +import { FC } from 'react' + +import { CircledAvatar } from '@baseapp-frontend/design-system/components/web/avatars' +import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons' +import { + NewGroupIcon, + ProfileNoCircleIcon, +} from '@baseapp-frontend/design-system/components/web/icons' +import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/components/web/typographies' + +import { Box, Typography } from '@mui/material' + +import { HeaderContainer, Subheader, SubheaderContainer, TitleContainer } from './styled' +import { BodyProps } from './types' + +const Body: FC = ({ avatar, avatarSize = 144, biography, username, name, pk }) => { + const formattedUsername = username ? username.replace(/^\/+/, '') : '' + const profilePath = username ?? `/profile/${pk}` + return ( + + + + + + {name} + + + {`@${formattedUsername}`} + + + + + window.open(profilePath, '_blank')} + sx={{ maxWidth: 'fit-content', gap: '8px' }} + > + + + Go to profile + + + + + + + Add contact to a group + + + + + + About + + + + + {biography} + + + + + ) +} + +export default Body diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx b/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx new file mode 100644 index 00000000..af5f5557 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx @@ -0,0 +1,32 @@ +import { Box } from '@mui/material' +import { styled } from '@mui/material/styles' + +export const HeaderContainer = styled(Box)(({ theme }) => ({ + display: 'grid', + gridTemplateRows: '144px auto', + justifyItems: 'center', + width: '100%', + padding: theme.spacing(3.5), + gap: theme.spacing(2), +})) + +export const TitleContainer = styled(Box)(() => ({ + width: '100%', + textAlign: 'center', + display: 'grid', + justifyItems: 'center', + gridTemplateRows: '22px 22px', + gap: '8px', +})) + +export const SubheaderContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + padding: theme.spacing(2), + gap: theme.spacing(1), +})) + +export const Subheader = styled(Box)(({ theme }) => ({ + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), +})) diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/types.ts b/packages/components/modules/messages/web/ProfileSummary/Body/types.ts new file mode 100644 index 00000000..f008793e --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Body/types.ts @@ -0,0 +1,10 @@ +import { PropsWithChildren } from 'react' + +export interface BodyProps extends PropsWithChildren { + avatar?: string + avatarSize?: number + biography?: string | null + name?: string | null + username?: string | null + pk?: number | undefined +} diff --git a/packages/components/modules/messages/web/ProfileSummary/Header/index.tsx b/packages/components/modules/messages/web/ProfileSummary/Header/index.tsx new file mode 100644 index 00000000..0dbfb789 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Header/index.tsx @@ -0,0 +1,30 @@ +import { FC } from 'react' + +import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons' +import { Iconify } from '@baseapp-frontend/design-system/components/web/images' + +import { Typography } from '@mui/material' + +import { ProfileSummaryHeaderContainer } from './styled' +import { HeaderProps } from './types' + +const Header: FC = ({ + backIcon = 'eva:arrow-ios-back-fill', + backIconProps = {}, + onBackButtonClicked, +}) => ( + + + + + + Contact Details + + +) + +export default Header diff --git a/packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx b/packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx new file mode 100644 index 00000000..e8b78a59 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx @@ -0,0 +1,15 @@ +import { Box } from '@mui/material' +import { styled } from '@mui/material/styles' + +export const ProfileSummaryHeaderContainer = styled(Box)(({ theme }) => ({ + borderBottom: `1px ${theme.palette.divider} solid`, + width: '100%', + padding: theme.spacing(2), + display: 'grid', + gridTemplateColumns: '24px auto 24px', + gap: theme.spacing(1.5), + alignItems: 'center', + [theme.breakpoints.down('sm')]: { + padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(2)}`, + }, +})) diff --git a/packages/components/modules/messages/web/ProfileSummary/Header/types.ts b/packages/components/modules/messages/web/ProfileSummary/Header/types.ts new file mode 100644 index 00000000..5e6fe49f --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Header/types.ts @@ -0,0 +1,7 @@ +import { IconifyProps } from '@baseapp-frontend/design-system/components/web/images' + +export interface HeaderProps { + backIcon?: IconifyProps['icon'] + backIconProps?: Partial> + onBackButtonClicked: VoidFunction +} diff --git a/packages/components/modules/messages/web/ProfileSummary/index.tsx b/packages/components/modules/messages/web/ProfileSummary/index.tsx new file mode 100644 index 00000000..52027617 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/index.tsx @@ -0,0 +1,43 @@ +'use client' + +import { FC, Suspense } from 'react' + +import { LoadingState } from '@baseapp-frontend/design-system/components/web/displays' + +import { useChatRoom } from '../../common' +import Body from './Body' +import Header from './Header' +import { ProfileSummaryProps } from './types' + +const ProfileSummary: FC = ({ onBackButtonClicked }) => { + const { singleChatProfileDetails } = useChatRoom() + const { imageUrl, name, username, biography, pk } = singleChatProfileDetails || {} + + return ( + <> +
+ + + ) +} + +const SuspendedProfileSummary: FC = ({ onBackButtonClicked, ...props }) => ( + +
+ + + } + > + + +) + +export default SuspendedProfileSummary diff --git a/packages/components/modules/messages/web/ProfileSummary/types.ts b/packages/components/modules/messages/web/ProfileSummary/types.ts new file mode 100644 index 00000000..8fce8c43 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/types.ts @@ -0,0 +1,3 @@ +export type ProfileSummaryProps = { + onBackButtonClicked: () => void +} diff --git a/packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx b/packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx new file mode 100644 index 00000000..eec717cf --- /dev/null +++ b/packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx @@ -0,0 +1,20 @@ +import { FC } from 'react' + +import { SvgIcon, SvgIconProps } from '@mui/material' + +const ProfileNoCircleIcon: FC = ({ sx, ...props }) => ( + + + + + + +) + +export default ProfileNoCircleIcon diff --git a/packages/design-system/components/web/icons/index.ts b/packages/design-system/components/web/icons/index.ts index 6e189b4d..4c5a98aa 100644 --- a/packages/design-system/components/web/icons/index.ts +++ b/packages/design-system/components/web/icons/index.ts @@ -28,6 +28,7 @@ export { default as OutlinedCheckMarkIcon } from './OutlinedCheckMarkIcon' export { default as OutlinedEditIcon } from './OutlinedEditIcon' export { default as PenEditIcon } from './PenEditIcon' export { default as PinIcon } from './PinIcon' +export { default as ProfileNoCircleIcon } from './ProfileNoCircleIcon' export { default as SendMessageIcon } from './SendMessageIcon' export { default as ShareIcon } from './ShareIcon' export { default as ThreeDotsIcon } from './ThreeDotsIcon' From 8fbca84f0bcbe170997731a2bdd0af31c02f0fb6 Mon Sep 17 00:00:00 2001 From: Rodean Fraser Date: Sun, 16 Nov 2025 21:06:44 -0500 Subject: [PATCH 2/2] qa updates --- .../ChatRoomHeader/ChatRoomOptions/index.tsx | 8 ++- .../web/ProfileSummary/Body/index.tsx | 63 +++++++++++-------- .../web/ProfileSummary/Body/styled.tsx | 11 +++- 3 files changed, 51 insertions(+), 31 deletions(-) diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx index dc6046ac..5f212acf 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx @@ -17,9 +17,11 @@ const ChatRoomOptions: FC = ({ {isArchived ? 'Unarchive Chat' : 'Archive Chat'} - - Contact Details - + {!isGroup && ( + + Contact Details + + )} {isGroup ? ( <> diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx b/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx index d230f345..816fbb1e 100644 --- a/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx +++ b/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx @@ -8,9 +8,15 @@ import { } from '@baseapp-frontend/design-system/components/web/icons' import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/components/web/typographies' -import { Box, Typography } from '@mui/material' +import { Box, Divider, Typography } from '@mui/material' -import { HeaderContainer, Subheader, SubheaderContainer, TitleContainer } from './styled' +import { + ButtonContainer, + HeaderContainer, + Subheader, + SubheaderContainer, + TitleContainer, +} from './styled' import { BodyProps } from './types' const Body: FC = ({ avatar, avatarSize = 144, biography, username, name, pk }) => { @@ -30,37 +36,44 @@ const Body: FC = ({ avatar, avatarSize = 144, biography, username, na - window.open(profilePath, '_blank')} - sx={{ maxWidth: 'fit-content', gap: '8px' }} - > - - - Go to profile - - - - - - - Add contact to a group - - + + window.open(profilePath, '_blank')} + sx={{ maxWidth: 'fit-content', gap: '8px' }} + > + + + Go to profile + + + + + + Add contact to a group + + + About + - {biography} + {biography?.split('\n').map((line, index) => ( + + {line} + {index < biography.split('\n').length - 1 &&
} + + ))} diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx b/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx index af5f5557..b29556e0 100644 --- a/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx +++ b/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx @@ -22,11 +22,16 @@ export const TitleContainer = styled(Box)(() => ({ export const SubheaderContainer = styled(Box)(({ theme }) => ({ display: 'flex', flexDirection: 'column', - padding: theme.spacing(2), gap: theme.spacing(1), })) +export const ButtonContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + padding: theme.spacing(2), +})) + export const Subheader = styled(Box)(({ theme }) => ({ - paddingTop: theme.spacing(2), - paddingBottom: theme.spacing(2), + padding: theme.spacing(2), }))