Use OverlayScrollbars

Author: kadiryazici

package.json

@@ -15,6 +15,8 @@
     "@tauri-apps/api": "^1.2.0",
     "@vueuse/core": "^9.12.0",
     "dayjs": "^1.11.7",
+    "overlayscrollbars": "^2.2.0",
+    "overlayscrollbars-vue": "^0.5.1",
     "p-all": "^4.0.0",
     "pinia": "^2.0.29",
     "redaxios": "^0.5.1",

pnpm-lock.yaml

@@ -4,7 +4,7 @@ import AppContent from './components/AppContent.vue'
 import AppSidebar from './components/AppSidebar.vue'
 import HomePage from './pages/HomePage.vue'
 import SettingsPage from './pages/SettingsPage.vue'
-import { ColorPreference, FETCH_INTERVAL_DURATION, Page, prefersDark } from './constants'
+import { ColorPreference, FETCH_INTERVAL_DURATION, Page } from './constants'
 import { useStore } from './stores/store'
 import LandingPage from './pages/LandingPage.vue'
 import { useInterval } from './composables/useInterval'
@@ -18,18 +18,7 @@ useInterval(() => {
 }, FETCH_INTERVAL_DURATION)
 
 watchEffect(() => {
-  const preference = AppStorage.get('colorPreference')
-
-  let theme: ColorPreference.Dark | ColorPreference.Light
-
-  if (preference === ColorPreference.Dark)
-    theme = ColorPreference.Dark
-  else if (preference === ColorPreference.Light)
-    theme = ColorPreference.Light
-  else
-    theme = prefersDark.value ? ColorPreference.Dark : ColorPreference.Light
-
-  if (theme === ColorPreference.Dark)
+  if (store.theme === ColorPreference.Dark)
     document.documentElement.classList.remove('light-theme')
   else
     document.documentElement.classList.add('light-theme')

src/App.vue

@@ -48,6 +48,7 @@ $colors: (
   line-height: 20px;
 
   --accent-color: rgb(23, 115, 243);
+  --os-handle-bg: var(--accent-color) !important;
 
   // Colors look really bad on Windows and Linux because there is no glass effect.
   // Some colors are different because of that.

src/assets/main.scss

@@ -1,38 +1,60 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import { type OverlayScrollbarsComponentRef, OverlayScrollbarsComponent as ScrollView } from 'overlayscrollbars-vue'
+import { type PartialOptions as OverlayScrollbarsOptions } from 'overlayscrollbars'
+import { computedEager } from '@vueuse/core'
 import { useTauriEvent } from '../composables/useTauriEvent'
 import { useStore } from '../stores/store'
 import type { Option } from '../types'
 import { batchFn } from '../utils/batch'
+import { ColorPreference } from '../constants'
 
 const store = useStore()
-const mainEl = ref<Option<HTMLElement>>(null)
+const scrollView = ref<Option<OverlayScrollbarsComponentRef>>(null)
 
 const focus = batchFn(() => {
-  mainEl.value?.focus()
+  scrollView.value?.getElement()?.focus()
 })
 
 watch(() => store.currentPage, focus, { flush: 'post' })
 useTauriEvent('window:hidden', focus)
+onMounted(focus)
+
+watch(() => store.currentPage, () => {
+  const element = scrollView.value?.osInstance()?.elements().scrollOffsetElement
+  if (element)
+    element.scrollTop = 0
+}, { flush: 'post' })
+
+const options = computedEager<OverlayScrollbarsOptions>(() => ({
+  scrollbars: {
+    autoHide: 'scroll',
+    theme: store.theme === ColorPreference.Dark ? 'os-theme-light' : 'os-theme-dark',
+  },
+}))
 </script>
 
 <template>
-  <main
-    ref="mainEl"
+  <ScrollView
+    ref="scrollView"
+    element="main"
+    defer
+    :options="options"
     tabindex="-1"
     class="main"
   >
     <slot />
-  </main>
+  </ScrollView>
 </template>
 
 <style lang="scss" scoped>
 .main {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
   background-color: var(--content-bg);
   position: relative;
   outline: none;
+  scroll-padding: 10px 10px;
 }
 </style>

src/components/AppContent.vue

@@ -1,6 +1,7 @@
 import './assets/main.scss'
 import 'wowerlay/style.css'
 import 'focus-visible'
+import 'overlayscrollbars/overlayscrollbars.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

src/main.ts

@@ -353,7 +353,6 @@ whenever(() => store.skeletonVisible, () => {
     padding: 10px;
     width: 100%;
     height: 100%;
-    overflow-y: auto;
     scroll-padding-top: 10px;
     scroll-padding-bottom: 10px;
     position: relative;

src/pages/HomePage.vue

@@ -268,7 +268,6 @@ function handleScroll(e: Event) {
     top: 0;
     width: 100%;
     height: 100%;
-    overflow-y: auto;
     display: flex;
     flex-flow: column nowrap;
 

src/pages/SettingsPage.vue

@@ -5,8 +5,9 @@ import { readonly, ref, shallowRef, triggerRef, watchEffect } from 'vue'
 import pAll from 'p-all'
 import { type UpdateManifest, installUpdate } from '@tauri-apps/api/updater'
 import { relaunch } from '@tauri-apps/api/process'
+import { computedEager } from '@vueuse/core'
 import { type Thread, getNotifications, markNotificationAsRead, unsubscribeNotification } from '../api/notifications'
-import { InvokeCommand, Page, notificationApiMutex } from '../constants'
+import { ColorPreference, InvokeCommand, Page, notificationApiMutex, prefersDark } from '../constants'
 import { AppStorage } from '../storage'
 import type { AppStorageContext, NotificationList, Option, PageState } from '../types'
 import { filterNewThreads, isRepository, isThread, toNotificationList } from '../utils/notification'
@@ -200,6 +201,21 @@ export const useStore = defineStore('store', () => {
     }
   }
 
+  const theme = computedEager(() => {
+    const preference = AppStorage.get('colorPreference')
+
+    let theme: ColorPreference.Dark | ColorPreference.Light
+
+    if (preference === ColorPreference.Dark)
+      theme = ColorPreference.Dark
+    else if (preference === ColorPreference.Light)
+      theme = ColorPreference.Light
+    else
+      theme = prefersDark.value ? ColorPreference.Dark : ColorPreference.Light
+
+    return theme
+  })
+
   return {
     newRelease,
     notifications,
@@ -211,6 +227,7 @@ export const useStore = defineStore('store', () => {
     currentPageState,
     checkedItems,
     installingUpate,
+    theme,
     updateAndRestart,
     unsubscribeCheckedNotifications,
     removeNotificationById,