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/DocumentLink.tsx

@@ -16,7 +16,6 @@ import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { NavigationNode } from "~/types";
 import { newDocumentPath } from "~/utils/routeHelpers";
-import Disclosure from "./Disclosure";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
@@ -81,7 +80,9 @@ function DocumentLink(
         isActiveDocument)
     );
   }, [hasChildDocuments, activeDocument, isActiveDocument, node, collection]);
+
   const [expanded, setExpanded] = React.useState(showChildren);
+  const [openedOnce, setOpenedOnce] = React.useState(expanded);
 
   React.useEffect(() => {
     if (showChildren) {
@@ -89,6 +90,12 @@ function DocumentLink(
     }
   }, [showChildren]);
 
+  React.useEffect(() => {
+    if (expanded) {
+      setOpenedOnce(true);
+    }
+  }, [expanded]);
+
   // when the last child document is removed,
   // also close the local folder state to closed
   React.useEffect(() => {
@@ -98,7 +105,7 @@ function DocumentLink(
   }, [expanded, hasChildDocuments]);
 
   const handleDisclosureClick = React.useCallback(
-    (ev: React.SyntheticEvent) => {
+    (ev) => {
       ev.preventDefault();
       ev.stopPropagation();
       setExpanded(!expanded);
@@ -270,6 +277,8 @@ function DocumentLink(
     t("Untitled");
 
   const can = policies.abilities(node.id);
+  const isExpanded = expanded && !isDragging;
+  const hasChildren = nodeChildren.length > 0;
 
   return (
     <>
@@ -283,6 +292,8 @@ function DocumentLink(
           <div ref={dropToReparent}>
             <DropToImport documentId={node.id} activeClassName="activeDropZone">
               <SidebarLink
+                expanded={hasChildren ? isExpanded : undefined}
+                onDisclosureClick={handleDisclosureClick}
                 onMouseEnter={handleMouseEnter}
                 to={{
                   pathname: node.url,
@@ -291,21 +302,13 @@ function DocumentLink(
                   },
                 }}
                 label={
-                  <>
-                    {hasChildDocuments && (
-                      <Disclosure
-                        expanded={expanded && !isDragging}
-                        onClick={handleDisclosureClick}
-                      />
-                    )}
-                    <EditableTitle
-                      title={title}
-                      onSubmit={handleTitleChange}
-                      onEditing={handleTitleEditing}
-                      canUpdate={canUpdate}
-                      maxLength={MAX_TITLE_LENGTH}
-                    />
-                  </>
+                  <EditableTitle
+                    title={title}
+                    onSubmit={handleTitleChange}
+                    onEditing={handleTitleEditing}
+                    canUpdate={canUpdate}
+                    maxLength={MAX_TITLE_LENGTH}
+                  />
                 }
                 isActive={(match, location) =>
                   !!match && location.search !== "?starred"
@@ -351,26 +354,32 @@ function DocumentLink(
           <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
         )}
       </Relative>
-      {expanded &&
-        !isDragging &&
-        nodeChildren.map((childNode, index) => (
-          <ObservedDocumentLink
-            key={childNode.id}
-            collection={collection}
-            node={childNode}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            isDraft={childNode.isDraft}
-            depth={depth + 1}
-            canUpdate={canUpdate}
-            index={index}
-            parentId={node.id}
-          />
-        ))}
+      {openedOnce && (
+        <Folder $open={expanded && !isDragging}>
+          {nodeChildren.map((childNode, index) => (
+            <ObservedDocumentLink
+              key={childNode.id}
+              collection={collection}
+              node={childNode}
+              activeDocument={activeDocument}
+              prefetchDocument={prefetchDocument}
+              isDraft={childNode.isDraft}
+              depth={depth + 1}
+              canUpdate={canUpdate}
+              index={index}
+              parentId={node.id}
+            />
+          ))}
+        </Folder>
+      )}
     </>
   );
 }
 
+const Folder = styled.div<{ $open?: boolean }>`
+  display: ${(props) => (props.$open ? "block" : "none")};
+`;
+
 const Relative = styled.div`
   position: relative;
 `;