From c55d93b60f1f024e2c1936a04157b58360b8ef74 Mon Sep 17 00:00:00 2001
From: Marek Vesely <xvesely4@fi.muni.cz>
Date: Tue, 21 May 2024 15:21:48 +0200
Subject: [PATCH] feat: make unread channel buttons more noticeable
---
frontend/src/views/ChannelButton.tsx | 23 +++++++++++++++--------
1 file changed, 15 insertions(+), 8 deletions(-)
diff --git a/frontend/src/views/ChannelButton.tsx b/frontend/src/views/ChannelButton.tsx
index c05949f21..114feedc8 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,
}}
/>
)
--
GitLab