fix: Add ability to collapse and expand collections that are not active (#3102)

* fix: add disclosure and transition

* fix: keep collections expanded

* fix: tune transition and collapsing conditions

* fix: collectionIcon expanded props is no longer driven by expanded state

* fix: sync issue

* fix: managing state together

* fix: remove comment

* fix: simplify expanded state

* fix: remove extra state

* fix: remove animation and retain expanded state

* fix: remove isCollectionDropped

* fix: don't use ref

* review suggestions

* fix many functional and design issues

* don't render every single document in the sidebar, just ones that the user has seen before

* chore: Sidebar refinement (#3154)

* stash

* wip: More sidebar tweaks

* Simplify draft bubble

* disclosure refactor

* wip wip

* lint

* tweak menu position

* Use document emoji for starred docs where available

* feat: Trigger cmd+k from sidebar (#3149)

* feat: Trigger cmd+k from sidebar

* Add hint when opening command bar from sidebar

* fix: Clicking internal links in shared documents sometimes reroutes to Login

* fix: Spacing issues on connected slack channels list

* Merge

* fix: Do not prefetch JS bundles on public share links

* fix: Buttons show on collection empty state when user does not have permission to edit

* fix: the hover area for the "collections" subheading was being obfuscated by the initial collection drop cursor

* fix: top-align disclosures

* fix: Disclosure color PR feedback
fix: Starred no longer draggable

* fix: Overflow on sidebar button

* fix: Scrollbar in sidebar when command menu is open

* Minor alignment issues, clarify back in settings sidebar

* fix: Fade component causes SidebarButton missizing

Co-authored-by: Nan Yu <thenanyu@gmail.com>

Co-authored-by: Tom Moor <tom.moor@gmail.com>
Co-authored-by: Nan Yu <thenanyu@gmail.com>

app/components/Sidebar/components/SidebarLink.tsx

@@ -1,10 +1,10 @@
-import { transparentize } from "polished";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "~/components/EventBoundary";
 import NudeButton from "~/components/NudeButton";
 import { NavigationNode } from "~/types";
+import Disclosure from "./Disclosure";
 import NavLink, { Props as NavLinkProps } from "./NavLink";
 
 export type DragObject = NavigationNode & {
@@ -19,11 +19,14 @@ type Props = Omit<NavLinkProps, "to"> & {
   innerRef?: (arg0: HTMLElement | null | undefined) => void;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+  onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;
   icon?: React.ReactNode;
   label?: React.ReactNode;
   menu?: React.ReactNode;
   showActions?: boolean;
   active?: boolean;
+  /* If set, a disclosure will be rendered to the left of any icon */
+  expanded?: boolean;
   isActiveDrop?: boolean;
   isDraft?: boolean;
   depth?: number;
@@ -50,6 +53,8 @@ function SidebarLink(
     href,
     depth,
     className,
+    expanded,
+    onDisclosureClick,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -66,10 +71,10 @@ function SidebarLink(
     () => ({
       fontWeight: 600,
       color: theme.text,
-      background: theme.sidebarItemBackground,
+      background: theme.sidebarActiveBackground,
       ...style,
     }),
-    [theme, style]
+    [theme.text, theme.sidebarActiveBackground, style]
   );
 
   return (
@@ -90,14 +95,34 @@ function SidebarLink(
         ref={ref}
         {...rest}
       >
-        {icon && <IconWrapper>{icon}</IconWrapper>}
-        <Label>{label}</Label>
+        <Content>
+          {expanded !== undefined && (
+            <Disclosure
+              expanded={expanded}
+              onClick={onDisclosureClick}
+              root={depth === 0}
+            />
+          )}
+          {icon && <IconWrapper>{icon}</IconWrapper>}
+          <Label>{label}</Label>
+        </Content>
       </Link>
       {menu && <Actions showActions={showActions}>{menu}</Actions>}
     </>
   );
 }
 
+const Content = styled.span`
+  display: flex;
+  align-items: start;
+  position: relative;
+  width: 100%;
+
+  ${Disclosure} {
+    margin-top: 2px;
+  }
+`;
+
 // accounts for whitespace around icon
 export const IconWrapper = styled.span`
   margin-left: -4px;
@@ -112,6 +137,7 @@ const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
   position: absolute;
   top: 4px;
   right: 4px;
+  gap: 4px;
   color: ${(props) => props.theme.textTertiary};
   transition: opacity 50ms;
 
@@ -158,10 +184,8 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
     transition: fill 50ms;
   }
 
-  &:focus {
-    color: ${(props) => props.theme.text};
-    background: ${(props) =>
-      transparentize("0.25", props.theme.sidebarItemBackground)};
+  &:hover svg {
+    display: inline;
   }
 
   & + ${Actions} {
@@ -170,16 +194,9 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
     }
   }
 
-  &:focus + ${Actions} {
-    ${NudeButton} {
-      background: ${(props) =>
-        transparentize("0.25", props.theme.sidebarItemBackground)};
-    }
-  }
-
   &[aria-current="page"] + ${Actions} {
     ${NudeButton} {
-      background: ${(props) => props.theme.sidebarItemBackground};
+      background: ${(props) => props.theme.sidebarActiveBackground};
     }
   }
 
@@ -202,6 +219,12 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
         props.$isActiveDrop ? props.theme.white : props.theme.text};
     }
   }
+
+  &:hover {
+    ${Disclosure} {
+      opacity: 1;
+    }
+  }
 `;
 
 const Label = styled.div`
@@ -209,6 +232,7 @@ const Label = styled.div`
   width: 100%;
   max-height: 4.8em;
   line-height: 1.6;
+
   * {
     unicode-bidi: plaintext;
   }