fix: prevent sidebar drag lock during inline rename (#680) (#681)

packages/ui/src/components/session/SessionFolderItem.tsx

@@ -174,6 +174,8 @@ const SessionFolderItemBase = <TSessionNode,>({
             <form
               className="flex min-w-0 flex-1 items-center gap-1"
               data-keyboard-avoid="true"
+              onPointerDown={(event) => event.stopPropagation()}
+              onMouseDown={(event) => event.stopPropagation()}
               onSubmit={(event) => {
                 event.preventDefault();
                 handleSaveRename();
@@ -187,6 +189,8 @@ const SessionFolderItemBase = <TSessionNode,>({
                 autoFocus
                 placeholder="Folder name"
                 onClick={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
                 onKeyDown={(event) => {
                   if (event.key === 'Escape') {
                     event.stopPropagation();
@@ -202,6 +206,8 @@ const SessionFolderItemBase = <TSessionNode,>({
                 type="submit"
                 className="shrink-0 text-muted-foreground hover:text-foreground"
                 onClick={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
               >
                 <RiCheckLine className="size-4" />
               </button>
@@ -211,6 +217,8 @@ const SessionFolderItemBase = <TSessionNode,>({
                   event.stopPropagation();
                   handleCancelRename();
                 }}
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
                 className="shrink-0 text-muted-foreground hover:text-foreground"
               >
                 <RiCloseLine className="size-4" />

packages/ui/src/components/session/SessionSidebar.tsx

@@ -972,6 +972,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     ],
   );
 
+  const isInlineEditing = Boolean(renamingFolderId || editingId || editingProjectId);
+
   return (
     <div
       ref={sessionSearchContainerRef}
@@ -1053,6 +1055,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         settingsAutoCreateWorktree={settingsAutoCreateWorktree}
         getOrderedGroups={getOrderedGroups}
         setGroupOrderByProject={setGroupOrderByProject}
+        isInlineEditing={isInlineEditing}
       />
 
       <NewWorktreeDialog

packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx

@@ -60,6 +60,7 @@ type Props = {
   settingsAutoCreateWorktree: boolean;
   getOrderedGroups: (projectId: string, groups: SessionGroup[]) => SessionGroup[];
   setGroupOrderByProject: React.Dispatch<React.SetStateAction<Map<string, string[]>>>;
+  isInlineEditing: boolean;
 };
 
 export function SidebarProjectsList(props: Props): React.ReactNode {
@@ -198,7 +199,7 @@ export function SidebarProjectsList(props: Props): React.ReactNode {
                           {orderedGroups.map((group) => {
                             const groupKey = `${projectKey}:${group.id}`;
                             return (
-                              <SortableGroupItem key={group.id} id={group.id}>
+                              <SortableGroupItem key={group.id} id={group.id} disabled={props.isInlineEditing}>
                                 {props.renderGroupSessions(group, groupKey, projectKey)}
                               </SortableGroupItem>
                             );

packages/ui/src/components/session/sidebar/sortableItems.tsx

@@ -303,8 +303,9 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
 
 const SortableGroupItemBase: React.FC<{
   id: string;
+  disabled?: boolean;
   children: React.ReactNode;
-}> = ({ id, children }) => {
+}> = ({ id, disabled = false, children }) => {
   const {
     attributes,
     listeners,
@@ -312,7 +313,7 @@ const SortableGroupItemBase: React.FC<{
     transform,
     transition,
     isDragging,
-  } = useSortable({ id });
+  } = useSortable({ id, disabled });
 
   return (
     <div