From 91418521f314385f00053abe3cd1431da759a44e Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Thu, 11 Jan 2024 16:38:11 +0800
Subject: [PATCH] refactor: improve components load method, and improve provide
 `app`

---
 src/_locales/cmn-CN.yml                       |  1 +
 src/_locales/cmn-TW.yml                       |  1 +
 src/_locales/en.yml                           |  1 +
 src/_locales/jyut.yml                         |  1 +
 src/components/OverlayScrollbarsComponent.ts  |  4 ++
 src/components/Settings/Settings.vue          | 20 ++++---
 src/components/TopBar/TopBar.vue              |  4 +-
 src/composables/useAppProvider.ts             | 20 +++++++
 src/contentScripts/views/App.vue              | 53 ++++++++++---------
 .../views/Favorites/Favorites.vue             | 16 +++---
 src/contentScripts/views/History/History.vue  | 16 +++---
 src/contentScripts/views/Home/Home.vue        | 26 +++++----
 .../views/Home/components/Following.vue       | 45 ++++++++++++----
 .../views/Home/components/ForYou.vue          | 45 ++++++++++------
 .../views/Home/components/Ranking.vue         | 18 ++++++-
 .../Home/components/SubscribedSeries.vue      | 46 ++++++++++++----
 .../views/Home/components/Trending.vue        | 25 ++++++---
 .../views/WatchLater/WatchLater.vue           | 15 +++---
 src/logic/common-setup.ts                     |  2 -
 vite.config.ts                                |  2 +
 20 files changed, 240 insertions(+), 121 deletions(-)
 create mode 100644 src/components/OverlayScrollbarsComponent.ts
 create mode 100644 src/composables/useAppProvider.ts

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index c21f728b..a2059afe 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -23,6 +23,7 @@ common:
   disable: 禁用
   refresh: 刷新
   reset: 重置
+  no_more_content: 没有更多内容了
 settings:
   title: 设置
 
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index d20bb4d1..6cc62165 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -23,6 +23,7 @@ common:
   disable: 停用
   refresh: 重新整理
   reset: 重置
+  no_more_content: 沒有更多內容了
 settings:
   title: 設定
 
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index b697cbcb..5d8be5b0 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -23,6 +23,7 @@ common:
   disable: Disable
   refresh: Refresh
   reset: Reset
+  no_more_content: No more content
 settings:
   title: Settings
 
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 2a255b03..d00adfef 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -23,6 +23,7 @@ common:
   disable: 閂埋
   refresh: 重新整理
   reset: 重置
+  no_more_content: 沒有更多內容了
 settings:
   title: 設定
 
diff --git a/src/components/OverlayScrollbarsComponent.ts b/src/components/OverlayScrollbarsComponent.ts
new file mode 100644
index 00000000..338ec5ad
--- /dev/null
+++ b/src/components/OverlayScrollbarsComponent.ts
@@ -0,0 +1,4 @@
+export default defineAsyncComponent(async () => {
+  const { OverlayScrollbarsComponent } = await import('overlayscrollbars-vue')
+  return OverlayScrollbarsComponent
+})
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 55f4f7dd..181b0185 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import General from './components/General.vue'
-import Appearance from './components/Appearance.vue'
-import SearchPage from './components/SearchPage.vue'
-import Home from './components/Home.vue'
-import Compatibility from './components/Compatibility.vue'
-import About from './components/About.vue'
+
 import type { MenuItem } from './types'
 import { MenuType } from './types'
 import { settings } from '~/logic'
@@ -15,7 +10,14 @@ const emit = defineEmits(['close'])
 
 const { t } = useI18n()
 
-const settingsMenu = { General, Appearance, SearchPage, Home, Compatibility, About }
+const settingsMenu = {
+  [MenuType.General]: defineAsyncComponent(() => import('./components/General.vue')),
+  [MenuType.Appearance]: defineAsyncComponent(() => import('./components/Appearance.vue')),
+  [MenuType.SearchPage]: defineAsyncComponent(() => import('./components/SearchPage.vue')),
+  [MenuType.Home]: defineAsyncComponent(() => import('./components/Home.vue')),
+  [MenuType.Compatibility]: defineAsyncComponent(() => import('./components/Compatibility.vue')),
+  [MenuType.About]: defineAsyncComponent(() => import('./components/About.vue')),
+}
 const activatedMenuItem = ref<MenuType>(MenuType.General)
 const title = ref<string>(t('settings.title'))
 const preventCloseSettings = ref<boolean>(false)
