From 0a2bf06eeaacab382efb95ee526835cdd6d48f99 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 06:11:42 +0300
Subject: [PATCH 1/7] polish(style): reset padding

---
 src/renderer/assets/scss/reset.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/assets/scss/reset.scss b/src/renderer/assets/scss/reset.scss
index 1ef701f4..06dcc218 100644
--- a/src/renderer/assets/scss/reset.scss
+++ b/src/renderer/assets/scss/reset.scss
@@ -69,6 +69,7 @@ textarea {
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
+  padding: 0;
 }
 
 button,

From 39f9a27113ce1b3aa46db9dbbf0528ec17271179 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 09:11:27 +0300
Subject: [PATCH 2/7] feat(snippets): add description

---
 src/renderer/components/editor/TheEditor.vue  |  4 +
 .../components/snippets/SnippetHeader.vue     | 11 ++-
 .../snippets/SnippetsDescription.vue          | 83 +++++++++++++++++++
 src/renderer/composable/index.ts              | 17 ++++
 src/renderer/store/app.ts                     |  1 +
 src/renderer/store/snippets.ts                | 19 +++--
 src/shared/types/main/db.d.ts                 |  1 +
 src/shared/types/main/index.d.ts              | 11 +--
 src/shared/types/renderer/store/app.d.ts      |  1 +
 9 files changed, 133 insertions(+), 15 deletions(-)
 create mode 100644 src/renderer/components/snippets/SnippetsDescription.vue

diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
index 0575d543..c9784742 100644
--- a/src/renderer/components/editor/TheEditor.vue
+++ b/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'
 })
 
diff --git a/src/renderer/components/snippets/SnippetHeader.vue b/src/renderer/components/snippets/SnippetHeader.vue
index f1dc76c6..cf6648bc 100644
--- a/src/renderer/components/snippets/SnippetHeader.vue
+++ b/src/renderer/components/snippets/SnippetHeader.vue
@@ -20,12 +20,16 @@
         <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>
@@ -33,7 +37,12 @@
 </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'
diff --git a/src/renderer/components/snippets/SnippetsDescription.vue b/src/renderer/components/snippets/SnippetsDescription.vue
new file mode 100644
index 00000000..9d00c7b3
--- /dev/null
+++ b/src/renderer/components/snippets/SnippetsDescription.vue
@@ -0,0 +1,83 @@
+<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
+  })
+  snippetStore.isNewDescription = false
+}
+
+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>
diff --git a/src/renderer/composable/index.ts b/src/renderer/composable/index.ts
index 4abb9d02..5d8e79cf 100644
--- a/src/renderer/composable/index.ts
+++ b/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()
diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
index b15d4054..040266a9 100644
--- a/src/renderer/store/app.ts
+++ b/src/renderer/store/app.ts
@@ -34,6 +34,7 @@ export const useAppStore = defineStore('app', {
         titleHeight: 34,
         fragmentsHeight: 25,
         tagsHeight: 40,
+        descriptionHeight: 58,
         footerHeight: 30
       }
     },
diff --git a/src/renderer/store/snippets.ts b/src/renderer/store/snippets.ts
index 985c0d2e..d61e23ea 100644
--- a/src/renderer/store/snippets.ts
+++ b/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)
 
diff --git a/src/shared/types/main/db.d.ts b/src/shared/types/main/db.d.ts
index 30c728f7..4d101d67 100644
--- a/src/shared/types/main/db.d.ts
+++ b/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
diff --git a/src/shared/types/main/index.d.ts b/src/shared/types/main/index.d.ts
index d57d7a88..0fa96240 100644
--- a/src/shared/types/main/index.d.ts
+++ b/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'
diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
index fb4d6b95..f48bab89 100644
--- a/src/shared/types/renderer/store/app.d.ts
+++ b/src/shared/types/renderer/store/app.d.ts
@@ -29,6 +29,7 @@ export interface AppSizes {
     fragmentsHeight: number
     tagsHeight: number
     footerHeight: number
+    descriptionHeight: number
   }
 }
 

From 98c641ce1526077c99ead99b86754792258216f9 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 09:13:16 +0300
Subject: [PATCH 3/7] feat(main: menu): add description to snippet

---
 src/main/menu/main.ts | 15 +++++++++++++++
 src/renderer/App.vue  |  7 ++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts
index cfe17f78..3816b327 100644
--- a/src/main/menu/main.ts
+++ b/src/main/menu/main.ts
@@ -236,6 +236,18 @@ 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',
@@ -243,6 +255,9 @@ const fileMenu: MenuItemConstructorOptions[] = [
       BrowserWindow.getFocusedWindow()?.webContents.send('main-menu:new-folder')
     }
   },
+  {
+    type: 'separator'
+  },
   {
     label: 'Find',
     accelerator: 'CommandOrControl+F',
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index fc65e76c..702e1a0a 100644
--- a/src/renderer/App.vue
+++ b/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)
 })

From 45dd2b113cb4e23c5527bcbeff1c702a02d0255d Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 09:13:40 +0300
Subject: [PATCH 4/7] polish(style): add placeholder style

---
 src/renderer/assets/scss/base.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/renderer/assets/scss/base.scss b/src/renderer/assets/scss/base.scss
index 91bc6ff9..046b69f3 100644
--- a/src/renderer/assets/scss/base.scss
+++ b/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;

From bda274b7b83fb22f8451e2f659914d2c291d8f63 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 09:14:23 +0300
Subject: [PATCH 5/7] types: add more

---
 src/shared/types/main/analytics.d.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/shared/types/main/analytics.d.ts b/src/shared/types/main/analytics.d.ts
index bc56c788..2087b8f2 100644
--- a/src/shared/types/main/analytics.d.ts
+++ b/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 =

From db6725ad9c8bec860cd1e85372c5b0505724435c Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 09:14:46 +0300
Subject: [PATCH 6/7] chore(ui): add dev debug component

---
 src/renderer/components/ui/AppDebug.vue | 29 +++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/renderer/components/ui/AppDebug.vue

diff --git a/src/renderer/components/ui/AppDebug.vue b/src/renderer/components/ui/AppDebug.vue
new file mode 100644
index 00000000..df505cc3
--- /dev/null
+++ b/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>

From 16aed57f3fc0ffbfb9f51bb055f37d3ee073070e Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 6 May 2022 09:21:54 +0300
Subject: [PATCH 7/7] chore: clean

---
 src/renderer/components/snippets/SnippetsDescription.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/snippets/SnippetsDescription.vue b/src/renderer/components/snippets/SnippetsDescription.vue
index 9d00c7b3..a5d7b1ae 100644
--- a/src/renderer/components/snippets/SnippetsDescription.vue
+++ b/src/renderer/components/snippets/SnippetsDescription.vue
@@ -37,7 +37,6 @@ const onBlur = (e: Event) => {
   snippetStore.patchSnippetsById(snippetStore.selectedId!, {
     description: (e.target as HTMLElement).innerText.trimEnd() || null
   })
-  snippetStore.isNewDescription = false
 }
 
 const onClick = () => {