v0.0.21

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: CI
+name: Release CI
 
 on: [push]
 
@@ -53,7 +53,7 @@ jobs:
           yarn run check
 
       - name: Tauri build
-        uses: tauri-apps/tauri-action@v0
+        uses: tauri-apps/tauri-action@b9ce5d7dc68082d21d30a60103b0ab8c5ddae3a1
         # enable cache even though failed
         continue-on-error: true
         env:
@@ -63,7 +63,7 @@ jobs:
         with:
           tagName: v__VERSION__
           releaseName: "Clash Verge v__VERSION__"
-          releaseBody: "Clash Verge now supports Windows and macos(intel)."
+          releaseBody: "More new features are now supported."
           releaseDraft: false
           prerelease: true
 
@@ -95,6 +95,5 @@ jobs:
 
       - name: Release update.json
         run: yarn run release
-        continue-on-error: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -11,19 +11,17 @@ A <a href="https://github.com/Dreamacro/clash">Clash</a> GUI based on <a href="h
 
 ## Features
 
-Now it's no different from the others, even fewer. (WIP)
+Now it's no different from the others, maybe fewer. (WIP)
 
 ## Development
 
-You should install Rust and Nodejs. Then install tauri cli and packages.
+You should install Rust and Nodejs, see [here](https://tauri.studio/docs/getting-started/prerequisites) for more details. Then install Nodejs packages.
 
 ```shell
-cargo install tauri-cli --git https://github.com/tauri-apps/tauri
-
 yarn install
 ```
 
-Then download the clash binary... Or you can download it from [clash premium release](https://github.com/Dreamacro/clash/releases/tag/premium) and rename it according to [tauri config](https://tauri.studio/en/docs/api/config#tauri.bundle.externalBin).
+Then download the clash binary... Or you can download it from [clash premium release](https://github.com/Dreamacro/clash/releases/tag/premium) and rename it according to [tauri config](https://tauri.studio/docs/api/config/#tauri.bundle.externalBin).
 
 ```shell
 yarn run check
@@ -56,7 +54,7 @@ This is a learning project for Rust practice.
 
 ## Contributions
 
-PR welcome!
+Issue and PR welcome!
 
 ## Acknowledgement
 

package.json

@@ -1,10 +1,10 @@
 {
   "name": "clash-verge",
-  "version": "0.0.16",
+  "version": "0.0.21",
   "license": "GPL-3.0",
   "scripts": {
-    "dev": "cargo tauri dev",
-    "build": "cargo tauri build",
+    "dev": "tauri dev",
+    "build": "tauri build",
     "tauri": "tauri",
     "web:dev": "vite",
     "web:build": "tsc && vite build",
@@ -15,17 +15,17 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.7.0",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.4.1",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@tauri-apps/api": "^1.0.0-rc.1",
-    "ahooks": "^3.1.9",
+    "ahooks": "^3.1.13",
     "axios": "^0.26.0",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.10.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.2.2",
     "react-virtuoso": "^2.7.0",
     "recoil": "^0.6.1",
     "swr": "^1.2.1"
@@ -45,7 +45,7 @@
     "pretty-quick": "^3.1.3",
     "sass": "^1.49.7",
     "typescript": "^4.5.5",
-    "vite": "^2.8.0"
+    "vite": "^2.8.6"
   },
   "prettier": {
     "tabWidth": 2,

scripts/release.mjs

@@ -1,7 +1,8 @@
-import { createRequire } from "module";
+import fetch from "node-fetch";
 import { getOctokit, context } from "@actions/github";
 
-const require = createRequire(import.meta.url);
+const UPDATE_TAG_NAME = "updater";
+const UPDATE_JSON_FILE = "update.json";
 
 /// generate update.json
 /// upload to update tag's release asset
@@ -10,46 +11,85 @@ async function resolveRelease() {
     throw new Error("GITHUB_TOKEN is required");
   }
 
-  const packageJson = require("../package.json");
+  const options = { owner: context.repo.owner, repo: context.repo.repo };
+  const github = getOctokit(process.env.GITHUB_TOKEN);
+
+  const { data: tags } = await github.rest.repos.listTags({
+    ...options,
+    per_page: 10,
+    page: 1,
+  });
+
+  // get the latest publish tag
+  const tag = tags.find((t) => t.name.startsWith("v"));
+
+  console.log(tag);
+  console.log();
+
+  const { data: latestRelease } = await github.rest.repos.getReleaseByTag({
+    ...options,
+    tag: tag.name,
+  });
 
-  const { version } = packageJson;
-  const urlPrefix = "https://github.com/zzzgydi/clash-verge/releases/download";
   const updateData = {
-    name: `v${version}`,
-    notes: `Version ${version} is available now!!!`,
+    name: tag.name,
+    notes: latestRelease.body, // use the release body directly
     pub_date: new Date().toISOString(),
     platforms: {
-      win64: {
-        signature: "",
-        url: `${urlPrefix}/v${version}/clash-verge_${version}_x64.msi.zip`,
-      },
-      darwin: {
-        signature: "",
-        url: `${urlPrefix}/v${version}/clash-verge.app.tar.gz`,
-      },
+      win64: { signature: "", url: "" },
+      darwin: { signature: "", url: "" },
     },
   };
 
-  console.log(`Generating Version "${version}" update.json`);
+  const promises = latestRelease.assets.map(async (asset) => {
+    const { name, browser_download_url } = asset;
 
-  const github = getOctokit(process.env.GITHUB_TOKEN);
-
-  const { data: release } = await github.rest.repos.getReleaseByTag({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    tag: "updater",
-  });
-  const { data: assets } = await github.rest.repos.listReleaseAssets({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    release_id: release.id,
+    // win64 url
+    if (/\.msi\.zip$/.test(name)) {
+      updateData.platforms.win64.url = browser_download_url;
+    }
+    // darwin url
+    if (/\.app\.tar\.gz$/.test(name)) {
+      updateData.platforms.darwin.url = browser_download_url;
+    }
+    // win64 signature
+    if (/\.msi\.zip\.sig$/.test(name)) {
+      updateData.platforms.win64.signature = await getSignature(
+        browser_download_url
+      );
+    }
+    // darwin signature
+    if (/\.app\.tar\.gz\.sig$/.test(name)) {
+      updateData.platforms.darwin.signature = await getSignature(
+        browser_download_url
+      );
+    }
   });
 
-  for (let asset of assets) {
-    if (asset.name === "update.json") {
+  await Promise.allSettled(promises);
+  console.log(updateData);
+
+  // maybe should test the signature as well
+  const { darwin, win64 } = updateData.platforms;
+  if (!darwin.url) {
+    console.log(`[Error]: failed to parse release for darwin`);
+    delete updateData.platforms.darwin;
+  }
+  if (!win64.url) {
+    console.log(`[Error]: failed to parse release for win64`);
+    delete updateData.platforms.win64;
+  }
+
+  // update the update.json
+  const { data: updateRelease } = await github.rest.repos.getReleaseByTag({
+    ...options,
+    tag: UPDATE_TAG_NAME,
+  });
+
+  for (let asset of updateRelease.assets) {
+    if (asset.name === UPDATE_JSON_FILE) {
       await github.rest.repos.deleteReleaseAsset({
-        owner: context.repo.owner,
-        repo: context.repo.repo,
+        ...options,
         asset_id: asset.id,
       });
       break;
@@ -57,12 +97,21 @@ async function resolveRelease() {
   }
 
   await github.rest.repos.uploadReleaseAsset({
-    owner: context.repo.owner,
-    repo: context.repo.repo,
-    release_id: release.id,
-    name: "update.json",
+    ...options,
+    release_id: updateRelease.id,
+    name: UPDATE_JSON_FILE,
     data: JSON.stringify(updateData, null, 2),
   });
 }
 
-resolveRelease();
+// get the signature file content
+async function getSignature(url) {
+  const response = await fetch(url, {
+    method: "GET",
+    headers: { "Content-Type": "application/octet-stream" },
+  });
+
+  return response.text();
+}
+
+resolveRelease().catch(console.error);

src-tauri/Cargo.toml

@@ -13,14 +13,17 @@ build = "build.rs"
 tauri-build = { version = "1.0.0-rc.3", features = [] }
 
 [dependencies]
+anyhow = "1.0"
 dirs = "4.0.0"
+dunce = "1.0.2"
+nanoid = "0.4.0"
 chrono = "0.4.19"
 serde_json = "1.0"
 serde_yaml = "0.8"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "1.0.0-rc.3", features = ["shell-all", "system-tray", "updater", "window-all"] }
-tauri-plugin-shadows = { git = "https://github.com/tauri-apps/tauri-plugin-shadows", features = ["tauri-impl"] }
-tauri-plugin-vibrancy = { git = "https://github.com/tauri-apps/tauri-plugin-vibrancy", features = ["tauri-impl"] }
+window-shadows = { git = "https://github.com/tauri-apps/window-shadows" }
+window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy" }
 
 reqwest = { version = "0.11", features = ["json"] }
 tokio = { version = "1", features = ["full"] }

src-tauri/src/cmds.rs

@@ -1,29 +1,26 @@
 use crate::{
-  core::{ClashInfo, ProfileItem, Profiles, VergeConfig},
+  core::{ClashInfo, PrfItem, Profiles, VergeConfig},
   states::{ClashState, ProfilesState, VergeState},
-  utils::{dirs::app_home_dir, fetch::fetch_profile, sysopt::SysProxyConfig},
+  utils::{dirs, sysopt::SysProxyConfig},
 };
+use crate::{ret_err, wrap_err};
+use anyhow::Result;
 use serde_yaml::Mapping;
-use std::process::Command;
-use tauri::{api, State};
+use std::{path::PathBuf, process::Command};
+use tauri::{api, Manager, State};
 
 /// get all profiles from `profiles.yaml`
-/// do not acquire the lock of ProfileLock
 #[tauri::command]
-pub fn get_profiles(profiles_state: State<'_, ProfilesState>) -> Result<Profiles, String> {
-  match profiles_state.0.lock() {
-    Ok(profiles) => Ok(profiles.clone()),
-    Err(_) => Err("failed to get profiles lock".into()),
-  }
+pub fn get_profiles<'a>(profiles_state: State<'_, ProfilesState>) -> Result<Profiles, String> {
+  let profiles = profiles_state.0.lock().unwrap();
+  Ok(profiles.clone())
 }
 
 /// synchronize data irregularly
 #[tauri::command]
 pub fn sync_profiles(profiles_state: State<'_, ProfilesState>) -> Result<(), String> {
-  match profiles_state.0.lock() {
-    Ok(mut profiles) => profiles.sync_file(),
-    Err(_) => Err("failed to get profiles lock".into()),
-  }
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.sync_file())
 }
 
 /// import the profile from url
@@ -34,151 +31,174 @@ pub async fn import_profile(
   with_proxy: bool,
   profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
-  let result = fetch_profile(&url, with_proxy).await?;
+  let item = wrap_err!(PrfItem::from_url(&url, None, None, with_proxy).await)?;
+
   let mut profiles = profiles_state.0.lock().unwrap();
-  profiles.import_from_url(url, result)
+  wrap_err!(profiles.append_item(item))
 }
 
 /// new a profile
 /// append a temp profile item file to the `profiles` dir
 /// view the temp profile file by using vscode or other editor
 #[tauri::command]
-pub async fn new_profile(
-  name: String,
-  desc: String,
+pub async fn create_profile(
+  item: PrfItem, // partial
   profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
+  let item = wrap_err!(PrfItem::from(item).await)?;
   let mut profiles = profiles_state.0.lock().unwrap();
-  profiles.append_item(name, desc)?;
-  Ok(())
+
+  wrap_err!(profiles.append_item(item))
 }
 
 /// Update the profile
 #[tauri::command]
 pub async fn update_profile(
-  index: usize,
+  index: String,
   with_proxy: bool,
   clash_state: State<'_, ClashState>,
   profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
-  // maybe we can get the url from the web app directly
-  let url = match profiles_state.0.lock() {
-    Ok(mut profile) => {
-      let items = profile.items.take().unwrap_or(vec![]);
-      if index >= items.len() {
-        return Err("the index out of bound".into());
-      }
-      let url = match &items[index].url {
-        Some(u) => u.clone(),
-        None => return Err("failed to update profile for `invalid url`".into()),
-      };
-      profile.items = Some(items);
-      url
+  let url = {
+    // must release the lock here
+    let profiles = profiles_state.0.lock().unwrap();
+    let item = wrap_err!(profiles.get_item(&index))?;
+
+    if item.url.is_none() {
+      ret_err!("failed to get the item url");
     }
-    Err(_) => return Err("failed to get profiles lock".into()),
+
+    item.url.clone().unwrap()
   };
 
-  let result = fetch_profile(&url, with_proxy).await?;
+  let item = wrap_err!(PrfItem::from_url(&url, None, None, with_proxy).await)?;
 
-  match profiles_state.0.lock() {
-    Ok(mut profiles) => {
-      profiles.update_item(index, result)?;
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.update_item(index.clone(), item))?;
 
-      // reactivate the profile
-      let current = profiles.current.clone().unwrap_or(0);
-      if current == index {
-        let clash = clash_state.0.lock().unwrap();
-        profiles.activate(&clash)
-      } else {
-        Ok(())
-      }
-    }
-    Err(_) => Err("failed to get profiles lock".into()),
+  // reactivate the profile
+  if Some(index) == profiles.get_current() {
+    let clash = clash_state.0.lock().unwrap();
+    wrap_err!(clash.activate(&profiles, false))?;
   }
+
+  Ok(())
 }
 
 /// change the current profile
 #[tauri::command]
 pub fn select_profile(
-  index: usize,
+  index: String,
   clash_state: State<'_, ClashState>,
   profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
   let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.put_current(index))?;
 
-  match profiles.put_current(index) {
-    Ok(()) => {
-      let clash = clash_state.0.lock().unwrap();
-      profiles.activate(&clash)
-    }
-    Err(err) => Err(err),
-  }
+  let clash = clash_state.0.lock().unwrap();
+  wrap_err!(clash.activate(&profiles, false))
+}
+
+/// change the profile chain
+#[tauri::command]
+pub fn change_profile_chain(
+  chain: Option<Vec<String>>,
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+  let mut profiles = profiles_state.0.lock().unwrap();
+
+  profiles.put_chain(chain);
+  clash.set_window(app_handle.get_window("main"));
+
+  wrap_err!(clash.activate_enhanced(&profiles, false))
+}
+
+/// manually exec enhanced profile
+#[tauri::command]
+pub fn enhance_profiles(
+  app_handle: tauri::AppHandle,
+  clash_state: State<'_, ClashState>,
+  profiles_state: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+  let profiles = profiles_state.0.lock().unwrap();
+
+  clash.set_window(app_handle.get_window("main"));
+
+  wrap_err!(clash.activate_enhanced(&profiles, false))
 }
 
 /// delete profile item
 #[tauri::command]
 pub fn delete_profile(
-  index: usize,
+  index: String,
   clash_state: State<'_, ClashState>,
   profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
   let mut profiles = profiles_state.0.lock().unwrap();
-  match profiles.delete_item(index) {
-    Ok(change) => match change {
-      true => {
-        let clash = clash_state.0.lock().unwrap();
-        profiles.activate(&clash)
-      }
-      false => Ok(()),
-    },
-    Err(err) => Err(err),
+
+  if wrap_err!(profiles.delete_item(index))? {
+    let clash = clash_state.0.lock().unwrap();
+    wrap_err!(clash.activate(&profiles, false))?;
   }
+
+  Ok(())
 }
 
 /// patch the profile config
 #[tauri::command]
 pub fn patch_profile(
-  index: usize,
-  profile: ProfileItem,
+  index: String,
+  profile: PrfItem,
   profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
-  match profiles_state.0.lock() {
-    Ok(mut profiles) => profiles.patch_item(index, profile),
-    Err(_) => Err("can not get profiles lock".into()),
-  }
+  let mut profiles = profiles_state.0.lock().unwrap();
+  wrap_err!(profiles.patch_item(index, profile))
 }
 
 /// run vscode command to edit the profile
 #[tauri::command]
-pub fn view_profile(index: usize, profiles_state: State<'_, ProfilesState>) -> Result<(), String> {
-  let mut profiles = profiles_state.0.lock().unwrap();
-  let items = profiles.items.take().unwrap_or(vec![]);
+pub fn view_profile(index: String, profiles_state: State<'_, ProfilesState>) -> Result<(), String> {
+  let profiles = profiles_state.0.lock().unwrap();
+  let item = wrap_err!(profiles.get_item(&index))?;
 
-  if index >= items.len() {
-    profiles.items = Some(items);
-    return Err("the index out of bound".into());
+  let file = item.file.clone();
+  if file.is_none() {
+    ret_err!("the file is null");
   }
 
-  let file = items[index].file.clone().unwrap_or("".into());
-  profiles.items = Some(items);
-
-  let path = app_home_dir().join("profiles").join(file);
+  let path = dirs::app_profiles_dir().join(file.unwrap());
   if !path.exists() {
-    return Err("the file not found".into());
+    ret_err!("the file not found");
   }
 
   // use vscode first
   if let Ok(code) = which::which("code") {
+    #[cfg(target_os = "windows")]
+    {
+      use std::os::windows::process::CommandExt;
+
+      return match Command::new(code)
+        .creation_flags(0x08000000)
+        .arg(path)
+        .spawn()
+      {
+        Ok(_) => Ok(()),
+        Err(_) => Err("failed to open file by VScode".into()),
+      };
+    }
+
+    #[cfg(not(target_os = "windows"))]
     return match Command::new(code).arg(path).spawn() {
       Ok(_) => Ok(()),
       Err(_) => Err("failed to open file by VScode".into()),
     };
   }
 
-  match open_command().arg(path).spawn() {
-    Ok(_) => Ok(()),
-    Err(_) => Err("failed to open file by `open`".into()),
-  }
+  open_path_cmd(path, "failed to open file by `open`")
 }
 
 /// restart the sidecar
@@ -190,23 +210,15 @@ pub fn restart_sidecar(
   let mut clash = clash_state.0.lock().unwrap();
   let mut profiles = profiles_state.0.lock().unwrap();
 
-  match clash.restart_sidecar(&mut profiles) {
-    Ok(_) => Ok(()),
-    Err(err) => {
-      log::error!("{}", err);
-      Err(err)
-    }
-  }
+  wrap_err!(clash.restart_sidecar(&mut profiles))
 }
 
 /// get the clash core info from the state
 /// the caller can also get the infomation by clash's api
 #[tauri::command]
 pub fn get_clash_info(clash_state: State<'_, ClashState>) -> Result<ClashInfo, String> {
-  match clash_state.0.lock() {
-    Ok(clash) => Ok(clash.info.clone()),
-    Err(_) => Err("failed to get clash lock".into()),
-  }
+  let clash = clash_state.0.lock().unwrap();
+  Ok(clash.info.clone())
 }
 
 /// update the clash core config
@@ -222,26 +234,21 @@ pub fn patch_clash_config(
   let mut clash = clash_state.0.lock().unwrap();
   let mut verge = verge_state.0.lock().unwrap();
   let mut profiles = profiles_state.0.lock().unwrap();
-  clash.patch_config(payload, &mut verge, &mut profiles)
+  wrap_err!(clash.patch_config(payload, &mut verge, &mut profiles))
 }
 
 /// get the system proxy
 #[tauri::command]
 pub fn get_sys_proxy() -> Result<SysProxyConfig, String> {
-  match SysProxyConfig::get_sys() {
-    Ok(value) => Ok(value),
-    Err(err) => Err(err.to_string()),
-  }
+  wrap_err!(SysProxyConfig::get_sys())
 }
 
 /// get the current proxy config
 /// which may not the same as system proxy
 #[tauri::command]
 pub fn get_cur_proxy(verge_state: State<'_, VergeState>) -> Result<Option<SysProxyConfig>, String> {
-  match verge_state.0.lock() {
-    Ok(verge) => Ok(verge.cur_sysproxy.clone()),
-    Err(_) => Err("failed to get verge lock".into()),
-  }
+  let verge = verge_state.0.lock().unwrap();
+  Ok(verge.cur_sysproxy.clone())
 }
 
 /// get the verge config
@@ -262,10 +269,26 @@ pub fn get_verge_config(verge_state: State<'_, VergeState>) -> Result<VergeConfi
 #[tauri::command]
 pub fn patch_verge_config(
   payload: VergeConfig,
+  clash_state: State<'_, ClashState>,
   verge_state: State<'_, VergeState>,
+  profiles_state: State<'_, ProfilesState>,
 ) -> Result<(), String> {
+  let tun_mode = payload.enable_tun_mode.clone();
+
   let mut verge = verge_state.0.lock().unwrap();
-  verge.patch_config(payload)
+  wrap_err!(verge.patch_config(payload))?;
+
+  // change tun mode
+  if tun_mode.is_some() {
+    let mut clash = clash_state.0.lock().unwrap();
+    let profiles = profiles_state.0.lock().unwrap();
+
+    wrap_err!(clash.tun_mode(tun_mode.unwrap()))?;
+    clash.update_config();
+    wrap_err!(clash.activate(&profiles, false))?;
+  }
+
+  Ok(())
 }
 
 /// kill all sidecars when update app
@@ -277,31 +300,36 @@ pub fn kill_sidecars() {
 /// open app config dir
 #[tauri::command]
 pub fn open_app_dir() -> Result<(), String> {
-  let app_dir = app_home_dir();
-
-  match open_command().arg(app_dir).spawn() {
-    Ok(_) => Ok(()),
-    Err(_) => Err("failed to open logs dir".into()),
-  }
+  let app_dir = dirs::app_home_dir();
+  open_path_cmd(app_dir, "failed to open app dir")
 }
 
 /// open logs dir
 #[tauri::command]
 pub fn open_logs_dir() -> Result<(), String> {
-  let log_dir = app_home_dir().join("logs");
-
-  match open_command().arg(log_dir).spawn() {
-    Ok(_) => Ok(()),
-    Err(_) => Err("failed to open logs dir".into()),
-  }
+  let log_dir = dirs::app_logs_dir();
+  open_path_cmd(log_dir, "failed to open logs dir")
 }
 
 /// get open/explorer command
-fn open_command() -> Command {
-  let open = if cfg!(target_os = "windows") {
-    "explorer"
-  } else {
-    "open"
-  };
-  Command::new(open)
+fn open_path_cmd(dir: PathBuf, err_str: &str) -> Result<(), String> {
+  #[cfg(target_os = "windows")]
+  {
+    use std::os::windows::process::CommandExt;
+
+    match Command::new("explorer")
+      .creation_flags(0x08000000)
+      .arg(dir)
+      .spawn()
+    {
+      Ok(_) => Ok(()),
+      Err(_) => Err(err_str.into()),
+    }
+  }
+
+  #[cfg(not(target_os = "windows"))]
+  match Command::new("open").arg(dir).spawn() {
+    Ok(_) => Ok(()),
+    Err(_) => Err(err_str.into()),
+  }
 }

src-tauri/src/core/clash.rs

@@ -1,8 +1,13 @@
-use super::{Profiles, Verge};
-use crate::utils::{config, dirs};
+use super::{PrfEnhancedResult, Profiles, Verge};
+use crate::utils::{config, dirs, help};
+use anyhow::{bail, Result};
+use reqwest::header::HeaderMap;
 use serde::{Deserialize, Serialize};
 use serde_yaml::{Mapping, Value};
+use std::{collections::HashMap, time::Duration};
 use tauri::api::process::{Command, CommandChild, CommandEvent};
+use tauri::Window;
+use tokio::time::sleep;
 
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
 pub struct ClashInfo {
@@ -19,7 +24,6 @@ pub struct ClashInfo {
   pub secret: Option<String>,
 }
 
-#[derive(Debug)]
 pub struct Clash {
   /// maintain the clash config
   pub config: Mapping,
@@ -29,23 +33,38 @@ pub struct Clash {
 
   /// clash sidecar
   pub sidecar: Option<CommandChild>,
+
+  /// save the main window
+  pub window: Option<Window>,
 }
 
-static CLASH_CONFIG: &str = "config.yaml";
-
-// todo: be able to change config field
 impl Clash {
   pub fn new() -> Clash {
-    let config = Clash::get_config();
+    let config = Clash::read_config();
     let info = Clash::get_info(&config);
 
     Clash {
       config,
       info,
       sidecar: None,
+      window: None,
     }
   }
 
+  /// get clash config
+  fn read_config() -> Mapping {
+    config::read_yaml::<Mapping>(dirs::clash_path())
+  }
+
+  /// save the clash config
+  fn save_config(&self) -> Result<()> {
+    config::save_yaml(
+      dirs::clash_path(),
+      &self.config,
+      Some("# Default Config For Clash Core\n\n"),
+    )
+  }
+
   /// parse the clash's config.yaml
   /// get some information
   fn get_info(clash_config: &Mapping) -> ClashInfo {
@@ -99,8 +118,13 @@ impl Clash {
     }
   }
 
+  /// save the main window
+  pub fn set_window(&mut self, win: Option<Window>) {
+    self.window = win;
+  }
+
   /// run clash sidecar
-  pub fn run_sidecar(&mut self) -> Result<(), String> {
+  pub fn run_sidecar(&mut self) -> Result<()> {
     let app_dir = dirs::app_home_dir();
     let app_dir = app_dir.as_os_str().to_str().unwrap();
 
@@ -113,66 +137,50 @@ impl Clash {
           tauri::async_runtime::spawn(async move {
             while let Some(event) = rx.recv().await {
               match event {
-                CommandEvent::Stdout(line) => log::info!("[stdout]: {}", line),
-                CommandEvent::Stderr(err) => log::error!("[stderr]: {}", err),
+                CommandEvent::Stdout(line) => log::info!("[clash]: {}", line),
+                CommandEvent::Stderr(err) => log::error!("[clash]: {}", err),
                 _ => {}
               }
             }
           });
           Ok(())
         }
-        Err(err) => Err(err.to_string()),
+        Err(err) => bail!(err.to_string()),
       },
-      Err(err) => Err(err.to_string()),
+      Err(err) => bail!(err.to_string()),
     }
   }
 
   /// drop clash sidecar
-  pub fn drop_sidecar(&mut self) -> Result<(), String> {
+  pub fn drop_sidecar(&mut self) -> Result<()> {
     if let Some(sidecar) = self.sidecar.take() {
-      if let Err(err) = sidecar.kill() {
-        return Err(format!("failed to drop clash for \"{}\"", err));
-      }
+      sidecar.kill()?;
     }
     Ok(())
   }
 
   /// restart clash sidecar
   /// should reactivate profile after restart
-  pub fn restart_sidecar(&mut self, profiles: &mut Profiles) -> Result<(), String> {
+  pub fn restart_sidecar(&mut self, profiles: &mut Profiles) -> Result<()> {
     self.update_config();
     self.drop_sidecar()?;
     self.run_sidecar()?;
-    profiles.activate(&self)
+    self.activate(profiles, false)
   }
 
   /// update the clash info
   pub fn update_config(&mut self) {
-    self.config = Clash::get_config();
+    self.config = Clash::read_config();
     self.info = Clash::get_info(&self.config);
   }
 
-  /// get clash config
-  fn get_config() -> Mapping {
-    config::read_yaml::<Mapping>(dirs::app_home_dir().join(CLASH_CONFIG))
-  }
-
-  /// save the clash config
-  fn save_config(&self) -> Result<(), String> {
-    config::save_yaml(
-      dirs::app_home_dir().join(CLASH_CONFIG),
-      &self.config,
-      Some("# Default Config For Clash Core\n\n"),
-    )
-  }
-
   /// patch update the clash config
   pub fn patch_config(
     &mut self,
     patch: Mapping,
     verge: &mut Verge,
     profiles: &mut Profiles,
-  ) -> Result<(), String> {
+  ) -> Result<()> {
     for (key, value) in patch.iter() {
       let value = value.clone();
       let key_str = key.as_str().clone().unwrap_or("");
@@ -195,14 +203,160 @@ impl Clash {
         verge.init_sysproxy(port);
       }
 
-      if self.config.contains_key(key) {
-        self.config[key] = value;
-      } else {
-        self.config.insert(key.clone(), value);
-      }
+      self.config.insert(key.clone(), value);
     }
     self.save_config()
   }
+
+  /// enable tun mode
+  /// only revise the config and restart the
+  pub fn tun_mode(&mut self, enable: bool) -> Result<()> {
+    let tun_key = Value::String("tun".into());
+    let tun_val = self.config.get(&tun_key);
+
+    let mut new_val = Mapping::new();
+
+    if tun_val.is_some() && tun_val.as_ref().unwrap().is_mapping() {
+      new_val = tun_val.as_ref().unwrap().as_mapping().unwrap().clone();
+    }
+
+    macro_rules! revise {
+      ($map: expr, $key: expr, $val: expr) => {
+        let ret_key = Value::String($key.into());
+        if $map.contains_key(&ret_key) {
+          $map[&ret_key] = $val;
+        } else {
+          $map.insert(ret_key, $val);
+        }
+      };
+    }
+
+    macro_rules! append {
+      ($map: expr, $key: expr, $val: expr) => {
+        let ret_key = Value::String($key.into());
+        if !$map.contains_key(&ret_key) {
+          $map.insert(ret_key, $val);
+        }
+      };
+    }
+
+    revise!(new_val, "enable", Value::from(enable));
+    append!(new_val, "stack", Value::from("gvisor"));
+    append!(new_val, "auto-route", Value::from(true));
+    append!(new_val, "auto-detect-interface", Value::from(true));
+
+    revise!(self.config, "tun", Value::from(new_val));
+
+    self.save_config()
+  }
+
+  /// activate the profile
+  /// generate a new profile to the temp_dir
+  /// then put the path to the clash core
+  fn _activate(info: ClashInfo, config: Mapping) -> Result<()> {
+    let temp_path = dirs::profiles_temp_path();
+    config::save_yaml(temp_path.clone(), &config, Some("# Clash Verge Temp File"))?;
+
+    tauri::async_runtime::spawn(async move {
+      let server = info.server.unwrap();
+      let server = format!("http://{server}/configs");
+
+      let mut headers = HeaderMap::new();
+      headers.insert("Content-Type", "application/json".parse().unwrap());
+
+      if let Some(secret) = info.secret.as_ref() {
+        let secret = format!("Bearer {}", secret.clone()).parse().unwrap();
+        headers.insert("Authorization", secret);
+      }
+
+      let mut data = HashMap::new();
+      data.insert("path", temp_path.as_os_str().to_str().unwrap());
+
+      // retry 5 times
+      for _ in 0..5 {
+        match reqwest::ClientBuilder::new().no_proxy().build() {
+          Ok(client) => {
+            let builder = client.put(&server).headers(headers.clone()).json(&data);
+
+            match builder.send().await {
+              Ok(resp) => {
+                if resp.status() != 204 {
+                  log::error!("failed to activate clash for status \"{}\"", resp.status());
+                }
+                // do not retry
+                break;
+              }
+              Err(err) => log::error!("failed to activate for `{err}`"),
+            }
+          }
+          Err(err) => log::error!("failed to activate for `{err}`"),
+        }
+        sleep(Duration::from_millis(500)).await;
+      }
+    });
+
+    Ok(())
+  }
+
+  /// enhanced profiles mode
+  /// only change the enhanced profiles
+  pub fn activate_enhanced(&self, profiles: &Profiles, delay: bool) -> Result<()> {
+    if self.window.is_none() {
+      bail!("failed to get the main window");
+    }
+
+    let win = self.window.clone().unwrap();
+    let event_name = help::get_uid("e");
+    let event_name = format!("enhanced-cb-{event_name}");
+
+    let info = self.info.clone();
+    let mut config = self.config.clone();
+
+    // generate the payload
+    let payload = profiles.gen_enhanced(event_name.clone())?;
+
+    win.once(&event_name, move |event| {
+      if let Some(result) = event.payload() {
+        let result: PrfEnhancedResult = serde_json::from_str(result).unwrap();
+
+        if let Some(data) = result.data {
+          for (key, value) in data.into_iter() {
+            config.insert(key, value);
+          }
+          Self::_activate(info, config).unwrap();
+        }
+
+        log::info!("profile enhanced status {}", result.status);
+
+        result.error.map(|error| log::error!("{error}"));
+      }
+    });
+
+    tauri::async_runtime::spawn(async move {
+      // wait the window setup during resolve app
+      if delay {
+        sleep(Duration::from_secs(2)).await;
+      }
+      win.emit("script-handler", payload).unwrap();
+    });
+
+    Ok(())
+  }
+
+  /// activate the profile
+  /// auto activate enhanced profile
+  pub fn activate(&self, profiles: &Profiles, delay: bool) -> Result<()> {
+    let gen_map = profiles.gen_activate()?;
+    let info = self.info.clone();
+    let mut config = self.config.clone();
+
+    for (key, value) in gen_map.into_iter() {
+      config.insert(key, value);
+    }
+
+    Self::_activate(info, config)?;
+    self.activate_enhanced(profiles, delay)
+  }
 }
 
 impl Default for Clash {
@@ -214,7 +368,7 @@ impl Default for Clash {
 impl Drop for Clash {
   fn drop(&mut self) {
     if let Err(err) = self.drop_sidecar() {
-      log::error!("{}", err);
+      log::error!("{err}");
     }
   }
 }

src-tauri/src/core/profiles.rs

@@ -1,399 +1,608 @@
-use super::{Clash, ClashInfo};
-use crate::utils::{config, dirs, tmpl};
-use reqwest::header::HeaderMap;
+use crate::utils::{config, dirs, help, tmpl};
+use anyhow::{bail, Context, Result};
 use serde::{Deserialize, Serialize};
 use serde_yaml::{Mapping, Value};
-use std::collections::HashMap;
-use std::env::temp_dir;
-use std::fs::{remove_file, File};
-use std::io::Write;
-use std::path::PathBuf;
-use std::time::{SystemTime, UNIX_EPOCH};
+use std::{fs, io::Write};
 
-/// Define the `profiles.yaml` schema
-#[derive(Default, Debug, Clone, Deserialize, Serialize)]
-pub struct Profiles {
-  /// current profile's name
-  pub current: Option<usize>,
+#[derive(Debug, Clone, Deserialize, Serialize)]
+pub struct PrfItem {
+  pub uid: Option<String>,
 
-  /// profile list
-  pub items: Option<Vec<ProfileItem>>,
-}
+  /// profile item type
+  /// enum value: remote | local | script | merge
+  #[serde(rename = "type")]
+  pub itype: Option<String>,
 
-#[derive(Default, Debug, Clone, Deserialize, Serialize)]
-pub struct ProfileItem {
   /// profile name
   pub name: Option<String>,
+
   /// profile description
+  #[serde(skip_serializing_if = "Option::is_none")]
   pub desc: Option<String>,
+
   /// profile file
   pub file: Option<String>,
-  /// current mode
-  pub mode: Option<String>,
+
   /// source url
+  #[serde(skip_serializing_if = "Option::is_none")]
   pub url: Option<String>,
+
   /// selected infomation
-  pub selected: Option<Vec<ProfileSelected>>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub selected: Option<Vec<PrfSelected>>,
+
   /// user info
-  pub extra: Option<ProfileExtra>,
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub extra: Option<PrfExtra>,
+
   /// updated time
   pub updated: Option<usize>,
+
+  /// the file data
+  #[serde(skip)]
+  pub file_data: Option<String>,
 }
 
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
-pub struct ProfileSelected {
+pub struct PrfSelected {
   pub name: Option<String>,
   pub now: Option<String>,
 }
 
 #[derive(Default, Debug, Clone, Copy, Deserialize, Serialize)]
-pub struct ProfileExtra {
+pub struct PrfExtra {
   pub upload: usize,
   pub download: usize,
   pub total: usize,
   pub expire: usize,
 }
 
-#[derive(Default, Debug, Clone, Deserialize, Serialize)]
-/// the result from url
-pub struct ProfileResponse {
-  pub name: String,
-  pub file: String,
-  pub data: String,
-  pub extra: Option<ProfileExtra>,
+impl Default for PrfItem {
+  fn default() -> Self {
+    PrfItem {
+      uid: None,
+      itype: None,
+      name: None,
+      desc: None,
+      file: None,
+      url: None,
+      selected: None,
+      extra: None,
+      updated: None,
+      file_data: None,
+    }
+  }
 }
 
-static PROFILE_YAML: &str = "profiles.yaml";
-static PROFILE_TEMP: &str = "clash-verge-runtime.yaml";
+impl PrfItem {
+  /// From partial item
+  /// must contain `itype`
+  pub async fn from(item: PrfItem) -> Result<PrfItem> {
+    if item.itype.is_none() {
+      bail!("type should not be null");
+    }
+
+    match item.itype.unwrap().as_str() {
+      "remote" => {
+        if item.url.is_none() {
+          bail!("url should not be null");
+        }
+        let url = item.url.as_ref().unwrap().as_str();
+        let name = item.name;
+        let desc = item.desc;
+        PrfItem::from_url(url, name, desc, false).await
+      }
+      "local" => {
+        let name = item.name.unwrap_or("Local File".into());
+        let desc = item.desc.unwrap_or("".into());
+        PrfItem::from_local(name, desc)
+      }
+      "merge" => {
+        let name = item.name.unwrap_or("Merge".into());
+        let desc = item.desc.unwrap_or("".into());
+        PrfItem::from_merge(name, desc)
+      }
+      "script" => {
+        let name = item.name.unwrap_or("Script".into());
+        let desc = item.desc.unwrap_or("".into());
+        PrfItem::from_script(name, desc)
+      }
+      typ @ _ => bail!("invalid type \"{typ}\""),
+    }
+  }
+
+  /// ## Local type
+  /// create a new item from name/desc
+  pub fn from_local(name: String, desc: String) -> Result<PrfItem> {
+    let uid = help::get_uid("l");
+    let file = format!("{uid}.yaml");
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("local".into()),
+      name: Some(name),
+      desc: Some(desc),
+      file: Some(file),
+      url: None,
+      selected: None,
+      extra: None,
+      updated: Some(help::get_now()),
+      file_data: Some(tmpl::ITEM_LOCAL.into()),
+    })
+  }
+
+  /// ## Remote type
+  /// create a new item from url
+  pub async fn from_url(
+    url: &str,
+    name: Option<String>,
+    desc: Option<String>,
+    with_proxy: bool,
+  ) -> Result<PrfItem> {
+    let mut builder = reqwest::ClientBuilder::new();
+
+    if !with_proxy {
+      builder = builder.no_proxy();
+    }
+
+    let resp = builder.build()?.get(url).send().await?;
+    let header = resp.headers();
+
+    // parse the Subscription Userinfo
+    let extra = match header.get("Subscription-Userinfo") {
+      Some(value) => {
+        let sub_info = value.to_str().unwrap_or("");
+
+        Some(PrfExtra {
+          upload: help::parse_str(sub_info, "upload=").unwrap_or(0),
+          download: help::parse_str(sub_info, "download=").unwrap_or(0),
+          total: help::parse_str(sub_info, "total=").unwrap_or(0),
+          expire: help::parse_str(sub_info, "expire=").unwrap_or(0),
+        })
+      }
+      None => None,
+    };
+
+    let uid = help::get_uid("r");
+    let file = format!("{uid}.yaml");
+    let name = name.unwrap_or(uid.clone());
+    let data = resp.text_with_charset("utf-8").await?;
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("remote".into()),
+      name: Some(name),
+      desc,
+      file: Some(file),
+      url: Some(url.into()),
+      selected: None,
+      extra,
+      updated: Some(help::get_now()),
+      file_data: Some(data),
+    })
+  }
+
+  /// ## Merge type (enhance)
+  /// create the enhanced item by using `merge` rule
+  pub fn from_merge(name: String, desc: String) -> Result<PrfItem> {
+    let uid = help::get_uid("m");
+    let file = format!("{uid}.yaml");
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("merge".into()),
+      name: Some(name),
+      desc: Some(desc),
+      file: Some(file),
+      url: None,
+      selected: None,
+      extra: None,
+      updated: Some(help::get_now()),
+      file_data: Some(tmpl::ITEM_MERGE.into()),
+    })
+  }
+
+  /// ## Script type (enhance)
+  /// create the enhanced item by using javascript(browserjs)
+  pub fn from_script(name: String, desc: String) -> Result<PrfItem> {
+    let uid = help::get_uid("s");
+    let file = format!("{uid}.js"); // js ext
+
+    Ok(PrfItem {
+      uid: Some(uid),
+      itype: Some("script".into()),
+      name: Some(name),
+      desc: Some(desc),
+      file: Some(file),
+      url: None,
+      selected: None,
+      extra: None,
+      updated: Some(help::get_now()),
+      file_data: Some(tmpl::ITEM_SCRIPT.into()),
+    })
+  }
+}
+
+///
+/// ## Profiles Config
+///
+/// Define the `profiles.yaml` schema
+///
+#[derive(Default, Debug, Clone, Deserialize, Serialize)]
+pub struct Profiles {
+  /// same as PrfConfig.current
+  current: Option<String>,
+
+  /// same as PrfConfig.chain
+  chain: Option<Vec<String>>,
+
+  /// profile list
+  items: Option<Vec<PrfItem>>,
+}
+
+macro_rules! patch {
+  ($lv: expr, $rv: expr, $key: tt) => {
+    if ($rv.$key).is_some() {
+      $lv.$key = $rv.$key;
+    }
+  };
+}
 
 impl Profiles {
   /// read the config from the file
   pub fn read_file() -> Self {
-    config::read_yaml::<Profiles>(dirs::app_home_dir().join(PROFILE_YAML))
+    let mut profiles = config::read_yaml::<Self>(dirs::profiles_path());
+
+    if profiles.items.is_none() {
+      profiles.items = Some(vec![]);
+    }
+
+    profiles.items.as_mut().map(|items| {
+      for mut item in items.iter_mut() {
+        if item.uid.is_none() {
+          item.uid = Some(help::get_uid("d"));
+        }
+      }
+    });
+
+    profiles
   }
 
   /// save the config to the file
-  pub fn save_file(&self) -> Result<(), String> {
+  pub fn save_file(&self) -> Result<()> {
     config::save_yaml(
-      dirs::app_home_dir().join(PROFILE_YAML),
+      dirs::profiles_path(),
       self,
       Some("# Profiles Config for Clash Verge\n\n"),
     )
   }
 
   /// sync the config between file and memory
-  pub fn sync_file(&mut self) -> Result<(), String> {
-    let data = config::read_yaml::<Self>(dirs::app_home_dir().join(PROFILE_YAML));
-    if data.current.is_none() {
-      Err("failed to read profiles.yaml".into())
-    } else {
-      self.current = data.current;
-      self.items = data.items;
-      Ok(())
+  pub fn sync_file(&mut self) -> Result<()> {
+    let data = Self::read_file();
+    if data.current.is_none() && data.items.is_none() {
+      bail!("failed to read profiles.yaml");
     }
+
+    self.current = data.current;
+    self.chain = data.chain;
+    self.items = data.items;
+    Ok(())
   }
 
-  /// import the new profile from the url
-  /// and update the config file
-  pub fn import_from_url(&mut self, url: String, result: ProfileResponse) -> Result<(), String> {
-    // save the profile file
-    let path = dirs::app_home_dir().join("profiles").join(&result.file);
-    let file_data = result.data.as_bytes();
-    File::create(path).unwrap().write(file_data).unwrap();
-
-    // update `profiles.yaml`
-    let data = Profiles::read_file();
-    let mut items = data.items.unwrap_or(vec![]);
-
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs();
-
-    items.push(ProfileItem {
-      name: Some(result.name),
-      desc: Some("imported url".into()),
-      file: Some(result.file),
-      mode: Some(format!("rule")),
-      url: Some(url),
-      selected: Some(vec![]),
-      extra: result.extra,
-      updated: Some(now as usize),
-    });
-
-    self.items = Some(items);
-    if data.current.is_none() {
-      self.current = Some(0);
-    }
-
-    self.save_file()
+  /// get the current uid
+  pub fn get_current(&self) -> Option<String> {
+    self.current.clone()
   }
 
-  /// set the current and save to file
-  pub fn put_current(&mut self, index: usize) -> Result<(), String> {
-    let items = self.items.take().unwrap_or(vec![]);
-
-    if index >= items.len() {
-      return Err("the index out of bound".into());
+  /// only change the main to the target id
+  pub fn put_current(&mut self, uid: String) -> Result<()> {
+    if self.items.is_none() {
+      self.items = Some(vec![]);
     }
 
-    self.items = Some(items);
-    self.current = Some(index);
-    self.save_file()
+    let items = self.items.as_ref().unwrap();
+    let some_uid = Some(uid.clone());
+
+    for each in items.iter() {
+      if each.uid == some_uid {
+        self.current = some_uid;
+        return self.save_file();
+      }
+    }
+
+    bail!("invalid uid \"{uid}\"");
+  }
+
+  /// just change the `chain`
+  pub fn put_chain(&mut self, chain: Option<Vec<String>>) {
+    self.chain = chain;
+  }
+
+  /// find the item by the uid
+  pub fn get_item(&self, uid: &String) -> Result<&PrfItem> {
+    if self.items.is_some() {
+      let items = self.items.as_ref().unwrap();
+      let some_uid = Some(uid.clone());
+
+      for each in items.iter() {
+        if each.uid == some_uid {
+          return Ok(each);
+        }
+      }
+    }
+
+    bail!("failed to get the item by \"{}\"", uid);
   }
 
   /// append new item
-  /// return the new item's index
-  pub fn append_item(&mut self, name: String, desc: String) -> Result<(usize, PathBuf), String> {
+  /// if the file_data is some
+  /// then should save the data to file
+  pub fn append_item(&mut self, mut item: PrfItem) -> Result<()> {
+    if item.uid.is_none() {
+      bail!("the uid should not be null");
+    }
+
+    // save the file data
+    // move the field value after save
+    if let Some(file_data) = item.file_data.take() {
+      if item.file.is_none() {
+        bail!("the file should not be null");
+      }
+
+      let file = item.file.clone().unwrap();
+      let path = dirs::app_profiles_dir().join(&file);
+
+      fs::File::create(path)
+        .context(format!("failed to create file \"{}\"", file))?
+        .write(file_data.as_bytes())
+        .context(format!("failed to write to file \"{}\"", file))?;
+    }
+
+    if self.items.is_none() {
+      self.items = Some(vec![]);
+    }
+
+    self.items.as_mut().map(|items| items.push(item));
+    self.save_file()
+  }
+
+  /// update the item's value
+  pub fn patch_item(&mut self, uid: String, item: PrfItem) -> Result<()> {
     let mut items = self.items.take().unwrap_or(vec![]);
 
-    // create a new profile file
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs();
-    let file = format!("{}.yaml", now);
-    let path = dirs::app_home_dir().join("profiles").join(&file);
+    for mut each in items.iter_mut() {
+      if each.uid == Some(uid.clone()) {
+        patch!(each, item, itype);
+        patch!(each, item, name);
+        patch!(each, item, desc);
+        patch!(each, item, file);
+        patch!(each, item, url);
+        patch!(each, item, selected);
+        patch!(each, item, extra);
 
-    match File::create(&path).unwrap().write(tmpl::ITEM_CONFIG) {
-      Ok(_) => {
-        items.push(ProfileItem {
-          name: Some(name),
-          desc: Some(desc),
-          file: Some(file),
-          mode: None,
-          url: None,
-          selected: Some(vec![]),
-          extra: None,
-          updated: Some(now as usize),
-        });
+        each.updated = Some(help::get_now());
 
-        let index = items.len();
         self.items = Some(items);
-        Ok((index, path))
-      }
-      Err(_) => Err("failed to create file".into()),
-    }
-  }
-
-  /// update the target profile
-  /// and save to config file
-  /// only support the url item
-  pub fn update_item(&mut self, index: usize, result: ProfileResponse) -> Result<(), String> {
-    let mut items = self.items.take().unwrap_or(vec![]);
-
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs() as usize;
-
-    // update file
-    let file_path = &items[index].file.as_ref().unwrap();
-    let file_path = dirs::app_home_dir().join("profiles").join(file_path);
-    let file_data = result.data.as_bytes();
-    File::create(file_path).unwrap().write(file_data).unwrap();
-
-    items[index].name = Some(result.name);
-    items[index].extra = result.extra;
-    items[index].updated = Some(now);
-
-    self.items = Some(items);
-    self.save_file()
-  }
-
-  /// patch item
-  pub fn patch_item(&mut self, index: usize, profile: ProfileItem) -> Result<(), String> {
-    let mut items = self.items.take().unwrap_or(vec![]);
-    if index >= items.len() {
-      return Err("index out of bound".into());
-    }
-
-    if profile.name.is_some() {
-      items[index].name = profile.name;
-    }
-    if profile.file.is_some() {
-      items[index].file = profile.file;
-    }
-    if profile.mode.is_some() {
-      items[index].mode = profile.mode;
-    }
-    if profile.url.is_some() {
-      items[index].url = profile.url;
-    }
-    if profile.selected.is_some() {
-      items[index].selected = profile.selected;
-    }
-    if profile.extra.is_some() {
-      items[index].extra = profile.extra;
-    }
-
-    self.items = Some(items);
-    self.save_file()
-  }
-
-  /// delete the item
-  pub fn delete_item(&mut self, index: usize) -> Result<bool, String> {
-    let mut current = self.current.clone().unwrap_or(0);
-    let mut items = self.items.clone().unwrap_or(vec![]);
-
-    if index >= items.len() {
-      return Err("index out of bound".into());
-    }
-
-    let mut rm_item = items.remove(index);
-
-    // delete the file
-    if let Some(file) = rm_item.file.take() {
-      let file_path = dirs::app_home_dir().join("profiles").join(file);
-
-      if file_path.exists() {
-        if let Err(err) = remove_file(file_path) {
-          log::error!("{err}");
-        }
+        return self.save_file();
       }
     }
 
-    let mut should_change = false;
-
-    if current == index {
-      current = 0;
-      should_change = true;
-    } else if current > index {
-      current = current - 1;
-    }
-
-    self.current = Some(current);
     self.items = Some(items);
-
-    match self.save_file() {
-      Ok(_) => Ok(should_change),
-      Err(err) => Err(err),
-    }
+    bail!("failed to found the uid \"{uid}\"")
   }
 
-  /// activate current profile
-  pub fn activate(&self, clash: &Clash) -> Result<(), String> {
-    let current = self.current.unwrap_or(0);
-    match self.items.clone() {
-      Some(items) => {
-        if current >= items.len() {
-          return Err("the index out of bound".into());
-        }
+  /// be used to update the remote item
+  /// only patch `updated` `extra` `file_data`
+  pub fn update_item(&mut self, uid: String, mut item: PrfItem) -> Result<()> {
+    if self.items.is_none() {
+      self.items = Some(vec![]);
+    }
 
-        let profile = items[current].clone();
-        let clash_config = clash.config.clone();
-        let clash_info = clash.info.clone();
-        tauri::async_runtime::spawn(async move {
-          let mut count = 5; // retry times
-          let mut err = String::from("");
-          while count > 0 {
-            match activate_profile(&profile, &clash_config, &clash_info).await {
-              Ok(_) => return,
-              Err(e) => err = e,
-            }
-            count -= 1;
+    // find the item
+    let _ = self.get_item(&uid)?;
+
+    self.items.as_mut().map(|items| {
+      let some_uid = Some(uid.clone());
+
+      for mut each in items.iter_mut() {
+        if each.uid == some_uid {
+          each.extra = item.extra;
+          each.updated = item.updated;
+
+          // save the file data
+          // move the field value after save
+          if let Some(file_data) = item.file_data.take() {
+            let file = each.file.take();
+            let file = file.unwrap_or(item.file.take().unwrap_or(format!("{}.yaml", &uid)));
+
+            // the file must exists
+            each.file = Some(file.clone());
+
+            let path = dirs::app_profiles_dir().join(&file);
+
+            fs::File::create(path)
+              .unwrap()
+              .write(file_data.as_bytes())
+              .unwrap();
+          }
+
+          break;
+        }
+      }
+    });
+
+    self.save_file()
+  }
+
+  /// delete item
+  /// if delete the current then return true
+  pub fn delete_item(&mut self, uid: String) -> Result<bool> {
+    let current = self.current.as_ref().unwrap_or(&uid);
+    let current = current.clone();
+
+    let mut items = self.items.take().unwrap_or(vec![]);
+    let mut index = None;
+
+    // get the index
+    for i in 0..items.len() {
+      if items[i].uid == Some(uid.clone()) {
+        index = Some(i);
+        break;
+      }
+    }
+
+    if let Some(index) = index {
+      items.remove(index).file.map(|file| {
+        let path = dirs::app_profiles_dir().join(file);
+        if path.exists() {
+          let _ = fs::remove_file(path);
+        }
+      });
+    }
+
+    // delete the original uid
+    if current == uid {
+      self.current = match items.len() > 0 {
+        true => items[0].uid.clone(),
+        false => None,
+      };
+    }
+
+    self.items = Some(items);
+    self.save_file()?;
+    Ok(current == uid)
+  }
+
+  /// only generate config mapping
+  pub fn gen_activate(&self) -> Result<Mapping> {
+    let config = Mapping::new();
+
+    if self.current.is_none() || self.items.is_none() {
+      return Ok(config);
+    }
+
+    let current = self.current.clone().unwrap();
+
+    for item in self.items.as_ref().unwrap().iter() {
+      if item.uid == Some(current.clone()) {
+        let file_path = match item.file.clone() {
+          Some(file) => dirs::app_profiles_dir().join(file),
+          None => bail!("failed to get the file field"),
+        };
+
+        if !file_path.exists() {
+          bail!("failed to read the file \"{}\"", file_path.display());
+        }
+
+        let mut new_config = Mapping::new();
+        let def_config = config::read_yaml::<Mapping>(file_path.clone());
+
+        // Only the following fields are allowed:
+        // proxies/proxy-providers/proxy-groups/rule-providers/rules
+        let valid_keys = vec![
+          "proxies",
+          "proxy-providers",
+          "proxy-groups",
+          "rule-providers",
+          "rules",
+        ];
+
+        valid_keys.iter().for_each(|key| {
+          let key = Value::String(key.to_string());
+          if def_config.contains_key(&key) {
+            let value = def_config[&key].clone();
+            new_config.insert(key, value);
           }
-          log::error!("failed to activate for `{}`", err);
         });
 
-        Ok(())
+        return Ok(new_config);
       }
-      None => Err("empty profiles".into()),
     }
+
+    bail!("failed to found the uid \"{current}\"");
   }
-}
 
-/// put the profile to clash
-pub async fn activate_profile(
-  profile_item: &ProfileItem,
-  clash_config: &Mapping,
-  clash_info: &ClashInfo,
-) -> Result<(), String> {
-  // temp profile's path
-  let temp_path = temp_dir().join(PROFILE_TEMP);
+  /// gen the enhanced profiles
+  pub fn gen_enhanced(&self, callback: String) -> Result<PrfEnhanced> {
+    let current = self.gen_activate()?;
 
-  // generate temp profile
-  {
-    let file_name = match profile_item.file.clone() {
-      Some(file_name) => file_name,
-      None => return Err("profile item should have `file` field".into()),
+    let chain = match self.chain.as_ref() {
+      Some(chain) => chain
+        .iter()
+        .map(|uid| self.get_item(uid))
+        .filter(|item| item.is_ok())
+        .map(|item| item.unwrap())
+        .map(|item| PrfData::from_item(item))
+        .filter(|o| o.is_some())
+        .map(|o| o.unwrap())
+        .collect::<Vec<PrfData>>(),
+      None => vec![],
     };
 
-    let file_path = dirs::app_home_dir().join("profiles").join(file_name);
-    if !file_path.exists() {
-      return Err(format!(
-        "profile `{}` not exists",
-        file_path.as_os_str().to_str().unwrap()
-      ));
-    }
-
-    // begin to generate the new profile config
-    let def_config = config::read_yaml::<Mapping>(file_path.clone());
-    let mut new_config = Mapping::new();
-
-    // Only the following fields are allowed:
-    // proxies/proxy-providers/proxy-groups/rule-providers/rules
-    let valid_keys = vec![
-      "proxies",
-      "proxy-providers",
-      "proxy-groups",
-      "rule-providers",
-      "rules",
-    ];
-    valid_keys.iter().for_each(|key| {
-      let key = Value::String(key.to_string());
-      if def_config.contains_key(&key) {
-        let value = def_config[&key].clone();
-        new_config.insert(key, value);
-      }
-    });
-
-    // add some of the clash `config.yaml` config to it
-    let valid_keys = vec![
-      "mixed-port",
-      "log-level",
-      "allow-lan",
-      "external-controller",
-      "secret",
-      "mode",
-      "ipv6",
-    ];
-    valid_keys.iter().for_each(|key| {
-      let key = Value::String(key.to_string());
-      if clash_config.contains_key(&key) {
-        let value = clash_config[&key].clone();
-        new_config.insert(key, value);
-      }
-    });
-
-    config::save_yaml(
-      temp_path.clone(),
-      &new_config,
-      Some("# Clash Verge Temp File"),
-    )?
-  };
-
-  let server = format!("http://{}/configs", clash_info.server.clone().unwrap());
-
-  let mut headers = HeaderMap::new();
-  headers.insert("Content-Type", "application/json".parse().unwrap());
-
-  if let Some(secret) = clash_info.secret.clone() {
-    headers.insert(
-      "Authorization",
-      format!("Bearer {}", secret).parse().unwrap(),
-    );
-  }
-
-  let mut data = HashMap::new();
-  data.insert("path", temp_path.as_os_str().to_str().unwrap());
-
-  let client = match reqwest::ClientBuilder::new().no_proxy().build() {
-    Ok(c) => c,
-    Err(_) => return Err("failed to create http::put".into()),
-  };
-  match client.put(server).headers(headers).json(&data).send().await {
-    Ok(_) => Ok(()),
-    Err(err) => Err(format!("request failed `{}`", err.to_string())),
+    Ok(PrfEnhanced {
+      current,
+      chain,
+      callback,
+    })
+  }
+}
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize)]
+pub struct PrfEnhanced {
+  current: Mapping,
+
+  chain: Vec<PrfData>,
+
+  callback: String,
+}
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize)]
+pub struct PrfEnhancedResult {
+  pub data: Option<Mapping>,
+
+  pub status: String,
+
+  pub error: Option<String>,
+}
+
+#[derive(Default, Debug, Clone, Serialize, Deserialize)]
+pub struct PrfData {
+  item: PrfItem,
+
+  #[serde(skip_serializing_if = "Option::is_none")]
+  merge: Option<Mapping>,
+
+  #[serde(skip_serializing_if = "Option::is_none")]
+  script: Option<String>,
+}
+
+impl PrfData {
+  pub fn from_item(item: &PrfItem) -> Option<PrfData> {
+    match item.itype.as_ref() {
+      Some(itype) => {
+        let file = item.file.clone()?;
+        let path = dirs::app_profiles_dir().join(file);
+
+        if !path.exists() {
+          return None;
+        }
+
+        match itype.as_str() {
+          "script" => Some(PrfData {
+            item: item.clone(),
+            script: Some(fs::read_to_string(path).unwrap_or("".into())),
+            merge: None,
+          }),
+          "merge" => Some(PrfData {
+            item: item.clone(),
+            merge: Some(config::read_yaml::<Mapping>(path)),
+            script: None,
+          }),
+          _ => None,
+        }
+      }
+      None => None,
+    }
   }
 }

src-tauri/src/core/verge.rs

@@ -1,11 +1,13 @@
 use crate::{
   core::Clash,
+  log_if_err,
   utils::{config, dirs, sysopt::SysProxyConfig},
 };
+use anyhow::{bail, Result};
 use auto_launch::{AutoLaunch, AutoLaunchBuilder};
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
-use tauri::{api::path::resource_dir, async_runtime::Mutex};
+use tauri::{async_runtime::Mutex, utils::platform::current_exe};
 
 /// ### `verge.yaml` schema
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
@@ -20,6 +22,9 @@ pub struct VergeConfig {
   /// enable traffic graph default is true
   pub traffic_graph: Option<bool>,
 
+  /// clash tun mode
+  pub enable_tun_mode: Option<bool>,
+
   /// can the app auto startup
   pub enable_auto_launch: Option<bool>,
 
@@ -36,17 +41,15 @@ pub struct VergeConfig {
   pub proxy_guard_duration: Option<u64>,
 }
 
-static VERGE_CONFIG: &str = "verge.yaml";
-
 impl VergeConfig {
   pub fn new() -> Self {
-    config::read_yaml::<VergeConfig>(dirs::app_home_dir().join(VERGE_CONFIG))
+    config::read_yaml::<VergeConfig>(dirs::verge_path())
   }
 
   /// Save Verge App Config
-  pub fn save_file(&self) -> Result<(), String> {
+  pub fn save_file(&self) -> Result<()> {
     config::save_yaml(
-      dirs::app_home_dir().join(VERGE_CONFIG),
+      dirs::verge_path(),
       self,
       Some("# The Config for Clash Verge App\n\n"),
     )
@@ -56,13 +59,18 @@ impl VergeConfig {
 /// Verge App abilities
 #[derive(Debug)]
 pub struct Verge {
+  /// manage the verge config
   pub config: VergeConfig,
 
-  pub old_sysproxy: Option<SysProxyConfig>,
-
+  /// current system proxy setting
   pub cur_sysproxy: Option<SysProxyConfig>,
 
-  pub auto_launch: Option<AutoLaunch>,
+  /// record the original system proxy
+  /// recover it when exit
+  old_sysproxy: Option<SysProxyConfig>,
+
+  /// helps to auto launch the app
+  auto_launch: Option<AutoLaunch>,
 
   /// record whether the guard async is running or not
   guard_state: Arc<Mutex<bool>>,
@@ -122,13 +130,11 @@ impl Verge {
   }
 
   /// init the auto launch
-  pub fn init_launch(&mut self, package_info: &tauri::PackageInfo) {
-    let app_name = "clash-verge";
-    let app_path = get_app_path(app_name);
-    let app_path = resource_dir(package_info, &tauri::Env::default())
-      .unwrap()
-      .join(app_path);
-    let app_path = app_path.as_os_str().to_str().unwrap();
+  pub fn init_launch(&mut self) {
+    let app_exe = current_exe().unwrap();
+    let app_exe = dunce::canonicalize(app_exe).unwrap();
+    let app_name = app_exe.file_stem().unwrap().to_str().unwrap();
+    let app_path = app_exe.as_os_str().to_str().unwrap();
 
     let auto = AutoLaunchBuilder::new()
       .set_app_name(app_name)
@@ -139,30 +145,28 @@ impl Verge {
   }
 
   /// sync the startup when run the app
-  pub fn sync_launch(&self) -> Result<(), String> {
+  pub fn sync_launch(&self) -> Result<()> {
     let enable = self.config.enable_auto_launch.clone().unwrap_or(false);
     if !enable {
       return Ok(());
     }
 
     if self.auto_launch.is_none() {
-      return Err("should init the auto launch first".into());
+      bail!("should init the auto launch first");
     }
 
     let auto_launch = self.auto_launch.clone().unwrap();
 
     let is_enabled = auto_launch.is_enabled().unwrap_or(false);
     if !is_enabled {
-      if let Err(_) = auto_launch.enable() {
-        return Err("failed to enable auto-launch".into());
-      }
+      auto_launch.enable()?;
     }
 
     Ok(())
   }
 
   /// update the startup
-  fn update_launch(&mut self, enable: bool) -> Result<(), String> {
+  fn update_launch(&mut self, enable: bool) -> Result<()> {
     let conf_enable = self.config.enable_auto_launch.clone().unwrap_or(false);
 
     if enable == conf_enable {
@@ -171,24 +175,18 @@ impl Verge {
 
     let auto_launch = self.auto_launch.clone().unwrap();
 
-    let result = match enable {
-      true => auto_launch.enable(),
-      false => auto_launch.disable(),
+    match enable {
+      true => auto_launch.enable()?,
+      false => auto_launch.disable()?,
     };
 
-    match result {
-      Ok(_) => Ok(()),
-      Err(err) => {
-        log::error!("{err}");
-        Err("failed to set system startup info".into())
-      }
-    }
+    Ok(())
   }
 
   /// patch verge config
   /// There should be only one update at a time here
   /// so call the save_file at the end is savely
-  pub fn patch_config(&mut self, patch: VergeConfig) -> Result<(), String> {
+  pub fn patch_config(&mut self, patch: VergeConfig) -> Result<()> {
     // only change it
     if patch.theme_mode.is_some() {
       self.config.theme_mode = patch.theme_mode;
@@ -217,7 +215,7 @@ impl Verge {
           self.cur_sysproxy = Some(sysproxy);
 
           log::error!("failed to set system proxy");
-          return Err("failed to set system proxy".into());
+          bail!("failed to set system proxy");
         }
         self.cur_sysproxy = Some(sysproxy);
       }
@@ -236,7 +234,7 @@ impl Verge {
             self.cur_sysproxy = Some(sysproxy);
 
             log::error!("failed to set system proxy");
-            return Err("failed to set system proxy".into());
+            bail!("failed to set system proxy");
           }
         }
 
@@ -260,6 +258,11 @@ impl Verge {
       Verge::guard_proxy(self.guard_state.clone());
     }
 
+    // handle the tun mode
+    if patch.enable_tun_mode.is_some() {
+      self.config.enable_tun_mode = patch.enable_tun_mode;
+    }
+
     self.config.save_file()
   }
 }
@@ -285,7 +288,7 @@ impl Verge {
       loop {
         sleep(Duration::from_secs(wait_secs)).await;
 
-        log::debug!("[Guard]: heartbeat detection");
+        log::debug!("guard heartbeat detection");
 
         let verge = Verge::new();
 
@@ -301,7 +304,7 @@ impl Verge {
           break;
         }
 
-        log::info!("[Guard]: try to guard proxy");
+        log::info!("try to guard proxy");
 
         let clash = Clash::new();
 
@@ -310,12 +313,9 @@ impl Verge {
             let bypass = verge.config.system_proxy_bypass.clone();
             let sysproxy = SysProxyConfig::new(true, port.clone(), bypass);
 
-            if let Err(err) = sysproxy.set_sys() {
-              log::error!("[Guard]: {err}");
-              log::error!("[Guard]: fail to set system proxy");
-            }
+            log_if_err!(sysproxy.set_sys());
           }
-          None => log::error!("[Guard]: fail to parse clash port"),
+          None => log::error!("fail to parse clash port"),
         }
       }
 
@@ -324,14 +324,3 @@ impl Verge {
     });
   }
 }
-
-// Get the target app_path
-fn get_app_path(app_name: &str) -> String {
-  #[cfg(target_os = "linux")]
-  let ext = "";
-  #[cfg(target_os = "macos")]
-  let ext = "";
-  #[cfg(target_os = "windows")]
-  let ext = ".exe";
-  String::from(app_name) + ext
-}

src-tauri/src/main.rs

@@ -19,18 +19,19 @@ fn main() -> std::io::Result<()> {
     return Ok(());
   }
 
-  let menu = SystemTrayMenu::new()
+  let tray_menu = SystemTrayMenu::new()
     .add_item(CustomMenuItem::new("open_window", "Show"))
     .add_item(CustomMenuItem::new("restart_clash", "Restart Clash"))
     .add_native_item(SystemTrayMenuItem::Separator)
     .add_item(CustomMenuItem::new("quit", "Quit").accelerator("CmdOrControl+Q"));
 
-  tauri::Builder::default()
+  #[allow(unused_mut)]
+  let mut builder = tauri::Builder::default()
     .manage(states::VergeState::default())
     .manage(states::ClashState::default())
     .manage(states::ProfilesState::default())
     .setup(|app| Ok(resolve::resolve_setup(app)))
-    .system_tray(SystemTray::new().with_menu(menu))
+    .system_tray(SystemTray::new().with_menu(tray_menu))
     .on_system_tray_event(move |app_handle, event| match event {
       SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
         "open_window" => {
@@ -84,16 +85,37 @@ fn main() -> std::io::Result<()> {
       cmds::get_verge_config,
       cmds::patch_verge_config,
       // profile
-      cmds::new_profile,
       cmds::view_profile,
       cmds::patch_profile,
+      cmds::create_profile,
       cmds::import_profile,
       cmds::update_profile,
       cmds::delete_profile,
       cmds::select_profile,
       cmds::get_profiles,
       cmds::sync_profiles,
-    ])
+      cmds::enhance_profiles,
+      cmds::change_profile_chain
+    ]);
+
+  #[cfg(target_os = "macos")]
+  {
+    use tauri::{Menu, MenuItem, Submenu};
+
+    let submenu_file = Submenu::new(
+      "File",
+      Menu::new()
+        .add_native_item(MenuItem::Undo)
+        .add_native_item(MenuItem::Redo)
+        .add_native_item(MenuItem::Copy)
+        .add_native_item(MenuItem::Paste)
+        .add_native_item(MenuItem::Cut)
+        .add_native_item(MenuItem::SelectAll),
+    );
+    builder = builder.menu(Menu::new().add_submenu(submenu_file));
+  }
+
+  builder
     .build(tauri::generate_context!())
     .expect("error while running tauri application")
     .run(|app_handle, e| match e {

src-tauri/src/utils/config.rs

@@ -1,3 +1,4 @@
+use anyhow::{Context, Result};
 use serde::{de::DeserializeOwned, Serialize};
 use std::{fs, path::PathBuf};
 
@@ -7,26 +8,16 @@ pub fn read_yaml<T: DeserializeOwned + Default>(path: PathBuf) -> T {
   serde_yaml::from_str::<T>(&yaml_str).unwrap_or(T::default())
 }
 
-/// - save the data to the file
-/// - can set `prefix` string to add some comments
-pub fn save_yaml<T: Serialize>(
-  path: PathBuf,
-  data: &T,
-  prefix: Option<&str>,
-) -> Result<(), String> {
-  match serde_yaml::to_string(data) {
-    Ok(data_str) => {
-      let yaml_str = match prefix {
-        Some(prefix) => format!("{}{}", prefix, data_str),
-        None => data_str,
-      };
+/// save the data to the file
+/// can set `prefix` string to add some comments
+pub fn save_yaml<T: Serialize>(path: PathBuf, data: &T, prefix: Option<&str>) -> Result<()> {
+  let data_str = serde_yaml::to_string(data)?;
 
-      let path_str = path.as_os_str().to_string_lossy().to_string();
-      match fs::write(path, yaml_str.as_bytes()) {
-        Ok(_) => Ok(()),
-        Err(_) => Err(format!("can not save file `{}`", path_str)),
-      }
-    }
-    Err(_) => Err("can not convert the data to yaml".into()),
-  }
+  let yaml_str = match prefix {
+    Some(prefix) => format!("{prefix}{data_str}"),
+    None => data_str,
+  };
+
+  let path_str = path.as_os_str().to_string_lossy().to_string();
+  fs::write(path, yaml_str.as_bytes()).context(format!("failed to save file \"{path_str}\""))
 }

src-tauri/src/utils/dirs.rs

@@ -1,3 +1,4 @@
+use std::env::temp_dir;
 use std::path::{Path, PathBuf};
 use tauri::{
   api::path::{home_dir, resource_dir},
@@ -18,3 +19,34 @@ pub fn app_resources_dir(package_info: &PackageInfo) -> PathBuf {
     .unwrap()
     .join("resources")
 }
+
+/// profiles dir
+pub fn app_profiles_dir() -> PathBuf {
+  app_home_dir().join("profiles")
+}
+
+/// logs dir
+pub fn app_logs_dir() -> PathBuf {
+  app_home_dir().join("logs")
+}
+
+static CLASH_CONFIG: &str = "config.yaml";
+static VERGE_CONFIG: &str = "verge.yaml";
+static PROFILE_YAML: &str = "profiles.yaml";
+static PROFILE_TEMP: &str = "clash-verge-runtime.yaml";
+
+pub fn clash_path() -> PathBuf {
+  app_home_dir().join(CLASH_CONFIG)
+}
+
+pub fn verge_path() -> PathBuf {
+  app_home_dir().join(VERGE_CONFIG)
+}
+
+pub fn profiles_path() -> PathBuf {
+  app_home_dir().join(PROFILE_YAML)
+}
+
+pub fn profiles_temp_path() -> PathBuf {
+  temp_dir().join(PROFILE_TEMP)
+}

src-tauri/src/utils/fetch.rs

@@ -1,102 +0,0 @@
-use crate::core::{ProfileExtra, ProfileResponse};
-use std::{
-  str::FromStr,
-  time::{SystemTime, UNIX_EPOCH},
-};
-
-/// parse the string
-fn parse_string<T: FromStr>(target: &str, key: &str) -> Option<T> {
-  match target.find(key) {
-    Some(idx) => {
-      let idx = idx + key.len();
-      let value = &target[idx..];
-      match match value.split(';').nth(0) {
-        Some(value) => value.trim().parse(),
-        None => value.trim().parse(),
-      } {
-        Ok(r) => Some(r),
-        Err(_) => None,
-      }
-    }
-    None => None,
-  }
-}
-
-/// fetch and parse the profile url
-/// maybe it contains some Subscription infomations, maybe not
-pub async fn fetch_profile(url: &str, with_proxy: bool) -> Result<ProfileResponse, String> {
-  let builder = reqwest::ClientBuilder::new();
-  let client = match with_proxy {
-    true => builder.build(),
-    false => builder.no_proxy().build(),
-  };
-
-  let resp = match client.unwrap().get(url).send().await {
-    Ok(res) => res,
-    Err(_) => return Err("failed to create https client".into()),
-  };
-
-  let header = resp.headers();
-
-  // parse the Subscription Userinfo
-  let extra = match header.get("Subscription-Userinfo") {
-    Some(value) => {
-      let sub_info = value.to_str().unwrap_or("");
-
-      Some(ProfileExtra {
-        upload: parse_string(sub_info, "upload=").unwrap_or(0),
-        download: parse_string(sub_info, "download=").unwrap_or(0),
-        total: parse_string(sub_info, "total=").unwrap_or(0),
-        expire: parse_string(sub_info, "expire=").unwrap_or(0),
-      })
-    }
-    None => None,
-  };
-
-  let file = {
-    let now = SystemTime::now()
-      .duration_since(UNIX_EPOCH)
-      .unwrap()
-      .as_secs();
-    format!("{}.yaml", now)
-  };
-
-  let name = match header.get("Content-Disposition") {
-    Some(name) => {
-      let name = name.to_str().unwrap();
-      parse_string::<String>(name, "filename=").unwrap_or(file.clone())
-    }
-    None => file.clone(),
-  };
-
-  // get the data
-  match resp.text_with_charset("utf-8").await {
-    Ok(data) => Ok(ProfileResponse {
-      file,
-      name,
-      data,
-      extra,
-    }),
-    Err(_) => Err("failed to parse the response data".into()),
-  }
-}
-
-#[test]
-fn test_parse_value() {
-  let test_1 = "upload=111; download=2222; total=3333; expire=444";
-  let test_2 = "attachment; filename=Clash.yaml";
-
-  assert_eq!(parse_string::<usize>(test_1, "upload=").unwrap(), 111);
-  assert_eq!(parse_string::<usize>(test_1, "download=").unwrap(), 2222);
-  assert_eq!(parse_string::<usize>(test_1, "total=").unwrap(), 3333);
-  assert_eq!(parse_string::<usize>(test_1, "expire=").unwrap(), 444);
-  assert_eq!(
-    parse_string::<String>(test_2, "filename=").unwrap(),
-    format!("Clash.yaml")
-  );
-
-  assert_eq!(parse_string::<usize>(test_1, "aaa="), None);
-  assert_eq!(parse_string::<usize>(test_1, "upload1="), None);
-  assert_eq!(parse_string::<usize>(test_1, "expire1="), None);
-  assert_eq!(parse_string::<usize>(test_2, "attachment="), None);
-}

src-tauri/src/utils/help.rs

@@ -0,0 +1,94 @@
+use nanoid::nanoid;
+use std::str::FromStr;
+use std::time::{SystemTime, UNIX_EPOCH};
+
+pub fn get_now() -> usize {
+  SystemTime::now()
+    .duration_since(UNIX_EPOCH)
+    .unwrap()
+    .as_secs() as _
+}
+
+const ALPHABET: [char; 62] = [
+  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
+  'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B',
+  'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
+  'V', 'W', 'X', 'Y', 'Z',
+];
+
+/// generate the uid
+pub fn get_uid(prefix: &str) -> String {
+  let id = nanoid!(11, &ALPHABET);
+  format!("{prefix}{id}")
+}
+
+/// parse the string
+/// xxx=123123; => 123123
+pub fn parse_str<T: FromStr>(target: &str, key: &str) -> Option<T> {
+  match target.find(key) {
+    Some(idx) => {
+      let idx = idx + key.len();
+      let value = &target[idx..];
+      match match value.split(';').nth(0) {
+        Some(value) => value.trim().parse(),
+        None => value.trim().parse(),
+      } {
+        Ok(r) => Some(r),
+        Err(_) => None,
+      }
+    }
+    None => None,
+  }
+}
+
+#[macro_export]
+macro_rules! log_if_err {
+  ($result: expr) => {
+    if let Err(err) = $result {
+      log::error!("{err}");
+    }
+  };
+}
+
+/// wrap the anyhow error
+/// transform the error to String
+#[macro_export]
+macro_rules! wrap_err {
+  ($stat: expr) => {
+    match $stat {
+      Ok(a) => Ok(a),
+      Err(err) => {
+        log::error!("{}", err.to_string());
+        Err(format!("{}", err.to_string()))
+      }
+    }
+  };
+}
+
+/// return the string literal error
+#[macro_export]
+macro_rules! ret_err {
+  ($str: literal) => {
+    return Err($str.into())
+  };
+}
+
+#[test]
+fn test_parse_value() {
+  let test_1 = "upload=111; download=2222; total=3333; expire=444";
+  let test_2 = "attachment; filename=Clash.yaml";
+
+  assert_eq!(parse_str::<usize>(test_1, "upload=").unwrap(), 111);
+  assert_eq!(parse_str::<usize>(test_1, "download=").unwrap(), 2222);
+  assert_eq!(parse_str::<usize>(test_1, "total=").unwrap(), 3333);
+  assert_eq!(parse_str::<usize>(test_1, "expire=").unwrap(), 444);
+  assert_eq!(
+    parse_str::<String>(test_2, "filename=").unwrap(),
+    format!("Clash.yaml")
+  );
+
+  assert_eq!(parse_str::<usize>(test_1, "aaa="), None);
+  assert_eq!(parse_str::<usize>(test_1, "upload1="), None);
+  assert_eq!(parse_str::<usize>(test_1, "expire1="), None);
+  assert_eq!(parse_str::<usize>(test_2, "attachment="), None);
+}

src-tauri/src/utils/init.rs

@@ -1,5 +1,3 @@
-extern crate serde_yaml;
-
 use crate::utils::{dirs, tmpl};
 use chrono::Local;
 use log::LevelFilter;
@@ -7,7 +5,7 @@ use log4rs::append::console::ConsoleAppender;
 use log4rs::append::file::FileAppender;
 use log4rs::config::{Appender, Config, Root};
 use log4rs::encode::pattern::PatternEncoder;
-use std::fs::{self, File};
+use std::fs;
 use std::io::Write;
 use std::path::PathBuf;
 use tauri::PackageInfo;
@@ -33,7 +31,7 @@ fn init_log(log_dir: &PathBuf) {
     .build(
       Root::builder()
         .appenders(["stdout", "file"])
-        .build(LevelFilter::Debug),
+        .build(LevelFilter::Info),
     )
     .unwrap();
 
@@ -48,13 +46,13 @@ fn init_config(app_dir: &PathBuf) -> std::io::Result<()> {
   let profile_path = app_dir.join("profiles.yaml");
 
   if !clash_path.exists() {
-    File::create(clash_path)?.write(tmpl::CLASH_CONFIG)?;
+    fs::File::create(clash_path)?.write(tmpl::CLASH_CONFIG)?;
   }
   if !verge_path.exists() {
-    File::create(verge_path)?.write(tmpl::VERGE_CONFIG)?;
+    fs::File::create(verge_path)?.write(tmpl::VERGE_CONFIG)?;
   }
   if !profile_path.exists() {
-    File::create(profile_path)?.write(tmpl::PROFILES_CONFIG)?;
+    fs::File::create(profile_path)?.write(tmpl::PROFILES_CONFIG)?;
   }
   Ok(())
 }
@@ -63,8 +61,8 @@ fn init_config(app_dir: &PathBuf) -> std::io::Result<()> {
 pub fn init_app(package_info: &PackageInfo) {
   // create app dir
   let app_dir = dirs::app_home_dir();
-  let log_dir = app_dir.join("logs");
-  let profiles_dir = app_dir.join("profiles");
+  let log_dir = dirs::app_logs_dir();
+  let profiles_dir = dirs::app_profiles_dir();
 
   let res_dir = dirs::app_resources_dir(package_info);
 

src-tauri/src/utils/mod.rs

@@ -1,6 +1,6 @@
 pub mod config;
 pub mod dirs;
-pub mod fetch;
+pub mod help;
 pub mod init;
 pub mod resolve;
 pub mod server;

src-tauri/src/utils/resolve.rs

@@ -1,5 +1,5 @@
 use super::{init, server};
-use crate::{core::Profiles, states};
+use crate::{core::Profiles, log_if_err, states};
 use tauri::{App, AppHandle, Manager};
 
 /// handle something when start app
@@ -21,20 +21,25 @@ pub fn resolve_setup(app: &App) {
   let mut verge = verge_state.0.lock().unwrap();
   let mut profiles = profiles_state.0.lock().unwrap();
 
-  if let Err(err) = clash.run_sidecar() {
-    log::error!("{}", err);
-  }
+  log_if_err!(clash.run_sidecar());
 
   *profiles = Profiles::read_file();
-  if let Err(err) = profiles.activate(&clash) {
-    log::error!("{}", err);
-  }
+
+  clash.set_window(app.get_window("main"));
+  log_if_err!(clash.activate(&profiles, true));
 
   verge.init_sysproxy(clash.info.port.clone());
-  verge.init_launch(app.package_info());
-  if let Err(err) = verge.sync_launch() {
-    log::error!("{}", err);
+  // enable tun mode
+  if verge.config.enable_tun_mode.clone().unwrap_or(false)
+    && verge.cur_sysproxy.is_some()
+    && verge.cur_sysproxy.as_ref().unwrap().enable
+  {
+    log::info!("enable tun mode");
+    clash.tun_mode(true).unwrap();
   }
+
+  verge.init_launch();
+  log_if_err!(verge.sync_launch());
 }
 
 /// reset system proxy
@@ -51,12 +56,12 @@ fn resolve_window(app: &App) {
 
   #[cfg(target_os = "windows")]
   {
-    use tauri_plugin_shadows::Shadows;
-    use tauri_plugin_vibrancy::Vibrancy;
+    use window_shadows::set_shadow;
+    use window_vibrancy::apply_blur;
 
     window.set_decorations(false).unwrap();
-    window.set_shadow(true);
-    window.apply_blur();
+    set_shadow(&window, true).unwrap();
+    apply_blur(&window).unwrap();
   }
 
   #[cfg(target_os = "macos")]

src-tauri/src/utils/tmpl.rs

@@ -14,7 +14,7 @@ secret: ""
 /// template for `profiles.yaml`
 pub const PROFILES_CONFIG: &[u8] = b"# Profiles Config for Clash Verge
 
-current: 0
+current: ~
 items: ~
 ";
 
@@ -32,11 +32,38 @@ system_proxy_bypass: localhost;127.*;10.*;192.168.*;<local>
 ";
 
 /// template for new a profile item
-pub const ITEM_CONFIG: &[u8] = b"# Profile Template for clash verge\n\n
-# proxies defination (optional, the same as clash)
-proxies:\n
-# proxy-groups (optional, the same as clash)
-proxy-groups:\n
-# rules (optional, the same as clash)
-rules:\n\n
+pub const ITEM_LOCAL: &str = "# Profile Template for clash verge
+
+proxies:
+
+proxy-groups:
+
+rules:
+";
+
+/// enhanced profile
+pub const ITEM_MERGE: &str = "# Merge Template for clash verge
+# The `Merge` format used to enhance profile
+
+prepend-rules:
+
+prepend-proxies:
+
+prepend-proxy-groups:
+
+append-rules:
+
+append-proxies:
+
+append-proxy-groups:
+";
+
+/// enhanced profile
+pub const ITEM_SCRIPT: &str = "// Should define the `main` function
+// The argument to this function is the clash config 
+// or the result of the previous handler
+// so you should return the config after processing
+function main(params) {
+  return params;
+}
 ";

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "clash-verge",
-    "version": "0.0.16"
+    "version": "0.0.21"
   },
   "build": {
     "distDir": "../dist",
@@ -27,7 +27,7 @@
       ],
       "resources": ["resources"],
       "externalBin": ["sidecar/clash"],
-      "copyright": "© 2021 zzzgydi All Rights Reserved",
+      "copyright": "© 2022 zzzgydi All Rights Reserved",
       "category": "DeveloperTool",
       "shortDescription": "A Clash GUI based on tauri.",
       "longDescription": "A Clash GUI based on tauri.",

src/components/layout/layout-traffic.tsx

@@ -3,22 +3,37 @@ import { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
+import { listen } from "@tauri-apps/api/event";
 import { ApiType } from "../../services/types";
 import { getInfomation } from "../../services/api";
 import { getVergeConfig } from "../../services/cmds";
-import { atomClashPort } from "../../states/setting";
-import parseTraffic from "../../utils/parse-traffic";
+import { atomClashPort } from "../../services/states";
+import useLogSetup from "./use-log-setup";
 import useTrafficGraph from "./use-traffic-graph";
+import parseTraffic from "../../utils/parse-traffic";
 
 const LayoutTraffic = () => {
   const portValue = useRecoilValue(atomClashPort);
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
   const { canvasRef, appendData, toggleStyle } = useTrafficGraph();
+  const [refresh, setRefresh] = useState({});
 
   // whether hide traffic graph
   const { data } = useSWR("getVergeConfig", getVergeConfig);
   const trafficGraph = data?.traffic_graph ?? true;
 
+  // setup log ws during layout
+  useLogSetup();
+
+  useEffect(() => {
+    let unlisten: () => void = null!;
+
+    // should reconnect the traffic ws
+    listen("restart_clash", () => setRefresh({})).then((fn) => (unlisten = fn));
+
+    return () => unlisten?.();
+  }, []);
+
   useEffect(() => {
     let ws: WebSocket | null = null;
 
@@ -34,7 +49,7 @@ const LayoutTraffic = () => {
     });
 
     return () => ws?.close();
-  }, [portValue]);
+  }, [portValue, refresh]);
 
   const [up, upUnit] = parseTraffic(traffic.up);
   const [down, downUnit] = parseTraffic(traffic.down);

src/components/layout/update-dialog.tsx

@@ -1,7 +1,5 @@
 import useSWR from "swr";
 import { useState } from "react";
-import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
-import { relaunch } from "@tauri-apps/api/process";
 import {
   Button,
   Dialog,
@@ -10,7 +8,10 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@mui/material";
-import { killSidecars } from "../../services/cmds";
+import { relaunch } from "@tauri-apps/api/process";
+import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
+import { killSidecars, restartSidecar } from "../../services/cmds";
+import Notice from "../base/base-notice";
 
 interface Props {
   open: boolean;
@@ -29,18 +30,19 @@ const UpdateDialog = (props: Props) => {
   const [uploading, setUploading] = useState(uploadingState);
 
   const onUpdate = async () => {
+    setUploading(true);
+    uploadingState = true;
+
     try {
-      setUploading(true);
-      uploadingState = true;
       await killSidecars();
       await installUpdate();
       await relaunch();
-    } catch (error) {
-      console.log(error);
-      window.alert("Failed to upload, please try again.");
+    } catch (err: any) {
+      await restartSidecar();
+      Notice.error(err?.message || err.toString());
     } finally {
-      setUploading(true);
-      uploadingState = true;
+      setUploading(false);
+      uploadingState = false;
     }
   };
 

src/components/layout/use-log-setup.ts

@@ -0,0 +1,49 @@
+import dayjs from "dayjs";
+import { useEffect } from "react";
+import { useSetRecoilState } from "recoil";
+import { listen } from "@tauri-apps/api/event";
+import { ApiType } from "../../services/types";
+import { getInfomation } from "../../services/api";
+import { atomLogData } from "../../services/states";
+
+const MAX_LOG_NUM = 1000;
+
+// setup the log websocket
+export default function useLogSetup() {
+  const setLogData = useSetRecoilState(atomLogData);
+
+  useEffect(() => {
+    let ws: WebSocket = null!;
+    let unlisten: () => void = null!;
+
+    const handler = (event: MessageEvent<any>) => {
+      const data = JSON.parse(event.data) as ApiType.LogItem;
+      const time = dayjs().format("MM-DD HH:mm:ss");
+      setLogData((l) => {
+        if (l.length >= MAX_LOG_NUM) l.shift();
+        return [...l, { ...data, time }];
+      });
+    };
+
+    (async () => {
+      const { server = "", secret = "" } = await getInfomation();
+
+      ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+      ws.addEventListener("message", handler);
+
+      // reconnect the websocket
+      unlisten = await listen("restart_clash", async () => {
+        const { server = "", secret = "" } = await getInfomation();
+
+        ws?.close();
+        ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+        ws.addEventListener("message", handler);
+      });
+    })();
+
+    return () => {
+      ws?.close();
+      unlisten?.();
+    };
+  }, []);
+}

src/components/profile/profile-edit.tsx

@@ -0,0 +1,104 @@
+import { mutate } from "swr";
+import { useEffect } from "react";
+import { useLockFn, useSetState } from "ahooks";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { CmdType } from "../../services/types";
+import { patchProfile } from "../../services/cmds";
+import Notice from "../base/base-notice";
+
+interface Props {
+  open: boolean;
+  itemData: CmdType.ProfileItem;
+  onClose: () => void;
+}
+
+// edit the profile item
+const ProfileEdit = (props: Props) => {
+  const { open, itemData, onClose } = props;
+  const [form, setForm] = useSetState({ ...itemData });
+
+  useEffect(() => {
+    if (itemData) {
+      setForm({ ...itemData });
+    }
+  }, [itemData]);
+
+  const onUpdate = useLockFn(async () => {
+    try {
+      const { uid } = itemData;
+      const { name, desc, url } = form;
+      await patchProfile(uid, { uid, name, desc, url });
+      mutate("getProfiles");
+      onClose();
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
+
+  const textFieldProps = {
+    fullWidth: true,
+    size: "small",
+    margin: "normal",
+    variant: "outlined",
+  } as const;
+
+  const type =
+    form.type ||
+    (form.url ? "remote" : form.file?.endsWith("js") ? "script" : "local");
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle sx={{ pb: 0.5 }}>Edit Profile</DialogTitle>
+
+      <DialogContent sx={{ width: 336, pb: 1 }}>
+        <TextField
+          {...textFieldProps}
+          disabled
+          label="Type"
+          value={type}
+          sx={{ input: { textTransform: "capitalize" } }}
+        />
+
+        <TextField
+          {...textFieldProps}
+          autoFocus
+          label="Name"
+          value={form.name}
+          onChange={(e) => setForm({ name: e.target.value })}
+        />
+
+        <TextField
+          {...textFieldProps}
+          label="Descriptions"
+          value={form.desc}
+          onChange={(e) => setForm({ desc: e.target.value })}
+        />
+
+        {type === "remote" && (
+          <TextField
+            {...textFieldProps}
+            label="Subscription Url"
+            value={form.url}
+            onChange={(e) => setForm({ url: e.target.value })}
+          />
+        )}
+      </DialogContent>
+
+      <DialogActions sx={{ px: 2, pb: 2 }}>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={onUpdate} variant="contained">
+          Update
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ProfileEdit;

src/components/profile/profile-item.tsx

@@ -1,5 +1,7 @@
-import React, { useRef, useState } from "react";
 import dayjs from "dayjs";
+import { useLockFn } from "ahooks";
+import { useSWRConfig } from "swr";
+import { useEffect, useState } from "react";
 import {
   alpha,
   Box,
@@ -11,13 +13,13 @@ import {
   MenuItem,
   Menu,
 } from "@mui/material";
-import { useSWRConfig } from "swr";
 import { RefreshRounded } from "@mui/icons-material";
 import { CmdType } from "../../services/types";
 import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
-import Notice from "../base/base-notice";
-import parseTraffic from "../../utils/parse-traffic";
 import relativeTime from "dayjs/plugin/relativeTime";
+import parseTraffic from "../../utils/parse-traffic";
+import ProfileEdit from "./profile-edit";
+import Notice from "../base/base-notice";
 
 dayjs.extend(relativeTime);
 
@@ -37,18 +39,20 @@ const round = keyframes`
   to { transform: rotate(360deg); }
 `;
 
+// save the state of each item loading
+const loadingCache: Record<string, boolean> = {};
+
 interface Props {
-  index: number;
   selected: boolean;
   itemData: CmdType.ProfileItem;
   onSelect: (force: boolean) => void;
 }
 
-const ProfileItem: React.FC<Props> = (props) => {
-  const { index, selected, itemData, onSelect } = props;
+const ProfileItem = (props: Props) => {
+  const { selected, itemData, onSelect } = props;
 
   const { mutate } = useSWRConfig();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(loadingCache[itemData.uid] ?? false);
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [position, setPosition] = useState({ left: 0, top: 0 });
 
@@ -65,12 +69,22 @@ const ProfileItem: React.FC<Props> = (props) => {
   const hasUrl = !!itemData.url;
   const hasExtra = !!extra; // only subscription url has extra info
 
+  useEffect(() => {
+    loadingCache[itemData.uid] = loading;
+  }, [itemData, loading]);
+
+  const [editOpen, setEditOpen] = useState(false);
+  const onEdit = () => {
+    setAnchorEl(null);
+    setEditOpen(true);
+  };
+
   const onView = async () => {
     setAnchorEl(null);
     try {
-      await viewProfile(index);
+      await viewProfile(itemData.uid);
     } catch (err: any) {
-      Notice.error(err.toString());
+      Notice.error(err?.message || err.toString());
     }
   };
 
@@ -84,38 +98,24 @@ const ProfileItem: React.FC<Props> = (props) => {
     if (loading) return;
     setLoading(true);
     try {
-      await updateProfile(index, withProxy);
-      mutate("getProfiles");
-    } catch (err: any) {
-      Notice.error(err.toString());
-    } finally {
+      await updateProfile(itemData.uid, withProxy);
       setLoading(false);
-    }
-  };
-
-  const deleteRef = useRef(false);
-  const onDelete = async () => {
-    setAnchorEl(null);
-    if (deleteRef.current) return;
-    deleteRef.current = true;
-    try {
-      await deleteProfile(index);
       mutate("getProfiles");
     } catch (err: any) {
-      Notice.error(err.toString());
-    } finally {
-      deleteRef.current = false;
+      setLoading(false);
+      Notice.error(err?.message || err.toString());
     }
   };
 
-  const handleContextMenu = (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
-    const { clientX, clientY } = event;
-    setPosition({ top: clientY, left: clientX });
-    setAnchorEl(event.currentTarget);
-    event.preventDefault();
-  };
+  const onDelete = useLockFn(async () => {
+    setAnchorEl(null);
+    try {
+      await deleteProfile(itemData.uid);
+      mutate("getProfiles");
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  });
 
   const boxStyle = {
     height: 26,
@@ -126,14 +126,16 @@ const ProfileItem: React.FC<Props> = (props) => {
 
   const urlModeMenu = [
     { label: "Select", handler: onForceSelect },
-    { label: "View", handler: onView },
+    { label: "Edit", handler: onEdit },
+    { label: "File", handler: onView },
     { label: "Update", handler: onUpdateWrapper(false) },
     { label: "Update(Proxy)", handler: onUpdateWrapper(true) },
     { label: "Delete", handler: onDelete },
   ];
   const fileModeMenu = [
     { label: "Select", handler: onForceSelect },
-    { label: "Edit", handler: onView },
+    { label: "Edit", handler: onEdit },
+    { label: "File", handler: onView },
     { label: "Delete", handler: onDelete },
   ];
 
@@ -168,7 +170,12 @@ const ProfileItem: React.FC<Props> = (props) => {
           return { bgcolor, color, "& h2": { color: h2color } };
         }}
         onClick={() => onSelect(false)}
-        onContextMenu={handleContextMenu}
+        onContextMenu={(event) => {
+          const { clientX, clientY } = event;
+          setPosition({ top: clientY, left: clientX });
+          setAnchorEl(event.currentTarget);
+          event.preventDefault();
+        }}
       >
         <Box display="flex" justifyContent="space-between">
           <Typography
@@ -253,6 +260,10 @@ const ProfileItem: React.FC<Props> = (props) => {
         onClose={() => setAnchorEl(null)}
         anchorPosition={position}
         anchorReference="anchorPosition"
+        onContextMenu={(e) => {
+          setAnchorEl(null);
+          e.preventDefault();
+        }}
       >
         {(hasUrl ? urlModeMenu : fileModeMenu).map((item) => (
           <MenuItem
@@ -264,6 +275,14 @@ const ProfileItem: React.FC<Props> = (props) => {
           </MenuItem>
         ))}
       </Menu>
+
+      {editOpen && (
+        <ProfileEdit
+          open={editOpen}
+          itemData={itemData}
+          onClose={() => setEditOpen(false)}
+        />
+      )}
     </>
   );
 };

src/components/profile/profile-more.tsx

@@ -0,0 +1,245 @@
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import {
+  alpha,
+  Box,
+  Chip,
+  styled,
+  Typography,
+  MenuItem,
+  Menu,
+} from "@mui/material";
+import { CmdType } from "../../services/types";
+import { viewProfile } from "../../services/cmds";
+import relativeTime from "dayjs/plugin/relativeTime";
+import ProfileEdit from "./profile-edit";
+import Notice from "../base/base-notice";
+import enhance from "../../services/enhance";
+
+dayjs.extend(relativeTime);
+
+const Wrapper = styled(Box)(({ theme }) => ({
+  width: "100%",
+  display: "block",
+  cursor: "pointer",
+  textAlign: "left",
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[2],
+  padding: "8px 16px",
+  boxSizing: "border-box",
+}));
+
+interface Props {
+  selected: boolean;
+  itemData: CmdType.ProfileItem;
+  onEnable: () => void;
+  onDisable: () => void;
+  onMoveTop: () => void;
+  onMoveEnd: () => void;
+  onDelete: () => void;
+  onEnhance: () => void;
+}
+
+// profile enhanced item
+const ProfileMore = (props: Props) => {
+  const {
+    selected,
+    itemData,
+    onEnable,
+    onDisable,
+    onMoveTop,
+    onMoveEnd,
+    onDelete,
+    onEnhance,
+  } = props;
+
+  const { uid, type } = itemData;
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+  const [editOpen, setEditOpen] = useState(false);
+  const [status, setStatus] = useState(enhance.status(uid));
+
+  // unlisten when unmount
+  useEffect(() => enhance.listen(uid, setStatus), [uid]);
+
+  // error during enhanced mode
+  const hasError = selected && status?.status === "error";
+
+  const onEdit = () => {
+    setAnchorEl(null);
+    setEditOpen(true);
+  };
+
+  const onView = async () => {
+    setAnchorEl(null);
+    try {
+      await viewProfile(itemData.uid);
+    } catch (err: any) {
+      Notice.error(err?.message || err.toString());
+    }
+  };
+
+  const closeWrapper = (fn: () => void) => () => {
+    setAnchorEl(null);
+    return fn();
+  };
+
+  const enableMenu = [
+    { label: "Disable", handler: closeWrapper(onDisable) },
+    { label: "Refresh", handler: closeWrapper(onEnhance) },
+    { label: "Edit", handler: onEdit },
+    { label: "File", handler: onView },
+    { label: "To Top", show: !hasError, handler: closeWrapper(onMoveTop) },
+    { label: "To End", show: !hasError, handler: closeWrapper(onMoveEnd) },
+    { label: "Delete", handler: closeWrapper(onDelete) },
+  ];
+
+  const disableMenu = [
+    { label: "Enable", handler: closeWrapper(onEnable) },
+    { label: "Edit", handler: onEdit },
+    { label: "File", handler: onView },
+    { label: "Delete", handler: closeWrapper(onDelete) },
+  ];
+
+  const boxStyle = {
+    height: 26,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    lineHeight: 1,
+  };
+
+  return (
+    <>
+      <Wrapper
+        sx={({ palette }) => {
+          // todo
+          // 区分 selected 和 error 和 mode 下各种颜色的排列组合
+          const { mode, primary, text, grey, error } = palette;
+          const key = `${mode}-${selected}`;
+          const bgkey = hasError ? `${mode}-err` : key;
+
+          const bgcolor = {
+            "light-true": alpha(primary.main, 0.15),
+            "light-false": palette.background.paper,
+            "dark-true": alpha(primary.main, 0.35),
+            "dark-false": alpha(grey[700], 0.35),
+            "light-err": alpha(error.main, 0.12),
+            "dark-err": alpha(error.main, 0.3),
+          }[bgkey]!;
+
+          const color = {
+            "light-true": text.secondary,
+            "light-false": text.secondary,
+            "dark-true": alpha(text.secondary, 0.6),
+            "dark-false": alpha(text.secondary, 0.6),
+          }[key]!;
+
+          const h2color = {
+            "light-true": primary.main,
+            "light-false": text.primary,
+            "dark-true": primary.light,
+            "dark-false": text.primary,
+          }[key]!;
+
+          return { bgcolor, color, "& h2": { color: h2color } };
+        }}
+        // onClick={() => onSelect(false)}
+        onContextMenu={(event) => {
+          const { clientX, clientY } = event;
+          setPosition({ top: clientY, left: clientX });
+          setAnchorEl(event.currentTarget);
+          event.preventDefault();
+        }}
+      >
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography
+            width="calc(100% - 52px)"
+            variant="h6"
+            component="h2"
+            noWrap
+            title={itemData.name}
+          >
+            {itemData.name}
+          </Typography>
+
+          <Chip
+            label={type}
+            color="primary"
+            size="small"
+            variant="outlined"
+            sx={{ textTransform: "capitalize" }}
+          />
+        </Box>
+
+        <Box sx={boxStyle}>
+          {hasError ? (
+            <Typography
+              noWrap
+              color="error"
+              sx={{ width: "calc(100% - 75px)" }}
+              title={status.message}
+            >
+              {status.message}
+            </Typography>
+          ) : (
+            <Typography
+              noWrap
+              title={itemData.desc}
+              sx={{ width: "calc(100% - 75px)" }}
+            >
+              {itemData.desc}
+            </Typography>
+          )}
+
+          <Typography
+            component="span"
+            title="updated time"
+            style={{ fontSize: 14 }}
+          >
+            {parseExpire(itemData.updated)}
+          </Typography>
+        </Box>
+      </Wrapper>
+
+      <Menu
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorPosition={position}
+        anchorReference="anchorPosition"
+        onContextMenu={(e) => {
+          setAnchorEl(null);
+          e.preventDefault();
+        }}
+      >
+        {(selected ? enableMenu : disableMenu)
+          .filter((item: any) => item.show !== false)
+          .map((item) => (
+            <MenuItem
+              key={item.label}
+              onClick={item.handler}
+              sx={{ minWidth: 133 }}
+            >
+              {item.label}
+            </MenuItem>
+          ))}
+      </Menu>
+
+      {editOpen && (
+        <ProfileEdit
+          open={editOpen}
+          itemData={itemData}
+          onClose={() => setEditOpen(false)}
+        />
+      )}
+    </>
+  );
+};
+
+function parseExpire(expire?: number) {
+  if (!expire) return "-";
+  return dayjs(expire * 1000).format("YYYY-MM-DD");
+}
+
+export default ProfileMore;

src/components/profile/profile-new.tsx

@@ -1,63 +1,105 @@
-import { useEffect, useState } from "react";
+import { useSWRConfig } from "swr";
+import { useLockFn, useSetState } from "ahooks";
 import {
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
   TextField,
 } from "@mui/material";
+import { createProfile } from "../../services/cmds";
 import Notice from "../base/base-notice";
 
 interface Props {
   open: boolean;
   onClose: () => void;
-  onSubmit: (name: string, desc: string) => void;
 }
 
+// create a new profile
+// remote / local file / merge / script
 const ProfileNew = (props: Props) => {
-  const { open, onClose, onSubmit } = props;
-  const [name, setName] = useState("");
-  const [desc, setDesc] = useState("");
+  const { open, onClose } = props;
 
-  const onCreate = () => {
-    if (!name.trim()) {
-      Notice.error("`Name` should not be null");
+  const { mutate } = useSWRConfig();
+  const [form, setForm] = useSetState({
+    name: "",
+    desc: "",
+    type: "remote",
+    url: "",
+  });
+
+  const onCreate = useLockFn(async () => {
+    if (!form.type) {
+      Notice.error("`Type` should not be null");
       return;
     }
-    onSubmit(name, desc);
-  };
 
-  useEffect(() => {
-    if (!open) {
-      setName("");
-      setDesc("");
+    try {
+      await createProfile({ ...form });
+      setForm({ name: "", desc: "", type: "remote", url: "" });
+      mutate("getProfiles");
+      onClose();
+    } catch (err: any) {
+      Notice.error(err.message || err.toString());
     }
-  }, [open]);
+  });
+
+  const textFieldProps = {
+    fullWidth: true,
+    size: "small",
+    margin: "normal",
+    variant: "outlined",
+  } as const;
 
   return (
     <Dialog open={open} onClose={onClose}>
-      <DialogTitle>Create Profile</DialogTitle>
-      <DialogContent sx={{ width: 320, pb: 0.5 }}>
+      <DialogTitle sx={{ pb: 0.5 }}>Create Profile</DialogTitle>
+
+      <DialogContent sx={{ width: 336, pb: 1 }}>
         <TextField
+          {...textFieldProps}
           autoFocus
-          fullWidth
           label="Name"
-          margin="dense"
-          variant="outlined"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
+          value={form.name}
+          onChange={(e) => setForm({ name: e.target.value })}
         />
 
+        <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
+          <InputLabel>Type</InputLabel>
+          <Select
+            label="Type"
+            value={form.type}
+            onChange={(e) => setForm({ type: e.target.value })}
+          >
+            <MenuItem value="remote">Remote</MenuItem>
+            <MenuItem value="local">Local</MenuItem>
+            <MenuItem value="script">Script</MenuItem>
+            <MenuItem value="merge">Merge</MenuItem>
+          </Select>
+        </FormControl>
+
         <TextField
-          fullWidth
+          {...textFieldProps}
           label="Descriptions"
-          margin="normal"
-          variant="outlined"
-          value={desc}
-          onChange={(e) => setDesc(e.target.value)}
+          value={form.desc}
+          onChange={(e) => setForm({ desc: e.target.value })}
         />
+
+        {form.type === "remote" && (
+          <TextField
+            {...textFieldProps}
+            label="Subscription Url"
+            value={form.url}
+            onChange={(e) => setForm({ url: e.target.value })}
+          />
+        )}
       </DialogContent>
+
       <DialogActions sx={{ px: 2, pb: 2 }}>
         <Button onClick={onClose}>Cancel</Button>
         <Button onClick={onCreate} variant="contained">

src/components/proxy/proxy-global.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from "react";
+import { useSWRConfig } from "swr";
+import { useLockFn } from "ahooks";
+import { Virtuoso } from "react-virtuoso";
+import { Box, IconButton, TextField } from "@mui/material";
+import {
+  MyLocationRounded,
+  NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
+} from "@mui/icons-material";
+import { ApiType } from "../../services/types";
+import { updateProxy } from "../../services/api";
+import delayManager from "../../services/delay";
+import useFilterProxy from "./use-filter-proxy";
+import ProxyItem from "./proxy-item";
+
+interface Props {
+  groupName: string;
+  curProxy?: string;
+  proxies: ApiType.ProxyItem[];
+}
+
+const ProxyGlobal = (props: Props) => {
+  const { groupName, curProxy, proxies } = props;
+
+  const { mutate } = useSWRConfig();
+  const [now, setNow] = useState(curProxy || "DIRECT");
+  const [showType, setShowType] = useState(true);
+  const [showFilter, setShowFilter] = useState(false);
+  const [filterText, setFilterText] = useState("");
+
+  const virtuosoRef = useRef<any>();
+  const filterProxies = useFilterProxy(proxies, groupName, filterText);
+
+  const onChangeProxy = useLockFn(async (name: string) => {
+    await updateProxy("GLOBAL", name);
+    mutate("getProxies");
+    setNow(name);
+  });
+
+  const onLocation = (smooth = true) => {
+    const index = filterProxies.findIndex((p) => p.name === now);
+
+    if (index >= 0) {
+      virtuosoRef.current?.scrollToIndex?.({
+        index,
+        align: "center",
+        behavior: smooth ? "smooth" : "auto",
+      });
+    }
+  };
+
+  const onCheckAll = useLockFn(async () => {
+    const names = filterProxies.map((p) => p.name);
+
+    await delayManager.checkListDelay(
+      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      () => mutate("getProxies")
+    );
+
+    mutate("getProxies");
+  });
+
+  useEffect(() => onLocation(false), [groupName]);
+
+  useEffect(() => {
+    if (!showFilter) setFilterText("");
+  }, [showFilter]);
+
+  useEffect(() => {
+    if (groupName === "DIRECT") setNow("DIRECT");
+    if (groupName === "GLOBAL") setNow(curProxy || "DIRECT");
+  }, [groupName, curProxy]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          px: 3,
+          my: 0.5,
+          display: "flex",
+          alignItems: "center",
+          button: { mr: 0.5 },
+        }}
+      >
+        <IconButton
+          size="small"
+          title="location"
+          onClick={() => onLocation(true)}
+        >
+          <MyLocationRounded />
+        </IconButton>
+
+        <IconButton size="small" title="check" onClick={onCheckAll}>
+          <NetworkCheckRounded />
+        </IconButton>
+
+        <IconButton
+          size="small"
+          title="check"
+          onClick={() => setShowType(!showType)}
+        >
+          {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+        </IconButton>
+
+        <IconButton
+          size="small"
+          title="check"
+          onClick={() => setShowFilter(!showFilter)}
+        >
+          {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
+        </IconButton>
+
+        {showFilter && (
+          <TextField
+            autoFocus
+            hiddenLabel
+            value={filterText}
+            size="small"
+            variant="outlined"
+            placeholder="Filter conditions"
+            onChange={(e) => setFilterText(e.target.value)}
+            sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+          />
+        )}
+      </Box>
+
+      <Virtuoso
+        ref={virtuosoRef}
+        style={{ height: "calc(100% - 40px)" }}
+        totalCount={filterProxies.length}
+        itemContent={(index) => (
+          <ProxyItem
+            groupName={groupName}
+            proxy={filterProxies[index]}
+            selected={filterProxies[index].name === now}
+            showType={showType}
+            onClick={onChangeProxy}
+            sx={{ py: 0, px: 2 }}
+          />
+        )}
+      />
+    </>
+  );
+};
+
+export default ProxyGlobal;

src/components/proxy/proxy-group.tsx

@@ -1,5 +1,6 @@
-import { useRef, useState } from "react";
-import { useSWRConfig } from "swr";
+import useSWR, { useSWRConfig } from "swr";
+import { useEffect, useRef, useState } from "react";
+import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
 import {
   Box,
@@ -9,6 +10,7 @@ import {
   List,
   ListItem,
   ListItemText,
+  TextField,
 } from "@mui/material";
 import {
   SendRounded,
@@ -16,11 +18,16 @@ import {
   ExpandMoreRounded,
   MyLocationRounded,
   NetworkCheckRounded,
+  FilterAltRounded,
+  FilterAltOffRounded,
+  VisibilityRounded,
+  VisibilityOffRounded,
 } from "@mui/icons-material";
 import { ApiType } from "../../services/types";
 import { updateProxy } from "../../services/api";
 import { getProfiles, patchProfile } from "../../services/cmds";
 import delayManager from "../../services/delay";
+import useFilterProxy from "./use-filter-proxy";
 import ProxyItem from "./proxy-item";
 
 interface Props {
@@ -31,18 +38,20 @@ const ProxyGroup = ({ group }: Props) => {
   const { mutate } = useSWRConfig();
   const [open, setOpen] = useState(false);
   const [now, setNow] = useState(group.now);
+  const [showType, setShowType] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
+  const [filterText, setFilterText] = useState("");
 
-  const virtuosoRef = useRef<any>();
   const proxies = group.all ?? [];
+  const virtuosoRef = useRef<any>();
+  const filterProxies = useFilterProxy(proxies, group.name, filterText);
 
-  const selectLockRef = useRef(false);
-  const onSelect = async (name: string) => {
+  const { data: profiles } = useSWR("getProfiles", getProfiles);
+
+  const onChangeProxy = useLockFn(async (name: string) => {
     // Todo: support another proxy group type
     if (group.type !== "Selector") return;
 
-    if (selectLockRef.current) return;
-    selectLockRef.current = true;
-
     const oldValue = now;
     try {
       setNow(name);
@@ -50,13 +59,10 @@ const ProxyGroup = ({ group }: Props) => {
     } catch {
       setNow(oldValue);
       return; // do not update profile
-    } finally {
-      selectLockRef.current = false;
     }
 
     try {
-      const profiles = await getProfiles();
-      const profile = profiles.items![profiles.current!]!;
+      const profile = profiles?.items?.find((p) => p.uid === profiles.current);
       if (!profile) return;
       if (!profile.selected) profile.selected = [];
 
@@ -69,46 +75,46 @@ const ProxyGroup = ({ group }: Props) => {
       } else {
         profile.selected[index] = { name: group.name, now: name };
       }
-      await patchProfile(profiles.current!, profile);
+      await patchProfile(profiles!.current!, profile);
     } catch (err) {
       console.error(err);
     }
-  };
+  });
 
-  const onLocation = () => {
-    const index = proxies.findIndex((p) => p.name === now);
+  const onLocation = (smooth = true) => {
+    const index = filterProxies.findIndex((p) => p.name === now);
 
     if (index >= 0) {
       virtuosoRef.current?.scrollToIndex?.({
         index,
         align: "center",
-        behavior: "smooth",
+        behavior: smooth ? "smooth" : "auto",
       });
     }
   };
 
-  const checkLockRef = useRef(false);
-  const onCheckAll = async () => {
-    if (checkLockRef.current) return;
-    checkLockRef.current = true;
+  const onCheckAll = useLockFn(async () => {
+    const names = filterProxies.map((p) => p.name);
+    const groupName = group.name;
 
-    // rerender quickly
-    if (proxies.length) setTimeout(() => mutate("getProxies"), 500);
+    await delayManager.checkListDelay(
+      { names, groupName, skipNum: 8, maxTimeout: 600 },
+      () => mutate("getProxies")
+    );
 
-    let names = proxies.map((p) => p.name);
-    while (names.length) {
-      const list = names.slice(0, 8);
-      names = names.slice(8);
+    mutate("getProxies");
+  });
 
-      await Promise.all(
-        list.map((n) => delayManager.checkDelay(n, group.name))
-      );
+  useEffect(() => {
+    if (!showFilter) setFilterText("");
+  }, [showFilter]);
 
-      mutate("getProxies");
+  // auto scroll to current index
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => onLocation(false), 5);
     }
-
-    checkLockRef.current = false;
-  };
+  }, [open]);
 
   return (
     <>
@@ -130,27 +136,84 @@ const ProxyGroup = ({ group }: Props) => {
       </ListItem>
 
       <Collapse in={open} timeout="auto" unmountOnExit>
-        <Box sx={{ pl: 4, pr: 3, my: 0.5 }}>
-          <IconButton size="small" title="location" onClick={onLocation}>
+        <Box
+          sx={{
+            pl: 4,
+            pr: 3,
+            my: 0.5,
+            display: "flex",
+            alignItems: "center",
+            button: { mr: 0.5 },
+          }}
+        >
+          <IconButton
+            size="small"
+            title="location"
+            onClick={() => onLocation(true)}
+          >
             <MyLocationRounded />
           </IconButton>
+
           <IconButton size="small" title="check" onClick={onCheckAll}>
             <NetworkCheckRounded />
           </IconButton>
+
+          <IconButton
+            size="small"
+            title="check"
+            onClick={() => setShowType(!showType)}
+          >
+            {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+          </IconButton>
+
+          <IconButton
+            size="small"
+            title="check"
+            onClick={() => setShowFilter(!showFilter)}
+          >
+            {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
+          </IconButton>
+
+          {showFilter && (
+            <TextField
+              autoFocus
+              hiddenLabel
+              value={filterText}
+              size="small"
+              variant="outlined"
+              placeholder="Filter conditions"
+              onChange={(e) => setFilterText(e.target.value)}
+              sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+            />
+          )}
         </Box>
 
-        {proxies.length >= 10 ? (
+        {!filterProxies.length && (
+          <Box
+            sx={{
+              py: 3,
+              fontSize: 18,
+              textAlign: "center",
+              color: "text.secondary",
+            }}
+          >
+            Empty
+          </Box>
+        )}
+
+        {filterProxies.length >= 10 ? (
           <Virtuoso
             ref={virtuosoRef}
             style={{ height: "320px", marginBottom: "4px" }}
-            totalCount={proxies.length}
+            totalCount={filterProxies.length}
             itemContent={(index) => (
               <ProxyItem
                 groupName={group.name}
-                proxy={proxies[index]}
-                selected={proxies[index].name === now}
+                proxy={filterProxies[index]}
+                selected={filterProxies[index].name === now}
+                showType={showType}
                 sx={{ py: 0, pl: 4 }}
-                onClick={onSelect}
+                onClick={onChangeProxy}
               />
             )}
           />
@@ -160,14 +223,15 @@ const ProxyGroup = ({ group }: Props) => {
             disablePadding
             sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
           >
-            {proxies.map((proxy) => (
+            {filterProxies.map((proxy) => (
               <ProxyItem
                 key={proxy.name}
                 groupName={group.name}
                 proxy={proxy}
                 selected={proxy.name === now}
+                showType={showType}
                 sx={{ py: 0, pl: 4 }}
-                onClick={onSelect}
+                onClick={onChangeProxy}
               />
             ))}
           </List>

src/components/proxy/proxy-item.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { CheckCircleOutlineRounded } from "@mui/icons-material";
 import {
   alpha,
@@ -18,6 +18,7 @@ interface Props {
   groupName: string;
   proxy: ApiType.ProxyItem;
   selected: boolean;
+  showType?: boolean;
   sx?: SxProps<Theme>;
   onClick?: (name: string) => void;
 }
@@ -27,8 +28,20 @@ const Widget = styled(Box)(() => ({
   fontSize: 14,
 }));
 
+const TypeBox = styled(Box)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.text.secondary, 0.36),
+  color: alpha(theme.palette.text.secondary, 0.42),
+  borderRadius: 4,
+  fontSize: 10,
+  marginLeft: 4,
+  padding: "0 2px",
+  lineHeight: 1.25,
+}));
+
 const ProxyItem = (props: Props) => {
-  const { groupName, proxy, selected, sx, onClick } = props;
+  const { groupName, proxy, selected, showType = true, sx, onClick } = props;
   const [delay, setDelay] = useState(-1);
 
   useEffect(() => {
@@ -37,14 +50,19 @@ const ProxyItem = (props: Props) => {
     }
   }, [proxy]);
 
+  const delayRef = useRef(false);
   const onDelay = (e: any) => {
     e.preventDefault();
     e.stopPropagation();
 
+    if (delayRef.current) return;
+    delayRef.current = true;
+
     delayManager
       .checkDelay(proxy.name, groupName)
       .then((result) => setDelay(result))
-      .catch(() => setDelay(1e6));
+      .catch(() => setDelay(1e6))
+      .finally(() => (delayRef.current = false));
   };
 
   return (
@@ -78,7 +96,17 @@ const ProxyItem = (props: Props) => {
           },
         ]}
       >
-        <ListItemText title={proxy.name} secondary={proxy.name} />
+        <ListItemText
+          title={proxy.name}
+          secondary={
+            <>
+              {proxy.name}
+
+              {showType && <TypeBox component="span">{proxy.type}</TypeBox>}
+              {showType && proxy.udp && <TypeBox component="span">UDP</TypeBox>}
+            </>
+          }
+        />
 
         <ListItemIcon
           sx={{ justifyContent: "flex-end", color: "primary.main" }}

src/components/proxy/use-filter-proxy.ts

@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+import { ApiType } from "../../services/types";
+import delayManager from "../../services/delay";
+
+const regex1 = /delay([=<>])(\d+|timeout|error)/i;
+const regex2 = /type=(.*)/i;
+
+/**
+ * filter the proxy
+ * according to the regular conditions
+ */
+export default function useFilterProxy(
+  proxies: ApiType.ProxyItem[],
+  groupName: string,
+  filterText: string
+) {
+  return useMemo(() => {
+    if (!filterText) return proxies;
+
+    const res1 = regex1.exec(filterText);
+    if (res1) {
+      const symbol = res1[1];
+      const symbol2 = res1[2].toLowerCase();
+      const value =
+        symbol2 === "error" ? 1e5 : symbol2 === "timeout" ? 3000 : +symbol2;
+
+      return proxies.filter((p) => {
+        const delay = delayManager.getDelay(p.name, groupName);
+
+        if (delay < 0) return false;
+        if (symbol === "=" && symbol2 === "error") return delay >= 1e5;
+        if (symbol === "=" && symbol2 === "timeout")
+          return delay < 1e5 && delay >= 3000;
+        if (symbol === "=") return delay == value;
+        if (symbol === "<") return delay <= value;
+        if (symbol === ">") return delay >= value;
+        return false;
+      });
+    }
+
+    const res2 = regex2.exec(filterText);
+    if (res2) {
+      const type = res2[1].toLowerCase();
+      return proxies.filter((p) => p.type.toLowerCase().includes(type));
+    }
+
+    return proxies.filter((p) => p.name.includes(filterText.trim()));
+  }, [proxies, groupName, filterText]);
+}

src/components/setting/guard-state.tsx

@@ -5,6 +5,7 @@ interface Props<Value> {
   value?: Value;
   valueProps?: string;
   onChangeProps?: string;
+  waitTime?: number;
   onChange?: (value: Value) => void;
   onFormat?: (...args: any[]) => Value;
   onGuard?: (value: Value, oldValue: Value) => Promise<void>;
@@ -18,6 +19,7 @@ function GuardState<T>(props: Props<T>) {
     children,
     valueProps = "value",
     onChangeProps = "onChange",
+    waitTime = 0, // debounce wait time default 0
     onGuard = noop,
     onCatch = noop,
     onChange = noop,
@@ -25,34 +27,61 @@ function GuardState<T>(props: Props<T>) {
   } = props;
 
   const lockRef = useRef(false);
+  const saveRef = useRef(value);
+  const lastRef = useRef(0);
+  const timeRef = useRef<any>();
 
-  if (isValidElement(children)) {
-    const childProps = { ...children.props };
-
-    childProps[valueProps] = value;
-    childProps[onChangeProps] = async (...args: any[]) => {
-      // 多次操作无效
-      if (lockRef.current) return;
-
-      lockRef.current = true;
-      const oldValue = value;
-
-      try {
-        const newValue = (onFormat as any)(...args);
-        // 先在ui上响应操作
-        onChange(newValue);
-        await onGuard(newValue, oldValue!);
-      } catch (err: any) {
-        // 状态回退
-        onChange(oldValue!);
-        onCatch(err);
-      }
-      lockRef.current = false;
-    };
-    return cloneElement(children, childProps);
+  if (!isValidElement(children)) {
+    return children as any;
   }
 
-  return children as any;
+  const childProps = { ...children.props };
+
+  childProps[valueProps] = value;
+  childProps[onChangeProps] = async (...args: any[]) => {
+    // 多次操作无效
+    if (lockRef.current) return;
+
+    lockRef.current = true;
+
+    try {
+      const newValue = (onFormat as any)(...args);
+      // 先在ui上响应操作
+      onChange(newValue);
+
+      const now = Date.now();
+
+      // save the old value
+      if (waitTime <= 0 || now - lastRef.current >= waitTime) {
+        saveRef.current = value;
+      }
+
+      lastRef.current = now;
+
+      if (waitTime <= 0) {
+        await onGuard(newValue, value!);
+      } else {
+        // debounce guard
+        clearTimeout(timeRef.current);
+
+        timeRef.current = setTimeout(async () => {
+          try {
+            await onGuard(newValue, saveRef.current!);
+          } catch (err: any) {
+            // 状态回退
+            onChange(saveRef.current!);
+            onCatch(err);
+          }
+        }, waitTime);
+      }
+    } catch (err: any) {
+      // 状态回退
+      onChange(saveRef.current!);
+      onCatch(err);
+    }
+    lockRef.current = false;
+  };
+  return cloneElement(children, childProps);
 }
 
 export default GuardState;

src/components/setting/setting-clash.tsx

@@ -1,7 +1,5 @@
-import { useEffect, useState } from "react";
-import { useDebounceFn } from "ahooks";
-import { useSetRecoilState } from "recoil";
 import useSWR, { useSWRConfig } from "swr";
+import { useSetRecoilState } from "recoil";
 import {
   ListItemText,
   TextField,
@@ -11,7 +9,7 @@ import {
   Typography,
 } from "@mui/material";
 import { ApiType } from "../../services/types";
-import { atomClashPort } from "../../states/setting";
+import { atomClashPort } from "../../services/states";
 import { patchClashConfig } from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
 import { getClashConfig, getVersion, updateConfigs } from "../../services/api";
@@ -25,18 +23,16 @@ interface Props {
 const SettingClash = ({ onError }: Props) => {
   const { mutate } = useSWRConfig();
   const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
+  const { data: versionData } = useSWR("getVersion", getVersion);
 
   const {
     ipv6 = false,
     "allow-lan": allowLan = false,
     "log-level": logLevel = "silent",
-    "mixed-port": thePort = 0,
+    "mixed-port": mixedPort = 0,
   } = clashConfig ?? {};
 
-  const setPort = useSetRecoilState(atomClashPort);
-  const [mixedPort, setMixedPort] = useState(thePort);
-
-  useEffect(() => setMixedPort(thePort), [thePort]);
+  const setGlobalClashPort = useSetRecoilState(atomClashPort);
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
@@ -47,35 +43,25 @@ const SettingClash = ({ onError }: Props) => {
     await patchClashConfig(patch);
   };
 
-  // restart clash when port is changed
-  const { run: onUpdatePort } = useDebounceFn(
-    async (port: number) => {
-      try {
-        if (port < 1000) {
-          throw new Error("The port should not < 1000");
-        }
-        if (port > 65536) {
-          throw new Error("The port should not > 65536");
-        }
-        await patchClashConfig({ "mixed-port": port });
-        onChangeData({ "mixed-port": port });
-        setPort(port);
-        Notice.success("Change Clash port successfully!");
-      } catch (err: any) {
-        setMixedPort(thePort); // back to old port value
-        Notice.error(err.message ?? err.toString());
-      }
-    },
-    { wait: 1000 }
-  );
+  const onUpdatePort = async (port: number) => {
+    if (port < 1000) {
+      throw new Error("The port should not < 1000");
+    }
+    if (port > 65536) {
+      throw new Error("The port should not > 65536");
+    }
+    await patchClashConfig({ "mixed-port": port });
+    setGlobalClashPort(port);
+    Notice.success("Change Clash port successfully!");
+
+    // update the config
+    mutate("getClashConfig");
+  };
 
   // get clash core version
-  const [clashVer, setClashVer] = useState("");
-  useEffect(() => {
-    getVersion().then(({ premium, version }) => {
-      setClashVer(premium ? `${version} Premium` : version);
-    });
-  }, []);
+  const clashVer = versionData?.premium
+    ? `${versionData.version} Premium`
+    : versionData?.version || "-";
 
   return (
     <SettingList title="Clash Setting">
@@ -130,9 +116,11 @@ const SettingClash = ({ onError }: Props) => {
         <ListItemText primary="Mixed Port" />
         <GuardState
           value={mixedPort!}
+          onCatch={onError}
           onFormat={(e: any) => +e.target.value?.replace(/\D+/, "")}
-          onChange={setMixedPort}
+          onChange={(e) => onChangeData({ "mixed-port": e })}
           onGuard={onUpdatePort}
+          waitTime={800}
         >
           <TextField autoComplete="off" size="small" sx={{ width: 120 }} />
         </GuardState>

src/components/setting/setting-system.tsx

@@ -15,6 +15,7 @@ const SettingSystem = ({ onError }: Props) => {
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
   const {
+    enable_tun_mode = false,
     enable_auto_launch = false,
     enable_system_proxy = false,
     system_proxy_bypass = "",
@@ -28,6 +29,20 @@ const SettingSystem = ({ onError }: Props) => {
 
   return (
     <SettingList title="System Setting">
+      <SettingItem>
+        <ListItemText primary="Tun Mode" />
+        <GuardState
+          value={enable_tun_mode}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_tun_mode: e })}
+          onGuard={(e) => patchVergeConfig({ enable_tun_mode: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
       <SettingItem>
         <ListItemText primary="Auto Launch" />
         <GuardState
@@ -91,6 +106,7 @@ const SettingSystem = ({ onError }: Props) => {
             onFormat={(e: any) => e.target.value}
             onChange={(e) => onChangeData({ system_proxy_bypass: e })}
             onGuard={(e) => patchVergeConfig({ system_proxy_bypass: e })}
+            waitTime={1000}
           >
             <TextField autoComplete="off" size="small" sx={{ width: 120 }} />
           </GuardState>

src/main.tsx

@@ -6,6 +6,9 @@ import ReactDOM from "react-dom";
 import { RecoilRoot } from "recoil";
 import { BrowserRouter } from "react-router-dom";
 import Layout from "./pages/_layout";
+import enhance from "./services/enhance";
+
+enhance.setup();
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/logs.tsx

@@ -1,38 +1,12 @@
-import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
 import { Button, Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
-import { ApiType } from "../services/types";
-import { getInfomation } from "../services/api";
+import { atomLogData } from "../services/states";
 import BasePage from "../components/base/base-page";
 import LogItem from "../components/log/log-item";
 
-let logCache: ApiType.LogItem[] = [];
-
 const LogPage = () => {
-  const [logData, setLogData] = useState(logCache);
-
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-
-    getInfomation().then((result) => {
-      const { server = "", secret = "" } = result;
-      ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
-
-      ws.addEventListener("message", (event) => {
-        const data = JSON.parse(event.data) as ApiType.LogItem;
-        const time = dayjs().format("MM-DD HH:mm:ss");
-        setLogData((l) => (logCache = [...l, { ...data, time }]));
-      });
-    });
-
-    return () => ws?.close();
-  }, []);
-
-  const onClear = () => {
-    setLogData([]);
-    logCache = [];
-  };
+  const [logData, setLogData] = useRecoilState(atomLogData);
 
   return (
     <BasePage
@@ -43,7 +17,7 @@ const LogPage = () => {
           size="small"
           sx={{ mt: 1 }}
           variant="contained"
-          onClick={onClear}
+          onClick={() => setLogData([])}
         >
           Clear
         </Button>

src/pages/profiles.tsx

@@ -1,33 +1,56 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useRef, useState } from "react";
+import { useLockFn } from "ahooks";
+import { useEffect, useMemo, useState } from "react";
 import { Box, Button, Grid, TextField } from "@mui/material";
 import {
   getProfiles,
-  selectProfile,
   patchProfile,
+  deleteProfile,
+  selectProfile,
   importProfile,
-  newProfile,
+  enhanceProfiles,
+  changeProfileChain,
 } from "../services/cmds";
 import { getProxies, updateProxy } from "../services/api";
-import noop from "../utils/noop";
 import Notice from "../components/base/base-notice";
 import BasePage from "../components/base/base-page";
-import ProfileItem from "../components/profile/profile-item";
 import ProfileNew from "../components/profile/profile-new";
+import ProfileItem from "../components/profile/profile-item";
+import ProfileMore from "../components/profile/profile-more";
 
 const ProfilePage = () => {
+  const { mutate } = useSWRConfig();
+
   const [url, setUrl] = useState("");
   const [disabled, setDisabled] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
 
-  const { mutate } = useSWRConfig();
   const { data: profiles = {} } = useSWR("getProfiles", getProfiles);
 
+  const { regularItems, enhanceItems } = useMemo(() => {
+    const items = profiles.items || [];
+    const chain = profiles.chain || [];
+
+    const type1 = ["local", "remote"];
+    const type2 = ["merge", "script"];
+
+    const regularItems = items.filter((i) => type1.includes(i.type!));
+    const restItems = items.filter((i) => type2.includes(i.type!));
+
+    const restMap = Object.fromEntries(restItems.map((i) => [i.uid, i]));
+
+    const enhanceItems = chain
+      .map((i) => restMap[i]!)
+      .concat(restItems.filter((i) => !chain.includes(i.uid)));
+
+    return { regularItems, enhanceItems };
+  }, [profiles]);
+
   useEffect(() => {
     if (profiles.current == null) return;
-    if (!profiles.items) profiles.items = [];
 
     const current = profiles.current;
-    const profile = profiles.items![current];
+    const profile = regularItems.find((p) => p.uid === current);
     if (!profile) return;
 
     setTimeout(async () => {
@@ -62,7 +85,7 @@ const ProfilePage = () => {
       // update proxies cache
       if (hasChange) mutate("getProxies", getProxies());
     }, 100);
-  }, [profiles]);
+  }, [profiles, regularItems]);
 
   const onImport = async () => {
     if (!url) return;
@@ -71,9 +94,17 @@ const ProfilePage = () => {
 
     try {
       await importProfile(url);
-      mutate("getProfiles", getProfiles());
-      if (!profiles.items?.length) selectProfile(0).catch(noop);
       Notice.success("Successfully import profile.");
+
+      getProfiles().then((newProfiles) => {
+        mutate("getProfiles", newProfiles);
+
+        if (!newProfiles.current && newProfiles.items?.length) {
+          const current = newProfiles.items[0].uid;
+          selectProfile(current);
+          mutate("getProfiles", { ...newProfiles, current }, true);
+        }
+      });
     } catch {
       Notice.error("Failed to import profile.");
     } finally {
@@ -81,43 +112,70 @@ const ProfilePage = () => {
     }
   };
 
-  const lockRef = useRef(false);
-  const onSelect = async (index: number, force: boolean) => {
-    if (lockRef.current) return;
-    if (!force && index === profiles.current) return;
-    lockRef.current = true;
+  const onSelect = useLockFn(async (uid: string, force: boolean) => {
+    if (!force && uid === profiles.current) return;
+
     try {
-      await selectProfile(index);
-      mutate("getProfiles", { ...profiles, current: index }, true);
+      await selectProfile(uid);
+      mutate("getProfiles", { ...profiles, current: uid }, true);
     } catch (err: any) {
-      err && Notice.error(err.toString());
-    } finally {
-      lockRef.current = false;
+      Notice.error(err?.message || err.toString());
     }
-  };
+  });
 
-  const lockNewRef = useRef(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const onNew = async (name: string, desc: string) => {
-    if (lockNewRef.current) return;
-    lockNewRef.current = true;
+  /** enhanced profile mode */
 
+  const chain = profiles.chain || [];
+
+  const onEnhance = useLockFn(enhanceProfiles);
+
+  const onEnhanceEnable = useLockFn(async (uid: string) => {
+    if (chain.includes(uid)) return;
+
+    const newChain = [...chain, uid];
+    await changeProfileChain(newChain);
+    mutate("getProfiles", { ...profiles, chain: newChain }, true);
+  });
+
+  const onEnhanceDisable = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = chain.filter((i) => i !== uid);
+    await changeProfileChain(newChain);
+    mutate("getProfiles", { ...profiles, chain: newChain }, true);
+  });
+
+  const onEnhanceDelete = useLockFn(async (uid: string) => {
     try {
-      await newProfile(name, desc);
-      setDialogOpen(false);
+      await onEnhanceDisable(uid);
+      await deleteProfile(uid);
       mutate("getProfiles");
     } catch (err: any) {
-      err && Notice.error(err.toString());
-    } finally {
-      lockNewRef.current = false;
+      Notice.error(err?.message || err.toString());
     }
-  };
+  });
+
+  const onMoveTop = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = [uid].concat(chain.filter((i) => i !== uid));
+    await changeProfileChain(newChain);
+    mutate("getProfiles", { ...profiles, chain: newChain }, true);
+  });
+
+  const onMoveEnd = useLockFn(async (uid: string) => {
+    if (!chain.includes(uid)) return;
+
+    const newChain = chain.filter((i) => i !== uid).concat([uid]);
+    await changeProfileChain(newChain);
+    mutate("getProfiles", { ...profiles, chain: newChain }, true);
+  });
 
   return (
     <BasePage title="Profiles">
-      <Box sx={{ display: "flex", mb: 3 }}>
+      <Box sx={{ display: "flex", mb: 2.5 }}>
         <TextField
-          id="profile_url"
+          id="clas_verge_profile_url"
           name="profile_url"
           label="Profile URL"
           size="small"
@@ -139,24 +197,36 @@ const ProfilePage = () => {
         </Button>
       </Box>
 
-      <Grid container spacing={3}>
-        {profiles?.items?.map((item, idx) => (
+      <Grid container spacing={2}>
+        {regularItems.map((item) => (
           <Grid item xs={12} sm={6} key={item.file}>
             <ProfileItem
-              index={idx}
-              selected={profiles.current === idx}
+              selected={profiles.current === item.uid}
               itemData={item}
-              onSelect={(f) => onSelect(idx, f)}
+              onSelect={(f) => onSelect(item.uid, f)}
             />
           </Grid>
         ))}
       </Grid>
 
-      <ProfileNew
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        onSubmit={onNew}
-      />
+      <Grid container spacing={2} sx={{ mt: 3 }}>
+        {enhanceItems.map((item) => (
+          <Grid item xs={12} sm={6} key={item.file}>
+            <ProfileMore
+              selected={!!profiles.chain?.includes(item.uid)}
+              itemData={item}
+              onEnable={() => onEnhanceEnable(item.uid)}
+              onDisable={() => onEnhanceDisable(item.uid)}
+              onDelete={() => onEnhanceDelete(item.uid)}
+              onMoveTop={() => onMoveTop(item.uid)}
+              onMoveEnd={() => onMoveEnd(item.uid)}
+              onEnhance={onEnhance}
+            />
+          </Grid>
+        ))}
+      </Grid>
+
+      <ProfileNew open={dialogOpen} onClose={() => setDialogOpen(false)} />
     </BasePage>
   );
 };

src/pages/proxies.tsx

@@ -1,90 +1,51 @@
 import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { useEffect } from "react";
+import { useLockFn } from "ahooks";
 import { Button, ButtonGroup, List, Paper } from "@mui/material";
-import { getClashConfig, updateConfigs, updateProxy } from "../services/api";
+import { getClashConfig, updateConfigs } from "../services/api";
 import { patchClashConfig } from "../services/cmds";
 import { getProxies } from "../services/api";
 import BasePage from "../components/base/base-page";
-import ProxyItem from "../components/proxy/proxy-item";
 import ProxyGroup from "../components/proxy/proxy-group";
+import ProxyGlobal from "../components/proxy/proxy-global";
 
 const ProxyPage = () => {
   const { mutate } = useSWRConfig();
   const { data: proxiesData } = useSWR("getProxies", getProxies);
   const { data: clashConfig } = useSWR("getClashConfig", getClashConfig);
-  const [curProxy, setCurProxy] = useState<string>("DIRECT");
-  const curMode = clashConfig?.mode.toLowerCase();
-
-  // proxy groups
-  const { groups = [] } = proxiesData ?? {};
-  // proxies and sorted
-  const filterProxies = useMemo(() => {
-    if (!proxiesData?.proxies) return [];
-
-    const list = Object.values(proxiesData.proxies);
-    const retList = list.filter(
-      (p) => !p.all?.length && p.name !== "DIRECT" && p.name !== "REJECT"
-    );
-    const direct = list.filter((p) => p.name === "DIRECT");
-    const reject = list.filter((p) => p.name === "REJECT");
-
-    return direct.concat(retList).concat(reject);
-  }, [proxiesData]);
 
   const modeList = ["rule", "global", "direct"];
-  const asGroup = curMode === "rule" && groups.length;
+  const curMode = clashConfig?.mode.toLowerCase() ?? "direct";
+  const { groups = [], proxies = [] } = proxiesData ?? {};
 
   // make sure that fetch the proxies successfully
   useEffect(() => {
     if (
       (curMode === "rule" && !groups.length) ||
-      (curMode === "global" && filterProxies.length < 4)
+      (curMode === "global" && proxies.length < 2)
     ) {
       setTimeout(() => mutate("getProxies"), 500);
     }
-  }, [groups, filterProxies, curMode]);
+  }, [groups, proxies, curMode]);
 
-  // update the current proxy
-  useEffect(() => {
-    if (curMode === "direct") setCurProxy("DIRECT");
-    if (curMode === "global") {
-      const globalNow = proxiesData?.proxies?.GLOBAL?.now;
-      setCurProxy(globalNow || "DIRECT");
-    }
-  }, [curMode, proxiesData]);
-
-  const changeLockRef = useRef(false);
-  const onChangeMode = async (mode: string) => {
-    if (changeLockRef.current) return;
-    changeLockRef.current = true;
-
-    try {
-      // switch rapidly
-      await updateConfigs({ mode });
-      await patchClashConfig({ mode });
-      mutate("getClashConfig");
-    } finally {
-      changeLockRef.current = false;
-    }
-  };
-
-  const onChangeProxy = async (name: string) => {
-    if (curMode !== "global") return;
-    await updateProxy("GLOBAL", name);
-    setCurProxy(name);
-  };
+  const onChangeMode = useLockFn(async (mode: string) => {
+    // switch rapidly
+    await updateConfigs({ mode });
+    await patchClashConfig({ mode });
+    mutate("getClashConfig");
+  });
 
   // difference style
-  const pageStyle = asGroup ? {} : { height: "100%" };
-  const paperStyle: any = asGroup
+  const showGroup = curMode === "rule" && !!groups.length;
+  const pageStyle = showGroup ? {} : { height: "100%" };
+  const paperStyle: any = showGroup
     ? { mb: 0.5 }
     : { py: 1, height: "100%", boxSizing: "border-box" };
 
   return (
     <BasePage
       contentStyle={pageStyle}
-      title={asGroup ? "Proxy Groups" : "Proxies"}
+      title={showGroup ? "Proxy Groups" : "Proxies"}
       header={
         <ButtonGroup size="small">
           {modeList.map((mode) => (
@@ -101,26 +62,25 @@ const ProxyPage = () => {
       }
     >
       <Paper sx={{ borderRadius: 1, boxShadow: 2, ...paperStyle }}>
-        {asGroup ? (
+        {curMode === "rule" && !!groups.length && (
           <List>
             {groups.map((group) => (
               <ProxyGroup key={group.name} group={group} />
             ))}
           </List>
-        ) : (
-          // virtual list
-          <Virtuoso
-            style={{ height: "100%" }}
-            totalCount={filterProxies.length}
-            itemContent={(index) => (
-              <ProxyItem
-                groupName="GLOBAL"
-                proxy={filterProxies[index]}
-                selected={filterProxies[index].name === curProxy}
-                onClick={onChangeProxy}
-                sx={{ py: 0, px: 2 }}
-              />
-            )}
+        )}
+        {((curMode === "rule" && !groups.length) || curMode === "global") && (
+          <ProxyGlobal
+            groupName="GLOBAL"
+            curProxy={proxiesData?.global?.now}
+            proxies={proxies}
+          />
+        )}
+        {curMode === "direct" && (
+          <ProxyGlobal
+            groupName="DIRECT"
+            curProxy="DIRECT"
+            proxies={[proxiesData?.direct!].filter(Boolean)}
           />
         )}
       </Paper>

src/services/api.ts

@@ -84,33 +84,54 @@ export async function updateProxy(group: string, proxy: string) {
 export async function getProxies() {
   const instance = await getAxios();
   const response = await instance.get<any, any>("/proxies");
-  const proxies = (response?.proxies ?? {}) as Record<
+  const records = (response?.proxies ?? {}) as Record<
     string,
     ApiType.ProxyItem
   >;
 
-  const global = proxies["GLOBAL"];
+  const global = records["GLOBAL"];
+  const direct = records["DIRECT"];
+  const reject = records["REJECT"];
   const order = global?.all;
 
   let groups: ApiType.ProxyGroupItem[] = [];
 
+  // compatible with proxy-providers
+  const generateItem = (name: string) => {
+    if (records[name]) return records[name];
+    return { name, type: "unknown", udp: false, history: [] };
+  };
+
   if (order) {
     groups = order
-      .filter((name) => proxies[name]?.all)
-      .map((name) => proxies[name])
+      .filter((name) => records[name]?.all)
+      .map((name) => records[name])
       .map((each) => ({
         ...each,
-        all: each.all!.map((item) => proxies[item]),
+        all: each.all!.map((item) => generateItem(item)),
       }));
   } else {
-    groups = Object.values(proxies)
+    groups = Object.values(records)
       .filter((each) => each.name !== "GLOBAL" && each.all)
       .map((each) => ({
         ...each,
-        all: each.all!.map((item) => proxies[item]),
+        all: each.all!.map((item) => generateItem(item)),
       }));
     groups.sort((a, b) => b.name.localeCompare(a.name));
   }
 
-  return { global, groups, proxies };
+  const proxies = [direct, reject].concat(
+    Object.values(records).filter(
+      (p) => !p.all?.length && p.name !== "DIRECT" && p.name !== "REJECT"
+    )
+  );
+
+  return { global, direct, groups, records, proxies };
+}
+
+// todo: get proxy providers
+export async function getProviders() {
+  const instance = await getAxios();
+  const response = await instance.get<any, any>("/providers/proxies");
+  return response.providers as any;
 }

src/services/cmds.ts

@@ -9,11 +9,15 @@ export async function syncProfiles() {
   return invoke<void>("sync_profiles");
 }
 
-export async function newProfile(name: string, desc: string) {
-  return invoke<void>("new_profile", { name, desc });
+export async function enhanceProfiles() {
+  return invoke<void>("enhance_profiles");
 }
 
-export async function viewProfile(index: number) {
+export async function createProfile(item: Partial<CmdType.ProfileItem>) {
+  return invoke<void>("create_profile", { item });
+}
+
+export async function viewProfile(index: string) {
   return invoke<void>("view_profile", { index });
 }
 
@@ -21,27 +25,27 @@ export async function importProfile(url: string) {
   return invoke<void>("import_profile", { url, withProxy: true });
 }
 
-export async function updateProfile(index: number, withProxy: boolean) {
+export async function updateProfile(index: string, withProxy: boolean) {
   return invoke<void>("update_profile", { index, withProxy });
 }
 
-export async function deleteProfile(index: number) {
+export async function deleteProfile(index: string) {
   return invoke<void>("delete_profile", { index });
 }
 
 export async function patchProfile(
-  index: number,
+  index: string,
   profile: CmdType.ProfileItem
 ) {
   return invoke<void>("patch_profile", { index, profile });
 }
 
-export async function selectProfile(index: number) {
+export async function selectProfile(index: string) {
   return invoke<void>("select_profile", { index });
 }
 
-export async function restartSidecar() {
-  return invoke<void>("restart_sidecar");
+export async function changeProfileChain(chain?: string[]) {
+  return invoke<void>("change_profile_chain", { chain });
 }
 
 export async function getClashInfo() {
@@ -64,6 +68,10 @@ export async function getSystemProxy() {
   return invoke<any>("get_sys_proxy");
 }
 
+export async function restartSidecar() {
+  return invoke<void>("restart_sidecar");
+}
+
 export async function killSidecars() {
   return invoke<any>("kill_sidecars");
 }

src/services/delay.ts

@@ -32,6 +32,39 @@ class DelayManager {
     this.setDelay(name, group, delay);
     return delay;
   }
+
+  async checkListDelay(
+    options: {
+      names: readonly string[];
+      groupName: string;
+      skipNum: number;
+      maxTimeout: number;
+    },
+    callback: Function
+  ) {
+    let names = [...options.names];
+    const { groupName, skipNum, maxTimeout } = options;
+
+    while (names.length) {
+      const list = names.slice(0, skipNum);
+      names = names.slice(skipNum);
+
+      let called = false;
+      setTimeout(() => {
+        if (!called) {
+          called = true;
+          callback();
+        }
+      }, maxTimeout);
+
+      await Promise.all(list.map((n) => this.checkDelay(n, groupName)));
+
+      if (!called) {
+        called = true;
+        callback();
+      }
+    }
+  }
 }
 
 export default new DelayManager();

src/services/enhance.ts

@@ -0,0 +1,147 @@
+import { emit, listen } from "@tauri-apps/api/event";
+import { CmdType } from "./types";
+
+/**
+ * process the merge mode
+ */
+function toMerge(
+  merge: CmdType.ProfileMerge,
+  data: CmdType.ProfileData
+): CmdType.ProfileData {
+  if (!merge) return data;
+
+  const newData = { ...data };
+
+  // rules
+  if (Array.isArray(merge["prepend-rules"])) {
+    if (!newData.rules) newData.rules = [];
+    newData.rules.unshift(...merge["prepend-rules"]);
+  }
+  if (Array.isArray(merge["append-rules"])) {
+    if (!newData.rules) newData.rules = [];
+    newData.rules.push(...merge["append-rules"]);
+  }
+
+  // proxies
+  if (Array.isArray(merge["prepend-proxies"])) {
+    if (!newData.proxies) newData.proxies = [];
+    newData.proxies.unshift(...merge["prepend-proxies"]);
+  }
+  if (Array.isArray(merge["append-proxies"])) {
+    if (!newData.proxies) newData.proxies = [];
+    newData.proxies.push(...merge["append-proxies"]);
+  }
+
+  // proxy-groups
+  if (Array.isArray(merge["prepend-proxy-groups"])) {
+    if (!newData["proxy-groups"]) newData["proxy-groups"] = [];
+    newData["proxy-groups"].unshift(...merge["prepend-proxy-groups"]);
+  }
+  if (Array.isArray(merge["append-proxy-groups"])) {
+    if (!newData["proxy-groups"]) newData["proxy-groups"] = [];
+    newData["proxy-groups"].push(...merge["append-proxy-groups"]);
+  }
+
+  return newData;
+}
+
+/**
+ * process the script mode
+ */
+function toScript(
+  script: string,
+  data: CmdType.ProfileData
+): Promise<CmdType.ProfileData> {
+  if (!script) {
+    throw new Error("miss the main function");
+  }
+
+  const paramsName = `__verge${Math.floor(Math.random() * 1000)}`;
+  const code = `'use strict';${script};return main(${paramsName});`;
+  const func = new Function(paramsName, code);
+  return func(data);
+}
+
+export type EStatus = { status: "ok" | "error"; message?: string };
+export type EListener = (status: EStatus) => void;
+export type EUnlistener = () => void;
+
+/**
+ * The service helps to
+ * implement enhanced profiles
+ */
+class Enhance {
+  private isSetup = false;
+  private listenMap: Map<string, EListener>;
+  private resultMap: Map<string, EStatus>;
+
+  constructor() {
+    this.listenMap = new Map();
+    this.resultMap = new Map();
+  }
+
+  // setup some listener
+  // for the enhanced running status
+  listen(uid: string, cb: EListener): EUnlistener {
+    this.listenMap.set(uid, cb);
+    return () => this.listenMap.delete(uid);
+  }
+
+  // get the running status
+  status(uid: string): EStatus | undefined {
+    return this.resultMap.get(uid);
+  }
+
+  // setup the handler
+  setup() {
+    if (this.isSetup) return;
+    this.isSetup = true;
+
+    listen("script-handler", async (event) => {
+      const payload = event.payload as CmdType.EnhancedPayload;
+      let pdata = payload.current || {};
+
+      for (const each of payload.chain) {
+        const { uid, type = "" } = each.item;
+
+        try {
+          // process script
+          if (type === "script") {
+            // support async main function
+            pdata = await toScript(each.script!, { ...pdata });
+          }
+
+          // process merge
+          else if (type === "merge") {
+            pdata = toMerge(each.merge!, { ...pdata });
+          }
+
+          // invalid type
+          else {
+            throw new Error(`invalid enhanced profile type "${type}"`);
+          }
+
+          this.exec(uid, { status: "ok" });
+        } catch (err: any) {
+          this.exec(uid, {
+            status: "error",
+            message: err.message || err.toString(),
+          });
+
+          console.error(err);
+        }
+      }
+
+      const result = { data: pdata, status: "ok" };
+      emit(payload.callback, JSON.stringify(result)).catch(console.error);
+    });
+  }
+
+  // exec the listener
+  private exec(uid: string, status: EStatus) {
+    this.resultMap.set(uid, status);
+    this.listenMap.get(uid)?.(status);
+  }
+}
+
+export default new Enhance();

src/services/states.ts

@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+import { ApiType } from "./types";
+
+export const atomClashPort = atom<number>({
+  key: "atomClashPort",
+  default: 0,
+});
+
+export const atomLogData = atom<ApiType.LogItem[]>({
+  key: "atomLogData",
+  default: [],
+});

src/services/types.ts

@@ -78,6 +78,8 @@ export namespace ApiType {
  * Some interface for command
  */
 export namespace CmdType {
+  export type ProfileType = "local" | "remote" | "merge" | "script";
+
   export interface ClashInfo {
     status: string;
     port?: string;
@@ -86,10 +88,11 @@ export namespace CmdType {
   }
 
   export interface ProfileItem {
+    uid: string;
+    type?: ProfileType | string;
     name?: string;
     desc?: string;
     file?: string;
-    mode?: string;
     url?: string;
     updated?: number;
     selected?: {
@@ -105,7 +108,8 @@ export namespace CmdType {
   }
 
   export interface ProfilesConfig {
-    current?: number;
+    current?: string;
+    chain?: string[];
     items?: ProfileItem[];
   }
 
@@ -113,9 +117,39 @@ export namespace CmdType {
     theme_mode?: "light" | "dark";
     theme_blur?: boolean;
     traffic_graph?: boolean;
+    enable_tun_mode?: boolean;
     enable_auto_launch?: boolean;
     enable_system_proxy?: boolean;
     enable_proxy_guard?: boolean;
     system_proxy_bypass?: string;
   }
+
+  export type ProfileMerge = Record<string, any>;
+
+  // partial of the clash config
+  export type ProfileData = Partial<{
+    rules: any[];
+    proxies: any[];
+    "proxy-groups": any[];
+    "proxy-providers": any[];
+    "rule-providers": any[];
+  }>;
+
+  export interface ChainItem {
+    item: ProfileItem;
+    merge?: ProfileMerge;
+    script?: string;
+  }
+
+  export interface EnhancedPayload {
+    chain: ChainItem[];
+    current: ProfileData;
+    callback: string;
+  }
+
+  export interface EnhancedResult {
+    data: ProfileData;
+    status: string;
+    error?: string;
+  }
 }

src/states/setting.ts

@@ -1,6 +0,0 @@
-import { atom } from "recoil";
-
-export const atomClashPort = atom<number>({
-  key: "atomClashPort",
-  default: 0,
-});

yarn.lock

@@ -123,9 +123,9 @@
     "@babel/types" "^7.16.7"
 
 "@babel/helper-module-transforms@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz#7665faeb721a01ca5327ddc6bba15a5cb34b6a41"
-  integrity sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==
+  version "7.17.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz#3c3b03cc6617e33d68ef5a27a67419ac5199ccd0"
+  integrity sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==
   dependencies:
     "@babel/helper-environment-visitor" "^7.16.7"
     "@babel/helper-module-imports" "^7.16.7"
@@ -133,8 +133,8 @@
     "@babel/helper-split-export-declaration" "^7.16.7"
     "@babel/helper-validator-identifier" "^7.16.7"
     "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.7"
-    "@babel/types" "^7.16.7"
+    "@babel/traverse" "^7.17.3"
+    "@babel/types" "^7.17.0"
 
 "@babel/helper-plugin-utils@^7.16.7":
   version "7.16.7"
@@ -227,7 +227,7 @@
     "@babel/plugin-syntax-jsx" "^7.16.7"
     "@babel/types" "^7.17.0"
 
-"@babel/runtime@^7.13.10", "@babel/runtime@^7.17.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
   integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@@ -243,7 +243,7 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.16.7", "@babel/traverse@^7.17.0", "@babel/traverse@^7.17.3":
+"@babel/traverse@^7.17.0", "@babel/traverse@^7.17.3":
   version "7.17.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
   integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
@@ -267,7 +267,7 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@emotion/babel-plugin@^11.3.0":
+"@emotion/babel-plugin@^11.7.1":
   version "11.7.2"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0"
   integrity sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==
@@ -301,10 +301,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz#cbd843d409dfaad90f9404e7c0404c55eae8c134"
-  integrity sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==
+"@emotion/is-prop-valid@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
+  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
   dependencies:
     "@emotion/memoize" "^0.7.4"
 
@@ -313,16 +313,17 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@^11.7.0":
-  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
-  integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
+"@emotion/react@^11.8.1":
+  version "11.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.8.1.tgz#5358b8c78367063881e26423057c030c57ce52eb"
+  integrity sha512-XGaie4nRxmtP1BZYBXqC5JGqMYF2KRKKI7vjqNvQxyRpekVAZhb6QqrElmZCAYXH1L90lAelADSVZC4PFsrJ8Q==
   dependencies:
     "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
     "@emotion/cache" "^11.7.1"
     "@emotion/serialize" "^1.0.2"
     "@emotion/sheet" "^1.1.0"
-    "@emotion/utils" "^1.0.0"
+    "@emotion/utils" "^1.1.0"
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
@@ -342,26 +343,26 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
   integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
 
-"@emotion/styled@^11.6.0":
-  version "11.6.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d"
-  integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==
+"@emotion/styled@^11.8.1":
+  version "11.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17"
+  integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@emotion/babel-plugin" "^11.3.0"
-    "@emotion/is-prop-valid" "^1.1.1"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/is-prop-valid" "^1.1.2"
     "@emotion/serialize" "^1.0.2"
-    "@emotion/utils" "^1.0.0"
+    "@emotion/utils" "^1.1.0"
 
 "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/utils@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
-  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
 
 "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
@@ -386,36 +387,36 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@mui/base@5.0.0-alpha.69":
-  version "5.0.0-alpha.69"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.69.tgz#8511198d760de0795870f5ec63e53db73ba801ec"
-  integrity sha512-IxUUj/lkilCTNBIybQxyQGW/zpxFp490G0QBQJgRp9TJkW2PWSTLvAH7gcH0YHd0L2TAf1TRgfdemoRseMzqQA==
+"@mui/base@5.0.0-alpha.70":
+  version "5.0.0-alpha.70"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.70.tgz#e280ee3b69d86034f2cff445161747940129d576"
+  integrity sha512-8UZWhz1JYuQnPkAbC37cl4aL1JyNWZ08wDXlp57W7fYQp5xFpBP/7p56AcWg2qG9CNJP0IlFg2Wp4md1v2l4iA==
   dependencies:
-    "@babel/runtime" "^7.17.0"
-    "@emotion/is-prop-valid" "^1.1.1"
-    "@mui/utils" "^5.4.2"
+    "@babel/runtime" "^7.17.2"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@mui/utils" "^5.4.4"
     "@popperjs/core" "^2.4.4"
     clsx "^1.1.1"
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-"@mui/icons-material@^5.4.1":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.4.2.tgz#b2fd2c6c81d2d275e17ce40bd50c63cb197d324b"
-  integrity sha512-7c+G3jBT+e+pN0a9DJ0Bd8Kr1Vy6os5Q1yd2aXcwuhlRI3uzJBLJ8sX6FSWoh5DSEBchb7Bsk1uHz6U0YN9l+Q==
+"@mui/icons-material@^5.4.4":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.4.4.tgz#0dc7b4e68cbbdfc675f09f0763be1100aad910af"
+  integrity sha512-7zoRpjO8vsd+bPvXq6rtXu0V8Saj70X09dtTQogZmxQKabrYW3g7+Yym7SCRA7IYVF3ysz2AvdQrGD1P/sGepg==
   dependencies:
-    "@babel/runtime" "^7.17.0"
+    "@babel/runtime" "^7.17.2"
 
-"@mui/material@^5.4.1":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.4.2.tgz#04ea6632d7ca600a2ae528f6f140ef0af9c01434"
-  integrity sha512-jmeLWEO6AA6g7HErhI3MXVGaMZtqDZjDwcHCg24WY954wO38Xn0zJ53VfpFc44ZTJLV9Ejd7ci9fLlG/HmJCeg==
+"@mui/material@^5.4.4":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.4.4.tgz#2652a07085bf107da590007286336640f605055e"
+  integrity sha512-VDJC7GzO1HTFqfMe2zwvaW/sRhABBJXFkKEv5gO3uXx7x9fdwJHQr4udU7NWZCUdOcx9Y0h3BsAILLefYq+WPw==
   dependencies:
-    "@babel/runtime" "^7.17.0"
-    "@mui/base" "5.0.0-alpha.69"
-    "@mui/system" "^5.4.2"
+    "@babel/runtime" "^7.17.2"
+    "@mui/base" "5.0.0-alpha.70"
+    "@mui/system" "^5.4.4"
     "@mui/types" "^7.1.2"
-    "@mui/utils" "^5.4.2"
+    "@mui/utils" "^5.4.4"
     "@types/react-transition-group" "^4.4.4"
     clsx "^1.1.1"
     csstype "^3.0.10"
@@ -424,34 +425,34 @@
     react-is "^17.0.2"
     react-transition-group "^4.4.2"
 
-"@mui/private-theming@^5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.4.2.tgz#f0a05f908456a2f7b87ccb6fc3b6e1faae9d89e6"
-  integrity sha512-mlPDYYko4wIcwXjCPEmOWbNTT4DZ6h9YHdnRtQPnWM28+TRUHEo7SbydnnmVDQLRXUfaH4Y6XtEHIfBNPE/SLg==
+"@mui/private-theming@^5.4.4":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.4.4.tgz#cc2b2d897888ce5d1c319adfa2c50c0063a649ab"
+  integrity sha512-V/gxttr6736yJoU9q+4xxXsa0K/w9Hn9pg99zsOHt7i/O904w2CX5NHh5WqDXtoUzVcayLF0RB17yr6l79CE+A==
   dependencies:
-    "@babel/runtime" "^7.17.0"
-    "@mui/utils" "^5.4.2"
+    "@babel/runtime" "^7.17.2"
+    "@mui/utils" "^5.4.4"
     prop-types "^15.7.2"
 
-"@mui/styled-engine@^5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.4.2.tgz#e04903e06bd49fd10072a44ff38e13f5481bb64d"
-  integrity sha512-tz9p3aRtzXHKAg7x3BgP0hVQEoGKaxNCFxsJ+d/iqEHYvywWFSs6oxqYAvDHIRpvMlUZyPNoTrkcNnbdMmH/ng==
+"@mui/styled-engine@^5.4.4":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.4.4.tgz#8991b2e2dd47ae60071e7f042a5fab8e6e092e82"
+  integrity sha512-AKx3rSgB6dmt5f7iP4K18mLFlE5/9EfJe/5EH9Pyqez8J/CPkTgYhJ/Va6qtlrcunzpui+uG/vfuf04yAZekSg==
   dependencies:
-    "@babel/runtime" "^7.17.0"
+    "@babel/runtime" "^7.17.2"
     "@emotion/cache" "^11.7.1"
     prop-types "^15.7.2"
 
-"@mui/system@^5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.4.2.tgz#8166e406ba4628950bd79cec8159de25d5aef162"
-  integrity sha512-QegBVu6fxUNov1X9bWc1MZUTeV3A5g9PIpli7d0kzkGfq6JzrJWuPlhSPZ+6hlWmWky+bbAXhU65Qz8atWxDGw==
+"@mui/system@^5.4.4":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.4.4.tgz#cd5d3d35c75594abd88708e715b5e39a8874ff51"
+  integrity sha512-Zjbztq2o/VRuRRCWjG44juRrPKYLQMqtQpMHmMttGu5BnvK6PAPW3WOY0r1JCAwLhbd8Kug9nyhGQYKETjo+tQ==
   dependencies:
-    "@babel/runtime" "^7.17.0"
-    "@mui/private-theming" "^5.4.2"
-    "@mui/styled-engine" "^5.4.2"
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.4.4"
+    "@mui/styled-engine" "^5.4.4"
     "@mui/types" "^7.1.2"
-    "@mui/utils" "^5.4.2"
+    "@mui/utils" "^5.4.4"
     clsx "^1.1.1"
     csstype "^3.0.10"
     prop-types "^15.7.2"
@@ -461,12 +462,12 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.2.tgz#4f3678ae77a7a3efab73b6e040469cc6df2144ac"
   integrity sha512-SD7O1nVzqG+ckQpFjDhXPZjRceB8HQFHEvdLLrPhlJy4lLbwEBbxK74Tj4t6Jgk0fTvLJisuwOutrtYe9P/xBQ==
 
-"@mui/utils@^5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.4.2.tgz#3edda8f80de235418fff0424ee66e2a49793ec01"
-  integrity sha512-646dBCC57MXTo/Gf3AnZSHRHznaTETQq5x7AWp5FRQ4jPeyT4WSs18cpJVwkV01cAHKh06pNQTIufIALIWCL5g==
+"@mui/utils@^5.4.4":
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.4.4.tgz#bd7dde4f48f60c02b6debf976bd74f3505b188fe"
+  integrity sha512-hfYIXEuhc2mXMGN5nUPis8beH6uE/zl3uMWJcyHX0/LN/+QxO9zhYuV6l8AsAaphHFyS/fBv0SW3Nid7jw5hKQ==
   dependencies:
-    "@babel/runtime" "^7.17.0"
+    "@babel/runtime" "^7.17.2"
     "@types/prop-types" "^15.7.4"
     "@types/react-is" "^16.7.1 || ^17.0.0"
     prop-types "^15.7.2"
@@ -655,9 +656,9 @@
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
 "@types/node@*":
-  version "17.0.18"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.18.tgz#3b4fed5cfb58010e3a2be4b6e74615e4847f1074"
-  integrity sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
+  integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -670,9 +671,9 @@
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
 "@types/react-dom@^17.0.0":
-  version "17.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
-  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
+  version "17.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
+  integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
   dependencies:
     "@types/react" "*"
 
@@ -740,10 +741,10 @@ ahooks-v3-count@^1.0.0:
   resolved "https://registry.yarnpkg.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80"
   integrity sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ==
 
-ahooks@^3.1.9:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/ahooks/-/ahooks-3.1.9.tgz#7b04672c9fc2e26e551cb57bd46cfa043e680511"
-  integrity sha512-+ei+s0f+K2UKs6PGOUoJzMNKlj74qySO3lLd2xTJsvRUOoLhcLeFMledyJ2dRAvcFL8YFm+2T5Nidrlb8wl2tQ==
+ahooks@^3.1.13:
+  version "3.1.13"
+  resolved "https://registry.yarnpkg.com/ahooks/-/ahooks-3.1.13.tgz#23492e2a24f9d7951a52d9359b877e010a0a56e0"
+  integrity sha512-ZWwWRhikXCWuR+X+LxXK8sWu2KPU7nh7UfaTTB93NhmoeytzN8VODRfVjq8LbT2ow5Q7PuG13143OcW9nN1vBg==
   dependencies:
     "@types/js-cookie" "^2.x.x"
     ahooks-v3-count "^1.0.0"
@@ -838,9 +839,9 @@ braces@~3.0.2:
     fill-range "^7.0.1"
 
 browserslist@^4.17.5:
-  version "4.19.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.2.tgz#9ba98791192a39e1242f0670bb265ceee1baf0a4"
-  integrity sha512-97XU1CTZ5TwU9Qy/Taj+RtiI6SQM1WIhZ9osT7EY0oO2aWXGABZT2OZeRL+6PfaQsiiMIjjwIoYFPq4APgspgQ==
+  version "4.19.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.19.3.tgz#29b7caad327ecf2859485f696f9604214bedd383"
+  integrity sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==
   dependencies:
     caniuse-lite "^1.0.30001312"
     electron-to-chromium "^1.4.71"
@@ -961,10 +962,10 @@ data-uri-to-buffer@^4.0.0:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
   integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
 
-dayjs@^1.10.7, dayjs@^1.9.1:
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
-  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+dayjs@^1.10.8, dayjs@^1.9.1:
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.8.tgz#267df4bc6276fcb33c04a6735287e3f429abec41"
+  integrity sha512-wbNwDfBHHur9UOzNUjeKUOJ0fCb0a52Wx0xInmQ7Y8FstyajiV1NmK1e00cxsr9YrE9r7yAChE0VvpuY5Rnlow==
 
 debug@^4.1.0:
   version "4.3.3"
@@ -987,9 +988,9 @@ dom-helpers@^5.0.1:
     csstype "^3.0.2"
 
 electron-to-chromium@^1.4.71:
-  version "1.4.71"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz#17056914465da0890ce00351a3b946fd4cd51ff6"
-  integrity sha512-Hk61vXXKRb2cd3znPE9F+2pLWdIOmP7GjiTj45y6L3W/lO+hSnUSUhq+6lEaERWBdZOHbk2s3YV5c9xVl3boVw==
+  version "1.4.75"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
+  integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q==
 
 end-of-stream@^1.1.0:
   version "1.4.4"
@@ -1005,125 +1006,125 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-esbuild-android-arm64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.22.tgz#fb051169a63307d958aec85ad596cfc7d7770303"
-  integrity sha512-k1Uu4uC4UOFgrnTj2zuj75EswFSEBK+H6lT70/DdS4mTAOfs2ECv2I9ZYvr3w0WL0T4YItzJdK7fPNxcPw6YmQ==
+esbuild-android-arm64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.23.tgz#c89b3c50b4f47668dcbeb0b34ee4615258818e71"
+  integrity sha512-k9sXem++mINrZty1v4FVt6nC5BQCFG4K2geCIUUqHNlTdFnuvcqsY7prcKZLFhqVC1rbcJAr9VSUGFL/vD4vsw==
 
-esbuild-darwin-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.22.tgz#615ea0a9de67b57a293a7128d7ac83ee307a856d"
-  integrity sha512-d8Ceuo6Vw6HM3fW218FB6jTY6O3r2WNcTAU0SGsBkXZ3k8SDoRLd3Nrc//EqzdgYnzDNMNtrWegK2Qsss4THhw==
+esbuild-darwin-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.23.tgz#1c131e8cb133ed935ca32f824349a117c896a15b"
+  integrity sha512-lB0XRbtOYYL1tLcYw8BoBaYsFYiR48RPrA0KfA/7RFTr4MV7Bwy/J4+7nLsVnv9FGuQummM3uJ93J3ptaTqFug==
 
-esbuild-darwin-arm64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.22.tgz#82054dcfcecb15ccfd237093b8008e7745a99ad9"
-  integrity sha512-YAt9Tj3SkIUkswuzHxkaNlT9+sg0xvzDvE75LlBo4DI++ogSgSmKNR6B4eUhU5EUUepVXcXdRIdqMq9ppeRqfw==
+esbuild-darwin-arm64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.23.tgz#3c6245a50109dd84953f53d7833bd3b4f0e8c6fa"
+  integrity sha512-yat73Z/uJ5tRcfRiI4CCTv0FSnwErm3BJQeZAh+1tIP0TUNh6o+mXg338Zl5EKChD+YGp6PN+Dbhs7qa34RxSw==
 
-esbuild-freebsd-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.22.tgz#778a818c5b078d5cdd6bb6c0e0797217d196999b"
-  integrity sha512-ek1HUv7fkXMy87Qm2G4IRohN+Qux4IcnrDBPZGXNN33KAL0pEJJzdTv0hB/42+DCYWylSrSKxk3KUXfqXOoH4A==
+esbuild-freebsd-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.23.tgz#0cdc54e72d3dd9cd992f9c2960055e68a7f8650c"
+  integrity sha512-/1xiTjoLuQ+LlbfjJdKkX45qK/M7ARrbLmyf7x3JhyQGMjcxRYVR6Dw81uH3qlMHwT4cfLW4aEVBhP1aNV7VsA==
 
-esbuild-freebsd-arm64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.22.tgz#18da93b9f3db2e036f72383bfe73b28b73bb332c"
-  integrity sha512-zPh9SzjRvr9FwsouNYTqgqFlsMIW07O8mNXulGeQx6O5ApgGUBZBgtzSlBQXkHi18WjrosYfsvp5nzOKiWzkjQ==
+esbuild-freebsd-arm64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.23.tgz#1d11faed3a0c429e99b7dddef84103eb509788b2"
+  integrity sha512-uyPqBU/Zcp6yEAZS4LKj5jEE0q2s4HmlMBIPzbW6cTunZ8cyvjG6YWpIZXb1KK3KTJDe62ltCrk3VzmWHp+iLg==
 
-esbuild-linux-32@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.22.tgz#d0d5d9f5bb3536e17ac097e9512019c65b7c0234"
-  integrity sha512-SnpveoE4nzjb9t2hqCIzzTWBM0RzcCINDMBB67H6OXIuDa4KqFqaIgmTchNA9pJKOVLVIKd5FYxNiJStli21qg==
+esbuild-linux-32@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.23.tgz#fd9f033fc27dcab61100cb1eb1c936893a68c841"
+  integrity sha512-37R/WMkQyUfNhbH7aJrr1uCjDVdnPeTHGeDhZPUNhfoHV0lQuZNCKuNnDvlH/u/nwIYZNdVvz1Igv5rY/zfrzQ==
 
-esbuild-linux-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.22.tgz#2773d540971999ea7f38107ef92fca753f6a8c30"
-  integrity sha512-Zcl9Wg7gKhOWWNqAjygyqzB+fJa19glgl2JG7GtuxHyL1uEnWlpSMytTLMqtfbmRykIHdab797IOZeKwk5g0zg==
+esbuild-linux-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.23.tgz#c04c438514f1359ecb1529205d0c836d4165f198"
+  integrity sha512-H0gztDP60qqr8zoFhAO64waoN5yBXkmYCElFklpd6LPoobtNGNnDe99xOQm28+fuD75YJ7GKHzp/MLCLhw2+vQ==
 
-esbuild-linux-arm64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.22.tgz#5d4480ce6d6bffab1dd76a23158f5a5ab33e7ba4"
-  integrity sha512-8q/FRBJtV5IHnQChO3LHh/Jf7KLrxJ/RCTGdBvlVZhBde+dk3/qS9fFsUy+rs3dEi49aAsyVitTwlKw1SUFm+A==
+esbuild-linux-arm64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.23.tgz#d1b3ab2988ab0734886eb9e811726f7db099ab96"
+  integrity sha512-c4MLOIByNHR55n3KoYf9hYDfBRghMjOiHLaoYLhkQkIabb452RWi+HsNgB41sUpSlOAqfpqKPFNg7VrxL3UX9g==
 
-esbuild-linux-arm@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.22.tgz#c6391b3f7c8fa6d3b99a7e893ce0f45f3a921eef"
-  integrity sha512-soPDdbpt/C0XvOOK45p4EFt8HbH5g+0uHs5nUKjHVExfgR7du734kEkXR/mE5zmjrlymk5AA79I0VIvj90WZ4g==
+esbuild-linux-arm@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.23.tgz#df7558b6a5076f5eb9fd387c8704f768b61d97fb"
+  integrity sha512-x64CEUxi8+EzOAIpCUeuni0bZfzPw/65r8tC5cy5zOq9dY7ysOi5EVQHnzaxS+1NmV+/RVRpmrzGw1QgY2Xpmw==
 
-esbuild-linux-mips64le@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.22.tgz#2c8dabac355c502e86c38f9f292b3517d8e181f3"
-  integrity sha512-SiNDfuRXhGh1JQLLA9JPprBgPVFOsGuQ0yDfSPTNxztmVJd8W2mX++c4FfLpAwxuJe183mLuKf7qKCHQs5ZnBQ==
+esbuild-linux-mips64le@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.23.tgz#bb4c47fccc9493d460ffeb1f88e8a97a98a14f8b"
+  integrity sha512-kHKyKRIAedYhKug2EJpyJxOUj3VYuamOVA1pY7EimoFPzaF3NeY7e4cFBAISC/Av0/tiV0xlFCt9q0HJ68IBIw==
 
-esbuild-linux-ppc64le@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.22.tgz#69d71b2820d5c94306072dac6094bae38e77d1c0"
-  integrity sha512-6t/GI9I+3o1EFm2AyN9+TsjdgWCpg2nwniEhjm2qJWtJyJ5VzTXGUU3alCO3evopu8G0hN2Bu1Jhz2YmZD0kng==
+esbuild-linux-ppc64le@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.23.tgz#a332dbc8a1b4e30cfe1261bfaa5cef57c9c8c02a"
+  integrity sha512-7ilAiJEPuJJnJp/LiDO0oJm5ygbBPzhchJJh9HsHZzeqO+3PUzItXi+8PuicY08r0AaaOe25LA7sGJ0MzbfBag==
 
-esbuild-linux-riscv64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.22.tgz#c0ec0fc3a23624deebf657781550d2329cec4213"
-  integrity sha512-AyJHipZKe88sc+tp5layovquw5cvz45QXw5SaDgAq2M911wLHiCvDtf/07oDx8eweCyzYzG5Y39Ih568amMTCQ==
+esbuild-linux-riscv64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.23.tgz#85675f3f931f5cd7cfb238fd82f77a62ffcb6d86"
+  integrity sha512-fbL3ggK2wY0D8I5raPIMPhpCvODFE+Bhb5QGtNP3r5aUsRR6TQV+ZBXIaw84iyvKC8vlXiA4fWLGhghAd/h/Zg==
 
-esbuild-linux-s390x@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.22.tgz#ec2af4572d63336cfb27f5a5c851fb1b6617dd91"
-  integrity sha512-Sz1NjZewTIXSblQDZWEFZYjOK6p8tV6hrshYdXZ0NHTjWE+lwxpOpWeElUGtEmiPcMT71FiuA9ODplqzzSxkzw==
+esbuild-linux-s390x@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.23.tgz#a526282a696e6d846f4c628f5315475518c0c0f0"
+  integrity sha512-GHMDCyfy7+FaNSO8RJ8KCFsnax8fLUsOrj9q5Gi2JmZMY0Zhp75keb5abTFCq2/Oy6KVcT0Dcbyo/bFb4rIFJA==
 
-esbuild-netbsd-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.22.tgz#0e283278e9fdbaa7f0930f93ee113d7759cd865e"
-  integrity sha512-TBbCtx+k32xydImsHxvFgsOCuFqCTGIxhzRNbgSL1Z2CKhzxwT92kQMhxort9N/fZM2CkRCPPs5wzQSamtzEHA==
+esbuild-netbsd-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.23.tgz#8e456605694719aa1be4be266d6cd569c06dfaf5"
+  integrity sha512-ovk2EX+3rrO1M2lowJfgMb/JPN1VwVYrx0QPUyudxkxLYrWeBxDKQvc6ffO+kB4QlDyTfdtAURrVzu3JeNdA2g==
 
-esbuild-openbsd-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.22.tgz#2a73bba04e16d8ef278fbe2be85248e12a2f2cc2"
-  integrity sha512-vK912As725haT313ANZZZN+0EysEEQXWC/+YE4rQvOQzLuxAQc2tjbzlAFREx3C8+uMuZj/q7E5gyVB7TzpcTA==
+esbuild-openbsd-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.23.tgz#f2fc51714b4ddabc86e4eb30ca101dd325db2f7d"
+  integrity sha512-uYYNqbVR+i7k8ojP/oIROAHO9lATLN7H2QeXKt2H310Fc8FJj4y3Wce6hx0VgnJ4k1JDrgbbiXM8rbEgQyg8KA==
 
-esbuild-sunos-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.22.tgz#8fe03513b8b2e682a6d79d5e3ca5849651a3c1d8"
-  integrity sha512-/mbJdXTW7MTcsPhtfDsDyPEOju9EOABvCjeUU2OJ7fWpX/Em/H3WYDa86tzLUbcVg++BScQDzqV/7RYw5XNY0g==
+esbuild-sunos-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.23.tgz#a408f33ea20e215909e20173a0fd78b1aaad1f8e"
+  integrity sha512-hAzeBeET0+SbScknPzS2LBY6FVDpgE+CsHSpe6CEoR51PApdn2IB0SyJX7vGelXzlyrnorM4CAsRyb9Qev4h9g==
 
-esbuild-windows-32@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.22.tgz#a75df61e3e49df292a1842be8e877a3153ee644f"
-  integrity sha512-1vRIkuvPTjeSVK3diVrnMLSbkuE36jxA+8zGLUOrT4bb7E/JZvDRhvtbWXWaveUc/7LbhaNFhHNvfPuSw2QOQg==
+esbuild-windows-32@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.23.tgz#b9005bbff54dac3975ff355d5de2b5e37165d128"
+  integrity sha512-Kttmi3JnohdaREbk6o9e25kieJR379TsEWF0l39PQVHXq3FR6sFKtVPgY8wk055o6IB+rllrzLnbqOw/UV60EA==
 
-esbuild-windows-64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.22.tgz#d06cf8bbe4945b8bf95a730d871e54a22f635941"
-  integrity sha512-AxjIDcOmx17vr31C5hp20HIwz1MymtMjKqX4qL6whPj0dT9lwxPexmLj6G1CpR3vFhui6m75EnBEe4QL82SYqw==
+esbuild-windows-64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.23.tgz#2b5a99befeaca6aefdad32d738b945730a60a060"
+  integrity sha512-JtIT0t8ymkpl6YlmOl6zoSWL5cnCgyLaBdf/SiU/Eg3C13r0NbHZWNT/RDEMKK91Y6t79kTs3vyRcNZbfu5a8g==
 
-esbuild-windows-arm64@0.14.22:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.22.tgz#f8b1b05c548073be8413a5ecb12d7c2f6e717227"
-  integrity sha512-5wvQ+39tHmRhNpu2Fx04l7QfeK3mQ9tKzDqqGR8n/4WUxsFxnVLfDRBGirIfk4AfWlxk60kqirlODPoT5LqMUg==
+esbuild-windows-arm64@0.14.23:
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.23.tgz#edc560bbadb097eb45fc235aeacb942cb94a38c0"
+  integrity sha512-cTFaQqT2+ik9e4hePvYtRZQ3pqOvKDVNarzql0VFIzhc0tru/ZgdLoXd6epLiKT+SzoSce6V9YJ+nn6RCn6SHw==
 
 esbuild@^0.14.14:
-  version "0.14.22"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.22.tgz#2b55fde89d7aa5aaaad791816d58ff9dfc5ed085"
-  integrity sha512-CjFCFGgYtbFOPrwZNJf7wsuzesx8kqwAffOlbYcFDLFuUtP8xloK1GH+Ai13Qr0RZQf9tE7LMTHJ2iVGJ1SKZA==
+  version "0.14.23"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.23.tgz#95e842cb22bc0c7d82c140adc16788aac91469fe"
+  integrity sha512-XjnIcZ9KB6lfonCa+jRguXyRYcldmkyZ99ieDksqW/C8bnyEX299yA4QH2XcgijCgaddEZePPTgvx/2imsq7Ig==
   optionalDependencies:
-    esbuild-android-arm64 "0.14.22"
-    esbuild-darwin-64 "0.14.22"
-    esbuild-darwin-arm64 "0.14.22"
-    esbuild-freebsd-64 "0.14.22"
-    esbuild-freebsd-arm64 "0.14.22"
-    esbuild-linux-32 "0.14.22"
-    esbuild-linux-64 "0.14.22"
-    esbuild-linux-arm "0.14.22"
-    esbuild-linux-arm64 "0.14.22"
-    esbuild-linux-mips64le "0.14.22"
-    esbuild-linux-ppc64le "0.14.22"
-    esbuild-linux-riscv64 "0.14.22"
-    esbuild-linux-s390x "0.14.22"
-    esbuild-netbsd-64 "0.14.22"
-    esbuild-openbsd-64 "0.14.22"
-    esbuild-sunos-64 "0.14.22"
-    esbuild-windows-32 "0.14.22"
-    esbuild-windows-64 "0.14.22"
-    esbuild-windows-arm64 "0.14.22"
+    esbuild-android-arm64 "0.14.23"
+    esbuild-darwin-64 "0.14.23"
+    esbuild-darwin-arm64 "0.14.23"
+    esbuild-freebsd-64 "0.14.23"
+    esbuild-freebsd-arm64 "0.14.23"
+    esbuild-linux-32 "0.14.23"
+    esbuild-linux-64 "0.14.23"
+    esbuild-linux-arm "0.14.23"
+    esbuild-linux-arm64 "0.14.23"
+    esbuild-linux-mips64le "0.14.23"
+    esbuild-linux-ppc64le "0.14.23"
+    esbuild-linux-riscv64 "0.14.23"
+    esbuild-linux-s390x "0.14.23"
+    esbuild-netbsd-64 "0.14.23"
+    esbuild-openbsd-64 "0.14.23"
+    esbuild-sunos-64 "0.14.23"
+    esbuild-windows-32 "0.14.23"
+    esbuild-windows-64 "0.14.23"
+    esbuild-windows-arm64 "0.14.23"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -1201,9 +1202,9 @@ formdata-polyfill@^4.0.10:
     fetch-blob "^3.1.2"
 
 fs-extra@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
-  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.1.tgz#27de43b4320e833f6867cc044bfce29fdf0ef3b8"
+  integrity sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==
   dependencies:
     graceful-fs "^4.2.0"
     jsonfile "^6.0.1"
@@ -1271,9 +1272,9 @@ has@^1.0.3:
     function-bind "^1.1.1"
 
 history@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c"
-  integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
   dependencies:
     "@babel/runtime" "^7.7.6"
 
@@ -1471,7 +1472,7 @@ multimatch@^4.0.0:
     arrify "^2.0.1"
     minimatch "^3.0.4"
 
-nanoid@^3.2.0:
+nanoid@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
   integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
@@ -1489,9 +1490,9 @@ node-fetch@^2.6.7:
     whatwg-url "^5.0.0"
 
 node-fetch@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.0.tgz#59390db4e489184fa35d4b74caf5510e8dfbaf3b"
-  integrity sha512-8xeimMwMItMw8hRrOl3C9/xzU49HV/yE6ORew/l+dxWimO5A4Ra8ld2rerlJvc/O7et5Z1zrWsPX43v1QBjCxw==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.1.tgz#002177382810cfb77858857f69a3621a86c45f26"
+  integrity sha512-Ef3SPFtRWFCDyhvcwCSvacLpkwmYZcD57mmZzAsMiks9TpHpIghe32U9H06tMICnr+X7YCpzH7WvUlUoml2urA==
   dependencies:
     data-uri-to-buffer "^4.0.0"
     fetch-blob "^3.1.4"
@@ -1600,11 +1601,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 postcss@^8.4.6:
-  version "8.4.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
-  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
+  version "8.4.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8"
+  integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==
   dependencies:
-    nanoid "^3.2.0"
+    nanoid "^3.3.1"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -1661,18 +1662,18 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
-  integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
+react-router-dom@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.2.tgz#f1a2c88365593c76b9612ae80154a13fcb72e442"
+  integrity sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==
   dependencies:
     history "^5.2.0"
-    react-router "6.2.1"
+    react-router "6.2.2"
 
-react-router@6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
-  integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
+react-router@6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.2.tgz#495e683a0c04461eeb3d705fe445d6cf42f0c249"
+  integrity sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==
   dependencies:
     history "^5.2.0"
 
@@ -1687,9 +1688,9 @@ react-transition-group@^4.4.2:
     prop-types "^15.6.2"
 
 react-virtuoso@^2.7.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.7.1.tgz#62408c9eeb9e7747be1c070fd635846891b7622a"
-  integrity sha512-isl04/UARFv75IQelKRLCLDIsS5a5V4tiU3kYXpTxXwGXZLwK7tFDimR3OYzkBamJ2dK3rT+DvfBb8C2Jteggg==
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-2.7.2.tgz#b2935ce182d47846c26277da4d5b576b2faeb481"
+  integrity sha512-EJm0e1hTpMK8xXzgtfbvr2dr2l2gek8p8dCJleJ6EJoQjr9sf+XCYkODThN1vTxhksvAT8uQxmxR5ASPDoS/uA==
   dependencies:
     "@virtuoso.dev/react-urx" "^0.2.12"
     "@virtuoso.dev/urx" "^0.2.12"
@@ -1741,9 +1742,9 @@ resolve@^1.12.0, resolve@^1.22.0:
     supports-preserve-symlinks-flag "^1.0.0"
 
 rollup@^2.59.0:
-  version "2.67.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.67.3.tgz#3f04391fc296f807d067c9081d173e0a33dbd37e"
-  integrity sha512-G/x1vUwbGtP6O5ZM8/sWr8+p7YfZhI18pPqMRtMYMWSbHjKZ/ajHGiM+GWNTlWyOR0EHIdT8LHU+Z4ciIZ1oBw==
+  version "2.69.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.69.0.tgz#82aa86682a45e9760146b736c1643bf435506156"
+  integrity sha512-kjER91tHyek8gAkuz7+558vSnTQ+pITEok1P0aNOS45ZXyngaqPsXJmSel4QPQnJo7EJMjXUU1/GErWkWiKORg==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -1753,9 +1754,9 @@ safe-buffer@~5.1.1:
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 sass@^1.49.7:
-  version "1.49.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828"
-  integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==
+  version "1.49.9"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
+  integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -1836,9 +1837,9 @@ supports-preserve-symlinks-flag@^1.0.0:
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 swr@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-1.2.1.tgz#c21a4fe2139cb1c4630450589b5b5add947a9d41"
-  integrity sha512-1cuWXqJqXcFwbgONGCY4PHZ8v05009JdHsC3CIC6u7d00kgbMswNr1sHnnhseOBxtzVqcCNpOHEgVDciRer45w==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.2.2.tgz#6cae09928d30593a7980d80f85823e57468fac5d"
+  integrity sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
@@ -1868,9 +1869,9 @@ type-fest@2.11.2:
   integrity sha512-reW2Y2Mpn0QNA/5fvtm5doROLwDPu2zOm5RtY7xQQS05Q7xgC8MOZ3yPNaP9m/s/sNjjFQtHo7VCNqYW2iI+Ig==
 
 typescript@^4.5.5:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
-  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
+  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
 
 universal-user-agent@^6.0.0:
   version "6.0.0"
@@ -1882,10 +1883,10 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-vite@^2.8.0:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.4.tgz#4e52a534289b7b4e94e646df2fc5556ceaa7336b"
-  integrity sha512-GwtOkkaT2LDI82uWZKcrpRQxP5tymLnC7hVHHqNkhFNknYr0hJUlDLfhVRgngJvAy3RwypkDCWtTKn1BjO96Dw==
+vite@^2.8.6:
+  version "2.8.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.6.tgz#32d50e23c99ca31b26b8ccdc78b1d72d4d7323d3"
+  integrity sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==
   dependencies:
     esbuild "^0.14.14"
     postcss "^8.4.6"