feat: add snippets selection history (#238)

Author: antonreshetov

src/main/menu/main.ts

@@ -446,6 +446,27 @@ const editMenu: MenuItemConstructorOptions[] = [
   }
 ]
 
+const historyMenu: MenuItemConstructorOptions[] = [
+  {
+    label: i18n.t('menu:history.back'),
+    accelerator: 'CommandOrControl+[',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:history-back'
+      )
+    }
+  },
+  {
+    label: i18n.t('menu:history.forward'),
+    accelerator: 'CommandOrControl+]',
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:history-forward'
+      )
+    }
+  }
+]
+
 const menuItems: MenuItemConstructorOptions[] = [
   {
     label: i18n.t('menu:app.label'),
@@ -471,6 +492,10 @@ const menuItems: MenuItemConstructorOptions[] = [
     label: i18n.t('menu:markdown.label'),
     submenu: markdownMenu
   },
+  {
+    label: i18n.t('menu:history.label'),
+    submenu: historyMenu
+  },
   {
     label: i18n.t('menu:help.label'),
     submenu: helpMenu

src/main/services/i18n/locales/en/menu.json

@@ -75,5 +75,10 @@
     "label": "Markdown",
     "presentationMode": "Presentation Mode",
     "preview": "Preview"
+  },
+  "history": {
+    "label": "History",
+    "back": "Back",
+    "forward": "Forward"
   }
 }

src/main/services/i18n/locales/ru/menu.json

@@ -74,5 +74,10 @@
     "label": "Markdown",
     "presentationMode": "Режим презентации",
     "preview": "Просмотр Markdown"
+  },
+  "history": {
+    "label": "История",
+    "back": "Назад",
+    "forward": "Вперед"
   }
 }

src/renderer/App.vue

