feat: Disable system stack when service mode is turned off

src/components/setting/mods/stack-mode-switch.tsx

@@ -0,0 +1,68 @@
+import { Button, ButtonGroup, Tooltip } from "@mui/material";
+import { checkService } from "@/services/cmds";
+import { useVerge } from "@/hooks/use-verge";
+import getSystem from "@/utils/get-system";
+import useSWR from "swr";
+
+const isWIN = getSystem() === "windows";
+
+interface Props {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export const StackModeSwitch = (props: Props) => {
+  const { value, onChange } = props;
+  const { verge } = useVerge();
+  const { enable_service_mode } = verge ?? {};
+  // service mode
+  const { data: serviceStatus } = useSWR(
+    isWIN ? "checkService" : null,
+    checkService,
+    {
+      revalidateIfStale: false,
+      shouldRetryOnError: false,
+    }
+  );
+
+  return (
+    <Tooltip
+      title={
+        isWIN && (serviceStatus !== "active" || !enable_service_mode)
+          ? "System and Mixed modes must be used in service mode"
+          : ""
+      }
+    >
+      <ButtonGroup size="small" sx={{ my: "4px" }}>
+        <Button
+          variant={value?.toLowerCase() === "system" ? "contained" : "outlined"}
+          onClick={() => onChange?.("system")}
+          disabled={
+            isWIN && (serviceStatus !== "active" || !enable_service_mode)
+          }
+          sx={{ textTransform: "capitalize" }}
+        >
+          System
+        </Button>
+        <Button
+          variant={value?.toLowerCase() === "gvisor" ? "contained" : "outlined"}
+          onClick={() => onChange?.("gvisor")}
+          sx={{ textTransform: "capitalize" }}
+        >
+          gVisor
+        </Button>
+
+        <Button
+          variant={value?.toLowerCase() === "mixed" ? "contained" : "outlined"}
+          onClick={() => onChange?.("mixed")}
+          disabled={
+            isWIN && (serviceStatus !== "active" || !enable_service_mode)
+          }
+          sx={{ textTransform: "capitalize" }}
+        >
+          Mixed
+        </Button>
+      </ButtonGroup>
+    </Tooltip>
+  );
+};

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

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import { useClash } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { StackModeSwitch } from "./stack-mode-switch";
 
 export const TunViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -84,23 +85,15 @@ export const TunViewer = forwardRef<DialogRef>((props, ref) => {
       <List>
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Stack")} />
-          <Select
-            size="small"
-            sx={{ width: 100, "> div": { py: "7.5px" } }}
+          <StackModeSwitch
             value={values.stack}
-            onChange={(e) => {
+            onChange={(value) => {
               setValues((v) => ({
                 ...v,
-                stack: e.target.value as string,
+                stack: value,
               }));
             }}
-          >
-            {["System", "gVisor", "Mixed"].map((i) => (
-              <MenuItem value={i} key={i}>
-                {i}
-              </MenuItem>
-            ))}
-          </Select>
+          />
         </ListItem>
 
         <ListItem sx={{ padding: "5px 2px" }}>