fix(core): sidebar renaming bug (#7632)

packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx

@@ -679,6 +679,15 @@ export const ExplorerFolderNodeFolder = ({
     [handleDeleteChildren, t]
   );
 
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    if (collapsed) {
+      setNewFolderId(null); // reset new folder id to clear the renaming state
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, []);
+
   return (
     <ExplorerTreeNode
       icon={({ draggedOver, className, treeInstruction }) => (
@@ -694,7 +703,7 @@ export const ExplorerFolderNodeFolder = ({
       renameable
       reorderable={reorderable}
       collapsed={collapsed}
-      setCollapsed={setCollapsed}
+      setCollapsed={handleCollapsedChange}
       onRename={handleRename}
       operations={finalOperations}
       canDrop={handleCanDrop}

packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx

@@ -95,12 +95,21 @@ export const ExplorerOrganize = ({
     DropTargetOptions<AffineDNDData>['canDrop']
   >(() => args => args.source.data.entity?.type === 'folder', []);
 
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    if (collapsed) {
+      setNewFolderId(null); // reset new folder id to clear the renaming state
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, []);
+
   return (
     <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.organize']()}
-        setCollapsed={setCollapsed}
+        setCollapsed={handleCollapsedChange}
         collapsed={collapsed}
       >
         <IconButton

packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx

@@ -37,12 +37,21 @@ export const ExplorerTags = ({
     setCollapsed(false);
   }, [t, tagService]);
 
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    if (collapsed) {
+      setCreatedTag(null); // reset created tag to clear the renaming state
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, []);
+
   return (
     <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.tags']()}
-        setCollapsed={setCollapsed}
+        setCollapsed={handleCollapsedChange}
         collapsed={collapsed}
       >
         <IconButton

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -24,10 +24,8 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import type { To } from 'history';
 import {
-  type Dispatch,
   Fragment,
   type RefAttributes,
-  type SetStateAction,
   useCallback,
   useContext,
   useEffect,
@@ -86,7 +84,7 @@ export const ExplorerTreeNode = ({
   reorderable?: boolean;
   defaultRenaming?: boolean;
   collapsed: boolean;
-  setCollapsed: Dispatch<SetStateAction<boolean>>;
+  setCollapsed: (collapsed: boolean) => void;
   renameable?: boolean;
   onRename?: (newName: string) => void;
   disabled?: boolean;
@@ -285,9 +283,9 @@ export const ExplorerTreeNode = ({
     if (!clickForCollapse) {
       onClick?.();
     } else {
-      setCollapsed(prev => !prev);
+      setCollapsed(!collapsed);
     }
-  }, [clickForCollapse, onClick, setCollapsed]);
+  }, [clickForCollapse, collapsed, onClick, setCollapsed]);
 
   const content = (
     <div