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

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>}