From 25b2d0394a7ae0a533e61b545dfd63122268d94a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 20 Oct 2024 19:00:24 +0800
Subject: [PATCH] refactor: homePageGridLayout =>  gridLayout

---
 src/contentScripts/views/Home/Home.vue          | 12 ++++++------
 .../views/Home/components/Ranking.vue           |  4 ++--
 src/contentScripts/views/Home/types.ts          |  4 ++--
 src/logic/storage.ts                            | 17 +++++++++++++++--
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 4db25727..3b31c8a9 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -3,7 +3,7 @@ import { useThrottleFn } from '@vueuse/core'
 
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
-import { homePageGridLayout, settings } from '~/logic'
+import { gridLayout, settings } from '~/logic'
 import type { HomeTab } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
 import emitter from '~/utils/mitt'
@@ -226,15 +226,15 @@ function toggleTabContentLoading(loading: boolean) {
           <div
             v-for="icon in gridLayoutIcons" :key="icon.value"
             :style="{
-              backgroundColor: homePageGridLayout === icon.value ? 'var(--bew-theme-color-auto)' : '',
-              color: homePageGridLayout === icon.value ? 'var(--bew-text-auto)' : 'unset',
+              backgroundColor: gridLayout.home === icon.value ? 'var(--bew-theme-color-auto)' : '',
+              color: gridLayout.home === icon.value ? 'var(--bew-text-auto)' : 'unset',
             }"
             flex="~ justify-center items-center"
             w-full
             h-full p="x-2 y-1" rounded="$bew-radius-half" bg="hover:$bew-fill-2" duration-300
-            cursor-pointer @click="homePageGridLayout = icon.value"
+            cursor-pointer @click="gridLayout.home = icon.value"
           >
-            <div :class="homePageGridLayout === icon.value ? icon.iconActivated : icon.icon" text-base />
+            <div :class="gridLayout.home === icon.value ? icon.iconActivated : icon.icon" text-base />
           </div>
         </div>
       </header>
@@ -244,7 +244,7 @@ function toggleTabContentLoading(loading: boolean) {
           <Component
             :is="pages[activatedPage]" :key="activatedPage"
             ref="tabPageRef"
-            :grid-layout="homePageGridLayout"
+            :grid-layout="gridLayout.home"
             @before-loading="toggleTabContentLoading(true)"
             @after-loading="toggleTabContentLoading(false)"
           />
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 5f87cc3f..09b83676 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
-import type { GridLayout } from '~/logic'
+import type { GridLayoutType } from '~/logic'
 import { settings } from '~/logic'
 import type { List as RankingVideoItem, RankingResult } from '~/models/video/ranking'
 import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/rankingPgc'
@@ -13,7 +13,7 @@ import emitter from '~/utils/mitt'
 import type { RankingType } from '../types'
 
 const props = defineProps<{
-  gridLayout: GridLayout
+  gridLayout: GridLayoutType
 }>()
 
 const emit = defineEmits<{
diff --git a/src/contentScripts/views/Home/types.ts b/src/contentScripts/views/Home/types.ts
index 26d5b175..1235ab05 100644
--- a/src/contentScripts/views/Home/types.ts
+++ b/src/contentScripts/views/Home/types.ts
@@ -1,4 +1,4 @@
-import type { GridLayout } from '~/logic'
+import type { GridLayoutType } from '~/logic'
 
 export enum HomeSubPage {
   ForYou = 'ForYou',
@@ -19,5 +19,5 @@ export interface RankingType {
 export interface GridLayoutIcon {
   icon: string
   iconActivated: string
-  value: GridLayout
+  value: GridLayoutType
 }
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index 0646a149..2328af96 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -175,5 +175,18 @@ export const originalSettings: Settings = {
 
 export const settings = useStorageLocal('settings', ref<Settings>(originalSettings), { mergeDefaults: true })
 
-export type GridLayout = 'adaptive' | 'twoColumns' | 'oneColumn'
-export const homePageGridLayout = useStorageLocal('homePageGridLayout', ref<GridLayout>('adaptive'), { mergeDefaults: true })
+export type GridLayoutType = 'adaptive' | 'twoColumns' | 'oneColumn'
+
+export interface GridLayout {
+  home: GridLayoutType
+}
+
+export const gridLayout = useStorageLocal('gridLayout', ref<GridLayout>({
+  home: 'adaptive',
+}), { mergeDefaults: true })
+
+export const sidePanel = useStorageLocal('sidePanel', ref<{
+  home: boolean
+}>({
+  home: true,
+}), { mergeDefaults: true })