feat(snippets): add snippets to folder by drag & drop

src/renderer/components/sidebar/TheSidebar.vue

@@ -29,6 +29,7 @@
         <UniconsPlus @click="onAddNewFolder" />
       </template>
       <AppTree
+        ref="treeRef"
         v-model="folderStore.foldersTree"
         :selected-id="folderStore.selectedId"
         :context-menu-handler="contextMenuHandler"
@@ -39,6 +40,9 @@
           <SidebarListItem
             :id="node.id"
             :model="node"
+            @drop="onDrop($event, node.id)"
+            @dragover.prevent
+            @dragenter="onDragEnter(node.id)"
           >
             <TheFolder
               :id="node.id"
@@ -56,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type {
   SidebarSystemFolder,
   SystemFolderAlias,
@@ -74,6 +78,35 @@ import { ipc } from '@/electron'
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
 
+const treeRef = ref()
+
+const onDrop = async (e: DragEvent, id: string) => {
+  const payload = e.dataTransfer?.getData('payload')
+
+  if (payload) {
+    const snippetIds = JSON.parse(payload)
+    for (const i of snippetIds) {
+      await snippetStore.patchSnippetsById(i, {
+        folderId: id
+      })
+    }
+    snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
+  }
+}
+
+const onDragEnter = (id: string) => {
+  folderStore.hoveredId = id
+}
+
+watch(
+  () => folderStore.hoveredId,
+  () => {
+    if (treeRef.value) {
+      treeRef.value.hoveredNodeId = folderStore.hoveredId
+    }
+  }
+)
+
 const systemFolders = computed(() => {
   const folders = folderStore.system.map(i => {
     let icon

src/renderer/components/snippets/SnippetListItem.vue

@@ -7,8 +7,11 @@
       'is-focused': isFocused,
       'is-highlighted': isHighlighted || isHighlightedMultiple
     }"
+    :draggable="true"
     @click="onClickSnippet"
     @contextmenu="onClickContextMenu"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
   >
     <div class="header">
       <div class="name">
@@ -195,6 +198,40 @@ const onClickContextMenu = async () => {
 const dateFormat = computed(() =>
   new Intl.DateTimeFormat('ru').format(props.date)
 )
+
+const onDragStart = (e: DragEvent) => {
+  if (snippetStore.selectedIds.length) {
+    e.dataTransfer?.setData('payload', JSON.stringify(snippetStore.selectedIds))
+
+    const count = snippetStore.selectedIds.length
+    const el = document.createElement('div')
+    const style = {
+      padding: '2px 10px',
+      backgroundColor: 'var(--color-bg)',
+      borderRadius: '3px',
+      color: 'var(--color-contrast-higher)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'fixed',
+      fontSize: '14px',
+      top: '100%'
+    }
+    el.innerHTML = `${count} ${count > 1 ? 'items' : 'item'}`
+
+    Object.assign(el.style, style)
+    document.body.appendChild(el)
+
+    e.dataTransfer?.setDragImage(el, 0, 0)
+    setTimeout(() => el.remove(), 0)
+  } else {
+    e.dataTransfer?.setData('payload', JSON.stringify([props.id]))
+  }
+}
+
+const onDragEnd = () => {
+  folderStore.hoveredId = ''
+}
 </script>
 
 <style lang="scss" scoped>

src/shared/types/renderer/store/folders.d.ts

@@ -8,4 +8,5 @@ export interface State {
   selectedId?: string
   selectedIds?: string[]
   selectedAlias?: SystemFolderAlias
+  hoveredId?: string
 }