feat: make unread channel buttons more noticeable

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,
       }}
     />
   )