@@ -173,7 +173,7 @@ ipc.on('main:focus', () => {
 ipc.on('main:app-protocol', (event, payload: string) => {
   if (/^masscode:\/\/snippets/.test(payload)) {
     const snippetId = payload.split('/').pop()
-    if (snippetId) goToSnippet(snippetId)
+    if (snippetId) goToSnippet(snippetId, true)
   }
 })
 
@@ -245,6 +245,14 @@ ipc.on('main-menu:font-size-reset', async () => {
   emitter.emit('editor:refresh', true)
 })
 
+ipc.on('main-menu:history-back', async () => {
+  appStore.historyBack()
+})
+
+ipc.on('main-menu:history-forward', async () => {
+  appStore.historyForward()
+})
+
 ipc.on('api:snippet-create', (event, body: Snippet) => {
   onCreateSnippet(body)
 })

src/renderer/components/markdown/TheMarkdown.vue

@@ -217,7 +217,7 @@ const onLink = async (e: Event) => {
 
   if (el.classList.contains('snippet-link')) {
     const { snippetId } = el.dataset
-    if (snippetId) goToSnippet(snippetId)
+    if (snippetId) goToSnippet(snippetId, true)
   }
 }
 

src/renderer/components/sidebar/SidebarList.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="listRef"
     class="sidebar-list"
     :class="{
       'is-scrollable': isScrollable || modelValue === 'tags',
@@ -70,6 +71,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const bodyRef = ref<HTMLElement>()
+const listRef = ref<HTMLElement>()
 
 const activeTab = computed({
   get: () => props.modelValue,
@@ -83,10 +85,21 @@ const onClickTab = (tab: Tab) => {
 }
 
 emitter.on('scroll-to:folder', id => {
+  if (props.isSystem) return
+
   nextTick(() => {
     const el = document.querySelector<HTMLElement>(`[data-id='${id}']`)
-    if (el) {
-      setScrollPosition(bodyRef.value!, el.getBoundingClientRect().top - 210)
+
+    if (!el) return
+
+    const bounding = el.getBoundingClientRect()
+    const listHeight = listRef.value!.offsetHeight
+
+    const OFFSET = 210 // высота списка системных папок + заголовки
+    const SHIFT = bounding.top - OFFSET
+
+    if (SHIFT > listHeight || bounding.top < 0) {
+      setScrollPosition(bodyRef.value!, SHIFT)
     }
   })
 })

src/renderer/components/sidebar/TheSidebar.vue

@@ -132,6 +132,7 @@ const onClickFolder = async (id: string) => {
   folderStore.selectId(id)
   await snippetStore.setSnippetsByFolderIds(true)
   snippetStore.searchQuery = ''
+  appStore.addToHistory(snippetStore.snippets[0]?.id)
   emitter.emit('folder:click', id)
 }
 

src/renderer/components/snippets/SnippetListItem.vue

@@ -45,6 +45,7 @@ import type { SystemFolderAlias } from '@shared/types/renderer/sidebar'
 import { useTagStore } from '@/store/tags'
 import { isToday, format } from 'date-fns'
 import { emitter } from '@/composable'
+import { useAppStore } from '@/store/app'
 
 interface Props {
   id: string
@@ -59,6 +60,7 @@ const props = defineProps<Props>()
 const snippetStore = useSnippetStore()
 const folderStore = useFolderStore()
 const tagStore = useTagStore()
+const appStore = useAppStore()
 
 const itemRef = ref()
 const isFocused = ref(false)
@@ -105,6 +107,7 @@ const onClickSnippet = (e: MouseEvent) => {
     snippetStore.selectedMultiple = []
     snippetStore.getSnippetsById(props.id)
     tagStore.getTags()
+    appStore.addToHistory(props.id)
   }
 }
 

src/renderer/composable/index.ts

@@ -7,6 +7,7 @@ import { useSnippetStore } from '@/store/snippets'
 import { ipc, track } from '@/electron'
 import type { NotificationRequest } from '@shared/types/main'
 import type { Snippet, SnippetsSort } from '@shared/types/main/db'
+import { useAppStore } from '@/store/app'
 
 export const useApi = createFetch({
   baseUrl: `http://localhost:${API_PORT}`
@@ -86,11 +87,12 @@ export const onCopySnippet = () => {
   track('snippets/copy')
 }
 
-export const goToSnippet = async (snippetId: string) => {
+export const goToSnippet = async (snippetId: string, history?: boolean) => {
   if (!snippetId) return
 
   const folderStore = useFolderStore()
   const snippetStore = useSnippetStore()
+  const appStore = useAppStore()
 
   const snippet = snippetStore.findSnippetById(snippetId)
 
@@ -105,6 +107,8 @@ export const goToSnippet = async (snippetId: string) => {
   await snippetStore.getSnippetsById(snippetId)
   await snippetStore.setSnippetsByFolderIds()
 
+  if (history) appStore.history.push(snippetId)
+
   emitter.emit('folder:click', snippet.folderId)
   emitter.emit('scroll-to:snippet', snippetId)
   emitter.emit('scroll-to:folder', snippet.folderId)

src/renderer/store/app.ts

@@ -1,3 +1,4 @@
+import { goToSnippet } from '@/composable'
 import { platform, store } from '@/electron'
 import type { MarkdownSettings } from '@shared/types/main/store'
 import type {
@@ -39,6 +40,8 @@ const MARKDOWN_DEFAULTS: MarkdownSettings = {
   codeRenderer: 'highlight.js'
 }
 
+const HISTORY_LIMIT = 50
+
 export const useAppStore = defineStore('app', {
   state: (): State => ({
     isInit: false,
@@ -64,6 +67,8 @@ export const useAppStore = defineStore('app', {
     markdown: MARKDOWN_DEFAULTS,
     selectedPreferencesMenu: 'storage',
     language: store.preferences.get('language'),
+    history: [],
+    historyIndex: 0,
     version,
     platform: platform()
   }),
@@ -91,6 +96,27 @@ export const useAppStore = defineStore('app', {
     setLang (lang: string) {
       this.language = lang
       store.preferences.set('language', lang)
+    },
+    addToHistory (snippetId: string) {
+      if (!snippetId) return
+      if (this.history[this.history.length - 1] === snippetId) return
+
+      if (this.history.length === HISTORY_LIMIT) this.history.shift()
+
+      this.history.push(snippetId)
+      this.historyIndex = this.history.length - 1
+    },
+    historyBack () {
+      if (this.historyIndex === 0) return
+
+      this.historyIndex = this.historyIndex - 1
+      goToSnippet(this.history[this.historyIndex])
+    },
+    historyForward () {
+      if (this.historyIndex === this.history.length - 1) return
+
+      this.historyIndex = this.historyIndex + 1
+      goToSnippet(this.history[this.historyIndex])
     }
   }
 })