dev...

src/views/Action/Draggable.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { limitNumber } from "../../libs/utils";
 import { isMobile } from "../../libs/mobile";
-import { setFab } from "../../libs";
+import { setFab } from "../../libs/storage";
 
 const getEdgePosition = (
   { x: left, y: top, edge },

src/views/Action/index.js

@@ -8,7 +8,7 @@ import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import Stack from "@mui/material/Stack";
 import { useEffect, useState, useMemo, useCallback } from "react";
-import { StoragesProvider } from "../../hooks/Storage";
+import { SettingProvider } from "../../hooks/Setting";
 import Popup from "../Popup";
 import { debounce } from "../../libs/utils";
 
@@ -81,7 +81,7 @@ export default function Action({ translator, fab }) {
   };
 
   return (
-    <StoragesProvider>
+    <SettingProvider>
       <ThemeProvider>
         <Draggable
           key="pop"
@@ -139,6 +139,6 @@ export default function Action({ translator, fab }) {
           }
         />
       </ThemeProvider>
-    </StoragesProvider>
+    </SettingProvider>
   );
 }

src/views/Content/index.js

@@ -16,7 +16,7 @@ import { useTranslate } from "../../hooks/Translate";
 export default function Content({ q, translator }) {
   const [rule, setRule] = useState(translator.rule);
   const [hover, setHover] = useState(false);
-  const { text, sameLang, loading } = useTranslate(q, rule);
+  const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
   const { textStyle, bgColor } = rule;
 
   const handleMouseEnter = () => {

src/views/Options/Header.js

@@ -4,7 +4,6 @@ import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Box from "@mui/material/Box";
-import { useDarkModeSwitch } from "../../hooks/ColorMode";
 import { useDarkMode } from "../../hooks/ColorMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
@@ -14,8 +13,7 @@ import { useI18n } from "../../hooks/I18n";
 function Header(props) {
   const i18n = useI18n();
   const { onDrawerToggle } = props;
-  const switchColorMode = useDarkModeSwitch();
-  const darkMode = useDarkMode();
+  const { darkMode, toggleDarkMode } = useDarkMode();
 
   return (
     <AppBar
@@ -43,7 +41,7 @@ function Header(props) {
             href={process.env.REACT_APP_HOMEPAGE}
           >{`${i18n("app_name")} v${process.env.REACT_APP_VERSION}`}</Link>
         </Box>
-        <IconButton onClick={switchColorMode} color="inherit">
+        <IconButton onClick={toggleDarkMode} color="inherit">
           {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
         </IconButton>
       </Toolbar>

src/views/Options/Setting.js

@@ -5,7 +5,7 @@ import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
-import { useSetting, useSettingUpdate } from "../../hooks/Setting";
+import { useSetting } from "../../hooks/Setting";
 import { limitNumber, debounce } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
 import { UI_LANGS } from "../../config";
@@ -13,8 +13,7 @@ import { useMemo } from "react";
 
 export default function Settings() {
   const i18n = useI18n();
-  const setting = useSetting();
-  const updateSetting = useSettingUpdate();
+  const { setting, updateSetting } = useSetting();
 
   const handleChange = useMemo(
     () =>

src/views/Options/index.js

@@ -4,10 +4,10 @@ import Rules from "./Rules";
 import Setting from "./Setting";
 import Layout from "./Layout";
 import SyncSetting from "./SyncSetting";
-import { StoragesProvider } from "../../hooks/Storage";
+import { SettingProvider } from "../../hooks/Setting";
 import ThemeProvider from "../../hooks/Theme";
 import { useEffect, useState } from "react";
-import { isGm } from "../../libs/browser";
+import { isGm } from "../../libs/client";
 import { sleep } from "../../libs/utils";
 import CircularProgress from "@mui/material/CircularProgress";
 import { trySyncAll } from "../../libs/sync";
@@ -89,7 +89,7 @@ export default function Options() {
   }
 
   return (
-    <StoragesProvider>
+    <SettingProvider>
       <ThemeProvider>
         <AlertProvider>
           <HashRouter>
@@ -104,6 +104,6 @@ export default function Options() {
           </HashRouter>
         </AlertProvider>
       </ThemeProvider>
-    </StoragesProvider>
+    </SettingProvider>
   );
 }

src/views/Popup/index.js

@@ -6,7 +6,8 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Button from "@mui/material/Button";
 import { sendTabMsg } from "../../libs/msg";
-import { browser, isExt } from "../../libs/browser";
+import { browser } from "../../libs/browser";
+import { isExt } from "../../libs/client";
 import { useI18n } from "../../hooks/I18n";
 import TextField from "@mui/material/TextField";
 import {