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/menus/AccountMenu.tsx

@@ -2,13 +2,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
-import styled from "styled-components";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
-import { createAction } from "~/actions";
-import { development } from "~/actions/definitions/debug";
 import {
-  navigateToSettings,
+  navigateToProfileSettings,
   openKeyboardShortcuts,
   openChangelog,
   openAPIDocumentation,
@@ -17,9 +14,7 @@ import {
   logout,
 } from "~/actions/definitions/navigation";
 import { changeTheme } from "~/actions/definitions/settings";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePrevious from "~/hooks/usePrevious";
-import useSessions from "~/hooks/useSessions";
 import useStores from "~/hooks/useStores";
 import separator from "~/menus/separator";
 
@@ -28,15 +23,12 @@ type Props = {
 };
 
 function AccountMenu(props: Props) {
-  const [sessions] = useSessions();
   const menu = useMenuState({
-    unstable_offset: [8, 0],
-    placement: "bottom-start",
+    placement: "bottom-end",
     modal: true,
   });
   const { ui } = useStores();
   const { theme } = ui;
-  const team = useCurrentTeam();
   const previousTheme = usePrevious(theme);
   const { t } = useTranslation();
 
@@ -47,39 +39,19 @@ function AccountMenu(props: Props) {
   }, [menu, theme, previousTheme]);
 
   const actions = React.useMemo(() => {
-    const otherSessions = sessions.filter(
-      (session) => session.teamId !== team.id && session.url !== team.url
-    );
-
     return [
-      navigateToSettings,
       openKeyboardShortcuts,
       openAPIDocumentation,
       separator(),
       openChangelog,
       openFeedbackUrl,
       openBugReportUrl,
-      development,
       changeTheme,
+      navigateToProfileSettings,
       separator(),
-      ...(otherSessions.length
-        ? [
-            createAction({
-              name: t("Switch team"),
-              section: "account",
-              children: otherSessions.map((session) => ({
-                id: session.url,
-                name: session.name,
-                section: "account",
-                icon: <Logo alt={session.name} src={session.logoUrl} />,
-                perform: () => (window.location.href = session.url),
-              })),
-            }),
-          ]
-        : []),
       logout,
     ];
-  }, [team.id, team.url, sessions, t]);
+  }, []);
 
   return (
     <>
@@ -91,10 +63,4 @@ function AccountMenu(props: Props) {
   );
 }
 
-const Logo = styled("img")`
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-`;
-
 export default observer(AccountMenu);