From 47a59de8f35f3299e17618e6cface8c5865992e4 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 18 Mar 2025 08:48:40 +0300
Subject: [PATCH 1/3] refactor(snippets): replace snippets handling with
 computed displayedSnippets

---
 src/renderer/components/snippet/List.vue | 19 +++++++++++--------
 src/renderer/composables/useSnippets.ts  | 11 +++++++++--
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/snippet/List.vue b/src/renderer/components/snippet/List.vue
index 34157c7a..4cc0e7f5 100644
--- a/src/renderer/components/snippet/List.vue
+++ b/src/renderer/components/snippet/List.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SnippetsQuery } from '@/services/api/generated'
+import { ScrollArea } from '@/components/ui/shadcn/scroll-area'
 import { useApp, useGutter, useSnippets } from '@/composables'
 import { LibraryFilter } from '@/composables/types'
 import { store } from '@/electron'
@@ -10,7 +11,7 @@ const gutterRef = ref<{ $el: HTMLElement }>()
 
 const { snippetListWidth, sidebarWidth, selectedFolderId, selectedLibrary }
   = useApp()
-const { snippets, snippetsBySearch, isSearch, getSnippets } = useSnippets()
+const { displayedSnippets, getSnippets } = useSnippets()
 
 async function initGetSnippets() {
   const query: SnippetsQuery = {}
@@ -67,13 +68,15 @@ watch(width, () => {
     <div>
       <SnippetHeader />
     </div>
-    <div class="flex-grow overflow-y-auto">
-      <SnippetItem
-        v-for="snippet in isSearch ? snippetsBySearch : snippets"
-        :key="snippet.id"
-        :snippet="snippet"
-      />
-    </div>
+    <ScrollArea>
+      <div class="flex-grow overflow-y-auto">
+        <SnippetItem
+          v-for="snippet in displayedSnippets"
+          :key="snippet.id"
+          :snippet="snippet"
+        />
+      </div>
+    </ScrollArea>
     <UiGutter ref="gutterRef" />
   </div>
 </template>
diff --git a/src/renderer/composables/useSnippets.ts b/src/renderer/composables/useSnippets.ts
index 988d560b..1568a501 100644
--- a/src/renderer/composables/useSnippets.ts
+++ b/src/renderer/composables/useSnippets.ts
@@ -24,6 +24,14 @@ const snippetsBySearch = shallowRef<SnippetsResponse>()
 const searchQuery = ref('')
 const isSearch = ref(false)
 
+const displayedSnippets = computed(() => {
+  if (isSearch.value) {
+    return snippetsBySearch.value
+  }
+
+  return snippets.value
+})
+
 const selectedSnippet = computed(() => {
   if (isSearch.value) {
     return snippetsBySearch.value?.find(
@@ -220,6 +228,7 @@ export function useSnippets() {
     createSnippetContent,
     deleteSnippet,
     deleteSnippetContent,
+    displayedSnippets,
     duplicateSnippet,
     getSnippets,
     isEmpty,
@@ -229,8 +238,6 @@ export function useSnippets() {
     selectedSnippetContent,
     selectFirstSnippet,
     selectSnippet,
-    snippets,
-    snippetsBySearch,
     updateSnippet,
     updateSnippetContent,
   }

From f13555567108185b46427d575dc0c9b24eb8d9d3 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 18 Mar 2025 08:50:33 +0300
Subject: [PATCH 2/3] feat(snippets): add drag & drop for move snippets into
 folder

---
 src/renderer/components/sidebar/Sidebar.vue   | 21 +++++++++++--------
 .../components/sidebar/folders/TreeNode.vue   | 20 ++++++++++++++++--
 src/renderer/components/snippet/Item.vue      | 19 ++++++++++++++++-
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/sidebar/Sidebar.vue b/src/renderer/components/sidebar/Sidebar.vue
index 9b43cfef..2b556ec6 100644
--- a/src/renderer/components/sidebar/Sidebar.vue
+++ b/src/renderer/components/sidebar/Sidebar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Node } from '@/components/sidebar/folders/types'
 import type { FoldersTreeResponse } from '@/services/api/generated'
+import { ScrollArea } from '@/components/ui/shadcn/scroll-area'
 import { useApp, useGutter, useSnippets } from '@/composables'
 import { LibraryFilter } from '@/composables/types'
 import { i18n, store } from '@/electron'
@@ -169,15 +170,17 @@ watch(width, () => {
         <Plus class="h-4 w-4" />
       </UiButton>
     </div>
-    <div class="flex-grow overflow-auto">
-      <Tree
-        v-if="folders"
-        v-model="folders"
-        @click-node="onFolderClick"
-        @toggle-node="onFolderToggle"
-        @drag-node="onFolderDrag"
-      />
-    </div>
+    <ScrollArea>
+      <div class="flex-grow">
+        <Tree
+          v-if="folders"
+          v-model="folders"
+          @click-node="onFolderClick"
+          @toggle-node="onFolderToggle"
+          @drag-node="onFolderDrag"
+        />
+      </div>
+    </ScrollArea>
     <UiGutter ref="gutterRef" />
   </div>
 </template>
diff --git a/src/renderer/components/sidebar/folders/TreeNode.vue b/src/renderer/components/sidebar/folders/TreeNode.vue
index 25b3b221..1b4c5e7a 100644
--- a/src/renderer/components/sidebar/folders/TreeNode.vue
+++ b/src/renderer/components/sidebar/folders/TreeNode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import type { Node, Position } from './types'
-import { useApp } from '@/composables'
+import { useApp, useSnippets } from '@/composables'
 import { onClickOutside } from '@vueuse/core'
 import { ChevronRight, Folder } from 'lucide-vue-next'
 import { isAllowed, store } from './composables'
@@ -26,6 +26,7 @@ const { clickNode, dragNode, toggleNode, isHoveredByIdDisabled, focusHandler }
   = inject(treeKeys)!
 
 const { highlightedFolderId, selectedFolderId } = useApp()
+const { displayedSnippets, updateSnippet } = useSnippets()
 
 const hoveredId = ref()
 const overPosition = ref<Position>()
@@ -151,7 +152,22 @@ function onDragLeave() {
   overPosition.value = undefined
 }
 
-function onDrop() {
+function onDrop(e: DragEvent) {
+  const snippetId = e.dataTransfer?.getData('snippet')
+  const snippet = displayedSnippets.value?.find(
+    s => s.id === Number(snippetId),
+  )
+
+  if (snippet && props.node.id !== snippet.folder?.id) {
+    updateSnippet(snippet.id, {
+      name: snippet.name,
+      folderId: props.node.id,
+      description: snippet.description,
+      isDeleted: snippet.isDeleted,
+      isFavorites: snippet.isFavorites,
+    })
+  }
+
   if (!store.dragNode || !isAllowed.value)
     return
 
diff --git a/src/renderer/components/snippet/Item.vue b/src/renderer/components/snippet/Item.vue
index 2d1a3fb4..e7c5df81 100644
--- a/src/renderer/components/snippet/Item.vue
+++ b/src/renderer/components/snippet/Item.vue
@@ -62,6 +62,21 @@ async function onDuplicate() {
   isFocusedSnippetName.value = true
 }
 
+function onDragStart(event: DragEvent) {
+  event.dataTransfer?.setData('snippet', props.snippet.id.toString())
+
+  const el = document.createElement('div')
+
+  el.className = 'fixed left-[-100%] text-fg truncate max-w-[200px]'
+  el.id = 'ghost'
+  el.innerHTML = props.snippet.name
+
+  document.body.appendChild(el)
+  event.dataTransfer?.setDragImage(el, 0, 0)
+
+  setTimeout(() => el.remove(), 0)
+}
+
 onClickOutside(snippetRef, () => {
   isFocused.value = false
   highlightedSnippetId.value = undefined
@@ -72,14 +87,16 @@ onClickOutside(snippetRef, () => {
   <div
     ref="snippetRef"
     data-snippet-item
-    class="border-border relative not-first:border-t [&+.is-selected+div]:border-transparent"
+    class="border-border relative not-first:border-t focus-visible:outline-none [&+.is-selected+div]:border-transparent"
     :class="{
       'is-selected': isSelected,
       'is-focused': isFocused,
       'is-highlighted': isHighlighted,
     }"
+    draggable="true"
     @click="onSnippetClick(snippet.id)"
     @contextmenu="onClickContextMenu"
+    @dragstart.stop="onDragStart"
   >
     <ContextMenu.Root>
       <ContextMenu.Trigger>

From c0a79ad711a5437db1538a1b49c43639fc205dca Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 18 Mar 2025 10:21:28 +0300
Subject: [PATCH 3/3] feat: add multiple drag & drop

---
 src/renderer/components/editor/Editor.vue     | 17 +++--
 .../components/sidebar/folders/TreeNode.vue   | 38 +++++++----
 src/renderer/components/snippet/Item.vue      | 49 ++++++++++---
 src/renderer/composables/useSnippets.ts       | 68 +++++++++++++++++--
 4 files changed, 141 insertions(+), 31 deletions(-)

diff --git a/src/renderer/components/editor/Editor.vue b/src/renderer/components/editor/Editor.vue
index 870921cf..4ba8b499 100644
--- a/src/renderer/components/editor/Editor.vue
+++ b/src/renderer/components/editor/Editor.vue
@@ -16,7 +16,8 @@ import 'codemirror/theme/neo.css'
 import 'codemirror/theme/oceanic-next.css'
 
 const { settings, cursorPosition } = useEditor()
-const { selectedSnippetContent, selectedSnippet, isEmpty } = useSnippets()
+const { selectedSnippetContent, selectedSnippet, isEmpty, selectedSnippetIds }
+  = useSnippets()
 
 const { addToUpdateContentQueue } = useSnippetUpdate()
 
@@ -140,19 +141,27 @@ onMounted(() => {
     data-editor
     class="mt-[var(--title-bar-height)] grid grid-rows-[auto_1fr_auto] overflow-hidden"
   >
-    <EditorHeader v-if="!isEmpty" />
+    <EditorHeader v-if="!isEmpty && selectedSnippetIds.length <= 1" />
     <div
-      v-show="!isEmpty"
+      v-show="!isEmpty && selectedSnippetIds.length <= 1"
       ref="editorRef"
       class="overflow-auto"
     />
-    <EditorFooter v-if="!isEmpty" />
+    <EditorFooter v-if="!isEmpty && selectedSnippetIds.length <= 1" />
     <div
       v-if="isEmpty"
       class="row-span-full flex items-center justify-center"
     >
       {{ i18n.t("snippet.noSelected") }}
     </div>
+    <div
+      v-if="selectedSnippetIds.length > 1"
+      class="row-span-full flex items-center justify-center"
+    >
+      {{
+        i18n.t("snippet.selectedMultiple", { count: selectedSnippetIds.length })
+      }}
+    </div>
   </div>
 </template>
 
diff --git a/src/renderer/components/sidebar/folders/TreeNode.vue b/src/renderer/components/sidebar/folders/TreeNode.vue
index 1b4c5e7a..d9706a6c 100644
--- a/src/renderer/components/sidebar/folders/TreeNode.vue
+++ b/src/renderer/components/sidebar/folders/TreeNode.vue
@@ -25,8 +25,8 @@ const props = withDefaults(defineProps<Props>(), {
 const { clickNode, dragNode, toggleNode, isHoveredByIdDisabled, focusHandler }
   = inject(treeKeys)!
 
-const { highlightedFolderId, selectedFolderId } = useApp()
-const { displayedSnippets, updateSnippet } = useSnippets()
+const { highlightedFolderId, selectedFolderId, selectedSnippetId } = useApp()
+const { displayedSnippets, updateSnippets, selectFirstSnippet } = useSnippets()
 
 const hoveredId = ref()
 const overPosition = ref<Position>()
@@ -152,20 +152,32 @@ function onDragLeave() {
   overPosition.value = undefined
 }
 
-function onDrop(e: DragEvent) {
-  const snippetId = e.dataTransfer?.getData('snippet')
-  const snippet = displayedSnippets.value?.find(
-    s => s.id === Number(snippetId),
+async function onDrop(e: DragEvent) {
+  const snippetIds = JSON.parse(e.dataTransfer?.getData('snippetIds') || '[]')
+  const snippets = displayedSnippets.value?.filter(s =>
+    snippetIds.includes(s.id),
   )
 
-  if (snippet && props.node.id !== snippet.folder?.id) {
-    updateSnippet(snippet.id, {
-      name: snippet.name,
+  // Если все сниппеты уже в папке
+  if (snippets && snippets.every(s => s.folder?.id === props.node.id)) {
+    return
+  }
+
+  if (snippets) {
+    const ids = snippets.map(s => s.id)
+    const data = snippets.map(s => ({
+      name: s.name,
       folderId: props.node.id,
-      description: snippet.description,
-      isDeleted: snippet.isDeleted,
-      isFavorites: snippet.isFavorites,
-    })
+      description: s.description,
+      isDeleted: s.isDeleted,
+      isFavorites: s.isFavorites,
+    }))
+
+    await updateSnippets(ids, data)
+
+    if (selectedSnippetId.value && ids.includes(selectedSnippetId.value)) {
+      selectFirstSnippet()
+    }
   }
 
   if (!store.dragNode || !isAllowed.value)
diff --git a/src/renderer/components/snippet/Item.vue b/src/renderer/components/snippet/Item.vue
index e7c5df81..9d911e2d 100644
--- a/src/renderer/components/snippet/Item.vue
+++ b/src/renderer/components/snippet/Item.vue
@@ -24,18 +24,24 @@ const {
   deleteSnippet,
   selectFirstSnippet,
   duplicateSnippet,
+  selectedSnippetIds,
 } = useSnippets()
 
 const isFocused = ref(false)
 const snippetRef = ref<HTMLDivElement>()
 
 const isSelected = computed(() => selectedSnippetId.value === props.snippet.id)
+const isInMultiSelection = computed(
+  () =>
+    selectedSnippetIds.value.length > 1
+    && selectedSnippetIds.value.includes(props.snippet.id),
+)
 const isHighlighted = computed(
   () => highlightedSnippetId.value === props.snippet.id,
 )
 
-function onSnippetClick(id: number) {
-  selectSnippet(id)
+function onSnippetClick(id: number, event: MouseEvent) {
+  selectSnippet(id, event.shiftKey)
 
   if (!isSearch.value) {
     selectedSnippetIdBeforeSearch.value = id
@@ -63,13 +69,30 @@ async function onDuplicate() {
 }
 
 function onDragStart(event: DragEvent) {
-  event.dataTransfer?.setData('snippet', props.snippet.id.toString())
+  const ids
+    = selectedSnippetIds.value.length > 1
+      ? selectedSnippetIds.value
+      : [props.snippet.id]
+
+  event.dataTransfer?.setData('snippetIds', JSON.stringify(ids))
 
   const el = document.createElement('div')
 
-  el.className = 'fixed left-[-100%] text-fg truncate max-w-[200px]'
-  el.id = 'ghost'
-  el.innerHTML = props.snippet.name
+  if (selectedSnippetIds.value.length > 1) {
+    el.className
+      = 'fixed left-[-100%] text-fg truncate max-w-[200px] flex items-center'
+    el.id = 'ghost'
+    el.innerHTML = `
+      <span class="rounded-full bg-primary text-white px-2 py-0.5 text-xs ml-3">
+        ${selectedSnippetIds.value.length}
+      </span>
+    `
+  }
+  else {
+    el.className = 'fixed left-[-100%] text-fg truncate max-w-[200px]'
+    el.id = 'ghost'
+    el.innerHTML = props.snippet.name
+  }
 
   document.body.appendChild(el)
   event.dataTransfer?.setDragImage(el, 0, 0)
@@ -90,11 +113,12 @@ onClickOutside(snippetRef, () => {
     class="border-border relative not-first:border-t focus-visible:outline-none [&+.is-selected+div]:border-transparent"
     :class="{
       'is-selected': isSelected,
+      'is-multi-selected': isInMultiSelection,
       'is-focused': isFocused,
       'is-highlighted': isHighlighted,
     }"
     draggable="true"
-    @click="onSnippetClick(snippet.id)"
+    @click="(event) => onSnippetClick(snippet.id, event)"
     @contextmenu="onClickContextMenu"
     @dragstart.stop="onDragStart"
   >
@@ -137,7 +161,13 @@ onClickOutside(snippetRef, () => {
       @apply text-list-selection-fg;
     }
   }
-  &.is-focused {
+  &.is-multi-selected {
+    @apply bg-list-selection/80 text-list-selection-fg rounded-md;
+    .meta {
+      @apply text-list-selection-fg;
+    }
+  }
+  &.is-focused:not(.is-multi-selected) {
     @apply bg-list-focus text-list-focus-fg rounded-md;
     .meta {
       @apply text-list-focus-fg;
@@ -146,7 +176,8 @@ onClickOutside(snippetRef, () => {
   &.is-highlighted {
     @apply outline-list-focus rounded-md outline-2 -outline-offset-2;
     &.is-focused,
-    &.is-selected {
+    &.is-selected,
+    &.is-multi-selected {
       @apply bg-bg text-list-selection-fg;
       .meta {
         @apply text-list-selection-fg;
diff --git a/src/renderer/composables/useSnippets.ts b/src/renderer/composables/useSnippets.ts
index 1568a501..8ab70a98 100644
--- a/src/renderer/composables/useSnippets.ts
+++ b/src/renderer/composables/useSnippets.ts
@@ -18,6 +18,9 @@ const {
   selectedLibrary,
 } = useApp()
 
+const selectedSnippetIds = ref<number[]>([])
+const lastSelectedSnippetId = ref<number | undefined>()
+
 const snippets = shallowRef<SnippetsResponse>()
 const snippetsBySearch = shallowRef<SnippetsResponse>()
 
@@ -46,6 +49,11 @@ const selectedSnippetContent = computed(() => {
   return selectedSnippet.value?.contents[selectedSnippetContentIndex.value]
 })
 
+const selectedSnippets = computed(() => {
+  const source = isSearch.value ? snippetsBySearch.value : snippets.value
+  return source?.filter(s => selectedSnippetIds.value.includes(s.id)) || []
+})
+
 const queryByLibraryOrFolderOrSearch = computed(() => {
   const query: SnippetsQuery = {}
 
@@ -161,7 +169,14 @@ async function createSnippetContent(snippetId: number) {
 
 async function updateSnippet(snippetId: number, data: SnippetsUpdate) {
   await api.snippets.putSnippetsById(String(snippetId), data)
-  getSnippets(queryByLibraryOrFolderOrSearch.value)
+  await getSnippets(queryByLibraryOrFolderOrSearch.value)
+}
+
+async function updateSnippets(snippetIds: number[], data: SnippetsUpdate[]) {
+  for (const [index, snippetId] of snippetIds.entries()) {
+    await api.snippets.putSnippetsById(String(snippetId), data[index])
+  }
+  await getSnippets(queryByLibraryOrFolderOrSearch.value)
 }
 
 async function updateSnippetContent(
@@ -196,10 +211,45 @@ async function deleteSnippetContent(snippetId: number, contentId: number) {
   }
 }
 
-function selectSnippet(snippetId: number) {
-  selectedSnippetId.value = snippetId
-  selectedSnippetContentIndex.value = 0
-  store.app.set('selectedSnippetId', snippetId)
+function selectSnippet(snippetId: number, withShift = false) {
+  if (!withShift) {
+    selectedSnippetIds.value = [snippetId]
+    selectedSnippetId.value = snippetId
+    selectedSnippetContentIndex.value = 0
+    store.app.set('selectedSnippetId', snippetId)
+    return
+  }
+
+  if (selectedSnippetId.value !== undefined) {
+    const source = isSearch.value ? snippetsBySearch.value : snippets.value
+
+    if (source) {
+      const anchorIndex = source.findIndex(
+        s => s.id === selectedSnippetId.value,
+      )
+      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
+
+        lastSelectedSnippetId.value = snippetId
+        selectedSnippetContentIndex.value = 0
+      }
+    }
+  }
+  else {
+    selectedSnippetIds.value = [snippetId]
+    selectedSnippetId.value = snippetId
+    lastSelectedSnippetId.value = snippetId
+    selectedSnippetContentIndex.value = 0
+    store.app.set('selectedSnippetId', snippetId)
+  }
 }
 
 function selectFirstSnippet() {
@@ -214,10 +264,14 @@ function selectFirstSnippet() {
 
   if (firstSnippet) {
     selectedSnippetId.value = firstSnippet.id
+    selectedSnippetIds.value = [firstSnippet.id]
+    lastSelectedSnippetId.value = firstSnippet.id
     store.app.set('selectedSnippetId', firstSnippet.id)
   }
   else {
     selectedSnippetId.value = undefined
+    selectedSnippetIds.value = []
+    lastSelectedSnippetId.value = undefined
     store.app.delete('selectedSnippetId')
   }
 }
@@ -233,12 +287,16 @@ export function useSnippets() {
     getSnippets,
     isEmpty,
     isSearch,
+    lastSelectedSnippetId,
     searchQuery,
     selectedSnippet,
     selectedSnippetContent,
+    selectedSnippets,
+    selectedSnippetIds,
     selectFirstSnippet,
     selectSnippet,
     updateSnippet,
+    updateSnippets,
     updateSnippetContent,
   }
 }