From 791be77867a7f3564b6602a7e3e636b5bc25ac14 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 18 Dec 2021 11:14:17 -0800
Subject: [PATCH] feat: Add '+' button to create new doc in sidebar (#2864)

---
 .../Sidebar/components/DocumentLink.tsx       | 22 ++++++++++++++++++-
 shared/i18n/locales/en_US/translation.json    |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/components/Sidebar/components/DocumentLink.tsx b/app/components/Sidebar/components/DocumentLink.tsx
index f2258e545..0d25abbf0 100644
--- a/app/components/Sidebar/components/DocumentLink.tsx
+++ b/app/components/Sidebar/components/DocumentLink.tsx
@@ -1,17 +1,21 @@
 import { observer } from "mobx-react";
+import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { MAX_TITLE_LENGTH } from "@shared/constants";
 import { sortNavigationNodes } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
+import NudeButton from "~/components/NudeButton";
 import useBoolean from "~/hooks/useBoolean";
 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";
@@ -255,6 +259,8 @@ function DocumentLink(
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
 
+  const can = policies.abilities(node.id);
+
   return (
     <>
       <Relative onDragLeave={resetHoverExpanding}>
@@ -302,8 +308,22 @@ function DocumentLink(
                 isDraft={isDraft}
                 ref={ref}
                 menu={
-                  document && !isMoving && !isEditing ? (
+                  document &&
+                  !isMoving &&
+                  !isEditing &&
+                  !isDraggingAnyDocument ? (
                     <Fade>
+                      {can.createChildDocument && (
+                        <NudeButton
+                          aria-label={t("New nested document")}
+                          as={Link}
+                          to={newDocumentPath(document.collectionId, {
+                            parentDocumentId: document.id,
+                          })}
+                        >
+                          <PlusIcon />
+                        </NudeButton>
+                      )}
                       <DocumentMenu
                         document={document}
                         onOpen={handleMenuOpen}
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 1e198970a..78d50ea8a 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -127,6 +127,7 @@
   "Collections could not be loaded, please reload the app": "Collections could not be loaded, please reload the app",
   "Collections": "Collections",
   "Untitled": "Untitled",
+  "New nested document": "New nested document",
   "Document not supported – try Markdown, Plain text, HTML, or Word": "Document not supported – try Markdown, Plain text, HTML, or Word",
   "Starred documents could not be loaded": "Starred documents could not be loaded",
   "Starred": "Starred",
@@ -235,7 +236,6 @@
   "Choose a collection": "Choose a collection",
   "Unpin": "Unpin",
   "Pin to collection": "Pin to collection",
-  "New nested document": "New nested document",
   "Unpublish": "Unpublish",
   "Permanently delete": "Permanently delete",
   "Move": "Move",