refactor(panel): add mta box hiding

src/_locales/en/options.ts

@@ -219,7 +219,8 @@ export const locale: typeof _locale = {
         always: 'Keep Unfolding',
         never: 'Never Unfold',
         once: 'Unfold Once',
-        popup: 'Only On Browser Action'
+        popup: 'Only On Browser Action',
+        hide: 'Hide'
       },
       dict_selected: 'Selected Dicts'
     }

src/_locales/zh-CN/options.ts

@@ -208,7 +208,8 @@ export const locale = {
         always: '保持展开',
         never: '从不展开',
         once: '展开一次',
-        popup: '只在右上弹框展开'
+        popup: '只在右上弹框展开',
+        hide: '隐藏'
       },
       dict_selected: '已选词典'
     }

src/_locales/zh-TW/options.ts

@@ -212,7 +212,8 @@ export const locale: typeof _locale = {
         always: '保持展開',
         never: '永遠不展開',
         once: '展開一次',
-        popup: '只在右上彈框展開'
+        popup: '只在右上彈框展開',
+        hide: '隱藏'
       },
       dict_selected: '已選字典'
     }

src/app-config/profiles.ts

@@ -2,7 +2,7 @@ import { DeepReadonly } from '@/typings/helpers'
 import { genUniqueKey } from '@/_helpers/uniqueKey'
 import { getAllDicts } from './dicts'
 
-export type MtaAutoUnfold = '' | 'once' | 'always' | 'popup'
+export type MtaAutoUnfold = '' | 'once' | 'always' | 'popup' | 'hide'
 
 export type ProfileMutable = ReturnType<typeof _getDefaultProfile>
 export type Profile = DeepReadonly<ProfileMutable>

src/content/components/DictPanel/DictPanel.container.tsx

@@ -13,7 +13,6 @@ import { DictListContainer } from '../DictList/DictList.container'
 import { WaveformBoxContainer } from '../WaveformBox/WaveformBox.container'
 
 const menuBar = <MenuBarContainer />
-const mtaBox = <MtaBoxContainer />
 const dictList = <DictListContainer />
 const waveformBox = <WaveformBoxContainer />
 
@@ -35,7 +34,7 @@ const mapStateToProps: MapStateToProps<
   panelCSS: state.config.panelCSS,
   darkMode: state.config.darkMode,
   menuBar,
-  mtaBox,
+  mtaBox: state.isShowMtaBox ? <MtaBoxContainer /> : null,
   dictList,
   waveformBox: state.activeProfile.waveform ? waveformBox : null,
   dragStartCoord: state.dragStartCoord

src/content/components/DictPanel/DictPanelStandalone.container.tsx

@@ -11,7 +11,6 @@ import { DictListContainer } from '../DictList/DictList.container'
 import { WaveformBoxContainer } from '../WaveformBox/WaveformBox.container'
 
 const menuBar = <MenuBarContainer />
-const mtaBox = <MtaBoxContainer />
 const dictList = <DictListContainer />
 const waveformBox = <WaveformBoxContainer />
 
@@ -27,7 +26,7 @@ const mapStateToProps = (
     panelCSS: state.config.panelCSS,
     fontSize: state.config.fontSize,
     menuBar,
-    mtaBox,
+    mtaBox: state.isShowMtaBox ? <MtaBoxContainer /> : null,
     dictList,
     waveformBox,
     width: ownProps.width,

src/content/components/MtaBox/MtaBox.container.tsx

@@ -23,6 +23,7 @@ const mapStateToProps: MapStateToProps<
   text: state.text,
   shouldFocus:
     !state.activeProfile.mtaAutoUnfold ||
+    state.activeProfile.mtaAutoUnfold !== 'hide' ||
     ((state.isQSPanel || isQuickSearchPage()) && state.config.qsFocus) ||
     isPopupPage()
 })

src/content/redux/modules/action-handlers/index.ts

@@ -34,17 +34,22 @@ export const actionHandlers: ActionHandlers<State, ActionCatalog> = {
     profiles: payload
   }),
 
-  NEW_ACTIVE_PROFILE: (state, { payload }) => ({
-    ...state,
-    activeProfile: payload,
-    isExpandMtaBox:
-      payload.mtaAutoUnfold === 'once' ||
-      payload.mtaAutoUnfold === 'always' ||
-      (payload.mtaAutoUnfold === 'popup' && isPopupPage()),
-    renderedDicts: state.renderedDicts.filter(({ id }) =>
-      payload.dicts.selected.includes(id)
-    )
-  }),
+  NEW_ACTIVE_PROFILE: (state, { payload }) => {
+    const isShowMtaBox = payload.mtaAutoUnfold !== 'hide'
+    return {
+      ...state,
+      activeProfile: payload,
+      isShowMtaBox,
+      isExpandMtaBox:
+        isShowMtaBox &&
+        (payload.mtaAutoUnfold === 'once' ||
+          payload.mtaAutoUnfold === 'always' ||
+          (payload.mtaAutoUnfold === 'popup' && isPopupPage())),
+      renderedDicts: state.renderedDicts.filter(({ id }) =>
+        payload.dicts.selected.includes(id)
+      )
+    }
+  },
 
   NEW_SELECTION: newSelection,
 

src/content/redux/modules/state.ts

@@ -22,6 +22,8 @@ export const initState = async () => {
 
   const url = window.location.href
 
+  const isShowMtaBox = activeProfile.mtaAutoUnfold !== 'hide'
+
   return {
     config,
     profiles,
@@ -59,10 +61,12 @@ export const initState = async () => {
     },
     isShowBowl: false,
     isShowDictPanel: isStandalonePage(),
+    isShowMtaBox,
     isExpandMtaBox:
-      activeProfile.mtaAutoUnfold === 'once' ||
-      activeProfile.mtaAutoUnfold === 'always' ||
-      (activeProfile.mtaAutoUnfold === 'popup' && isPopupPage()),
+      isShowMtaBox &&
+      (activeProfile.mtaAutoUnfold === 'once' ||
+        activeProfile.mtaAutoUnfold === 'always' ||
+        (activeProfile.mtaAutoUnfold === 'popup' && isPopupPage())),
     isExpandWaveformBox: false,
     isPinned: false,
     /** Is current word in Notebook */

src/options/components/Entries/DictPanel.tsx

@@ -30,6 +30,9 @@ export const DictPanel: FC = () => {
               <Select.Option value="popup">
                 {t('profile.opt.mtaAutoUnfold.popup')}
               </Select.Option>
+              <Select.Option value="hide">
+                {t('profile.opt.mtaAutoUnfold.hide')}
+              </Select.Option>
             </Select>
           )
         },