feat: Badge documents in sidebar that have been newly shared with you

app/components/Notifications/NotificationListItem.tsx

@@ -14,6 +14,7 @@ import { AvatarSize } from "../Avatar/Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";
+import { UnreadBadge } from "../UnreadBadge";
 
 type Props = {
   notification: Notification;
@@ -65,7 +66,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
             />
           )}
         </Flex>
-        {notification.viewedAt ? null : <Unread />}
+        {notification.viewedAt ? null : <UnreadBadge style={{ right: 20 }} />}
       </Container>
     </StyledLink>
   );
@@ -100,14 +101,4 @@ const Container = styled(Flex)<{ $unread: boolean }>`
   }
 `;
 
-const Unread = styled.div`
-  width: 8px;
-  height: 8px;
-  background: ${s("accent")};
-  border-radius: 8px;
-  align-self: center;
-  position: absolute;
-  right: 20px;
-`;
-
 export default observer(NotificationListItem);

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -2,6 +2,7 @@ import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { NotificationEventType } from "@shared/types";
 import UserMembership from "~/models/UserMembership";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
@@ -99,7 +100,7 @@ function SharedWithMeLink({ userMembership }: Props) {
           <SidebarLink
             depth={0}
             to={{
-              pathname: document.url,
+              pathname: document.path,
               state: { starred: true },
             }}
             expanded={hasChildDocuments && !isDragging ? expanded : undefined}
@@ -107,6 +108,12 @@ function SharedWithMeLink({ userMembership }: Props) {
             icon={icon}
             label={label}
             exact={false}
+            unreadBadge={
+              document.unreadNotifications.filter(
+                (notification) =>
+                  notification.event === NotificationEventType.AddUserToDocument
+              ).length > 0
+            }
             showActions={menuOpen}
             menu={
               document && !isDragging ? (

app/components/Sidebar/components/SidebarLink.tsx

@@ -7,6 +7,7 @@ import { NavigationNode } from "@shared/types";
 import EventBoundary from "~/components/EventBoundary";
 import EmojiIcon from "~/components/Icons/EmojiIcon";
 import NudeButton from "~/components/NudeButton";
+import { UnreadBadge } from "~/components/UnreadBadge";
 import useUnmount from "~/hooks/useUnmount";
 import { undraggableOnDesktop } from "~/styles";
 import Disclosure from "./Disclosure";
@@ -29,6 +30,7 @@ type Props = Omit<NavLinkProps, "to"> & {
   emoji?: string | null;
   label?: React.ReactNode;
   menu?: React.ReactNode;
+  unreadBadge?: boolean;
   showActions?: boolean;
   disabled?: boolean;
   active?: boolean;
@@ -64,6 +66,7 @@ function SidebarLink(
     expanded,
     onDisclosureClick,
     disabled,
+    unreadBadge,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -141,6 +144,7 @@ function SidebarLink(
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {emoji && <EmojiIcon emoji={emoji} />}
           <Label>{label}</Label>
+          {unreadBadge && <UnreadBadge />}
         </Content>
       </Link>
       {menu && <Actions showActions={showActions}>{menu}</Actions>}

app/components/UnreadBadge.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+export const UnreadBadge = styled.div`
+  width: 8px;
+  height: 8px;
+  background: ${s("accent")};
+  border-radius: 8px;
+  align-self: center;
+  position: absolute;
+  right: 4px;
+`;