diff --git a/frontend/src/views/ChannelButton.tsx b/frontend/src/views/ChannelButton.tsx index c05949f21689ab4f2deb0f579dd5813d4436ddd8..114feedc8f6a2b353fac3403efaa0971cf01d561 100644 --- a/frontend/src/views/ChannelButton.tsx +++ b/frontend/src/views/ChannelButton.tsx @@ -2,11 +2,12 @@ import { EmailSelection } from '@/analyst/utilities' import type { LinkType } from '@/components/LinkButton' import LinkButton from '@/components/LinkButton' import type { Path } from '@/router' -import type { IconName } from '@blueprintjs/core' +import { Colors, type IconName } from '@blueprintjs/core' +import { Dot } from '@blueprintjs/icons' import type { Channel } from '@inject/graphql/fragments/Channel.generated' import { useWriteReadReceiptChannel } from '@inject/graphql/mutations/clientonly/WriteReadReceiptChannel.generated' import type { ChannelType } from '@inject/graphql/types' -import type { FC } from 'react' +import { useMemo, type FC } from 'react' import { matchPath } from 'react-router-dom' interface ChannelButtonProps { @@ -131,24 +132,30 @@ const ChannelButton: FC<ChannelButtonProps> = ({ ) } + const isUnread = useMemo( + () => + channel.readReceipt.find( + ({ readReceipt, teamId: receiptTeamId }) => + receiptTeamId === teamId && readReceipt === null + ), + [channel.readReceipt, teamId] + ) + return ( <LinkButton key={getLink(channel)[0] as string} link={getLink(channel)} button={{ icon: getIcon(channel.type), - text: !hideLabel && channel.name, title: channel.name, fill: true, alignText: 'left', minimal: true, active: getActive(channel), - intent: channel.readReceipt?.find( - x => x?.teamId == teamId && x.readReceipt === null - ) - ? 'warning' - : undefined, + intent: isUnread ? 'warning' : undefined, + rightIcon: isUnread ? <Dot color={Colors.RED3} /> : undefined, onClick: mutate, + children: !hideLabel && isUnread ? <b>{channel.name}</b> : channel.name, }} /> )