From 3d3f57bfc3068255b36ac8e7d1d7575bcb7a9217 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 20 Feb 2025 16:27:13 +0800
Subject: [PATCH] feat: notifications drawer

Squashed commit of the following:

commit e0d503ef38c5b8d4b19f81368b53b656e6935ff7
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 16:24:53 2025 +0800

    feat(locales): add translation for notifications page drawer option

commit 5c4e5aab811c3bf73d2cfc983e646edca66dff55
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 16:24:32 2025 +0800

    chore: udpate

commit dd7ff6dfeadd514746e1a10773702387cea3c550
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 16:13:54 2025 +0800

    fix(a-link): disable click event when using modifier key click

commit f4801a040b26d6b084168859f2a1e5b9b32ae178
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 16:06:13 2025 +0800

    feat: enhance notifications drawer functionality with custom URL and click handling

commit 7e63cd4417572a5455c8dbccc447f8fe37d92c02
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 15:36:53 2025 +0800

    chore: update

commit 077c416e1ead6cd9ed249375c6c0c4625b2339ec
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 14:32:28 2025 +0800

    fix: add Teleport to NotificationsDrawer for better app integration

commit 5e17ed34f68677bfc8423ad3e24ea3cc3afa038e
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 14:26:36 2025 +0800

    chore: tweak styles

commit 4536347b12ef9e3d0c2ce06c1395ba89fe44fc51
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 13:52:29 2025 +0800

    feat: improve notifications drawer styles

commit 022ea89eed4ae5c6953445118dec97acb15cf38e
Merge: 17f882e7 7a513921
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 12:30:04 2025 +0800

    Merge branch 'main' into feat/notications-drawer

commit 17f882e7cda0b4d74b916592d526f4b1ad5f921d
Merge: 4d615462 6dd838a8
Author: Hakadao <a578457889743@gmail.com>
Date:   Thu Feb 20 12:18:44 2025 +0800

    feat: update notifications drawer style

commit 4d6154625af76917aca55970f8c29d0dcd40a416
Author: Hakadao <a578457889743@gmail.com>
Date:   Wed Feb 19 18:58:24 2025 +0800

    feat: notifications drawer
---
 src/_locales/cmn-CN.yml                       |   2 +
 src/_locales/cmn-TW.yml                       |   2 +
 src/_locales/en.yml                           |   2 +
 src/_locales/jyut.yml                         |   2 +
 src/components/ALink.vue                      |   6 +-
 .../DesktopAndDock/DesktopAndDock.vue         |   3 +
 src/components/TopBar/TopBar.vue              |  36 ++-
 .../TopBar/components/NotificationsDrawer.vue | 226 ++++++++++++++++++
 .../TopBar/components/NotificationsPop.vue    |  15 +-
 src/contentScripts/index.ts                   |  27 +--
 src/contentScripts/views/App.vue              |   8 +-
 src/logic/storage.ts                          |   4 +
 src/styles/adaptedStyles/index.ts             |   7 +-
 .../pages/notificationsPage.scss              |  33 +++
 src/utils/main.ts                             |  18 +-
 15 files changed, 361 insertions(+), 30 deletions(-)
 create mode 100644 src/components/TopBar/components/NotificationsDrawer.vue

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index ff9f639d..8a72640b 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -156,6 +156,8 @@ settings:
     number: 数字
     dot: 圆点
     none: 不显示
+  open_notifications_page_as_drawer: 将通知页面作为抽屉打开
+
   always_use_dock: 总是使用 Dock 栏
   always_use_dock_desc: 启用后，Dock 栏将始终显示，侧边栏将隐藏。我们推荐你同时启用自动隐藏 Dock 栏。
   auto_hide_dock: 自动隐藏 Dock 栏
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index 90273e88..2de5a726 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -156,6 +156,8 @@ settings:
     number: 數字
     dot: 圓點
     none: 不顯示
