From 9f07a8bc26d974e6413fcd1d2583b14a96d280b8 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 7 Oct 2023 15:41:09 +0800
Subject: [PATCH] feat: use OverlayScrollbar

---
 package.json                     |   1 +
 pnpm-lock.yaml                   |  32 ++-
 src/contentScripts/index.ts      |   1 +
 src/contentScripts/views/App.vue | 449 ++++++++++++++++---------------
 src/styles/main.scss             |   7 +
 5 files changed, 270 insertions(+), 220 deletions(-)

diff --git a/package.json b/package.json
index 59792478..d6e676e9 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
   "dependencies": {
     "dplayer": "^1.27.1",
     "mitt": "^3.0.1",
+    "overlayscrollbars-vue": "^0.5.5",
     "vue-i18n": "^9.2.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7c46bf0..89a614a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,7 @@ specifiers:
   kolorist: ^1.8.0
   mitt: ^3.0.1
   npm-run-all: ^4.1.5
+  overlayscrollbars-vue: ^0.5.5
   rimraf: ^3.0.2
   sass: ^1.64.2
   terser: ^5.19.2
@@ -48,6 +49,7 @@ specifiers:
 dependencies:
   dplayer: 1.27.1
   mitt: 3.0.1
+  overlayscrollbars-vue: 0.5.5_wh5p2atbfvzzgf3mvohll5lz3a
   vue-i18n: 9.2.2_vue@3.3.4
 
 devDependencies:
@@ -676,8 +678,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.27
-      '@intlify/shared': 9.3.0-beta.27
+      '@intlify/message-compiler': 9.4.1
+      '@intlify/shared': 9.4.1
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.2.2_vue@3.3.4
@@ -706,11 +708,11 @@ packages:
       '@intlify/shared': 9.2.2
       source-map: 0.6.1
 
-  /@intlify/message-compiler/9.3.0-beta.27:
-    resolution: {integrity: sha512-GC8rSbd7V67Zu+a9Z0bpV4riBek11YCURJU50YaEhV4Ub2JHEPtoYxK5r2eIsq/kp+M2hJyGLiC4NJUrGa2VwQ==}
+  /@intlify/message-compiler/9.4.1:
+    resolution: {integrity: sha512-aN2N+dUx320108QhH51Ycd2LEpZ+NKbzyQ2kjjhqMcxhHdxtOnkgdx+MDBhOy/CObwBmhC3Nygzc6hNlfKvPNw==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.3.0-beta.27
+      '@intlify/shared': 9.4.1
       source-map-js: 1.0.2
     dev: true
 
@@ -718,8 +720,8 @@ packages:
     resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
     engines: {node: '>= 14'}
 
-  /@intlify/shared/9.3.0-beta.27:
-    resolution: {integrity: sha512-hPMsmVCs+ZUVHHU5VORG6LopzXZT7zmyVNqc9OQG80YpA/N4lT/pkJ4B6DTNIsv2C7mwfGM7RdK+0qPki43YgA==}
+  /@intlify/shared/9.4.1:
+    resolution: {integrity: sha512-A51elBmZWf1FS80inf/32diO9DeXoqg9GR9aUDHFcfHoNDuT46Q+fpPOdj8jiJnSHSBh8E1E+6qWRhAZXdK3Ng==}
     engines: {node: '>= 16'}
     dev: true
 
@@ -739,7 +741,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': 4.0.0_vue-i18n@9.2.2
-      '@intlify/shared': 9.3.0-beta.27
+      '@intlify/shared': 9.4.1
       '@rollup/pluginutils': 4.2.1
       '@vue/compiler-sfc': 3.3.4
       debug: 4.3.4
@@ -5409,6 +5411,20 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
+  /overlayscrollbars-vue/0.5.5_wh5p2atbfvzzgf3mvohll5lz3a:
+    resolution: {integrity: sha512-WiB0SgWjhT+WYo0ldgZ9g1Sh703KUKpKCcCfYFvqlB0X9TjgRJbQRrgFEmyNnD9XO+ZWc1zJ6s4+ukyoIQN2VQ==}
+    peerDependencies:
+      overlayscrollbars: ^2.0.0
+      vue: ^3.2.25
+    dependencies:
+      overlayscrollbars: 2.3.2
+      vue: 3.3.4
+    dev: false
+
+  /overlayscrollbars/2.3.2:
+    resolution: {integrity: sha512-K3Sau7NpFruKfXBauvchAQshAW+un1qD8EYNcozrPAB2kbif8C2rqa+1EWvMMWPKl88wgf2rX2QDMLgAfR0hHA==}
+    dev: false
+
   /p-cancelable/3.0.0:
     resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==}
     engines: {node: '>=12.20'}
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 34d5e7cf..453567d9 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -5,6 +5,7 @@ import { setupApp } from '~/logic/common-setup'
 import { i18n } from '~/utils/i18n'
 import { SVG_ICONS } from '~/utils/svgIcons'
 import { injectCSS } from '~/utils/main'
+import 'overlayscrollbars/overlayscrollbars.css'
 
 let app: any
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index ee5c5dab..3e9906f6 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -4,6 +4,8 @@ import 'uno.css'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 import type { Ref } from '@vue/runtime-dom'
+import type { OverlayScrollbars } from 'overlayscrollbars-vue'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 import Home from './Home/Home.vue'
 import Search from './Search/Search.vue'
 import Anime from './Anime/Anime.vue'
@@ -21,6 +23,7 @@ const { locale } = useI18n()
 const [showSettings, toggleSettings] = useToggle(false)
 const pages = { Home, Search, Anime, History, WatchLater, Favorites }
 const mainAppRef = ref<HTMLElement>() as Ref<HTMLElement>
+const scrollbarRef = ref<OverlayScrollbars | null>()
 const mainAppOpacity = ref<number>(0)
 const showTopbarMask = ref<boolean>(false)
 const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
@@ -139,11 +142,11 @@ watch(() => settings.value.adaptToOtherPageStyles, () => {
 })
 
 onMounted(() => {
-  nextTick(() => {
-    setTimeout(() => {
-      mainAppOpacity.value = 1
-    }, 1200)
-  })
+  // nextTick(() => {
+  //   setTimeout(() => {
+  //     mainAppOpacity.value = 1
+  //   }, 1200)
+  // })
 
   if (isHomePage.value) {
     // Force overwrite Bilibili Evolved body tag & html tag background color
@@ -151,23 +154,23 @@ onMounted(() => {
   }
   document.documentElement.style.setProperty('font-size', '14px')
 
-  if (mainAppRef.value) {
-    mainAppRef.value.addEventListener('scroll', () => {
-      if (
-        mainAppRef.value.clientHeight + mainAppRef.value.scrollTop
-          >= mainAppRef.value.scrollHeight - 20
-      ) {
-        nextTick(() => {
-          emitter.emit('reachBottom')
-        })
-      }
+  // if (mainAppRef.value) {
+  //   mainAppRef.value.addEventListener('scroll', () => {
+  //     if (
+  //       mainAppRef.value.clientHeight + mainAppRef.value.scrollTop
+  //         >= mainAppRef.value.scrollHeight - 20
+  //     ) {
+  //       nextTick(() => {
+  //         emitter.emit('reachBottom')
+  //       })
+  //     }
 
-      if (mainAppRef.value.scrollTop === 0)
-        showTopbarMask.value = false
-      else
-        showTopbarMask.value = true
-    })
-  }
+  //     if (mainAppRef.value.scrollTop === 0)
+  //       showTopbarMask.value = false
+  //     else
+  //       showTopbarMask.value = true
+  //   })
+  // }
 
   document.addEventListener('scroll', () => {
     if (window.scrollY > 0)
@@ -292,7 +295,9 @@ function handleRefresh() {
 }
 
 function handleBackToTop() {
-  smoothScrollToTop(mainAppRef.value, 300)
+  const osInstance = scrollbarRef.value?.osInstance()
+
+  smoothScrollToTop(osInstance.elements().viewport, 300)
 }
 
 function handleAdaptToOtherPageStylesChange() {
@@ -301,6 +306,20 @@ function handleAdaptToOtherPageStylesChange() {
   else
     document.documentElement.classList.remove('bewly-design')
 }
+
+function handleOsScroll() {
+  const osInstance = scrollbarRef.value?.osInstance()
+  const { viewport } = osInstance.elements()
+  const { scrollTop, scrollHeight, clientHeight } = viewport // get scroll offset
+
+  if (scrollTop === 0)
+    showTopbarMask.value = false
+  else
+    showTopbarMask.value = true
+
+  if (clientHeight + scrollTop >= scrollHeight - 20)
+    emitter.emit('reachBottom')
+}
 </script>
 
 <template>
@@ -344,39 +363,131 @@ function handleAdaptToOtherPageStylesChange() {
   </template>
 
   <div
-    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-scroll z-60
-    :style="{ opacity: mainAppOpacity, height: isHomePage ? '100vh' : '0' }"
+    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-hidden z-60
+    :style="{ opacity: 1, height: isHomePage ? '100vh' : '0' }"
   >
-    <!-- Home search page mode background -->
-    <div
-      v-if="activatedPage === AppPage.Home && settings.useSearchPageModeOnHomePage && settings.individuallySetSearchPageWallpaper"
-      :style="{ opacity: showSettings ? 0.4 : 1 }"
+    <!-- Dock -->
+    <aside
+      v-if="isHomePage"
+      class="dock-wrap"
+      :class="{
+        left: settings.dockPosition === 'left',
+        right: settings.dockPosition === 'right',
+        bottom: settings.dockPosition === 'bottom',
+      }"
+      pos="absolute top-0" flex="~ col" h-full justify-center z-1 pointer-events-none
     >
       <div
-        pos="relative left-0 top-0" w-full h-580px mb--580px bg="cover center" z-1
-        :style="{
-          backgroundImage: `url(${settings.searchPageWallpaper})`,
-        }"
-      />
-      <!-- background mask -->
-      <transition name="fade">
-        <div
-          v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
-          pos="relative left-0 top-0" w-full h-580px mb--580px pointer-events-none duration-300 z-1 bg="$bew-homepage-bg-mask"
-          :style="{
-            backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
-          }"
-        >
-          <div
-            bg="$bew-homepage-bg" pos="absolute top-0 left-0" w-full h-full
-            :style="{
-              opacity: `${settings.searchPageWallpaperMaskOpacity}%`,
-            }"
-          />
-        </div>
-      </transition>
-    </div>
+        class="dock-content"
+        p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
+        rounded="$bew-radius" border="1px $bew-border-color"
+        shadow="$bew-shadow-2"
+        backdrop-glass pointer-events-auto
+      >
+        <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === AppPage.Search }"
+            @click="changeActivatePage(AppPage.Search)"
+          >
+            <tabler:search />
+          </button>
+        </Tooltip>
 
+        <Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === AppPage.Home }"
+            @click="changeActivatePage(AppPage.Home)"
+          >
+            <tabler:home />
+          </button>
+        </Tooltip>
+
+        <Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === AppPage.Anime }"
+            @click="changeActivatePage(AppPage.Anime)"
+          >
+            <tabler:device-tv />
+          </button>
+        </Tooltip>
+
+        <Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === AppPage.History }"
+            @click="changeActivatePage(AppPage.History)"
+          >
+            <tabler:clock />
+          </button>
+        </Tooltip>
+
+        <Tooltip :content="$t('dock.favorites')" :placement="tooltipPlacement">
+          <div
+            class="dock-item"
+            :class="{ active: activatedPage === AppPage.Favorites }"
+            @click="changeActivatePage(AppPage.Favorites)"
+          >
+            <tabler:star />
+          </div>
+        </Tooltip>
+
+        <Tooltip :content="$t('dock.watch_later')" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === AppPage.WatchLater }"
+            @click="changeActivatePage(AppPage.WatchLater)"
+          >
+            <iconoir:playlist-play />
+          </button>
+        </Tooltip>
+
+        <template v-if="isVideoPage">
+          <!-- dividing line -->
+          <div class="divider" />
+
+          <!-- video page -->
+          <button class="dock-item video active">
+            <tabler:player-play />
+          </button>
+        </template>
+
+        <!-- dividing line -->
+        <div class="divider" />
+
+        <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
+          <button class="dock-item" @click="toggleDark()">
+            <tabler:moon-stars v-if="currentAppColorScheme === 'dark'" />
+            <tabler:sun v-else />
+          </button>
+        </Tooltip>
+
+        <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
+          <button class="dock-item" @click="toggleSettings()">
+            <tabler:settings />
+          </button>
+        </Tooltip>
+      </div>
+    </aside>
+    <aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-1 pointer-events-none>
+      <div flex="~ gap-2 col" pointer-events-auto>
+        <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
+          <Button size="small" round shadow="$bew-shadow-1" w-45px important-h-45px @click="toggleDark()">
+            <tabler:moon-stars v-if="currentAppColorScheme === 'dark'" text-xl shrink-0 lh-0 />
+            <tabler:sun v-else text-xl shrink-0 lh-0 />
+          </Button>
+        </Tooltip>
+        <Tooltip :content="$t('dock.settings')" placement="left">
+          <Button size="small" round shadow="$bew-shadow-1" w-45px important-h-45px @click="toggleSettings">
+            <tabler:settings text-xl shrink-0 lh-0 />
+          </Button>
+        </Tooltip>
+      </div>
+    </aside>
+
+    <!-- Topbar -->
     <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
       <Transition name="topbar">
         <Topbar
