feat: add custom scroll, restore snippet position during init (#10)

package.json

@@ -41,7 +41,8 @@
     "nanoid": "^3.3.1",
     "pinia": "^2.0.12",
     "vue": "^3.2.26",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "vue3-perfect-scrollbar": "^1.6.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",

src/renderer/assets/scss/main.scss

@@ -2,6 +2,6 @@
 @import './variables';
 @import './markdown';
 @import './base';
-// @import './vendor';
+@import './vendor';
 @import './ace';
 @import './themes';

src/renderer/assets/scss/vendor.scss

@@ -1,4 +1,4 @@
-@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+@import 'perfect-scrollbar/css/perfect-scrollbar.css';
 
 .ps {
   $r: &;
@@ -14,7 +14,7 @@
   }
   &__rail-x {
     background-color: rgba(121, 121, 121, .5);
-    width: 4px;
+    width: 5px;
     &:hover {
       height: 4px;
       background-color: transparent !important;
@@ -25,18 +25,11 @@
       }
     }
   }
-  &__thumb-y {
-    border-radius: 0;
+  &__thumb-y, &__thumb-y {
     background-color: rgba(121, 121, 121, .8);
     width: 5px;
     right: 0;
   }
-  &__thumb-x {
-    border-radius: 0;
-    background-color: rgba(121, 121, 121, .8);
-    height: 4px;
-    right: 0;
-  }
 }
 
 

src/renderer/components/sidebar/SidebarList.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="sidebar-list">
+  <div
+    class="sidebar-list"
+    :class="{
+      'is-scrollable': isScrollable
+    }"
+  >
     <div class="sidebar-list__header">
       <div class="sidebar-list__title">
         <h6 v-if="!tabs">
@@ -23,7 +28,17 @@
       class="body"
       :class="{ 'is-system': isSystem }"
     >
-      <slot />
+      <PerfectScrollbar v-if="isScrollable">
+        <div class="inner">
+          <slot />
+        </div>
+      </PerfectScrollbar>
+      <div
+        v-else
+        class="inner"
+      >
+        <slot />
+      </div>
     </div>
   </div>
 </template>
