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>
                 )
               }
             />