@@ -393,168 +504,82 @@ function handleAdaptToOtherPageStylesChange() {
           pos="fixed top-0 left-0" z-9999 w="[calc(100%)]"
         />
       </Transition>
-
-      <div flex="~" max-w="$bew-page-max-width">
-        <aside
-          v-if="isHomePage"
-          class="dock-wrap"
-          :class="{
-            left: settings.dockPosition === 'left',
-            right: settings.dockPosition === 'right',
-            bottom: settings.dockPosition === 'bottom',
-          }"
-          pos="absolute top-0" flex="~ col" h-100vh justify-center z-10 pointer-events-none
-        >
-          <div
-            class="dock-content"
-            p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
-            rounded="$bew-radius" border="1px $bew-border-color"
-            shadow="$bew-shadow-2"
-            backdrop-glass pointer-events-auto
-          >
-            <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
-              <button
-                class="dock-item"
-                :class="{ active: activatedPage === AppPage.Search }"
-                @click="changeActivatePage(AppPage.Search)"
-              >
-                <tabler:search />
-              </button>
-            </Tooltip>
-
-            <Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
-              <button
-                class="dock-item"
-                :class="{ active: activatedPage === AppPage.Home }"
-                @click="changeActivatePage(AppPage.Home)"
-              >
-                <tabler:home />
-              </button>
-            </Tooltip>
-
-            <Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
-              <button
-                class="dock-item"
-                :class="{ active: activatedPage === AppPage.Anime }"
-                @click="changeActivatePage(AppPage.Anime)"
-              >
-                <tabler:device-tv />
-              </button>
-            </Tooltip>
-
-            <Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
-              <button
-                class="dock-item"
-                :class="{ active: activatedPage === AppPage.History }"
-                @click="changeActivatePage(AppPage.History)"
-              >
-                <tabler:clock />
-              </button>
-            </Tooltip>
-
-            <Tooltip :content="$t('dock.favorites')" :placement="tooltipPlacement">
-              <div
-                class="dock-item"
-                :class="{ active: activatedPage === AppPage.Favorites }"
-                @click="changeActivatePage(AppPage.Favorites)"
-              >
-                <tabler:star />
-              </div>
-            </Tooltip>
-
-            <Tooltip :content="$t('dock.watch_later')" :placement="tooltipPlacement">
-              <button
-                class="dock-item"
-                :class="{ active: activatedPage === AppPage.WatchLater }"
-                @click="changeActivatePage(AppPage.WatchLater)"
-              >
-                <iconoir:playlist-play />
-              </button>
-            </Tooltip>
-
-            <template v-if="isVideoPage">
-              <!-- dividing line -->
-              <div class="divider" />
-
-              <!-- video page -->
-              <button class="dock-item video active">
-                <tabler:player-play />
-              </button>
-            </template>
-
-            <!-- dividing line -->
-            <div class="divider" />
-
-            <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
-              <button class="dock-item" @click="toggleDark()">
-                <tabler:moon-stars v-if="currentAppColorScheme === 'dark'" />
-                <tabler:sun v-else />
-              </button>
-            </Tooltip>
-
-            <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
-              <button class="dock-item" @click="toggleSettings()">
-                <tabler:settings />
-              </button>
-            </Tooltip>
-          </div>
-        </aside>
-        <aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-10 pointer-events-none>
-          <div flex="~ gap-2 col" pointer-events-auto>
-            <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
-              <Button size="small" round shadow="$bew-shadow-1" w-45px important-h-45px @click="toggleDark()">
-                <tabler:moon-stars v-if="currentAppColorScheme === 'dark'" text-xl shrink-0 lh-0 />
-                <tabler:sun v-else text-xl shrink-0 lh-0 />
-              </Button>
-            </Tooltip>
-            <Tooltip :content="$t('dock.settings')" placement="left">
-              <Button size="small" round shadow="$bew-shadow-1" w-45px important-h-45px @click="toggleSettings">
-                <tabler:settings text-xl shrink-0 lh-0 />
-              </Button>
-            </Tooltip>
-          </div>
-        </aside>
-
-        <main
-          v-if="isHomePage"
-          p="t-80px" m-auto
-          :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
-        >
-          <!-- control button group -->
-          <div
-            v-if="activatedPage !== AppPage.Search"
-            pos="fixed right-24 bottom-4" z-4
-          >
-            <!-- refresh button -->
-            <Button
-              v-if="!showTopbarMask"
-              size="small"
-              frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px
-              @click="handleRefresh"
-            >
-              <tabler:refresh text-lg shrink-0 />
-            </Button>
-            <!-- back to top button -->
-            <Button
-              v-else
-              size="small"
-              frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px mt-2
-              @click="handleBackToTop"
-            >
-              <tabler:arrow-big-up text-lg shrink-0 />
-            </Button>
-          </div>
-
-          <Transition name="page-fade">
-            <Component :is="pages[activatedPage]" :key="dynamicComponentKey" />
-          </Transition>
-        </main>
-      </div>
     </div>
