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>
+  );
+};