feat(snippets): add description

src/main/menu/main.ts

@@ -236,13 +236,28 @@ const fileMenu: MenuItemConstructorOptions[] = [
       )
     }
   },
+  {
+    label: 'Add Description',
+    accelerator: 'CommandOrControl+Shift+T',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:add-description'
+      )
+    }
+  },
+  {
+    type: 'separator'
+  },
   {
     label: 'New Folder',
     accelerator: 'CommandOrControl+Shift+N',
     click: () => {
       BrowserWindow.getFocusedWindow()?.webContents.send('main-menu:new-folder')
     }
   },
+  {
+    type: 'separator'
+  },
   {
     label: 'Find',
     accelerator: 'CommandOrControl+F',

src/renderer/App.vue

@@ -26,7 +26,8 @@ import {
   onAddNewFolder,
   onCopySnippet,
   emitter,
-  onCreateSnippet
+  onCreateSnippet,
+  onAddDescription
 } from '@/composable'
 import { createToast, destroyAllToasts } from 'vercel-toast'
 import { useRoute } from 'vue-router'
@@ -211,6 +212,10 @@ ipc.on('main-menu:sort-snippets', (event, sort) => {
   snippetStore.setSort(sort)
 })
 
+ipc.on('main-menu:add-description', async () => {
+  await onAddDescription()
+})
+
 ipc.on('api:snippet-create', (event, body: Snippet) => {
   onCreateSnippet(body)
 })

src/renderer/assets/scss/base.scss

@@ -47,6 +47,11 @@ h6 {
   font-weight: 700;
 }
 
+::placeholder {
+  color: var(--color-text-3);
+}
+
+
 .gutter-line {
   position: absolute;
   top: 0;

src/renderer/assets/scss/reset.scss

@@ -69,6 +69,7 @@ textarea {
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
+  padding: 0;
 }
 
 button,

src/renderer/components/editor/TheEditor.vue

@@ -95,6 +95,10 @@ const editorHeight = computed(() => {
     result += appStore.sizes.editor.tagsHeight
   }
 
+  if (snippetStore.isDescriptionShow) {
+    result += appStore.sizes.editor.descriptionHeight
+  }
+
   return window.innerHeight - result + 'px'
 })
 

src/renderer/components/snippets/SnippetHeader.vue

@@ -20,20 +20,29 @@
         <AppActionButton @click="onCopySnippet">
           <UniconsArrow />
         </AppActionButton>
+        <AppActionButton @click="onAddDescription">
+          <UniconsText />
+        </AppActionButton>
         <AppActionButton @click="onAddNewFragment">
           <UniconsPlus />
         </AppActionButton>
       </div>
     </div>
     <div class="bottom">
+      <SnippetsDescription v-show="snippetStore.isDescriptionShow" />
       <SnippetFragments v-if="snippetStore.isFragmentsShow" />
       <SnippetsTags v-if="snippetStore.isTagsShow" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { emitter, onAddNewFragment, onCopySnippet } from '@/composable'
+import {
+  onAddNewFragment,
+  onAddDescription,
+  onCopySnippet,
+  emitter
+} from '@/composable'
 import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, onUnmounted, ref } from 'vue'