-    <!-- settings dialog -->
-    <KeepAlive>
-      <Settings v-if="showSettings" @close="showSettings = false" />
-    </KeepAlive>
+
+    <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer @os-scroll="handleOsScroll">
+      <!-- Home search page mode background -->
+      <div
+        v-if="activatedPage === AppPage.Home && settings.useSearchPageModeOnHomePage && settings.individuallySetSearchPageWallpaper"
+        :style="{ opacity: showSettings ? 0.4 : 1 }"
+      >
+        <div
+          pos="relative left-0 top-0" w-full h-580px mb--580px bg="cover center" z-1
+          :style="{
+            backgroundImage: `url(${settings.searchPageWallpaper})`,
+          }"
+        />
+        <!-- background mask -->
+        <transition name="fade">
+          <div
+            v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
+            pos="relative left-0 top-0" w-full h-580px mb--580px pointer-events-none duration-300 z-1 bg="$bew-homepage-bg-mask"
+            :style="{
+              backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
+            }"
+          >
+            <div
+              bg="$bew-homepage-bg" pos="absolute top-0 left-0" w-full h-full
+              :style="{
+                opacity: `${settings.searchPageWallpaperMaskOpacity}%`,
+              }"
+            />
+          </div>
+        </transition>
+      </div>
+
+      <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
+        <div flex="~" max-w="$bew-page-max-width">
+          <main
+            v-if="isHomePage"
+            p="t-80px" m-auto
+            :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
+          >
+            <!-- control button group -->
+            <div
+              v-if="activatedPage !== AppPage.Search"
+              pos="fixed right-24 bottom-4" z-4
+            >
+              <!-- refresh button -->
+              <Button
+                v-if="!showTopbarMask"
+                size="small"
+                frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px
+                @click="handleRefresh"
+              >
+                <tabler:refresh text-lg shrink-0 />
+              </Button>
+              <!-- back to top button -->
+              <Button
+                v-else
+                size="small"
+                frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px mt-2
+                @click="handleBackToTop"
+              >
+                <tabler:arrow-big-up text-lg shrink-0 />
+              </Button>
+            </div>
+
+            <Transition name="page-fade">
+              <Component :is="pages[activatedPage]" :key="dynamicComponentKey" />
+            </Transition>
+          </main>
+        </div>
+      </div>
+      <!-- settings dialog -->
+      <KeepAlive>
+        <Settings v-if="showSettings" @close="showSettings = false" />
+      </KeepAlive>
+    </OverlayScrollbarsComponent>
   </div>
 </template>
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f2f7c69a..5e2ca9f0 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -64,3 +64,10 @@ html.dark.bewly-design {
     --at-apply: color-$bew-text-1;
   }
 }
+
+// Change OverlayScrollbar color
+.os-scrollbar .os-scrollbar-handle {
+  --os-handle-bg: rgba(120, 120, 140, .44);
+  --os-handle-bg-hover: rgba(120, 120, 140, .55);
+  --os-handle-bg-active: rgba(120, 120, 140, .66);
+}
\ No newline at end of file