refactor: refactor methods for dock items comparison and home tabs comparison

2025-04-14 13:15:29 +00:00 · 2024-03-04 01:15:11 -03:00
parent 3fd17f4d3b
commit 6e2ed46f8a
6 changed files with 101 additions and 149 deletions
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
 import { usePreferredDark } from '@vueuse/core'
-import type { CurrentDockItem, HoveringDockItem } from './types'
-import type { AppPage } from '~/enums/appEnums'
+import type { HoveringDockItem } from './types'
+import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import type { DockItem } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
@@ -14,14 +13,13 @@ const emit = defineEmits(['change-page', 'settings-visibility-change'])
 const { mainAppRef } = useBewlyApp()

 const mainStore = useMainStore()
-const { t } = useI18n()

 const hideDock = ref<boolean>(false)
-
 const hoveringDockItem = reactive<HoveringDockItem>({
  themeMode: false,
  settings: false,
 })
+const currentDockItems = ref<DockItem[]>([])

 const tooltipPlacement = computed(() => {
  if (settings.value.dockPosition === 'left')
@@ -43,49 +41,39 @@ const currentAppColorScheme = computed((): 'dark' | 'light' => {
    return currentSystemColorScheme.value
 })

-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) => {
  hideDock.value = newValue
 })

+// use Json stringify to watch the changes of the array item properties
+watch(() => JSON.stringify(settings.value.dockItemVisibilityList), () => {
+  currentDockItems.value = computeDockItem()
+})
+
+function computeDockItem(): DockItem[] {
+  // if dockItemVisibilityList not fresh , set it to default
+  if (!settings.value.dockItemVisibilityList.length || settings.value.dockItemVisibilityList.length !== mainStore.dockItems.length)
+    settings.value.dockItemVisibilityList = mainStore.dockItems.map(dock => ({ page: dock.page, visible: true }))
+
+  const targetDockItems: DockItem[] = []
+
+  settings.value.dockItemVisibilityList.forEach((item) => {
+    const foundItem = mainStore.dockItems.find(defaultItem => defaultItem.page === item.page)
+    item.visible && targetDockItems.push({
+      i18nKey: foundItem?.i18nKey || '',
+      icon: foundItem?.icon || '',
+      iconActivated: foundItem?.iconActivated || '',
+      page: foundItem?.page || AppPage.Home,
+    })
+  })
+  return targetDockItems
+}
+
 onMounted(() => {
  if (settings.value.autoHideDock)
    hideDock.value = true

-  if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length || settings.value.dockItemVisibilityList.length > currentDockItems.value.length) {
-    const newDockItemVisibilityList = ref<{ page: AppPage, visible: boolean }[]>([])
-    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 = settings.value.dockItemVisibilityList.filter(obj1 =>
-      !newDockItemVisibilityList.value.some(obj2 => obj1.page === obj2.page),
-    )
-    const notInDockItemVisibilityList = newDockItemVisibilityList.value.filter(obj1 =>
-      !settings.value.dockItemVisibilityList.some(obj2 => obj1.page === obj2.page),
-    )
-    const allDifferences = [...notInDockItemVisibilityList, ...notInNewDockItemVisibilityList]
-
-    if (settings.value.dockItemVisibilityList.length < currentDockItems.value.length) {
-      settings.value.dockItemVisibilityList.push(...allDifferences)
-    }
-    else {
-      allDifferences.forEach((obj1) => {
-        settings.value.dockItemVisibilityList = settings.value.dockItemVisibilityList.filter(obj2 => obj2.page !== obj1.page)
-      })
-    }
-  }
+  currentDockItems.value = computeDockItem()
 })

 function toggleDark(e: MouseEvent) {
@@ -199,25 +187,23 @@ function toggleDockHide(hide: boolean) {
      @mouseenter="toggleDockHide(false)"
      @mouseleave="toggleDockHide(true)"
    >
-      <template v-for="dockItemVisibility in settings.dockItemVisibilityList" :key="dockItemVisibility.page">
-        <template v-if="dockItemVisibility.visible">
-          <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
-                v-show="activatedPage !== dockItemVisibility.page"
-                :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.icon as string"
-              />
-              <Icon
-                v-show="activatedPage === dockItemVisibility.page"
-                :icon="currentDockItems.find((item) => item.page === dockItemVisibility.page)?.iconActivated as string"
-              />
-            </button>
-          </Tooltip>
-        </template>
+      <template v-for="dockItem in currentDockItems" :key="dockItem.page">
+        <Tooltip :content="$t(dockItem.i18nKey)" :placement="tooltipPlacement">
+          <button
+            class="dock-item"
+            :class="{ active: activatedPage === dockItem.page }"
+            @click="emit('change-page', dockItem.page)"
+          >
+            <Icon
+              v-show="activatedPage !== dockItem.page"
+              :icon="dockItem.icon"
+            />
+            <Icon
+              v-show="activatedPage === dockItem.page"
+              :icon="dockItem.iconActivated"
+            />
+          </button>
+        </Tooltip>
      </template>

      <!-- dividing line -->
--- a/src/components/Dock/types.ts
+++ b/src/components/Dock/types.ts
@@ -1,12 +1,3 @@
-import type { AppPage } from '~/enums/appEnums'
-
-export interface CurrentDockItem {
-  label: string
-  icon: string
-  iconActivated: string
-  page: AppPage
-}
-
 export interface HoveringDockItem {
  themeMode: boolean
  settings: boolean
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -2,16 +2,13 @@
 import type { Ref } from 'vue'
 import QRCodeVue from 'qrcode.vue'
 import { useToast } from 'vue-toastification'
-import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
 import SearchPage from './SearchPage.vue'
-import type { HomeTab } from '~/contentScripts/views/Home/types.ts'
-import { HomeSubPage } from '~/contentScripts/views/Home/types'
 import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
 import { accessKey, settings } from '~/logic'
+import { useMainStore } from '~/stores/mainStore'

-const { t } = useI18n()
-
+const mainStore = useMainStore()
 const toast = useToast()

 const showSearchPageModeSharedSettings = ref<boolean>(false)
@@ -102,35 +99,10 @@ function handleCloseSearchPageModeSharedSettings() {
  preventCloseSettings.value = false
 }

-const homeTabs = computed((): HomeTab[] => {
-  return [
-    {
-      label: t('home.for_you'),
-      value: HomeSubPage.ForYou,
-    },
-    {
-      label: t('home.following'),
-      value: HomeSubPage.Following,
-    },
-    {
-      label: t('home.subscribed_series'),
-      value: HomeSubPage.SubscribedSeries,
-    },
-    {
-      label: t('home.trending'),
-      value: HomeSubPage.Trending,
-    },
-    {
-      label: t('home.ranking'),
-      value: HomeSubPage.Ranking,
-    },
-  ]
-})
-
 function resetHomeTabs() {
-  settings.value.homePageTabVisibilityList = homeTabs.value.map((tab) => {
+  settings.value.homePageTabVisibilityList = mainStore.homeTabs.map((tab) => {
    return {
-      page: tab.value,
+      page: tab.page,
      visible: true,
    }
  })
@@ -254,7 +226,7 @@ function handleToggleHomeTab(tab: any) {
              }"
              @click="handleToggleHomeTab(element)"
            >
-              {{ homeTabs.find(tab => tab.value === element.page)?.label }}
+              {{ $t(mainStore.homeTabs.find(tab => tab.page === element.page)?.i18nKey ?? '') }}
            </div>
          </template>
        </draggable>
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 import { delay } from '~/utils/main'
+import type { HomeTab } from '~/stores/mainStore'
+import { useMainStore } from '~/stores/mainStore'

-const { t } = useI18n()
-
+const mainStore = useMainStore()
 const { handleBackToTop, scrollbarRef } = useBewlyApp()

 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
@@ -23,30 +22,7 @@ const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
 const tabContentLoading = ref<boolean>(false)

-const tabs = ref<HomeTab[]>([])
-
-const defaultTabs = [
-  {
-    label: t('home.for_you'),
-    value: HomeSubPage.ForYou,
-  },
-  {
-    label: t('home.following'),
-    value: HomeSubPage.Following,
-  },
-  {
-    label: t('home.subscribed_series'),
-    value: HomeSubPage.SubscribedSeries,
-  },
-  {
-    label: t('home.trending'),
-    value: HomeSubPage.Trending,
-  },
-  {
-    label: t('home.ranking'),
-    value: HomeSubPage.Ranking,
-  },
-]
+const currentTabs = ref<HomeTab[]>([])

 watch(() => activatedPage.value, () => {
  handleBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
@@ -54,20 +30,20 @@ watch(() => activatedPage.value, () => {

 // use Json stringify to watch the changes of the array item properties
 watch(() => JSON.stringify(settings.value.homePageTabVisibilityList), () => {
-  tabs.value = computeTabs()
+  currentTabs.value = computeTabs()
 })

-function computeTabs() {
+function computeTabs(): HomeTab[] {
  // if homePageTabVisibilityList not fresh , set it to default
-  if (!settings.value.homePageTabVisibilityList.length || settings.value.homePageTabVisibilityList.length !== defaultTabs.length)
-    settings.value.homePageTabVisibilityList = defaultTabs.map(tab => ({ page: tab.value, visible: true }))
+  if (!settings.value.homePageTabVisibilityList.length || settings.value.homePageTabVisibilityList.length !== mainStore.homeTabs.length)
+    settings.value.homePageTabVisibilityList = mainStore.homeTabs.map(tab => ({ page: tab.page, visible: true }))

  const targetTabs: HomeTab[] = []

  for (const tab of settings.value.homePageTabVisibilityList) {
    tab.visible && targetTabs.push({
-      label: (defaultTabs.find(defaultTab => defaultTab.value === tab.page) || {})?.label || tab.page,
-      value: tab.page,
+      i18nKey: (mainStore.homeTabs.find(defaultTab => defaultTab.page === tab.page) || {})?.i18nKey || tab.page,
+      page: tab.page,
    })
  }

@@ -105,8 +81,8 @@ onMounted(() => {
    }
  })

-  tabs.value = computeTabs()
-  activatedPage.value = tabs.value[0].value
+  currentTabs.value = computeTabs()
+  activatedPage.value = currentTabs.value[0].page
 })

 onUnmounted(() => {
@@ -120,11 +96,12 @@ function handleChangeTab(tab: HomeTab) {
  // because `handlePageRefresh` and `handleReachBottom` has been replaced
  // now they are set to refresh the data of the tab you switched to
  if (!tabContentLoading.value)
-    activatedPage.value = tab.value
+    activatedPage.value = tab.page
 }

 function toggleTabContentLoading(loading: boolean) {
  nextTick(async () => {
+    // Delay the closing effect to prevent the transition effect from being too stiff
    if (!loading)
      await delay(500)
    tabContentLoading.value = loading
@@ -200,18 +177,18 @@ function toggleTabContentLoading(loading: boolean) {
      >
        <ul flex="~ items-center gap-3 wrap">
          <li
-            v-for="tab in tabs" :key="tab.value"
+            v-for="tab in currentTabs" :key="tab.page"
            px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" backdrop-glass rounded="$bew-radius"
            cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
            flex="~ gap-2 items-center"
-            :class="{ 'tab-activated': activatedPage === tab.value }"
+            :class="{ 'tab-activated': activatedPage === tab.page }"
            @click="handleChangeTab(tab)"
          >
-            <span class="text-center">{{ tab.label }}</span>
+            <span class="text-center">{{ $t(tab.i18nKey) }}</span>
            <Icon
              :style="{
-                opacity: activatedPage === tab.value && tabContentLoading ? 1 : 0,
-                margin: activatedPage === tab.value && tabContentLoading ? '0' : '-12px',
+                opacity: activatedPage === tab.page && tabContentLoading ? 1 : 0,
+                margin: activatedPage === tab.page && tabContentLoading ? '0' : '-12px',
              }"
              icon="svg-spinners:ring-resize"
              duration-300 ease-in-out mb--2px text-16px
--- a/src/contentScripts/views/Home/types.ts
+++ b/src/contentScripts/views/Home/types.ts
@@ -1,8 +1,3 @@
-export interface HomeTab {
-  label: string
-  value: HomeSubPage
-}
-
 export enum HomeSubPage {
  ForYou = 'ForYou',
  Following = 'Following',
--- a/src/stores/mainStore.ts
+++ b/src/stores/mainStore.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { HomeSubPage } from '~/contentScripts/views/Home/types'
 import { AppPage } from '~/enums/appEnums'

 export interface DockItem {
@@ -8,6 +9,11 @@ export interface DockItem {
  page: AppPage
 }

+export interface HomeTab {
+  i18nKey: string
+  page: HomeSubPage
+}
+
 export const useMainStore = defineStore('main', () => {
  const dockItems = computed((): DockItem[] => {
    return [
@@ -20,5 +26,30 @@ export const useMainStore = defineStore('main', () => {
    ]
  })

-  return { dockItems }
+  const homeTabs = computed((): HomeTab[] => {
+    return [
+      {
+        i18nKey: 'home.for_you',
+        page: HomeSubPage.ForYou,
+      },
+      {
+        i18nKey: 'home.following',
+        page: HomeSubPage.Following,
+      },
+      {
+        i18nKey: 'home.subscribed_series',
+        page: HomeSubPage.SubscribedSeries,
+      },
+      {
+        i18nKey: 'home.trending',
+        page: HomeSubPage.Trending,
+      },
+      {
+        i18nKey: 'home.ranking',
+        page: HomeSubPage.Ranking,
+      },
+    ]
+  })
+
+  return { dockItems, homeTabs }
 })