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

@@ -0,0 +1,81 @@
+import { ExpandedIcon, MoreIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+
+type Props = {
+  title: React.ReactNode;
+  image: React.ReactNode;
+  minHeight?: number;
+  rounded?: boolean;
+  showDisclosure?: boolean;
+  showMoreMenu?: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+const SidebarButton = React.forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      showDisclosure,
+      showMoreMenu,
+      image,
+      title,
+      minHeight = 0,
+      ...rest
+    }: Props,
+    ref
+  ) => (
+    <Wrapper
+      justify="space-between"
+      align="center"
+      as="button"
+      minHeight={minHeight}
+      {...rest}
+      ref={ref}
+    >
+      <Title gap={4} align="center">
+        {image}
+        {title}
+      </Title>
+      {showDisclosure && <ExpandedIcon color="currentColor" />}
+      {showMoreMenu && <MoreIcon color="currentColor" />}
+    </Wrapper>
+  )
+);
+
+const Title = styled(Flex)`
+  color: ${(props) => props.theme.text};
+  flex-shrink: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const Wrapper = styled(Flex)<{ minHeight: number }>`
+  padding: 8px 4px;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 4px;
+  margin: 8px;
+  color: ${(props) => props.theme.textTertiary};
+  border: 0;
+  background: none;
+  flex-shrink: 0;
+  min-height: ${(props) => props.minHeight}px;
+
+  -webkit-appearance: none;
+  text-decoration: none;
+  text-align: left;
+  overflow: hidden;
+  user-select: none;
+  cursor: pointer;
+
+  &:active,
+  &:hover {
+    color: ${(props) => props.theme.sidebarText};
+    transition: background 100ms ease-in-out;
+    background: ${(props) => props.theme.sidebarActiveBackground};
+  }
+`;
+
+export default SidebarButton;