feat: Add "new doc" button on collections in sidebar (#3174)

* feat: Add new icon button on collections in sidebar, move sort into menu

* Remove unused menu, add warning when dragging in a-z collection

* fix: Add hover background to sidebar actions, add tooltip to new doc button

* Retain 'active' state on buttons when related context menu is open

* fix: Two more spots that deserve active background

app/components/Sidebar/components/CollectionLink.tsx

@@ -1,22 +1,26 @@
 import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
+import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop, useDrag, DropTargetMonitor } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { useLocation, useHistory } from "react-router-dom";
+import { useLocation, useHistory, Link } from "react-router-dom";
 import styled from "styled-components";
 import { sortNavigationNodes } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import DocumentReparent from "~/scenes/DocumentReparent";
 import CollectionIcon from "~/components/CollectionIcon";
+import Fade from "~/components/Fade";
 import Modal from "~/components/Modal";
+import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import CollectionMenu from "~/menus/CollectionMenu";
-import CollectionSortMenu from "~/menus/CollectionSortMenu";
 import { NavigationNode } from "~/types";
+import { newDocumentPath } from "~/utils/routeHelpers";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
@@ -254,20 +258,25 @@ function CollectionLink({
               menu={
                 !isEditing &&
                 !isDraggingAnyCollection && (
-                  <>
-                    {can.update && displayDocumentLinks && (
-                      <CollectionSortMenu
-                        collection={collection}
-                        onOpen={handleMenuOpen}
-                        onClose={handleMenuClose}
-                      />
+                  <Fade>
+                    {can.update && (
+                      <Tooltip tooltip={t("New doc")} delay={500}>
+                        <NudeButton
+                          type={undefined}
+                          aria-label={t("New document")}
+                          as={Link}
+                          to={newDocumentPath(collection.id)}
+                        >
+                          <PlusIcon />
+                        </NudeButton>
+                      </Tooltip>
                     )}
                     <CollectionMenu
                       collection={collection}
                       onOpen={handleMenuOpen}
                       onClose={handleMenuClose}
                     />
-                  </>
+                  </Fade>
                 )
               }
             />

app/components/Sidebar/components/DocumentLink.tsx

@@ -11,8 +11,10 @@ import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { NavigationNode } from "~/types";
 import { newDocumentPath } from "~/utils/routeHelpers";
@@ -47,6 +49,7 @@ function DocumentLink(
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
 ) {
+  const { showToast } = useToasts();
   const { documents, policies } = useStores();
   const { t } = useTranslation();
   const isActiveDocument = activeDocument && activeDocument.id === node.id;
@@ -225,6 +228,19 @@ function DocumentLink(
   const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
     accept: "document",
     drop: (item: DragObject) => {
+      if (!manualSort) {
+        showToast(
+          t(
+            "You can't reorder documents in an alphabetically sorted collection"
+          ),
+          {
+            type: "info",
+            timeout: 5000,
+          }
+        );
+        return;
+      }
+
       if (!collection) {
         return;
       }
@@ -327,16 +343,18 @@ function DocumentLink(
                   !isDraggingAnyDocument ? (
                     <Fade>
                       {can.createChildDocument && (
-                        <NudeButton
-                          type={undefined}
-                          aria-label={t("New nested document")}
-                          as={Link}
-                          to={newDocumentPath(document.collectionId, {
-                            parentDocumentId: document.id,
-                          })}
-                        >
-                          <PlusIcon />
-                        </NudeButton>
+                        <Tooltip tooltip={t("New doc")} delay={500}>
+                          <NudeButton
+                            type={undefined}
+                            aria-label={t("New nested document")}
+                            as={Link}
+                            to={newDocumentPath(document.collectionId, {
+                              parentDocumentId: document.id,
+                            })}
+                          >
+                            <PlusIcon />
+                          </NudeButton>
+                        </Tooltip>
                       )}
                       <DocumentMenu
                         document={document}
@@ -350,8 +368,12 @@ function DocumentLink(
             </DropToImport>
           </div>
         </Draggable>
-        {manualSort && isDraggingAnyDocument && (
-          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
+        {isDraggingAnyDocument && (
+          <DropCursor
+            disabled={!manualSort}
+            isActiveDrop={isOverReorder}
+            innerRef={dropToReorder}
+          />
         )}
       </Relative>
       {openedOnce && (

app/components/Sidebar/components/DropCursor.tsx

@@ -1,20 +1,30 @@
 import * as React from "react";
 import styled from "styled-components";
 
-function DropCursor({
-  isActiveDrop,
-  innerRef,
-  position,
-}: {
+type Props = {
+  disabled?: boolean;
   isActiveDrop: boolean;
   innerRef: React.Ref<HTMLDivElement>;
   position?: "top";
-}) {
-  return <Cursor isOver={isActiveDrop} ref={innerRef} position={position} />;
+};
+
+function DropCursor({ isActiveDrop, innerRef, position, disabled }: Props) {
+  return (
+    <Cursor
+      isOver={isActiveDrop}
+      disabled={disabled}
+      ref={innerRef}
+      position={position}
+    />
+  );
 }
 
 // transparent hover zone with a thin visible band vertically centered
-const Cursor = styled.div<{ isOver?: boolean; position?: "top" }>`
+const Cursor = styled.div<{
+  isOver?: boolean;
+  disabled?: boolean;
+  position?: "top";
+}>`
   opacity: ${(props) => (props.isOver ? 1 : 0)};
   transition: opacity 150ms;
   position: absolute;
@@ -26,7 +36,10 @@ const Cursor = styled.div<{ isOver?: boolean; position?: "top" }>`
   ${(props) => (props.position === "top" ? "top: -7px;" : "bottom: -7px;")}
 
   ::after {
-    background: ${(props) => props.theme.slateDark};
+    background: ${(props) =>
+      props.disabled
+        ? props.theme.sidebarActiveBackground
+        : props.theme.slateDark};
     position: absolute;
     top: 6px;
     content: "";

app/components/Sidebar/components/SidebarButton.tsx

@@ -71,7 +71,8 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
   cursor: pointer;
 
   &:active,
-  &:hover {
+  &:hover,
+  &[aria-expanded="true"] {
     color: ${(props) => props.theme.sidebarText};
     transition: background 100ms ease-in-out;
     background: ${(props) => props.theme.sidebarActiveBackground};

app/components/Sidebar/components/SidebarLink.tsx

@@ -190,13 +190,12 @@ const Link = styled(NavLink)<{ $isActiveDrop?: boolean; $isDraft?: boolean }>`
 
   & + ${Actions} {
     ${NudeButton} {
-      background: ${(props) => props.theme.sidebarBackground};
-    }
-  }
+      background: transparent;
 
-  &[aria-current="page"] + ${Actions} {
-    ${NudeButton} {
-      background: ${(props) => props.theme.sidebarActiveBackground};
+      &:hover,
+      &[aria-expanded="true"] {
+        background: ${(props) => props.theme.sidebarControlHoverBackground};
+      }
     }
   }