Add 'Rename' option to document sidebar menu

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

app/components/Sidebar/components/EditableTitle.tsx

@@ -11,18 +11,23 @@ type Props = {
   maxLength?: number;
 };
 
-function EditableTitle({
+export type RefHandle = {
-  title,
+  setIsEditing: (isEditing: boolean) => void;
-  onSubmit,
+};
-  canUpdate,
+
-  onEditing,
+function EditableTitle(
-  ...rest
+  { title, onSubmit, canUpdate, onEditing, ...rest }: Props,
-}: 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);

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),

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",