From cd53dcf9c0673670c95d2c3b161124abd7ce4a25 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 8 Oct 2023 13:32:50 +0800
Subject: [PATCH] refactor: separate buttons into `BackToTopAndRefreshButtons`
 component

---
 src/components/BackToTopAndRefreshButtons.vue | 29 +++++++++++++++++++
 src/contentScripts/views/App.vue              | 28 ++++--------------
 2 files changed, 34 insertions(+), 23 deletions(-)
 create mode 100644 src/components/BackToTopAndRefreshButtons.vue

diff --git a/src/components/BackToTopAndRefreshButtons.vue b/src/components/BackToTopAndRefreshButtons.vue
new file mode 100644
index 00000000..ed916ffd
--- /dev/null
+++ b/src/components/BackToTopAndRefreshButtons.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{ showRefreshButton: boolean }>()
+const emit = defineEmits(['refresh', 'back-to-top'])
+</script>
+
+<template>
+  <div
+    pos="fixed right-24 bottom-4" z-4
+  >
+    <!-- refresh button -->
+    <Button
+      v-if="showRefreshButton"
+      size="small"
+      frosted-glass shadow="$bew-shadow-1" w-45px important-h-45px
+      @click="emit('refresh')"
+    >
+      <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="emit('back-to-top')"
+    >
+      <tabler:arrow-big-up text-lg shrink-0 />
+    </Button>
+  </div>
+</template>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 210a9679..49887ff8 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -290,29 +290,11 @@ function handleOsScroll() {
             :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>
+            <BackToTopAndRefreshButtons
+              v-if="activatedPage !== AppPage.Search" :show-refresh-button="!showTopbarMask"
+              @refresh="handleRefresh"
+              @back-to-top="handleBackToTop"
+            />
 
             <Transition name="page-fade">
               <Component :is="pages[activatedPage]" :key="dynamicComponentKey" />