[Major Refactor] Use TreeExplorer on nodeLibrarySidebarTab (#699)

* Basic move

* Add back node bookmark

* Move node preview

* Fix drag node to canvas

* Restore click node to add to canvas

* Split bookmark tree and library tree

* Migrate rename and delete context menu

* Fix expanded keys

* Split components

* Support extra menu items

* Context menu only for folder

* Migrate add folder

* Handle drop

* Store color customization

* remove extra padding

* Do not show context menu if no item

* Hide divider if no bookmark

* Sort bookmarks alphabetically default

* nit

* proper edit

* Update test selectors

* Auto expand on item drop

* nit

* Fix tests

* Search also searches bookmarks tree

* Add serach playwright test

src/components/common/TreeExplorerTreeNode.vue

@@ -16,7 +16,7 @@
         <EditableText
           :modelValue="node.label"
           :isEditing="isEditing"
-          @edit="(newName: string) => props.node.handleRename(node, newName)"
+          @edit="handleRename"
         />
         <slot name="after-label" :node="props.node"></slot>
       </span>
@@ -26,9 +26,9 @@
         severity="secondary"
         class="leaf-count-badge"
       />
-      <slot name="actions" :node="node">
-        <!-- Default slot content for actions -->
-      </slot>
+    </div>
+    <div class="node-actions">
+      <slot name="actions" :node="props.node"></slot>
     </div>
   </div>
 </template>
@@ -62,13 +62,15 @@ const emit = defineEmits<{
 }>()
 
 const labelEditable = computed<boolean>(() => !!props.node.handleRename)
-const renameEditingNode = inject(
-  'renameEditingNode'
-) as Ref<TreeExplorerNode | null>
+const renameEditingNode =
+  inject<Ref<TreeExplorerNode | null>>('renameEditingNode')
 const isEditing = computed(
   () => labelEditable.value && renameEditingNode.value?.key === props.node.key
 )
-
+const handleRename = (newName: string) => {
+  props.node.handleRename(props.node, newName)
+  renameEditingNode.value = null
+}
 const container = ref<HTMLElement | null>(null)
 const canDrop = ref(false)
 const treeNodeElement = ref<HTMLElement | null>(null)