diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx new file mode 100644 index 000000000..1768956ca --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx @@ -0,0 +1,30 @@ +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { IconLock } from '@/ui/display/icon'; + +const StyledContainer = styled.div` + align-items: center; + display: flex; + flex: 1 0 0; + gap: ${({ theme }) => theme.spacing(1)}; + height: 20px; + padding: ${({ theme }) => theme.spacing(0, 1)}; + + border-radius: 4px; + border: 1px solid ${({ theme }) => theme.border.color.light}; + background: ${({ theme }) => theme.background.transparent.lighter}; + + color: ${({ theme }) => theme.font.color.tertiary}; + font-weight: ${({ theme }) => theme.font.weight.regular}; +`; + +export const EmailThreadNotShared = () => { + const theme = useTheme(); + return ( + + + Not shared + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index 34a05a228..3adb73555 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -1,18 +1,20 @@ import styled from '@emotion/styled'; +import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared'; import { CardContent } from '@/ui/layout/card/components/CardContent'; import { grayScale } from '@/ui/theme/constants/colors'; import { Avatar } from '@/users/components/Avatar'; import { TimelineThread } from '~/generated/graphql'; import { formatToHumanReadableDate } from '~/utils'; -const StyledCardContent = styled(CardContent)` +const StyledCardContent = styled(CardContent)<{ visibility: string }>` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(2)}; height: ${({ theme }) => theme.spacing(12)}; padding: ${({ theme }) => theme.spacing(0, 4)}; - cursor: pointer; + cursor: ${({ visibility }) => + visibility === 'share_everything' ? 'pointer' : 'default'}; `; const StyledHeading = styled.div<{ unread: boolean }>` @@ -43,6 +45,7 @@ const StyledThreadCount = styled.span` `; const StyledSubjectAndBody = styled.div` + align-items: center; display: flex; flex: 1; gap: ${({ theme }) => theme.spacing(2)}; @@ -74,12 +77,14 @@ type EmailThreadPreviewProps = { divider?: boolean; thread: TimelineThread; onClick: () => void; + visibility: 'metadata' | 'subject' | 'share_everything'; }; export const EmailThreadPreview = ({ divider, thread, onClick, + visibility, }: EmailThreadPreviewProps) => { const senderNames = thread.firstParticipant.displayName + @@ -100,7 +105,11 @@ export const EmailThreadPreview = ({ ]; return ( - onClick()} divider={divider}> + onClick()} + divider={divider} + visibility={visibility} + > - {thread.subject} - {thread.lastMessageBody} + {visibility !== 'metadata' && ( + {thread.subject} + )} + {visibility === 'share_everything' && ( + {thread.lastMessageBody} + )} + {visibility !== 'share_everything' && } {formatToHumanReadableDate(thread.lastMessageReceivedAt)} diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx index acde03676..f4edce412 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx @@ -185,7 +185,18 @@ export const EmailThreads = ({ key={index} divider={index < timelineThreads.length - 1} thread={thread} - onClick={() => openEmailThread(thread.id)} + onClick={ + thread.visibility === 'share_everything' + ? () => openEmailThread(thread.id) + : () => {} + } + visibility={ + // TODO: Fix typing for visibility + thread.visibility as + | 'metadata' + | 'subject' + | 'share_everything' + } /> ))} diff --git a/packages/twenty-front/src/modules/ui/display/icon/index.ts b/packages/twenty-front/src/modules/ui/display/icon/index.ts index 47af30bd9..3508b027c 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/index.ts +++ b/packages/twenty-front/src/modules/ui/display/icon/index.ts @@ -76,6 +76,7 @@ export { IconLink, IconLinkOff, IconList, + IconLock, IconLogout, IconMail, IconMailCog,