+  open_notifications_page_as_drawer: 將通知頁面作為抽屜開啟
+
   always_use_dock: 總是使用 Dock
   always_use_dock_desc: 啟用後，Dock 將始終顯示，側邊欄將隱藏。我們推薦你同時啟用自動隱藏 Dock。
   auto_hide_dock: 自動隱藏 Dock
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 3bf18d12..09dff0dc 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -158,6 +158,8 @@ settings:
     number: Number
     dot: Dot
     none: Do not show
+  open_notifications_page_as_drawer: Open the notifications page as a drawer
+
   always_use_dock: Always use the dock
   always_use_dock_desc: The dock will always be visible and the sidebar will be hidden. We also recommend enabling auto-hide for the dock.
   auto_hide_dock: Automatically hide the dock
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index 724309dc..0c532f24 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -154,6 +154,8 @@ settings:
     number: 數字
     dot: 圓點
     none: 唔顯示
+  open_notifications_page_as_drawer: 用櫃桶打開通知頁面
+
   always_use_dock: 點都要用 Dock
   always_use_dock_desc: 啓用後，Dock 點都要用佢而唔係用側邊欄。我哋推介你同時啓用自動收埋 Dock 去。
   auto_hide_dock: 自動收埋 Dock
diff --git a/src/components/ALink.vue b/src/components/ALink.vue
index 835dc1a9..5fd6f2ba 100644
--- a/src/components/ALink.vue
+++ b/src/components/ALink.vue
@@ -41,12 +41,16 @@ const target = computed(() => {
 })
 
 function handleClick(event: MouseEvent) {
+  if (event.ctrlKey || event.metaKey || event.altKey)
+    return
+
   if (props.customClickEvent) {
+    event.preventDefault()
     emit('click', event)
     return
   }
 
-  if (openMode.value === 'drawer' && !event.ctrlKey && !event.metaKey) {
+  if (openMode.value === 'drawer') {
     event.preventDefault()
     openIframeDrawer(props.href)
   }
diff --git a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
index 5b0576a2..80eab9bd 100644
--- a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
+++ b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
@@ -107,6 +107,9 @@ function handleToggleDockItem(dockItem: any) {
       <SettingsItem :title="$t('settings.top_bar_icon_badges')">
         <Select v-model="settings.topBarIconBadges" :options="topBarIconBadgesOptions" w="full" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.open_notifications_page_as_drawer')">
+        <Radio v-model="settings.openNotificationsPageAsDrawer" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_dock')">
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 473eedf0..5caa4bfe 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -18,6 +18,7 @@ import FavoritesPop from './components/FavoritesPop.vue'
 import HistoryPop from './components/HistoryPop.vue'
 import MomentsPop from './components/MomentsPop.vue'
 import MorePop from './components/MorePop.vue'
+import NotificationsDrawer from './components/NotificationsDrawer.vue'
 import NotificationsPop from './components/NotificationsPop.vue'
 import UploadPop from './components/UploadPop.vue'
 import UserPanelPop from './components/UserPanelPop.vue'
@@ -55,6 +56,10 @@ const avatarShadow = ref<HTMLImageElement>() as Ref<HTMLImageElement>
 const scrollTop = ref<number>(0)
 const oldScrollTop = ref<number>(0)
 
+const drawerVisible = reactive({
+  notifications: false,
+})
+
 const isSearchPage = computed((): boolean => {
   if (/https?:\/\/search.bilibili.com\/.*$/.test(location.href))
     return true
@@ -428,6 +433,14 @@ async function getUnreadMessageCount() {
     unReadMessageCount.value = result
   }
 }
+
+const notificationsDrawerUrl = ref<string>('https://message.bilibili.com/')
+function handleNotificationsItemClick(item: { name: string, url: string, unreadCount: number, icon: string }) {
+  if (settings.value.openNotificationsPageAsDrawer) {
+    drawerVisible.notifications = true
+    notificationsDrawerUrl.value = item.url
+  }
+}
 // #endregion
 
 // #region Moments
@@ -823,11 +836,14 @@ defineExpose({
                       class="unread-dot"
                     />
                   </template>
+
                   <ALink
+                    :href="settings.openNotificationsPageAsDrawer ? undefined : 'https://message.bilibili.com'"
                     :class="{ 'white-icon': forceWhiteIcon }"
-                    href="https://message.bilibili.com"
                     :title="$t('topbar.notifications')"
                     type="topBar"
+                    :custom-click-event="settings.openNotificationsPageAsDrawer"
+                    @click="drawerVisible.notifications = true"
                   >
                     <div i-tabler:bell />
                   </ALink>
@@ -838,6 +854,7 @@ defineExpose({
                       ref="notificationsTransformer"
                       class="bew-popover"
                       @click.stop="() => {}"
+                      @item-click="handleNotificationsItemClick"
                     />
                   </Transition>
                 </div>
@@ -901,6 +918,12 @@ defineExpose({
           </div>
         </div>
       </main>
+
+      <NotificationsDrawer
+        v-if="drawerVisible.notifications && settings.openNotificationsPageAsDrawer"
+        :url="notificationsDrawerUrl"
+        @close="drawerVisible.notifications = false"
+      />
     </header>
   </Transition>
 </template>
@@ -1033,19 +1056,24 @@ defineExpose({
   .right-side-item {
     --uno: "relative text-$bew-text-1 flex items-center";
 
-    &:not(.avatar) a {
+    &:not(.avatar) a,
+    & .notifications {
       --uno: "text-lg grid place-items-center rounded-40px duration-300 relative z-5";
       --uno: "h-34px w-34px";
       filter: drop-shadow(0 0 4px var(--bew-bg));
     }
 
     &.active a,
-    & a:hover {
+    & a:hover,
+    & .notifications:hover,
+    & .notifications:active {
       --uno: "bg-$bew-fill-2";
     }
 
     &.active a.white-icon,
-    & a:hover.white-icon {
+    & a:hover.white-icon,
+    & .notifications:hover.white-icon,
+    & .notifications:active.white-icon {
       --uno: "bg-white bg-opacity-20";
     }
 
diff --git a/src/components/TopBar/components/NotificationsDrawer.vue b/src/components/TopBar/components/NotificationsDrawer.vue
new file mode 100644
index 00000000..4b6239ac
--- /dev/null
+++ b/src/components/TopBar/components/NotificationsDrawer.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+
+import { useBewlyApp } from '~/composables/useAppProvider'
+import { settings } from '~/logic'
+
+// TODO: support shortcuts like `Ctrl+Alt+T` to open in new tab, `Esc` to close
+
+const props = defineProps<{
+  url?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { mainAppRef } = useBewlyApp()
+
+const show = ref(false)
+const headerShow = ref(false)
+const iframeRef = ref<HTMLIFrameElement | null>(null)
+const currentUrl = ref<string>(props.url || 'https://message.bilibili.com/')
+const delayCloseTimer = ref<NodeJS.Timeout | null>(null)
+
+onMounted(() => {
+  show.value = true
+  headerShow.value = true
+  nextTick(() => {
+    iframeRef.value?.focus()
+  })
+})
+
+onBeforeUnmount(() => {
+  releaseIframeResources()
+})
+
+async function handleClose() {
+  if (delayCloseTimer.value) {
+    clearTimeout(delayCloseTimer.value)
+  }
+  await releaseIframeResources()
+  show.value = false
+  headerShow.value = false
+  delayCloseTimer.value = setTimeout(() => {
+    emit('close')
+  }, 300)
+}
+
+async function releaseIframeResources() {
+  // Clear iframe content
+  currentUrl.value = 'about:blank'
+  /**
+   * eg: When use 'iframeRef.value?.contentWindow?.document' of t.bilibili.com iframe on bilibili.com, there may be cross domain issues
+   * set the src to 'about:blank' to avoid this issue, it also can release the memory
+   */
+  if (iframeRef.value) {
+    iframeRef.value.src = 'about:blank'
+  }
+  await nextTick()
+  iframeRef.value?.contentWindow?.close()
+
+  // Remove iframe from the DOM
+  iframeRef.value?.parentNode?.removeChild(iframeRef.value)
+  await nextTick()
+
+  // Nullify the reference
+  iframeRef.value = null
+}
+
+function handleOpenInNewTab() {
+  if (iframeRef.value) {
+    try {
+      window.open(iframeRef.value.contentWindow?.location.href.replace(/\/$/, ''), '_blank')
+    }
+    catch {
+      window.open('https://message.bilibili.com/', '_blank')
+    }
+    handleClose()
+  }
+}
+
+const isEscPressed = ref<boolean>(false)
+const escPressedTimer = ref<NodeJS.Timeout | null>(null)
+const disableEscPress = ref<boolean>(false)
+
+/**
+ * Not working, idk why
+ */
+nextTick(() => {
+  onKeyStroke('Escape', (e: KeyboardEvent) => {
+    e.preventDefault()
+    if (settings.value.closeDrawerWithoutPressingEscAgain) {
+      clearTimeout(escPressedTimer.value!)
+      handleClose()
+      return
+    }
+    if (disableEscPress.value)
+      return
+    if (isEscPressed.value) {
+      handleClose()
+    }
+    else {
+      isEscPressed.value = true
+      if (escPressedTimer.value) {
+        clearTimeout(escPressedTimer.value)
+      }
+      escPressedTimer.value = setTimeout(() => {
+        isEscPressed.value = false
+      }, 1300)
+    }
+  }, { target: iframeRef.value?.contentWindow })
+})
+
+// const keys = useMagicKeys()
+// const ctrlAltT = keys['Ctrl+Alt+T']
+
+// watch(() => ctrlAltT, (value) => {
+//   if (value) {
+//     handleOpenInNewTab()
+//   }
+// })
+</script>
+
+<template>
+  <Teleport :to="mainAppRef">
+    <div
+      pos="fixed top-0 left-0" of-hidden w-full h-full
+      z-999999
+    >
+      <!-- Mask -->
+      <Transition name="fade">
+        <div
+          v-if="show"
+          pos="absolute bottom-0 left-0" w-full h-full bg="black opacity-60"
+          @click="handleClose"
+        />
+      </Transition>
+
+      <Transition name="drawer">
+        <div
+          v-if="show"
+          pos="absolute top-0 right-0" of-hidden bg="$bew-bg"
+          w="xl:70vw lg:80vw md:100vw 100vw" max-w-1400px h-full
+        >
+          <div
+            v-if="headerShow"
+            pos="fixed top-0 right-0" z-10 flex="~ items-center justify-between gap-2"
+            w-inherit max-w-inherit h="$bew-top-bar-height"
+            m-auto px-4
+            pointer-events-none
+          >
+            <h3 text="xl" fw-bold>
+              {{ $t('topbar.notifications') }}
+            </h3>
+            <div flex="~ items-center gap-2">
+              <Button
+                style="
+                  --b-button-color: var(--bew-elevated-solid);
+                  --b-button-color-hover: var(--bew-elevated-solid-hover);
+                "
+                pointer-events-auto
+                @click="handleOpenInNewTab"
+              >
+                <template #left>
+                  <i i-mingcute:external-link-line />
+                </template>
+                {{ $t('iframe_drawer.open_in_new_tab') }}
+              <!-- <div flex="~">
+            <kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>T</kbd>
+          </div> -->
+              </Button>
+              <Button
+                v-if="!isEscPressed"
+                style="
+                  --b-button-color: var(--bew-elevated-solid);
+                  --b-button-color-hover: var(--bew-elevated-solid-hover);
+                "
+                pointer-events-auto
+                @click="handleClose"
+              >
+                <template #left>
+                  <i i-mingcute:close-line />
+                </template>
+                {{ $t('iframe_drawer.close') }}
+                <kbd>Esc</kbd>
+              </Button>
+              <Button
+                v-else
+                type="error"
+                @click="handleClose"
+              >
+                <template #left>
+                  <i i-mingcute:close-line />
+                </template>
+                {{ $t('iframe_drawer.press_esc_again_to_close') }}
+                <kbd>Esc</kbd>
+              </Button>
+            </div>
+          </div>
+
+          <!-- Iframe -->
+          <iframe
+            ref="iframeRef"
+            :src="currentUrl"
+            frameborder="0"
+            pointer-events-auto
+            pos="relative right-0"
+            w-inherit max-w-inherit h-full
+          />
+        </div>
+      </Transition>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: transform 0.3s;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index 0caa796f..f7f39b1f 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
+import { settings } from '~/logic'
 import api from '~/utils/api'
 
+const emit = defineEmits<{
+  (e: 'itemClick', item: { name: string, url: string, unreadCount: number, icon: string }): void
+}>()
+
 const { t } = useI18n()
-const list = ref<{ name: string, url: string, unreadCount: number, icon: string }[]>([
+const list = computed((): { name: string, url: string, unreadCount: number, icon: string }[] => [
   {
     name: t('topbar.noti_dropdown.replys'),
     url: 'https://message.bilibili.com/#/reply',
@@ -67,6 +72,12 @@ function getUnreadMessageCount() {
     list.value[4].unreadCount = 0
   })
 }
+
+function handleClick(event: MouseEvent, item: { name: string, url: string, unreadCount: number, icon: string }) {
+  if (settings.value.openNotificationsPageAsDrawer) {
+    emit('itemClick', item)
+  }
+}
 </script>
 
 <template>
@@ -91,6 +102,8 @@ function getUnreadMessageCount() {
       rounded="$bew-radius"
       transition="all duration-300"
       m="b-1 last:b-0"
+      :custom-click-event="!settings.useOldTopBar && settings.openNotificationsPageAsDrawer"
+      @click="(event: MouseEvent) => handleClick(event, item)"
     >
       <div flex="~ items-center gap-2">
         <i :class="item.icon" text="$bew-text-2" />
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 6e6ea7fa..4f2af4a6 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -9,7 +9,7 @@ import { settings } from '~/logic'
 import { setupApp } from '~/logic/common-setup'
 import RESET_BEWLY_CSS from '~/styles/reset.css?raw'
 import { runWhenIdle } from '~/utils/lazyLoad'
-import { compareVersions, injectCSS, isHomePage, isInIframe } from '~/utils/main'
+import { compareVersions, injectCSS, isHomePage, isInIframe, isNotificationPage, isVideoOrBangumiPage } from '~/utils/main'
 import { SVG_ICONS } from '~/utils/svgIcons'
 
 import { version } from '../../package.json'
@@ -36,18 +36,10 @@ function isSupportedPages(): boolean {
   if (
     // homepage
     isHomePage()
-
+    // video or bangumi page
+    || isVideoOrBangumiPage()
     // popular page https://www.bilibili.com/v/popular/all
     || /https?:\/\/(?:www\.)?bilibili\.com\/v\/popular\/all.*/.test(currentUrl)
-    // video page
-    || /https?:\/\/(?:www\.)?bilibili\.com\/(?:video|list)\/.*/.test(currentUrl)
-    // anime playback & movie page
-    || /https?:\/\/(?:www\.)?bilibili\.com\/bangumi\/play\/.*/.test(currentUrl)
-    // watch later playlist
-    || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater.*/.test(currentUrl)
-    || /https?:\/\/(?:www\.)?bilibili\.com\/watchlater\/list.*/.test(currentUrl)
-    // favorite playlist
-    || /https?:\/\/(?:www\.)?bilibili\.com\/list\/ml.*/.test(currentUrl)
     // search page
     || /https?:\/\/search\.bilibili\.com\.*/.test(currentUrl)
     // moments page
@@ -98,6 +90,8 @@ export function isSupportedIframePages(): boolean {
     && (
       // supports Bilibili page URLs recorded in the dock
       isHomePage()
+      // Since `Open in drawer` will open the video page within an iframe, so we need to support the following pages
+      || isVideoOrBangumiPage()
       || /https?:\/\/search\.bilibili\.com\/all.*/.test(currentUrl)
       || /https?:\/\/www\.bilibili\.com\/anime.*/.test(currentUrl)
       || /https?:\/\/space\.bilibili\.com\/\d+\/favlist.*/.test(currentUrl)
@@ -108,15 +102,8 @@ export function isSupportedIframePages(): boolean {
       // https://github.com/BewlyBewly/BewlyBewly/issues/1256
       // https://github.com/BewlyBewly/BewlyBewly/issues/1266
       || /https?:\/\/t\.bilibili\.com(?!\/vote|\/share).*/.test(currentUrl)
-      // Since `Open in drawer` will open the video page within an iframe, so we need to support the following pages
-      // video page
-      || /https?:\/\/(?:www\.)?bilibili\.com\/(?:video|list)\/.*/.test(currentUrl)
-      // anime playback & movie page
-      || /https?:\/\/(?:www\.)?bilibili\.com\/bangumi\/play\/.*/.test(currentUrl)
-      // watch later playlist
-      || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater.*/.test(currentUrl)
-      // favorite playlist
-      || /https?:\/\/(?:www\.)?bilibili\.com\/list\/ml.*/.test(currentUrl)
+      // notifications page, for `Open the notifications page as a drawer`
+      || isNotificationPage()
     )
   ) {
     return true
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 17c61a90..1c2e2019 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -4,12 +4,12 @@ import type { Ref } from 'vue'
 
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
-import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, IFRAME_PAGE_SWITCH_BEWLY, IFRAME_PAGE_SWITCH_BILI, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
+import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, IFRAME_PAGE_ESC_KEY_DOWN, IFRAME_PAGE_SWITCH_BEWLY, IFRAME_PAGE_SWITCH_BILI, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import { type DockItem, useMainStore } from '~/stores/mainStore'
 import { useSettingsStore } from '~/stores/settingsStore'
-import { isHomePage, isInIframe, isVideoOrBangumiPage, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
+import { isHomePage, isInIframe, isNotificationPage, isVideoOrBangumiPage, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
@@ -98,6 +98,10 @@ const showTopBar = computed((): boolean => {
   if (isVideoOrBangumiPage() && isInIframe())
     return false
 
+  // when user open the notifications page as a drawer, don't show the top bar
+  if (isNotificationPage() && settings.value.openNotificationsPageAsDrawer && isInIframe())
+    return false
+
   // When the user switches to the original Bilibili page, BewlyBewly will only show the top bar inside the iframe.
   // This helps prevent the outside top bar from covering the contents.
   // reference: https://github.com/BewlyBewly/BewlyBewly/issues/1235
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 45844012..1fc88c2a 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -39,6 +39,8 @@ export interface Settings {
   showBewlyOrBiliTopBarSwitcher: boolean
   showBewlyOrBiliPageSwitcher: boolean
   topBarIconBadges: 'number' | 'dot' | 'none'
+  openNotificationsPageAsDrawer: boolean
+
   alwaysUseDock: boolean
   autoHideDock: boolean
   dockPosition: 'left' | 'right' | 'bottom'
@@ -137,6 +139,8 @@ export const originalSettings: Settings = {
   showBewlyOrBiliTopBarSwitcher: true,
   showBewlyOrBiliPageSwitcher: true,
   topBarIconBadges: 'number',
+  openNotificationsPageAsDrawer: true,
+
   alwaysUseDock: false,
   autoHideDock: false,
   dockPosition: 'right',
diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index e062febe..0b144328 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/src/styles/adaptedStyles/index.ts
@@ -2,7 +2,8 @@ import './common'
 import './shadowDom'
 import './thirdParties'
 
-import { isHomePage } from '~/utils/main'
+import { settings } from '~/logic/storage'
+import { isHomePage, isInIframe } from '~/utils/main'
 
 async function setupStyles() {
   const currentUrl = document.URL
@@ -17,6 +18,10 @@ async function setupStyles() {
   else if (/https?:\/\/message\.bilibili\.com\.*/.test(currentUrl)) {
     await import('./pages/notificationsPage.scss')
     document.documentElement.classList.add('notificationsPage')
+
+    if (isInIframe() && settings.value.openNotificationsPageAsDrawer) {
+      document.documentElement.classList.add('drawer')
+    }
   }
 
   // moments page, new articles page 动态页, 新版专栏页
diff --git a/src/styles/adaptedStyles/pages/notificationsPage.scss b/src/styles/adaptedStyles/pages/notificationsPage.scss
index 38e62b7a..abb4e6cb 100644
--- a/src/styles/adaptedStyles/pages/notificationsPage.scss
+++ b/src/styles/adaptedStyles/pages/notificationsPage.scss
@@ -2,6 +2,38 @@
   #message-navbar {
     display: none;
   }
+
+  .side-bar {
+    font-weight: 400 !important;
+  }
+
+  &.drawer {
+    body {
+      background: unset;
+      background-color: var(--bew-homepage-bg) !important;
+    }
+
+    #message-navbar + .container,
+    #link-message-container .container {
+      width: 100vw !important;
+      max-width: unset !important;
+      margin: 0 !important;
+    }
+
+    #message-navbar + .container::after {
+      display: none;
+    }
+
+    .space-left,
+    .space-right {
+      backdrop-filter: none;
+      background-color: unset !important;
+    }
+
+    .space-left .title {
+      display: none;
+    }
+  }
 }
 
 html.bewly-design.notificationsPage {
@@ -27,6 +59,7 @@ html.bewly-design.notificationsPage {
         background: url(https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/light_bg.8e46311e.png)
           bottom/cover no-repeat fixed;
         pointer-events: none;
+        opacity: 0.4;
       }
     }
   }
diff --git a/src/utils/main.ts b/src/utils/main.ts
index 26f258e5..76edb9db 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -167,12 +167,14 @@ export function isHomePage(url: string = location.href): boolean {
  * @returns true if the current page is a video or bangumi page
  */
 export function isVideoOrBangumiPage(url: string = location.href): boolean {
-  if ( // video page
+  if (
+    // video page
     /https?:\/\/(?:www\.)?bilibili\.com\/(?:video|list)\/.*/.test(url)
     // anime playback & movie page
     || /https?:\/\/(?:www\.)?bilibili\.com\/bangumi\/play\/.*/.test(url)
     // watch later playlist
     || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater.*/.test(url)
+    || /https?:\/\/(?:www\.)?bilibili\.com\/watchlater\/list.*/.test(url)
     // favorite playlist
     || /https?:\/\/(?:www\.)?bilibili\.com\/list\/ml.*/.test(url)) {
     return true
@@ -180,6 +182,20 @@ export function isVideoOrBangumiPage(url: string = location.href): boolean {
   return false
 }
 
+/**
+ * Check if the current page is the notifications page
+ * @param url the url to check
+ * @returns true if the current page is the notifications page
+ */
+export function isNotificationPage(url: string = location.href): boolean {
+  if (
+    /https?:\/\/message\.bilibili\.com\.*/.test(url)
+  ) {
+    return true
+  }
+  return false
+}
+
 /**
  * Compresses and resizes an image file.
  *