feat: add the option to disable side panel (#655)

Author: sheepzh

src/api/chrome/sidePanel.ts

@@ -0,0 +1,33 @@
+import { IS_ANDROID, IS_MV3 } from '@util/constant/environment'
+import { handleError } from './common'
+
+// NOT SUPPORTED in Firefox
+// Keep noticing at chrome.sidebarAction for Firefox
+export const SIDE_PANEL_STATE_SUPPORTED_CONTROL = !!chrome.sidePanel?.setOptions
+
+export async function isSidePanelEnabled(): Promise<boolean> {
+    if (IS_ANDROID || !SIDE_PANEL_STATE_SUPPORTED_CONTROL) return false
+
+    if (IS_MV3) {
+        const result = await chrome.sidePanel.getOptions({})
+        return result.enabled ?? true
+    } else {
+        return new Promise(resolve => chrome.sidePanel.getOptions({}, options => {
+            handleError('isSidePanelEnabled')
+            resolve(options.enabled ?? true)
+        }))
+    }
+}
+
+export async function setSidePanelEnabled(enabled: boolean): Promise<void> {
+    if (IS_ANDROID || !SIDE_PANEL_STATE_SUPPORTED_CONTROL) return
+
+    if (IS_MV3) {
+        await chrome.sidePanel.setOptions({ enabled })
+    } else {
+        return new Promise(resolve => chrome.sidePanel.setOptions({ enabled }, () => {
+            handleError('setSidePanelEnabled')
+            resolve()
+        }))
+    }
+}

src/i18n/message/app/option-resource.json

@@ -30,7 +30,8 @@
                     "timed": "定时开启"
                 }
             },
-            "animationDuration": "图表初始动画的时长 {input}"
+            "animationDuration": "图表初始动画的时长 {input}",
+            "sidePanel": "{input} 是否启用侧边栏视图"
         },
         "tracking": {
             "title": "统计",
@@ -285,7 +286,8 @@
                     "timed": "Timed on"
                 }
             },
-            "animationDuration": "The duration of the chart's initial animation {input}"
+            "animationDuration": "The duration of the chart's initial animation {input}",
+            "sidePanel": "{input} Whether to enable the side panel"
         },
         "tracking": {
             "title": "Tracking",

src/i18n/message/app/option.ts

@@ -36,6 +36,7 @@ export type OptionMessage = {
             options: Omit<Record<timer.option.DarkMode, string>, 'default'>
         }
         animationDuration: string
+        sidePanel: string
     }
     tracking: {
         title: string

src/pages/app/components/Option/components/AppearanceOption/index.tsx

@@ -5,7 +5,9 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { isSidePanelEnabled, setSidePanelEnabled, SIDE_PANEL_STATE_SUPPORTED_CONTROL } from '@api/chrome/sidePanel'
 import { type I18nKey, t, tWith } from "@app/locale"
+import { useRequest } from '@hooks/useRequest'
 import { ALL_LOCALES, localeSameAsBrowser } from "@i18n"
 import localeMessages from "@i18n/message/common/locale"
 import optionService from "@service/option-service"
@@ -39,16 +41,27 @@ function copy(target: timer.option.AppearanceOption, source: timer.option.Appear
 }
 
 const DEFAULT_ANIMA_DURATION = defaultAppearance().chartAnimationDuration
+const DEFAULT_SIDE_PANEL_ENABLED = true
 const FOLLOW_BROWSER: I18nKey = msg => msg.option.followBrowser
 
 const _default = defineComponent((_props, ctx) => {
     const { option } = useOption<timer.option.AppearanceOption>({
         defaultValue: defaultAppearance, copy,
         onChange: async val => optionService.isDarkMode(val).then(toggle)
     })
+    const { data: sidePanelEnabled, refresh: refreshSidePanel } = useRequest(isSidePanelEnabled, {
+        defaultValue: DEFAULT_SIDE_PANEL_ENABLED,
+    })
+    const handleSidePanelChange = async (val: boolean) => {
+        await setSidePanelEnabled(val)
+        refreshSidePanel()
+    }
 
     ctx.expose({
-        reset: () => copy(option, defaultAppearance())
+        reset() {
+            handleSidePanelChange(DEFAULT_SIDE_PANEL_ENABLED)
+            copy(option, defaultAppearance())
+        }
     } satisfies OptionInstance)
 
     const handleLocaleChange = (newVal: timer.option.LocaleOption) => {
@@ -152,6 +165,17 @@ const _default = defineComponent((_props, ctx) => {
                     />
                 </OptionItem>
             </>}
+            {SIDE_PANEL_STATE_SUPPORTED_CONTROL && (
+                <OptionItem
+                    label={msg => msg.option.appearance.sidePanel}
+                    defaultValue={DEFAULT_SIDE_PANEL_ENABLED}
+                >
+                    <ElSwitch
+                        modelValue={sidePanelEnabled.value}
+                        onChange={v => handleSidePanelChange(!!v)}
+                    />
+                </OptionItem>
+            )}
             <OptionItem
                 label={msg => msg.option.appearance.animationDuration}
                 defaultValue={`${DEFAULT_ANIMA_DURATION}ms`}