Add shortcuts to formatting menu tooltips

app/actions/definitions/comments.tsx

@@ -53,9 +53,13 @@ export const resolveCommentFactory = ({
     perform: async ({ t }) => {
       await comment.resolve();
 
+      const locationState = history.location.state as Record<string, unknown>;
       history.replace({
         ...history.location,
-        state: null,
+        state: {
+          sidebarContext: locationState["sidebarContext"],
+          commentId: undefined,
+        },
       });
 
       onResolve();
@@ -81,9 +85,13 @@ export const unresolveCommentFactory = ({
     perform: async () => {
       await comment.unresolve();
 
+      const locationState = history.location.state as Record<string, unknown>;
       history.replace({
         ...history.location,
-        state: null,
+        state: {
+          sidebarContext: locationState["sidebarContext"],
+          commentId: undefined,
+        },
       });
 
       onUnresolve();

app/components/DocumentExplorer.tsx

@@ -15,6 +15,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";
+import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
@@ -25,7 +26,6 @@ import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
-import { isModKey } from "~/utils/keyboard";
 import { ancestors, descendants } from "~/utils/tree";
 
 type Props = {

app/components/DocumentListItem.tsx

@@ -21,9 +21,11 @@ import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
+import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
 
 type Props = {
   document: Document;
@@ -50,6 +52,7 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   let itemRef: React.Ref<HTMLAnchorElement> =
@@ -78,6 +81,12 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar = !document.isArchived && !document.isTemplate;
 
+  const sidebarContext = determineSidebarContext({
+    document,
+    user,
+    currentContext: locationSidebarContext,
+  });
+
   return (
     <DocumentLink
       ref={itemRef}
@@ -89,6 +98,7 @@ function DocumentListItem(
         pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
+          sidebarContext,
         },
       }}
       {...rest}

app/components/EventListItem.tsx

@@ -19,6 +19,7 @@ import Event from "~/models/Event";
 import { Avatar } from "~/components/Avatar";
 import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
 import Time from "~/components/Time";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
 import { hover } from "~/styles";
@@ -35,6 +36,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
   const { revisions } = useStores();
   const location = useLocation();
+  const sidebarContext = useLocationSidebarContext();
   const opts = {
     userName: event.actor.name,
   };
@@ -66,7 +68,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       );
       to = {
         pathname: documentHistoryPath(document, event.modelId || "latest"),
-        state: { retainScrollPosition: true },
+        state: {
+          sidebarContext,
+          retainScrollPosition: true,
+        },
       };
       break;
 

app/components/InputSearchPage.tsx

@@ -4,9 +4,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
+import { isModKey } from "@shared/utils/keyboard";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
-import { isModKey } from "~/utils/keyboard";
 import { searchPath } from "~/utils/routeHelpers";
 import Input, { Outline } from "./Input";
 

app/components/Layout.tsx

@@ -4,6 +4,7 @@ import { Helmet } from "react-helmet-async";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
+import { isModKey } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
@@ -13,7 +14,6 @@ import useAutoRefresh from "~/hooks/useAutoRefresh";
 import useKeyDown from "~/hooks/useKeyDown";
 import { MenuProvider } from "~/hooks/useMenuContext";
 import useStores from "~/hooks/useStores";
-import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   children?: React.ReactNode;

app/components/Sidebar/App.tsx

@@ -5,6 +5,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
@@ -14,7 +15,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
-import { metaDisplay } from "~/utils/keyboard";
 import { homePath, draftsPath, searchPath } from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
 import Tooltip from "../Tooltip";

app/components/Sidebar/Settings.tsx

@@ -5,12 +5,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
+import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
 import useStores from "~/hooks/useStores";
 import isCloudHosted from "~/utils/isCloudHosted";
-import { metaDisplay } from "~/utils/keyboard";
 import { settingsPath } from "~/utils/routeHelpers";
 import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";

app/components/Sidebar/Shared.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
+import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
@@ -12,7 +13,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import history from "~/utils/history";
-import { metaDisplay } from "~/utils/keyboard";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";

app/components/Sidebar/components/Collections.tsx

@@ -16,6 +16,7 @@ import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
 import SidebarAction from "./SidebarAction";
+import SidebarContext from "./SidebarContext";
 import { DragObject } from "./SidebarLink";
 
 function Collections() {
@@ -49,38 +50,40 @@ function Collections() {
   });
 
   return (
-    <Flex column>
-      <Header id="collections" title={t("Collections")}>
-        <Relative>
-          <PaginatedList
-            options={params}
-            aria-label={t("Collections")}
-            items={collections.allActive}
-            loading={<PlaceholderCollections />}
-            heading={
-              isDraggingAnyCollection ? (
-                <DropCursor
-                  isActiveDrop={isCollectionDropping}
-                  innerRef={dropToReorderCollection}
-                  position="top"
+    <SidebarContext.Provider value="collections">
+      <Flex column>
+        <Header id="collections" title={t("Collections")}>
+          <Relative>
+            <PaginatedList
+              options={params}
+              aria-label={t("Collections")}
+              items={collections.allActive}
+              loading={<PlaceholderCollections />}
+              heading={
+                isDraggingAnyCollection ? (
+                  <DropCursor
+                    isActiveDrop={isCollectionDropping}
+                    innerRef={dropToReorderCollection}
+                    position="top"
+                  />
+                ) : undefined
+              }
+              renderError={(props) => <StyledError {...props} />}
+              renderItem={(item: Collection, index) => (
+                <DraggableCollectionLink
+                  key={item.id}
+                  collection={item}
+                  activeDocument={documents.active}
+                  prefetchDocument={documents.prefetchDocument}
+                  belowCollection={orderedCollections[index + 1]}
                 />
-              ) : undefined
-            }
-            renderError={(props) => <StyledError {...props} />}
-            renderItem={(item: Collection, index) => (
-              <DraggableCollectionLink
-                key={item.id}
-                collection={item}
-                activeDocument={documents.active}
-                prefetchDocument={documents.prefetchDocument}
-                belowCollection={orderedCollections[index + 1]}
-              />
-            )}
-          />
-          <SidebarAction action={createCollection} depth={0} />
-        </Relative>
-      </Header>
-    </Flex>
+              )}
+            />
+            <SidebarAction action={createCollection} depth={0} />
+          </Relative>
+        </Header>
+      </Flex>
+    </SidebarContext.Provider>
   );
 }
 

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -7,8 +7,8 @@ import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
-import { useLocationState } from "../hooks/useLocationState";
 import CollectionLink from "./CollectionLink";
 import CollectionLinkChildren from "./CollectionLinkChildren";
 import DropCursor from "./DropCursor";
@@ -29,7 +29,7 @@ function DraggableCollectionLink({
   prefetchDocument,
   belowCollection,
 }: Props) {
-  const locationSidebarContext = useLocationState();
+  const locationSidebarContext = useLocationSidebarContext();
   const sidebarContext = useSidebarContext();
   const { ui, policies, collections } = useStores();
   const [expanded, setExpanded] = React.useState(

app/components/Sidebar/components/GroupLink.tsx

@@ -2,10 +2,11 @@ import { observer } from "mobx-react";
 import { GroupIcon } from "outline-icons";
 import * as React from "react";
 import Group from "~/models/Group";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import Folder from "./Folder";
 import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
-import SidebarContext from "./SidebarContext";
+import SidebarContext, { groupSidebarContext } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
@@ -14,13 +15,23 @@ type Props = {
 };
 
 const GroupLink: React.FC<Props> = ({ group }) => {
-  const [expanded, setExpanded] = React.useState(false);
+  const locationSidebarContext = useLocationSidebarContext();
+  const sidebarContext = groupSidebarContext(group.id);
+  const [expanded, setExpanded] = React.useState(
+    locationSidebarContext === sidebarContext
+  );
 
   const handleDisclosureClick = React.useCallback((ev) => {
     ev?.preventDefault();
     setExpanded((e) => !e);
   }, []);
 
+  React.useEffect(() => {
+    if (locationSidebarContext === sidebarContext) {
+      setExpanded(true);
+    }
+  }, [sidebarContext, locationSidebarContext, setExpanded]);
+
   return (
     <Relative>
       <SidebarLink
@@ -30,7 +41,7 @@ const GroupLink: React.FC<Props> = ({ group }) => {
         onClick={handleDisclosureClick}
         depth={0}
       />
-      <SidebarContext.Provider value={group.id}>
+      <SidebarContext.Provider value={sidebarContext}>
         <Folder expanded={expanded}>
           {group.documentMemberships.map((membership) => (
             <SharedWithMeLink

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -9,6 +9,7 @@ import GroupMembership from "~/models/GroupMembership";
 import UserMembership from "~/models/UserMembership";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import {
@@ -16,7 +17,6 @@ import {
   useDropToReorderUserMembership,
   useDropToReparentDocument,
 } from "../hooks/useDragAndDrop";
-import { useLocationState } from "../hooks/useLocationState";
 import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
@@ -36,7 +36,7 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const { documentId } = membership;
   const isActiveDocument = documentId === ui.activeDocumentId;
-  const locationSidebarContext = useLocationState();
+  const locationSidebarContext = useLocationSidebarContext();
   const sidebarContext = useSidebarContext();
   const document = documentId ? documents.get(documentId) : undefined;
 

app/components/Sidebar/components/SidebarContext.ts

@@ -1,9 +1,57 @@
 import * as React from "react";
+import Document from "~/models/Document";
+import User from "~/models/User";
 
-export type SidebarContextType = "collections" | "starred" | string | undefined;
+export type SidebarContextType =
+  | "collections"
+  | "shared"
+  | `group-${string}`
+  | `starred-${string}`
+  | undefined;
 
 const SidebarContext = React.createContext<SidebarContextType>(undefined);
 
 export const useSidebarContext = () => React.useContext(SidebarContext);
 
+export const groupSidebarContext = (groupId: string): SidebarContextType =>
+  `group-${groupId}`;
+
+export const starredSidebarContext = (modelId: string): SidebarContextType =>
+  `starred-${modelId}`;
+
+export const determineSidebarContext = ({
+  document,
+  user,
+  currentContext,
+}: {
+  document: Document;
+  user: User;
+  currentContext?: SidebarContextType;
+}): SidebarContextType => {
+  const isStarred = document.isStarred || !!document.collection?.isStarred;
+  const preferStarred = !currentContext || currentContext.startsWith("starred");
+
+  if (isStarred && preferStarred) {
+    const currentlyInStarredCollection =
+      currentContext === starredSidebarContext(document.collectionId ?? "");
+
+    return document.isStarred && !currentlyInStarredCollection
+      ? starredSidebarContext(document.id)
+      : starredSidebarContext(document.collectionId!);
+  }
+
+  const membershipType = document.membershipType;
+
+  if (membershipType === "document") {
+    return "shared";
+  } else if (membershipType === "group") {
+    const group = user.groupsWithDocumentMemberships.find(
+      (g) => !!g.documentMemberships.find((m) => m.documentId === document.id)
+    );
+    return groupSidebarContext(group?.id ?? "");
+  }
+
+  return "collections";
+};
+
 export default SidebarContext;

app/components/Sidebar/components/Starred.tsx

@@ -15,7 +15,6 @@ import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
-import SidebarContext from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 import StarredLink from "./StarredLink";
 
@@ -42,48 +41,46 @@ function Starred() {
   }
 
   return (
-    <SidebarContext.Provider value="starred">
-      <Flex column>
-        <Header id="starred" title={t("Starred")}>
-          <Relative>
-            {reorderStarProps.isDragging && (
-              <DropCursor
-                isActiveDrop={reorderStarProps.isOverCursor}
-                innerRef={dropToReorder}
-                position="top"
-              />
-            )}
-            {createStarProps.isDragging && (
-              <DropCursor
-                isActiveDrop={createStarProps.isOverCursor}
-                innerRef={dropToStarRef}
-                position="top"
-              />
-            )}
-            {stars.orderedData
-              .slice(0, page * STARRED_PAGINATION_LIMIT)
-              .map((star) => (
-                <StarredLink key={star.id} star={star} />
-              ))}
-            {!end && (
-              <SidebarLink
-                onClick={next}
-                label={`${t("Show more")}…`}
-                disabled={stars.isFetching}
-                depth={0}
-              />
-            )}
-            {loading && (
-              <Flex column>
-                <DelayedMount>
-                  <PlaceholderCollections />
-                </DelayedMount>
-              </Flex>
-            )}
-          </Relative>
-        </Header>
-      </Flex>
-    </SidebarContext.Provider>
+    <Flex column>
+      <Header id="starred" title={t("Starred")}>
+        <Relative>
+          {reorderStarProps.isDragging && (
+            <DropCursor
+              isActiveDrop={reorderStarProps.isOverCursor}
+              innerRef={dropToReorder}
+              position="top"
+            />
+          )}
+          {createStarProps.isDragging && (
+            <DropCursor
+              isActiveDrop={createStarProps.isOverCursor}
+              innerRef={dropToStarRef}
+              position="top"
+            />
+          )}
+          {stars.orderedData
+            .slice(0, page * STARRED_PAGINATION_LIMIT)
+            .map((star) => (
+              <StarredLink key={star.id} star={star} />
+            ))}
+          {!end && (
+            <SidebarLink
+              onClick={next}
+              label={`${t("Show more")}…`}
+              disabled={stars.isFetching}
+              depth={0}
+            />
+          )}
+          {loading && (
+            <Flex column>
+              <DelayedMount>
+                <PlaceholderCollections />
+              </DelayedMount>
+            </Flex>
+          )}
+        </Relative>
+      </Header>
+    </Flex>
   );
 }
 

app/components/Sidebar/components/StarredLink.tsx

@@ -8,6 +8,7 @@ import styled, { useTheme } from "styled-components";
 import Star from "~/models/Star";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import {
@@ -15,7 +16,6 @@ import {
   useDropToCreateStar,
   useDropToReorderStar,
 } from "../hooks/useDragAndDrop";
-import { useLocationState } from "../hooks/useLocationState";
 import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 import CollectionLink from "./CollectionLink";
 import CollectionLinkChildren from "./CollectionLinkChildren";
@@ -25,7 +25,7 @@ import Folder from "./Folder";
 import Relative from "./Relative";
 import SidebarContext, {
   SidebarContextType,
-  useSidebarContext,
+  starredSidebarContext,
 } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 
@@ -39,10 +39,14 @@ function StarredLink({ star }: Props) {
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const { documentId, collectionId } = star;
   const collection = collections.get(collectionId);
-  const locationSidebarContext = useLocationState();
-  const sidebarContext = useSidebarContext();
+  const locationSidebarContext = useLocationSidebarContext();
+  const sidebarContext = starredSidebarContext(
+    star.documentId ?? star.collectionId
+  );
   const [expanded, setExpanded] = useState(
-    star.collectionId === ui.activeCollectionId &&
+    (star.documentId
+      ? star.documentId === ui.activeDocumentId
+      : star.collectionId === ui.activeCollectionId) &&
       sidebarContext === locationSidebarContext
   );
 
@@ -159,7 +163,7 @@ function StarredLink({ star }: Props) {
             }
           />
         </Draggable>
-        <SidebarContext.Provider value={document.id}>
+        <SidebarContext.Provider value={sidebarContext}>
           <Relative>
             <Folder expanded={displayChildDocuments}>
               {childDocuments.map((node, index) => (
@@ -183,7 +187,7 @@ function StarredLink({ star }: Props) {
 
   if (collection) {
     return (
-      <>
+      <SidebarContext.Provider value={sidebarContext}>
         <Draggable key={star?.id} ref={draggableRef} $isDragging={isDragging}>
           <CollectionLink
             collection={collection}
@@ -193,16 +197,14 @@ function StarredLink({ star }: Props) {
             isDraggingAnyCollection={reorderStarProps.isDragging}
           />
         </Draggable>
-        <SidebarContext.Provider value={collection.id}>
-          <Relative>
-            <CollectionLinkChildren
-              collection={collection}
-              expanded={displayChildDocuments}
-            />
-            {cursor}
-          </Relative>
-        </SidebarContext.Provider>
-      </>
+        <Relative>
+          <CollectionLinkChildren
+            collection={collection}
+            expanded={displayChildDocuments}
+          />
+          {cursor}
+        </Relative>
+      </SidebarContext.Provider>
     );
   }
 

app/components/Tooltip.tsx

@@ -1,4 +1,5 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
+import { transparentize } from "polished";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { s } from "@shared/styles";
@@ -25,7 +26,12 @@ function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
   if (shortcut) {
     content = (
       <>
-        {tooltip} &middot; <Shortcut>{shortcut}</Shortcut>
+        {tooltip}{" "}
+        {typeof shortcut === "string" ? (
+          shortcut.split("+").map((key) => <Shortcut key={key}>{key}</Shortcut>)
+        ) : (
+          <Shortcut>{shortcut}</Shortcut>
+        )}
       </>
     );
   }
@@ -37,16 +43,17 @@ function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
 
 const Shortcut = styled.kbd`
   position: relative;
-  top: -2px;
+  top: -1px;
 
+  margin-left: 2px;
   display: inline-block;
   padding: 2px 4px;
-  font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  font-size: 12px;
+  font-family: ${s("fontFamilyMono")};
   line-height: 10px;
-  color: ${s("tooltipBackground")};
+  color: ${s("tooltipText")};
+  border: 1px solid ${(props) => transparentize(0.75, props.theme.tooltipText)};
   vertical-align: middle;
-  background-color: ${s("tooltipText")};
   border-radius: 3px;
 `;
 

app/editor/components/FindAndReplace.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import { usePopoverState } from "reakit/Popover";
 import styled, { useTheme } from "styled-components";
 import { depths, s } from "@shared/styles";
+import { altDisplay, isModKey, metaDisplay } from "@shared/utils/keyboard";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
@@ -21,7 +22,6 @@ import Tooltip from "~/components/Tooltip";
 import useKeyDown from "~/hooks/useKeyDown";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import Desktop from "~/utils/Desktop";
-import { altDisplay, isModKey, metaDisplay } from "~/utils/keyboard";
 import { useEditor } from "./EditorContext";
 
 type Props = {

app/editor/components/ToolbarMenu.tsx

@@ -108,8 +108,9 @@ function ToolbarMenu(props: Props) {
 
           return (
             <Tooltip
-              content={item.label === item.tooltip ? undefined : item.tooltip}
               key={index}
+              shortcut={item.shortcut}
+              content={item.label === item.tooltip ? undefined : item.tooltip}
             >
               {item.children ? (
                 <ToolbarDropdown active={isActive && !item.label} item={item} />

app/editor/menus/block.tsx

@@ -26,8 +26,8 @@ import * as React from "react";
 import styled from "styled-components";
 import Image from "@shared/editor/components/Img";
 import { MenuItem } from "@shared/editor/types";
+import { metaDisplay } from "@shared/utils/keyboard";
 import { Dictionary } from "~/hooks/useDictionary";
-import { metaDisplay } from "~/utils/keyboard";
 
 const Img = styled(Image)`
   border-radius: 2px;

app/editor/menus/formatting.tsx

@@ -28,6 +28,7 @@ import { isInList } from "@shared/editor/queries/isInList";
 import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
+import { metaDisplay } from "@shared/utils/keyboard";
 import CircleIcon from "~/components/Icons/CircleIcon";
 import { Dictionary } from "~/hooks/useDictionary";
 
@@ -63,6 +64,7 @@ export default function formattingMenuItems(
     {
       name: "strong",
       tooltip: dictionary.strong,
+      shortcut: `${metaDisplay}+B`,
       icon: <BoldIcon />,
       active: isMarkActive(schema.marks.strong),
       visible: !isCode && (!isMobile || !isEmpty),
@@ -70,6 +72,7 @@ export default function formattingMenuItems(
     {
       name: "em",
       tooltip: dictionary.em,
+      shortcut: `${metaDisplay}+I`,
       icon: <ItalicIcon />,
       active: isMarkActive(schema.marks.em),
       visible: !isCode && (!isMobile || !isEmpty),
@@ -77,12 +80,14 @@ export default function formattingMenuItems(
     {
       name: "strikethrough",
       tooltip: dictionary.strikethrough,
+      shortcut: `${metaDisplay}+D`,
       icon: <StrikethroughIcon />,
       active: isMarkActive(schema.marks.strikethrough),
       visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       tooltip: dictionary.mark,
+      shortcut: `${metaDisplay}+Ctrl+H`,
       icon: highlight ? (
         <CircleIcon color={highlight.mark.attrs.color || Highlight.colors[0]} />
       ) : (
@@ -114,6 +119,7 @@ export default function formattingMenuItems(
     {
       name: "code_inline",
       tooltip: dictionary.codeInline,
+      shortcut: `${metaDisplay}+E`,
       icon: <CodeIcon />,
       active: isMarkActive(schema.marks.code_inline),
       visible: !isCodeBlock && (!isMobile || !isEmpty),
@@ -125,6 +131,7 @@ export default function formattingMenuItems(
     {
       name: "heading",
       tooltip: dictionary.heading,
+      shortcut: `⇧+Ctrl+1`,
       icon: <Heading1Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 1 }),
       attrs: { level: 1 },
@@ -133,6 +140,7 @@ export default function formattingMenuItems(
     {
       name: "heading",
       tooltip: dictionary.subheading,
+      shortcut: `⇧+Ctrl+2`,
       icon: <Heading2Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 2 }),
       attrs: { level: 2 },
@@ -141,6 +149,7 @@ export default function formattingMenuItems(
     {
       name: "heading",
       tooltip: dictionary.subheading,
+      shortcut: `⇧+Ctrl+3`,
       icon: <Heading3Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 3 }),
       attrs: { level: 3 },
@@ -149,6 +158,7 @@ export default function formattingMenuItems(
     {
       name: "blockquote",
       tooltip: dictionary.quote,
+      shortcut: `${metaDisplay}+]`,
       icon: <BlockQuoteIcon />,
       active: isNodeActive(schema.nodes.blockquote),
       attrs: { level: 2 },
@@ -161,6 +171,7 @@ export default function formattingMenuItems(
     {
       name: "checkbox_list",
       tooltip: dictionary.checkboxList,
+      shortcut: `⇧+Ctrl+7`,
       icon: <TodoListIcon />,
       keywords: "checklist checkbox task",
       active: isNodeActive(schema.nodes.checkbox_list),
@@ -169,6 +180,7 @@ export default function formattingMenuItems(
     {
       name: "bullet_list",
       tooltip: dictionary.bulletList,
+      shortcut: `⇧+Ctrl+8`,
       icon: <BulletedListIcon />,
       active: isNodeActive(schema.nodes.bullet_list),
       visible: !isCodeBlock && (!isMobile || isEmpty),
@@ -176,6 +188,7 @@ export default function formattingMenuItems(
     {
       name: "ordered_list",
       tooltip: dictionary.orderedList,
+      shortcut: `⇧+Ctrl+9`,
       icon: <OrderedListIcon />,
       active: isNodeActive(schema.nodes.ordered_list),
       visible: !isCodeBlock && (!isMobile || isEmpty),
@@ -183,6 +196,7 @@ export default function formattingMenuItems(
     {
       name: "outdentList",
       tooltip: dictionary.outdent,
+      shortcut: `⇧+Tab`,
       icon: <OutdentIcon />,
       visible:
         isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
@@ -190,6 +204,7 @@ export default function formattingMenuItems(
     {
       name: "indentList",
       tooltip: dictionary.indent,
+      shortcut: `Tab`,
       icon: <IndentIcon />,
       visible:
         isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
@@ -197,12 +212,14 @@ export default function formattingMenuItems(
     {
       name: "outdentCheckboxList",
       tooltip: dictionary.outdent,
+      shortcut: `⇧+Tab`,
       icon: <OutdentIcon />,
       visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
     },
     {
       name: "indentCheckboxList",
       tooltip: dictionary.indent,
+      shortcut: `Tab`,
       icon: <IndentIcon />,
       visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
     },
@@ -213,6 +230,7 @@ export default function formattingMenuItems(
     {
       name: "link",
       tooltip: dictionary.createLink,
+      shortcut: `${metaDisplay}+K`,
       icon: <LinkIcon />,
       attrs: { href: "" },
       visible: !isCodeBlock && (!isMobile || !isEmpty),
@@ -220,6 +238,7 @@ export default function formattingMenuItems(
     {
       name: "comment",
       tooltip: dictionary.comment,
+      shortcut: `${metaDisplay}+⌥+M`,
       icon: <CommentIcon />,
       label: isCodeBlock ? dictionary.comment : undefined,
       active: isMarkActive(schema.marks.comment, { resolved: false }),

app/hooks/useEditorClickHandlers.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useHistory } from "react-router-dom";
+import { isModKey } from "@shared/utils/keyboard";
 import { isInternalUrl } from "@shared/utils/urls";
-import { isModKey } from "~/utils/keyboard";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { isHash } from "~/utils/urls";
 
@@ -56,7 +56,7 @@ export default function useEditorClickHandlers({ shareId }: Params) {
         }
 
         if (!isModKey(event) && !event.shiftKey) {
-          history.push(navigateTo);
+          history.push(navigateTo, { sidebarContext: "collections" }); // optimistic preference of "collections"
         } else {
           window.open(navigateTo, "_blank");
         }

app/hooks/useKeyDown.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
+import { isModKey } from "@shared/utils/keyboard";
 import isTextInput from "~/utils/isTextInput";
-import { isModKey } from "~/utils/keyboard";
 
 type Callback = (event: KeyboardEvent) => void;
 

app/hooks/useLocationSidebarContext.ts

@@ -1,10 +1,10 @@
 import { useLocation } from "react-router-dom";
-import { SidebarContextType } from "../components/SidebarContext";
+import { SidebarContextType } from "../components/Sidebar/components/SidebarContext";
 
 /**
  * Hook to retrieve the sidebar context from the current location state.
  */
-export function useLocationState() {
+export function useLocationSidebarContext() {
   const location = useLocation<{
     sidebarContext?: SidebarContextType;
   }>();

app/models/Document.ts

@@ -426,6 +426,20 @@ export default class Document extends ArchivableModel {
     return this.title || i18n.t("Untitled");
   }
 
+  @computed
+  get membershipType(): "collection" | "document" | "group" {
+    if (this.collection) {
+      return "collection";
+    }
+
+    const hasDocumentMembership =
+      this.store.rootStore.auth.user?.documentMemberships.find(
+        (m) => m.documentId === this.id
+      ) ?? false;
+
+    return hasDocumentMembership ? "document" : "group";
+  }
+
   @action
   updateTasks(total: number, completed: number) {
     if (total !== this.tasks.total || completed !== this.tasks.completed) {

app/scenes/Document/components/CommentSortMenu.tsx

@@ -7,12 +7,14 @@ import { s } from "@shared/styles";
 import { UserPreference } from "@shared/types";
 import InputSelect from "~/components/InputSelect";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useQuery from "~/hooks/useQuery";
 import { CommentSortType } from "~/types";
 
 const CommentSortMenu = () => {
   const { t } = useTranslation();
   const location = useLocation();
+  const sidebarContext = useLocationSidebarContext();
   const history = useHistory();
   const user = useCurrentUser();
   const params = useQuery();
@@ -39,6 +41,7 @@ const CommentSortMenu = () => {
         resolved: "",
       }),
       pathname: location.pathname,
+      state: { sidebarContext },
     });
   };
 
@@ -49,6 +52,7 @@ const CommentSortMenu = () => {
         resolved: undefined,
       }),
       pathname: location.pathname,
+      state: { sidebarContext },
     });
   };
 

app/scenes/Document/components/CommentThread.tsx

@@ -15,6 +15,7 @@ import { useDocumentContext } from "~/components/DocumentContext";
 import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
 import usePolicy from "~/hooks/usePolicy";
@@ -61,6 +62,7 @@ function CommentThread({
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
+  const sidebarContext = useLocationSidebarContext();
   const [autoFocus, setAutoFocus] = React.useState(thread.isNew);
 
   const can = usePolicy(document);
@@ -101,7 +103,10 @@ function CommentThread({
       history.replace({
         search: location.search,
         pathname: location.pathname,
-        state: { commentId: undefined },
+        state: {
+          commentId: undefined,
+          sidebarContext,
+        },
       });
     }
   });
@@ -115,7 +120,10 @@ function CommentThread({
       // Clear any commentId from the URL when explicitly focusing a thread
       search: thread.isResolved ? "resolved=" : "",
       pathname: location.pathname.replace(/\/history$/, ""),
-      state: { commentId: thread.id },
+      state: {
+        commentId: thread.id,
+        sidebarContext,
+      },
     });
   };
 

app/scenes/Document/components/Document.tsx

@@ -29,6 +29,7 @@ import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { TextHelper } from "@shared/utils/TextHelper";
 import { parseDomain } from "@shared/utils/domains";
 import { determineIconType } from "@shared/utils/icon";
+import { isModKey } from "@shared/utils/keyboard";
 import RootStore from "~/stores/RootStore";
 import Document from "~/models/Document";
 import Revision from "~/models/Revision";
@@ -41,12 +42,12 @@ import LoadingIndicator from "~/components/LoadingIndicator";
 import PageTitle from "~/components/PageTitle";
 import PlaceholderDocument from "~/components/PlaceholderDocument";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
+import { SidebarContextType } from "~/components/Sidebar/components/SidebarContext";
 import withStores from "~/components/withStores";
 import type { Editor as TEditor } from "~/editor";
 import { SearchResult } from "~/editor/components/LinkEditor";
 import { client } from "~/utils/ApiClient";
 import { emojiToUrl } from "~/utils/emoji";
-import { isModKey } from "~/utils/keyboard";
 
 import {
   documentHistoryPath,
@@ -77,6 +78,7 @@ type LocationState = {
   title?: string;
   restore?: boolean;
   revisionId?: string;
+  sidebarContext?: SidebarContextType;
 };
 
 type Props = WithTranslation &
@@ -252,7 +254,10 @@ class DocumentScene extends React.Component<Props> {
       const { document, abilities } = this.props;
 
       if (abilities.update) {
-        this.props.history.push(documentEditPath(document));
+        this.props.history.push({
+          pathname: documentEditPath(document),
+          state: { sidebarContext: this.props.location.state?.sidebarContext },
+        });
       }
     } else if (this.editor.current?.isBlurred) {
       ev.preventDefault();
@@ -271,9 +276,15 @@ class DocumentScene extends React.Component<Props> {
     const { document, location } = this.props;
 
     if (location.pathname.endsWith("history")) {
-      this.props.history.push(document.url);
+      this.props.history.push({
+        pathname: document.url,
+        state: { sidebarContext: this.props.location.state?.sidebarContext },
+      });
     } else {
-      this.props.history.push(documentHistoryPath(document));
+      this.props.history.push({
+        pathname: documentHistoryPath(document),
+        state: { sidebarContext: this.props.location.state?.sidebarContext },
+      });
     }
   };
 
@@ -339,10 +350,16 @@ class DocumentScene extends React.Component<Props> {
       this.isEditorDirty = false;
 
       if (options.done) {
-        this.props.history.push(savedDocument.url);
+        this.props.history.push({
+          pathname: savedDocument.url,
+          state: { sidebarContext: this.props.location.state?.sidebarContext },
+        });
         this.props.ui.setActiveDocument(savedDocument);
       } else if (document.isNew) {
-        this.props.history.push(documentEditPath(savedDocument));
+        this.props.history.push({
+          pathname: documentEditPath(savedDocument),
+          state: { sidebarContext: this.props.location.state?.sidebarContext },
+        });
         this.props.ui.setActiveDocument(savedDocument);
       }
     } catch (err) {
@@ -396,7 +413,10 @@ class DocumentScene extends React.Component<Props> {
 
   goBack = () => {
     if (!this.props.readOnly) {
-      this.props.history.push(this.props.document.url);
+      this.props.history.push({
+        pathname: this.props.document.url,
+        state: { sidebarContext: this.props.location.state?.sidebarContext },
+      });
     }
   };
 

app/scenes/Document/components/DocumentMeta.tsx

@@ -11,6 +11,7 @@ import Revision from "~/models/Revision";
 import DocumentMeta from "~/components/DocumentMeta";
 import Fade from "~/components/Fade";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { documentPath, documentInsightsPath } from "~/utils/routeHelpers";
@@ -27,6 +28,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
   const { views, comments, ui } = useStores();
   const { t } = useTranslation();
   const match = useRouteMatch();
+  const sidebarContext = useLocationSidebarContext();
   const team = useCurrentTeam();
   const documentViews = useObserver(() => views.inDocument(document.id));
   const totalViewers = documentViews.length;
@@ -45,7 +47,10 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
         <>
           &nbsp;•&nbsp;
           <CommentLink
-            to={documentPath(document)}
+            to={{
+              pathname: documentPath(document),
+              state: { sidebarContext },
+            }}
             onClick={() => ui.toggleComments()}
           >
             <CommentIcon size={18} />
@@ -62,9 +67,13 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
         <Wrapper>
           &nbsp;•&nbsp;
           <Link
-            to={
-              match.url === insightsPath ? documentPath(document) : insightsPath
-            }
+            to={{
+              pathname:
+                match.url === insightsPath
+                  ? documentPath(document)
+                  : insightsPath,
+              state: { sidebarContext },
+            }}
           >
             {t("Viewed by")}{" "}
             {onlyYou

app/scenes/Document/components/DocumentTitle.tsx

@@ -15,6 +15,7 @@ import {
   getCurrentDateTimeAsString,
   getCurrentTimeAsString,
 } from "@shared/utils/date";
+import { isModKey } from "@shared/utils/keyboard";
 import { DocumentValidation } from "@shared/validations";
 import ContentEditable, { RefHandle } from "~/components/ContentEditable";
 import { useDocumentContext } from "~/components/DocumentContext";
@@ -22,7 +23,6 @@ import Icon, { IconTitleWrapper } from "~/components/Icon";
 import { PopoverButton } from "~/components/IconPicker/components/PopoverButton";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
-import { isModKey } from "~/utils/keyboard";
 
 const IconPicker = React.lazy(() => import("~/components/IconPicker"));
 

app/scenes/Document/components/Editor.tsx

@@ -26,6 +26,7 @@ import SmartText from "~/editor/extensions/SmartText";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useFocusedComment from "~/hooks/useFocusedComment";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
@@ -82,6 +83,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
   const user = useCurrentUser({ rejectOnEmpty: false });
   const team = useCurrentTeam({ rejectOnEmpty: false });
   const history = useHistory();
+  const sidebarContext = useLocationSidebarContext();
   const params = useQuery();
   const {
     document,
@@ -113,12 +115,15 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         history.replace({
           search: focusedComment.isResolved ? "resolved=" : "",
           pathname: location.pathname,
-          state: { commentId: focusedComment.id },
+          state: {
+            commentId: focusedComment.id,
+            sidebarContext,
+          },
         });
       }
       ui.set({ commentsExpanded: true });
     }
-  }, [focusedComment, ui, document.id, history, params]);
+  }, [focusedComment, ui, document.id, history, params, sidebarContext]);
 
   // Save document when blurring title, but delay so that if clicking on a
   // button this is allowed to execute first.
@@ -143,10 +148,10 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     (commentId: string) => {
       history.replace({
         pathname: window.location.pathname.replace(/\/history$/, ""),
-        state: { commentId },
+        state: { commentId, sidebarContext },
       });
     },
-    [history]
+    [history, sidebarContext]
   );
 
   // Create a Comment model in local store when a comment mark is created, this
@@ -171,10 +176,10 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
 
       history.replace({
         pathname: window.location.pathname.replace(/\/history$/, ""),
-        state: { commentId },
+        state: { commentId, sidebarContext },
       });
     },
-    [comments, user?.id, props.id, history]
+    [comments, user?.id, props.id, history, sidebarContext]
   );
 
   // Soft delete the Comment model when associated mark is totally removed.
@@ -238,11 +243,13 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
       {!shareId && (
         <DocumentMeta
           document={document}
-          to={
-            match.path === matchDocumentHistory
-              ? documentPath(document)
-              : documentHistoryPath(document)
-          }
+          to={{
+            pathname:
+              match.path === matchDocumentHistory
+                ? documentPath(document)
+                : documentHistoryPath(document),
+            state: { sidebarContext },
+          }}
           rtl={
             titleRef.current?.getComputedDirection() === "rtl" ? true : false
           }

app/scenes/Document/components/Header.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import { NavigationNode } from "@shared/types";
+import { altDisplay, metaDisplay } from "@shared/utils/keyboard";
 import { Theme } from "~/stores/UiStore";
 import Document from "~/models/Document";
 import Revision from "~/models/Revision";
@@ -35,6 +36,7 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useEditingFocus from "~/hooks/useEditingFocus";
 import useKeyDown from "~/hooks/useKeyDown";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useMobile from "~/hooks/useMobile";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -42,7 +44,6 @@ import DocumentMenu from "~/menus/DocumentMenu";
 import NewChildDocumentMenu from "~/menus/NewChildDocumentMenu";
 import TableOfContentsMenu from "~/menus/TableOfContentsMenu";
 import TemplatesMenu from "~/menus/TemplatesMenu";
-import { altDisplay, metaDisplay } from "~/utils/keyboard";
 import { documentEditPath } from "~/utils/routeHelpers";
 import ObservingBanner from "./ObservingBanner";
 import PublicBreadcrumb from "./PublicBreadcrumb";
@@ -91,6 +92,7 @@ function DocumentHeader({
   const isRevision = !!revision;
   const isEditingFocus = useEditingFocus();
   const { hasHeadings, editor } = useDocumentContext();
+  const sidebarContext = useLocationSidebarContext();
   const ref = React.useRef<HTMLDivElement | null>(null);
   const size = useComponentSize(ref);
   const isMobile = isMobileMedia || size.width < 700;
@@ -155,7 +157,10 @@ function DocumentHeader({
         <Button
           as={Link}
           icon={<EditIcon />}
-          to={documentEditPath(document)}
+          to={{
+            pathname: documentEditPath(document),
+            state: { sidebarContext },
+          }}
           neutral
         >
           {isMobile ? null : t("Edit")}

app/scenes/Document/components/History.tsx

@@ -9,6 +9,7 @@ import Event from "~/models/Event";
 import Empty from "~/components/Empty";
 import PaginatedEventList from "~/components/PaginatedEventList";
 import useKeyDown from "~/hooks/useKeyDown";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import { documentPath } from "~/utils/routeHelpers";
 import Sidebar from "./SidebarLayout";
@@ -20,6 +21,7 @@ function History() {
   const { t } = useTranslation();
   const match = useRouteMatch<{ documentSlug: string }>();
   const history = useHistory();
+  const sidebarContext = useLocationSidebarContext();
   const document = documents.getByUrl(match.params.documentSlug);
 
   const eventsInDocument = document
@@ -28,7 +30,10 @@ function History() {
 
   const onCloseHistory = () => {
     if (document) {
-      history.push(documentPath(document));
+      history.push({
+        pathname: documentPath(document),
+        state: { sidebarContext },
+      });
     } else {
       history.goBack();
     }

app/scenes/Document/components/Insights.tsx

@@ -16,6 +16,7 @@ import PaginatedList from "~/components/PaginatedList";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
 import useKeyDown from "~/hooks/useKeyDown";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useTextSelection from "~/hooks/useTextSelection";
@@ -28,6 +29,7 @@ function Insights() {
   const { t } = useTranslation();
   const match = useRouteMatch<{ documentSlug: string }>();
   const history = useHistory();
+  const sidebarContext = useLocationSidebarContext();
   const selectedText = useTextSelection();
   const document = documents.getByUrl(match.params.documentSlug);
   const { editor } = useDocumentContext();
@@ -38,7 +40,10 @@ function Insights() {
 
   const onCloseInsights = () => {
     if (document) {
-      history.push(documentPath(document));
+      history.push({
+        pathname: documentPath(document),
+        state: { sidebarContext },
+      });
     }
   };
 

app/scenes/Document/components/ReferenceListItem.tsx

@@ -9,6 +9,7 @@ import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Flex from "~/components/Flex";
 import Icon from "~/components/Icon";
+import { SidebarContextType } from "~/components/Sidebar/components/SidebarContext";
 import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
@@ -17,6 +18,7 @@ type Props = {
   document: Document | NavigationNode;
   anchor?: string;
   showCollection?: boolean;
+  sidebarContext?: SidebarContextType;
 };
 
 const DocumentLink = styled(Link)`
@@ -57,6 +59,7 @@ function ReferenceListItem({
   showCollection,
   anchor,
   shareId,
+  sidebarContext,
   ...rest
 }: Props) {
   const { icon, color } = document;
@@ -73,6 +76,7 @@ function ReferenceListItem({
         hash: anchor ? `d-${anchor}` : undefined,
         state: {
           title: document.title,
+          sidebarContext,
         },
       }}
       {...rest}

app/scenes/Document/components/References.tsx

@@ -5,8 +5,11 @@ import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
+import { determineSidebarContext } from "~/components/Sidebar/components/SidebarContext";
 import Tab from "~/components/Tab";
 import Tabs from "~/components/Tabs";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import ReferenceListItem from "./ReferenceListItem";
 
@@ -16,7 +19,9 @@ type Props = {
 
 function References({ document }: Props) {
   const { collections, documents } = useStores();
+  const user = useCurrentUser();
   const location = useLocation();
+  const locationSidebarContext = useLocationSidebarContext();
 
   React.useEffect(() => {
     void documents.fetchBacklinks(document.id);
@@ -40,12 +45,24 @@ function References({ document }: Props) {
     <Component>
       <Tabs>
         {showChildDocuments && (
-          <Tab to="#children" isActive={() => !isBacklinksTab}>
+          <Tab
+            to={{
+              hash: "#children",
+              state: { sidebarContext: locationSidebarContext },
+            }}
+            isActive={() => !isBacklinksTab}
+          >
             <Trans>Documents</Trans>
           </Tab>
         )}
         {showBacklinks && (
-          <Tab to="#backlinks" isActive={() => isBacklinksTab}>
+          <Tab
+            to={{
+              hash: "#backlinks",
+              state: { sidebarContext: locationSidebarContext },
+            }}
+            isActive={() => isBacklinksTab}
+          >
             <Trans>Backlinks</Trans>
           </Tab>
         )}
@@ -61,6 +78,11 @@ function References({ document }: Props) {
                 showCollection={
                   backlinkedDocument.collectionId !== document.collectionId
                 }
+                sidebarContext={determineSidebarContext({
+                  document: backlinkedDocument,
+                  user,
+                  currentContext: locationSidebarContext,
+                })}
               />
             ))}
           </List>
@@ -76,6 +98,7 @@ function References({ document }: Props) {
                   key={node.id}
                   document={document || node}
                   showCollection={false}
+                  sidebarContext={locationSidebarContext}
                 />
               );
             })}

app/scenes/Document/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
-import { StaticContext } from "react-router";
+import { StaticContext, useHistory } from "react-router";
 import { RouteComponentProps } from "react-router-dom";
+import { SidebarContextType } from "~/components/Sidebar/components/SidebarContext";
 import { useLastVisitedPath } from "~/hooks/useLastVisitedPath";
 import useStores from "~/hooks/useStores";
 import DataLoader from "./components/DataLoader";
@@ -16,12 +17,14 @@ type LocationState = {
   title?: string;
   restore?: boolean;
   revisionId?: string;
+  sidebarContext?: SidebarContextType;
 };
 
 type Props = RouteComponentProps<Params, StaticContext, LocationState>;
 
 export default function DocumentScene(props: Props) {
   const { ui } = useStores();
+  const history = useHistory();
   const { documentSlug, revisionId } = props.match.params;
   const currentPath = props.location.pathname;
   const [, setLastVisitedPath] = useLastVisitedPath();
@@ -32,6 +35,16 @@ export default function DocumentScene(props: Props) {
 
   React.useEffect(() => () => ui.clearActiveDocument(), [ui]);
 
+  React.useEffect(() => {
+    // When opening a document directly on app load, sidebarContext will not be set.
+    if (!props.location.state?.sidebarContext) {
+      history.replace({
+        ...props.location,
+        state: { ...props.location.state, sidebarContext: "collections" }, // optimistic preference of "collections"
+      });
+    }
+  }, [props.location, history]);
+
   // the urlId portion of the url does not include the slugified title
   // we only want to force a re-mount of the document component when the
   // document changes, not when the title does so only this portion is used

app/scenes/KeyboardShortcuts.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { isMac } from "@shared/utils/browser";
+import { metaDisplay, altDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import InputSearch from "~/components/InputSearch";
 import Key from "~/components/Key";
-import { metaDisplay, altDisplay } from "~/utils/keyboard";
 
 function KeyboardShortcuts() {
   const { t } = useTranslation();

shared/utils/keyboard.ts

@@ -1,4 +1,4 @@
-import { isMac } from "@shared/utils/browser";
+import { isMac } from "./browser";
 
 export const altDisplay = isMac() ? "⌥" : "Alt";
 

yarn.lock

@@ -6910,12 +6910,7 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity "sha1-S1YPZJ/E6RjdCrdc9JYei8iC2Co= sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
 
-cookie@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.0.tgz#2148f68a77245d5c2c0005d264bc3e08cfa0655d"
-  integrity sha512-qCf+V4dtlNhSRXGAZatc1TasyFO6GjohcOul807YOb5ik3+kQSnb4d7iajeCL8QHaJ4uZEjCgiCJerKXwdRVlQ==
-
-cookie@~0.7.2:
+cookie@^0.7.0, cookie@~0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7"
   integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==