From da16f7ff511d4dd2183211ed17304fcc1ddaf6f8 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 23 Feb 2025 19:35:36 +0800
Subject: [PATCH] feat(dock): add option to separate back to top and refresh
 buttons

- Implement new setting to split back to top and refresh buttons
- Update localization files with new setting description
- Modify Dock component to support separated buttons
- Add configuration option in settings panel
- Set default to separated buttons in storage settings
---
 src/_locales/cmn-CN.yml                       |  1 +
 src/_locales/cmn-TW.yml                       |  1 +
 src/_locales/en.yml                           |  1 +
 src/_locales/jyut.yml                         |  1 +
 src/components/Dock/Dock.vue                  | 92 ++++++++++++++-----
 .../DesktopAndDock/DesktopAndDock.vue         |  3 +
 src/logic/storage.ts                          |  4 +
 7 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index 3935a14d..c74fa972 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -175,6 +175,7 @@ settings:
   dock_item_use_original_bili_web_page: 使用原版 Bilibili 网页
   disable_dock_glowing_effect: 关闭 Dock 栏发光效果
   disable_light_dark_mode_switcher: 禁用亮/暗色模式切换按钮
+  back_to_top_and_refresh_buttons_are_separated: 分离回到顶部和刷新按钮
   sidebar_position: 侧边栏位置
   auto_hide_sidebar: 自动隐藏侧边栏
 
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index 5e382658..ffc307c5 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -175,6 +175,7 @@ settings:
   dock_item_use_original_bili_web_page: 使用原版 Bilibili 網頁
   disable_dock_glowing_effect: 關閉 Dock 發光效果
   disable_light_dark_mode_switcher: 關閉淺/深色模式切換按鈕
+  back_to_top_and_refresh_buttons_are_separated: 分離回到頂部和重新整理按鈕
   sidebar_position: 側邊欄位置
   auto_hide_sidebar: 自動隱藏側邊欄
 
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index 4c3fbc96..03116dcc 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -177,6 +177,7 @@ settings:
   dock_item_use_original_bili_web_page: Use the original Bilibili web page
   disable_dock_glowing_effect: Disable the dock glowing effect
   disable_light_dark_mode_switcher: Disable light/dark mode switcher
+  back_to_top_and_refresh_buttons_are_separated: Separate Back to Top and Refresh Buttons
   sidebar_position: Sidebar position
   auto_hide_sidebar: Automatically hide the sidebar
 
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index fb5fec74..b520275c 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -173,6 +173,7 @@ settings:
   dock_item_use_original_bili_web_page: 用返原本嘅 Bilibili 網頁
   disable_dock_glowing_effect: 熄咗 Dock 發光效果去
   disable_light_dark_mode_switcher: 閂咗淺 / 深色主題切換粒掣去
+  back_to_top_and_refresh_buttons_are_separated: 分離返到最篤同重新整理掣
   sidebar_position: 側邊欄位置
   auto_hide_sidebar: 自動收埋側邊欄
 
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 6ddffb96..2cb810b8 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -156,11 +156,20 @@ function openDockItemInNewTab(dockItem: DockItem) {
   openLinkToNewTab(`https://www.bilibili.com/?page=${dockItem.page}`)
 }
 
