feat(ui): replace ScrollArea with PerfectScrollbar and update scrollb…

…ar styles

src/renderer/assets/css/vendor.css

@@ -32,6 +32,7 @@
 .ps__thumb-x,
 .ps__thumb-y {
   background-color: var(--color-scrollbar) !important;
+  z-index: 50;
 }
 
 .ps__thumb-y {

src/renderer/components/editor/Footer.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import * as Command from '@/components/ui/shadcn/command'
 import * as Popover from '@/components/ui/shadcn/popover'
-import { ScrollArea } from '@/components/ui/shadcn/scroll-area'
 import { useEditor, useSnippets } from '@/composables'
 import { Check } from 'lucide-vue-next'
 import { languages } from './languages'
@@ -73,7 +72,7 @@ function fuzzySearch(list: string[], searchTerm: string) {
             <Command.CommandEmpty>No language found</Command.CommandEmpty>
             <Command.CommandList>
               <Command.CommandGroup>
-                <ScrollArea>
+                <PerfectScrollbar :options="{ minScrollbarLength: 20 }">
                   <div class="_overflow-y-auto max-h-[150px]">
                     <Command.CommandItem
                       v-for="language in languages"
@@ -92,7 +91,7 @@ function fuzzySearch(list: string[], searchTerm: string) {
                       />
                     </Command.CommandItem>
                   </div>
-                </ScrollArea>
+                </PerfectScrollbar>
               </Command.CommandGroup>
             </Command.CommandList>
           </Command.Command>

src/renderer/components/sidebar/Sidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Node } from '@/components/sidebar/folders/types'
+import type { PerfectScrollbarExpose } from 'vue3-perfect-scrollbar'
 import * as ContextMenu from '@/components/ui/shadcn/context-menu'
-import { ScrollArea } from '@/components/ui/shadcn/scroll-area'
 import { useApp, useFolders, useGutter, useSnippets } from '@/composables'
 import { LibraryFilter } from '@/composables/types'
 import { i18n, store } from '@/electron'
@@ -13,6 +13,7 @@ import LibraryItem from './library/Item.vue'
 
 const sidebarRef = ref<HTMLElement>()
 const gutterRef = ref<{ $el: HTMLElement }>()
+const scrollbarRef = ref<PerfectScrollbarExpose | null>(null)
 
 const { sidebarWidth, selectedFolderId } = useApp()
 const { getSnippets, selectFirstSnippet, searchQuery, emptyTrash }
@@ -131,6 +132,14 @@ watch(width, () => {
   sidebarWidth.value = `${width.value}px`
   store.app.set('sidebarWidth', width.value)
 })
+
+watch(folders, () => {
+  nextTick(() => {
+    if (scrollbarRef.value) {
+      scrollbarRef.value.ps?.update()
+    }
+  })
+})
 </script>
 
 <template>
@@ -173,7 +182,7 @@ watch(width, () => {
         <Plus class="h-4 w-4" />
       </UiActionButton>
     </div>
-    <ScrollArea>
+    <PerfectScrollbar ref="scrollbarRef">
       <div class="flex-grow">
         <Tree
           v-if="folders"
@@ -183,7 +192,7 @@ watch(width, () => {
           @drag-node="onFolderDrag"
         />
       </div>
-    </ScrollArea>
+    </PerfectScrollbar>
     <UiGutter ref="gutterRef" />
   </div>
 </template>

src/renderer/components/snippet/Item.vue

@@ -188,7 +188,7 @@ onClickOutside(snippetRef, () => {
   <div
     ref="snippetRef"
     data-snippet-item
-    class="border-border relative not-first:border-t focus-visible:outline-none [&+.is-selected+div]:border-transparent"
+    class="border-border relative px-1 not-first:border-t focus-visible:outline-none [&+.is-selected+div]:border-transparent"
     :class="{
       'is-selected': isSelected,
       'is-multi-selected': isInMultiSelection,

src/renderer/components/snippet/List.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { SnippetsQuery } from '@/services/api/generated'
-import { ScrollArea } from '@/components/ui/shadcn/scroll-area'
+import type { PerfectScrollbarExpose } from 'vue3-perfect-scrollbar'
 import { useApp, useGutter, useSnippets } from '@/composables'
 import { LibraryFilter } from '@/composables/types'
 import { store } from '@/electron'
@@ -9,6 +9,7 @@ import { APP_DEFAULTS } from '~/main/store/constants'
 
 const listRef = ref<HTMLElement>()
 const gutterRef = ref<{ $el: HTMLElement }>()
+const scrollbarRef = ref<PerfectScrollbarExpose | null>(null)
 
 const { snippetListWidth, sidebarWidth, selectedFolderId, selectedLibrary }
   = useApp()
@@ -62,26 +63,34 @@ watch(width, () => {
   snippetListWidth.value = `${_width}px`
   store.app.set('snippetListWidth', _width)
 })
+
+watch(displayedSnippets, () => {
+  nextTick(() => {
+    if (scrollbarRef.value) {
+      scrollbarRef.value.ps?.update()
+    }
+  })
+})
 </script>
 
 <template>
   <div
     ref="listRef"
     data-snippets-list
-    class="relative flex h-screen flex-col px-1"
+    class="relative flex h-screen flex-col"
   >
     <div>
       <SnippetHeader />
     </div>
-    <ScrollArea>
+    <PerfectScrollbar ref="scrollbarRef">
       <div class="flex-grow overflow-y-auto">
         <SnippetItem
           v-for="snippet in displayedSnippets"
           :key="snippet.id"
           :snippet="snippet"
         />
       </div>
-    </ScrollArea>
+    </PerfectScrollbar>
     <UiGutter ref="gutterRef" />
   </div>
 </template>

src/renderer/components/ui/textarea/Textarea.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import type { Variants } from './variants'
 import { cn } from '@/utils'
-import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
 import { variants } from './variants'
-import 'vue3-perfect-scrollbar/style.css'
 
 interface Props {
   variant?: Variants['variant']

src/renderer/main.ts

@@ -1,7 +1,9 @@
 import { createApp } from 'vue'
+import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
 import App from './App.vue'
 import { router } from './router'
 import './styles.css'
 import '@/assets/css/vendor.css'
+import 'vue3-perfect-scrollbar/style.css'
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).use(PerfectScrollbarPlugin).mount('#app')