From 820ae8fab218e215f2f9e85cd8976761688f2909 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 12 Apr 2022 12:25:45 +0300
Subject: [PATCH 01/13] chore: update CHANGELOG

---
 CHANGELOG.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46ab3cea..36027481 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,19 @@
+# [2.0.0-beta.4](https://github.com/massCodeIO/massCode/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2022-04-12)
+
+
+### Bug Fixes
+
+* **editor:** undo/redo stack ([84096c4](https://github.com/massCodeIO/massCode/commit/84096c47bcf88b49229997d592f473f23812672e))
+* **snippets:** sort in 'All snippets' ([ab799d5](https://github.com/massCodeIO/massCode/commit/ab799d5df478bed659d56cb6529c1dd589355c0f))
+
+
+### Features
+
+* add editor preferences ([#18](https://github.com/massCodeIO/massCode/issues/18)) ([d1fe23f](https://github.com/massCodeIO/massCode/commit/d1fe23fd510445426424bef85df2e3cf01c086e4))
+* **snippets:** add markdown preview ([#15](https://github.com/massCodeIO/massCode/issues/15)) ([c208871](https://github.com/massCodeIO/massCode/commit/c2088712ffbc38c2ce2593ec50dbaeaa6291bd7a))
+
+
+
 # [2.0.0-beta.3](https://github.com/massCodeIO/massCode/compare/v2.0.0-beta.2...v2.0.0-beta.3) (2022-04-11)
 
 

From a1e41b3ab567854eda7b9c636cb94c6e34614242 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 12 Apr 2022 15:18:06 +0300
Subject: [PATCH 02/13] feat: resizable layout (#19)

---
 package.json                                  |  1 +
 src/main/store/module/app.ts                  |  4 ++-
 src/renderer/App.vue                          |  3 ++
 src/renderer/components/editor/TheEditor.vue  |  4 ---
 .../components/sidebar/TheSidebar.vue         | 31 +++++++++++++++---
 .../components/snippets/SnippetList.vue       | 32 ++++++++++++++++---
 .../components/snippets/SnippetListHeader.vue |  1 +
 src/renderer/store/app.ts                     |  2 ++
 src/renderer/views/Main.vue                   |  6 +++-
 src/shared/types/main/store.d.ts              |  2 ++
 src/shared/types/renderer/store/app.d.ts      |  2 ++
 yarn.lock                                     | 12 +++++++
 12 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index eb74158f..a721560c 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "electron-store": "^8.0.1",
     "fs-extra": "^10.0.1",
     "highlight.js": "^11.5.1",
+    "interactjs": "^1.10.11",
     "lowdb": "^3.0.0",
     "markdown-it": "^12.3.2",
     "markdown-it-link-attributes": "^4.0.0",
diff --git a/src/main/store/module/app.ts b/src/main/store/module/app.ts
index 23ad09c9..0253dfa8 100644
--- a/src/main/store/module/app.ts
+++ b/src/main/store/module/app.ts
@@ -6,6 +6,8 @@ export default new Store<AppStore>({
   cwd: 'v2',
 
   defaults: {
-    bounds: {}
+    bounds: {},
+    sidebarWidth: 180,
+    snippetListWidth: 250
   }
 })
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 914aff53..0cb8d30b 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -36,6 +36,9 @@ const init = () => {
     store.preferences.get('editor')
   )
   if (isValid) appStore.editor = store.preferences.get('editor')
+
+  appStore.sizes.sidebar = store.app.get('sidebarWidth')
+  appStore.sizes.snippetList = store.app.get('snippetListWidth')
 }
 
 const setTheme = (theme: string) => {
diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
index 55ec830d..b18a327d 100644
--- a/src/renderer/components/editor/TheEditor.vue
+++ b/src/renderer/components/editor/TheEditor.vue
@@ -213,10 +213,6 @@ watch(
   }
 )
 
-appStore.$subscribe(mutation => {
-  console.log(mutation)
-})
-
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })
diff --git a/src/renderer/components/sidebar/TheSidebar.vue b/src/renderer/components/sidebar/TheSidebar.vue
index f610f215..a51bd917 100644
--- a/src/renderer/components/sidebar/TheSidebar.vue
+++ b/src/renderer/components/sidebar/TheSidebar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="sidebar">
+  <div
+    ref="sidebarRef"
+    class="sidebar"
+  >
     <SidebarList
       v-model="activeTab"
       :tabs="tabs"
@@ -70,14 +73,14 @@
       </AppTree>
     </SidebarList>
     <div
-      ref="gutter"
+      ref="gutterRef"
       class="gutter-line"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type {
   SidebarSystemFolder,
   SystemFolderAlias,
@@ -91,15 +94,20 @@ import Trash from '~icons/unicons/trash'
 import LabelAlt from '~icons/unicons/label-alt'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
-import { ipc, track } from '@/electron'
+import { ipc, store, track } from '@/electron'
 import { useTagStore } from '@/store/tags'
 import { emitter } from '@/composable'
+import interact from 'interactjs'
+import { useAppStore } from '@/store/app'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
 const tagStore = useTagStore()
+const appStore = useAppStore()
 
 const treeRef = ref()
+const sidebarRef = ref()
+const gutterRef = ref()
 
 const systemFolders = computed(() => {
   const folders = folderStore.system.map(i => {
@@ -178,6 +186,21 @@ const onDragEnter = (id: string) => {
   folderStore.hoveredId = id
 }
 
+onMounted(() => {
+  interact(sidebarRef.value).resizable({
+    allowFrom: gutterRef.value,
+    onmove: e => {
+      const { pageX } = e
+      const minWidth = 100
+
+      if (pageX < minWidth) return
+      const width = Math.floor(pageX)
+      appStore.sizes.sidebar = width
+      store.app.set('sidebarWidth', width)
+    }
+  })
+})
+
 watch(
   () => folderStore.hoveredId,
   v => {
diff --git a/src/renderer/components/snippets/SnippetList.vue b/src/renderer/components/snippets/SnippetList.vue
index 35f93dbd..fc735bc3 100644
--- a/src/renderer/components/snippets/SnippetList.vue
+++ b/src/renderer/components/snippets/SnippetList.vue
@@ -7,7 +7,7 @@
       <SnippetListHeader />
     </div>
     <div
-      ref="listRef"
+      ref="bodyRef"
       class="body"
     >
       <PerfectScrollbar>
@@ -23,6 +23,10 @@
         />
       </PerfectScrollbar>
     </div>
+    <div
+      ref="gutterRef"
+      class="gutter-line"
+    />
   </div>
 </template>
 
@@ -30,18 +34,37 @@
 import { emitter } from '@/composable'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import interact from 'interactjs'
+import { store } from '@/electron'
 
 const snippetStore = useSnippetStore()
 const appStore = useAppStore()
 
-const listRef = ref<HTMLElement>()
+const listRef = ref()
+const bodyRef = ref<HTMLElement>()
+const gutterRef = ref()
 
 const setScrollPosition = (offset: number) => {
-  const ps = listRef.value?.querySelector<HTMLElement>('.ps')
+  const ps = bodyRef.value?.querySelector<HTMLElement>('.ps')
   if (ps) ps.scrollTop = offset
 }
 
+onMounted(() => {
+  interact(listRef.value).resizable({
+    allowFrom: gutterRef.value,
+    onmove: e => {
+      const { pageX } = e
+      const minWidth = appStore.sizes.sidebar + 100
+      const width = Math.floor(pageX - appStore.sizes.sidebar)
+
+      if (pageX < minWidth) return
+      appStore.sizes.snippetList = width
+      store.app.set('snippetListWidth', width)
+    }
+  })
+})
+
 watch(
   () => appStore.isInit,
   () => {
@@ -59,6 +82,7 @@ emitter.on('folder:click', () => {
 
 <style lang="scss" scoped>
 .snippet-list {
+  position: relative;
   border-right: 1px solid var(--color-border);
   display: grid;
   grid-template-rows: 50px 1fr 10px;
diff --git a/src/renderer/components/snippets/SnippetListHeader.vue b/src/renderer/components/snippets/SnippetListHeader.vue
index d62efc20..a3d1373c 100644
--- a/src/renderer/components/snippets/SnippetListHeader.vue
+++ b/src/renderer/components/snippets/SnippetListHeader.vue
@@ -68,6 +68,7 @@ const onReset = () => {
   padding: 0 var(--spacing-sm);
   position: relative;
   top: var(--title-bar-height-offset);
+  width: 100%;
   input {
     outline: none;
     border: none;
diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
index 094ffed3..2e2e8730 100644
--- a/src/renderer/store/app.ts
+++ b/src/renderer/store/app.ts
@@ -18,6 +18,8 @@ export const useAppStore = defineStore('app', {
     showTags: true,
     sizes: {
       titlebar: 15,
+      sidebar: 180,
+      snippetList: 250,
       editor: {
         titleHeight: 34,
         fragmentsHeight: 25,
diff --git a/src/renderer/views/Main.vue b/src/renderer/views/Main.vue
index c781680c..9c9664ce 100644
--- a/src/renderer/views/Main.vue
+++ b/src/renderer/views/Main.vue
@@ -12,12 +12,16 @@ import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { useTagStore } from '@/store/tags'
 import { useAppStore } from '@/store/app'
+import { computed } from 'vue'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
 const tagStore = useTagStore()
 const appStore = useAppStore()
 
+const sidebarWidth = computed(() => appStore.sizes.sidebar + 'px')
+const snippetListWidth = computed(() => appStore.sizes.snippetList + 'px')
+
 const init = async () => {
   const storedFolderId = store.app.get('selectedFolderId')
   const storedFolderAlias = store.app.get('selectedFolderAlias')
@@ -62,7 +66,7 @@ track('main')
   height: 100vh;
   background-color: var(--color-bg);
   overflow: hidden;
-  grid-template-columns: var(--sidebar-width) var(--snippets-list-width) 1fr;
+  grid-template-columns: v-bind(sidebarWidth) v-bind(snippetListWidth) 1fr;
 }
 .update-available {
   position: absolute;
diff --git a/src/shared/types/main/store.d.ts b/src/shared/types/main/store.d.ts
index 22b2aabb..55dae0f8 100644
--- a/src/shared/types/main/store.d.ts
+++ b/src/shared/types/main/store.d.ts
@@ -4,6 +4,8 @@ export interface AppStore {
   selectedFolderAlias?: string
   selectedFolderIds?: string[]
   selectedSnippetId?: string
+  sidebarWidth: number
+  snippetListWidth: number
 }
 
 interface Editor {
diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
index b7ba2795..566d497e 100644
--- a/src/shared/types/renderer/store/app.d.ts
+++ b/src/shared/types/renderer/store/app.d.ts
@@ -2,6 +2,8 @@ import type { Ace } from 'ace-builds'
 
 export interface AppSizes {
   titlebar: number
+  sidebar: number
+  snippetList: number
   editor: {
     titleHeight: number
     fragmentsHeight: number
diff --git a/yarn.lock b/yarn.lock
index 596d16cc..ab5ba0a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1342,6 +1342,11 @@
     svgstore "^3.0.0-2"
     uuid "^3.3.2"
 
+"@interactjs/types@1.10.11":
+  version "1.10.11"
+  resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.11.tgz#29be25d503f9c7842df062fa3cda5b044a47cf2a"
+  integrity sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA==
+
 "@josephg/resolvable@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@josephg/resolvable/-/resolvable-1.0.1.tgz#69bc4db754d79e1a2f17a650d3466e038d94a5eb"
@@ -6958,6 +6963,13 @@ insertion-query@^1.1.0:
   resolved "https://registry.yarnpkg.com/insertion-query/-/insertion-query-1.1.0.tgz#25c98db5acdc8e012a1bc2ae8f617a8edf82ed5d"
   integrity sha512-5HZCK1xmD+Cm5q9/Qk1S8tr2BqHtcvseGsg7LKD3WlHRg4OOCl7d6C5raGNXAhfV4NlUcHmAtdJt0b3vJPEuiA==
 
+interactjs@^1.10.11:
+  version "1.10.11"
+  resolved "https://registry.yarnpkg.com/interactjs/-/interactjs-1.10.11.tgz#0b9eabe37f1f82fff68e22faad51269b8f2038ea"
+  integrity sha512-VPUWsGAOPmrZe1YF7Fq/4AIBBZ+3FikZRS8bpzT6VsAfUuhxl/CKJY73IAiZHd3fz9p174CXErn0Qs81XEFICA==
+  dependencies:
+    "@interactjs/types" "1.10.11"
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"

From a38f26d8912129ec866b600cdbcc3b5d1ed16f9a Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 12 Apr 2022 15:58:54 +0300
Subject: [PATCH 03/13] chore: fix type error

---
 src/renderer/components/snippets/SnippetsView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/snippets/SnippetsView.vue b/src/renderer/components/snippets/SnippetsView.vue
index 2c727af6..9cc40730 100644
--- a/src/renderer/components/snippets/SnippetsView.vue
+++ b/src/renderer/components/snippets/SnippetsView.vue
@@ -13,7 +13,7 @@
         v-model:lang="lang"
         :snippet-id="snippetStore.selectedId!"
         :fragment-index="snippetStore.fragment"
-        :is-search-mode="snippetStore.searchQuery?.length > 0"
+        :is-search-mode="isSearchMode"
         :fragments="snippetStore.isFragmentsShow"
       />
       <TheMarkdown
@@ -62,6 +62,10 @@ const isShowPlaceholder = computed(() => {
     snippetStore.selectedMultiple.length || snippetStore.snippets.length === 0
   )
 })
+
+const isSearchMode = computed(() => {
+  return snippetStore.searchQuery ? snippetStore.searchQuery.length > 0 : false
+})
 </script>
 
 <style lang="scss" scoped>

From 994acfa4be7039a4fdfa2165ac0376049b6b0c27 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 12 Apr 2022 16:00:16 +0300
Subject: [PATCH 04/13] chore: run ts check for vue separately

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a721560c..84122956 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "dev:server": "node build/scripts/dev-server.js",
     "dev:vue-devtools": "vue-devtools",
     "build": "npm run build:ts && node build/scripts/build.js ",
-    "build:ts": "vue-tsc --noEmit --skipLibCheck && tsc -p tsconfig.electron.json",
+    "build:ts": "tsc -p tsconfig.electron.json",
+    "ts-check:vue": "vue-tsc --noEmit --skipLibCheck",
     "lint": "eslint --ext .js,.ts,.vue . src",
     "lint:fix": "eslint --ext .js,.ts,.vue . --fix src",
     "release": "bumpp -c 'build: release v' -t",

From 7324926fd3a9c6de0ed6af30c8e752251e5642f0 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 12 Apr 2022 16:49:10 +0300
Subject: [PATCH 05/13] chore: track app install/update

---
 src/renderer/App.vue                 | 18 +++++++++++++++++-
 src/shared/types/main/analytics.d.ts |  1 +
 src/shared/types/main/store.d.ts     |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 0cb8d30b..aa56bf76 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import router from '@/router'
 import { ref, watch } from 'vue'
-import { ipc, store } from './electron'
+import { ipc, store, track } from './electron'
 import { useAppStore } from './store/app'
 import { repository } from '../../package.json'
 import { useSnippetStore } from './store/snippets'
@@ -35,10 +35,13 @@ const init = () => {
   const isValid = appStore.isEditorSettingsValid(
     store.preferences.get('editor')
   )
+
   if (isValid) appStore.editor = store.preferences.get('editor')
 
   appStore.sizes.sidebar = store.app.get('sidebarWidth')
   appStore.sizes.snippetList = store.app.get('snippetListWidth')
+
+  trackAppUpdate()
 }
 
 const setTheme = (theme: string) => {
@@ -47,6 +50,19 @@ const setTheme = (theme: string) => {
 
 const onClickUpdate = () => {
   ipc.invoke('main:open-url', `${repository}/releases`)
+  track('app/update')
+}
+
+const trackAppUpdate = () => {
+  const installedVersion = store.app.get('version')
+
+  if (!installedVersion) track('app/install')
+
+  if (installedVersion && appStore.version !== installedVersion) {
+    track('app/update', appStore.version)
+  }
+
+  store.app.set('version', appStore.version)
 }
 
 init()
diff --git a/src/shared/types/main/analytics.d.ts b/src/shared/types/main/analytics.d.ts
index 50dc95dd..ae18214b 100644
--- a/src/shared/types/main/analytics.d.ts
+++ b/src/shared/types/main/analytics.d.ts
@@ -20,6 +20,7 @@ type AppEvents =
   | 'open-storage'
   | 'migrate'
   | 'update'
+  | 'install'
   | 'empty-trash'
 
 type TrackSnippetEvents = CombineWith<SnippetEvents, 'snippets'>
diff --git a/src/shared/types/main/store.d.ts b/src/shared/types/main/store.d.ts
index 55dae0f8..1054d3a3 100644
--- a/src/shared/types/main/store.d.ts
+++ b/src/shared/types/main/store.d.ts
@@ -6,6 +6,7 @@ export interface AppStore {
   selectedSnippetId?: string
   sidebarWidth: number
   snippetListWidth: number
+  version?: string
 }
 
 interface Editor {

From 6d14e7df657f4762a8e43f207e909ee3eaed33cf Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 05:09:23 +0300
Subject: [PATCH 06/13] feat: update main menu (#21)

---
 src/main/menu/main.ts                         | 119 +++++++++++++++++-
 src/renderer/App.vue                          |  30 ++++-
 .../components/sidebar/SidebarList.vue        |  16 ++-
 .../components/sidebar/TheSidebar.vue         |  10 +-
 .../components/snippets/SnippetHeader.vue     |  21 +---
 .../components/snippets/SnippetList.vue       |  11 +-
 .../components/snippets/SnippetListHeader.vue |  16 +--
 src/renderer/composable/index.ts              |  58 ++++++++-
 src/renderer/store/folders.ts                 |   1 +
 src/shared/types/main/index.d.ts              |   9 +-
 .../types/renderer/composable/index.d.ts      |   1 +
 11 files changed, 233 insertions(+), 59 deletions(-)

diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts
index 2e8931c2..3bde1442 100644
--- a/src/main/menu/main.ts
+++ b/src/main/menu/main.ts
@@ -1,6 +1,6 @@
 import { createMenu } from '../components/menu'
 import type { MenuItemConstructorOptions } from 'electron'
-import { dialog, app, BrowserWindow } from 'electron'
+import { shell, dialog, app, BrowserWindow } from 'electron'
 import { version, author } from '../../../package.json'
 import os from 'os'
 
@@ -78,10 +78,6 @@ const appMenu: MenuItemConstructorOptions[] = [
 ]
 
 const helpMenu: MenuItemConstructorOptions[] = [
-  {
-    label: 'Toogle Dev tools',
-    role: 'toggleDevTools'
-  },
   {
     label: 'About',
     click () {
@@ -100,6 +96,62 @@ const helpMenu: MenuItemConstructorOptions[] = [
         `
       })
     }
+  },
+  {
+    label: 'Website',
+    click: () => {
+      shell.openExternal('https://masscode.io')
+    }
+  },
+  {
+    label: 'Change Log',
+    click: () => {
+      shell.openExternal(
+        'https://github.com/massCodeIO/massCode/blob/master/CHANGELOG.md'
+      )
+    }
+  },
+  {
+    label: 'Documentation',
+    click: () => {
+      shell.openExternal('https://masscode.io/documentation')
+    }
+  },
+  {
+    label: 'View in GitHub',
+    click: () => {
+      shell.openExternal('https://github.com/massCodeIO/massCode')
+    }
+  },
+  {
+    label: 'Report Issue',
+    click: () => {
+      shell.openExternal(
+        'https://github.com/massCodeIO/massCode/issues/new/choose'
+      )
+    }
+  },
+  {
+    type: 'separator'
+  },
+  {
+    label: 'Donate',
+    click: () => {
+      shell.openExternal('https://opencollective.com/masscode')
+    }
+  },
+  {
+    label: 'Twitter',
+    click: () => {
+      shell.openExternal('https://twitter.com/anton_reshetov')
+    }
+  },
+  {
+    type: 'separator'
+  },
+  {
+    label: 'Toggle Developer Tools',
+    role: 'toggleDevTools'
   }
 ]
 
@@ -110,15 +162,72 @@ if (isDev) {
   })
 }
 
+const fileMenu: MenuItemConstructorOptions[] = [
+  {
+    label: 'New Snippet',
+    accelerator: 'CommandOrControl+N',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:new-snippet'
+      )
+    }
+  },
+  {
+    label: 'New Fragment',
+    accelerator: 'CommandOrControl+T',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:new-fragment'
+      )
+    }
+  },
+  {
+    label: 'New Folder',
+    accelerator: 'CommandOrControl+Shift+N',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send('main-menu:new-folder')
+    }
+  }
+]
+
+const editorMenu: MenuItemConstructorOptions[] = [
+  {
+    label: 'Copy Snippet to Clipboard',
+    accelerator: 'Shift+CommandOrControl+C',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:copy-snippet'
+      )
+    }
+  },
+  {
+    label: 'Preview Markdown',
+    accelerator: 'Shift+CommandOrControl+M',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:preview-markdown'
+      )
+    }
+  }
+]
+
 const menuItems: MenuItemConstructorOptions[] = [
   {
     label: 'massCode',
     submenu: isMac ? appMenuMac : appMenu
   },
+  {
+    label: 'File',
+    submenu: fileMenu
+  },
   {
     label: 'Edit',
     role: 'editMenu'
   },
+  {
+    label: 'Editor',
+    submenu: editorMenu
+  },
   {
     label: 'Help',
     submenu: helpMenu
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index aa56bf76..a87d2389 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -20,6 +20,12 @@ import { ipc, store, track } from './electron'
 import { useAppStore } from './store/app'
 import { repository } from '../../package.json'
 import { useSnippetStore } from './store/snippets'
+import {
+  onAddNewSnippet,
+  onAddNewFragment,
+  onAddNewFolder,
+  onCopySnippet
+} from '@/composable'
 
 // По какой то причине необходимо явно установить роут в '/'
 // для корректного поведения в продакшен сборке
@@ -84,9 +90,31 @@ ipc.on('main-menu:preferences', () => {
   router.push('/preferences')
 })
 
-ipc.on('main:update-available', async () => {
+ipc.on('main:update-available', () => {
   isUpdateAvailable.value = true
 })
+
+ipc.on('main-menu:new-folder', async () => {
+  await onAddNewFolder()
+})
+
+ipc.on('main-menu:new-snippet', async () => {
+  await onAddNewSnippet()
+})
+
+ipc.on('main-menu:new-fragment', () => {
+  onAddNewFragment()
+})
+
+ipc.on('main-menu:preview-markdown', async () => {
+  if (snippetStore.currentLanguage === 'markdown') {
+    snippetStore.isMarkdownPreview = !snippetStore.isMarkdownPreview
+  }
+})
+
+ipc.on('main-menu:copy-snippet', () => {
+  onCopySnippet()
+})
 </script>
 
 <style lang="scss">
diff --git a/src/renderer/components/sidebar/SidebarList.vue b/src/renderer/components/sidebar/SidebarList.vue
index f51ccc31..0fd6e403 100644
--- a/src/renderer/components/sidebar/SidebarList.vue
+++ b/src/renderer/components/sidebar/SidebarList.vue
@@ -26,7 +26,7 @@
       </div>
     </div>
     <div
-      ref="listRef"
+      ref="bodyRef"
       class="body"
       :class="{ 'is-system': isSystem }"
     >
@@ -46,8 +46,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import type { Tab, Tabs } from '@shared/types/renderer/sidebar'
+import { emitter, setScrollPosition } from '@/composable'
 
 interface Props {
   title?: string
@@ -68,6 +69,8 @@ const props = withDefaults(defineProps<Props>(), {
   isSystem: false
 })
 
+const bodyRef = ref<HTMLElement>()
+
 const activeTab = computed({
   get: () => props.modelValue,
   set: v => {
@@ -78,6 +81,15 @@ const activeTab = computed({
 const onClickTab = (tab: Tab) => {
   activeTab.value = tab
 }
+
+emitter.on('scroll-to:folder', id => {
+  nextTick(() => {
+    const el = document.querySelector<HTMLElement>(`[data-id='${id}']`)
+    if (el) {
+      setScrollPosition(bodyRef.value!, el.getBoundingClientRect().top + 210)
+    }
+  })
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/sidebar/TheSidebar.vue b/src/renderer/components/sidebar/TheSidebar.vue
index a51bd917..db5fa21c 100644
--- a/src/renderer/components/sidebar/TheSidebar.vue
+++ b/src/renderer/components/sidebar/TheSidebar.vue
@@ -58,6 +58,7 @@
         <template #default="{ node }">
           <SidebarListItem
             :id="node.id"
+            :data-id="node.id"
             :is-folder="true"
             :model="node"
             @drop="onDrop($event, node.id)"
@@ -94,9 +95,9 @@ import Trash from '~icons/unicons/trash'
 import LabelAlt from '~icons/unicons/label-alt'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
-import { ipc, store, track } from '@/electron'
+import { ipc, store } from '@/electron'
 import { useTagStore } from '@/store/tags'
-import { emitter } from '@/composable'
+import { emitter, onAddNewFolder } from '@/composable'
 import interact from 'interactjs'
 import { useAppStore } from '@/store/app'
 
@@ -159,11 +160,6 @@ const contextMenuHandler = () => {
   })
 }
 
-const onAddNewFolder = async () => {
-  await folderStore.addNewFolder()
-  track('folders/add-new')
-}
-
 const onUpdate = async () => {
   await folderStore.updateFoldersTable()
 }
diff --git a/src/renderer/components/snippets/SnippetHeader.vue b/src/renderer/components/snippets/SnippetHeader.vue
index ba25d844..1a1bf095 100644
--- a/src/renderer/components/snippets/SnippetHeader.vue
+++ b/src/renderer/components/snippets/SnippetHeader.vue
@@ -33,12 +33,10 @@
 </template>
 
 <script setup lang="ts">
-import { emitter } from '@/composable'
-import { ipc, track } from '@/electron'
+import { emitter, onAddNewFragment, onCopySnippet } from '@/composable'
 import { useSnippetStore } from '@/store/snippets'
-import { useClipboard, useDebounceFn } from '@vueuse/core'
+import { useDebounceFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import type { NotificationRequest } from '@shared/types/main'
 import { useAppStore } from '@/store/app'
 
 const snippetStore = useSnippetStore()
@@ -57,21 +55,6 @@ const name = computed({
   )
 })
 
-const onAddNewFragment = () => {
-  snippetStore.addNewFragmentToSnippetsById(snippetStore.selectedId!)
-  snippetStore.fragment = snippetStore.fragmentCount!
-  track('snippets/add-fragment')
-}
-
-const onCopySnippet = () => {
-  const { copy } = useClipboard({ source: snippetStore.currentContent })
-  copy()
-  ipc.invoke<any, NotificationRequest>('main:notification', {
-    body: 'Snippet copied'
-  })
-  track('snippets/copy')
-}
-
 const onClickMarkdownPreview = () => {
   snippetStore.isMarkdownPreview = !snippetStore.isMarkdownPreview
 }
diff --git a/src/renderer/components/snippets/SnippetList.vue b/src/renderer/components/snippets/SnippetList.vue
index fc735bc3..570cbacf 100644
--- a/src/renderer/components/snippets/SnippetList.vue
+++ b/src/renderer/components/snippets/SnippetList.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-import { emitter } from '@/composable'
+import { emitter, setScrollPosition } from '@/composable'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
 import { onMounted, ref, watch } from 'vue'
@@ -45,11 +45,6 @@ const listRef = ref()
 const bodyRef = ref<HTMLElement>()
 const gutterRef = ref()
 
-const setScrollPosition = (offset: number) => {
-  const ps = bodyRef.value?.querySelector<HTMLElement>('.ps')
-  if (ps) ps.scrollTop = offset
-}
-
 onMounted(() => {
   interact(listRef.value).resizable({
     allowFrom: gutterRef.value,
@@ -71,12 +66,12 @@ watch(
     const el = document.querySelector<HTMLElement>(
       `[data-id='${snippetStore.selectedId!}']`
     )
-    if (el?.offsetTop) setScrollPosition(el.offsetTop)
+    if (el?.offsetTop) setScrollPosition(bodyRef.value!, el.offsetTop)
   }
 )
 
 emitter.on('folder:click', () => {
-  setScrollPosition(0)
+  setScrollPosition(bodyRef.value!, 0)
 })
 </script>
 
diff --git a/src/renderer/components/snippets/SnippetListHeader.vue b/src/renderer/components/snippets/SnippetListHeader.vue
index a3d1373c..444cb453 100644
--- a/src/renderer/components/snippets/SnippetListHeader.vue
+++ b/src/renderer/components/snippets/SnippetListHeader.vue
@@ -23,15 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import { emitter } from '@/composable'
-import { useFolderStore } from '@/store/folders'
+import { onAddNewSnippet } from '@/composable'
 import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
 import { computed } from 'vue'
 import { track } from '@/electron'
 
 const snippetStore = useSnippetStore()
-const folderStore = useFolderStore()
 
 const query = computed({
   get: () => snippetStore.searchQuery,
@@ -43,18 +41,6 @@ const query = computed({
   }, 300)
 })
 
-const onAddNewSnippet = async () => {
-  if (folderStore.selectedAlias !== undefined) return
-  if (!folderStore.selectedId) return
-
-  await snippetStore.addNewSnippet()
-  await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
-  await snippetStore.getSnippets()
-
-  emitter.emit('focus:snippet-name', true)
-  track('snippets/add-new')
-}
-
 const onReset = () => {
   snippetStore.searchQuery = undefined
   snippetStore.setSnippetsByAlias('all')
diff --git a/src/renderer/composable/index.ts b/src/renderer/composable/index.ts
index 1b1c2d6c..b1a8e4d4 100644
--- a/src/renderer/composable/index.ts
+++ b/src/renderer/composable/index.ts
@@ -1,10 +1,66 @@
-import { createFetch } from '@vueuse/core'
+import { createFetch, useClipboard } from '@vueuse/core'
 import mitt from 'mitt'
 import type { EmitterEvents } from '@shared/types/renderer/composable'
 import { API_PORT } from '../../main/config'
+import { useFolderStore } from '@/store/folders'
+import { useSnippetStore } from '@/store/snippets'
+import { ipc, track } from '@/electron'
+import type { NotificationRequest } from '@shared/types/main'
 
 export const useApi = createFetch({
   baseUrl: `http://localhost:${API_PORT}`
 })
 
 export const emitter = mitt<EmitterEvents>()
+
+export const onAddNewSnippet = async () => {
+  const folderStore = useFolderStore()
+  const snippetStore = useSnippetStore()
+
+  if (folderStore.selectedAlias !== undefined) return
+  if (!folderStore.selectedId) return
+
+  await snippetStore.addNewSnippet()
+  await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
+  await snippetStore.getSnippets()
+
+  emitter.emit('focus:snippet-name', true)
+  track('snippets/add-new')
+}
+
+export const onAddNewFragment = () => {
+  const snippetStore = useSnippetStore()
+
+  snippetStore.addNewFragmentToSnippetsById(snippetStore.selectedId!)
+  snippetStore.fragment = snippetStore.fragmentCount!
+
+  track('snippets/add-fragment')
+}
+
+export const onAddNewFolder = async () => {
+  const folderStore = useFolderStore()
+  const snippetStore = useSnippetStore()
+
+  const folder = await folderStore.addNewFolder()
+  snippetStore.selected = undefined
+
+  emitter.emit('scroll-to:folder', folder.id)
+  track('folders/add-new')
+}
+
+export const onCopySnippet = () => {
+  const snippetStore = useSnippetStore()
+
+  const { copy } = useClipboard({ source: snippetStore.currentContent })
+  copy()
+
+  ipc.invoke<any, NotificationRequest>('main:notification', {
+    body: 'Snippet copied'
+  })
+  track('snippets/copy')
+}
+
+export const setScrollPosition = (el: HTMLElement, offset: number) => {
+  const ps = el.querySelector('.ps')
+  if (ps) ps.scrollTop = offset
+}
diff --git a/src/renderer/store/folders.ts b/src/renderer/store/folders.ts
index c296b982..8f23314b 100644
--- a/src/renderer/store/folders.ts
+++ b/src/renderer/store/folders.ts
@@ -46,6 +46,7 @@ export const useFolderStore = defineStore('folders', {
       await this.getFolders()
       this.selectId(data.value.id)
       await snippetStore.getSnippetsByFolderIds(this.selectedIds!)
+      return data.value as Folder
     },
     async patchFoldersById (id: string, body: Partial<Folder>) {
       body.updatedAt = new Date().valueOf()
diff --git a/src/shared/types/main/index.d.ts b/src/shared/types/main/index.d.ts
index 6c9a6a8c..48a120f7 100644
--- a/src/shared/types/main/index.d.ts
+++ b/src/shared/types/main/index.d.ts
@@ -29,7 +29,14 @@ export type ContextMenuType =
   | 'favorites'
   | 'tag'
 
-type MainMenuAction = 'preferences' | 'new-snippet'
+type MainMenuAction =
+  | 'preferences'
+  | 'new-snippet'
+  | 'copy-snippet'
+  | 'new-fragment'
+  | 'new-folder'
+  | 'search'
+  | 'preview-markdown'
 
 type MainAction =
   | 'restart'
diff --git a/src/shared/types/renderer/composable/index.d.ts b/src/shared/types/renderer/composable/index.d.ts
index 9f5eb6aa..ef47e98c 100644
--- a/src/shared/types/renderer/composable/index.d.ts
+++ b/src/shared/types/renderer/composable/index.d.ts
@@ -1,4 +1,5 @@
 export type EmitterEvents = {
   'focus:snippet-name': boolean
   'folder:click': any
+  'scroll-to:folder': string
 }

From 14b0f86ab67ed7bea7277c424988f75e07a8ed91 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 10:32:53 +0300
Subject: [PATCH 07/13] feat: add prettier for snippets formatting (#22)

---
 package.json                                  |  1 +
 src/main/menu/main.ts                         |  9 +++
 src/main/store/module/preferences.ts          |  5 +-
 src/renderer/App.vue                          | 11 +++-
 src/renderer/components/editor/TheEditor.vue  | 59 +++++++++++++++++++
 .../preferences/EditorPreferences.vue         | 35 ++++++++++-
 src/renderer/components/ui/menu/AppMenu.vue   | 31 +++++++---
 src/renderer/store/app.ts                     |  5 +-
 src/renderer/views/Preferences.vue            |  5 +-
 src/shared/types/main/index.d.ts              |  1 +
 src/shared/types/main/store.d.ts              |  3 +
 .../types/renderer/composable/index.d.ts      |  1 +
 src/shared/types/renderer/store/app.d.ts      |  3 +
 yarn.lock                                     |  5 ++
 14 files changed, 159 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 84122956..99b81534 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/node": "^17.0.4",
+    "@types/prettier": "^2.6.0",
     "@types/sanitize-html": "^2.6.2",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts
index 3bde1442..69e6c92d 100644
--- a/src/main/menu/main.ts
+++ b/src/main/menu/main.ts
@@ -200,6 +200,15 @@ const editorMenu: MenuItemConstructorOptions[] = [
       )
     }
   },
+  {
+    label: 'Format',
+    accelerator: 'Shift+CommandOrControl+F',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:format-snippet'
+      )
+    }
+  },
   {
     label: 'Preview Markdown',
     accelerator: 'Shift+CommandOrControl+M',
diff --git a/src/main/store/module/preferences.ts b/src/main/store/module/preferences.ts
index 7706ea76..83eb9515 100644
--- a/src/main/store/module/preferences.ts
+++ b/src/main/store/module/preferences.ts
@@ -19,7 +19,10 @@ export default new Store<PreferencesStore>({
       fontFamily: 'SF Mono, Consolas, Menlo',
       fontSize: 12,
       showInvisibles: false,
-      tabSize: 2
+      tabSize: 2,
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
     }
   }
 })
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index a87d2389..60e8aa5c 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -24,7 +24,8 @@ import {
   onAddNewSnippet,
   onAddNewFragment,
   onAddNewFolder,
-  onCopySnippet
+  onCopySnippet,
+  emitter
 } from '@/composable'
 
 // По какой то причине необходимо явно установить роут в '/'
@@ -115,12 +116,20 @@ ipc.on('main-menu:preview-markdown', async () => {
 ipc.on('main-menu:copy-snippet', () => {
   onCopySnippet()
 })
+
+ipc.on('main-menu:format-snippet', () => {
+  emitter.emit('format-snippet', true)
+})
 </script>
 
 <style lang="scss">
 body {
   margin: 0;
 }
+#app {
+  height: 100vh;
+  overflow: hidden;
+}
 .app {
   &-title-bar {
     position: absolute;
diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
index b18a327d..58ebed0e 100644
--- a/src/renderer/components/editor/TheEditor.vue
+++ b/src/renderer/components/editor/TheEditor.vue
@@ -37,6 +37,15 @@ import { languages } from './languages'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
 import { track } from '@/electron'
+import prettier from 'prettier/standalone'
+import parserTypescript from 'prettier/parser-typescript'
+import parserBabel from 'prettier/parser-babel'
+import parserHtml from 'prettier/parser-html'
+import parserGraphql from 'prettier/parser-graphql'
+import parserMarkdown from 'prettier/parser-markdown'
+import parserPostcss from 'prettier/parser-postcss'
+import parserYaml from 'prettier/parser-yaml'
+import { emitter } from '@/composable'
 
 interface Props {
   lang: Language
@@ -148,6 +157,54 @@ const setValue = () => {
   }
 }
 
+const format = () => {
+  const availableLang: Language[] = [
+    'javascript',
+    'typescript',
+    'json',
+    'json5',
+    'yaml',
+    'html',
+    'markdown',
+    'graphqlschema',
+    'css',
+    'sass',
+    'scss',
+    'less'
+  ]
+
+  if (!availableLang.includes(props.lang)) return
+
+  let parser = props.lang as string
+
+  if (props.lang === 'javascript') parser = 'babel'
+  if (props.lang === 'graphqlschema') parser = 'graphql'
+
+  try {
+    const formatted = prettier.format(props.modelValue, {
+      parser,
+      plugins: [
+        parserTypescript,
+        parserBabel,
+        parserHtml,
+        parserMarkdown,
+        parserPostcss,
+        parserGraphql,
+        parserYaml
+      ],
+      tabWidth: appStore.editor.tabSize,
+      trailingComma: appStore.editor.trailingComma,
+      semi: appStore.editor.semi,
+      singleQuote: appStore.editor.singleQuote
+    })
+
+    // Обновляем напрямую без debounce
+    snippetStore.patchCurrentSnippetContentByKey('value', formatted)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
 const setLang = () => {
   editor.session.setMode(`ace/mode/${localLang.value}`)
   track('snippets/set-language', localLang.value)
@@ -213,6 +270,8 @@ watch(
   }
 )
 
+emitter.on('format-snippet', () => format())
+
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })
diff --git a/src/renderer/components/preferences/EditorPreferences.vue b/src/renderer/components/preferences/EditorPreferences.vue
index a2f3cbcf..92ddd91e 100644
--- a/src/renderer/components/preferences/EditorPreferences.vue
+++ b/src/renderer/components/preferences/EditorPreferences.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="editor-preferences">
     <AppForm>
+      <h4>Editor</h4>
       <AppFormItem label="Font Size">
         <AppInput
           v-model="appStore.editor.fontSize"
@@ -30,6 +31,25 @@
           name="showInvisibles"
         />
       </AppFormItem>
+      <h4>Prettier</h4>
+      <AppFormItem label="Trailing Comma">
+        <AppSelect
+          v-model="appStore.editor.trailingComma"
+          :options="trailingCommaOptions"
+        />
+      </AppFormItem>
+      <AppFormItem label="Semi">
+        <AppCheckbox
+          v-model="appStore.editor.semi"
+          name="semi"
+        />
+      </AppFormItem>
+      <AppFormItem label="Single Quote">
+        <AppCheckbox
+          v-model="appStore.editor.singleQuote"
+          name="semi"
+        />
+      </AppFormItem>
     </AppForm>
   </div>
 </template>
@@ -46,6 +66,12 @@ const wrapOptions = [
   { label: 'Off', value: 'off' }
 ]
 
+const trailingCommaOptions = [
+  { label: 'None', value: 'none' },
+  { label: 'All', value: 'all' },
+  { label: 'ES6', value: 'es6' }
+]
+
 watch(
   () => appStore.editor,
   v => {
@@ -55,4 +81,11 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+h4 {
+  &:first-child {
+    margin-top: 0;
+  }
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/renderer/components/ui/menu/AppMenu.vue b/src/renderer/components/ui/menu/AppMenu.vue
index 9a80deb3..498f4bab 100644
--- a/src/renderer/components/ui/menu/AppMenu.vue
+++ b/src/renderer/components/ui/menu/AppMenu.vue
@@ -11,8 +11,13 @@
         {{ i.name }}
       </div>
     </div>
-    <div class="body">
-      <slot />
+    <div
+      ref="bodyRef"
+      class="body"
+    >
+      <PerfectScrollbar>
+        <slot />
+      </PerfectScrollbar>
     </div>
   </div>
 </template>
@@ -39,9 +44,12 @@ const props = defineProps<Props>()
 
 const items = ref<Item[]>([])
 const value = computed(() => props.modelValue)
+const bodyRef = ref<HTMLElement>()
 
 const onClickItem = (item: Item) => {
   emit('update:modelValue', item.value)
+  const el = bodyRef.value?.querySelector('.ps')
+  if (el) el.scrollTop = 0
 }
 
 const update = (value: string) => {
@@ -55,15 +63,22 @@ provide('items', items.value)
 
 <style lang="scss" scoped>
 .menu {
+  width: 100%;
+  height: 300px;
   display: grid;
   grid-template-columns: 150px 1fr;
   gap: var(--spacing-sm);
-}
-.name {
-  padding: var(--spacing-xs);
-  &.is-selected {
-    border-radius: 5px;
-    background-color: var(--color-contrast-lower-alt);
+  .name {
+    padding: var(--spacing-xs);
+    &.is-selected {
+      border-radius: 5px;
+      background-color: var(--color-contrast-lower-alt);
+    }
+  }
+  .body {
+    :deep(.ps) {
+      height: calc(100vh - 80px);
+    }
   }
 }
 </style>
diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
index 2e2e8730..97c513ba 100644
--- a/src/renderer/store/app.ts
+++ b/src/renderer/store/app.ts
@@ -8,7 +8,10 @@ const EDITOR_DEFAULTS: EditorSettings = {
   fontSize: 12,
   showInvisibles: false,
   tabSize: 2,
-  wrap: 'free'
+  wrap: 'free',
+  trailingComma: 'none',
+  semi: false,
+  singleQuote: true
 }
 
 export const useAppStore = defineStore('app', {
diff --git a/src/renderer/views/Preferences.vue b/src/renderer/views/Preferences.vue
index 56b4daaa..6293019c 100644
--- a/src/renderer/views/Preferences.vue
+++ b/src/renderer/views/Preferences.vue
@@ -45,16 +45,15 @@ track('preferences')
     margin: 0;
   }
   margin-top: var(--title-bar-height);
-  padding: var(--spacing-sm);
 }
 .title {
+  padding: var(--spacing-sm);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .body {
-  padding-top: var(--spacing-sm);
+  padding: 0 0 var(--spacing-sm) var(--spacing-sm);
   display: grid;
-  grid-template-columns: 200px 1fr;
 }
 </style>
diff --git a/src/shared/types/main/index.d.ts b/src/shared/types/main/index.d.ts
index 48a120f7..9020dfb9 100644
--- a/src/shared/types/main/index.d.ts
+++ b/src/shared/types/main/index.d.ts
@@ -33,6 +33,7 @@ type MainMenuAction =
   | 'preferences'
   | 'new-snippet'
   | 'copy-snippet'
+  | 'format-snippet'
   | 'new-fragment'
   | 'new-folder'
   | 'search'
diff --git a/src/shared/types/main/store.d.ts b/src/shared/types/main/store.d.ts
index 1054d3a3..20b321ed 100644
--- a/src/shared/types/main/store.d.ts
+++ b/src/shared/types/main/store.d.ts
@@ -15,6 +15,9 @@ interface Editor {
   showInvisibles: boolean
   tabSize: number
   wrap: string
+  trailingComma: 'all' | 'none' | 'es5'
+  semi: boolean
+  singleQuote: boolean
 }
 export interface PreferencesStore {
   storagePath: string
diff --git a/src/shared/types/renderer/composable/index.d.ts b/src/shared/types/renderer/composable/index.d.ts
index ef47e98c..f1383e4d 100644
--- a/src/shared/types/renderer/composable/index.d.ts
+++ b/src/shared/types/renderer/composable/index.d.ts
@@ -2,4 +2,5 @@ export type EmitterEvents = {
   'focus:snippet-name': boolean
   'folder:click': any
   'scroll-to:folder': string
+  'format-snippet': boolean
 }
diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
index 566d497e..154ce014 100644
--- a/src/shared/types/renderer/store/app.d.ts
+++ b/src/shared/types/renderer/store/app.d.ts
@@ -18,6 +18,9 @@ export interface EditorSettings {
   fontFamily: string
   wrap: Ace.EditSessionOptions['wrap']
   tabSize: number
+  trailingComma: 'all' | 'none' | 'es5'
+  semi: boolean
+  singleQuote: boolean
 }
 export interface State {
   platform: NodeJS.Platform
diff --git a/yarn.lock b/yarn.lock
index ab5ba0a9..30564de1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1851,6 +1851,11 @@
     "@types/node" "*"
     xmlbuilder ">=11.0.1"
 
+"@types/prettier@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.0.tgz#efcbd41937f9ae7434c714ab698604822d890759"
+  integrity sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"

From b5d3ee01cf7ad48dffb0255d10b652f98659867b Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 10:37:56 +0300
Subject: [PATCH 08/13] fix(snippets): open external link in markdown

---
 src/renderer/components/markdown/TheMarkdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/markdown/TheMarkdown.vue b/src/renderer/components/markdown/TheMarkdown.vue
index 84d48706..7c526837 100644
--- a/src/renderer/components/markdown/TheMarkdown.vue
+++ b/src/renderer/components/markdown/TheMarkdown.vue
@@ -84,8 +84,8 @@ const renderer = computed(() => getRenderer())
 
 const openExternal = (e: Event) => {
   const el = e.target as HTMLAnchorElement
+  e.preventDefault()
   if (el.classList.contains('external')) {
-    e.preventDefault()
     ipc.invoke('main:open-url', el.href)
   }
 }

From 35e77372228bc946f26c3abd036564b2c1778bae Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 16:22:43 +0300
Subject: [PATCH 09/13] chore: update README

---
 README.md | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c92a7b39..0502e7bb 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
   <img src="./hero.png">
 </p>
 
-<h1 align="center">massCode next</h1>
+<h1 align="center">massCode</h1>
 
 <p align="center">
   <strong>Built with Electron, Vue 3 & Ace Editor.</strong>
@@ -29,10 +29,35 @@
 
 The best support right now is your star for the project. You can also help spread the word about the app in the public.
 
-## Feature for now
+<!-- ## Feature for now
 - Support M1
 - Syntax highlighting over 170 languages
-- API to fetch snippets on the localhost
+- API to fetch snippets on the localhost -->
+
+## Features
+### Organization
+massCode allows you to organize snippets using multi-level folders as well as tags. Each snippet has fragments - tabs, which gives even greater level of organization.
+
+### Editor
+A snippet manager must not only provide organization of snippets but also have a good code editor. That's why under the hood of massCode there's [Ace](https://microsoft.github.io/monaco-editor). Ace is a high performance code editor which supports syntax highlighting for over 170 languages. We also added a [Prettier](https://prettier.io/) to code formatter.
+
+### Markdown
+massCode allows you to write in Markdown and also provide syntax highlighting inside a code block. And of course there is a preview.
+
+### Search
+It is impossible to imagine a productive snippets manager without quick access to snippets. Therefore massCode has a fast full-text search with highlighting of the search query.
+
+### Autosave
+massCode automatically saves any changes you make during work, so you don't have to worry about losing changes.
+
+### Sync
+You can use any service that provides cloud synchronization, such as iCloud Drive, Google Drive, Dropbox or other similar.
+
+### Database
+massCode uses a simple JSON to store your data. The database files are on your local computer.
+
+### API Server
+Coming soon.
 
 ## Overview
 
@@ -45,4 +70,10 @@ massCode allows you to organize snippets using multi-level folders as well as ta
  - [Discussions](https://github.com/massCodeIO/massCode/discussions).
 
 ## Other
-You can also [download](https://github.com/antonreshetov/massCode) massCode v1.
\ No newline at end of file
+You can also [download](https://github.com/antonreshetov/massCode) massCode v1.
+
+## License
+
+[AGPL-3.0](https://github.com/massCodeIO/massCode/blob/master/LICENSE)
+
+Copyright (c) 2019-present, Anton Reshetov.
\ No newline at end of file

From d0fac146ebe2228a460253d9bf875a2191005fdb Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 16:40:32 +0300
Subject: [PATCH 10/13] chore: track snippet format

---
 src/renderer/components/editor/TheEditor.vue | 1 +
 src/shared/types/main/analytics.d.ts         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
index 58ebed0e..9b206657 100644
--- a/src/renderer/components/editor/TheEditor.vue
+++ b/src/renderer/components/editor/TheEditor.vue
@@ -200,6 +200,7 @@ const format = () => {
 
     // Обновляем напрямую без debounce
     snippetStore.patchCurrentSnippetContentByKey('value', formatted)
+    track('snippets/format')
   } catch (err) {
     console.error(err)
   }
diff --git a/src/shared/types/main/analytics.d.ts b/src/shared/types/main/analytics.d.ts
index ae18214b..ebb59653 100644
--- a/src/shared/types/main/analytics.d.ts
+++ b/src/shared/types/main/analytics.d.ts
@@ -13,6 +13,7 @@ type SnippetEvents =
   | 'move-to-trash'
   | 'set-language'
   | 'search'
+  | 'format'
 type FolderEvents = 'add-new' | 'delete' | 'set-language'
 type TagEvents = 'add-new' | 'delete'
 type AppEvents =

From 097d2cbf688fdfc7404d1e7d9e479bb70dd42ed0 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 16:54:48 +0300
Subject: [PATCH 11/13] fix(snippets): cut off snippets name for Windows #20
 (#24)

---
 src/renderer/components/editor/TheEditor.vue         | 1 +
 src/renderer/components/snippets/SnippetHeader.vue   | 1 +
 src/renderer/components/snippets/SnippetListItem.vue | 1 +
 src/shared/types/main/analytics.d.ts                 | 1 +
 4 files changed, 4 insertions(+)

diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
index 58ebed0e..9b206657 100644
--- a/src/renderer/components/editor/TheEditor.vue
+++ b/src/renderer/components/editor/TheEditor.vue
@@ -200,6 +200,7 @@ const format = () => {
 
     // Обновляем напрямую без debounce
     snippetStore.patchCurrentSnippetContentByKey('value', formatted)
+    track('snippets/format')
   } catch (err) {
     console.error(err)
   }
diff --git a/src/renderer/components/snippets/SnippetHeader.vue b/src/renderer/components/snippets/SnippetHeader.vue
index 1a1bf095..3d203737 100644
--- a/src/renderer/components/snippets/SnippetHeader.vue
+++ b/src/renderer/components/snippets/SnippetHeader.vue
@@ -82,6 +82,7 @@ emitter.on('focus:snippet-name', () => {
       border: 0;
       width: 100%;
       outline: none;
+      line-height: 32px;
       text-overflow: ellipsis;
     }
   }
diff --git a/src/renderer/components/snippets/SnippetListItem.vue b/src/renderer/components/snippets/SnippetListItem.vue
index 3414b553..c64d2d61 100644
--- a/src/renderer/components/snippets/SnippetListItem.vue
+++ b/src/renderer/components/snippets/SnippetListItem.vue
@@ -308,6 +308,7 @@ const onDragEnd = () => {
   overflow: hidden;
   position: relative;
   z-index: 1;
+  line-height: 24px;
   span {
     display: -webkit-box;
     -webkit-line-clamp: 1;
diff --git a/src/shared/types/main/analytics.d.ts b/src/shared/types/main/analytics.d.ts
index ae18214b..ebb59653 100644
--- a/src/shared/types/main/analytics.d.ts
+++ b/src/shared/types/main/analytics.d.ts
@@ -13,6 +13,7 @@ type SnippetEvents =
   | 'move-to-trash'
   | 'set-language'
   | 'search'
+  | 'format'
 type FolderEvents = 'add-new' | 'delete' | 'set-language'
 type TagEvents = 'add-new' | 'delete'
 type AppEvents =

From c2ce2ca063ae0bb7163d32202fb364ed0b368a66 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 17:12:21 +0300
Subject: [PATCH 12/13] chore: update bug_report

---
 .github/ISSUE_TEMPLATE/bug_report.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index c4f0dd70..b3ad2aec 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,12 +1,14 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: "[BUG]"
+title: "[BUG] Issue title"
 labels: ''
 assignees: ''
 
 ---
 
+> Issues that do not follow to this template will be closed without review.
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 

From da1744a34fb0e6292fb4a16c0475bf7780f99201 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 13 Apr 2022 17:15:02 +0300
Subject: [PATCH 13/13] build: release v2.0.0-beta.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 99b81534..b4e7579a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "masscode",
   "productName": "massCode",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "A free and open source code snippets manager for developers",
   "license": "AGPL-3.0",
   "main": "build/src/main/index.js",