From c6b37b3dfcb6bb00e8fd21c818dac457b6c540fc Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 24 Dec 2023 17:24:04 +0800
Subject: [PATCH] feat: implement reset content feature in dock

---
 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                  | 48 ++++++++-------
 src/components/Dock/types.ts                  |  2 +-
 .../Settings/components/General.vue           | 58 +++++++++++++------
 .../Settings/components/SettingsItem.vue      | 14 +++--
 src/contentScripts/views/App.vue              |  2 +-
 src/logic/storage.ts                          | 50 ++++++++++++----
 src/models/settings.ts                        | 39 -------------
 src/store/index.ts                            | 49 ----------------
 src/stores/mainStore.ts                       | 24 ++++++++
 13 files changed, 145 insertions(+), 145 deletions(-)
 delete mode 100644 src/models/settings.ts
 delete mode 100644 src/store/index.ts
 create mode 100644 src/stores/mainStore.ts

diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index 8f7d5df1..59a7bb71 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -22,6 +22,7 @@ common:
   enable: 启用
   disable: 禁用
   refresh: 刷新
+  reset: 重置
 settings:
   title: 设置
   menu_general: 通用
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index ae25c849..ae608e8f 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -22,6 +22,7 @@ common:
   enable: 啓用
   disable: 停用
   refresh: 重新整理
+  reset: 重置
 settings:
   title: 設定
   menu_general: 一般
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index f07054d5..0e1858d0 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -22,6 +22,7 @@ common:
   enable: Enable
   disable: Disable
   refresh: Refresh
+  reset: Reset
 settings:
   title: Settings
 
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index cc852bc2..b170bb5a 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -22,6 +22,7 @@ common:
   enable: 打開
   disable: 閂埋
   refresh: 重新整理
+  reset: 重置
 settings:
   title: 設定
   menu_general: 一般
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 8b590560..84a57cf0 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import type { DockItem, HoveringDockItem } from './types'
-import { AppPage } from '~/enums/appEnums'
-import { dockItemVisibilityList, settings } from '~/logic'
+import type { CurrentDockItem, HoveringDockItem } from './types'
+import type { AppPage } from '~/enums/appEnums'
+import { settings } from '~/logic'
+import type { DockItem } from '~/stores/mainStore'
+import { useMainStore } from '~/stores/mainStore'
 
 defineProps<{ activatedPage: AppPage }>()
 
 const emit = defineEmits(['change-page', 'settings-visibility-change'])
 
+const mainStore = useMainStore() as any
+
 const { t } = useI18n()
 
 const hideDock = ref<boolean>(false)
@@ -35,15 +39,15 @@ const currentAppColorScheme = computed((): 'dark' | 'light' => {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 })
 
