Add notification count to dock icon on desktop

app/components/Sidebar/Sidebar.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import { SubscribeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
@@ -16,9 +15,9 @@ import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import Avatar from "../Avatar";
-import NotificationsButton from "../Notifications/NotificationsButton";
+import NotificationIcon from "../Notifications/NotificationIcon";
+import NotificationsPopover from "../Notifications/NotificationsPopover";
 import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
-import Relative from "./components/Relative";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
@@ -188,14 +187,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
                     />
                   }
                 >
-                  <NotificationsButton>
+                  <NotificationsPopover>
                     {(rest: HeaderButtonProps) => (
-                      <HeaderButton
-                        {...rest}
-                        image={<BadgedNotificationIcon />}
-                      />
+                      <HeaderButton {...rest} image={<NotificationIcon />} />
                     )}
-                  </NotificationsButton>
+                  </NotificationsPopover>
                 </HeaderButton>
               )}
             </AccountMenu>
@@ -223,29 +219,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
   }
 );
 
-const BadgedNotificationIcon = observer(() => {
-  const { notifications } = useStores();
-  const theme = useTheme();
-  const count = notifications.approximateUnreadCount;
-
-  return (
-    <Relative style={{ height: 24 }}>
-      <SubscribeIcon color={theme.textTertiary} />
-      {count > 0 && <Badge />}
-    </Relative>
-  );
-});
-
-const Badge = styled.div`
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: ${s("accent")};
-  top: 0;
-  right: 0;
-`;
-
 const StyledAvatar = styled(Avatar)`
   margin-left: 4px;
 `;