From 5ef0abe3aec10919024b58ce81126171e976f815 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 26 Nov 2023 19:46:50 +0800
Subject: [PATCH] feat: automatically hide the dock

---
 src/components/Dock/Dock.vue                  | 38 +++++++++++++++++--
 .../Settings/components/General.vue           | 23 ++++++-----
 src/contentScripts/views/App.vue              |  1 +
 src/logic/storage.ts                          |  6 +--
 src/models/models.ts                          |  6 +--
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 5bf9d4f3..fd72b501 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -11,6 +11,8 @@ const emit = defineEmits(['change-page', 'settings-visibility-change'])
 
 const { t } = useI18n()
 
+const hideDock = ref<boolean>(false)
+
 const hoveringDockItem = reactive<HoveringDockItem>({
   themeMode: false,
   settings: false,
@@ -44,12 +46,24 @@ const dockItems = computed((): DockItem[] => {
   ]
 })
 
+onMounted(() => {
+  if (settings.value.autoHideDock)
+    hideDock.value = true
+})
+
 function toggleDark() {
   if (currentAppColorScheme.value === 'light')
     settings.value.theme = 'dark'
   else
     settings.value.theme = 'light'
 }
+
+function toggleDockHide(hide: boolean) {
+  if (settings.value.autoHideDock)
+    hideDock.value = hide
+  else
+    hideDock.value = false
+}
 </script>
 
 <template>
@@ -59,8 +73,11 @@ function toggleDark() {
       left: settings.dockPosition === 'left',
       right: settings.dockPosition === 'right',
       bottom: settings.dockPosition === 'bottom',
+      hide: hideDock,
     }"
     pos="absolute top-0" flex="~ col" h-full justify-center z-1 pointer-events-none
+    @mouseenter="toggleDockHide(false)"
+    @mouseleave="toggleDockHide(true)"
   >
     <div
       class="dock-content"
@@ -120,25 +137,40 @@ function toggleDark() {
 
 <style lang="scss" scoped>
 .dock-wrap {
+  --at-apply: duration-300 ease-in-out
+    after:content-empty after:absolute
+    after:w-[calc(100%+14px)] after:h-[calc(100%+14px)] after:z--1
+    after:pointer-events-auto;
+
   svg {
     --at-apply: block align-middle;
   }
 
   &.left {
-    --at-apply: left-2;
+    --at-apply: left-2 after:right--4px;
+  }
+  &.left.hide {
+    --at-apply: opacity-0 translate-x--100%;
   }
 
   &.right {
-    --at-apply: right-2;
+    --at-apply: right-2 after:left--4px;
+  }
+  &.right.hide {
+    --at-apply: opacity-0 translate-x-100%;
   }
 
   &.bottom {
-    --at-apply: top-unset bottom-0 items-center w-full h-[fit-content];
+    --at-apply: top-unset bottom-0 items-center w-full h-[fit-content]
+      after:top--10px after:w-full;
 
     .dock-content {
       --at-apply: flex-row;
     }
   }
+  &.bottom.hide {
+    --at-apply: opacity-0 translate-y-100%;
+  }
 
   .divider {
     --at-apply: my-2 w-full h-2px bg-$bew-fill-2;
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index bcdfd6c5..5800cea9 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -77,14 +77,6 @@ watch(() => settings.value.language, (newValue, oldValue) => {
         />
       </SettingsItem>
 
-      <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
-        <Select
-          v-model="settings.dockPosition"
-          :options="dockPositions"
-          w="full"
-        />
-      </SettingsItem>
-
       <SettingsItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
         <Radio v-model="settings.enableHorizontalScrolling" />
       </SettingsItem>
@@ -98,10 +90,23 @@ watch(() => settings.value.language, (newValue, oldValue) => {
       <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">
+      <SettingsItem title="Automatically hide the top bar">
         <Radio v-model="settings.autoHideTopbar" />
       </SettingsItem>
     </SettingsItemGroup>
+
+    <SettingsItemGroup title="Dock">
+      <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
+        <Select
+          v-model="settings.dockPosition"
+          :options="dockPositions"
+          w="full"
+        />
+      </SettingsItem>
+      <SettingsItem title="Automatically hide the dock">
+        <Radio v-model="settings.autoHideDock" />
+      </SettingsItem>
+    </SettingsItemGroup>
   </div>
 </template>
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 544ddffd..2e34d22b 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -253,6 +253,7 @@ provide('scrollbarRef', scrollbarRef)
 
   <div
     ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-hidden z-60
+    pos="absolute top-0 left-0" w-full h-full overflow-hidden
     :style="{ opacity: 1, height: isHomePage() ? '100vh' : '0' }"
   >
     <!-- Dock & RightSideButtons -->
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 97037807..4dbbfdaa 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -8,12 +8,12 @@ export const accessKey = useStorageLocal('accessKey', '')
 export const settings = useStorageLocal('settings', ref<Settings>({
   language: '',
   startupPage: AppPage.Home,
-  isShowTopbar: true,
-  dockPosition: 'right',
   enableHorizontalScrolling: false,
   openLinkInCurrentTab: false,
-
+  isShowTopbar: true,
   autoHideTopbar: false,
+  dockPosition: 'right',
+  autoHideDock: false,
 
   theme: 'auto',
   themeColor: '#00a1d6',
diff --git a/src/models/models.ts b/src/models/models.ts
index 996dbcdf..b83aa65e 100644
--- a/src/models/models.ts
+++ b/src/models/models.ts
@@ -3,12 +3,12 @@ import type { AppPage } from '~/enums/appEnums'
 export interface Settings {
   language: string
   startupPage: AppPage
-  isShowTopbar: boolean
-  dockPosition: 'left' | 'right' | 'bottom'
   enableHorizontalScrolling: boolean
   openLinkInCurrentTab: boolean
-
+  isShowTopbar: boolean
   autoHideTopbar: boolean
+  dockPosition: 'left' | 'right' | 'bottom'
+  autoHideDock: boolean
 
   theme: 'light' | 'dark' | 'auto'
   themeColor: string