@@ -37,6 +52,7 @@ interface Props {
   tabs?: Tabs[]
   modelValue?: Tab
   isSystem?: boolean
+  isScrollable?: boolean
 }
 
 interface Emits {
@@ -64,8 +80,17 @@ const onClickTab = (tab: Tab) => {
 <style lang="scss" scoped>
 .sidebar-list {
   margin-bottom: var(--spacing-xs);
-  padding: 0 var(--spacing-xs);
-  // height: 100%;
+  .body {
+    .inner {
+      padding: 0 var(--spacing-xs);
+    }
+  }
+  // overflow: hidden;
+  &.is-scrollable {
+    :deep(.ps) {
+      height: calc(100vh - 190px);
+    }
+  }
   &__header {
     display: flex;
     align-items: center;
@@ -85,6 +110,7 @@ const onClickTab = (tab: Tab) => {
   &__title,
   &__action {
     display: inline-block;
+    padding: 0 var(--spacing-xs);
   }
   .tab-header {
     color: var(--color-contrast-low-alt);

src/renderer/components/sidebar/TheSidebar.vue

@@ -35,6 +35,7 @@
     </SidebarList>
     <SidebarList
       v-if="activeTab === 'library'"
+      :is-scrollable="true"
       title="Folders"
     >
       <template #action>
@@ -89,6 +90,7 @@ import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { ipc } from '@/electron'
 import { useTagStore } from '@/store/tags'
+import { emitter } from '@/composable'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
@@ -128,6 +130,7 @@ const activeTab = ref<Tab>('library')
 const onClickFolder = async (id: string) => {
   folderStore.selectId(id)
   await snippetStore.setSnippetsByFolderIds(true)
+  emitter.emit('folder:click', id)
 }
 
 const onClickSystemFolder = (alias: SystemFolderAlias) => {

src/renderer/components/snippets/SnippetList.vue

@@ -1,42 +1,77 @@
 <template>
-  <div class="list">
+  <div
+    ref="listRef"
+    class="snippet-list"
+  >
     <div class="header">
       <SnippetListHeader />
     </div>
-    <div class="body">
-      <SnippetListItem
-        v-for="(i, index) in snippetStore.snippets"
-        :id="i.id"
-        :key="i.id"
-        :index="index"
-        :folder="i.folder?.name"
-        :date="i.updatedAt"
-        :name="i.name"
-      />
+    <div
+      ref="listRef"
+      class="body"
+    >
+      <PerfectScrollbar>
+        <SnippetListItem
+          v-for="(i, index) in snippetStore.snippets"
+          :id="i.id"
+          :key="i.id"
+          :data-id="i.id"
+          :index="index"
+          :folder="i.folder?.name"
+          :date="i.updatedAt"
+          :name="i.name"
+        />
+      </PerfectScrollbar>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { emitter } from '@/composable'
+import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
+import { ref, watch } from 'vue'
 
 const snippetStore = useSnippetStore()
+const appStore = useAppStore()
+
+const listRef = ref<HTMLElement>()
+
+const setScrollPosition = (offset: number) => {
+  const ps = listRef.value?.querySelector<HTMLElement>('.ps')
+  ps!.scrollTop = offset
+}
+
+watch(
+  () => appStore.isInit,
+  () => {
+    const el = document.querySelector<HTMLElement>(
+      `[data-id='${snippetStore.selectedId!}']`
+    )
+    if (el?.offsetTop) setScrollPosition(el.offsetTop)
+  }
+)
+
+emitter.on('folder:click', () => {
+  setScrollPosition(0)
+})
 </script>
 
 <style lang="scss" scoped>
-.list {
+.snippet-list {
   border-right: 1px solid var(--color-border);
   display: grid;
-  grid-template-rows: 50px 1fr;
+  grid-template-rows: 50px 1fr 10px;
 }
 .header {
   padding-top: var(--title-bar-height);
   display: flex;
   border-bottom: 1px solid var(--color-border);
 }
 .body {
-  overflow-y: scroll;
   padding: var(--spacing-xs) 0;
-  height: calc(100vh - 50px);
+  :deep(.ps) {
+    height: calc(100vh - 60px);
+  }
 }
 </style>

src/renderer/main.ts

@@ -3,5 +3,11 @@ import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
 import './assets/scss/main.scss'
+import PerfectScrollbar from 'vue3-perfect-scrollbar'
+import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
 
-createApp(App).use(createPinia()).use(router).mount('#app')
+createApp(App)
+  .use(createPinia())
+  .use(router)
+  .use(PerfectScrollbar)
+  .mount('#app')

src/renderer/store/app.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 
 export const useAppStore = defineStore('app', {
   state: (): State => ({
+    isInit: false,
     theme: 'light',
     showTags: true,
     sizes: {

src/renderer/views/Main.vue

@@ -11,10 +11,12 @@ import { store } from '@/electron'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { useTagStore } from '@/store/tags'
+import { useAppStore } from '@/store/app'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
 const tagStore = useTagStore()
+const appStore = useAppStore()
 
 const init = async () => {
   const storedFolderId = store.app.get('selectedFolderId')
@@ -37,6 +39,8 @@ const init = async () => {
   if (storedFolderAlias) {
     snippetStore.setSnippetsByAlias(storedFolderAlias)
   }
+
+  appStore.isInit = true
 }
 
 const addDevtoolsHost = () => {

src/shared/types/renderer/composable/index.d.ts

@@ -1,3 +1,4 @@
 export type EmitterEvents = {
   'focus:snippet-name': boolean
+  'folder:click': any
 }

src/shared/types/renderer/store/app.d.ts

@@ -12,4 +12,5 @@ export interface State {
   theme: string
   sizes: AppSizes
   showTags: boolean
+  isInit: boolean
 }