-const dockItems = computed((): DockItem[] => {
-  return [
-    { label: t('dock.search'), icon: 'mingcute:search-2-line', iconActivated: 'mingcute:search-2-fill', page: AppPage.Search },
-    { label: t('dock.home'), icon: 'mingcute:home-5-line', iconActivated: 'mingcute:home-5-fill', page: AppPage.Home },
-    { label: t('dock.anime'), icon: 'mingcute:tv-2-line', iconActivated: 'mingcute:tv-2-fill', page: AppPage.Anime },
-    { label: t('dock.favorites'), icon: 'mingcute:star-line', iconActivated: 'mingcute:star-fill', page: AppPage.Favorites },
-    { label: t('dock.history'), icon: 'mingcute:time-line', iconActivated: 'mingcute:time-fill', page: AppPage.History },
-    { label: t('dock.watch_later'), icon: 'mingcute:carplay-line', iconActivated: 'mingcute:carplay-fill', page: AppPage.WatchLater },
-  ]
+const currentDockItems = computed((): CurrentDockItem[] => {
+  return mainStore.dockItems.map((e: DockItem) => {
+    return {
+      label: t(e.i18nKey),
+      icon: e.icon,
+      iconActivated: e.iconActivated,
+      page: e.page,
+    }
+  })
 })
 
 watch(() => settings.value.autoHideDock, (newValue) => {
@@ -54,27 +58,27 @@ onMounted(() => {
   if (settings.value.autoHideDock)
     hideDock.value = true
 
-  if (dockItemVisibilityList.value.length < dockItems.value.length || dockItemVisibilityList.value.length > dockItems.value.length) {
+  if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length || settings.value.dockItemVisibilityList.length > currentDockItems.value.length) {
     const newDockItemVisibilityList = ref<{ page: AppPage; visible: boolean }[]>([])
-    dockItems.value.forEach((item) => {
+    currentDockItems.value.forEach((item) => {
       newDockItemVisibilityList.value.push({ page: item.page, visible: true })
     })
 
     // Compare two arrays, get the differing elements, and delete or add them to the dockItemVisibilityList
-    const notInNewDockItemVisibilityList = dockItemVisibilityList.value.filter(obj1 =>
+    const notInNewDockItemVisibilityList = settings.value.dockItemVisibilityList.filter(obj1 =>
       !newDockItemVisibilityList.value.some(obj2 => obj1.page === obj2.page),
     )
     const notInDockItemVisibilityList = newDockItemVisibilityList.value.filter(obj1 =>
-      !dockItemVisibilityList.value.some(obj2 => obj1.page === obj2.page),
+      !settings.value.dockItemVisibilityList.some(obj2 => obj1.page === obj2.page),
     )
     const allDifferences = [...notInDockItemVisibilityList, ...notInNewDockItemVisibilityList]
 
-    if (dockItemVisibilityList.value.length < dockItems.value.length) {
-      dockItemVisibilityList.value.push(...allDifferences)
+    if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length) {
+      settings.value.dockItemVisibilityList.push(...allDifferences)
     }
     else {
       allDifferences.forEach((obj1) => {
-        dockItemVisibilityList.value = dockItemVisibilityList.value.filter(obj2 => obj2.page !== obj1.page)
+        settings.value.dockItemVisibilityList = settings.value.dockItemVisibilityList.filter(obj2 => obj2.page !== obj1.page)
       })
     }
   }
@@ -116,15 +120,15 @@ function toggleDockHide(hide: boolean) {
       shadow="$bew-shadow-2"
       backdrop-glass pointer-events-auto
     >
-      <template v-for="dockItemVisibility in dockItemVisibilityList" :key="dockItemVisibility.page">
+      <template v-for="dockItemVisibility in settings.dockItemVisibilityList" :key="dockItemVisibility.page">
         <template v-if="dockItemVisibility.visible">
-          <Tooltip :content="dockItems.find((item) => item.page === dockItemVisibility.page)?.label ?? ''" :placement="tooltipPlacement">
+          <Tooltip :content="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.label as string" :placement="tooltipPlacement">
             <button
               class="dock-item"
               :class="{ active: activatedPage === dockItemVisibility.page }"
               @click="emit('change-page', dockItemVisibility.page)"
             >
-              <Icon :icon="dockItems.find((item) => item.page === dockItemVisibility.page)?.icon ?? ''" />
+              <Icon :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string" />
             </button>
           </Tooltip>
         </template>
diff --git a/src/components/Dock/types.ts b/src/components/Dock/types.ts
index 97bf83fd..f9dd5095 100644
--- a/src/components/Dock/types.ts
+++ b/src/components/Dock/types.ts
@@ -1,6 +1,6 @@
 import type { AppPage } from '~/enums/appEnums'
 
-export interface DockItem {
+export interface CurrentDockItem {
   label: string
   icon: string
   iconActivated: string
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index 1ebadde5..4266a233 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
-import { dockItemVisibilityList, settings } from '~/logic'
-import { AppPage } from '~/enums/appEnums'
+import { Icon } from '@iconify/vue'
+import { settings } from '~/logic'
+import { useMainStore } from '~/stores/mainStore'
 
+const mainStore = useMainStore() as any
 const { t, locale } = useI18n()
 
 const langOptions = computed(() => {
@@ -43,20 +45,28 @@ const dockPositions = computed(() => {
   ]
 })
 
-const pageOptions = computed((): { label: string; value: string }[] => {
-  return [
-    { label: t('dock.search'), value: AppPage.Search },
-    { label: t('dock.home'), value: AppPage.Home },
-    { label: t('dock.anime'), value: AppPage.Anime },
-    { label: t('dock.history'), value: AppPage.History },
-    { label: t('dock.favorites'), value: AppPage.Favorites },
-    { label: t('dock.watch_later'), value: AppPage.WatchLater },
-  ]
+const pageOptions = computed((): { label: string;icon: string; value: string }[] => {
+  return mainStore.dockItems.map((e: any) => {
+    return {
+      label: t(e.i18nKey),
+      icon: e.icon,
+      value: e.page,
+    }
+  })
 })
 
 watch(() => settings.value.language, (newValue) => {
   locale.value = newValue
 })
+
+function resetDockContent() {
+  settings.value.dockItemVisibilityList = mainStore.dockItems.map((e: any) => {
+    return {
+      page: e.page,
+      visible: true,
+    }
+  })
+}
 </script>
 
 <template>
@@ -110,9 +120,20 @@ watch(() => settings.value.language, (newValue) => {
       <SettingsItem :title="$t('settings.auto_hide_dock')">
         <Radio v-model="settings.autoHideDock" />
       </SettingsItem>
-      <SettingsItem :title="$t('settings.dock_content_adjustment')" next-line>
+      <SettingsItem next-line>
+        <template #title>
+          <div flex="~ gap-4 items-center">
+            {{ $t('settings.dock_content_adjustment') }}
+            <Button size="small" type="secondary" @click="resetDockContent">
+              <template #left>
+                <mingcute:back-line />
+              </template>
+              {{ $t('common.reset') }}
+            </Button>
+          </div>
+        </template>
         <draggable
-          v-model="dockItemVisibilityList"
+          v-model="settings.dockItemVisibilityList"
           item-key="page"
           :component-data="{ style: 'display: flex; gap: 0.5rem;' }"
         >
@@ -120,12 +141,13 @@ watch(() => settings.value.language, (newValue) => {
             <div
               flex="~ gap-2 items-center" p="x-4 y-2" bg="$bew-fill-1" rounded="$bew-radius" cursor-all-scroll
               duration-300
-              :style="{ opacity: element.visible ? 1 : 0.6 }"
+              :style="{
+                background: element.visible ? 'var(--bew-theme-color)' : 'var(--bew-fill-1)',
+                color: element.visible ? 'white' : 'var(--bew-text-1)',
+              }"
+              @click="element.visible = !element.visible"
             >
-              <div @click="element.visible = !element.visible">
-                <line-md:watch v-if="element.visible" cursor-pointer />
-                <line-md:watch-off v-else cursor-pointer />
-              </div>
+              <Icon :icon="pageOptions.find((page:any) => (page.value === element.page))?.icon as string" />
               {{ pageOptions.find(option => option.value === element.page)?.label }}
             </div>
           </template>
diff --git a/src/components/Settings/components/SettingsItem.vue b/src/components/Settings/components/SettingsItem.vue
index b04ded55..70399076 100644
--- a/src/components/Settings/components/SettingsItem.vue
+++ b/src/components/Settings/components/SettingsItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  title: string
+  title?: string
   desc?: string
   nextLine?: boolean
 }>()
@@ -10,13 +10,17 @@ defineProps<{
   <div class="b-settings-item" py-4>
     <div flex="~ gap-4" justify-betwee items-center text-base>
       <div :w="nextLine ? 'full' : '5/7'">
-        {{ title }}
-        <br>
-        <span text="sm $bew-text-2">
+        <div mb-2>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+
+        <div text="sm $bew-text-2">
           <slot name="desc">
             {{ desc }}
           </slot>
-        </span>
+        </div>
       </div>
 
       <div v-if="!nextLine" w="2/7" class="right-content">
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 7a26a078..fd35f205 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -15,7 +15,7 @@ import { AppPage, LanguageType } from '~/enums/appEnums'
 import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
-const activatedPage = ref<AppPage>(settings.value.startupPage ?? AppPage.Home)
+const activatedPage = ref<AppPage>(settings.value.dockItemVisibilityList[0].page ?? AppPage.Home)
 const { locale } = useI18n()
 const [showSettings, toggleSettings] = useToggle(false)
 const pages = { Home, Search, Anime, History, WatchLater, Favorites }
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index ce417967..1cb0086f 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -1,10 +1,48 @@
 import { useStorageLocal } from '~/composables/useStorageLocal'
 import { AppPage } from '~/enums/appEnums'
-import type { Settings } from '~/models/settings'
+
+// TODO: refactor: implement storage functionality using pinia + useStorageLocal()
 
 export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo')
 export const accessKey = useStorageLocal('accessKey', '')
 
+export interface Settings {
+  language: string
+  enableHorizontalScrolling: boolean
+  openLinkInCurrentTab: boolean
+  enableVideoCtrlBarOnVideoCard: boolean
+  isShowTopbar: boolean
+  autoHideTopbar: boolean
+  dockPosition: 'left' | 'right' | 'bottom'
+  autoHideDock: boolean
+  dockItemVisibilityList: { page: AppPage; visible: boolean }[]
+
+  theme: 'light' | 'dark' | 'auto'
+  themeColor: string
+  adaptToOtherPageStyles: boolean
+  wallpaperMode: 'buildIn' | 'byUrl'
+  wallpaper: string
+  enableWallpaperMasking: boolean
+  wallpaperMaskOpacity: number
+  wallpaperBlurIntensity: number
+
+  searchPageDarkenOnSearchFocus: boolean
+  searchPageBlurredOnSearchFocus: boolean
+  searchPageLogoColor: 'white' | 'themeColor'
+  searchPageLogoGlow: boolean
+  searchPageShowLogo: boolean
+  searchPageSearchBarFocusCharacter: string
+  individuallySetSearchPageWallpaper: boolean
+  searchPageWallpaperMode: 'buildIn' | 'byUrl'
+  searchPageWallpaper: string
+  searchPageEnableWallpaperMasking: boolean
+  searchPageWallpaperMaskOpacity: number
+  searchPageWallpaperBlurIntensity: number
+
+  recommendationMode: 'web' | 'app'
+  useSearchPageModeOnHomePage: boolean
+  searchPageModeWallpaperFixed: boolean
+}
 export const settings = useStorageLocal('settings', ref<Settings>({
   language: '',
   startupPage: AppPage.Home,
@@ -15,6 +53,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   autoHideTopbar: false,
   dockPosition: 'right',
   autoHideDock: false,
+  dockItemVisibilityList: [],
 
   theme: 'auto',
   themeColor: '#00a1d6',
@@ -42,12 +81,3 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   useSearchPageModeOnHomePage: false,
   searchPageModeWallpaperFixed: false,
 }), { mergeDefaults: true })
-
-export const dockItemVisibilityList = useStorageLocal('dockItems', reactive<{ page: AppPage; visible: boolean }[]>([
-  // { page: AppPage.Search, visible: true },
-  // { page: AppPage.Home, visible: true },
-  // { page: AppPage.Anime, visible: true },
-  // { page: AppPage.Favorites, visible: true },
-  // { page: AppPage.History, visible: true },
-  // { page: AppPage.WatchLater, visible: true },
-]))
diff --git a/src/models/settings.ts b/src/models/settings.ts
deleted file mode 100644
index 9cd90055..00000000
--- a/src/models/settings.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { AppPage } from '~/enums/appEnums'
-
-export interface Settings {
-  language: string
-  startupPage: AppPage
-  enableHorizontalScrolling: boolean
-  openLinkInCurrentTab: boolean
-  enableVideoCtrlBarOnVideoCard: boolean
-  isShowTopbar: boolean
-  autoHideTopbar: boolean
-  dockPosition: 'left' | 'right' | 'bottom'
-  autoHideDock: boolean
-
-  theme: 'light' | 'dark' | 'auto'
-  themeColor: string
-  adaptToOtherPageStyles: boolean
-  wallpaperMode: 'buildIn' | 'byUrl'
-  wallpaper: string
-  enableWallpaperMasking: boolean
-  wallpaperMaskOpacity: number
-  wallpaperBlurIntensity: number
-
-  searchPageDarkenOnSearchFocus: boolean
-  searchPageBlurredOnSearchFocus: boolean
-  searchPageLogoColor: 'white' | 'themeColor'
-  searchPageLogoGlow: boolean
-  searchPageShowLogo: boolean
-  searchPageSearchBarFocusCharacter: string
-  individuallySetSearchPageWallpaper: boolean
-  searchPageWallpaperMode: 'buildIn' | 'byUrl'
-  searchPageWallpaper: string
-  searchPageEnableWallpaperMasking: boolean
-  searchPageWallpaperMaskOpacity: number
-  searchPageWallpaperBlurIntensity: number
-
-  recommendationMode: 'web' | 'app'
-  useSearchPageModeOnHomePage: boolean
-  searchPageModeWallpaperFixed: boolean
-}
diff --git a/src/store/index.ts b/src/store/index.ts
deleted file mode 100644
index 030bb3ec..00000000
--- a/src/store/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// import { defineStore } from 'pinia'
-// import { useStorageLocal } from '~/composables/useStorageLocal'
-// import { AppPage } from '~/enums/appEnums'
-// import type { Settings } from '~/models/settings'
-
-// export const useSettingsStore = defineStore('settings', () => {
-//   const settings = useStorageLocal('settings', ref<Settings>({
-//     language: '',
-//     startupPage: AppPage.Home,
-//     enableHorizontalScrolling: false,
-//     openLinkInCurrentTab: false,
-//     enableVideoCtrlBarOnVideoCard: false,
-//     isShowTopbar: true,
-//     autoHideTopbar: false,
-//     dockPosition: 'right',
-//     autoHideDock: false,
-
-//     theme: 'auto',
-//     themeColor: '#00a1d6',
-//     adaptToOtherPageStyles: true,
-//     wallpaperMode: 'buildIn',
-//     wallpaper: '',
-//     enableWallpaperMasking: false,
-//     wallpaperMaskOpacity: 0,
-//     wallpaperBlurIntensity: 0,
-
-//     searchPageDarkenOnSearchFocus: true,
-//     searchPageBlurredOnSearchFocus: false,
-//     searchPageLogoColor: 'themeColor',
-//     searchPageLogoGlow: true,
-//     searchPageShowLogo: true,
-//     searchPageSearchBarFocusCharacter: '',
-//     individuallySetSearchPageWallpaper: false,
-//     searchPageWallpaperMode: 'buildIn',
-//     searchPageWallpaper: '',
-//     searchPageEnableWallpaperMasking: false,
-//     searchPageWallpaperMaskOpacity: 0,
-//     searchPageWallpaperBlurIntensity: 0,
-
-//     recommendationMode: 'web',
-//     useSearchPageModeOnHomePage: false,
-//     searchPageModeWallpaperFixed: false,
-//   }), { mergeDefaults: true })
-
-//   function updateSettingsItem<T extends keyof Settings>(key: T, value: Settings[T]) {
-//     settings.value[key] = value
-//   }
-//   return { settings, updateSettingsItem }
-// })
diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts
new file mode 100644
index 00000000..b0a8dd1a
--- /dev/null
+++ b/src/stores/mainStore.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { AppPage } from '~/enums/appEnums'
+
+export interface DockItem {
+  i18nKey: string
+  icon: string
+  iconActivated: string
+  page: AppPage
+}
+
+export const useMainStore = defineStore('main', () => {
+  const dockItems = computed((): DockItem[] => {
+    return [
+      { i18nKey: 'dock.home', icon: 'mingcute:home-5-line', iconActivated: 'mingcute:home-5-fill', page: AppPage.Home },
+      { i18nKey: 'dock.search', icon: 'mingcute:search-2-line', iconActivated: 'mingcute:search-2-fill', page: AppPage.Search },
+      { i18nKey: 'dock.anime', icon: 'mingcute:tv-2-line', iconActivated: 'mingcute:tv-2-fill', page: AppPage.Anime },
+      { i18nKey: 'dock.favorites', icon: 'mingcute:star-line', iconActivated: 'mingcute:star-fill', page: AppPage.Favorites },
+      { i18nKey: 'dock.history', icon: 'mingcute:time-line', iconActivated: 'mingcute:time-fill', page: AppPage.History },
+      { i18nKey: 'dock.watch_later', icon: 'mingcute:carplay-line', iconActivated: 'mingcute:carplay-fill', page: AppPage.WatchLater },
+    ]
+  })
+
+  return { dockItems }
+})