From f2458aef1dd7fa262b80c8bb126c044c0210917c Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 21 Nov 2025 16:43:31 +0300
Subject: [PATCH] feat(folders): add multi-selection

---
 src/renderer/components/editor/Tab.vue        |   4 +-
 .../components/sidebar/folders/Tree.vue       | 159 +++++++-----
 .../components/sidebar/folders/TreeNode.vue   | 134 ++++++++--
 .../sidebar/folders/composables/index.ts      |  27 +-
 .../components/sidebar/folders/keys.ts        |   6 +-
 .../components/sidebar/folders/types/index.ts |   1 +
 .../components/sidebar/library/Item.vue       |   5 +-
 .../components/sidebar/library/Library.vue    |  73 ++++--
 src/renderer/components/sidebar/tags/Tags.vue |  11 +-
 src/renderer/components/snippet/Item.vue      |   4 +-
 src/renderer/composables/useApp.ts            |   4 +-
 src/renderer/composables/useFolders.ts        | 232 ++++++++++++++++--
 src/renderer/composables/useSnippets.ts       |  23 +-
 src/renderer/ipc/listeners/system.ts          |   4 +-
 src/renderer/utils/index.ts                   |  27 ++
 15 files changed, 553 insertions(+), 161 deletions(-)

diff --git a/src/renderer/components/editor/Tab.vue b/src/renderer/components/editor/Tab.vue
index 1264849d..5d2a132c 100644
--- a/src/renderer/components/editor/Tab.vue
+++ b/src/renderer/components/editor/Tab.vue
@@ -14,7 +14,7 @@ const props = defineProps<Props>()
 const { selectedSnippetContent, selectedSnippet, deleteSnippetContent }
   = useSnippets()
 const { addToUpdateContentQueue } = useSnippetUpdate()
-const { highlightedSnippetIds, highlightedFolderId, state } = useApp()
+const { highlightedSnippetIds, highlightedFolderIds, state } = useApp()
 
 const tabRef = ref<HTMLDivElement>()
 const isEdit = ref(false)
