feat: Unread message badges

3 files changed, 81 insertions, 14 deletions

diff --git a/packages/renderer/src/components/ServiceIcon.tsx b/packages/renderer/src/components/ServiceIcon.tsx
index e02da71..83b2a5f 100644
--- a/packages/renderer/src/components/ServiceIcon.tsx
+++ b/packages/renderer/src/components/ServiceIcon.tsx
@@ -18,15 +18,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { styled } from '@mui/material/styles';
+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';
 
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
   slot: 'Root',
 })(({ theme }) => ({
-  width: 34,
-  height: 34,
+  width: 36,
+  height: 36,
   borderRadius: theme.shape.borderRadius,
   background: 'currentColor',
   display: 'flex',
@@ -44,10 +47,73 @@ const ServiceIconText = styled('div', {
   color: theme.palette.primary.contrastText,
 }));
 
-export default function ServiceIcon({ name }: { name: string }): JSX.Element {
+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),
+        }),
+    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,
+  },
+}));
+
+function ServiceIcon({ service }: { service: Service }): JSX.Element {
+  const { direction } = useTheme();
+  const {
+    settings: { name },
+    directMessageCount,
+    indirectMessageCount,
+  } = service;
+
   return (
-    <ServiceIconRoot>
-      <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
-    </ServiceIconRoot>
+    <IndirectMessageBadge
+      badgeContent={indirectMessageCount}
+      variant="dot"
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: direction === 'ltr' ? 'left' : 'right',
+      }}
+    >
+      <DirectMessageBadge
+        badgeContent={directMessageCount}
+        color="error"
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: direction === 'ltr' ? 'right' : 'left',
+        }}
+      >
+        <ServiceIconRoot>
+          <ServiceIconText>{name.length > 0 ? name[0] : '?'}</ServiceIconText>
+        </ServiceIconRoot>
+      </DirectMessageBadge>
+    </IndirectMessageBadge>
   );
 }
+
+export default observer(ServiceIcon);
diff --git a/packages/renderer/src/components/ServiceSwitcher.tsx b/packages/renderer/src/components/ServiceSwitcher.tsx
index e4d371e..2cf997e 100644
--- a/packages/renderer/src/components/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/ServiceSwitcher.tsx
@@ -32,7 +32,6 @@ const ServiceSwitcherRoot = styled(Tabs, {
   slot: 'Root',
 })(({ theme }) => ({
   '.MuiTabs-indicator': {
-    width: 3,
     ...(theme.direction === 'ltr'
       ? {
           left: 0,
@@ -56,12 +55,12 @@ const ServiceSwitcherTab = styled(Tab, {
   '&.Mui-selected': {
     backgroundColor:
       theme.palette.mode === 'dark'
-        ? alpha(theme.palette.text.primary, 0.16)
-        : alpha(theme.palette.primary.light, 0.3),
+        ? alpha(theme.palette.text.primary, 0.12)
+        : alpha(theme.palette.primary.light, 0.24),
   },
 }));
 
-export default observer(() => {
+function ServiceSwitcher(): JSX.Element {
   const store = useStore();
   const {
     settings: { selectedService },
@@ -81,10 +80,12 @@ export default observer(() => {
         <ServiceSwitcherTab
           key={service.id}
           value={service.id}
-          icon={<ServiceIcon name={service.settings.name} />}
+          icon={<ServiceIcon service={service} />}
           aria-label={service.settings.name}
         />
       ))}
     </ServiceSwitcherRoot>
   );
-});
+}
+
+export default observer(ServiceSwitcher);
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx
index ed78fc6..0eb8f93 100644
--- a/packages/renderer/src/components/Sidebar.tsx
+++ b/packages/renderer/src/components/Sidebar.tsx
@@ -39,7 +39,7 @@ export default function Sidebar(): JSX.Element {
         backgroundClip: 'padding-box',
         background: alpha(theme.palette.text.primary, 0.09),
         borderInlineEnd: `1px solid ${theme.palette.divider}`,
-        minWidth: 67,
+        minWidth: 69,
       })}
     >
       <ServiceSwitcher />