From 7347d9c79f09b7d789838b2b30474f5ece7fc0d6 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 16 Mar 2026 09:21:53 +0300
Subject: [PATCH] feat(ui/tree): add universal tree component and migrate
 folders (#694)

Add reusable tree component (src/renderer/components/ui/tree/) with:
- Slot-based icon customization
- DnD with position detection (before/after/center for containers)
- Inline rename with outline, no layout shift
- Multi-selection (single/range/toggle via consumer)
- Focus/highlight visual states
- External drop support
- Context menu via event emission

Migrate sidebar/folders to use UiTree as thin wrapper, removing
old TreeNode.vue, composables, and injection keys (-741 lines).
---
 .../components/sidebar/folders/Tree.vue       | 391 +++++++-----
 .../components/sidebar/folders/TreeNode.vue   | 537 -----------------
 .../sidebar/folders/composables/index.ts      |  55 --
 .../components/sidebar/folders/keys.ts        |  13 -
 src/renderer/components/ui/tree/Tree.vue      | 182 ++++++
 src/renderer/components/ui/tree/TreeNode.vue  | 562 ++++++++++++++++++
 .../components/ui/tree/composables.ts         |  66 ++
 src/renderer/components/ui/tree/index.ts      |   3 +
 src/renderer/components/ui/tree/keys.ts       |  28 +
 src/renderer/components/ui/tree/types.ts      |  14 +
 10 files changed, 1110 insertions(+), 741 deletions(-)
 delete mode 100644 src/renderer/components/sidebar/folders/TreeNode.vue
 delete mode 100644 src/renderer/components/sidebar/folders/composables/index.ts
 delete mode 100644 src/renderer/components/sidebar/folders/keys.ts
 create mode 100644 src/renderer/components/ui/tree/Tree.vue
 create mode 100644 src/renderer/components/ui/tree/TreeNode.vue
 create mode 100644 src/renderer/components/ui/tree/composables.ts
 create mode 100644 src/renderer/components/ui/tree/index.ts
 create mode 100644 src/renderer/components/ui/tree/keys.ts
 create mode 100644 src/renderer/components/ui/tree/types.ts

diff --git a/src/renderer/components/sidebar/folders/Tree.vue b/src/renderer/components/sidebar/folders/Tree.vue
index 18a97da8..b90bfeb9 100644
--- a/src/renderer/components/sidebar/folders/Tree.vue
+++ b/src/renderer/components/sidebar/folders/Tree.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
+import type { TreeNode as TreeNodeType } from '@/components/ui/tree/types'
 import type { Node, Position } from './types'
 import { languages } from '@/components/editor/grammars/languages'
 import * as ContextMenu from '@/components/ui/shadcn/context-menu'
+import { Tree as UiTree } from '@/components/ui/tree'
 import { useApp, useDialog, useFolders, useSnippets } from '@/composables'
 import { i18n } from '@/electron'
 import { scrollToElement } from '@/utils'
+import { Folder } from 'lucide-vue-next'
 import CustomIcons from './custom-icons/CustomIcons.vue'
-import { treeKeys } from './keys'
-import TreeNode from './TreeNode.vue'
 
 interface Props {
   modelValue: Node[]
   selectedId?: string | number
-  contextMenuHandler?: () => Promise<boolean>
-  focusHandler?: (isFocused: Ref) => void
 }
 
 interface Emits {
@@ -27,16 +25,12 @@ interface Emits {
   (e: 'toggleNode', value: Node): void
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  contextMenuHandler: () => Promise.resolve(true),
-})
-
+const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const {
   createFolderAndSelect,
   deleteFolder,
-  renameFolderId,
   folders,
   updateFolder,
   getFolderByIdFromTree,
@@ -45,48 +39,189 @@ const {
   clearFolderSelection,
   selectFolder,
 } = useFolders()
-const { state } = useApp()
-const { clearSnippetsState } = useSnippets()
+const {
+  state,
+  highlightedFolderIds,
+  highlightedSnippetIds,
+  highlightedTagId,
+  focusedFolderId,
+} = useApp()
+const {
+  clearSnippetsState,
+  displayedSnippets,
+  updateSnippets,
+  selectFirstSnippet,
+} = useSnippets()
+
+// --- Data mapping ---
+
+function mapToTreeNode(folder: Node): TreeNodeType {
+  return {
+    id: folder.id,
+    label: folder.name,
+    isExpanded: Boolean(folder.isOpen),
+    children: folder.children?.map(mapToTreeNode) || [],
+  }
+}
+
+const treeData = computed(() => props.modelValue.map(mapToTreeNode))
+
+const selectedIds = computed({
+  get: () => selectedFolderIds.value as (string | number)[],
+  set: (val) => {
+    selectedFolderIds.value = val as number[]
+  },
+})
+
+const editableId = ref<string | number | null>(null)
+
+const focusedId = computed({
+  get: () => focusedFolderId.value as string | number | undefined,
+  set: (val) => {
+    focusedFolderId.value = val as number | undefined
+  },
+})
+
+const highlightedIds = computed({
+  get: () => highlightedFolderIds.value as Set<string | number>,
+  set: (val) => {
+    highlightedFolderIds.value.clear()
+    val.forEach(id => highlightedFolderIds.value.add(id as number))
+  },
+})
+
+// --- Context menu state ---
 
-const hoveredNodeId = ref('')
-const isHoveredByIdDisabled = ref(false)
 const contextNode = ref<Node | null>(null)
+
 const isContextMultiSelection = computed(() => {
   if (!contextNode.value)
     return false
-
   if (selectedFolderIds.value.length <= 1)
     return false
-
   return selectedFolderIds.value.includes(contextNode.value.id)
 })
 
 const contextNodeDefaultLanguage = computed(() => {
   if (!contextNode.value)
     return ''
-
   return (
     getFolderByIdFromTree(folders.value, contextNode.value.id)
       ?.defaultLanguage || ''
   )
 })
 
-function clickNode(id: number, event?: MouseEvent) {
-  return emit('clickNode', { id, event })
+// --- Event handlers ---
+
+function onClickNode({
+  node,
+  event,
+}: {
+  node: TreeNodeType
+  event?: MouseEvent
+}) {
+  highlightedFolderIds.value.clear()
+  highlightedTagId.value = undefined
+  state.tagId = undefined
+  emit('clickNode', { id: Number(node.id), event })
 }
 
-function dragNode(nodes: Node[], target: Node, position: Position) {
-  return emit('dragNode', { nodes, target, position })
+function onDblclickNode(node: TreeNodeType) {
+  setTimeout(() => {
+    editableId.value = node.id
+  }, 100)
 }
 
-function toggleNode(node: Node) {
-  return emit('toggleNode', node)
+function onToggleNode(node: TreeNodeType) {
+  const folderNode = getFolderByIdFromTree(
+    folders.value,
+    Number(node.id),
+  ) as Node
+  if (folderNode) {
+    emit('toggleNode', folderNode)
+  }
 }
 
-function contextMenu(node: Node) {
-  contextNode.value = node
+function onDragNode({
+  nodes,
+  target,
+  position,
+}: {
+  nodes: TreeNodeType[]
+  target: TreeNodeType
+  position: Position
+}) {
+  const folderNodes = nodes
+    .map(n => getFolderByIdFromTree(folders.value, Number(n.id)))
+    .filter((n): n is Node => Boolean(n))
+  const folderTarget = getFolderByIdFromTree(
+    folders.value,
+    Number(target.id),
+  ) as Node
+
+  if (folderNodes.length && folderTarget) {
+    emit('dragNode', { nodes: folderNodes, target: folderTarget, position })
+  }
 }
 
+async function onExternalDrop({
+  data,
+  target,
+}: {
+  data: DataTransfer
+  target: TreeNodeType
+  position: Position
+}) {
+  const snippetIds = JSON.parse(data.getData('snippetIds') || '[]')
+  const snippets = displayedSnippets.value?.filter(s =>
+    snippetIds.includes(s.id),
+  )
+
+  if (!snippets?.length)
+    return
+
+  const folderId = Number(target.id)
+
+  if (snippets.every(s => s.folder?.id === folderId && !s.isDeleted))
+    return
+
+  const ids = snippets.map(s => s.id)
+  const updateData = snippets.map(() => ({
+    folderId,
+    isDeleted: 0,
+  }))
+
+  await updateSnippets(ids, updateData)
+
+  if (state.snippetId && ids.includes(state.snippetId)) {
+    selectFirstSnippet()
+  }
+}
+
+function onContextMenu({
+  node,
+}: {
+  node: TreeNodeType
+  selectedNodes: TreeNodeType[]
+}) {
+  contextNode.value = getFolderByIdFromTree(
+    folders.value,
+    Number(node.id),
+  ) as Node
+  highlightedSnippetIds.value.clear()
+}
+
+function onUpdateLabel({ node, value }: { node: TreeNodeType, value: string }) {
+  updateFolder(Number(node.id), { name: value })
+  editableId.value = null
+}
+
+function onCancelEdit() {
+  editableId.value = null
+}
+
+// --- Context menu actions ---
+
 async function onDeleteFolder() {
   if (!contextNode.value)
     return
@@ -132,24 +267,17 @@ async function onDeleteFolder() {
 }
 
 function onRenameFolder() {
-  // FIXME: Костыль для того чтобы input в TreeNode фокусировался,
-  // разобраться почему не работает nextTick
   setTimeout(() => {
     if (!contextNode.value)
       return
-
-    renameFolderId.value = contextNode.value.id
+    editableId.value = contextNode.value.id
   }, 100)
 }
 
 function onSelectLanguage(language: string) {
-  if (!contextNode.value) {
+  if (!contextNode.value)
     return
-  }
-
-  updateFolder(contextNode.value.id, {
-    defaultLanguage: language,
-  })
+  updateFolder(contextNode.value.id, { defaultLanguage: language })
 }
 
 function scrollToSelectedLanguage(el: any, isSelected: boolean) {
@@ -181,111 +309,102 @@ async function onRemoveCustomIcon() {
   if (!contextNode.value)
     return
 
-  updateFolder(contextNode.value.id, {
-    icon: null,
-  })
-
+  updateFolder(contextNode.value.id, { icon: null })
   await getFolders()
 }
-
-provide(treeKeys, {
-  clickNode,
-  contextMenu,
-  dragNode,
-  focusHandler: props.focusHandler,
-  isHoveredByIdDisabled,
-  toggleNode,
-})
 </script>
 
 <template>
-  <div
-    v-if="modelValue.length"
-    class="h-full min-h-0"
-  >
-    <div class="scrollbar h-full min-h-0 overflow-x-hidden overflow-y-auto">
-      <ContextMenu.ContextMenu>
-        <ContextMenu.ContextMenuTrigger as-child>
-          <div data-folder-tree>
-            <TreeNode
-              v-for="(node, index) in modelValue"
-              :key="node.id"
-              :node="node"
-              :nodes="modelValue"
-              :index="index"
-              :hovered-node-id="hoveredNodeId"
-            >
-              <template #default="slotProps">
-                <slot
-                  v-if="slotProps && slotProps.node"
-                  :node="slotProps.node"
-                  :deep="slotProps.deep"
-                  :hovered-node-id="hoveredNodeId"
-                />
-                <template v-else>
-                  {{ node.name }} s
-                </template>
-              </template>
-            </TreeNode>
+  <ContextMenu.ContextMenu>
+    <ContextMenu.ContextMenuTrigger as-child>
+      <UiTree
+        :model-value="treeData"
+        :selected-ids="selectedIds"
+        :editable-id="editableId"
+        :focused-id="focusedId"
+        :highlighted-ids="highlightedIds"
+        @click-node="onClickNode"
+        @dblclick-node="onDblclickNode"
+        @toggle-node="onToggleNode"
+        @drag-node="onDragNode"
+        @external-drop="onExternalDrop"
+        @context-menu="onContextMenu"
+        @update-label="onUpdateLabel"
+        @cancel-edit="onCancelEdit"
+        @update:selected-ids="selectedIds = $event"
+        @update:editable-id="editableId = $event"
+        @update:focused-id="focusedId = $event"
+        @update:highlighted-ids="highlightedIds = $event"
+      >
+        <template #icon="{ node }">
+          <div class="mr-1.5 flex flex-shrink-0 items-center">
+            <UiFolderIcon
+              v-if="getFolderByIdFromTree(folders, Number(node.id))?.icon"
+              :name="getFolderByIdFromTree(folders, Number(node.id))!.icon!"
+            />
+            <Folder
+              v-else
+              class="h-4 w-4"
+            />
           </div>
-        </ContextMenu.ContextMenuTrigger>
-        <ContextMenu.ContextMenuContent>
-          <template v-if="isContextMultiSelection">
-            <ContextMenu.ContextMenuItem @click="onDeleteFolder">
-              {{ i18n.t("action.delete.common") }}
-            </ContextMenu.ContextMenuItem>
-          </template>
-          <template v-else>
-            <ContextMenu.ContextMenuItem
-              @click="createFolderAndSelect(contextNode?.id)"
-            >
-              {{ i18n.t("action.new.folder") }}
-            </ContextMenu.ContextMenuItem>
-            <ContextMenu.ContextMenuSeparator />
-            <ContextMenu.ContextMenuItem @click="onRenameFolder">
-              {{ i18n.t("action.rename") }}
-            </ContextMenu.ContextMenuItem>
-            <ContextMenu.ContextMenuItem @click="onDeleteFolder">
-              {{ i18n.t("action.delete.common") }}
-            </ContextMenu.ContextMenuItem>
-            <ContextMenu.ContextMenuSeparator />
-            <ContextMenu.ContextMenuItem @click="onSetCustomIcon">
-              {{ i18n.t("action.setCustomIcon") }}
-            </ContextMenu.ContextMenuItem>
-            <ContextMenu.ContextMenuItem
-              v-if="contextNode?.icon"
-              @click="onRemoveCustomIcon"
-            >
-              {{ i18n.t("action.removeCustomIcon") }}
-            </ContextMenu.ContextMenuItem>
-            <ContextMenu.ContextMenuSeparator />
-            <ContextMenu.ContextMenuSub>
-              <ContextMenu.ContextMenuSubTrigger>
-                {{ i18n.t("action.defaultLanguage") }}
-              </ContextMenu.ContextMenuSubTrigger>
-              <ContextMenu.ContextMenuSubContent>
-                <div class="scrollbar max-h-[250px] min-h-0 overflow-y-auto">
-                  <ContextMenu.ContextMenuCheckboxItem
-                    v-for="language in languages"
-                    :key="language.value"
-                    :ref="
-                      (el) =>
-                        scrollToSelectedLanguage(
-                          el,
-                          contextNodeDefaultLanguage === language.value,
-                        )
-                    "
-                    :checked="contextNodeDefaultLanguage === language.value"
-                    @click="onSelectLanguage(language.value)"
-                  >
-                    {{ language.name }}
-                  </ContextMenu.ContextMenuCheckboxItem>
-                </div>
-              </ContextMenu.ContextMenuSubContent>
-            </ContextMenu.ContextMenuSub>
-          </template>
-        </ContextMenu.ContextMenuContent>
-      </ContextMenu.ContextMenu>
-    </div>
-  </div>
+        </template>
+      </UiTree>
+    </ContextMenu.ContextMenuTrigger>
+    <ContextMenu.ContextMenuContent>
+      <template v-if="isContextMultiSelection">
+        <ContextMenu.ContextMenuItem @click="onDeleteFolder">
+          {{ i18n.t("action.delete.common") }}
+        </ContextMenu.ContextMenuItem>
+      </template>
+      <template v-else>
+        <ContextMenu.ContextMenuItem
+          @click="createFolderAndSelect(contextNode?.id)"
+        >
+          {{ i18n.t("action.new.folder") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuItem @click="onRenameFolder">
+          {{ i18n.t("action.rename") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuItem @click="onDeleteFolder">
+          {{ i18n.t("action.delete.common") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuItem @click="onSetCustomIcon">
+          {{ i18n.t("action.setCustomIcon") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuItem
+          v-if="contextNode?.icon"
+          @click="onRemoveCustomIcon"
+        >
+          {{ i18n.t("action.removeCustomIcon") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuSub>
+          <ContextMenu.ContextMenuSubTrigger>
+            {{ i18n.t("action.defaultLanguage") }}
+          </ContextMenu.ContextMenuSubTrigger>
+          <ContextMenu.ContextMenuSubContent>
+            <div class="scrollbar max-h-[250px] min-h-0 overflow-y-auto">
+              <ContextMenu.ContextMenuCheckboxItem
+                v-for="language in languages"
+                :key="language.value"
+                :ref="
+                  (el) =>
+                    scrollToSelectedLanguage(
+                      el,
+                      contextNodeDefaultLanguage === language.value,
+                    )
+                "
+                :checked="contextNodeDefaultLanguage === language.value"
+                @click="onSelectLanguage(language.value)"
+              >
+                {{ language.name }}
+              </ContextMenu.ContextMenuCheckboxItem>
+            </div>
+          </ContextMenu.ContextMenuSubContent>
+        </ContextMenu.ContextMenuSub>
+      </template>
+    </ContextMenu.ContextMenuContent>
+  </ContextMenu.ContextMenu>
 </template>
diff --git a/src/renderer/components/sidebar/folders/TreeNode.vue b/src/renderer/components/sidebar/folders/TreeNode.vue
deleted file mode 100644
index 220b3210..00000000
--- a/src/renderer/components/sidebar/folders/TreeNode.vue
+++ /dev/null
@@ -1,537 +0,0 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import type { Node, Position } from './types'
-import { useApp, useFolders, useSnippets } from '@/composables'
-import { onClickOutside } from '@vueuse/core'
-import { ChevronRight, Folder } from 'lucide-vue-next'
-import { isAllowed, store } from './composables'
-import { treeKeys } from './keys'
-
-interface Props {
-  index: number
-  deep?: number
-  node: Node
-  nodes: Node[]
-  indent?: number
-  hoveredNodeId?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  index: 0,
-  deep: 0,
-  indent: 10,
-})
-
-const {
-  clickNode,
-  dragNode,
-  toggleNode,
-  isHoveredByIdDisabled,
-  focusHandler,
-  contextMenu,
-} = inject(treeKeys)!
-
-const {
-  highlightedFolderIds,
-  highlightedSnippetIds,
-  highlightedTagId,
-  state,
-  focusedFolderId,
-} = useApp()
-const { displayedSnippets, updateSnippets, selectFirstSnippet } = useSnippets()
-const {
-  updateFolder,
-  renameFolderId,
-  selectedFolderIds,
-  folders,
-  getFolderByIdFromTree,
-} = useFolders()
-
-const hoveredId = ref()
-const overPosition = ref<Position>()
-const isDragged = ref(false)
-
-const rowRef = ref<HTMLElement>()
-
-const name = ref(props.node.name)
-
-const hasChildren = computed(
-  () => props.node.children && props.node.children.length > 0,
-)
-
-const isFirst = computed(() => props.index === 0)
-
-const isDraggingSnippet = ref(false)
-
-const isHovered = computed(() => {
-  return props.node.id === hoveredId.value && overPosition.value === 'center'
-})
-
-const isSelected = computed(() => state.folderId === props.node.id)
-const isMultiSelected = computed(
-  () =>
-    selectedFolderIds.value.length > 1
-    && selectedFolderIds.value.includes(props.node.id),
-)
-
-const isHighlighted = computed(() =>
-  highlightedFolderIds.value.has(props.node.id),
-)
-const isFocused = computed(() => focusedFolderId.value === props.node.id)
-
-const isShowBetweenLine = computed(() => {
-  if (!isAllowed.value)
-    return false
-  return overPosition.value === 'before' || overPosition.value === 'after'
-})
-
-const indentStyle = computed(() => {
-  return `${props.indent}px`
-})
-
-const hoveredOffsetStyle = computed(() => {
-  return `${-(props.deep * props.indent)}px`
-})
-
-const betweenLineStyle = computed(() => {
-  const style: CSSProperties = {
-    position: 'absolute',
-    width: `calc(100% - ${props.deep} * ${indentStyle.value})`,
-  }
-
-  if (overPosition.value === 'before') {
-    style.top = '-4px'
-  }
-
-  if (overPosition.value === 'after') {
-    style.bottom = '-4px'
-  }
-
-  return style
-})
-
-function getNodeById(id: number) {
-  return getFolderByIdFromTree(folders.value, id) as Node | undefined
-}
-
-function hasSelectedAncestor(node: Node, selection: Set<number>) {
-  let parentId = node.parentId
-
-  while (parentId) {
-    if (selection.has(parentId)) {
-      return true
-    }
-
-    parentId = getNodeById(parentId)?.parentId || null
-  }
-
-  return false
-}
-
-function getDraggedNodes() {
-  const selection = selectedFolderIds.value.includes(Number(props.node.id))
-    ? selectedFolderIds.value
-    : [Number(props.node.id)]
-
-  const selectionSet = new Set(selection)
-
-  return selection
-    .map(id => getNodeById(Number(id)))
-    .filter((node): node is Node => Boolean(node))
-    .filter(node => !hasSelectedAncestor(node, selectionSet))
-}
-
-function onClickArrow(node: Node) {
-  toggleNode(node)
-}
-
-function onClickNode(id: string | number, event?: MouseEvent) {
-  highlightedFolderIds.value.clear()
-  highlightedTagId.value = undefined
-  state.tagId = undefined
-  focusedFolderId.value = Number(id)
-  clickNode(Number(id), event)
-}
-
-function onClickContextMenu() {
-  highlightedFolderIds.value.clear()
-  highlightedFolderIds.value.add(Number(props.node.id))
-
-  if (
-    selectedFolderIds.value.length > 1
-    && selectedFolderIds.value.includes(Number(props.node.id))
-  ) {
-    selectedFolderIds.value.forEach(folderId =>
-      highlightedFolderIds.value.add(Number(folderId)),
-    )
-  }
-
-  highlightedSnippetIds.value.clear()
-  contextMenu(props.node)
-}
-
-function onDragStart(e: DragEvent) {
-  let draggedNodes = getDraggedNodes()
-
-  if (!draggedNodes.length) {
-    draggedNodes = [props.node]
-  }
-
-  const isMultiFolderDrag
-    = selectedFolderIds.value.length > 1
-      && selectedFolderIds.value.includes(Number(props.node.id))
-  const ghostCount = isMultiFolderDrag
-    ? selectedFolderIds.value.length
-    : draggedNodes.length
-
-  store.dragNodes = draggedNodes
-  store.dragNode = draggedNodes[0] || props.node
-  isHoveredByIdDisabled.value = true
-  isDragged.value = true
-
-  const el = document.createElement('div')
-  el.className
-    = 'fixed left-[-100%] text-foreground truncate max-w-[200px] flex items-center'
-
-  el.id = 'ghost'
-  el.innerHTML
-    = ghostCount > 1
-      ? `
-        <span class="rounded-full bg-primary text-white px-2 py-0.5 text-xs ml-3">
-          ${ghostCount}
-        </span>
-      `
-      : props.node.name
-
-  document.body.appendChild(el)
-
-  e.dataTransfer!.setDragImage(el, 0, 0)
-  setTimeout(() => el.remove(), 0)
-
-  e.dataTransfer!.setData(
-    'folderIds',
-    JSON.stringify(draggedNodes.map(node => node.id)),
-  )
-}
-
-function onDragEnd() {
-  store.dragNode = undefined
-  store.dragNodes = undefined
-  store.dragEnterNode = undefined
-  overPosition.value = undefined
-  isDragged.value = false
-  isHoveredByIdDisabled.value = false
-}
-
-function onDragEnter() {
-  hoveredId.value = props.node.id
-  store.dragEnterNode = props.node
-}
-
-function onDragOver(e: DragEvent) {
-  hoveredId.value = props.node.id
-
-  if (e.dataTransfer?.types.includes('snippetids')) {
-    isDraggingSnippet.value = true
-    overPosition.value = 'center'
-    return
-  }
-
-  isDraggingSnippet.value = false
-
-  const isDraggingNode
-    = store.dragNodes?.some(node => node.id === props.node.id)
-      || store.dragNode?.id === props.node.id
-
-  if (isDraggingNode)
-    return
-
-  const height = rowRef.value!.offsetHeight
-  const before = height * 0.3
-  const after = height - before
-
-  if (e.offsetY < before && isFirst.value) {
-    overPosition.value = 'before'
-  }
-  else if (e.offsetY > after) {
-    overPosition.value = 'after'
-  }
-  else {
-    overPosition.value = 'center'
-  }
-}
-
-function onDragLeave() {
-  hoveredId.value = undefined
-  overPosition.value = undefined
-  isDraggingSnippet.value = false
-}
-
-async function onDrop(e: DragEvent) {
-  const snippetIds = JSON.parse(e.dataTransfer?.getData('snippetIds') || '[]')
-  const snippets = displayedSnippets.value?.filter(s =>
-    snippetIds.includes(s.id),
-  )
-
-  if (snippets && snippets.length > 0) {
-    // Если все сниппеты уже в папке и не удалены
-    if (snippets.every(s => s.folder?.id === props.node.id && !s.isDeleted)) {
-      hoveredId.value = undefined
-      overPosition.value = undefined
-      isDraggingSnippet.value = false
-      return
-    }
-
-    const ids = snippets.map(s => s.id)
-    const data = snippets.map(() => ({
-      folderId: props.node.id,
-      // Если сниппет был удален, восстанавливаем его
-      isDeleted: 0,
-    }))
-
-    await updateSnippets(ids, data)
-
-    if (state.snippetId && ids.includes(state.snippetId)) {
-      selectFirstSnippet()
-    }
-
-    hoveredId.value = undefined
-    overPosition.value = undefined
-    isDraggingSnippet.value = false
-    return
-  }
-
-  if (!store.dragNode || !isAllowed.value)
-    return
-
-  const draggedNodes = store.dragNodes?.length
-    ? store.dragNodes
-    : store.dragNode
-      ? [store.dragNode]
-      : []
-
-  if (overPosition.value && draggedNodes.length) {
-    dragNode(draggedNodes, props.node, overPosition.value)
-  }
-
-  overPosition.value = undefined
-}
-
-onClickOutside(rowRef, () => {
-  focusedFolderId.value = undefined
-  highlightedFolderIds.value.clear()
-})
-
-function onUpdateName() {
-  const trimmedName = name.value.trim()
-
-  if (trimmedName === '' || name.value === props.node.name) {
-    name.value = props.node.name
-    renameFolderId.value = null
-    return
-  }
-
-  updateFolder(props.node.id, { name: name.value })
-
-  renameFolderId.value = null
-}
-
-function onCancelUpdateName() {
-  name.value = props.node.name
-  renameFolderId.value = null
-}
-
-if (focusHandler)
-  focusHandler(isFocused)
-</script>
-
-<template>
-  <div
-    data-folder-tree-node
-    class="node user-select-none relative"
-    :class="{
-      'has-children': hasChildren,
-      'is-dragged': isDragged,
-    }"
-    draggable="true"
-    @dragstart.stop="onDragStart"
-    @dragleave.stop="onDragLeave"
-    @dragend.stop="onDragEnd"
-    @drop.stop="onDrop"
-    @dragover.prevent
-  >
-    <div
-      :id="String(node.id)"
-      ref="rowRef"
-      class="node__row user-select-none relative flex py-px"
-      :class="{
-        'is-hovered':
-          (isHovered && isAllowed)
-          || (isHovered && isDraggingSnippet)
-          || hoveredNodeId === String(node.id),
-        'is-selected': isSelected,
-        'is-multi-selected': isMultiSelected,
-        'is-focused': isFocused,
-        'is-highlighted': isHighlighted,
-      }"
-      @dragenter.stop="onDragEnter"
-      @dragover="onDragOver"
-      @click="(event) => onClickNode(node.id, event)"
-      @contextmenu="onClickContextMenu"
-    >
-      <span class="node__name relative z-10 flex w-full items-center">
-        <div
-          v-if="node.children && node.children.length"
-          class="mx-1 flex h-4 w-4 flex-shrink-0 items-center justify-center"
-          @click.stop="onClickArrow(node)"
-        >
-          <ChevronRight
-            class="node__arrow h-3 w-3"
-            :class="{ 'rotate-90': node.isOpen }"
-          />
-        </div>
-        <span
-          v-else
-          class="w-6 flex-shrink-0"
-        />
-        <slot
-          :node="node"
-          :deep="deep"
-        >
-          <div class="mr-1.5 flex flex-shrink-0 items-center">
-            <UiFolderIcon
-              v-if="node.icon"
-              :name="node.icon"
-            />
-            <Folder
-              v-else
-              class="h-4 w-4"
-            />
-          </div>
-          <span
-            v-if="renameFolderId !== node.id"
-            class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-            @dblclick="renameFolderId = node.id"
-          >
-            {{ name }}
-          </span>
-          <UiInput
-            v-else
-            v-model="name"
-            variant="ghost"
-            focus
-            select
-            class="w-full rounded-none px-0 py-0 leading-0"
-            @keydown.esc="onCancelUpdateName"
-            @keydown.enter="onUpdateName"
-            @blur="onUpdateName"
-            @click.stop
-          />
-        </slot>
-      </span>
-    </div>
-    <template v-if="node.children">
-      <TreeNode
-        v-for="(children, idx) in node.children"
-        v-show="node.isOpen"
-        :key="children.id"
-        class="children pl-2"
-        :index="idx"
-        :deep="deep + 1"
-        :node="children"
-        :nodes="node.children"
-        :hovered-node-id="hoveredNodeId"
-      >
-        <template #default="scoped: any">
-          <slot
-            :node="scoped.node"
-            :deep="scoped.deep"
-            :hovered-node-id="hoveredNodeId"
-          />
-        </template>
-      </TreeNode>
-    </template>
-    <svg
-      v-if="isShowBetweenLine"
-      class="pointer-events-none z-20"
-      height="10"
-      :style="betweenLineStyle"
-    >
-      <circle
-        cx="5"
-        cy="5"
-        r="3"
-        stroke="var(--primary)"
-        fill="none"
-        stroke-width="2"
-      />
-      <line
-        x1="100%"
-        x2="8"
-        y1="5"
-        y2="5"
-        stroke="var(--primary)"
-        stroke-width="2"
-      />
-    </svg>
-  </div>
-</template>
-
-<style lang="scss">
-@reference "../../../styles.css";
-.node {
-  $r: &;
-  &__row {
-    &.is-hovered,
-    &.is-selected,
-    &.is-focused,
-    &.is-highlighted,
-    &.is-multi-selected {
-      @apply text-accent-foreground;
-      &::before {
-        content: "";
-        left: v-bind(hoveredOffsetStyle);
-        @apply absolute top-0 right-0 bottom-0 z-0 rounded-md;
-      }
-    }
-    &:hover:not(.is-selected):not(.is-focused):not(.is-multi-selected) {
-      @apply text-accent-foreground;
-      &::before {
-        content: "";
-        left: v-bind(hoveredOffsetStyle);
-        @apply bg-accent-hover absolute top-0 right-0 bottom-0 z-0 rounded-md;
-      }
-    }
-    &.is-hovered {
-      &::before {
-        @apply bg-accent-hover;
-      }
-    }
-    &.is-selected {
-      &::before {
-        @apply bg-accent;
-      }
-    }
-    &.is-multi-selected {
-      &::before {
-        @apply bg-accent/80;
-      }
-    }
-    &.is-focused {
-      @apply text-primary-foreground;
-      &::before {
-        @apply bg-primary;
-      }
-    }
-    &.is-highlighted {
-      @apply text-accent-foreground;
-      &::before {
-        @apply border-primary border-2 bg-transparent;
-      }
-    }
-  }
-  .children {
-    padding-left: v-bind(indentStyle);
-  }
-}
-</style>
diff --git a/src/renderer/components/sidebar/folders/composables/index.ts b/src/renderer/components/sidebar/folders/composables/index.ts
deleted file mode 100644
index 91e597b0..00000000
--- a/src/renderer/components/sidebar/folders/composables/index.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Node, Store } from '../types'
-import { computed, reactive } from 'vue'
-
-export const store = reactive<Store>({})
-
-const draggedNodes = computed<Node[]>(() => {
-  if (store.dragNodes?.length) {
-    return store.dragNodes
-  }
-
-  return store.dragNode ? [store.dragNode] : []
-})
-
-export const dragNodeIds = computed<(string | number)[]>(() =>
-  draggedNodes.value.map(node => node.id),
-)
-
-export const dragNodeChildrenIds = computed(() => {
-  const ids: (string | number)[] = []
-
-  const findIds = (nodes: Node[]) => {
-    nodes.forEach((node) => {
-      ids.push(node.id)
-
-      if (node.children?.length) {
-        findIds(node.children)
-      }
-    })
-  }
-
-  draggedNodes.value.forEach(node => findIds(node.children || []))
-
-  return ids
-})
-
-export const isAllowed = computed(() => {
-  if (!draggedNodes.value.length || !store.dragEnterNode)
-    return false
-
-  const isSameNode = dragNodeIds.value.includes(store.dragEnterNode.id)
-  const isChildrenNode = dragNodeChildrenIds.value.includes(
-    store.dragEnterNode!.id,
-  )
-
-  return !isSameNode && !isChildrenNode
-})
-
-export function useFolders() {
-  return {
-    dragNodeIds,
-    dragNodeChildrenIds,
-    isAllowed,
-    store,
-  }
-}
diff --git a/src/renderer/components/sidebar/folders/keys.ts b/src/renderer/components/sidebar/folders/keys.ts
deleted file mode 100644
index 276168c1..00000000
--- a/src/renderer/components/sidebar/folders/keys.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-import type { Node, Position } from './types'
-
-export interface TreeInjection {
-  clickNode: (id: number, event?: MouseEvent) => void
-  dragNode: (nodes: Node[], target: Node, position: Position) => void
-  focusHandler?: (isFocused: Ref<boolean>) => void
-  isHoveredByIdDisabled: Ref<boolean>
-  toggleNode: (node: Node) => void
-  contextMenu: (node: Node) => void
-}
-
-export const treeKeys: InjectionKey<TreeInjection> = Symbol('tree')
diff --git a/src/renderer/components/ui/tree/Tree.vue b/src/renderer/components/ui/tree/Tree.vue
new file mode 100644
index 00000000..4f3022ec
--- /dev/null
+++ b/src/renderer/components/ui/tree/Tree.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { DropPosition, TreeNode } from './types'
+import { treeInjectionKey } from './keys'
+import TreeNodeComponent from './TreeNode.vue'
+
+interface Props {
+  modelValue: TreeNode[]
+  selectedIds?: (string | number)[]
+  editableId?: string | number | null
+  focusedId?: string | number | undefined
+  highlightedIds?: Set<string | number>
+  indent?: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: TreeNode[]): void
+  (e: 'update:selectedIds', value: (string | number)[]): void
+  (e: 'update:editableId', value: string | number | null): void
+  (e: 'update:focusedId', value: string | number | undefined): void
+  (e: 'update:highlightedIds', value: Set<string | number>): void
+  (e: 'clickNode', value: { node: TreeNode, event?: MouseEvent }): void
+  (e: 'dblclickNode', value: TreeNode): void
+  (e: 'toggleNode', value: TreeNode): void
+  (
+    e: 'dragNode',
+    value: { nodes: TreeNode[], target: TreeNode, position: DropPosition },
+  ): void
+  (
+    e: 'externalDrop',
+    value: { data: DataTransfer, target: TreeNode, position: DropPosition },
+  ): void
+  (e: 'updateLabel', value: { node: TreeNode, value: string }): void
+  (e: 'cancelEdit', value: TreeNode): void
+  (
+    e: 'contextMenu',
+    value: { node: TreeNode, selectedNodes: TreeNode[] },
+  ): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedIds: () => [],
+  editableId: null,
+  focusedId: undefined,
+  highlightedIds: () => new Set(),
+  indent: 10,
+})
+
+const emit = defineEmits<Emits>()
+
+const hoveredNodeId = ref('')
+const isHoveredByIdDisabled = ref(false)
+
+const internalEditableId = computed({
+  get: () => props.editableId,
+  set: val => emit('update:editableId', val),
+})
+
+const internalSelectedIds = computed({
+  get: () => props.selectedIds,
+  set: val => emit('update:selectedIds', val),
+})
+
+const internalFocusedId = computed({
+  get: () => props.focusedId,
+  set: val => emit('update:focusedId', val),
+})
+
+const internalHighlightedIds = computed({
+  get: () => props.highlightedIds,
+  set: val => emit('update:highlightedIds', val),
+})
+
+function findNodeById(id: string | number): TreeNode | undefined {
+  const walk = (nodes: TreeNode[]): TreeNode | undefined => {
+    for (const node of nodes) {
+      if (node.id === id)
+        return node
+      if (node.children?.length) {
+        const found = walk(node.children)
+        if (found)
+          return found
+      }
+    }
+  }
+  return walk(props.modelValue)
+}
+
+function clickNode(id: string | number, event?: MouseEvent) {
+  const node = findNodeById(id)
+  if (!node)
+    return
+
+  emit('clickNode', { node, event })
+}
+
+function dblclickNode(node: TreeNode) {
+  emit('dblclickNode', node)
+}
+
+function dragNodeHandler(
+  nodes: TreeNode[],
+  target: TreeNode,
+  position: DropPosition,
+) {
+  emit('dragNode', { nodes, target, position })
+}
+
+function externalDropHandler(
+  data: DataTransfer,
+  target: TreeNode,
+  position: DropPosition,
+) {
+  emit('externalDrop', { data, target, position })
+}
+
+function toggleNode(node: TreeNode) {
+  emit('toggleNode', node)
+}
+
+function contextMenu(node: TreeNode) {
+  const selectedNodes = internalSelectedIds.value
+    .map(id => findNodeById(id))
+    .filter((n): n is TreeNode => Boolean(n))
+
+  emit('contextMenu', { node, selectedNodes })
+}
+
+function updateLabelHandler(node: TreeNode, value: string) {
+  emit('updateLabel', { node, value })
+}
+
+function cancelEditHandler(node: TreeNode) {
+  emit('cancelEdit', node)
+}
+
+provide(treeInjectionKey, {
+  clickNode,
+  dblclickNode,
+  dragNode: dragNodeHandler,
+  externalDrop: externalDropHandler,
+  toggleNode,
+  contextMenu,
+  updateLabel: updateLabelHandler,
+  cancelEdit: cancelEditHandler,
+  isHoveredByIdDisabled,
+  editableId: internalEditableId,
+  selectedIds: internalSelectedIds,
+  focusedId: internalFocusedId,
+  highlightedIds: internalHighlightedIds,
+})
+</script>
+
+<template>
+  <div
+    v-if="modelValue.length"
+    class="h-full min-h-0"
+  >
+    <div class="scrollbar h-full min-h-0 overflow-x-hidden overflow-y-auto">
+      <div data-tree>
+        <TreeNodeComponent
+          v-for="(node, index) in modelValue"
+          :key="node.id"
+          :node="node"
+          :nodes="modelValue"
+          :index="index"
+          :indent="indent"
+          :hovered-node-id="hoveredNodeId"
+        >
+          <template
+            v-if="$slots.icon"
+            #icon="iconProps"
+          >
+            <slot
+              name="icon"
+              v-bind="iconProps"
+            />
+          </template>
+        </TreeNodeComponent>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/ui/tree/TreeNode.vue b/src/renderer/components/ui/tree/TreeNode.vue
new file mode 100644
index 00000000..8c78ea40
--- /dev/null
+++ b/src/renderer/components/ui/tree/TreeNode.vue
@@ -0,0 +1,562 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { DropPosition, TreeNode } from './types'
+import { onClickOutside } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  dragNodeChildrenIds,
+  dragNodeIds,
+  dragStore,
+  isDragAllowed,
+  TREE_DND_TYPE,
+} from './composables'
+import { treeInjectionKey } from './keys'
+
+interface Props {
+  index: number
+  deep?: number
+  node: TreeNode
+  nodes: TreeNode[]
+  indent?: number
+  hoveredNodeId?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  index: 0,
+  deep: 0,
+  indent: 10,
+})
+
+const {
+  clickNode,
+  dblclickNode,
+  dragNode,
+  externalDrop,
+  toggleNode,
+  isHoveredByIdDisabled,
+  contextMenu,
+  updateLabel,
+  cancelEdit,
+  editableId,
+  selectedIds,
+  focusedId,
+  highlightedIds,
+} = inject(treeInjectionKey)!
+
+const hoveredId = ref<string | number>()
+const overPosition = ref<DropPosition>()
+const isDragged = ref(false)
+const isDraggingExternal = ref(false)
+const rowRef = ref<HTMLElement>()
+const editInputRef = ref<HTMLInputElement>()
+const editValue = ref(props.node.label)
+
+const hasChildren = computed(
+  () => props.node.children && props.node.children.length > 0,
+)
+
+const isFirst = computed(() => props.index === 0)
+
+const isHovered = computed(() => {
+  return props.node.id === hoveredId.value && overPosition.value === 'center'
+})
+
+const isSelected = computed(() => {
+  return (
+    selectedIds.value.length <= 1 && selectedIds.value.includes(props.node.id)
+  )
+})
+
+const isMultiSelected = computed(() => {
+  return (
+    selectedIds.value.length > 1 && selectedIds.value.includes(props.node.id)
+  )
+})
+
+const isFocused = computed(() => focusedId.value === props.node.id)
+
+const isHighlighted = computed(() => highlightedIds.value.has(props.node.id))
+
+const isEditing = computed(() => editableId.value === props.node.id)
+
+const isDragActive = computed(() => Boolean(dragStore.dragNode))
+
+const isShowBetweenLine = computed(() => {
+  if (!isDragAllowed.value)
+    return false
+  return overPosition.value === 'before' || overPosition.value === 'after'
+})
+
+const indentStyle = computed(() => `${props.indent}px`)
+
+const hoveredOffsetStyle = computed(() => {
+  return `${-(props.deep * props.indent)}px`
+})
+
+const betweenLineStyle = computed(() => {
+  const style: CSSProperties = {
+    position: 'absolute',
+    width: `calc(100% - ${props.deep} * ${indentStyle.value})`,
+  }
+
+  if (overPosition.value === 'before') {
+    style.top = '-4px'
+  }
+
+  if (overPosition.value === 'after') {
+    style.bottom = '-4px'
+  }
+
+  return style
+})
+
+watch(
+  () => props.node.label,
+  (newLabel) => {
+    editValue.value = newLabel
+  },
+)
+
+watch(isEditing, (editing) => {
+  if (editing) {
+    nextTick(() => {
+      editInputRef.value?.focus()
+      editInputRef.value?.select()
+    })
+  }
+})
+
+onClickOutside(rowRef, () => {
+  if (focusedId.value === props.node.id) {
+    focusedId.value = undefined
+  }
+  highlightedIds.value.delete(props.node.id)
+})
+
+function onClickArrow(node: TreeNode) {
+  toggleNode(node)
+}
+
+function onClickNode(id: string | number, event?: MouseEvent) {
+  focusedId.value = id
+  clickNode(id, event)
+}
+
+function onDblclickLabel() {
+  dblclickNode(props.node)
+}
+
+function onContextMenu() {
+  highlightedIds.value.clear()
+  highlightedIds.value.add(props.node.id)
+
+  if (
+    selectedIds.value.length > 1
+    && selectedIds.value.includes(props.node.id)
+  ) {
+    selectedIds.value.forEach(id => highlightedIds.value.add(id))
+  }
+
+  contextMenu(props.node)
+}
+
+// --- Drag and Drop ---
+
+function findNodeById(
+  nodes: TreeNode[],
+  id: string | number,
+): TreeNode | undefined {
+  for (const node of nodes) {
+    if (node.id === id)
+      return node
+    if (node.children?.length) {
+      const found = findNodeById(node.children, id)
+      if (found)
+        return found
+    }
+  }
+}
+
+function hasSelectedAncestor(
+  nodeId: string | number,
+  selection: Set<string | number>,
+  rootNodes: TreeNode[],
+): boolean {
+  const findParentId = (
+    nodes: TreeNode[],
+    targetId: string | number,
+    parentId?: string | number,
+  ): string | number | undefined => {
+    for (const node of nodes) {
+      if (node.id === targetId)
+        return parentId
+      if (node.children?.length) {
+        const found = findParentId(node.children, targetId, node.id)
+        if (found !== undefined)
+          return found
+      }
+    }
+  }
+
+  let currentParentId = findParentId(rootNodes, nodeId)
+
+  while (currentParentId !== undefined) {
+    if (selection.has(currentParentId))
+      return true
+    currentParentId = findParentId(rootNodes, currentParentId)
+  }
+
+  return false
+}
+
+function getDraggedNodes(rootNodes: TreeNode[]) {
+  const selection = selectedIds.value.includes(props.node.id)
+    ? selectedIds.value
+    : [props.node.id]
+
+  const selectionSet = new Set(selection)
+
+  return selection
+    .map(id => findNodeById(rootNodes, id))
+    .filter((node): node is TreeNode => Boolean(node))
+    .filter(node => !hasSelectedAncestor(node.id, selectionSet, rootNodes))
+}
+
+function onDragStart(e: DragEvent) {
+  let draggedNodes = getDraggedNodes(props.nodes)
+
+  if (!draggedNodes.length) {
+    draggedNodes = [props.node]
+  }
+
+  const isMultiDrag
+    = selectedIds.value.length > 1 && selectedIds.value.includes(props.node.id)
+  const ghostCount = isMultiDrag
+    ? selectedIds.value.length
+    : draggedNodes.length
+
+  dragStore.dragNodes = draggedNodes
+  dragStore.dragNode = draggedNodes[0] || props.node
+  isHoveredByIdDisabled.value = true
+  isDragged.value = true
+
+  const el = document.createElement('div')
+  el.className
+    = 'fixed left-[-100%] text-foreground truncate max-w-[200px] flex items-center'
+  el.id = 'ghost'
+  el.innerHTML
+    = ghostCount > 1
+      ? `<span class="rounded-full bg-primary text-white px-2 py-0.5 text-xs ml-3">${ghostCount}</span>`
+      : props.node.label
+
+  document.body.appendChild(el)
+  e.dataTransfer!.setDragImage(el, 0, 0)
+  setTimeout(() => el.remove(), 0)
+
+  e.dataTransfer!.setData(
+    TREE_DND_TYPE,
+    JSON.stringify(draggedNodes.map(node => node.id)),
+  )
+}
+
+function onDragEnd() {
+  dragStore.dragNode = undefined
+  dragStore.dragNodes = undefined
+  dragStore.dragEnterNode = undefined
+  overPosition.value = undefined
+  isDragged.value = false
+  isHoveredByIdDisabled.value = false
+}
+
+function onDragEnter() {
+  hoveredId.value = props.node.id
+  dragStore.dragEnterNode = props.node
+}
+
+function onDragOver(e: DragEvent) {
+  hoveredId.value = props.node.id
+
+  if (!e.dataTransfer?.types.includes(TREE_DND_TYPE)) {
+    isDraggingExternal.value = true
+    overPosition.value = 'center'
+    return
+  }
+
+  isDraggingExternal.value = false
+
+  const isInvalidTarget
+    = dragStore.dragNodes?.some(node => node.id === props.node.id)
+      || dragStore.dragNode?.id === props.node.id
+      || dragNodeIds.value.includes(props.node.id)
+      || dragNodeChildrenIds.value.includes(props.node.id)
+
+  if (isInvalidTarget) {
+    overPosition.value = undefined
+    return
+  }
+
+  const height = rowRef.value!.offsetHeight
+  const before = height * 0.3
+  const after = height - before
+
+  const isContainer = props.node.children !== undefined
+
+  if (isContainer) {
+    if (e.offsetY < before && isFirst.value) {
+      overPosition.value = 'before'
+    }
+    else if (e.offsetY > after) {
+      overPosition.value = 'after'
+    }
+    else {
+      overPosition.value = 'center'
+    }
+  }
+  else {
+    if (e.offsetY < height / 2) {
+      overPosition.value = isFirst.value ? 'before' : 'after'
+    }
+    else {
+      overPosition.value = 'after'
+    }
+  }
+}
+
+function onDragLeave() {
+  hoveredId.value = undefined
+  overPosition.value = undefined
+  isDraggingExternal.value = false
+}
+
+function onDrop(e: DragEvent) {
+  if (!e.dataTransfer?.types.includes(TREE_DND_TYPE)) {
+    if (e.dataTransfer) {
+      externalDrop(e.dataTransfer, props.node, overPosition.value || 'center')
+    }
+    hoveredId.value = undefined
+    overPosition.value = undefined
+    isDraggingExternal.value = false
+    return
+  }
+
+  if (!dragStore.dragNode || !isDragAllowed.value)
+    return
+
+  const draggedNodes = dragStore.dragNodes?.length
+    ? dragStore.dragNodes
+    : dragStore.dragNode
+      ? [dragStore.dragNode]
+      : []
+
+  if (overPosition.value && draggedNodes.length) {
+    dragNode(draggedNodes, props.node, overPosition.value)
+  }
+
+  overPosition.value = undefined
+}
+
+// --- Inline Edit ---
+
+function onUpdateLabel() {
+  const trimmed = editValue.value.trim()
+
+  if (trimmed === '' || editValue.value === props.node.label) {
+    editValue.value = props.node.label
+    cancelEdit(props.node)
+    return
+  }
+
+  updateLabel(props.node, editValue.value)
+}
+
+function onCancelEdit() {
+  editValue.value = props.node.label
+  cancelEdit(props.node)
+}
+</script>
+
+<template>
+  <div
+    data-tree-node
+    class="ui-tree-node user-select-none relative"
+    :class="{
+      'has-children': hasChildren,
+      'is-dragged': isDragged,
+    }"
+    draggable="true"
+    @dragstart.stop="onDragStart"
+    @dragleave.stop="onDragLeave"
+    @dragend.stop="onDragEnd"
+    @drop.stop="onDrop"
+    @dragover.prevent
+  >
+    <div
+      :id="String(node.id)"
+      ref="rowRef"
+      class="ui-tree-node__row user-select-none relative flex py-px"
+      :class="{
+        'is-hovered':
+          (isHovered && isDragAllowed)
+          || (isHovered && isDraggingExternal)
+          || hoveredNodeId === String(node.id),
+        'is-selected': isSelected && !isEditing,
+        'is-multi-selected': isMultiSelected && !isEditing,
+        'is-focused': isFocused && !isEditing,
+        'is-highlighted': isHighlighted && !isEditing,
+        'is-drag-active': isDragActive,
+        'is-editing': isEditing,
+      }"
+      @dragenter.stop="onDragEnter"
+      @dragover="onDragOver"
+      @click="(event) => onClickNode(node.id, event)"
+      @contextmenu="onContextMenu"
+    >
+      <span class="ui-tree-node__name relative z-10 flex w-full items-center">
+        <div
+          v-if="hasChildren"
+          class="mx-1 flex h-4 w-4 flex-shrink-0 items-center justify-center"
+          @click.stop="onClickArrow(node)"
+        >
+          <ChevronRight
+            class="ui-tree-node__arrow h-3 w-3"
+            :class="{ 'rotate-90': node.isExpanded }"
+          />
+        </div>
+        <span
+          v-else
+          class="w-6 flex-shrink-0"
+        />
+        <slot
+          name="icon"
+          :node="node"
+        />
+        <template v-if="!isEditing">
+          <span
+            class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+            @dblclick="onDblclickLabel"
+          >
+            {{ node.label }}
+          </span>
+        </template>
+        <input
+          v-else
+          ref="editInputRef"
+          v-model="editValue"
+          class="outline-primary min-w-0 flex-1 rounded-sm bg-transparent outline outline-1"
+          @keydown.esc="onCancelEdit"
+          @keydown.enter="onUpdateLabel"
+          @blur="onUpdateLabel"
+          @click.stop
+        >
+      </span>
+    </div>
+    <template v-if="node.children">
+      <TreeNode
+        v-for="(child, idx) in node.children"
+        v-show="node.isExpanded"
+        :key="child.id"
+        class="children pl-2"
+        :index="idx"
+        :deep="deep + 1"
+        :node="child"
+        :nodes="node.children"
+        :indent="indent"
+        :hovered-node-id="hoveredNodeId"
+      >
+        <template
+          v-if="$slots.icon"
+          #icon="iconProps"
+        >
+          <slot
+            name="icon"
+            v-bind="iconProps"
+          />
+        </template>
+      </TreeNode>
+    </template>
+    <svg
+      v-if="isShowBetweenLine"
+      class="pointer-events-none z-20"
+      height="10"
+      :style="betweenLineStyle"
+    >
+      <circle
+        cx="5"
+        cy="5"
+        r="3"
+        stroke="var(--primary)"
+        fill="none"
+        stroke-width="2"
+      />
+      <line
+        x1="100%"
+        x2="8"
+        y1="5"
+        y2="5"
+        stroke="var(--primary)"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</template>
+
+<style lang="scss">
+@reference "../../../styles.css";
+.ui-tree-node {
+  $r: &;
+  &__row {
+    &.is-hovered,
+    &.is-selected,
+    &.is-focused,
+    &.is-highlighted,
+    &.is-multi-selected {
+      @apply text-accent-foreground;
+      &::before {
+        content: "";
+        left: v-bind(hoveredOffsetStyle);
+        @apply absolute top-0 right-0 bottom-0 z-0 rounded-md;
+      }
+    }
+    &:hover:not(.is-selected):not(.is-focused):not(.is-multi-selected):not(
+        .is-drag-active
+      ):not(.is-editing) {
+      @apply text-accent-foreground;
+      &::before {
+        content: "";
+        left: v-bind(hoveredOffsetStyle);
+        @apply bg-accent-hover absolute top-0 right-0 bottom-0 z-0 rounded-md;
+      }
+    }
+    &.is-hovered {
+      &::before {
+        @apply bg-accent-hover;
+      }
+    }
+    &.is-selected {
+      &::before {
+        @apply bg-accent;
+      }
+    }
+    &.is-multi-selected {
+      &::before {
+        @apply bg-accent/80;
+      }
+    }
+    &.is-focused {
+      @apply text-primary-foreground;
+      &::before {
+        @apply bg-primary;
+      }
+    }
+    &.is-highlighted {
+      @apply text-accent-foreground;
+      &::before {
+        @apply border-primary border-2 bg-transparent;
+      }
+    }
+  }
+  .children {
+    padding-left: v-bind(indentStyle);
+  }
+}
+</style>
diff --git a/src/renderer/components/ui/tree/composables.ts b/src/renderer/components/ui/tree/composables.ts
new file mode 100644
index 00000000..a480e7db
--- /dev/null
+++ b/src/renderer/components/ui/tree/composables.ts
@@ -0,0 +1,66 @@
+import type { DragStore, TreeNode } from './types'
+import { computed, reactive } from 'vue'
+
+export const TREE_DND_TYPE = 'application/x-tree-node-ids'
+
+export const dragStore = reactive<DragStore>({})
+
+const draggedNodes = computed<TreeNode[]>(() => {
+  if (dragStore.dragNodes?.length) {
+    return dragStore.dragNodes
+  }
+
+  return dragStore.dragNode ? [dragStore.dragNode] : []
+})
+
+export const dragNodeIds = computed<(string | number)[]>(() =>
+  draggedNodes.value.map(node => node.id),
+)
+
+export const dragNodeChildrenIds = computed(() => {
+  const ids: (string | number)[] = []
+
+  const collectIds = (nodes: TreeNode[]) => {
+    nodes.forEach((node) => {
+      ids.push(node.id)
+      if (node.children?.length) {
+        collectIds(node.children)
+      }
+    })
+  }
+
+  draggedNodes.value.forEach(node => collectIds(node.children || []))
+
+  return ids
+})
+
+export const isDragAllowed = computed(() => {
+  if (!draggedNodes.value.length || !dragStore.dragEnterNode)
+    return false
+
+  const isSameNode = dragNodeIds.value.includes(dragStore.dragEnterNode.id)
+  const isChildrenNode = dragNodeChildrenIds.value.includes(
+    dragStore.dragEnterNode.id,
+  )
+
+  return !isSameNode && !isChildrenNode
+})
+
+export function flattenTree(nodes: TreeNode[] | undefined): TreeNode[] {
+  if (!nodes)
+    return []
+
+  const result: TreeNode[] = []
+
+  const walk = (items: TreeNode[]) => {
+    items.forEach((node) => {
+      result.push(node)
+      if (node.children?.length) {
+        walk(node.children)
+      }
+    })
+  }
+
+  walk(nodes)
+  return result
+}
diff --git a/src/renderer/components/ui/tree/index.ts b/src/renderer/components/ui/tree/index.ts
new file mode 100644
index 00000000..fd02bb75
--- /dev/null
+++ b/src/renderer/components/ui/tree/index.ts
@@ -0,0 +1,3 @@
+export { default as Tree } from './Tree.vue'
+export { default as TreeNode } from './TreeNode.vue'
+export type { DropPosition, TreeNode as TreeNodeData } from './types'
diff --git a/src/renderer/components/ui/tree/keys.ts b/src/renderer/components/ui/tree/keys.ts
new file mode 100644
index 00000000..48140c54
--- /dev/null
+++ b/src/renderer/components/ui/tree/keys.ts
@@ -0,0 +1,28 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { DropPosition, TreeNode } from './types'
+
+export interface TreeInjection {
+  clickNode: (id: string | number, event?: MouseEvent) => void
+  dblclickNode: (node: TreeNode) => void
+  dragNode: (
+    nodes: TreeNode[],
+    target: TreeNode,
+    position: DropPosition,
+  ) => void
+  externalDrop: (
+    data: DataTransfer,
+    target: TreeNode,
+    position: DropPosition,
+  ) => void
+  toggleNode: (node: TreeNode) => void
+  contextMenu: (node: TreeNode) => void
+  updateLabel: (node: TreeNode, value: string) => void
+  cancelEdit: (node: TreeNode) => void
+  isHoveredByIdDisabled: Ref<boolean>
+  editableId: Ref<string | number | null>
+  selectedIds: Ref<(string | number)[]>
+  focusedId: Ref<string | number | undefined>
+  highlightedIds: Ref<Set<string | number>>
+}
+
+export const treeInjectionKey: InjectionKey<TreeInjection> = Symbol('ui-tree')
diff --git a/src/renderer/components/ui/tree/types.ts b/src/renderer/components/ui/tree/types.ts
new file mode 100644
index 00000000..4ef1bbd2
--- /dev/null
+++ b/src/renderer/components/ui/tree/types.ts
@@ -0,0 +1,14 @@
+export interface TreeNode {
+  id: string | number
+  label: string
+  children?: TreeNode[]
+  isExpanded?: boolean
+}
+
+export type DropPosition = 'after' | 'before' | 'center'
+
+export interface DragStore {
+  dragNode?: TreeNode
+  dragNodes?: TreeNode[]
+  dragEnterNode?: TreeNode
+}