@@ -38,7 +38,7 @@ const name = computed({
 
 function onClickContextMenu() {
   highlightedSnippetIds.value.clear()
-  highlightedFolderId.value = undefined
+  highlightedFolderIds.value.clear()
 }
 
 async function onDelete() {
diff --git a/src/renderer/components/sidebar/folders/Tree.vue b/src/renderer/components/sidebar/folders/Tree.vue
index 9f9ba8c6..2bf874f0 100644
--- a/src/renderer/components/sidebar/folders/Tree.vue
+++ b/src/renderer/components/sidebar/folders/Tree.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { PerfectScrollbarExpose } from 'vue3-perfect-scrollbar'
-import type { Node } from './types'
+import type { Node, Position } from './types'
 import { languages } from '@/components/editor/grammars/languages'
 import * as ContextMenu from '@/components/ui/shadcn/context-menu'
 import { useApp, useDialog, useFolders, useSnippets } from '@/composables'
@@ -20,8 +20,11 @@ interface Props {
 
 interface Emits {
   (e: 'update:modelValue', value: Node[]): void
-  (e: 'clickNode', value: number): void
-  (e: 'dragNode', value: { node: Node, target: Node, position: string }): void
+  (e: 'clickNode', value: { id: number, event?: MouseEvent }): void
+  (
+    e: 'dragNode',
+    value: { nodes: Node[], target: Node, position: Position },
+  ): void
   (e: 'toggleNode', value: Node): void
 }
 
@@ -39,6 +42,9 @@ const {
   updateFolder,
   getFolderByIdFromTree,
   getFolders,
+  selectedFolderIds,
+  clearFolderSelection,
+  selectFolder,
 } = useFolders()
 const { state } = useApp()
 const { clearSnippetsState } = useSnippets()
@@ -49,13 +55,22 @@ const scrollRef = useTemplateRef<PerfectScrollbarExpose>('scrollRef')
 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)
+})
 
-function clickNode(id: number) {
-  return emit('clickNode', id)
+function clickNode(id: number, event?: MouseEvent) {
+  return emit('clickNode', { id, event })
 }
 
-function dragNode(node: Node, target: Node, position: string) {
-  return emit('dragNode', { node, target, position })
+function dragNode(nodes: Node[], target: Node, position: Position) {
+  return emit('dragNode', { nodes, target, position })
 }
 
 function toggleNode(node: Node) {
@@ -84,38 +99,47 @@ async function onDeleteFolder() {
     return
 
   const { confirm } = useDialog()
-
+  const activeBeforeDelete = state.folderId
+  const targetIds = selectedFolderIds.value.includes(contextNode.value.id)
+    ? [...selectedFolderIds.value]
+    : [contextNode.value.id]
   const folderName = getFolderByIdFromTree(
     folders.value,
     contextNode.value.id,
   )?.name
 
   const isConfirmed = await confirm({
-    title: i18n.t('messages:confirm.delete', { name: folderName }),
+    title:
+      targetIds.length > 1
+        ? i18n.t('messages:confirm.delete', {
+            name: i18n.t('sidebar.folders'),
+          })
+        : i18n.t('messages:confirm.delete', { name: folderName }),
     description: i18n.t('messages:warning:allSnippetsMoveToTrash'),
   })
 
-  if (isConfirmed) {
-    await deleteFolder(contextNode.value.id)
+  if (!isConfirmed)
+    return
 
-    if (contextNode.value.id === state.folderId) {
-      state.folderId = undefined
-      clearSnippetsState()
+  await Promise.all(targetIds.map(id => deleteFolder(id, false)))
+  await getFolders(false)
 
-      const firstFolder = folders.value?.[0]
+  if (activeBeforeDelete && targetIds.includes(activeBeforeDelete)) {
+    clearSnippetsState()
+    const fallbackId = selectedFolderIds.value[0]
 
-      if (firstFolder) {
-        state.folderId = firstFolder.id
-        scrollToElement(`[id="${state.folderId}"]`)
-      }
+    if (fallbackId) {
+      await selectFolder(fallbackId)
+      scrollToElement(`[id="${fallbackId}"]`)
+    }
+    else {
+      clearFolderSelection()
     }
-
-    nextTick(() => {
-      if (scrollRef.value) {
-        scrollRef.value.ps?.update()
-      }
-    })
   }
+
+  nextTick(() => {
+    scrollRef.value?.ps?.update()
+  })
 }
 
 function onRenameFolder() {
@@ -210,45 +234,52 @@ provide(treeKeys, {
         </div>
       </ContextMenu.Trigger>
       <ContextMenu.Content>
-        <ContextMenu.Item @click="createFolderAndSelect">
-          {{ i18n.t("action.new.folder") }}
-        </ContextMenu.Item>
-        <ContextMenu.Separator />
-        <ContextMenu.Item @click="onRenameFolder">
-          {{ i18n.t("action.rename") }}
-        </ContextMenu.Item>
-        <ContextMenu.Item @click="onDeleteFolder">
-          {{ i18n.t("action.delete.common") }}
-        </ContextMenu.Item>
-        <ContextMenu.Separator />
-        <ContextMenu.Item @click="onSetCustomIcon">
-          {{ i18n.t("action.setCustomIcon") }}
-        </ContextMenu.Item>
-        <ContextMenu.Item
-          v-if="contextNode?.icon"
-          @click="onRemoveCustomIcon"
-        >
-          {{ i18n.t("action.removeCustomIcon") }}
-        </ContextMenu.Item>
-        <ContextMenu.Separator />
-        <ContextMenu.Sub>
-          <ContextMenu.SubTrigger>
-            {{ i18n.t("action.defaultLanguage") }}
-          </ContextMenu.SubTrigger>
-          <ContextMenu.SubContent>
-            <PerfectScrollbar :options="{ minScrollbarLength: 20 }">
-              <div class="max-h-[250px]">
-                <ContextMenu.Item
-                  v-for="language in languages"
-                  :key="language.value"
-                  @click="onSelectLanguage(language.value)"
-                >
-                  {{ language.name }}
-                </ContextMenu.Item>
-              </div>
-            </PerfectScrollbar>
-          </ContextMenu.SubContent>
-        </ContextMenu.Sub>
+        <template v-if="isContextMultiSelection">
+          <ContextMenu.Item @click="onDeleteFolder">
+            {{ i18n.t("action.delete.common") }}
+          </ContextMenu.Item>
+        </template>
+        <template v-else>
+          <ContextMenu.Item @click="createFolderAndSelect">
+            {{ i18n.t("action.new.folder") }}
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item @click="onRenameFolder">
+            {{ i18n.t("action.rename") }}
+          </ContextMenu.Item>
+          <ContextMenu.Item @click="onDeleteFolder">
+            {{ i18n.t("action.delete.common") }}
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item @click="onSetCustomIcon">
+            {{ i18n.t("action.setCustomIcon") }}
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            v-if="contextNode?.icon"
+            @click="onRemoveCustomIcon"
+          >
+            {{ i18n.t("action.removeCustomIcon") }}
+          </ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>
+              {{ i18n.t("action.defaultLanguage") }}
+            </ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              <PerfectScrollbar :options="{ minScrollbarLength: 20 }">
+                <div class="max-h-[250px]">
+                  <ContextMenu.Item
+                    v-for="language in languages"
+                    :key="language.value"
+                    @click="onSelectLanguage(language.value)"
+                  >
+                    {{ language.name }}
+                  </ContextMenu.Item>
+                </div>
+              </PerfectScrollbar>
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        </template>
       </ContextMenu.Content>
     </ContextMenu.Root>
   </PerfectScrollbar>
diff --git a/src/renderer/components/sidebar/folders/TreeNode.vue b/src/renderer/components/sidebar/folders/TreeNode.vue
index d45a069e..da5996a9 100644
--- a/src/renderer/components/sidebar/folders/TreeNode.vue
+++ b/src/renderer/components/sidebar/folders/TreeNode.vue
@@ -32,14 +32,20 @@ const {
 } = inject(treeKeys)!
 
 const {
-  highlightedFolderId,
+  highlightedFolderIds,
   highlightedSnippetIds,
   highlightedTagId,
   state,
   focusedFolderId,
 } = useApp()
 const { displayedSnippets, updateSnippets, selectFirstSnippet } = useSnippets()
-const { updateFolder, renameFolderId } = useFolders()
+const {
+  updateFolder,
+  renameFolderId,
+  selectedFolderIds,
+  folders,
+  getFolderByIdFromTree,
+} = useFolders()
 
 const hoveredId = ref()
 const overPosition = ref<Position>()
@@ -60,9 +66,14 @@ const isHovered = computed(() => {
 })
 
 const isSelected = computed(() => state.folderId === props.node.id)
+const isMultiSelected = computed(
+  () =>
+    selectedFolderIds.value.length > 1
+    && selectedFolderIds.value.includes(props.node.id),
+)
 
-const isHighlighted = computed(
-  () => highlightedFolderId.value === props.node.id,
+const isHighlighted = computed(() =>
+  highlightedFolderIds.value.has(props.node.id),
 )
 const isFocused = computed(() => focusedFolderId.value === props.node.id)
 
@@ -97,44 +108,113 @@ const betweenLineStyle = computed(() => {
   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) {
-  highlightedFolderId.value = undefined
+function onClickNode(id: string | number, event?: MouseEvent) {
+  highlightedFolderIds.value.clear()
   highlightedTagId.value = undefined
   state.tagId = undefined
   focusedFolderId.value = Number(id)
-  clickNode(Number(id))
+  clickNode(Number(id), event)
 }
 
 function onClickContextMenu(e: MouseEvent) {
-  highlightedFolderId.value = props.node.id
+  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, e)
 }
 
 function onDragStart(e: DragEvent) {
-  store.dragNode = props.node
+  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-fg'
+  el.className
+    = 'fixed left-[-100%] text-fg truncate max-w-[200px] flex items-center'
 
   el.id = 'ghost'
-  el.innerHTML = props.node.name
+  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('node', JSON.stringify(props.node))
+  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
@@ -149,7 +229,11 @@ function onDragEnter() {
 function onDragOver(e: DragEvent) {
   hoveredId.value = props.node.id
 
-  if (props.node?.id === store.dragNode?.id)
+  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
@@ -201,8 +285,14 @@ async function onDrop(e: DragEvent) {
   if (!store.dragNode || !isAllowed.value)
     return
 
-  if (overPosition.value) {
-    dragNode(store.dragNode, props.node, overPosition.value)
+  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
@@ -210,7 +300,7 @@ async function onDrop(e: DragEvent) {
 
 onClickOutside(rowRef, () => {
   focusedFolderId.value = undefined
-  highlightedFolderId.value = undefined
+  highlightedFolderIds.value.clear()
 })
 
 function onUpdateName() {
@@ -260,12 +350,13 @@ if (focusHandler)
         'is-hovered':
           (isHovered && isAllowed) || hoveredNodeId === String(node.id),
         'is-selected': isSelected,
+        'is-multi-selected': isMultiSelected,
         'is-focused': isFocused,
         'is-highlighted': isHighlighted,
       }"
       @dragenter.stop="onDragEnter"
       @dragover="onDragOver"
-      @click="onClickNode(node.id)"
+      @click="(event) => onClickNode(node.id, event)"
     >
       <span class="node__name relative z-10 flex w-full items-center">
         <div
@@ -372,7 +463,8 @@ if (focusHandler)
     &.is-hovered,
     &.is-selected,
     &.is-focused,
-    &.is-highlighted {
+    &.is-highlighted,
+    &.is-multi-selected {
       @apply text-list-selection-fg;
       &::before {
         content: "";
@@ -386,6 +478,12 @@ if (focusHandler)
         @apply bg-list-selection;
       }
     }
+    &.is-multi-selected {
+      @apply text-list-selection-fg;
+      &::before {
+        @apply bg-list-selection/80;
+      }
+    }
     &.is-focused,
     &.is-hovered {
       @apply text-list-focus-fg;
diff --git a/src/renderer/components/sidebar/folders/composables/index.ts b/src/renderer/components/sidebar/folders/composables/index.ts
index 1ad69b95..91e597b0 100644
--- a/src/renderer/components/sidebar/folders/composables/index.ts
+++ b/src/renderer/components/sidebar/folders/composables/index.ts
@@ -3,29 +3,41 @@ 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((i) => {
-      ids.push(i.id)
+    nodes.forEach((node) => {
+      ids.push(node.id)
 
-      if (i.children && i.children.length) {
-        findIds(i.children)
+      if (node.children?.length) {
+        findIds(node.children)
       }
     })
   }
 
-  findIds(store.dragNode?.children || [])
+  draggedNodes.value.forEach(node => findIds(node.children || []))
 
   return ids
 })
 
 export const isAllowed = computed(() => {
-  if (!store.dragNode || !store.dragEnterNode)
+  if (!draggedNodes.value.length || !store.dragEnterNode)
     return false
 
-  const isSameNode = store.dragNode?.id === store.dragEnterNode?.id
+  const isSameNode = dragNodeIds.value.includes(store.dragEnterNode.id)
   const isChildrenNode = dragNodeChildrenIds.value.includes(
     store.dragEnterNode!.id,
   )
@@ -35,6 +47,7 @@ export const isAllowed = computed(() => {
 
 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
index 0d406c20..c9c788be 100644
--- a/src/renderer/components/sidebar/folders/keys.ts
+++ b/src/renderer/components/sidebar/folders/keys.ts
@@ -1,9 +1,9 @@
 import type { InjectionKey, Ref } from 'vue'
-import type { Node } from './types'
+import type { Node, Position } from './types'
 
 export interface TreeInjection {
-  clickNode: (id: number) => void
-  dragNode: (node: Node, target: Node, position: string) => void
+  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
diff --git a/src/renderer/components/sidebar/folders/types/index.ts b/src/renderer/components/sidebar/folders/types/index.ts
index d18d0de8..9361cd0d 100644
--- a/src/renderer/components/sidebar/folders/types/index.ts
+++ b/src/renderer/components/sidebar/folders/types/index.ts
@@ -8,5 +8,6 @@ export interface Node extends FoldersItem {
 
 export interface Store {
   dragNode?: Node
+  dragNodes?: Node[]
   dragEnterNode?: Node
 }
diff --git a/src/renderer/components/sidebar/library/Item.vue b/src/renderer/components/sidebar/library/Item.vue
index d74a6b89..2196d382 100644
--- a/src/renderer/components/sidebar/library/Item.vue
+++ b/src/renderer/components/sidebar/library/Item.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { SnippetsQuery } from '~/renderer/services/api/generated'
-import { useApp, useSnippets } from '@/composables'
+import { useApp, useFolders, useSnippets } from '@/composables'
 import { LibraryFilter } from '@/composables/types'
 import { onClickOutside } from '@vueuse/core'
 
@@ -13,6 +13,7 @@ interface Props {
 }
 
 const { state } = useApp()
+const { clearFolderSelection } = useFolders()
 
 const { getSnippets, selectFirstSnippet, clearSearch, isRestoreStateBlocked }
   = useSnippets()
@@ -29,7 +30,7 @@ async function onItemClick(
   clearSearch()
 
   state.libraryFilter = id
-  state.folderId = undefined
+  clearFolderSelection()
   state.tagId = undefined
 
   const query: SnippetsQuery = {}
diff --git a/src/renderer/components/sidebar/library/Library.vue b/src/renderer/components/sidebar/library/Library.vue
index bc2d66ec..86f75d95 100644
--- a/src/renderer/components/sidebar/library/Library.vue
+++ b/src/renderer/components/sidebar/library/Library.vue
@@ -27,6 +27,7 @@ const {
   selectFolder,
   createFolderAndSelect,
   updateFolder,
+  selectedFolderIds,
 } = useFolders()
 
 const tagsListHeight = store.app.get('sizes.tagsListHeight') as number
@@ -62,13 +63,29 @@ async function initGetSnippets() {
 
 initGetSnippets()
 
-async function onFolderClick(id: number) {
-  if (state.folderId !== id) {
+async function onFolderClick({
+  id,
+  event,
+}: {
+  id: number
+  event?: MouseEvent
+}) {
+  if (event?.shiftKey) {
+    await selectFolder(id, { mode: 'range', ensureVisibility: false })
+    return
+  }
+
+  if (event && (event.metaKey || event.ctrlKey)) {
+    await selectFolder(id, { mode: 'toggle', ensureVisibility: false })
+    return
+  }
+
+  if (state.folderId !== id || selectedFolderIds.value.length > 1) {
     isRestoreStateBlocked.value = true
     clearSearch()
 
-    await getSnippets({ folderId: id })
     await selectFolder(id)
+    await getSnippets({ folderId: id })
     selectFirstSnippet()
   }
 }
@@ -85,29 +102,45 @@ async function onFolderToggle(node: Node) {
 }
 
 async function onFolderDrag({
-  node,
+  nodes,
   target,
   position,
 }: {
-  node: Node
+  nodes: Node[]
   target: Node
-  position: string
+  position: 'before' | 'after' | 'center'
 }) {
   try {
-    const isDraggingUp = node.orderIndex > target.orderIndex
+    // Фильтруем узлы, исключая целевой, чтобы избежать перемещения папки в себя
+    const movableNodes = nodes.filter(node => node.id !== target.id)
 
-    // Определяем новые значения для parentId и orderIndex
-    let newParentId: number | null = null
-    let newOrderIndex: number = 0
+    if (!movableNodes.length) {
+      return
+    }
 
     if (position === 'center') {
       // Перемещение внутрь целевой папки
-      newParentId = Number(target.id)
-      newOrderIndex = target.children?.length || 0
+      const destinationParentId = Number(target.id)
+      let orderIndex = target.children?.length || 0
+
+      for (const node of movableNodes) {
+        await updateFolder(node.id, {
+          parentId: destinationParentId,
+          orderIndex,
+        })
+        orderIndex += 1
+      }
+
+      return
     }
-    else {
-      // Перемещение до или после целевой папки
-      newParentId = target.parentId || null
+
+    // Перемещение до или после целевой папки
+    for (const node of movableNodes) {
+      const isDraggingUp = node.orderIndex > target.orderIndex
+
+      const newParentId: number | null = target.parentId || null
+      let newOrderIndex: number
+
       if (node.parentId === target.parentId) {
         // Если перемещаем внутри одного списка, корректируем по направлению и позиции
         if (position === 'after') {
@@ -126,12 +159,12 @@ async function onFolderDrag({
         newOrderIndex
           = position === 'after' ? target.orderIndex + 1 : target.orderIndex
       }
-    }
 
-    updateFolder(node.id, {
-      parentId: newParentId,
-      orderIndex: newOrderIndex,
-    })
+      await updateFolder(node.id, {
+        parentId: newParentId,
+        orderIndex: newOrderIndex,
+      })
+    }
   }
   catch (error) {
     console.error('Folder update error:', error)
diff --git a/src/renderer/components/sidebar/tags/Tags.vue b/src/renderer/components/sidebar/tags/Tags.vue
index 059899df..e4be836d 100644
--- a/src/renderer/components/sidebar/tags/Tags.vue
+++ b/src/renderer/components/sidebar/tags/Tags.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import * as ContextMenu from '@/components/ui/shadcn/context-menu'
-import { useApp, useDialog, useSnippets, useTags } from '@/composables'
+import {
+  useApp,
+  useDialog,
+  useFolders,
+  useSnippets,
+  useTags,
+} from '@/composables'
 import { i18n } from '@/electron'
 
 const { tags, getTags, deleteTag } = useTags()
@@ -12,6 +18,7 @@ const {
   clearSearch,
   isRestoreStateBlocked,
 } = useSnippets()
+const { clearFolderSelection } = useFolders()
 
 getTags()
 
@@ -19,7 +26,7 @@ const idToDelete = ref(0)
 
 async function onTagClick(tagId: number) {
   state.tagId = tagId
-  state.folderId = undefined
+  clearFolderSelection()
   state.libraryFilter = undefined
 
   isRestoreStateBlocked.value = true
diff --git a/src/renderer/components/snippet/Item.vue b/src/renderer/components/snippet/Item.vue
index 4e45eec1..68afad31 100644
--- a/src/renderer/components/snippet/Item.vue
+++ b/src/renderer/components/snippet/Item.vue
@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 
 const {
   highlightedSnippetIds,
-  highlightedFolderId,
+  highlightedFolderIds,
   isFocusedSnippetName,
   focusedSnippetId,
   state,
@@ -81,7 +81,7 @@ function onSnippetClick(id: number, event: MouseEvent) {
 }
 
 function onClickContextMenu() {
-  highlightedFolderId.value = undefined
+  highlightedFolderIds.value.clear()
   highlightedSnippetIds.value.clear()
   highlightedSnippetIds.value.add(props.snippet.id)
 
diff --git a/src/renderer/composables/useApp.ts b/src/renderer/composables/useApp.ts
index 6acf35d4..dd45df5a 100644
--- a/src/renderer/composables/useApp.ts
+++ b/src/renderer/composables/useApp.ts
@@ -21,7 +21,7 @@ const isSidebarHidden = ref(
 if (state.isSidebarHidden === undefined)
   state.isSidebarHidden = isSidebarHidden.value
 
-const highlightedFolderId = ref<number>()
+const highlightedFolderIds = ref<Set<number>>(new Set())
 const highlightedSnippetIds = ref<Set<number>>(new Set())
 const highlightedTagId = ref<number>()
 const focusedFolderId = ref<number | undefined>()
@@ -95,7 +95,7 @@ export function useApp() {
   return {
     focusedFolderId,
     focusedSnippetId,
-    highlightedFolderId,
+    highlightedFolderIds,
     highlightedSnippetIds,
     highlightedTagId,
     isFocusedSnippetName,
diff --git a/src/renderer/composables/useFolders.ts b/src/renderer/composables/useFolders.ts
index 4c6b141e..09de96f6 100644
--- a/src/renderer/composables/useFolders.ts
+++ b/src/renderer/composables/useFolders.ts
@@ -5,7 +5,7 @@ import type {
 import { useApp, useSnippets } from '@/composables'
 import { i18n } from '@/electron'
 import { api } from '@/services/api'
-import { scrollToElement } from '../utils'
+import { getContiguousSelection, scrollToElement } from '../utils'
 
 const { state } = useApp()
 
@@ -13,6 +13,176 @@ const folders = shallowRef<FoldersTreeResponse>()
 
 const renameFolderId = ref<number | null>(null)
 
+const selectedFolderIds = ref<number[]>(state.folderId ? [state.folderId] : [])
+const lastSelectedFolderId = ref<number | undefined>(state.folderId)
+
+function flattenFolderTree(
+  nodes?: FoldersTreeResponse,
+  acc: FoldersTreeResponse[0][] = [],
+) {
+  if (!nodes) {
+    return acc
+  }
+
+  nodes.forEach((folder) => {
+    acc.push(folder)
+
+    if (folder.children?.length) {
+      flattenFolderTree(folder.children, acc)
+    }
+  })
+
+  return acc
+}
+
+const flatFolderList = computed(() => flattenFolderTree(folders.value))
+
+const folderOrderMap = computed(() => {
+  const map = new Map<number, number>()
+
+  flatFolderList.value.forEach((folder, index) => {
+    map.set(folder.id, index)
+  })
+
+  return map
+})
+
+function sortFolderIdsByTreeOrder(ids: number[]) {
+  const seen = new Set<number>()
+
+  return ids
+    .filter((id) => {
+      if (seen.has(id)) {
+        return false
+      }
+      seen.add(id)
+      return folderOrderMap.value.has(id)
+    })
+    .sort((a, b) => {
+      const orderA = folderOrderMap.value.get(a) ?? Number.MAX_SAFE_INTEGER
+      const orderB = folderOrderMap.value.get(b) ?? Number.MAX_SAFE_INTEGER
+
+      return orderA - orderB
+    })
+}
+
+function syncSelectedFoldersWithTree() {
+  const orderedIds = flatFolderList.value.map(folder => folder.id)
+
+  if (!orderedIds.length) {
+    clearFolderSelection()
+    return
+  }
+
+  const filteredSelection = selectedFolderIds.value.filter(id =>
+    folderOrderMap.value.has(id),
+  )
+
+  if (!filteredSelection.length) {
+    const fallbackId
+      = state.folderId && folderOrderMap.value.has(state.folderId)
+        ? state.folderId
+        : orderedIds[0]
+
+    if (fallbackId) {
+      setFolderSelection([fallbackId])
+    }
+    else {
+      clearFolderSelection()
+    }
+
+    return
+  }
+
+  setFolderSelection(filteredSelection)
+}
+
+watch(
+  () => state.folderId,
+  (folderId) => {
+    if (folderId === undefined) {
+      selectedFolderIds.value = []
+      lastSelectedFolderId.value = undefined
+      return
+    }
+
+    if (!selectedFolderIds.value.includes(folderId)) {
+      selectedFolderIds.value = sortFolderIdsByTreeOrder([
+        folderId,
+        ...selectedFolderIds.value,
+      ])
+    }
+  },
+)
+
+function clearFolderSelection() {
+  selectedFolderIds.value = []
+  state.folderId = undefined
+  state.snippetId = undefined
+  lastSelectedFolderId.value = undefined
+}
+
+function setFolderSelection(ids: number[]) {
+  if (!ids.length) {
+    clearFolderSelection()
+    return
+  }
+
+  const orderedSelection = sortFolderIdsByTreeOrder(ids)
+  selectedFolderIds.value = orderedSelection
+  state.folderId = orderedSelection[0]
+  lastSelectedFolderId.value = orderedSelection[orderedSelection.length - 1]
+}
+
+function applySingleFolderSelection(folderId: number) {
+  selectedFolderIds.value = [folderId]
+  state.folderId = folderId
+  lastSelectedFolderId.value = folderId
+}
+
+function applyRangeFolderSelection(folderId: number) {
+  const orderedIds = flatFolderList.value.map(folder => folder.id)
+
+  if (!orderedIds.length) {
+    applySingleFolderSelection(folderId)
+    return
+  }
+
+  const anchorId = state.folderId ?? selectedFolderIds.value[0] ?? folderId
+  const rangeSelection = getContiguousSelection(orderedIds, anchorId, folderId)
+
+  if (!rangeSelection.length) {
+    applySingleFolderSelection(folderId)
+    return
+  }
+
+  selectedFolderIds.value = rangeSelection
+  lastSelectedFolderId.value = folderId
+}
+
+function applyToggleFolderSelection(folderId: number) {
+  if (selectedFolderIds.value.includes(folderId)) {
+    if (selectedFolderIds.value.length === 1) {
+      return
+    }
+
+    selectedFolderIds.value = selectedFolderIds.value.filter(
+      id => id !== folderId,
+    )
+    state.folderId = selectedFolderIds.value[0]
+    lastSelectedFolderId.value
+      = selectedFolderIds.value[selectedFolderIds.value.length - 1]
+    return
+  }
+
+  selectedFolderIds.value = sortFolderIdsByTreeOrder([
+    ...selectedFolderIds.value,
+    folderId,
+  ])
+  state.folderId = folderId
+  lastSelectedFolderId.value = folderId
+}
+
 function findParentFolderIds(folderId: number, allFolders: any[]): number[] {
   const parentIds: number[] = []
 
@@ -33,27 +203,14 @@ async function ensureSelectedFolderIsVisible() {
     return
   }
 
-  const flatFolders: any[] = []
-
-  function flattenFolders(folderList: any[]) {
-    folderList.forEach((folder) => {
-      flatFolders.push(folder)
-      if (folder.children && folder.children.length > 0) {
-        flattenFolders(folder.children)
-      }
-    })
-  }
-
-  flattenFolders(folders.value)
-
-  const parentIds = findParentFolderIds(state.folderId, flatFolders)
+  const parentIds = findParentFolderIds(state.folderId, flatFolderList.value)
 
   if (parentIds.length === 0) {
     return
   }
 
   const foldersToOpen = parentIds.filter((parentId) => {
-    const folder = flatFolders.find(f => f.id === parentId)
+    const folder = flatFolderList.value.find(f => f.id === parentId)
     return folder && folder.isOpen === 0
   })
 
@@ -113,6 +270,7 @@ async function getFolders(shouldEnsureVisibility = true) {
   try {
     const { data } = await api.folders.getFoldersTree()
     folders.value = data
+    syncSelectedFoldersWithTree()
 
     if (shouldEnsureVisibility) {
       await ensureSelectedFolderIsVisible()
@@ -165,22 +323,44 @@ async function updateFolder(folderId: number, data: FoldersUpdate) {
   }
 }
 
-async function deleteFolder(folderId: number) {
+async function deleteFolder(folderId: number, shouldRefresh = true) {
   try {
     await api.folders.deleteFoldersById(String(folderId))
-    await getFolders(false)
+    if (shouldRefresh) {
+      await getFolders(false)
+    }
   }
   catch (error) {
     console.error(error)
   }
 }
-async function selectFolder(folderId: number) {
-  state.folderId = folderId
-  state.libraryFilter = undefined
-  state.tagId = undefined
-  state.snippetId = undefined
 
-  if (folders.value && folders.value.length > 0) {
+interface SelectFolderOptions {
+  mode?: 'single' | 'range' | 'toggle'
+  ensureVisibility?: boolean
+}
+
+async function selectFolder(
+  folderId: number,
+  options: SelectFolderOptions = {},
+) {
+  const mode = options.mode ?? 'single'
+  const shouldEnsureVisibility = options.ensureVisibility ?? mode === 'single'
+
+  if (mode === 'range') {
+    applyRangeFolderSelection(folderId)
+  }
+  else if (mode === 'toggle') {
+    applyToggleFolderSelection(folderId)
+  }
+  else {
+    applySingleFolderSelection(folderId)
+    state.libraryFilter = undefined
+    state.tagId = undefined
+    state.snippetId = undefined
+  }
+
+  if (folders.value?.length && shouldEnsureVisibility) {
     await ensureSelectedFolderIsVisible()
   }
 }
@@ -189,11 +369,15 @@ export function useFolders() {
   return {
     createFolder,
     createFolderAndSelect,
+    clearFolderSelection,
     deleteFolder,
     folders,
     getFolderByIdFromTree,
     getFolders,
+    lastSelectedFolderId,
     renameFolderId,
+    selectedFolderIds,
+    setFolderSelection,
     selectFolder,
     updateFolder,
   }
diff --git a/src/renderer/composables/useSnippets.ts b/src/renderer/composables/useSnippets.ts
index a6e48981..bb5f07a2 100644
--- a/src/renderer/composables/useSnippets.ts
+++ b/src/renderer/composables/useSnippets.ts
@@ -5,7 +5,7 @@ import type {
   SnippetsUpdate,
 } from '~/renderer/services/api/generated'
 import { i18n } from '@/electron'
-import { scrollToElement } from '@/utils'
+import { getContiguousSelection, scrollToElement } from '@/utils'
 import { api } from '~/renderer/services/api'
 import { useApp, useDialog, useFolders } from '.'
 import { LibraryFilter } from './types'
@@ -316,19 +316,16 @@ function selectSnippet(snippetId: number, withShift = false) {
   if (state.snippetId !== undefined) {
     const source = isSearch.value ? snippetsBySearch.value : snippets.value
 
-    if (source) {
-      const anchorIndex = source.findIndex(s => s.id === state.snippetId)
-      const currentIndex = source.findIndex(s => s.id === snippetId)
-
-      if (anchorIndex !== -1 && currentIndex !== -1) {
-        const startIndex = Math.min(anchorIndex, currentIndex)
-        const endIndex = Math.max(anchorIndex, currentIndex)
-
-        const newSelection = source
-          .slice(startIndex, endIndex + 1)
-          .map(s => s.id)
-        selectedSnippetIds.value = newSelection
+    if (source?.length) {
+      const orderedIds = source.map(snippet => snippet.id)
+      const rangeSelection = getContiguousSelection(
+        orderedIds,
+        state.snippetId,
+        snippetId,
+      )
 
+      if (rangeSelection.length) {
+        selectedSnippetIds.value = rangeSelection
         lastSelectedSnippetId.value = snippetId
         state.snippetContentIndex = 0
       }
diff --git a/src/renderer/ipc/listeners/system.ts b/src/renderer/ipc/listeners/system.ts
index 361733ca..ee6d3014 100644
--- a/src/renderer/ipc/listeners/system.ts
+++ b/src/renderer/ipc/listeners/system.ts
@@ -3,7 +3,7 @@ import { ipc } from '@/electron'
 import { repository } from '../../../../package.json'
 
 const {
-  highlightedFolderId,
+  highlightedFolderIds,
   highlightedSnippetIds,
   focusedSnippetId,
   focusedFolderId,
@@ -20,7 +20,7 @@ export function registerSystemListeners() {
       const snippetId = u.searchParams.get('snippetId')
 
       if (folderId && snippetId) {
-        highlightedFolderId.value = undefined
+        highlightedFolderIds.value.clear()
         highlightedSnippetIds.value.clear()
         focusedSnippetId.value = undefined
         focusedFolderId.value = undefined
diff --git a/src/renderer/utils/index.ts b/src/renderer/utils/index.ts
index 3e12a3d9..ce955d61 100644
--- a/src/renderer/utils/index.ts
+++ b/src/renderer/utils/index.ts
@@ -11,3 +11,30 @@ export function scrollToElement(selector: string) {
     element.scrollIntoView({ block: 'center' })
   }
 }
+
+export function getContiguousSelection(
+  orderedIds: number[],
+  anchorId: number | undefined,
+  targetId: number,
+): number[] {
+  if (!orderedIds.length) {
+    return []
+  }
+
+  const anchorIndex
+    = anchorId !== undefined ? orderedIds.indexOf(anchorId) : -1
+  const targetIndex = orderedIds.indexOf(targetId)
+
+  if (targetIndex === -1) {
+    return []
+  }
+
+  if (anchorIndex === -1) {
+    return [targetId]
+  }
+
+  const startIndex = Math.min(anchorIndex, targetIndex)
+  const endIndex = Math.max(anchorIndex, targetIndex)
+
+  return orderedIds.slice(startIndex, endIndex + 1)
+}