-function handleBackToTopOrRefresh() {
-  if (reachTop.value)
-    emit('refresh')
-  else
+function handleBackToTopOrRefresh(action: 'backToTop' | 'refresh' | 'auto' = 'auto') {
+  if (action === 'backToTop') {
     emit('backToTop')
+  }
+  else if (action === 'refresh') {
+    emit('backToTop')
+    emit('refresh')
+  }
+  else {
+    if (reachTop.value)
+      emit('refresh')
+    else
+      emit('backToTop')
+  }
 }
 
 function isDockItemActivated(dockItem: DockItem): boolean {
@@ -328,27 +337,63 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
         </Tooltip>
       </div>
 
-      <button
+      <!-- Back to top & refresh buttons -->
+      <div
         v-if="showBackToTopOrRefreshButton"
-        class="back-to-top-or-refresh-btn"
-        :class="{
-          inactive: hoveringDockItem.themeMode && isDark,
-        }"
-        @click="handleBackToTopOrRefresh"
+        pos="absolute bottom-0"
+        transform="translate-y-100%"
+        flex="~ col gap-2"
       >
-        <Transition name="fade">
-          <Icon
-            v-if="reachTop"
-            icon="line-md:rotate-270"
-            shrink-0 rotate-90 absolute text-2xl
-          />
-          <Icon
-            v-else
-            icon="line-md:arrow-small-up"
-            shrink-0 absolute text-2xl
-          />
-        </Transition>
-      </button>
+        <template
+          v-if="settings.backToTopAndRefreshButtonsAreSeparated"
+        >
+          <template v-for="key in 2" :key="key">
+            <Transition name="fade">
+              <button
+                v-if="key === 1 || key === 2 && !reachTop"
+                class="back-to-top-or-refresh-btn"
+                :class="{
+                  inactive: hoveringDockItem.themeMode && isDark,
+                }"
+                @click="handleBackToTopOrRefresh(key === 1 ? 'refresh' : 'backToTop')"
+              >
+                <Icon
+                  v-if="key === 1"
+                  icon="line-md:rotate-270"
+                  shrink-0 rotate-90 absolute text-2xl
+                />
+                <Icon
+                  v-else
+                  icon="line-md:arrow-small-up"
+                  shrink-0 absolute text-2xl
+                />
+              </button>
+            </Transition>
+          </template>
+        </template>
+        <template v-else>
+          <button
+            class="back-to-top-or-refresh-btn"
+            :class="{
+              inactive: hoveringDockItem.themeMode && isDark,
+            }"
+            @click="handleBackToTopOrRefresh('auto')"
+          >
+            <Transition name="fade">
+              <Icon
+                v-if="reachTop"
+                icon="line-md:rotate-270"
+                shrink-0 rotate-90 absolute text-2xl
+              />
+              <Icon
+                v-else
+                icon="line-md:arrow-small-up"
+                shrink-0 absolute text-2xl
+              />
+            </Transition>
+          </button>
+        </template>
+      </div>
     </div>
   </aside>
 </template>
@@ -435,7 +480,6 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
   }
 
   .back-to-top-or-refresh-btn {
-    --uno: "absolute lg:bottom--45px bottom--35px";
     --uno: "transform active:important-scale-90 hover:scale-110";
     --uno: "lg:w-45px w-35px lg:h-45px h-35px";
     --uno: "grid place-items-center";
diff --git a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
index 9c0995b9..1748c847 100644
--- a/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
+++ b/src/components/Settings/DesktopAndDock/DesktopAndDock.vue
@@ -200,6 +200,9 @@ function handleToggleDockItem(dockItem: any) {
       <SettingsItem :title="$t('settings.disable_light_dark_mode_switcher')">
         <Radio v-model="settings.disableLightDarkModeSwitcherOnDock" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.back_to_top_and_refresh_buttons_are_separated')">
+        <Radio v-model="settings.backToTopAndRefreshButtonsAreSeparated" />
+      </SettingsItem>
     </SettingsItemGroup>
     <SettingsItemGroup :title="$t('settings.group_sidebar')" :desc="$t('settings.group_sidebar_desc')">
       <SettingsItem :title="$t('settings.sidebar_position')">
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 56eea603..9b530a4e 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -51,6 +51,8 @@ export interface Settings {
   dockItemsConfig: { page: AppPage, visible: boolean, openInNewTab: boolean, useOriginalBiliPage: boolean }[]
   disableDockGlowingEffect: boolean
   disableLightDarkModeSwitcherOnDock: boolean
+  backToTopAndRefreshButtonsAreSeparated: boolean
+
   sidebarPosition: 'left' | 'right'
   autoHideSidebar: boolean
 
@@ -152,6 +154,8 @@ export const originalSettings: Settings = {
   dockItemsConfig: [],
   disableDockGlowingEffect: false,
   disableLightDarkModeSwitcherOnDock: false,
+  backToTopAndRefreshButtonsAreSeparated: true,
+
   sidebarPosition: 'right',
   autoHideSidebar: false,