Notifications interface (#5354)

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

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;