feat(nyanpasu): add SettingClashCore component

frontend/interface/ipc/useNyanpasu.ts

@@ -1,5 +1,13 @@
 import useSWR from "swr";
-import { getNyanpasuConfig, patchNyanpasuConfig, VergeConfig } from "@/service";
+import {
+  getNyanpasuConfig,
+  patchNyanpasuConfig,
+  VergeConfig,
+  getCoreVersion,
+  setClashCore as setClashCoreWithTauri,
+  restartSidecar,
+} from "@/service";
+import { fetchCoreVersion, fetchLatestCore } from "@/service/core";
 
 /**
  * useNyanpasu with swr.
@@ -30,10 +38,30 @@ export const useNyanpasu = (options?: {
     }
   };
 
+  const getClashCore = useSWR("getClashCore", fetchCoreVersion);
+
+  const setClashCore = async (
+    clashCore: Required<VergeConfig>["clash_core"],
+  ) => {
+    await setClashCoreWithTauri(clashCore);
+
+    // timeout for restart clash core.
+    setTimeout(() => {
+      mutate();
+    }, 100);
+  };
+
+  const getLatestCore = useSWR("getLatestCore", fetchLatestCore);
+
   return {
     nyanpasuConfig: data,
     isLoading: !data && !error,
     isError: error,
     setNyanpasuConfig,
+    getCoreVersion,
+    getClashCore,
+    setClashCore,
+    restartSidecar,
+    getLatestCore,
   };
 };

frontend/interface/service/core.ts

@@ -0,0 +1,75 @@
+import { fetchLatestCoreVersions, getCoreVersion } from "./tauri";
+import { VergeConfig } from "./types";
+
+export type ClashCore = Required<VergeConfig>["clash_core"];
+
+export interface Core {
+  name: string;
+  core: ClashCore;
+  version?: string;
+  latest?: string;
+}
+
+export const VALID_CORE: Core[] = [
+  { name: "Clash Premium", core: "clash" },
+  { name: "Mihomo", core: "mihomo" },
+  { name: "Mihomo Alpha", core: "mihomo-alpha" },
+  { name: "Clash Rust", core: "clash-rs" },
+];
+
+export const fetchCoreVersion = async () => {
+  return await Promise.all(
+    VALID_CORE.map(async (item) => {
+      const version = await getCoreVersion(item.core);
+      return { ...item, version };
+    }),
+  );
+};
+
+export const fetchLatestCore = async () => {
+  const results = await fetchLatestCoreVersions();
+
+  const cores = VALID_CORE.map((item) => {
+    if (item.core == "clash") {
+      return {
+        ...item,
+        latest: `n${results["clash_premium"]}`,
+      };
+    } else {
+      return {
+        ...item,
+        latest: results[item.core.replace(/-/g, "_") as keyof typeof results],
+      };
+    }
+  });
+
+  return cores;
+};
+
+export enum SupportedArch {
+  // blocked by clash-rs
+  // WindowsX86 = "windows-x86",
+  WindowsX86_64 = "windows-x86_64",
+  // blocked by clash-rs#212
+  // WindowsArm64 = "windows-arm64",
+  LinuxAarch64 = "linux-aarch64",
+  LinuxAmd64 = "linux-amd64",
+  DarwinArm64 = "darwin-arm64",
+  DarwinX64 = "darwin-x64",
+}
+
+export enum SupportedCore {
+  Mihomo = "mihomo",
+  MihomoAlpha = "mihomo_alpha",
+  ClashRs = "clash_rs",
+  ClashPremium = "clash_premium",
+}
+
+export type ArchMapping = { [key in SupportedArch]: string };
+
+export interface ManifestVersion {
+  manifest_version: number;
+  latest: { [K in SupportedCore]: string };
+  arch_template: { [K in SupportedCore]: ArchMapping };
+  updated_at: string; // ISO 8601
+}

frontend/interface/service/index.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./tauri";
 export * from "./clash";
+export * from "./core";

frontend/interface/service/tauri.ts

@@ -1,5 +1,6 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { ClashConfig, ClashInfo, VergeConfig, Profile } from "./types";
+import { ManifestVersion } from "./core";
 
 export const getNyanpasuConfig = async () => {
   return await invoke<VergeConfig>("get_verge_config");
@@ -35,3 +36,23 @@ export const setProfiles = async (payload: {
 export const setProfilesConfig = async (profiles: Profile.Config) => {
   return await invoke<void>("patch_profiles_config", { profiles });
 };
+
+export const getCoreVersion = async (
+  coreType: Required<VergeConfig>["clash_core"],
+) => {
+  return await invoke<string>("get_core_version", { coreType });
+};
+
+export const setClashCore = async (
+  clashCore: Required<VergeConfig>["clash_core"],
+) => {
+  return await invoke<void>("change_clash_core", { clashCore });
+};
+
+export const restartSidecar = async () => {
+  return await invoke<void>("restart_sidecar");
+};
+
+export const fetchLatestCoreVersions = async () => {
+  return await invoke<ManifestVersion["latest"]>("fetch_latest_core_versions");
+};

frontend/nyanpasu/src/components/setting/modules/clash-core.tsx

@@ -0,0 +1,100 @@
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import { Item } from "./clash-web";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { alpha, useTheme } from "@mui/material/styles";
+import { ClashCore, Core } from "@nyanpasu/interface";
+import Clash from "@/assets/image/core/clash.png";
+import ClashMeta from "@/assets/image/core/clash.meta.png";
+import ClashRs from "@/assets/image/core/clash-rs.png";
+import { FiberManualRecord } from "@mui/icons-material";
+
+export const getImage = (core: ClashCore) => {
+  switch (core) {
+    case "mihomo":
+    case "mihomo-alpha": {
+      return ClashMeta;
+    }
+
+    case "clash-rs": {
+      return ClashRs;
+    }
+
+    default: {
+      return Clash;
+    }
+  }
+};
+
+export interface ClashCoreItemProps {
+  selected: boolean;
+  data: Core;
+  onClick: (core: ClashCore) => void;
+}
+
+/**
+ * @example
+ * <ClashCoreItem
+    data={core}
+    selected={selected}
+    onClick={() => changeClashCore(item.core)}
+  />
+ *
+ * `Design for Clash Core used.`
+ *
+ * @author keiko233 <[email protected]>
+ * @copyright LibNyanpasu org. 2024
+ */
+export const ClashCoreItem = ({
+  selected,
+  data,
+  onClick,
+}: ClashCoreItemProps) => {
+  const { palette } = useTheme();
+
+  const newVersion = data.latest ? data.latest !== data.version : false;
+
+  return (
+    <ListItem sx={{ pl: 0, pr: 0 }}>
+      <ListItemButton
+        sx={{
+          padding: 0,
+          borderRadius: "16px",
+
+          "&.Mui-selected": {
+            backgroundColor: alpha(palette.success.main, 0.2),
+          },
+        }}
+        selected={selected}
+        onClick={() => onClick(data.core)}
+      >
+        <Item elevation={0} sx={{ width: "100%" }}>
+          <Box display="flex" alignItems="center" gap={2}>
+            <img style={{ width: "64px" }} src={getImage(data.core)} />
+
+            <Box>
+              <Typography variant="subtitle1" fontWeight={700}>
+                {data.name}
+
+                {newVersion && (
+                  <FiberManualRecord
+                    sx={{ height: 10, fill: palette.success.main }}
+                  />
+                )}
+              </Typography>
+
+              <Typography>{data.version}</Typography>
+
+              {newVersion && (
+                <Typography variant="body2">
+                  New Version: {data.latest}
+                </Typography>
+              )}
+            </Box>
+          </Box>
+        </Item>
+      </ListItemButton>
+    </ListItem>
+  );
+};