feat: update main menu (#21)

Author: antonreshetov

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

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">

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>

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()
 }

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
 }

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>
 

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')