design: Simpler message count indicators

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

1 files changed, 30 insertions, 48 deletions

diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 83b2a5f..144f860 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -22,7 +22,7 @@ import Badge from '@mui/material/Badge';
 import { styled, useTheme } from '@mui/material/styles';
 import { Service } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
@@ -47,39 +47,15 @@ const ServiceIconText = styled('div', {
   color: theme.palette.primary.contrastText,
 }));
 
-const IndirectMessageBadge = styled(Badge)(({ theme }) => ({
-  '& .MuiBadge-dot': {
-    // The indirect message badge floats ouside the icon in the middle.
-    top: '50%',
-    ...(theme.direction === 'ltr'
-      ? {
-          left: theme.spacing(-1),
-        }
-      : {
-          right: theme.spacing(-1),
-        }),
+const ServiceIconBadge = styled(Badge, {
+  name: 'ServiceIcon',
+  slot: 'Badge',
+})(({ theme }) => ({
+  '.MuiBadge-dot': {
     background:
       theme.palette.mode === 'dark'
         ? theme.palette.text.primary
-        : 'currentColor',
-  },
-}));
-
-const DirectMessageBadge = styled(Badge)(({ theme }) => ({
-  '& .MuiBadge-badge': {
-    // Move the badge closer to the icon so that even "99+" messages can fit in the sidebar.
-    ...(theme.direction === 'ltr'
-      ? {
-          right: theme.spacing(0.25),
-        }
-      : {
-          left: theme.spacing(0.25),
-        }),
-    top: theme.spacing(0.25),
-    // Set the badge apart from the icon with a shadow (a border would be too heavy).
-    boxShadow: theme.shadows[1],
-    // Add a bit more emphasis to the badge.
-    fontWeight: 700,
+        : theme.palette.primary.light,
   },
 }));
 
@@ -91,28 +67,34 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
     indirectMessageCount,
   } = service;
 
+  // Hadge color histeresis for smooth appear / disappear animation.
+  // If we compute hasDirectMessage = directMessageCount >= 1 directly (without any histeresis),
+  // the badge momentarily turns light during the disappear animation.
+  const [hasDirectMessage, setHasDirectMessage] = useState(false);
+  useEffect(() => {
+    if (directMessageCount >= 1) {
+      setHasDirectMessage(true);
+    } else if (indirectMessageCount >= 1) {
+      setHasDirectMessage(false);
+    }
+  }, [directMessageCount, indirectMessageCount, setHasDirectMessage]);
+
   return (
-    <IndirectMessageBadge
-      badgeContent={indirectMessageCount}
-      variant="dot"
+    <ServiceIconBadge
+      badgeContent={
+        hasDirectMessage ? directMessageCount : indirectMessageCount
+      }
+      variant={hasDirectMessage ? 'standard' : 'dot'}
+      color="error"
       anchorOrigin={{
         vertical: 'top',
-        horizontal: direction === 'ltr' ? 'left' : 'right',
+        horizontal: direction === 'ltr' ? 'right' : 'left',
       }}
     >
-      <DirectMessageBadge
-        badgeContent={directMessageCount}
-        color="error"
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: direction === 'ltr' ? 'right' : 'left',
-        }}
-      >
-        <ServiceIconRoot>
-          <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
-        </ServiceIconRoot>
-      </DirectMessageBadge>
-    </IndirectMessageBadge>
+      <ServiceIconRoot>
+        <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
+      </ServiceIconRoot>
+    </ServiceIconBadge>
   );
 }