@@ -194,7 +196,9 @@ function setCurrentTitle() {
             <!-- <div h-80px mt--8 /> -->
 
             <Transition name="page-fade">
-              <Component :is="settingsMenu[activatedMenuItem]" />
+              <KeepAlive>
+                <Component :is="settingsMenu[activatedMenuItem]" :key="activatedMenuItem" />
+              </KeepAlive>
             </Transition>
           </main>
         </OverlayScrollbarsComponent>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index c737e27f..732a3c56 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -10,7 +10,6 @@ import HistoryPop from './components/HistoryPop.vue'
 import { getUserID, isHomePage } from '~/utils/main'
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
-import type { AppPage } from '~/enums/appEnums'
 
 // import { useTopBarStore } from '~/stores/topBarStore'
 
@@ -33,8 +32,7 @@ interface Props {
 //   return topBarStore.topBarItems
 // })
 
-const activatedPage = inject('activatedPage') as Ref<AppPage>
-const scrollbarRef = inject('scrollbarRef') as Ref
+const { activatedPage, scrollbarRef } = useBewlyApp()
 
 const mid = getUserID() || ''
 const userInfo = reactive<UserInfo | NonNullable<unknown>>({}) as UnwrapNestedRefs<UserInfo>
diff --git a/src/composables/useAppProvider.ts b/src/composables/useAppProvider.ts
new file mode 100644
index 00000000..794c5ba3
--- /dev/null
+++ b/src/composables/useAppProvider.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue'
+import type { AppPage } from '~/enums/appEnums'
+
+export interface BewlyAppProvider {
+  activatedPage: Ref<AppPage>
+  scrollbarRef: Ref<any>
+  mainAppRef: Ref<any>
+  handleReachBottom: Ref<(() => void) | undefined>
+  handlePageRefresh: Ref<(() => void) | undefined>
+  handleBackToTop: (targetScrollTop: number) => void
+}
+
+export function useBewlyApp(): BewlyAppProvider {
+  const provider = inject<BewlyAppProvider>('BEWLY_APP')
+
+  if (import.meta.env.DEV && !provider)
+    throw new Error('AppProvider is not injected')
+
+  return provider!
+}
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 0bf8ca8f..cecaf8d8 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,28 +1,32 @@
 <script setup lang="ts">
-import { useToggle } from '@vueuse/core'
+import { useThrottleFn, useToggle } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 import type { Ref } from 'vue'
 
-import Home from './Home/Home.vue'
-import Search from './Search/Search.vue'
-import Anime from './Anime/Anime.vue'
-import History from './History/History.vue'
-import WatchLater from './WatchLater/WatchLater.vue'
-import Favorites from './Favorites/Favorites.vue'
 import { accessKey, settings } from '~/logic'
 import { AppPage, LanguageType } from '~/enums/appEnums'
 import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
-import emitter from '~/utils/mitt'
+import type { BewlyAppProvider } from '~/composables/useAppProvider'
 
 const activatedPage = ref<AppPage>(settings.value.dockItemVisibilityList.find(e => e.visible === true)?.page ?? AppPage.Home)
 const { locale } = useI18n()
 const [showSettings, toggleSettings] = useToggle(false)
-const pages = { Home, Search, Anime, History, WatchLater, Favorites }
+const pages = {
+  [AppPage.Home]: defineAsyncComponent(() => import('./Home/Home.vue')),
+  [AppPage.Search]: defineAsyncComponent(() => import('./Search/Search.vue')),
+  [AppPage.Anime]: defineAsyncComponent(() => import('./Anime/Anime.vue')),
+  [AppPage.History]: defineAsyncComponent(() => import('./History/History.vue')),
+  [AppPage.WatchLater]: defineAsyncComponent(() => import('./WatchLater/WatchLater.vue')),
+  [AppPage.Favorites]: defineAsyncComponent(() => import('./Favorites/Favorites.vue')),
+}
 const mainAppRef = ref<HTMLElement>() as Ref<HTMLElement>
 const scrollbarRef = ref()
 const showTopBarMask = ref<boolean>(false)
-const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
+const handlePageRefresh = ref<() => void>()
+const handleReachBottom = ref<() => void>()
+const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.(), 500)
+const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
 const topBarRef = ref()
 
 const isVideoPage = computed(() => {
@@ -123,7 +127,7 @@ function changeActivatePage(pageName: AppPage) {
   if (activatedPage.value === pageName) {
     if (activatedPage.value !== AppPage.Search) {
       if (scrollTop === 0)
-        handleRefresh()
+        handleThrottledPageRefresh()
       else
         handleBackToTop()
     }
@@ -198,12 +202,6 @@ function setAppThemeColor() {
     document.documentElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
 }
 
-function handleRefresh() {
-  emitter.emit('pageRefresh')
-  if (activatedPage.value === AppPage.Anime)
-    dynamicComponentKey.value = `dynamicComponent${Number(new Date())}`
-}
-
 function handleBackToTop(targetScrollTop = 0 as number) {
   const osInstance = scrollbarRef.value?.osInstance()
 
@@ -229,17 +227,20 @@ function handleOsScroll() {
     showTopBarMask.value = true
 
   if (clientHeight + scrollTop >= scrollHeight - 20)
-    emitter.emit('reachBottom')
+    handleThrottledReachBottom()
 
   if (isHomePage())
     topBarRef.value?.handleScroll()
 }
 
-provide('handleBackToTop', handleBackToTop)
-provide('handleRefresh', handleRefresh)
-provide('activatedPage', activatedPage)
-provide('scrollbarRef', scrollbarRef)
-provide('mainAppRef', mainAppRef)
+provide<BewlyAppProvider>('BEWLY_APP', {
+  activatedPage,
+  mainAppRef,
+  scrollbarRef,
+  handleBackToTop,
+  handlePageRefresh,
+  handleReachBottom,
+})
 </script>
 
 <template>
@@ -312,12 +313,14 @@ provide('mainAppRef', mainAppRef)
               <!-- control button group -->
               <BackToTopAndRefreshButtons
                 v-if="activatedPage !== AppPage.Search" :show-refresh-button="!showTopBarMask"
-                @refresh="handleRefresh"
+                @refresh="handleThrottledPageRefresh"
                 @back-to-top="handleBackToTop"
               />
 
               <Transition name="page-fade">
-                <Component :is="pages[activatedPage]" :key="dynamicComponentKey" />
+                <KeepAlive>
+                  <Component :is="pages[activatedPage]" :key="activatedPage" />
+                </KeepAlive>
               </Transition>
             </div>
           </main>
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index ef64d152..9ea638ff 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import type { Ref } from 'vue'
 import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import type { FavoriteCategory, FavoriteResource } from '~/components/TopBar/types'
 import emitter from '~/utils/mitt'
@@ -19,7 +20,7 @@ const activatedCategoryCover = ref<string>('')
 const shouldMoveCtrlBarUp = ref<boolean>(false)
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>('')
-
+const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
 const isLoading = ref<boolean>(true)
 const isFullPageLoading = ref<boolean>(false)
 const noMoreContent = ref<boolean>()
@@ -37,11 +38,6 @@ onMounted(async () => {
       getFavoriteResources(selectedCategory.value!.id, ++currentPageNum.value, keyword.value)
   })
 
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    favoriteResources.length = 0
-    handleSearch()
-  })
   emitter.off('topBarVisibleChange')
   emitter.on('topBarVisibleChange', (val) => {
     shouldMoveCtrlBarUp.value = false
@@ -61,10 +57,16 @@ onMounted(async () => {
 
 onUnmounted(() => {
   emitter.off('reachBottom')
-  emitter.off('pageRefresh')
   emitter.off('topBarVisibleChange')
 })
 
+onActivated(() => {
+  handlePageRefresh.value = () => {
+    favoriteResources.length = 0
+    handleSearch()
+  }
+})
+
 async function getFavoriteCategories() {
   await browser.runtime
     .sendMessage({
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index e9c85777..45ce619e 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -3,6 +3,7 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
 // import type { HistoryItem } from './types'
+import type { Ref } from 'vue'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import emitter from '~/utils/mitt'
@@ -18,6 +19,7 @@ const historyList = reactive<Array<HistoryItem>>([])
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
 const historyStatus = ref<boolean>()
+const handlePageRefresh = inject('handlePageRefresh') as Ref<() => void | Promise<void>>
 
 const HistoryBusiness = computed(() => {
   return Business
@@ -56,17 +58,17 @@ onMounted(() => {
       else getHistoryList()
     }
   })
-
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    historyList.length = 0
-    getHistoryList()
-  })
 })
 
 onUnmounted(() => {
   emitter.off('reachBottom')
-  emitter.off('pageRefresh')
+})
+
+onActivated(() => {
+  handlePageRefresh.value = () => {
+    historyList.length = 0
+    getHistoryList()
+  }
 })
 
 /**
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 33fb2c60..105f5f2a 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import ForYou from './components/ForYou.vue'
-import Following from './components/Following.vue'
-import Trending from './components/Trending.vue'
-import Ranking from './components/Ranking.vue'
-import SubscribedSeries from './components/SubscribedSeries.vue'
+
 import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
@@ -12,11 +8,16 @@ import { settings } from '~/logic'
 
 const { t } = useI18n()
 
-const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) => void
+const { handleBackToTop } = useBewlyApp()
 
-const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
-const pages = { ForYou, Following, SubscribedSeries, Trending, Ranking }
+const pages = {
+  [HomeSubPage.ForYou]: defineAsyncComponent(() => import('./components/ForYou.vue')),
+  [HomeSubPage.Following]: defineAsyncComponent(() => import('./components/Following.vue')),
+  [HomeSubPage.SubscribedSeries]: defineAsyncComponent(() => import('./components/SubscribedSeries.vue')),
+  [HomeSubPage.Trending]: defineAsyncComponent(() => import('./components/Trending.vue')),
+  [HomeSubPage.Ranking]: defineAsyncComponent(() => import('./components/Ranking.vue')),
+}
 const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
 
@@ -51,10 +52,6 @@ watch(() => activatedPage.value, () => {
 
 onMounted(() => {
   showSearchPageMode.value = true
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    recommendContentKey.value = `recommendContent${Number(new Date())}`
-  })
   emitter.off('topBarVisibleChange')
   emitter.on('topBarVisibleChange', (val) => {
     shouldMoveTabsUp.value = false
@@ -73,7 +70,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  emitter.off('pageRefresh')
   emitter.off('topBarVisibleChange')
 })
 </script>
@@ -158,7 +154,9 @@ onUnmounted(() => {
       </header>
 
       <Transition name="page-fade">
-        <Component :is="pages[activatedPage]" :key="recommendContentKey" />
+        <KeepAlive>
+          <Component :is="pages[activatedPage]" :key="activatedPage" />
+        </KeepAlive>
       </Transition>
       <!-- <RecommendContent :key="recommendContentKey" /> -->
     </main>
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 45201fc1..39606552 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
-import emitter from '~/utils/mitt'
 
 const videoList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
@@ -10,28 +9,49 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    offset.value = ''
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+}
 
 onMounted(async () => {
   for (let i = 0; i < 3; i++)
     await getFollowedUsersVideos()
-
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value) {
-      for (let i = 0; i < 3; i++)
-        await getFollowedUsersVideos()
-    }
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
 
+  if (offset.value === '0') {
+    noMoreContent.value = true
+    return
+  }
+
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -116,6 +136,9 @@ function jumpToLoginPage() {
       </template>
     </div>
 
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+
     <Transition name="fade">
       <Loading v-if="isLoading" />
     </Transition>
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index a4a087fd..f4415ff5 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -2,7 +2,6 @@
 import type { Ref } from 'vue'
 import type { AppForYouResult, Item as AppVideoItem } from '~/models/video/appForYou'
 import type { Item as VideoItem, forYouResult } from '~/models/video/forYou'
-import emitter from '~/utils/mitt'
 import { accessKey, settings } from '~/logic'
 import { LanguageType } from '~/enums/appEnums'
 import { TVAppKey } from '~/utils/authProvider'
@@ -14,6 +13,33 @@ const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (!isLoading.value) {
+      if (settings.value.recommendationMode === 'web') {
+        getRecommendVideos()
+      }
+      else {
+        for (let i = 0; i < 3; i++)
+          await getAppRecommendVideos()
+      }
+    }
+  }
+
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    appVideoList.length = 0
+    if (settings.value.recommendationMode === 'web') {
+      await getRecommendVideos()
+    }
+    else {
+      for (let i = 0; i < 3; i++)
+        await getAppRecommendVideos()
+    }
+  }
+}
 
 watch(() => settings.value.recommendationMode, (newValue) => {
   videoList.length = 0
@@ -41,22 +67,11 @@ onMounted(async () => {
     }
   }, 200)
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value) {
-      if (settings.value.recommendationMode === 'web') {
-        getRecommendVideos()
-      }
-      else {
-        for (let i = 0; i < 3; i++)
-          await getAppRecommendVideos()
-      }
-    }
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getRecommendVideos() {
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index d86a73e9..f00d8983 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -7,8 +7,7 @@ import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
 
 const { t } = useI18n()
-
-const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) => void
+const { handleBackToTop, handlePageRefresh } = useBewlyApp()
 
 const rankingTypes = computed((): RankingType[] => {
   return [
@@ -46,6 +45,16 @@ const videoList = reactive<RankingVideoItem[]>([])
 const PgcList = reactive<RankingPgcItem[]>([])
 const shouldMoveAsideUp = ref<boolean>(false)
 
+function initPageAction() {
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    PgcList.length = 0
+    if (isLoading.value)
+      return
+    getRankingVideos()
+  }
+}
+
 watch(() => activatedRankingType.value.id, () => {
   handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
 
@@ -72,6 +81,11 @@ onMounted(() => {
   })
 
   getRankingVideos()
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
 })
 
 onBeforeUnmount(() => {
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index a16c9373..8333b519 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
-import emitter from '~/utils/mitt'
 
 const momentList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
@@ -10,28 +9,52 @@ const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const offset = ref<string>('')
 const updateBaseline = ref<string>('')
 const noMoreContent = ref<boolean>(false)
+const noMoreContentWarning = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value) {
+      noMoreContentWarning.value = true
+      return
+    }
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+  handlePageRefresh.value = async () => {
+    offset.value = ''
+    momentList.length = 0
+    noMoreContent.value = false
+    noMoreContentWarning.value = false
+    if (isLoading.value)
+      return
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+}
 
 onMounted(async () => {
   for (let i = 0; i < 3; i++)
     await getFollowedUsersVideos()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value) {
-      for (let i = 0; i < 3; i++)
-        await getFollowedUsersVideos()
-    }
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
 
+  if (offset.value === '0') {
+    noMoreContent.value = true
+    return
+  }
+
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -115,6 +138,9 @@ function jumpToLoginPage() {
       </template>
     </div>
 
+    <!-- no more content -->
+    <Empty v-if="noMoreContentWarning" class="pb-4" :description="$t('common.no_more_content')" />
+
     <Transition name="fade">
       <Loading v-if="isLoading" />
     </Transition>
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 7bc87719..054a3e68 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -1,25 +1,34 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TrendingResult, List as VideoItem } from '~/models/video/trending'
-import emitter from '~/utils/mitt'
 
 const videoList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const pn = ref<number>(1)
+const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (!isLoading.value)
+      await getTrendingVideos()
+  }
+
+  handlePageRefresh.value = async () => {
+    videoList.length = 0
+    pn.value = 1
+    await getTrendingVideos()
+  }
+}
 
 onMounted(async () => {
   await getTrendingVideos()
 
-  emitter.off('reachBottom')
-  emitter.on('reachBottom', async () => {
-    if (!isLoading.value)
-      await getTrendingVideos()
-  })
+  initPageAction()
 })
 
-onUnmounted(() => {
-  emitter.off('reachBottom')
+onActivated(() => {
+  initPageAction()
 })
 
 async function getTrendingVideos() {
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 57d516db..c5cf7a38 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -3,7 +3,6 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
-import emitter from '~/utils/mitt'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
 
 const { t } = useI18n()
@@ -11,19 +10,17 @@ const { t } = useI18n()
 const isLoading = ref<boolean>()
 const noMoreContent = ref<boolean>()
 const watchLaterList = reactive<VideoItem[]>([])
+const { handlePageRefresh } = useBewlyApp()
 
 onMounted(() => {
   getAllWatchLaterList()
-
-  emitter.off('pageRefresh')
-  emitter.on('pageRefresh', async () => {
-    watchLaterList.length = 0
-    getAllWatchLaterList()
-  })
 })
 
-onUnmounted(() => {
-  emitter.off('pageRefresh')
+onActivated(() => {
+  handlePageRefresh.value = () => {
+    watchLaterList.length = 0
+    getAllWatchLaterList()
+  }
 })
 
 /**
diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts
index ce8b2a33..ee0ca3dc 100644
--- a/src/logic/common-setup.ts
+++ b/src/logic/common-setup.ts
@@ -29,6 +29,4 @@ export async function setupApp(app: App) {
       position: POSITION.TOP_CENTER,
     })
   app.use(pinia)
-  const { OverlayScrollbarsComponent } = await import('overlayscrollbars-vue')
-  app.component('OverlayScrollbarsComponent', OverlayScrollbarsComponent)
 }
diff --git a/vite.config.ts b/vite.config.ts
index 214fcaab..f16a2b7b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,11 +33,13 @@ export const sharedConfig: UserConfig = {
           ],
         },
       ],
+      dirs: [r('src/composables')],
       dts: r('src/auto-imports.d.ts'),
     }),
 
     // https://github.com/antfu/unplugin-vue-components
     Components({
+      extensions: ['vue', 'ts'],
       dirs: [r('src/components')],
       // generate `components.d.ts` for ts support with Volar
       dts: r('src/components.d.ts'),