fix: Improved display of editing titles in sidebar

app/components/Sidebar/components/CollectionLink.tsx

@@ -49,6 +49,7 @@ function CollectionLink({
   const itemRef = React.useRef<
     NavigationNode & { depth: number; active: boolean; collectionId: string }
   >();
+  const [isEditing, setIsEditing] = React.useState(false);
 
   const handleTitleChange = React.useCallback(
     async (name: string) => {
@@ -60,6 +61,10 @@ function CollectionLink({
     [collection, history]
   );
 
+  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
+    setIsEditing(isEditing);
+  }, []);
+
   const { ui, documents, policies, collections } = useStores();
   const [expanded, setExpanded] = React.useState(
     collection.id === ui.activeCollectionId
@@ -210,23 +215,25 @@ function CollectionLink({
           $isMoving={isCollectionDragging}
         >
           <DropToImport collectionId={collection.id}>
-            <SidebarLinkWithPadding
+            <SidebarLink
               to={collection.url}
               icon={
                 <CollectionIcon collection={collection} expanded={expanded} />
               }
-              showActions={menuOpen || expanded}
+              showActions={menuOpen}
               isActiveDrop={isOver && canDrop}
               label={
                 <EditableTitle
                   title={collection.name}
                   onSubmit={handleTitleChange}
+                  onEditing={handleTitleEditing}
                   canUpdate={canUpdate}
                 />
               }
               exact={false}
               depth={0.5}
               menu={
+                !isEditing && (
                   <>
                     {can.update && (
                       <CollectionSortMenuWithMargin
@@ -241,6 +248,7 @@ function CollectionLink({
                       onClose={handleMenuClose}
                     />
                   </>
+                )
               }
             />
           </DropToImport>
@@ -292,10 +300,6 @@ const Draggable = styled("div")<{ $isDragging: boolean; $isMoving: boolean }>`
   pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
 `;
 
-const SidebarLinkWithPadding = styled(SidebarLink)`
-  padding-right: 60px;
-`;
-
 const CollectionSortMenuWithMargin = styled(CollectionSortMenu)`
   margin-right: 4px;
 `;

app/components/Sidebar/components/DocumentLink.tsx

@@ -50,6 +50,7 @@ function DocumentLink(
   const hasChildDocuments = !!node.children.length;
   const document = documents.get(node.id);
   const { fetchChildDocuments } = documents;
+  const [isEditing, setIsEditing] = React.useState(false);
 
   React.useEffect(() => {
     if (isActiveDocument && hasChildDocuments) {
@@ -243,6 +244,10 @@ function DocumentLink(
     node,
   ]);
 
+  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
+    setIsEditing(isEditing);
+  }, []);
+
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
@@ -277,6 +282,7 @@ function DocumentLink(
                     <EditableTitle
                       title={title}
                       onSubmit={handleTitleChange}
+                      onEditing={handleTitleEditing}
                       canUpdate={canUpdate}
                       maxLength={MAX_TITLE_LENGTH}
                     />
@@ -293,7 +299,7 @@ function DocumentLink(
                 isDraft={isDraft}
                 ref={ref}
                 menu={
-                  document && !isMoving ? (
+                  document && !isMoving && !isEditing ? (
                     <Fade>
                       <DocumentMenu
                         document={document}

app/components/Sidebar/components/EditableTitle.tsx

@@ -4,12 +4,19 @@ import useToasts from "~/hooks/useToasts";
 
 type Props = {
   onSubmit: (title: string) => Promise<void>;
+  onEditing?: (isEditing: boolean) => void;
   title: string;
   canUpdate: boolean;
   maxLength?: number;
 };
 
-function EditableTitle({ title, onSubmit, canUpdate, ...rest }: Props) {
+function EditableTitle({
+  title,
+  onSubmit,
+  canUpdate,
+  onEditing,
+  ...rest
+}: Props) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
@@ -66,6 +73,10 @@ function EditableTitle({ title, onSubmit, canUpdate, ...rest }: Props) {
     [originalValue, showToast, value, onSubmit]
   );
 
+  React.useEffect(() => {
+    onEditing?.(isEditing);
+  }, [onEditing, isEditing]);
+
   return (
     <>
       {isEditing ? (
@@ -91,10 +102,9 @@ function EditableTitle({ title, onSubmit, canUpdate, ...rest }: Props) {
 }
 
 const Input = styled.input`
-  margin-left: -4px;
   color: ${(props) => props.theme.sidebarText};
   background: ${(props) => props.theme.background};
-  width: calc(100% - 10px);
+  width: calc(100% + 12px);
   border-radius: 3px;
   border: 1px solid ${(props) => props.theme.inputBorderFocused};
   padding: 5px 6px;

app/components/Sidebar/components/StarredLink.tsx

@@ -32,6 +32,7 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
     ? collection.getDocumentChildren(documentId)
     : [];
   const hasChildDocuments = childDocuments.length > 0;
+  const [isEditing, setIsEditing] = React.useState(false);
 
   useEffect(() => {
     async function load() {
@@ -69,6 +70,10 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
     [documents, document]
   );
 
+  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
+    setIsEditing(isEditing);
+  }, []);
+
   return (
     <>
       <Relative>
@@ -89,6 +94,7 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
               <EditableTitle
                 title={title || t("Untitled")}
                 onSubmit={handleTitleChange}
+                onEditing={handleTitleEditing}
                 canUpdate={canUpdate}
                 maxLength={MAX_TITLE_LENGTH}
               />
@@ -97,7 +103,7 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
           exact={false}
           showActions={menuOpen}
           menu={
-            document ? (
+            document && !isEditing ? (
               <Fade>
                 <DocumentMenu
                   document={document}