fix: Starred untitled draft has no title in sidebar

fix: Double click to edit starred document titles

app/components/Sidebar/components/StarredLink.js

@@ -2,10 +2,12 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Fade from "components/Fade";
 import useStores from "../../../hooks/useStores";
 import Disclosure from "./Disclosure";
+import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useBoolean from "hooks/useBoolean";
 import DocumentMenu from "menus/DocumentMenu";
@@ -19,11 +21,13 @@ type Props = {|
 |};
 
 function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
-  const { collections, documents } = useStores();
+  const { t } = useTranslation();
+  const { collections, documents, policies } = useStores();
   const collection = collections.get(collectionId);
   const document = documents.get(documentId);
   const [expanded, setExpanded] = useState(false);
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
+  const canUpdate = policies.abilities(documentId).update;
 
   const childDocuments = collection
     ? collection.getDocumentChildren(documentId)
@@ -46,6 +50,20 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
     setExpanded((prevExpanded) => !prevExpanded);
   }, []);
 
+  const handleTitleChange = React.useCallback(
+    async (title: string) => {
+      if (!document) return;
+
+      await documents.update({
+        id: document.id,
+        lastRevision: document.revision,
+        text: document.text,
+        title,
+      });
+    },
+    [documents, document]
+  );
+
   return (
     <>
       <Relative>
@@ -60,7 +78,11 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
                   onClick={handleDisclosureClick}
                 />
               )}
-              {title}
+              <EditableTitle
+                title={title || t("Untitled")}
+                onSubmit={handleTitleChange}
+                canUpdate={canUpdate}
+              />
             </>
           }
           exact={false}