Notifications interface (#5354)

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

app/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,5 @@
 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";
@@ -15,7 +16,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 HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
+import Relative from "./components/Relative";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
@@ -184,7 +187,16 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
                       showBorder={false}
                     />
                   }
-                />
+                >
+                  <NotificationsButton>
+                    {(rest: HeaderButtonProps) => (
+                      <HeaderButton
+                        {...rest}
+                        image={<BadgedNotificationIcon />}
+                      />
+                    )}
+                  </NotificationsButton>
+                </HeaderButton>
               )}
             </AccountMenu>
           )}
@@ -211,6 +223,29 @@ 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;
 `;

app/components/Sidebar/components/HeaderButton.tsx

@@ -5,7 +5,7 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { undraggableOnDesktop } from "~/styles";
 
-export type HeaderButtonProps = React.ComponentProps<typeof Wrapper> & {
+export type HeaderButtonProps = React.ComponentProps<typeof Button> & {
   title: React.ReactNode;
   image: React.ReactNode;
   minHeight?: number;
@@ -13,6 +13,7 @@ export type HeaderButtonProps = React.ComponentProps<typeof Wrapper> & {
   showDisclosure?: boolean;
   showMoreMenu?: boolean;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
 };
 
 const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
@@ -23,44 +24,49 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
       image,
       title,
       minHeight = 0,
+      children,
       ...rest
     }: HeaderButtonProps,
     ref
   ) => (
-    <Wrapper
-      role="button"
-      justify="space-between"
-      align="center"
-      as="button"
-      minHeight={minHeight}
-      {...rest}
-      ref={ref}
-    >
-      <Title gap={6} align="center">
-        {image}
-        {title}
-      </Title>
-      {showDisclosure && <ExpandedIcon />}
-      {showMoreMenu && <MoreIcon />}
-    </Wrapper>
+    <Flex justify="space-between" align="center" shrink={false}>
+      <Button
+        {...rest}
+        minHeight={minHeight}
+        as="button"
+        ref={ref}
+        role="button"
+      >
+        <Title gap={8} align="center">
+          {image}
+          {title}
+        </Title>
+        {showDisclosure && <ExpandedIcon />}
+        {showMoreMenu && <MoreIcon />}
+      </Button>
+      {children}
+    </Flex>
   )
 );
 
 const Title = styled(Flex)`
   color: ${s("text")};
   flex-shrink: 1;
+  flex-grow: 1;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 `;
 
-const Wrapper = styled(Flex)<{ minHeight: number }>`
+const Button = styled(Flex)<{ minHeight: number }>`
+  flex: 1;
+  color: ${s("textTertiary")};
+  align-items: center;
   padding: 8px 4px;
   font-size: 15px;
   font-weight: 500;
   border-radius: 4px;
-  margin: 8px;
-  color: ${s("textTertiary")};
+  margin: 8px 0;
   border: 0;
   background: none;
   flex-shrink: 0;
@@ -81,6 +87,14 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
     transition: background 100ms ease-in-out;
     background: ${s("sidebarActiveBackground")};
   }
+
+  &:last-child {
+    margin-right: 8px;
+  }
+
+  &:first-child {
+    margin-left: 8px;
+  }
 `;
 
 export default HeaderButton;