feat(snippets): add description (#74)

Author: antonreshetov

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
       }
     },