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

@@ -5,7 +5,6 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
@@ -14,7 +13,6 @@ import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
 const ANIMATION_MS = 250;
-let isFirstRender = true;
 
 type Props = {
   children: React.ReactNode;
@@ -126,7 +124,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
 
     React.useEffect(() => {
       if (location !== previousLocation) {
-        isFirstRender = false;
         ui.hideMobileSidebar();
       }
     }, [ui, location, previousLocation]);
@@ -146,28 +143,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
       [width, theme.sidebarCollapsedWidth, collapsed]
     );
 
-    const content = (
-      <>
-        {ui.mobileSidebarVisible && (
-          <Portal>
-            <Backdrop onClick={ui.toggleMobileSidebar} />
-          </Portal>
-        )}
-        {children}
-        <ResizeBorder
-          onMouseDown={handleMouseDown}
-          onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
-        />
-        {ui.sidebarCollapsed && !ui.isEditing && (
-          <Toggle
-            onClick={ui.toggleCollapsedSidebar}
-            direction={"right"}
-            aria-label={t("Expand")}
-          />
-        )}
-      </>
-    );
-
     return (
       <>
         <Container
@@ -179,7 +154,23 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
           $collapsed={collapsed}
           column
         >
-          {isFirstRender ? <Fade>{content}</Fade> : content}
+          {ui.mobileSidebarVisible && (
+            <Portal>
+              <Backdrop onClick={ui.toggleMobileSidebar} />
+            </Portal>
+          )}
+          {children}
+          <ResizeBorder
+            onMouseDown={handleMouseDown}
+            onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
+          />
+          {ui.sidebarCollapsed && !ui.isEditing && (
+            <Toggle
+              onClick={ui.toggleCollapsedSidebar}
+              direction={"right"}
+              aria-label={t("Expand")}
+            />
+          )}
         </Container>
         {!ui.isEditing && (
           <Toggle