fix: Remove metadata on nested docs, use EmojiIcon component

app/actions/definitions/navigation.tsx

@@ -10,6 +10,7 @@ import {
   KeyboardIcon,
   EmailIcon,
   LogoutIcon,
+  ProfileIcon,
 } from "outline-icons";
 import * as React from "react";
 import {
@@ -29,7 +30,8 @@ import {
 } from "~/actions/sections";
 import history from "~/utils/history";
 import {
-  settingsPath,
+  organizationSettingsPath,
+  profileSettingsPath,
   homePath,
   searchPath,
   draftsPath,
@@ -103,9 +105,16 @@ export const navigateToSettings = createAction({
   name: ({ t }) => t("Settings"),
   section: NavigationSection,
   shortcut: ["g", "s"],
-  iconInContextMenu: false,
   icon: <SettingsIcon />,
-  perform: () => history.push(settingsPath()),
+  perform: () => history.push(organizationSettingsPath()),
+});
+
+export const navigateToProfileSettings = createAction({
+  name: ({ t }) => t("Profile"),
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <ProfileIcon />,
+  perform: () => history.push(profileSettingsPath()),
 });
 
 export const openAPIDocumentation = createAction({

app/components/Avatar/Avatar.tsx

@@ -11,6 +11,7 @@ type Props = {
   icon?: React.ReactNode;
   user?: User;
   alt?: string;
+  showBorder?: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
   className?: string;
 };
@@ -29,12 +30,13 @@ class Avatar extends React.Component<Props> {
   };
 
   render() {
-    const { src, icon, ...rest } = this.props;
+    const { src, icon, showBorder, ...rest } = this.props;
     return (
       <AvatarWrapper>
         <CircleImg
           onError={this.handleError}
           src={this.error ? placeholder : src}
+          $showBorder={showBorder}
           {...rest}
         />
         {icon && <IconWrapper>{icon}</IconWrapper>}
@@ -59,12 +61,14 @@ const IconWrapper = styled.div`
   height: 20px;
 `;
 
-const CircleImg = styled.img<{ size: number }>`
+const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid ${(props) => props.theme.background};
+  border: 2px solid
+    ${(props) =>
+      props.$showBorder === false ? "transparent" : props.theme.background};
   flex-shrink: 0;
 `;
 

app/components/Bubble.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import { bounceIn } from "~/styles/animations";
-
-type Props = {
-  count: number;
-};
-
-const Bubble = ({ count }: Props) => {
-  if (!count) {
-    return null;
-  }
-
-  return <Count>{count}</Count>;
-};
-
-const Count = styled.div`
-  animation: ${bounceIn} 600ms;
-  transform-origin: center center;
-  color: ${(props) => props.theme.white};
-  background: ${(props) => props.theme.slateDark};
-  display: inline-block;
-  font-feature-settings: "tnum";
-  font-weight: 600;
-  font-size: 9px;
-  white-space: nowrap;
-  vertical-align: baseline;
-  min-width: 16px;
-  min-height: 16px;
-  line-height: 16px;
-  border-radius: 8px;
-  text-align: center;
-  padding: 0 4px;
-  margin-left: 8px;
-  user-select: none;
-`;
-
-export default Bubble;

app/components/EmojiIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  /* The emoji to render */
+  emoji: string;
+  /* The size of the emoji, 24px is default to match standard icons */
+  size?: number;
+};
+
+/**
+ * EmojiIcon is a component that renders an emoji in the size of a standard icon
+ * in a way that can be used wherever an Icon would be.
+ */
+export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
+  return (
+    <Span $size={size} {...rest}>
+      {emoji}
+    </Span>
+  );
+}
+
+const Span = styled.span<{ $size: number }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  text-indent: -0.15em;
+  font-size: 14px;
+`;

app/components/Sidebar/App.tsx

@@ -1,44 +1,40 @@
 import { useKBar } from "kbar";
 import { observer } from "mobx-react";
-import {
-  EditIcon,
-  SearchIcon,
-  ShapesIcon,
-  HomeIcon,
-  SettingsIcon,
-} from "outline-icons";
+import { EditIcon, SearchIcon, ShapesIcon, HomeIcon } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
-import Bubble from "~/components/Bubble";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
+import Text from "~/components/Text";
 import { inviteUser } from "~/actions/definitions/users";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
+import OrganizationMenu from "~/menus/OrganizationMenu";
 import {
   homePath,
   draftsPath,
   templatesPath,
-  settingsPath,
   searchPath,
 } from "~/utils/routeHelpers";
+import Avatar from "../Avatar";
+import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
 import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarAction from "./components/SidebarAction";
+import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
-import TeamButton from "./components/TeamButton";
 import TrashLink from "./components/TrashLink";
 
-function MainSidebar() {
+function AppSidebar() {
   const { t } = useTranslation();
   const { ui, policies, documents } = useStores();
   const team = useCurrentTeam();
@@ -76,18 +72,19 @@ function MainSidebar() {
     <Sidebar ref={handleSidebarRef}>
       {dndArea && (
         <DndProvider backend={HTML5Backend} options={html5Options}>
-          <AccountMenu>
+          <OrganizationMenu>
             {(props) => (
-              <TeamButton
+              <SidebarButton
                 {...props}
-                subheading={user.name}
-                teamName={team.name}
-                logoUrl={team.avatarUrl}
+                title={team.name}
+                image={
+                  <StyledTeamLogo src={team.avatarUrl} width={32} height={32} />
+                }
                 showDisclosure
               />
             )}
-          </AccountMenu>
-          <Scrollable flex topShadow>
+          </OrganizationMenu>
+          <Scrollable flex shadow>
             <Section>
               <SidebarLink
                 to={homePath()}
@@ -106,15 +103,19 @@ function MainSidebar() {
                   to={draftsPath()}
                   icon={<EditIcon color="currentColor" />}
                   label={
-                    <Drafts align="center">
+                    <Flex align="center" justify="space-between">
                       {t("Drafts")}
-                      <Bubble count={documents.totalDrafts} />
-                    </Drafts>
+                      <Drafts size="xsmall" type="tertiary">
+                        {documents.totalDrafts}
+                      </Drafts>
+                    </Flex>
                   }
                 />
               )}
             </Section>
-            <Starred />
+            <Section>
+              <Starred />
+            </Section>
             <Section auto>
               <Collections />
             </Section>
@@ -138,23 +139,41 @@ function MainSidebar() {
                   <TrashLink />
                 </>
               )}
-              <SidebarLink
-                to={settingsPath()}
-                icon={<SettingsIcon color="currentColor" />}
-                exact={false}
-                label={t("Settings")}
-              />
               <SidebarAction action={inviteUser} />
             </Section>
           </Scrollable>
+          <AccountMenu>
+            {(props) => (
+              <SidebarButton
+                {...props}
+                showMoreMenu
+                title={user.name}
+                image={
+                  <StyledAvatar
+                    src={user.avatarUrl}
+                    size={24}
+                    showBorder={false}
+                  />
+                }
+              />
+            )}
+          </AccountMenu>
         </DndProvider>
       )}
     </Sidebar>
   );
 }
 
-const Drafts = styled(Flex)`
-  height: 24px;
+const StyledTeamLogo = styled(TeamLogo)`
+  margin-right: 4px;
 `;
 
-export default observer(MainSidebar);
+const StyledAvatar = styled(Avatar)`
+  margin-left: 4px;
+`;
+
+const Drafts = styled(Text)`
+  margin: 0 4px;
+`;
+
+export default observer(AppSidebar);

app/components/Sidebar/Settings.tsx

@@ -9,7 +9,7 @@ import {
   GroupIcon,
   LinkIcon,
   TeamIcon,
-  ExpandedIcon,
+  BackIcon,
   BeakerIcon,
   DownloadIcon,
 } from "outline-icons";
@@ -27,8 +27,8 @@ import useStores from "~/hooks/useStores";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
+import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
-import TeamButton from "./components/TeamButton";
 import Version from "./components/Version";
 
 const isHosted = env.DEPLOYMENT === "hosted";
@@ -46,14 +46,9 @@ function SettingsSidebar() {
 
   return (
     <Sidebar>
-      <TeamButton
-        subheading={
-          <ReturnToApp align="center">
-            <BackIcon color="currentColor" /> {t("Return to App")}
-          </ReturnToApp>
-        }
-        teamName={team.name}
-        logoUrl={team.avatarUrl}
+      <SidebarButton
+        title={t("Settings")}
+        image={<StyledBackIcon color="currentColor" />}
         onClick={returnToDashboard}
       />
 
@@ -165,13 +160,8 @@ function SettingsSidebar() {
   );
 }
 
-const BackIcon = styled(ExpandedIcon)`
-  transform: rotate(90deg);
-  margin-left: -8px;
-`;
-
-const ReturnToApp = styled(Flex)`
-  height: 16px;
+const StyledBackIcon = styled(BackIcon)`
+  margin-left: 4px;
 `;
 
 export default observer(SettingsSidebar);

app/components/Sidebar/components/CollectionLink.tsx

@@ -1,7 +1,7 @@
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useDrop, useDrag } from "react-dnd";
+import { useDrop, useDrag, DropTargetMonitor } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { useLocation, useHistory } from "react-router-dom";
 import styled from "styled-components";
@@ -70,6 +70,13 @@ function CollectionLink({
     collection.id === ui.activeCollectionId
   );
 
+  const [openedOnce, setOpenedOnce] = React.useState(expanded);
+  React.useEffect(() => {
+    if (expanded) {
+      setOpenedOnce(true);
+    }
+  }, [expanded]);
+
   const manualSort = collection.sort.field === "index";
   const can = policies.abilities(collection.id);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
@@ -118,7 +125,7 @@ function CollectionLink({
   // Drop to reorder document
   const [{ isOverReorder }, dropToReorder] = useDrop({
     accept: "document",
-    drop: async (item: DragObject) => {
+    drop: (item: DragObject) => {
       if (!collection) {
         return;
       }
@@ -131,11 +138,11 @@ function CollectionLink({
 
   // Drop to reorder collection
   const [
-    { isCollectionDropping, isDraggingAnotherCollection },
+    { isCollectionDropping, isDraggingAnyCollection },
     dropToReorderCollection,
   ] = useDrop({
     accept: "collection",
-    drop: async (item: DragObject) => {
+    drop: (item: DragObject) => {
       collections.move(
         item.id,
         fractionalIndex(collection.index, belowCollectionIndex)
@@ -147,9 +154,9 @@ function CollectionLink({
         (!belowCollection || item.id !== belowCollection.id)
       );
     },
-    collect: (monitor) => ({
+    collect: (monitor: DropTargetMonitor<Collection, Collection>) => ({
       isCollectionDropping: monitor.isOver(),
-      isDraggingAnotherCollection: monitor.canDrop(),
+      isDraggingAnyCollection: monitor.getItemType() === "collection",
     }),
   });
 
@@ -194,8 +201,7 @@ function CollectionLink({
     collection.sort,
   ]);
 
-  const isDraggingAnyCollection =
-    isDraggingAnotherCollection || isCollectionDragging;
+  const displayDocumentLinks = expanded && !isCollectionDragging;
 
   React.useEffect(() => {
     // If we're viewing a starred document through the starred menu then don't
@@ -204,21 +210,14 @@ function CollectionLink({
       return;
     }
 
-    if (isDraggingAnyCollection) {
-      setExpanded(false);
-    } else {
-      setExpanded(collection.id === ui.activeCollectionId);
+    if (collection.id === ui.activeCollectionId) {
+      setExpanded(true);
     }
-  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId, search]);
+  }, [collection.id, ui.activeCollectionId, search]);
 
   return (
     <>
-      <div
-        ref={drop}
-        style={{
-          position: "relative",
-        }}
-      >
+      <Relative ref={drop}>
         <Draggable
           key={collection.id}
           ref={dragToReorderCollection}
@@ -228,8 +227,16 @@ function CollectionLink({
           <DropToImport collectionId={collection.id}>
             <SidebarLink
               to={collection.url}
+              expanded={displayDocumentLinks}
+              onDisclosureClick={(event) => {
+                event.preventDefault();
+                setExpanded((prev) => !prev);
+              }}
               icon={
-                <CollectionIcon collection={collection} expanded={expanded} />
+                <CollectionIcon
+                  collection={collection}
+                  expanded={displayDocumentLinks}
+                />
               }
               showActions={menuOpen}
               isActiveDrop={isOver && canDrop}
@@ -242,12 +249,13 @@ function CollectionLink({
                 />
               }
               exact={false}
-              depth={0.5}
+              depth={0}
               menu={
-                !isEditing && (
+                !isEditing &&
+                !isDraggingAnyCollection && (
                   <>
-                    {can.update && (
-                      <CollectionSortMenuWithMargin
+                    {can.update && displayDocumentLinks && (
+                      <CollectionSortMenu
                         collection={collection}
                         onOpen={handleMenuOpen}
                         onClose={handleMenuClose}
@@ -264,8 +272,31 @@ function CollectionLink({
             />
           </DropToImport>
         </Draggable>
-        {expanded && manualSort && (
-          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+      </Relative>
+      <Relative>
+        {openedOnce && (
+          <Folder $open={displayDocumentLinks}>
+            {manualSort && (
+              <DropCursor
+                isActiveDrop={isOverReorder}
+                innerRef={dropToReorder}
+                position="top"
+              />
+            )}
+            {collectionDocuments.map((node, index) => (
+              <DocumentLink
+                key={node.id}
+                node={node}
+                collection={collection}
+                activeDocument={activeDocument}
+                prefetchDocument={prefetchDocument}
+                canUpdate={canUpdate}
+                isDraft={node.isDraft}
+                depth={2}
+                index={index}
+              />
+            ))}
+          </Folder>
         )}
         {isDraggingAnyCollection && (
           <DropCursor
@@ -273,21 +304,8 @@ function CollectionLink({
             innerRef={dropToReorderCollection}
           />
         )}
-      </div>
-      {expanded &&
-        collectionDocuments.map((node, index) => (
-          <DocumentLink
-            key={node.id}
-            node={node}
-            collection={collection}
-            activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
-            canUpdate={canUpdate}
-            isDraft={node.isDraft}
-            depth={2}
-            index={index}
-          />
-        ))}
+      </Relative>
+
       <Modal
         title={t("Move document")}
         onRequestClose={handlePermissionClose}
@@ -306,13 +324,17 @@ function CollectionLink({
   );
 }
 
+const Relative = styled.div`
+  position: relative;
+`;
+
+const Folder = styled.div<{ $open?: boolean }>`
+  display: ${(props) => (props.$open ? "block" : "none")};
+`;
+
 const Draggable = styled("div")<{ $isDragging: boolean; $isMoving: boolean }>`
   opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
   pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
 `;
 
-const CollectionSortMenuWithMargin = styled(CollectionSortMenu)`
-  margin-right: 4px;
-`;
-
 export default observer(CollectionLink);

app/components/Sidebar/components/Collections.tsx

@@ -1,6 +1,5 @@
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
-import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
@@ -13,9 +12,10 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import CollectionLink from "./CollectionLink";
 import DropCursor from "./DropCursor";
+import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarAction from "./SidebarAction";
-import SidebarLink, { DragObject } from "./SidebarLink";
+import { DragObject } from "./SidebarLink";
 
 function Collections() {
   const [isFetching, setFetching] = React.useState(false);
@@ -85,17 +85,14 @@ function Collections() {
           belowCollection={orderedCollections[index + 1]}
         />
       ))}
-      <SidebarAction action={createCollection} depth={0.5} />
+      <SidebarAction action={createCollection} depth={0} />
     </>
   );
 
   if (!collections.isLoaded || fetchError) {
     return (
       <Flex column>
-        <SidebarLink
-          label={t("Collections")}
-          icon={<Disclosure expanded={expanded} color="currentColor" />}
-        />
+        <Header>{t("Collections")}</Header>
         <PlaceholderCollections />
       </Flex>
     );
@@ -103,19 +100,18 @@ function Collections() {
 
   return (
     <Flex column>
-      <SidebarLink
-        onClick={() => setExpanded((prev) => !prev)}
-        label={t("Collections")}
-        icon={<Disclosure expanded={expanded} color="currentColor" />}
-      />
-      {expanded && (isPreloaded ? content : <Fade>{content}</Fade>)}
+      <Header onClick={() => setExpanded((prev) => !prev)} expanded={expanded}>
+        {t("Collections")}
+      </Header>
+      {expanded && (
+        <Relative>{isPreloaded ? content : <Fade>{content}</Fade>}</Relative>
+      )}
     </Flex>
   );
 }
 
-const Disclosure = styled(CollapsedIcon)<{ expanded?: boolean }>`
-  transition: transform 100ms ease, fill 50ms !important;
-  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+const Relative = styled.div`
+  position: relative;
 `;
 
 export default observer(Collections);

app/components/Sidebar/components/Disclosure.ts

@@ -1,12 +0,0 @@
-import { CollapsedIcon } from "outline-icons";
-import styled from "styled-components";
-
-const Disclosure = styled(CollapsedIcon)<{ expanded?: boolean }>`
-  transition: transform 100ms ease, fill 50ms !important;
-  position: absolute;
-  left: -24px;
-
-  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
-`;
-
-export default Disclosure;

app/components/Sidebar/components/Disclosure.tsx

@@ -0,0 +1,53 @@
+import { CollapsedIcon } from "outline-icons";
+import * as React from "react";
+import styled, { css } from "styled-components";
+import NudeButton from "~/components/NudeButton";
+
+type Props = {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  expanded: boolean;
+  root?: boolean;
+};
+
+function Disclosure({ onClick, root, expanded, ...rest }: Props) {
+  return (
+    <Button size={20} onClick={onClick} $root={root} {...rest}>
+      <StyledCollapsedIcon expanded={expanded} size={20} color="currentColor" />
+    </Button>
+  );
+}
+
+const Button = styled(NudeButton)<{ $root?: boolean }>`
+  position: absolute;
+  left: -24px;
+  flex-shrink: 0;
+
+  &:hover {
+    color: ${(props) => props.theme.sidebarText};
+    background: ${(props) => props.theme.sidebarControlHoverBackground};
+  }
+
+  ${(props) =>
+    props.$root &&
+    css`
+      opacity: 0;
+      left: -16px;
+
+      &:hover {
+        opacity: 1;
+        background: none;
+      }
+    `}
+`;
+
+const StyledCollapsedIcon = styled(CollapsedIcon)<{
+  expanded?: boolean;
+}>`
+  transition: opacity 100ms ease, transform 100ms ease, fill 50ms !important;
+  ${(props) => !props.expanded && "transform: rotate(-90deg);"};
+`;
+
+// Enables identifying this component within styled components
+const StyledDisclosure = styled(Disclosure)``;
+
+export default StyledDisclosure;

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;
 `;

app/components/Sidebar/components/DropCursor.tsx

@@ -23,7 +23,7 @@ const Cursor = styled.div<{ isOver?: boolean; position?: "top" }>`
   width: 100%;
   height: 14px;
   background: transparent;
-  ${(props) => (props.position === "top" ? "top: 25px;" : "bottom: -7px;")}
+  ${(props) => (props.position === "top" ? "top: -7px;" : "bottom: -7px;")}
 
   ::after {
     background: ${(props) => props.theme.slateDark};

app/components/Sidebar/components/Header.ts

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-import Flex from "~/components/Flex";
-
-const Header = styled(Flex)`
-  font-size: 11px;
-  font-weight: 600;
-  user-select: none;
-  text-transform: uppercase;
-  color: ${(props) => props.theme.sidebarText};
-  letter-spacing: 0.04em;
-  margin: 4px 12px;
-`;
-
-export default Header;

app/components/Sidebar/components/Header.tsx

@@ -0,0 +1,64 @@
+import { CollapsedIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  onClick?: React.MouseEventHandler;
+  expanded?: boolean;
+  children: React.ReactNode;
+};
+
+export function Header({ onClick, expanded, children }: Props) {
+  return (
+    <H3>
+      <Button onClick={onClick} disabled={!onClick}>
+        {children}
+        {onClick && (
+          <Disclosure expanded={expanded} color="currentColor" size={20} />
+        )}
+      </Button>
+    </H3>
+  );
+}
+
+const Button = styled.button`
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 600;
+  user-select: none;
+  color: ${(props) => props.theme.textTertiary};
+  letter-spacing: 0.03em;
+  margin: 0;
+  padding: 4px 2px 4px 12px;
+  height: 22px;
+  border: 0;
+  background: none;
+  border-radius: 4px;
+  -webkit-appearance: none;
+  transition: all 100ms ease;
+
+  &:not(:disabled):hover,
+  &:not(:disabled):active {
+    color: ${(props) => props.theme.textSecondary};
+    cursor: pointer;
+  }
+`;
+
+const Disclosure = styled(CollapsedIcon)<{ expanded?: boolean }>`
+  transition: opacity 100ms ease, transform 100ms ease, fill 50ms !important;
+  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+  opacity: 0;
+`;
+
+const H3 = styled.h3`
+  margin: 0;
+
+  &:hover {
+    ${Disclosure} {
+      opacity: 1;
+    }
+  }
+`;
+
+export default Header;

app/components/Sidebar/components/SidebarButton.tsx

@@ -0,0 +1,66 @@
+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;
+  rounded?: boolean;
+  showDisclosure?: boolean;
+  showMoreMenu?: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+const SidebarButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ showDisclosure, showMoreMenu, image, title, ...rest }: Props, ref) => (
+    <Wrapper
+      justify="space-between"
+      align="center"
+      as="button"
+      {...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};
+`;
+
+const Wrapper = styled(Flex)`
+  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;
+
+  white-space: nowrap;
+  -webkit-appearance: none;
+  text-decoration: none;
+  text-align: left;
+  text-overflow: ellipsis;
+  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;

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,30 @@ 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: center;
+  position: relative;
+  width: 100%;
+`;
+
 // accounts for whitespace around icon
 export const IconWrapper = styled.span`
   margin-left: -4px;
@@ -112,6 +133,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 +180,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 +190,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 +215,13 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
         props.$isActiveDrop ? props.theme.white : props.theme.text};
     }
   }
+
+  &:hover {
+    ${Disclosure} {
+      opacity: 1;
+      color: ${(props) => props.theme.text};
+    }
+  }
 `;
 
 const Label = styled.div`
@@ -209,6 +229,7 @@ const Label = styled.div`
   width: 100%;
   max-height: 4.8em;
   line-height: 1.6;
+
   * {
     unicode-bidi: plaintext;
   }

app/components/Sidebar/components/Starred.tsx

@@ -1,6 +1,5 @@
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
-import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
@@ -10,8 +9,8 @@ import Flex from "~/components/Flex";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import DropCursor from "./DropCursor";
+import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
-import Section from "./Section";
 import SidebarLink from "./SidebarLink";
 import StarredLink from "./StarredLink";
 
@@ -119,71 +118,64 @@ function Starred() {
     }),
   });
 
-  const content = stars.orderedData.slice(0, upperBound).map((star) => {
-    const document = documents.get(star.documentId);
-
-    return document ? (
-      <StarredLink
-        key={star.id}
-        star={star}
-        documentId={document.id}
-        collectionId={document.collectionId}
-        to={document.url}
-        title={document.title}
-        depth={2}
-      />
-    ) : null;
-  });
-
   if (!stars.orderedData.length) {
     return null;
   }
 
   return (
-    <Section>
-      <Flex column>
-        <SidebarLink
-          onClick={handleExpandClick}
-          label={t("Starred")}
-          icon={<Disclosure expanded={expanded} color="currentColor" />}
-        />
-        {expanded && (
-          <>
-            <DropCursor
-              isActiveDrop={isOverReorder}
-              innerRef={dropToReorder}
-              position="top"
+    <Flex column>
+      <Header onClick={handleExpandClick} expanded={expanded}>
+        {t("Starred")}
+      </Header>
+      {expanded && (
+        <Relative>
+          <DropCursor
+            isActiveDrop={isOverReorder}
+            innerRef={dropToReorder}
+            position="top"
+          />
+          {stars.orderedData.slice(0, upperBound).map((star) => {
+            const document = documents.get(star.documentId);
+
+            return document ? (
+              <StarredLink
+                key={star.id}
+                star={star}
+                documentId={document.id}
+                collectionId={document.collectionId}
+                to={document.url}
+                title={document.title}
+                depth={0}
+              />
+            ) : null;
+          })}
+          {show === "More" && !isFetching && (
+            <SidebarLink
+              onClick={handleShowMore}
+              label={`${t("Show more")}…`}
+              depth={0}
             />
-            {content}
-            {show === "More" && !isFetching && (
-              <SidebarLink
-                onClick={handleShowMore}
-                label={`${t("Show more")}…`}
-                depth={2}
-              />
-            )}
-            {show === "Less" && !isFetching && (
-              <SidebarLink
-                onClick={handleShowLess}
-                label={`${t("Show less")}…`}
-                depth={2}
-              />
-            )}
-            {(isFetching || fetchError) && !stars.orderedData.length && (
-              <Flex column>
-                <PlaceholderCollections />
-              </Flex>
-            )}
-          </>
-        )}
-      </Flex>
-    </Section>
+          )}
+          {show === "Less" && !isFetching && (
+            <SidebarLink
+              onClick={handleShowLess}
+              label={`${t("Show less")}…`}
+              depth={0}
+            />
+          )}
+          {(isFetching || fetchError) && !stars.orderedData.length && (
+            <Flex column>
+              <PlaceholderCollections />
+            </Flex>
+          )}
+        </Relative>
+      )}
+    </Flex>
   );
 }
 
-const Disclosure = styled(CollapsedIcon)<{ expanded?: boolean }>`
-  transition: transform 100ms ease, fill 50ms !important;
-  ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
+const Relative = styled.div`
+  position: relative;
 `;
 
 export default observer(Starred);

app/components/Sidebar/components/StarredLink.tsx

@@ -1,19 +1,18 @@
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
+import { StarredIcon } from "outline-icons";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { MAX_TITLE_LENGTH } from "@shared/constants";
+import styled, { useTheme } from "styled-components";
+import parseTitle from "@shared/utils/parseTitle";
 import Star from "~/models/Star";
+import EmojiIcon from "~/components/EmojiIcon";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
-import Disclosure from "./Disclosure";
 import DropCursor from "./DropCursor";
-import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
@@ -27,24 +26,22 @@ type Props = {
 
 function StarredLink({
   depth,
-  title,
   to,
   documentId,
+  title,
   collectionId,
   star,
 }: Props) {
-  const { t } = useTranslation();
-  const { collections, documents, policies } = useStores();
+  const theme = useTheme();
+  const { collections, documents } = useStores();
   const collection = collections.get(collectionId);
   const document = documents.get(documentId);
   const [expanded, setExpanded] = useState(false);
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-  const canUpdate = policies.abilities(documentId).update;
   const childDocuments = collection
     ? collection.getDocumentChildren(documentId)
     : [];
   const hasChildDocuments = childDocuments.length > 0;
-  const [isEditing, setIsEditing] = React.useState(false);
 
   useEffect(() => {
     async function load() {
@@ -57,7 +54,7 @@ function StarredLink({
   }, [collection, collectionId, collections, document, documentId, documents]);
 
   const handleDisclosureClick = React.useCallback(
-    (ev: React.MouseEvent<SVGElement>) => {
+    (ev: React.MouseEvent<HTMLButtonElement>) => {
       ev.preventDefault();
       ev.stopPropagation();
       setExpanded((prevExpanded) => !prevExpanded);
@@ -65,29 +62,6 @@ function StarredLink({
     []
   );
 
-  const handleTitleChange = React.useCallback(
-    async (title: string) => {
-      if (!document) {
-        return;
-      }
-      await documents.update(
-        {
-          id: document.id,
-          text: document.text,
-          title,
-        },
-        {
-          lastRevision: document.revision,
-        }
-      );
-    },
-    [documents, document]
-  );
-
-  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
-    setIsEditing(isEditing);
-  }, []);
-
   // Draggable
   const [{ isDragging }, drag] = useDrag({
     type: "star",
@@ -116,36 +90,34 @@ function StarredLink({
     }),
   });
 
+  const { emoji } = parseTitle(title);
+  const label = emoji ? title.replace(emoji, "") : title;
+
   return (
     <>
       <Draggable key={documentId} ref={drag} $isDragging={isDragging}>
         <SidebarLink
           depth={depth}
+          expanded={hasChildDocuments ? expanded : undefined}
+          onDisclosureClick={handleDisclosureClick}
           to={`${to}?starred`}
+          icon={
+            depth === 0 ? (
+              emoji ? (
+                <EmojiIcon emoji={emoji} />
+              ) : (
+                <StarredIcon color={theme.yellow} />
+              )
+            ) : undefined
+          }
           isActive={(match, location) =>
             !!match && location.search === "?starred"
           }
-          label={
-            <>
-              {hasChildDocuments && (
-                <Disclosure
-                  expanded={expanded}
-                  onClick={handleDisclosureClick}
-                />
-              )}
-              <EditableTitle
-                title={title || t("Untitled")}
-                onSubmit={handleTitleChange}
-                onEditing={handleTitleEditing}
-                canUpdate={canUpdate}
-                maxLength={MAX_TITLE_LENGTH}
-              />
-            </>
-          }
+          label={depth === 0 ? label : title}
           exact={false}
           showActions={menuOpen}
           menu={
-            document && !isEditing ? (
+            document ? (
               <Fade>
                 <DocumentMenu
                   document={document}
@@ -164,7 +136,7 @@ function StarredLink({
         childDocuments.map((childDocument) => (
           <ObserveredStarredLink
             key={childDocument.id}
-            depth={depth + 1}
+            depth={depth === 0 ? 2 : depth + 1}
             title={childDocument.title}
             to={childDocument.url}
             documentId={childDocument.id}

app/components/Sidebar/components/TeamButton.tsx

@@ -1,92 +0,0 @@
-import { observer } from "mobx-react";
-import { ExpandedIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import Flex from "~/components/Flex";
-import TeamLogo from "~/components/TeamLogo";
-
-type Props = {
-  teamName: string;
-  subheading: React.ReactNode;
-  showDisclosure?: boolean;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-  logoUrl: string;
-};
-
-const TeamButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
-    <Wrapper>
-      <Header ref={ref} {...rest}>
-        <TeamLogo
-          alt={`${teamName} logo`}
-          src={logoUrl}
-          width={38}
-          height={38}
-        />
-        <Flex align="flex-start" column>
-          <TeamName>
-            {teamName} {showDisclosure && <Disclosure color="currentColor" />}
-          </TeamName>
-          <Subheading>{subheading}</Subheading>
-        </Flex>
-      </Header>
-    </Wrapper>
-  )
-);
-
-const Disclosure = styled(ExpandedIcon)`
-  position: absolute;
-  right: 0;
-  top: 0;
-`;
-
-const Subheading = styled.div`
-  padding-left: 10px;
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 500;
-  white-space: nowrap;
-  color: ${(props) => props.theme.sidebarText};
-`;
-
-const TeamName = styled.div`
-  position: relative;
-  padding-left: 10px;
-  padding-right: 24px;
-  font-weight: 600;
-  color: ${(props) => props.theme.text};
-  white-space: nowrap;
-  text-decoration: none;
-  font-size: 16px;
-
-  text-align: left;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-
-const Wrapper = styled.div`
-  flex-shrink: 0;
-  overflow: hidden;
-`;
-
-const Header = styled.button`
-  display: flex;
-  align-items: center;
-  background: none;
-  line-height: inherit;
-  border: 0;
-  padding: 8px;
-  margin: 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  width: calc(100% - 16px);
-
-  &:active,
-  &:hover {
-    transition: background 100ms ease-in-out;
-    background: ${(props) => props.theme.sidebarItemBackground};
-  }
-`;
-
-export default observer(TeamButton);

app/components/Sidebar/index.ts

@@ -1,3 +1,3 @@
-import Sidebar from "./Main";
+import Sidebar from "./App";
 
 export default Sidebar;

app/components/TeamLogo.ts

@@ -6,7 +6,7 @@ const TeamLogo = styled.img<{ width?: number; height?: number; size?: string }>`
   height: ${(props) =>
     props.height ? `${props.height}px` : props.size || "38px"};
   border-radius: 4px;
-  background: ${(props) => props.theme.background};
+  background: white;
   border: 1px solid ${(props) => props.theme.divider};
   overflow: hidden;
   flex-shrink: 0;

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);

app/menus/OrganizationMenu.tsx

@@ -0,0 +1,82 @@
+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 { navigateToSettings, logout } from "~/actions/definitions/navigation";
+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";
+
+type Props = {
+  children: (props: any) => React.ReactNode;
+};
+
+function OrganizationMenu(props: Props) {
+  const [sessions] = useSessions();
+  const menu = useMenuState({
+    unstable_offset: [4, -4],
+    placement: "bottom-start",
+    modal: true,
+  });
+  const { ui } = useStores();
+  const { theme } = ui;
+  const team = useCurrentTeam();
+  const previousTheme = usePrevious(theme);
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    if (theme !== previousTheme) {
+      menu.hide();
+    }
+  }, [menu, theme, previousTheme]);
+
+  const actions = React.useMemo(() => {
+    const otherSessions = sessions.filter(
+      (session) => session.teamId !== team.id && session.url !== team.url
+    );
+
+    return [
+      navigateToSettings,
+      logout,
+      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),
+              })),
+            }),
+          ]
+        : []),
+    ];
+  }, [team.id, team.url, sessions, t]);
+
+  return (
+    <>
+      <MenuButton {...menu}>{props.children}</MenuButton>
+      <ContextMenu {...menu} aria-label={t("Account")}>
+        <Template {...menu} items={undefined} actions={actions} />
+      </ContextMenu>
+    </>
+  );
+}
+
+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+`;
+
+export default observer(OrganizationMenu);

app/scenes/Document/components/ReferenceListItem.tsx

@@ -3,8 +3,9 @@ import { DocumentIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import parseTitle from "@shared/utils/parseTitle";
 import Document from "~/models/Document";
-import DocumentMeta from "~/components/DocumentMeta";
+import EmojiIcon from "~/components/EmojiIcon";
 import Flex from "~/components/Flex";
 import { hover } from "~/styles";
 import { NavigationNode } from "~/types";
@@ -33,6 +34,11 @@ const DocumentLink = styled(Link)`
   }
 `;
 
+const Content = styled(Flex)`
+  color: ${(props) => props.theme.textSecondary};
+  margin-left: -4px;
+`;
+
 const Title = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -46,22 +52,6 @@ const Title = styled.div`
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
 
-const StyledDocumentIcon = styled(DocumentIcon)`
-  margin-left: -4px;
-  color: ${(props) => props.theme.textSecondary};
-  flex-shrink: 0;
-`;
-
-const Emoji = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: -4px;
-  font-size: 16px;
-  width: 24px;
-  height: 24px;
-`;
-
 function ReferenceListItem({
   document,
   showCollection,
@@ -69,6 +59,8 @@ function ReferenceListItem({
   shareId,
   ...rest
 }: Props) {
+  const { emoji } = parseTitle(document.title);
+
   return (
     <DocumentLink
       to={{
@@ -80,21 +72,16 @@ function ReferenceListItem({
       }}
       {...rest}
     >
-      <Flex gap={4} dir="auto">
-        {document instanceof Document && document.emoji ? (
-          <Emoji>{document.emoji}</Emoji>
+      <Content gap={4} dir="auto">
+        {emoji ? (
+          <EmojiIcon emoji={emoji} />
         ) : (
-          <StyledDocumentIcon color="currentColor" />
+          <DocumentIcon color="currentColor" />
         )}
         <Title>
-          {document instanceof Document && document.emoji
-            ? document.title.replace(new RegExp(`^${document.emoji}`), "")
-            : document.title}
+          {emoji ? document.title.replace(emoji, "") : document.title}
         </Title>
-      </Flex>
-      {document instanceof Document && document.updatedBy && (
-        <DocumentMeta document={document} showCollection={showCollection} />
-      )}
+      </Content>
     </DocumentLink>
   );
 }

app/typings/styled-components.d.ts

@@ -150,7 +150,8 @@ declare module "styled-components" {
     textTertiary: string;
     placeholder: string;
     sidebarBackground: string;
-    sidebarItemBackground: string;
+    sidebarActiveBackground: string;
+    sidebarControlHoverBackground: string;
     sidebarDraftBorder: string;
     sidebarText: string;
     backdrop: string;

app/utils/routeHelpers.ts

@@ -14,10 +14,6 @@ export function templatesPath(): string {
   return "/templates";
 }
 
-export function settingsPath(): string {
-  return "/settings";
-}
-
 export function archivePath(): string {
   return "/archive";
 }
@@ -26,6 +22,18 @@ export function trashPath(): string {
   return "/trash";
 }
 
+export function settingsPath(): string {
+  return "/settings";
+}
+
+export function organizationSettingsPath(): string {
+  return "/settings/details";
+}
+
+export function profileSettingsPath(): string {
+  return "/settings/profile";
+}
+
 export function groupSettingsPath(): string {
   return "/settings/groups";
 }

shared/i18n/locales/en_US/translation.json

@@ -25,13 +25,13 @@
   "Templatize": "Templatize",
   "Create template": "Create template",
   "Home": "Home",
-  "Search": "Search",
   "Search documents for \"{{searchQuery}}\"": "Search documents for \"{{searchQuery}}\"",
   "Drafts": "Drafts",
   "Templates": "Templates",
   "Archive": "Archive",
   "Trash": "Trash",
   "Settings": "Settings",
+  "Profile": "Profile",
   "API documentation": "API documentation",
   "Send us feedback": "Send us feedback",
   "Report a bug": "Report a bug",
@@ -123,6 +123,7 @@
   "Choose icon": "Choose icon",
   "Loading": "Loading",
   "Loading editor": "Loading editor",
+  "Search": "Search",
   "Default access": "Default access",
   "View and edit": "View and edit",
   "View only": "View only",
@@ -147,9 +148,7 @@
   "Show less": "Show less",
   "Toggle sidebar": "Toggle sidebar",
   "Delete {{ documentName }}": "Delete {{ documentName }}",
-  "Return to App": "Back to App",
   "Account": "Account",
-  "Profile": "Profile",
   "Notifications": "Notifications",
   "API Tokens": "API Tokens",
   "Team": "Team",
@@ -227,7 +226,6 @@
   "Warning": "Warning",
   "Warning notice": "Warning notice",
   "Could not import file": "Could not import file",
-  "Switch team": "Switch team",
   "Show path to document": "Show path to document",
   "Path to document": "Path to document",
   "Group member options": "Group member options",
@@ -264,6 +262,7 @@
   "New child document": "New child document",
   "New document in <em>{{ collectionName }}</em>": "New document in <em>{{ collectionName }}</em>",
   "New template": "New template",
+  "Switch team": "Switch team",
   "Link copied": "Link copied",
   "Revision options": "Revision options",
   "Restore version": "Restore version",

shared/theme.ts

@@ -134,7 +134,8 @@ export const light = {
   textTertiary: colors.slate,
   placeholder: "#a2b2c3",
   sidebarBackground: colors.warmGrey,
-  sidebarItemBackground: "#d7e0ea",
+  sidebarActiveBackground: "#d7e0ea",
+  sidebarControlHoverBackground: "rgba(0,0,0,0.1)",
   sidebarDraftBorder: darken("0.25", colors.warmGrey),
   sidebarText: "rgb(78, 92, 110)",
   backdrop: "rgba(0, 0, 0, 0.2)",
@@ -184,7 +185,8 @@ export const dark = {
   textTertiary: colors.slate,
   placeholder: colors.slateDark,
   sidebarBackground: colors.veryDarkBlue,
-  sidebarItemBackground: lighten(0.015, colors.almostBlack),
+  sidebarActiveBackground: lighten(0.02, colors.almostBlack),
+  sidebarControlHoverBackground: "rgba(255,255,255,0.1)",
   sidebarDraftBorder: darken("0.35", colors.slate),
   sidebarText: colors.slate,
   backdrop: "rgba(255, 255, 255, 0.3)",