1 files changed, 139 insertions, 0 deletions

diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
new file mode 100644
index 0000000..43af40b
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -0,0 +1,139 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import IconWarning from '@mui/icons-material/Warning';
+import Badge from '@mui/material/Badge';
+import { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+
+import type Service from '../../stores/Service.js';
+
+const ServiceIconRoot = styled('div', {
+  name: 'ServiceIcon',
+  slot: 'Root',
+  shouldForwardProp: (prop) => prop !== 'hasError',
+})<{ hasError: boolean }>(({ theme, hasError }) => ({
+  width: 36,
+  height: 36,
+  borderRadius: theme.shape.borderRadius,
+  background: 'currentColor',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  filter: hasError ? 'grayscale(100%)' : 'none',
+  opacity: hasError ? theme.palette.action.disabledOpacity : 1,
+  transition: theme.transitions.create(['filter', 'opacity'], {
+    duration: hasError
+      ? theme.transitions.duration.enteringScreen
+      : theme.transitions.duration.leavingScreen,
+  }),
+}));
+
+const ServiceIconText = styled('div', {
+  name: 'ServiceIcon',
+  slot: 'Text',
+})(({ theme }) => ({
+  display: 'inline-block',
+  flex: 0,
+  fontSize: theme.typography.pxToRem(24),
+  color: theme.palette.primary.contrastText,
+}));
+
+const ServiceIconBadgeBase = styled(Badge)({
+  '& > .MuiBadge-badge': {
+    zIndex: 200,
+  },
+});
+
+const ServiceIconBadge = styled(ServiceIconBadgeBase, {
+  name: 'ServiceIcon',
+  slot: 'Badge',
+})(({ theme }) => ({
+  '& > .MuiBadge-dot': {
+    background:
+      theme.palette.mode === 'dark'
+        ? theme.palette.text.primary
+        : theme.palette.primary.light,
+  },
+}));
+
+const ServiceIconErrorBadge = styled(ServiceIconBadgeBase, {
+  name: 'ServiceIcon',
+  slot: 'ErrorBadge',
+})(({ theme }) => ({
+  '& > .MuiBadge-standard': {
+    color:
+      theme.palette.mode === 'dark'
+        ? theme.palette.error.light
+        : theme.palette.error.main,
+  },
+}));
+
+function ServiceIcon({ service }: { service: Service }): JSX.Element {
+  const {
+    settings: { name },
+    directMessageCount,
+    indirectMessageCount,
+    hasError,
+  } = service;
+
+  // Badge 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 (
+    <ServiceIconErrorBadge
+      badgeContent={hasError ? <IconWarning fontSize="small" /> : 0}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+    >
+      <ServiceIconBadge
+        badgeContent={
+          hasDirectMessage ? directMessageCount : indirectMessageCount
+        }
+        variant={hasDirectMessage ? 'standard' : 'dot'}
+        color="error"
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        <ServiceIconRoot hasError={hasError}>
+          <ServiceIconText aria-hidden="true">
+            {name.length > 0 ? name[0] : '?'}
+          </ServiceIconText>
+        </ServiceIconRoot>
+      </ServiceIconBadge>
+    </ServiceIconErrorBadge>
+  );
+}
+
+export default observer(ServiceIcon);