feat: automatically hide the top bar

src/components/Settings/components/General.vue

@@ -77,10 +77,6 @@ watch(() => settings.value.language, (newValue, oldValue) => {
         />
       </SettingsItem>
 
-      <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
-        <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
-      </SettingsItem>
-
       <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
         <Select
           v-model="settings.dockPosition"
@@ -97,6 +93,15 @@ watch(() => settings.value.language, (newValue, oldValue) => {
         <Radio v-model="settings.openLinkInCurrentTab" />
       </SettingsItem> -->
     </SettingsItemGroup>
+
+    <SettingsItemGroup title="Top Bar">
+      <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+        <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+      </SettingsItem>
+      <SettingsItem title="automatically hide the top bar">
+        <Radio v-model="settings.autoHideTopbar" />
+      </SettingsItem>
+    </SettingsItemGroup>
   </div>
 </template>
 

src/components/Topbar/Topbar.vue

@@ -5,6 +5,8 @@ import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils/main'
 import { settings } from '~/logic'
+import emitter from '~/utils/mitt'
+import type { AppPage } from '~/enums/appEnums'
 
 interface Props {
   showSearchBar?: boolean
@@ -17,9 +19,14 @@ const props = withDefaults(defineProps<Props>(), {
   showLogo: true,
 })
 
+const activatedPage = inject('activatedPage') as Ref<AppPage>
+
 const mid = getUserID() || ''
 const userInfo = reactive<UserInfo | {}>({}) as UnwrapNestedRefs<UserInfo>
 
+const hideTopbar = ref<boolean>(false)
+const hovingTopbar = ref<boolean>(false)
+
 const showChannelsPop = ref<boolean>(false)
 const showUserPanelPop = ref<boolean>(false)
 const showNotificationsPop = ref<boolean>(false)
@@ -77,8 +84,18 @@ watch(showFavoritesPop, (newVal, oldVal) => {
   }
 })
 
+watch(activatedPage, () => {
+  hideTopbar.value = false
+  emitter.emit('topbarVisibleChange', true)
+})
+
 onMounted(() => {
   initData()
+  window.addEventListener('wheel', handleScroll)
+})
+
+onBeforeMount(() => {
+  window.removeEventListener('wheel', handleScroll)
 })
 
 async function initData() {
@@ -93,6 +110,23 @@ async function initData() {
   }, updateInterval)
 }
 
+// Function to handle the wheel event with type annotation for the event parameter
+function handleScroll(event: WheelEvent): void {
+  hideTopbar.value = false
+
+  if (settings.value.autoHideTopbar && !hovingTopbar.value) {
+    if (event.deltaY < 0) {
+      hideTopbar.value = false
+      emitter.emit('topbarVisibleChange', true)
+    }
+
+    else {
+      hideTopbar.value = true
+      emitter.emit('topbarVisibleChange', false)
+    }
+  }
+}
+
 function showLogoMenuDropdown() {
   logo.value.classList.add('activated')
   showChannelsPop.value = true
@@ -193,7 +227,10 @@ async function getTopbarNewMomentsCount() {
 
 <template>
   <header
-    w="full"
+    w="full" transition="all 300 ease-in-out"
+    :class="{ hide: hideTopbar }"
+    @mouseenter="hovingTopbar = true"
+    @mouseleave="hovingTopbar = false"
   >
     <main
       max-w="$bew-page-max-width" m-auto flex="~"
@@ -543,6 +580,10 @@ async function getTopbarNewMomentsCount() {
   --at-apply: opacity-0;
 }
 
+.hide {
+  transform: translateY(-100%);
+}
+
 .bew-popover {
   --at-apply: absolute top-60px left-1/2
     transform -translate-x-1/2

src/contentScripts/views/Favorites/Favorites.vue

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { getCSRF, getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import type { FavoriteCategory, FavoriteResource } from '~/components/Topbar/types'
 import emitter from '~/utils/mitt'
+import { settings } from '~/logic'
 
 const { t } = useI18n()
 
@@ -13,6 +14,7 @@ const categoryOptions = reactive<Array<{ value: any; label: string }>>([])
 const selectedCategory = ref<FavoriteCategory>()
 const activatedCategoryCover = ref<string>('')
 
+const shouldMoveCtrlBarUp = ref<boolean>(false)
 const currentPageNum = ref<number>(1)
 const keyword = ref<string>('')
 
@@ -38,11 +40,27 @@ onMounted(async () => {
     favoriteResources.length = 0
     handleSearch()
   })
+  emitter.off('topbarVisibleChange')
+  emitter.on('topbarVisibleChange', (val) => {
+    shouldMoveCtrlBarUp.value = false
+
+    // Allow moving tabs up only when the top bar is not hidden & is set to auto-hide
+    // This feature is primarily designed to compatible with the Bilibili Evolved's top bar
+    // Even when the BewlyBewly top bar is hidden, the Bilibili Evolved top bar still exists, so not moving up
+    if (settings.value.autoHideTopbar && settings.value.isShowTopbar) {
+      if (val)
+        shouldMoveCtrlBarUp.value = false
+
+      else
+        shouldMoveCtrlBarUp.value = true
+    }
+  })
 })
 
 onUnmounted(() => {
   emitter.off('reachBottom')
   emitter.off('pageRefresh')
+  emitter.off('topbarVisibleChange')
 })
 
 async function getFavoriteCategories() {
@@ -151,7 +169,8 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
       </h3> -->
       <div
         fixed z-10 absolute p-2 flex="~ gap-2" items-center
-        bg="$bew-elevated-solid-1" rounded="$bew-radius" shadow="$bew-shadow-2" mt--2
+        bg="$bew-elevated-solid-1" rounded="$bew-radius" shadow="$bew-shadow-2" mt--2 transition="all 300 ease-in-out"
+        :class="{ hide: shouldMoveCtrlBarUp }"
       >
         <Select v-model="selectedCategory" w-150px :options="categoryOptions" @change="(val) => changeCategory(val.value)" />
         <Input v-model="keyword" w-250px @enter="handleSearch" />
@@ -285,6 +304,10 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
 </template>
 
 <style lang="scss" scoped>
+.hide {
+  transform: translateY(-70px);
+}
+
 .category-list {
   &::-webkit-scrollbar {
     width: 8px;

src/contentScripts/views/Home/Home.vue

@@ -17,6 +17,7 @@ const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
 const pages = { ForYou, Following, Trending, Ranking }
 const showSearchPageMode = ref<boolean>(false)
+const shouldMoveTabsUp = ref<boolean>(false)
 
 const tabs = computed((): HomeTab[] => {
   return [
@@ -49,10 +50,26 @@ onMounted(() => {
   emitter.on('pageRefresh', async () => {
     recommendContentKey.value = `recommendContent${Number(new Date())}`
   })
+  emitter.off('topbarVisibleChange')
+  emitter.on('topbarVisibleChange', (val) => {
+    shouldMoveTabsUp.value = false
+
+    // Allow moving tabs up only when the top bar is not hidden & is set to auto-hide
+    // This feature is primarily designed to compatible with the Bilibili Evolved's top bar
+    // Even when the BewlyBewly top bar is hidden, the Bilibili Evolved top bar still exists, so not moving up
+    if (settings.value.autoHideTopbar && settings.value.isShowTopbar) {
+      if (val)
+        shouldMoveTabsUp.value = false
+
+      else
+        shouldMoveTabsUp.value = true
+    }
+  })
 })
 
 onUnmounted(() => {
   emitter.off('pageRefresh')
+  emitter.off('topbarVisibleChange')
 })
 </script>
 
@@ -116,7 +133,10 @@ onUnmounted(() => {
         </div>
       </Transition>
 
-      <header pos="sticky top-80px" w-fit z-10 mb-9>
+      <header
+        pos="sticky top-80px" w-fit z-10 mb-9 transition="all 300 ease-in-out"
+        :class="{ hide: shouldMoveTabsUp }"
+      >
         <ul flex="~ items-center gap-2">
           <li
             v-for="tab in tabs" :key="tab.value"
@@ -163,6 +183,10 @@ onUnmounted(() => {
   --at-apply: hidden
 }
 
+.hide {
+  transform: translateY(-70px);
+}
+
 .tab-activated {
   --at-apply: bg-$bew-theme-color dark:bg-white color-white dark:color-black
     border-$bew-theme-color dark:border-white;

src/logic/storage.ts

@@ -13,6 +13,8 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   enableHorizontalScrolling: false,
   openLinkInCurrentTab: false,
 
+  autoHideTopbar: false,
+
   theme: 'auto',
   themeColor: '#00a1d6',
   adaptToOtherPageStyles: true,

src/models/models.ts

@@ -8,6 +8,8 @@ export interface Settings {
   enableHorizontalScrolling: boolean
   openLinkInCurrentTab: boolean
 
+  autoHideTopbar: boolean
+
   theme: 'light' | 'dark' | 'auto'
   themeColor: string
   adaptToOtherPageStyles: boolean