From 43ee487e91b596286c186656567780198da59951 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 17 Oct 2023 18:15:35 -0400
Subject: [PATCH] Add 'Rename' option to document sidebar menu

---
 .../Sidebar/components/DocumentLink.tsx       | 13 ++++++------
 .../Sidebar/components/EditableTitle.tsx      | 21 ++++++++++++-------
 app/menus/DocumentMenu.tsx                    |  9 ++++++++
 shared/i18n/locales/en_US/translation.json    |  1 +
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/components/Sidebar/components/DocumentLink.tsx b/app/components/Sidebar/components/DocumentLink.tsx
index a6838759d..3999c910a 100644
--- a/app/components/Sidebar/components/DocumentLink.tsx
+++ b/app/components/Sidebar/components/DocumentLink.tsx
@@ -23,7 +23,7 @@ import DocumentMenu from "~/menus/DocumentMenu";
 import { newDocumentPath } from "~/utils/routeHelpers";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
-import EditableTitle from "./EditableTitle";
+import EditableTitle, { RefHandle } from "./EditableTitle";
 import Folder from "./Folder";
 import Relative from "./Relative";
 import SidebarLink, { DragObject } from "./SidebarLink";
@@ -63,6 +63,7 @@ function InnerDocumentLink(
   const document = documents.get(node.id);
   const { fetchChildDocuments } = documents;
   const [isEditing, setIsEditing] = React.useState(false);
+  const editableTitleRef = React.useRef<RefHandle>(null);
   const inStarredSection = useStarredContext();
 
   React.useEffect(() => {
@@ -275,10 +276,6 @@ function InnerDocumentLink(
     node,
   ]);
 
-  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
-    setIsEditing(isEditing);
-  }, []);
-
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
@@ -329,9 +326,10 @@ function InnerDocumentLink(
                   <EditableTitle
                     title={title}
                     onSubmit={handleTitleChange}
-                    onEditing={handleTitleEditing}
+                    onEditing={setIsEditing}
                     canUpdate={canUpdate}
                     maxLength={DocumentValidation.maxTitleLength}
+                    ref={editableTitleRef}
                   />
                 }
                 isActive={(match, location: Location<{ starred?: boolean }>) =>
@@ -368,6 +366,9 @@ function InnerDocumentLink(
                       )}
                       <DocumentMenu
                         document={document}
+                        onRename={() =>
+                          editableTitleRef.current?.setIsEditing(true)
+                        }
                         onOpen={handleMenuOpen}
                         onClose={handleMenuClose}
                       />
diff --git a/app/components/Sidebar/components/EditableTitle.tsx b/app/components/Sidebar/components/EditableTitle.tsx
index 1288c48b4..c59a2d2fa 100644
--- a/app/components/Sidebar/components/EditableTitle.tsx
+++ b/app/components/Sidebar/components/EditableTitle.tsx
@@ -11,18 +11,23 @@ type Props = {
   maxLength?: number;
 };
 
-function EditableTitle({
-  title,
-  onSubmit,
-  canUpdate,
-  onEditing,
-  ...rest
-}: Props) {
+export type RefHandle = {
+  setIsEditing: (isEditing: boolean) => void;
+};
+
+function EditableTitle(
+  { title, onSubmit, canUpdate, onEditing, ...rest }: Props,
+  ref: React.RefObject<RefHandle>
+) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
   const { showToast } = useToasts();
 
+  React.useImperativeHandle(ref, () => ({
+    setIsEditing,
+  }));
+
   React.useEffect(() => {
     setValue(title);
   }, [title]);
@@ -128,4 +133,4 @@ const Input = styled.input`
   }
 `;
 
-export default EditableTitle;
+export default React.forwardRef(EditableTitle);
diff --git a/app/menus/DocumentMenu.tsx b/app/menus/DocumentMenu.tsx
index fdbeec23e..47491c36a 100644
--- a/app/menus/DocumentMenu.tsx
+++ b/app/menus/DocumentMenu.tsx
@@ -61,6 +61,7 @@ type Props = {
   showToggleEmbeds?: boolean;
   showPin?: boolean;
   label?: (props: MenuButtonHTMLProps) => React.ReactNode;
+  onRename?: () => void;
   onOpen?: () => void;
   onClose?: () => void;
 };
@@ -72,6 +73,7 @@ function DocumentMenu({
   showToggleEmbeds,
   showDisplayOptions,
   label,
+  onRename,
   onOpen,
   onClose,
 }: Props) {
@@ -269,6 +271,13 @@ function DocumentMenu({
                 !!can.update && user.separateEditMode && !document.template,
               icon: <EditIcon />,
             },
+            {
+              type: "button",
+              title: `${t("Rename")}…`,
+              visible: !!can.update && !user.separateEditMode && !!onRename,
+              onClick: () => onRename?.(),
+              icon: <EditIcon />,
+            },
             actionToMenuItem(createNestedDocument, context),
             actionToMenuItem(importDocument, context),
             actionToMenuItem(createTemplate, context),
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index bd2d22020..185162773 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -379,6 +379,7 @@
   "Document options": "Document options",
   "Restore": "Restore",
   "Choose a collection": "Choose a collection",
+  "Rename": "Rename",
   "Enable embeds": "Enable embeds",
   "Export options": "Export options",
   "Edit group": "Edit group",