5 files changed, 366 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..83b2a5f
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 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: 36,
+  height: 36,
+  borderRadius: theme.shape.borderRadius,
+  background: 'currentColor',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+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 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 (
+    <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/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
new file mode 100644
index 0000000..3b47990
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -0,0 +1,92 @@
+/*
+ * 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 Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import { alpha, styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from '../StoreProvider';
+
+import ServiceIcon from './ServiceIcon';
+
+const ServiceSwitcherRoot = styled(Tabs, {
+  name: 'ServiceSwitcher',
+  slot: 'Root',
+})(({ theme }) => ({
+  '.MuiTabs-indicator': {
+    ...(theme.direction === 'ltr'
+      ? {
+          left: 0,
+          right: 'auto',
+        }
+      : {
+          left: 'auto',
+          right: 0,
+        }),
+  },
+}));
+
+const ServiceSwitcherTab = styled(Tab, {
+  name: 'ServiceSwitcher',
+  slot: 'Tab',
+})(({ theme }) => ({
+  minWidth: 0,
+  transition: theme.transitions.create('background-color', {
+    duration: theme.transitions.duration.shortest,
+  }),
+  '&.Mui-selected': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? alpha(theme.palette.text.primary, 0.12)
+        : alpha(theme.palette.primary.light, 0.24),
+  },
+}));
+
+function ServiceSwitcher(): JSX.Element {
+  const store = useStore();
+  const {
+    settings: { selectedService },
+    services,
+  } = store;
+
+  return (
+    <ServiceSwitcherRoot
+      variant="scrollable"
+      orientation="vertical"
+      value={selectedService === undefined ? false : selectedService.id}
+      onChange={(_event, newValue: string) =>
+        store.setSelectedServiceId(newValue)
+      }
+    >
+      {services.map((service) => (
+        <ServiceSwitcherTab
+          key={service.id}
+          value={service.id}
+          icon={<ServiceIcon service={service} />}
+          aria-label={service.settings.name}
+        />
+      ))}
+    </ServiceSwitcherRoot>
+  );
+}
+
+export default observer(ServiceSwitcher);
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
new file mode 100644
index 0000000..80826ca
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C)  2021-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 Box from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
+import React from 'react';
+
+import ServiceSwitcher from './ServiceSwitcher';
+import ToggleDarkModeButton from './ToggleDarkModeButton';
+import ToggleLocationBarButton from './ToggleLocationBarButton';
+
+export default function Sidebar(): JSX.Element {
+  return (
+    <Box
+      component="aside"
+      sx={(theme) => ({
+        flex: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingY: 1,
+        gap: 1,
+        background: alpha(theme.palette.text.primary, 0.09),
+        backgroundClip: 'padding-box',
+        borderInlineEnd: `1px solid ${theme.palette.divider}`,
+        minWidth: 69,
+      })}
+    >
+      <ToggleLocationBarButton />
+      <ServiceSwitcher />
+      <Box
+        sx={{
+          flex: 1,
+          WebkitAppRegion: 'drag',
+        }}
+      />
+      <ToggleDarkModeButton />
+    </Box>
+  );
+}
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
new file mode 100644
index 0000000..164b066
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C)  2021-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 DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import IconButton from '@mui/material/IconButton';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from '../StoreProvider';
+
+export default observer(() => {
+  const store = useStore();
+  const {
+    shared: { shouldUseDarkColors },
+  } = store;
+
+  return (
+    <IconButton
+      aria-label="Toggle dark mode"
+      onClick={() => store.toggleDarkMode()}
+    >
+      {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
+    </IconButton>
+  );
+});
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
new file mode 100644
index 0000000..7e20598
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton from '@mui/material/IconButton';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from '../StoreProvider';
+
+function ToggleLocationBarButton(): JSX.Element {
+  const store = useStore();
+  const {
+    settings: { selectedService, showLocationBar },
+  } = store;
+
+  let icon: JSX.Element;
+  if (selectedService?.state === 'loading') {
+    icon = <CircularProgress color="inherit" size="1.5rem" />;
+  } else {
+    icon = showLocationBar ? <IconChevronLeft /> : <IconChevronRight />;
+  }
+
+  return (
+    <IconButton
+      aria-pressed={showLocationBar}
+      aria-controls="locationBar"
+      aria-label="Show location bar"
+      onClick={() => store.toggleLocationBar()}
+    >
+      {icon}
+    </IconButton>
+  );
+}
+
+export default observer(ToggleLocationBarButton);