src/renderer/components/snippets/SnippetsDescription.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="description"
+    :class="{ 'no-border-bottom': snippetStore.isFragmentsShow }"
+    @click="onClick"
+  >
+    <PerfectScrollbar>
+      <div
+        ref="inputRef"
+        class="input"
+        contenteditable="true"
+        spellcheck="false"
+        placeholder="Add description"
+        @blur="onBlur"
+      >
+        {{ desc }}
+      </div>
+    </PerfectScrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/app'
+import { useSnippetStore } from '@/store/snippets'
+
+import { computed, nextTick, ref, watch } from 'vue'
+
+const snippetStore = useSnippetStore()
+const appStore = useAppStore()
+
+const desc = computed(() => snippetStore.selected?.description)
+
+const inputRef = ref<HTMLElement>()
+const descHeight = appStore.sizes.editor.descriptionHeight + 'px'
+
+const onBlur = (e: Event) => {
+  snippetStore.patchSnippetsById(snippetStore.selectedId!, {
+    description: (e.target as HTMLElement).innerText.trimEnd() || null
+  })
+}
+
+const onClick = () => {
+  inputRef.value?.focus()
+}
+
+watch(
+  () => snippetStore.isDescriptionShow,
+  v => {
+    if (v && snippetStore.selected?.description?.length === 0) {
+      nextTick(() => inputRef.value?.focus())
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.description {
+  padding: 0 var(--spacing-xs);
+  font-size: 12px;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border);
+  :empty::before {
+    content: attr(placeholder);
+    position: absolute;
+    color: var(--color-text-3);
+    background-color: transparent;
+  }
+  &.no-border-bottom {
+    border-bottom: none;
+  }
+  .input {
+    width: 100%;
+    border: 0;
+    outline: 0;
+    line-height: 14px;
+    white-space: pre-wrap;
+  }
+  :deep(.ps) {
+    height: v-bind(descHeight);
+  }
+}
+</style>

src/renderer/components/ui/AppDebug.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="debug">
+    <pre>
+<slot />
+    </pre>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.debug {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  background-color: #fff;
+  width: 400px;
+  max-height: 400px;
+  overflow: scroll;
+  padding: 0 var(--spacing-xs);
+  border-radius: 5px;
+  color: #000;
+  font-size: 12px;
+  z-index: 1010;
+  pre {
+    font-family: var(--font-code);
+  }
+}
+</style>

src/renderer/composable/index.ts

@@ -50,6 +50,23 @@ export const onAddNewFragment = () => {
   track('snippets/add-fragment')
 }
 
+export const onAddDescription = async () => {
+  const snippetStore = useSnippetStore()
+
+  if (typeof snippetStore.selected?.description === 'string') return
+
+  if (
+    snippetStore.selected?.description === undefined ||
+    snippetStore.selected?.description === null
+  ) {
+    await snippetStore.patchSnippetsById(snippetStore.selectedId!, {
+      description: ''
+    })
+  }
+
+  track('snippets/add-description')
+}
+
 export const onAddNewFolder = async () => {
   const folderStore = useFolderStore()
   const snippetStore = useSnippetStore()

src/renderer/store/app.ts

@@ -34,6 +34,7 @@ export const useAppStore = defineStore('app', {
         titleHeight: 34,
         fragmentsHeight: 25,
         tagsHeight: 40,
+        descriptionHeight: 58,
         footerHeight: 30
       }
     },

src/renderer/store/snippets.ts

@@ -62,7 +62,9 @@ export const useSnippetStore = defineStore('snippets', {
     isTagsShow (): boolean {
       const appStore = useAppStore()
       return this.tagsCount ? this.tagsCount > 0 : appStore.showTags
-    }
+    },
+    isDescriptionShow: state =>
+      typeof state.selected?.description === 'string'
   },
 
   actions: {
@@ -104,15 +106,15 @@ export const useSnippetStore = defineStore('snippets', {
 
       if (!snippet) return
 
-      if (snippet.id === this.selected?.id) {
-        this.selected.name = data.value.name
+      if (snippet.id === this.selectedId) {
+        for (const props in data.value) {
+          (this.selected as any)[props] = data.value[props]
+        }
       }
 
-      if (snippet.name !== data.value.name) {
-        snippet.name = data.value.name
+      for (const props in data.value) {
+        (snippet as any)[props] = data.value[props]
       }
-
-      await this.getSnippets()
     },
     async patchCurrentSnippetContentByKey (
       key: keyof SnippetContent,
@@ -139,6 +141,7 @@ export const useSnippetStore = defineStore('snippets', {
       _body.isFavorites = false
       _body.folderId = ''
       _body.tagsIds = []
+      _body.description = null
 
       if (body) {
         _body = {
@@ -288,8 +291,6 @@ export const useSnippetStore = defineStore('snippets', {
       this.selected = this.snippets[0]
     },
     setSort (sort: SnippetsSort) {
-      const folderStore = useFolderStore()
-
       this.sort = sort
       store.app.set('sort', sort)
 

src/shared/types/main/analytics.d.ts

@@ -1,6 +1,7 @@
 type CombineWith<T extends string, U extends string> = `${U}/${T}`
 
 type SnippetEvents =
+  | 'add-description'
   | 'add-fragment'
   | 'add-new'
   | 'add-tag'
@@ -10,10 +11,10 @@ type SnippetEvents =
   | 'delete-from-favorites'
   | 'delete'
   | 'duplicate'
+  | 'format'
   | 'move-to-trash'
-  | 'set-language'
   | 'search'
-  | 'format'
+  | 'set-language'
 type FolderEvents = 'add-new' | 'delete' | 'set-language'
 type TagEvents = 'add-new' | 'delete'
 type AppEvents =

src/shared/types/main/db.d.ts

@@ -27,6 +27,7 @@ export interface Snippet {
   id: string
   name: string
   content: SnippetContent[]
+  description?: string | null
   folderId: string
   tagsIds: string[]
   isFavorites: boolean

src/shared/types/main/index.d.ts

@@ -30,15 +30,16 @@ export type ContextMenuType =
   | 'tag'
 
 type MainMenuAction =
-  | 'preferences'
-  | 'new-snippet'
+  | 'add-description'
   | 'copy-snippet'
   | 'format-snippet'
-  | 'sort-snippets'
-  | 'new-fragment'
   | 'new-folder'
-  | 'search'
+  | 'new-fragment'
+  | 'new-snippet'
+  | 'preferences'
   | 'preview-markdown'
+  | 'search'
+  | 'sort-snippets'
 
 type MainAction =
   | 'restart'

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

@@ -29,6 +29,7 @@ export interface AppSizes {
     fragmentsHeight: number
     tagsHeight: number
     footerHeight: number
+    descriptionHeight: number
   }
 }