fix: adjust service mode ui

src/components/setting/mods/service-viewer.tsx

@@ -24,7 +24,11 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
   const { data: status, mutate: mutateCheck } = useSWR(
     "checkService",
     checkService,
-    { revalidateIfStale: false, shouldRetryOnError: false }
+    {
+      revalidateIfStale: false,
+      shouldRetryOnError: false,
+      focusThrottleInterval: 36e5, // 1 hour
+    }
   );
 
   useImperativeHandle(ref, () => ({
@@ -64,9 +68,14 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
 
   // fix unhandled error of the service mode
   const onDisable = useLockFn(async () => {
-    await patchVergeConfig({ enable_service_mode: false });
-    mutateCheck();
-    setOpen(false);
+    try {
+      await patchVergeConfig({ enable_service_mode: false });
+      mutateCheck();
+      setOpen(false);
+    } catch (err: any) {
+      mutateCheck();
+      Notice.error(err.message || err.toString());
+    }
   });
 
   return (
@@ -81,8 +90,8 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
 
       {(state === "unknown" || state === "uninstall") && (
         <Typography>
-          Information: Please make sure the Clash Verge Service is installed and
-          enabled
+          Information: Please make sure that the Clash Verge Service is
+          installed and enabled
         </Typography>
       )}
 

src/components/setting/setting-system.tsx

@@ -27,7 +27,11 @@ const SettingSystem = ({ onError }: Props) => {
   const { data: serviceStatus } = useSWR(
     isWIN ? "checkService" : null,
     checkService,
-    { revalidateIfStale: false, shouldRetryOnError: false }
+    {
+      revalidateIfStale: false,
+      shouldRetryOnError: false,
+      focusThrottleInterval: 36e5, // 1 hour
+    }
   );
 
   const serviceRef = useRef<DialogRef>(null);
@@ -70,47 +74,49 @@ const SettingSystem = ({ onError }: Props) => {
         <SettingItem
           label={t("Service Mode")}
           extra={
-            (serviceStatus === "active" || serviceStatus === "installed") && (
-              <PrivacyTipRounded
-                fontSize="small"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-                onClick={() => serviceRef.current?.open()}
-              />
-            )
-          }
-        >
-          {serviceStatus === "active" || serviceStatus === "installed" ? (
-            <GuardState
-              value={enable_service_mode ?? false}
-              valueProps="checked"
-              onCatch={onError}
-              onFormat={onSwitchFormat}
-              onChange={(e) => onChangeData({ enable_service_mode: e })}
-              onGuard={(e) => patchVerge({ enable_service_mode: e })}
-            >
-              <Switch edge="end" />
-            </GuardState>
-          ) : (
             <IconButton
               color="inherit"
               size="small"
-              sx={{ my: "2px" }}
               onClick={() => serviceRef.current?.open()}
             >
-              <ArrowForward />
+              <PrivacyTipRounded
+                fontSize="inherit"
+                style={{ cursor: "pointer", opacity: 0.75 }}
+              />
             </IconButton>
-          )}
+          }
+        >
+          <GuardState
+            value={enable_service_mode ?? false}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => onChangeData({ enable_service_mode: e })}
+            onGuard={(e) => patchVerge({ enable_service_mode: e })}
+          >
+            <Switch
+              edge="end"
+              disabled={
+                serviceStatus !== "active" && serviceStatus !== "installed"
+              }
+            />
+          </GuardState>
         </SettingItem>
       )}
 
       <SettingItem
         label={t("System Proxy")}
         extra={
-          <Settings
-            fontSize="small"
-            style={{ cursor: "pointer", opacity: 0.75 }}
+          <IconButton
+            color="inherit"
+            size="small"
             onClick={() => sysproxyRef.current?.open()}
-          />
+          >
+            <Settings
+              fontSize="inherit"
+              style={{ cursor: "pointer", opacity: 0.75 }}
+            />
+          </IconButton>
         }
       >
         <GuardState