feat(snippets): add delete, duplicate & add to favorites

Author: antonreshetov

src/renderer/components/snippets/SnippetList.vue

@@ -5,7 +5,8 @@
     </div>
     <div class="body">
       <SnippetListItem
-        v-for="i in snippetStore.snippets"
+        v-for="i in snippetStore.snippetsNonDeleted"
+        :id="i.id"
         :key="i.id"
         :folder="i.folder.name"
         :date="i.updatedAt"

src/renderer/components/snippets/SnippetListItem.vue

@@ -4,9 +4,11 @@
     class="item"
     :class="{
       'is-selected': !isFocused && isSelected,
-      'is-focused': isFocused
+      'is-focused': isFocused,
+      'is-highlighted': isHighlighted
     }"
     @click="isFocused = true"
+    @contextmenu="onClickContextMenu"
   >
     <div class="header">
       <div class="name">
@@ -27,10 +29,15 @@
 </template>
 
 <script setup lang="ts">
+import { ipc } from '@/electron'
+import { useFolderStore } from '@/store/folders'
+import { useSnippetStore } from '@/store/snippets'
+import type { ContextMenuPayload, ContextMenuResponse } from '@@/types'
 import { onClickOutside } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
 interface Props {
+  id: string
   name: string
   folder: string
   date: number
@@ -39,13 +46,52 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const snippetStore = useSnippetStore()
+const folderStore = useFolderStore()
+
 const itemRef = ref()
 const isFocused = ref(false)
+const isHighlighted = ref(false)
 
 onClickOutside(itemRef, () => {
   isFocused.value = false
+  isHighlighted.value = false
 })
 
+const onClickContextMenu = async () => {
+  isHighlighted.value = true
+
+  const { action } = await ipc.invoke<ContextMenuResponse, ContextMenuPayload>(
+    'context-menu:snippet',
+    {
+      name: props.name
+    }
+  )
+
+  if (action === 'delete') {
+    snippetStore.patchSnippetsById(props.id, {
+      isDeleted: true
+    })
+
+    await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
+    snippetStore.snippet = snippetStore.snippetsNonDeleted[0]
+  }
+
+  if (action === 'duplicate') {
+    await snippetStore.duplicateSnippetById(props.id)
+    await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
+  }
+
+  if (action === 'favorites') {
+    snippetStore.patchSnippetsById(props.id, {
+      isFavorites: true
+    })
+    await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
+  }
+
+  isHighlighted.value = false
+}
+
 const dateFormat = computed(() =>
   new Intl.DateTimeFormat('ru').format(props.date)
 )
@@ -56,6 +102,7 @@ const dateFormat = computed(() =>
   padding: var(--spacing-xs) var(--spacing-sm);
   position: relative;
   z-index: 2;
+  user-select: none;
   &::after {
     content: '';
     height: 1px;
@@ -65,11 +112,12 @@ const dateFormat = computed(() =>
     bottom: 1px;
   }
   &.is-focused,
-  &.is-selected {
+  &.is-selected,
+  &.is-highlighted {
     &::before {
       content: '';
       position: absolute;
-      top: -2px;
+      top: 0px;
       left: 8px;
       right: 8px;
       bottom: 0px;
@@ -95,6 +143,17 @@ const dateFormat = computed(() =>
       color: var(--color-text);
     }
   }
+  &.is-highlighted {
+    &::before {
+      top: 0px;
+      left: 10px;
+      right: 10px;
+      bottom: 2px;
+      border-radius: 5px;
+      // z-index: 3;
+      outline: 2px solid var(--color-primary);
+    }
+  }
 }
 .name {
   display: table;

src/renderer/store/snippets.ts

@@ -18,7 +18,7 @@ export const useSnippetStore = defineStore('snippets', {
     snippetsNonDeleted: state =>
       state.snippets.filter(i => !i.isDeleted) as SnippetWithFolder[],
     snippetsDeleted: state =>
-      state.snippets.filter(i => i.isDeleted) as SnippetWithFolder[],
+      state.snippets.filter(i => !i.isDeleted) as SnippetWithFolder[],
     selectedId: state => state.snippet?.id,
     currentContent: state => state.snippet?.content[state.fragment]?.value,
     currentLanguage: state =>
@@ -67,6 +67,7 @@ export const useSnippetStore = defineStore('snippets', {
       key: keyof SnippetContent,
       value: string | Language
     ) {
+      const folderStore = useFolderStore()
       const body: Partial<Snippet> = {}
       const content = this.snippet?.content
 
@@ -76,6 +77,7 @@ export const useSnippetStore = defineStore('snippets', {
         body.updatedAt = new Date().valueOf()
 
         await useApi(`/snippets/${this.selectedId}`).patch(body)
+        await this.getSnippetsByFolderIds(folderStore.selectedIds)
       }
     },
     async addNewSnippet () {
@@ -97,6 +99,20 @@ export const useSnippetStore = defineStore('snippets', {
       this.snippet = data.value
       store.app.set('selectedSnippetId', this.snippet!.id)
     },
+    async duplicateSnippetById (id: string) {
+      const snippet = this.snippets.find(i => i.id === id)
+
+      if (snippet) {
+        const body = Object.assign({}, snippet)
+        body.name = body.name + ' Copy'
+
+        const { data } = await useApi('/snippets').post(body).json()
+        this.snippet = data.value
+        this.fragment = 0
+
+        store.app.set('selectedSnippetId', this.snippet!.id)
+      }
+    },
     async addNewFragmentToSnippetsById (id: string) {
       const folderStore = useFolderStore()
       const content = [...this.snippet!.content]
@@ -112,6 +128,7 @@ export const useSnippetStore = defineStore('snippets', {
       body.content = content
 
       await this.patchSnippetsById(id, body)
+      await this.getSnippetsByFolderIds(folderStore.selectedIds)
       await this.getSnippetsById(id)
     },
     async deleteCurrentSnippetFragmentByIndex (index: number) {