v0.0.11

.github/workflows/ci.yml

@@ -1,26 +1,24 @@
-name: Release Project
+name: CI
 
-on:
+on: [push]
-  push:
+
-    tags:
+env:
-      - v*
+  CARGO_INCREMENTAL: 0
+  RUST_BACKTRACE: short
 
 jobs:
-  build-tauri:
+  release:
     strategy:
-      fail-fast: false
       matrix:
-        platform: [windows-latest, macos-latest]
+        os: [windows-latest, macos-11]
-    runs-on: ${{ matrix.platform }}
+    runs-on: ${{ matrix.os }}
+    if: |
+      startsWith(github.repository, 'zzzgydi') &&
+      startsWith(github.ref, 'refs/tags/v')
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
 
-      - name: Install Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14
-
       - name: Install Rust
         uses: actions-rs/toolchain@v1
         with:
@@ -28,6 +26,14 @@ jobs:
           profile: minimal
           override: true
 
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@ce325b60658c1b38465c06cc965b79baf32c1e72
+
+      - name: Install Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
       - name: Get yarn cache dir path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -41,19 +47,18 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Rust Cache
-        uses: Swatinem/rust-cache@ce325b60658c1b38465c06cc965b79baf32c1e72
-
       - name: Yarn install and check
         run: yarn && yarn run check
 
       - name: Tauri build
         uses: tauri-apps/tauri-action@v0
+        # enable cache even though failed
+        continue-on-error: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           tagName: v__VERSION__
           releaseName: "Clash Verge v__VERSION__"
-          releaseBody: "This is a release."
+          releaseBody: "Clash Verge now supports Windows and macos(intel)."
-          releaseDraft: true
+          releaseDraft: false
-          prerelease: false
+          prerelease: true

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+update.json

README.md

@@ -26,7 +26,7 @@ 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).
 
 ```shell
-yarn run predev
+yarn run check
 ```
 
 Then run
@@ -42,8 +42,12 @@ yarn dev
 ## Screenshots
 
 <div align="center">
-  <img src="./docs/demo1.png" alt="demo1" width="42%" />
+  <img src="./docs/demo1.png" alt="demo1" width="32%" />
-  <img src="./docs/demo2.png" alt="demo2" width="42%" />
+  <img src="./docs/demo2.png" alt="demo2" width="32%" />
+  <img src="./docs/demo3.png" alt="demo3" width="32%" />
+  <img src="./docs/demo4.png" alt="demo4" width="32%" />
+  <img src="./docs/demo5.png" alt="demo5" width="32%" />
+  <img src="./docs/demo6.png" alt="demo6" width="32%" />
 </div>
 
 ## Disclaimer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "0.0.6",
+  "version": "0.0.11",
   "license": "GPL-3.0",
   "scripts": {
     "dev": "cargo tauri dev",

scripts/publish.mjs

@@ -11,10 +11,16 @@ async function resolvePublish() {
 
   let [a, b, c] = packageJson.version.split(".").map(Number);
 
-  if (flag === "major") a += 1;
+  if (flag === "major") {
-  else if (flag === "minor") b += 1;
+    a += 1;
-  else if (flag === "patch") c += 1;
+    b = 0;
-  else throw new Error(`invalid flag "${flag}"`);
+    c = 0;
+  } else if (flag === "minor") {
+    b += 1;
+    c = 0;
+  } else if (flag === "patch") {
+    c += 1;
+  } else throw new Error(`invalid flag "${flag}"`);
 
   const nextVersion = `${a}.${b}.${c}`;
   packageJson.version = nextVersion;

src-tauri/Cargo.lock

@@ -42,6 +42,7 @@ checksum = "84450d0b4a8bd1ba4144ce8ce718fbc5d071358b1e5384bace6536b3d1f2d5b3"
 name = "app"
 version = "0.1.0"
 dependencies = [
+ "auto-launch",
  "chrono",
  "dirs 4.0.0",
  "log",
@@ -54,8 +55,10 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-shadows",
+ "tauri-plugin-vibrancy",
  "tokio",
  "warp",
+ "which",
  "winreg 0.10.1",
 ]
 
@@ -144,6 +147,16 @@ dependencies = [
  "wildmatch",
 ]
 
+[[package]]
+name = "auto-launch"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f0ab475f9b1049a9d4e9c83f45ff27ec3bce4a6cb8e58e7f29030f8992af8c5"
+dependencies = [
+ "dirs 4.0.0",
+ "winreg 0.10.1",
+]
+
 [[package]]
 name = "autocfg"
 version = "1.0.1"
@@ -184,16 +197,16 @@ dependencies = [
 
 [[package]]
 name = "blake3"
-version = "1.2.0"
+version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "526c210b4520e416420759af363083471656e819a75e831b8d2c9d5a584f2413"
+checksum = "882e99e4a0cb2ae6cb6e442102e8e6b7131718d94110e64c3e6a34ea9b106f37"
 dependencies = [
  "arrayref",
  "arrayvec 0.7.2",
  "cc",
  "cfg-if 1.0.0",
  "constant_time_eq",
- "digest",
+ "digest 0.10.1",
  "rayon",
 ]
 
@@ -212,6 +225,15 @@ dependencies = [
  "generic-array",
 ]
 
+[[package]]
+name = "block-buffer"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1d36a02058e76b040de25a4464ba1c80935655595b661505c8b39b664828b95"
+dependencies = [
+ "generic-array",
+]
+
 [[package]]
 name = "bstr"
 version = "0.2.17"
@@ -233,9 +255,9 @@ dependencies = [
 
 [[package]]
 name = "bumpalo"
-version = "3.8.0"
+version = "3.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f1e260c3a9040a7c19a12468758f4c16f31a81a1fe087482be9570ec864bb6c"
+checksum = "a4a45a46ab1f2412e53d3a0ade76ffad2025804294569aae387231a0cd6e0899"
 
 [[package]]
 name = "byteorder"
@@ -377,8 +399,8 @@ dependencies = [
  "bitflags",
  "block",
  "cocoa-foundation",
- "core-foundation 0.9.2",
+ "core-foundation",
- "core-graphics 0.22.3",
+ "core-graphics",
  "foreign-types",
  "libc",
  "objc",
@@ -392,7 +414,7 @@ checksum = "7ade49b65d560ca58c403a479bb396592b155c0185eada742ee323d1d68d6318"
 dependencies = [
  "bitflags",
  "block",
- "core-foundation 0.9.2",
+ "core-foundation",
  "core-graphics-types",
  "foreign-types",
  "libc",
@@ -420,50 +442,22 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
 
-[[package]]
-name = "core-foundation"
-version = "0.7.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "57d24c7a13c43e870e37c1556b74555437870a04514f7685f5b354e090567171"
-dependencies = [
- "core-foundation-sys 0.7.0",
- "libc",
-]
-
 [[package]]
 name = "core-foundation"
 version = "0.9.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6888e10551bb93e424d8df1d07f1a8b4fceb0001a3a4b048bfc47554946f47b3"
 dependencies = [
- "core-foundation-sys 0.8.3",
+ "core-foundation-sys",
  "libc",
 ]
 
-[[package]]
-name = "core-foundation-sys"
-version = "0.7.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b3a71ab494c0b5b860bdc8407ae08978052417070c2ced38573a9157ad75b8ac"
-
 [[package]]
 name = "core-foundation-sys"
 version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5827cebf4670468b8772dd191856768aedcb1b0278a04f989f7766351917b9dc"
 
-[[package]]
-name = "core-graphics"
-version = "0.19.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b3889374e6ea6ab25dba90bb5d96202f61108058361f6dc72e8b03e6f8bbe923"
-dependencies = [
- "bitflags",
- "core-foundation 0.7.0",
- "foreign-types",
- "libc",
-]
-
 [[package]]
 name = "core-graphics"
 version = "0.22.3"
@@ -471,7 +465,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2581bbab3b8ffc6fcbd550bf46c355135d16e9ff2a6ea032ad6b9bf1d7efe4fb"
 dependencies = [
  "bitflags",
- "core-foundation 0.9.2",
+ "core-foundation",
  "core-graphics-types",
  "foreign-types",
  "libc",
@@ -484,24 +478,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a68b68b3446082644c91ac778bf50cd4104bfb002b5a6a7c44cca5a2c70788b"
 dependencies = [
  "bitflags",
- "core-foundation 0.9.2",
+ "core-foundation",
  "foreign-types",
  "libc",
 ]
 
-[[package]]
-name = "core-video-sys"
-version = "0.1.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "34ecad23610ad9757664d644e369246edde1803fcb43ed72876565098a5d3828"
-dependencies = [
- "cfg-if 0.1.10",
- "core-foundation-sys 0.7.0",
- "core-graphics 0.19.2",
- "libc",
- "objc",
-]
-
 [[package]]
 name = "cpufeatures"
 version = "0.2.1"
@@ -522,9 +503,9 @@ dependencies = [
 
 [[package]]
 name = "crossbeam-channel"
-version = "0.5.1"
+version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "06ed27e177f16d65f0f0c22a213e17c696ace5dd64b14258b52f9417ccb52db4"
+checksum = "e54ea8bc3fb1ee042f5aace6e3c6e025d3874866da222930f70ce62aceba0bfa"
 dependencies = [
  "cfg-if 1.0.0",
  "crossbeam-utils",
@@ -543,9 +524,9 @@ dependencies = [
 
 [[package]]
 name = "crossbeam-epoch"
-version = "0.9.5"
+version = "0.9.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ec02e091aa634e2c3ada4a392989e7c3116673ef0ac5b72232439094d73b7fd"
+checksum = "97242a70df9b89a65d0b6df3c4bf5b9ce03c5b7309019777fbde37e7537f8762"
 dependencies = [
  "cfg-if 1.0.0",
  "crossbeam-utils",
@@ -556,14 +537,23 @@ dependencies = [
 
 [[package]]
 name = "crossbeam-utils"
-version = "0.8.5"
+version = "0.8.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d82cfc11ce7f2c3faef78d8a684447b40d503d9681acebed6cb728d45940c4db"
+checksum = "cfcae03edb34f947e64acdb1c33ec169824e20657e9ecb61cef6c8c74dcb8120"
 dependencies = [
  "cfg-if 1.0.0",
  "lazy_static",
 ]
 
+[[package]]
+name = "crypto-common"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "683d6b536309245c849479fba3da410962a43ed8e51c26b729208ec0ac2798d0"
+dependencies = [
+ "generic-array",
+]
+
 [[package]]
 name = "cssparser"
 version = "0.27.2"
@@ -685,6 +675,18 @@ dependencies = [
  "generic-array",
 ]
 
+[[package]]
+name = "digest"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b697d66081d42af4fba142d56918a3cb21dc8eb63372c6b85d14f44fb9c5979b"
+dependencies = [
+ "block-buffer 0.10.0",
+ "crypto-common",
+ "generic-array",
+ "subtle",
+]
+
 [[package]]
 name = "dirs"
 version = "1.0.5"
@@ -766,9 +768,9 @@ checksum = "e78d4f1cc4ae33bbfc157ed5d5a5ef3bc29227303d595861deb238fcec4e9457"
 
 [[package]]
 name = "embed_plist"
-version = "1.2.0"
+version = "1.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53dd2e43a7d32952a6054141ee0d75183958620e84e5eab045de362dff13dc99"
+checksum = "4ef6b89e5b37196644d8796de5268852ff179b44e96276cf4290264843743bb7"
 
 [[package]]
 name = "encoding_rs"
@@ -1269,9 +1271,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.3.9"
+version = "0.3.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f072413d126e57991455e0a922b31e4c8ba7c2ffbebf6b78b4f8521397d65cd"
+checksum = "0c9de88456263e249e241fcd211d3954e2c9b0ef7ccfc235a444eb367cae3689"
 dependencies = [
  "bytes",
  "fnv",
@@ -1485,9 +1487,9 @@ dependencies = [
 
 [[package]]
 name = "indexmap"
-version = "1.7.0"
+version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bc633605454125dec4b66843673f01c7df2b89479b32e0ed634e43a91cff62a5"
+checksum = "282a6247722caba404c065016bbfa522806e51714c34f5dfc3e4a3a46fcb4223"
 dependencies = [
  "autocfg",
  "hashbrown",
@@ -2135,9 +2137,9 @@ dependencies = [
 
 [[package]]
 name = "ordered-float"
-version = "2.9.0"
+version = "2.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8aa3d135650b150c29f0c3e385896f9d3ceb42d2d87b02f0d7a8cbd0fc7e19a6"
+checksum = "7940cf2ca942593318d07fcf2596cdca60a85c9e7fab408a5e21a4f9dcd40d87"
 dependencies = [
  "num-traits",
 ]
@@ -2702,15 +2704,16 @@ dependencies = [
 
 [[package]]
 name = "reqwest"
-version = "0.11.8"
+version = "0.11.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7c4e0a76dc12a116108933f6301b95e83634e0c47b0afbed6abbaa0601e99258"
+checksum = "87f242f1488a539a79bac6dbe7c8609ae43b7914b7736210f239a37cccb32525"
 dependencies = [
  "base64",
  "bytes",
  "encoding_rs",
  "futures-core",
  "futures-util",
+ "h2",
  "http",
  "http-body",
  "hyper",
@@ -2844,8 +2847,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "525bc1abfda2e1998d152c45cf13e696f76d0a4972310b22fac1658b05df7c87"
 dependencies = [
  "bitflags",
- "core-foundation 0.9.2",
+ "core-foundation",
- "core-foundation-sys 0.8.3",
+ "core-foundation-sys",
  "libc",
  "security-framework-sys",
 ]
@@ -2856,7 +2859,7 @@ version = "2.4.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a9dd14d83160b528b7bfd66439110573efcfbe281b17fc2ca9f39f550d619c7e"
 dependencies = [
- "core-foundation-sys 0.8.3",
+ "core-foundation-sys",
  "libc",
 ]
 
@@ -2996,10 +2999,10 @@ version = "0.9.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "99cd6713db3cf16b6c84e06321e049a9b9f699826e16096d23bbcc44d15d51a6"
 dependencies = [
- "block-buffer",
+ "block-buffer 0.9.0",
  "cfg-if 1.0.0",
  "cpufeatures",
- "digest",
+ "digest 0.9.0",
  "opaque-debug",
 ]
 
@@ -3166,10 +3169,16 @@ dependencies = [
 ]
 
 [[package]]
-name = "syn"
+name = "subtle"
-version = "1.0.84"
+version = "2.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ecb2e6da8ee5eb9a61068762a32fa9619cc591ceb055b3687f4cd4051ec2e06b"
+checksum = "6bdef32e8150c2a081110b42772ffe7d7c9032b606bc226c8260fd97e0976601"
+
+[[package]]
+name = "syn"
+version = "1.0.85"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a684ac3dcd8913827e18cd09a68384ee66c1de24157e3c556c9ab16d85695fb7"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3210,15 +3219,14 @@ dependencies = [
 [[package]]
 name = "tao"
 version = "0.5.2"
-source = "git+https://github.com/tauri-apps/tao?branch=next#f8866a084afe18983c91c67401d8759697578a9c"
+source = "git+https://github.com/tauri-apps/tao?branch=next#a3a2e0cfc49ddfa8cdf65cf9870fb8e3d45b4bc0"
 dependencies = [
  "bitflags",
  "cairo-rs",
  "cc",
  "cocoa",
- "core-foundation 0.9.2",
+ "core-foundation",
- "core-graphics 0.22.3",
+ "core-graphics",
- "core-video-sys",
  "crossbeam-channel",
  "dispatch",
  "gdk",
@@ -3242,12 +3250,25 @@ dependencies = [
  "raw-window-handle",
  "scopeguard",
  "serde",
+ "tao-core-video-sys",
  "unicode-segmentation",
  "windows 0.29.0",
  "windows_macros",
  "x11-dl",
 ]
 
+[[package]]
+name = "tao-core-video-sys"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "271450eb289cb4d8d0720c6ce70c72c8c858c93dd61fc625881616752e6b98f6"
+dependencies = [
+ "cfg-if 1.0.0",
+ "core-foundation-sys",
+ "libc",
+ "objc",
+]
+
 [[package]]
 name = "tar"
 version = "0.4.38"
@@ -3262,7 +3283,7 @@ dependencies = [
 [[package]]
 name = "tauri"
 version = "1.0.0-beta.8"
-source = "git+https://github.com/tauri-apps/tauri?branch=next#46f2eae8aad7c6a228eaf48480d5603dae6454b4"
+source = "git+https://github.com/tauri-apps/tauri?branch=next#c6e05380f7a3b5de3a12db9414a0d7d96102737a"
 dependencies = [
  "attohttpc",
  "base64",
@@ -3324,7 +3345,7 @@ dependencies = [
 [[package]]
 name = "tauri-codegen"
 version = "1.0.0-beta.4"
-source = "git+https://github.com/tauri-apps/tauri?branch=next#46f2eae8aad7c6a228eaf48480d5603dae6454b4"
+source = "git+https://github.com/tauri-apps/tauri?branch=next#c6e05380f7a3b5de3a12db9414a0d7d96102737a"
 dependencies = [
  "blake3",
  "kuchiki",
@@ -3342,7 +3363,7 @@ dependencies = [
 [[package]]
 name = "tauri-macros"
 version = "1.0.0-beta.5"
-source = "git+https://github.com/tauri-apps/tauri?branch=next#46f2eae8aad7c6a228eaf48480d5603dae6454b4"
+source = "git+https://github.com/tauri-apps/tauri?branch=next#c6e05380f7a3b5de3a12db9414a0d7d96102737a"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3361,10 +3382,21 @@ dependencies = [
  "windows 0.29.0",
 ]
 
+[[package]]
+name = "tauri-plugin-vibrancy"
+version = "0.0.0"
+source = "git+https://github.com/tauri-apps/tauri-plugin-vibrancy#b4fceab0d4a6d024f1b9916c126f10f513101128"
+dependencies = [
+ "cocoa",
+ "objc",
+ "tauri",
+ "windows 0.29.0",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "0.2.1"
-source = "git+https://github.com/tauri-apps/tauri?branch=next#46f2eae8aad7c6a228eaf48480d5603dae6454b4"
+source = "git+https://github.com/tauri-apps/tauri?branch=next#c6e05380f7a3b5de3a12db9414a0d7d96102737a"
 dependencies = [
  "gtk",
  "http",
@@ -3382,7 +3414,7 @@ dependencies = [
 [[package]]
 name = "tauri-runtime-wry"
 version = "0.2.1"
-source = "git+https://github.com/tauri-apps/tauri?branch=next#46f2eae8aad7c6a228eaf48480d5603dae6454b4"
+source = "git+https://github.com/tauri-apps/tauri?branch=next#c6e05380f7a3b5de3a12db9414a0d7d96102737a"
 dependencies = [
  "gtk",
  "ico",
@@ -3417,7 +3449,7 @@ dependencies = [
 [[package]]
 name = "tauri-utils"
 version = "1.0.0-beta.3"
-source = "git+https://github.com/tauri-apps/tauri?branch=next#46f2eae8aad7c6a228eaf48480d5603dae6454b4"
+source = "git+https://github.com/tauri-apps/tauri?branch=next#c6e05380f7a3b5de3a12db9414a0d7d96102737a"
 dependencies = [
  "heck 0.4.0",
  "html5ever",
@@ -3434,13 +3466,13 @@ dependencies = [
 
 [[package]]
 name = "tempfile"
-version = "3.2.0"
+version = "3.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dac1c663cfc93810f88aed9b8941d48cabf856a1b111c29a40439018d870eb22"
+checksum = "5cdb1ef4eaeeaddc8fbd371e5017057064af0911902ef36b39801f67cc6d79e4"
 dependencies = [
  "cfg-if 1.0.0",
+ "fastrand",
  "libc",
- "rand 0.8.4",
  "redox_syscall 0.2.10",
  "remove_dir_all",
  "winapi",
@@ -4079,6 +4111,17 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "which"
+version = "4.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea187a8ef279bc014ec368c27a920da2024d2a711109bfbe3440585d5cf27ad9"
+dependencies = [
+ "either",
+ "lazy_static",
+ "libc",
+]
+
 [[package]]
 name = "wildmatch"
 version = "2.1.0"
@@ -4283,7 +4326,7 @@ version = "0.12.2"
 source = "git+https://github.com/tauri-apps/wry?rev=3284f8d442978269f7654edbdfc9bc51022eaa40#3284f8d442978269f7654edbdfc9bc51022eaa40"
 dependencies = [
  "cocoa",
- "core-graphics 0.22.3",
+ "core-graphics",
  "gdk",
  "gio",
  "glib",
@@ -4402,18 +4445,18 @@ dependencies = [
 
 [[package]]
 name = "zstd"
-version = "0.9.1+zstd.1.5.1"
+version = "0.9.2+zstd.1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "538b8347df9257b7fbce37677ef7535c00a3c7bf1f81023cc328ed7fe4b41de8"
+checksum = "2390ea1bf6c038c39674f22d95f0564725fc06034a47129179810b2fc58caa54"
 dependencies = [
  "zstd-safe",
 ]
 
 [[package]]
 name = "zstd-safe"
-version = "4.1.2+zstd.1.5.1"
+version = "4.1.3+zstd.1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9fb4cfe2f6e6d35c5d27ecd9d256c4b6f7933c4895654917460ec56c29336cc1"
+checksum = "e99d81b99fb3c2c2c794e3fe56c305c63d5173a16a46b5850b07c935ffc7db79"
 dependencies = [
  "libc",
  "zstd-sys",

src-tauri/Cargo.toml

@@ -20,14 +20,17 @@ serde_yaml = "0.8"
 serde = { version = "1.0", features = ["derive"] }
 # tauri = { version = "1.0.0-beta.8", features = ["api-all", "system-tray"] }
 # tauri = { git = "https://github.com/tauri-apps/tauri", rev = "5e0d59ec", features = ["api-all", "system-tray"] }
-tauri = { git = "https://github.com/tauri-apps/tauri", branch = "next",  features = ["api-all", "system-tray"] }
+tauri = { git = "https://github.com/tauri-apps/tauri", branch = "next",  features = ["api-all", "system-tray", "updater"] }
 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"] }
 
 reqwest = { version = "0.11", features = ["json"] }
 tokio = { version = "1", features = ["full"] }
 log = "0.4.14"
 log4rs = "1.0.0"
 warp = "0.3"
+which = "4.2.2"
+auto-launch = "0.2"
 port_scanner = "0.1.5"
 
 [target.'cfg(windows)'.dependencies]

src-tauri/src/cmds.rs

@@ -3,12 +3,14 @@ use crate::{
   states::{ClashState, ProfilesState, VergeState},
   utils::{
     config::{read_clash, save_clash},
+    dirs::app_home_dir,
     fetch::fetch_profile,
     sysopt::SysProxyConfig,
   },
 };
 use serde_yaml::Mapping;
-use tauri::{AppHandle, Manager, State};
+use std::process::Command;
+use tauri::State;
 
 /// get all profiles from `profiles.yaml`
 /// do not acquire the lock of ProfileLock
@@ -29,11 +31,15 @@ pub fn sync_profiles(profiles: State<'_, ProfilesState>) -> Result<(), String> {
   }
 }
 
-/// Import the profile from url
+/// import the profile from url
 /// and save to `profiles.yaml`
 #[tauri::command]
-pub async fn import_profile(url: String, profiles: State<'_, ProfilesState>) -> Result<(), String> {
+pub async fn import_profile(
-  match fetch_profile(&url).await {
+  url: String,
+  with_proxy: bool,
+  profiles: State<'_, ProfilesState>,
+) -> Result<(), String> {
+  match fetch_profile(&url, with_proxy).await {
     Some(result) => {
       let mut profiles = profiles.0.lock().unwrap();
       profiles.import_from_url(url, result)
@@ -43,12 +49,10 @@ pub async fn import_profile(url: String, profiles: State<'_, ProfilesState>) ->
 }
 
 /// Update the profile
-/// and save to `profiles.yaml`
-/// http request firstly
-/// then acquire the lock of `profiles.yaml`
 #[tauri::command]
 pub async fn update_profile(
   index: usize,
+  with_proxy: bool,
   clash: State<'_, ClashState>,
   profiles: State<'_, ProfilesState>,
 ) -> Result<(), String> {
@@ -69,7 +73,7 @@ pub async fn update_profile(
     Err(_) => return Err("failed to get profiles lock".into()),
   };
 
-  match fetch_profile(&url).await {
+  match fetch_profile(&url, with_proxy).await {
     Some(result) => match profiles.0.lock() {
       Ok(mut profiles) => {
         profiles.update_item(index, result)?;
@@ -140,12 +144,57 @@ pub fn patch_profile(
   }
 }
 
+/// run vscode command to edit the profile
+#[tauri::command]
+pub fn edit_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![]);
+
+  if index >= items.len() {
+    profiles.items = Some(items);
+    return Err("the index out of bound".into());
+  }
+
+  let file = items[index].file.clone().unwrap_or("".into());
+  profiles.items = Some(items);
+
+  let path = app_home_dir().join("profiles").join(file);
+  if !path.exists() {
+    return Err("failed to open the file".into());
+  }
+
+  match which::which("code") {
+    Ok(code) => match Command::new(code).arg(path).status() {
+      Ok(_) => Ok(()),
+      Err(_) => Err("failed to open file by VScode".into()),
+    },
+    Err(_) => Err("please install VScode for edit".into()),
+  }
+}
+
 /// restart the sidecar
 #[tauri::command]
-pub fn restart_sidecar(clash_state: State<'_, ClashState>) {
+pub fn restart_sidecar(
-  let mut clash_arc = clash_state.0.lock().unwrap();
+  clash_state: State<'_, ClashState>,
-  if let Err(err) = clash_arc.restart_sidecar() {
+  profiles_state: State<'_, ProfilesState>,
-    log::error!("{}", err);
+) -> Result<(), String> {
+  let mut clash = clash_state.0.lock().unwrap();
+
+  match clash.restart_sidecar() {
+    Ok(_) => {
+      let profiles = profiles_state.0.lock().unwrap();
+      match profiles.activate(clash.info.clone()) {
+        Ok(()) => Ok(()),
+        Err(err) => {
+          log::error!("{}", err);
+          Err(err)
+        }
+      }
+    }
+    Err(err) => {
+      log::error!("{}", err);
+      Err(err)
+    }
   }
 }
 
@@ -176,24 +225,7 @@ pub fn patch_clash_config(payload: Mapping) -> Result<(), String> {
   save_clash(&config)
 }
 
-/// set the system proxy
-/// Tips: only support windows now
-#[tauri::command]
-pub fn set_sys_proxy(enable: bool, verge_state: State<'_, VergeState>) -> Result<(), String> {
-  let mut verge = verge_state.0.lock().unwrap();
-
-  if let Some(mut sysproxy) = verge.cur_sysproxy.take() {
-    sysproxy.enable = enable;
-    if sysproxy.set_sys().is_err() {
-      log::error!("failed to set system proxy");
-    }
-    verge.cur_sysproxy = Some(sysproxy);
-  }
-  Ok(())
-}
-
 /// get the system proxy
-/// Tips: only support windows now
 #[tauri::command]
 pub fn get_sys_proxy() -> Result<SysProxyConfig, String> {
   match SysProxyConfig::get_sys() {
@@ -202,6 +234,8 @@ pub fn get_sys_proxy() -> Result<SysProxyConfig, String> {
   }
 }
 
+/// 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() {
@@ -227,44 +261,5 @@ pub async fn patch_verge_config(
   verge_state: State<'_, VergeState>,
 ) -> Result<(), String> {
   let mut verge = verge_state.0.lock().unwrap();
-
+  verge.patch_config(payload)
-  if payload.theme_mode.is_some() {
-    verge.config.theme_mode = payload.theme_mode;
-  }
-
-  if payload.enable_self_startup.is_some() {
-    verge.config.enable_self_startup = payload.enable_self_startup;
-  }
-
-  if payload.enable_system_proxy.is_some() {
-    verge.config.enable_system_proxy = payload.enable_system_proxy;
-  }
-
-  if payload.system_proxy_bypass.is_some() {
-    verge.config.system_proxy_bypass = payload.system_proxy_bypass;
-  }
-
-  verge.config.save_file()
-}
-
-/// start dragging window
-#[tauri::command]
-pub fn win_drag(app_handle: AppHandle) {
-  let window = app_handle.get_window("main").unwrap();
-  window.start_dragging().unwrap();
-}
-
-/// hide the window
-#[tauri::command]
-pub fn win_hide(app_handle: AppHandle) {
-  let window = app_handle.get_window("main").unwrap();
-  window.hide().unwrap();
-}
-
-/// mini the window
-#[tauri::command]
-pub fn win_mini(app_handle: AppHandle) {
-  let window = app_handle.get_window("main").unwrap();
-  // todo: these methods still has bug on Windows
-  window.minimize().unwrap();
 }

src-tauri/src/core/profiles.rs

@@ -312,7 +312,10 @@ pub async fn activate_profile(profile_item: &ProfileItem, info: &ClashInfo) -> R
   let mut data = HashMap::new();
   data.insert("path", temp_path.as_os_str().to_str().unwrap());
 
-  let client = reqwest::Client::new();
+  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())),

src-tauri/src/core/verge.rs

@@ -1,5 +1,7 @@
 use crate::utils::{config, dirs, sysopt::SysProxyConfig};
+use auto_launch::{AutoLaunch, AutoLaunchBuilder};
 use serde::{Deserialize, Serialize};
+use tauri::api::path::resource_dir;
 
 /// ### `verge.yaml` schema
 #[derive(Default, Debug, Clone, Deserialize, Serialize)]
@@ -7,8 +9,12 @@ pub struct VergeConfig {
   /// `light` or `dark`
   pub theme_mode: Option<String>,
 
+  /// enable blur mode
+  /// maybe be able to set the alpha
+  pub theme_blur: Option<bool>,
+
   /// can the app auto startup
-  pub enable_self_startup: Option<bool>,
+  pub enable_auto_launch: Option<bool>,
 
   /// set system proxy
   pub enable_system_proxy: Option<bool>,
@@ -34,6 +40,7 @@ impl VergeConfig {
   }
 }
 
+/// Verge App abilities
 #[derive(Debug)]
 pub struct Verge {
   pub config: VergeConfig,
@@ -41,6 +48,8 @@ pub struct Verge {
   pub old_sysproxy: Option<SysProxyConfig>,
 
   pub cur_sysproxy: Option<SysProxyConfig>,
+
+  pub auto_launch: Option<AutoLaunch>,
 }
 
 impl Default for Verge {
@@ -55,6 +64,7 @@ impl Verge {
       config: VergeConfig::new(),
       old_sysproxy: None,
       cur_sysproxy: None,
+      auto_launch: None,
     }
   }
 
@@ -90,4 +100,117 @@ 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).unwrap().join(app_path);
+    let app_path = app_path.as_os_str().to_str().unwrap();
+
+    let auto = AutoLaunchBuilder::new()
+      .set_app_name(app_name)
+      .set_app_path(app_path)
+      .build();
+
+    self.auto_launch = Some(auto);
+  }
+
+  /// sync the startup when run the app
+  pub fn sync_launch(&self) -> Result<(), String> {
+    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());
+    }
+
+    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());
+      }
+    }
+
+    Ok(())
+  }
+
+  /// update the startup
+  fn update_launch(&mut self, enable: bool) -> Result<(), String> {
+    let conf_enable = self.config.enable_auto_launch.clone().unwrap_or(false);
+
+    if enable == conf_enable {
+      return Ok(());
+    }
+
+    let auto_launch = self.auto_launch.clone().unwrap();
+
+    let result = if enable {
+      auto_launch.enable()
+    } else {
+      auto_launch.disable()
+    };
+
+    match result {
+      Ok(_) => Ok(()),
+      Err(_) => Err("failed to set system startup info".into()),
+    }
+  }
+
+  /// 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> {
+    // only change it
+    if patch.theme_mode.is_some() {
+      self.config.theme_mode = patch.theme_mode;
+    }
+    if patch.theme_blur.is_some() {
+      self.config.theme_blur = patch.theme_blur;
+    }
+
+    // should update system startup
+    if patch.enable_auto_launch.is_some() {
+      let enable = patch.enable_auto_launch.unwrap();
+      self.update_launch(enable)?;
+      self.config.enable_auto_launch = Some(enable);
+    }
+
+    // should update system proxy
+    if patch.enable_system_proxy.is_some() {
+      let enable = patch.enable_system_proxy.unwrap();
+      if let Some(mut sysproxy) = self.cur_sysproxy.take() {
+        sysproxy.enable = enable;
+        if sysproxy.set_sys().is_err() {
+          log::error!("failed to set system proxy");
+          return Err("failed to set system proxy".into());
+        }
+        self.cur_sysproxy = Some(sysproxy);
+      }
+      self.config.enable_system_proxy = Some(enable);
+    }
+
+    // todo
+    // should update system proxy too
+    if patch.system_proxy_bypass.is_some() {
+      self.config.system_proxy_bypass = patch.system_proxy_bypass;
+    }
+
+    self.config.save_file()
+  }
+}
+
+// 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 = ".app";
+  #[cfg(target_os = "windows")]
+  let ext = ".exe";
+  String::from(app_name) + ext
 }

src-tauri/src/main.rs

@@ -3,8 +3,6 @@
   windows_subsystem = "windows"
 )]
 
-extern crate tauri;
-
 mod cmds;
 mod core;
 mod states;
@@ -37,14 +35,22 @@ fn main() -> std::io::Result<()> {
       SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
         "open_window" => {
           let window = app_handle.get_window("main").unwrap();
+          window.unminimize().unwrap();
           window.show().unwrap();
           window.set_focus().unwrap();
         }
         "restart_clash" => {
           let clash_state = app_handle.state::<states::ClashState>();
-          let mut clash_arc = clash_state.0.lock().unwrap();
+          let mut clash = clash_state.0.lock().unwrap();
-          if let Err(err) = clash_arc.restart_sidecar() {
+          match clash.restart_sidecar() {
-            log::error!("{}", err);
+            Ok(_) => {
+              let profiles = app_handle.state::<states::ProfilesState>();
+              let profiles = profiles.0.lock().unwrap();
+              if let Err(err) = profiles.activate(clash.info.clone()) {
+                log::error!("{}", err);
+              }
+            }
+            Err(err) => log::error!("{}", err),
           }
         }
         "quit" => {
@@ -56,6 +62,7 @@ fn main() -> std::io::Result<()> {
       },
       SystemTrayEvent::LeftClick { .. } => {
         let window = app_handle.get_window("main").unwrap();
+        window.unminimize().unwrap();
         window.show().unwrap();
         window.set_focus().unwrap();
       }
@@ -64,12 +71,8 @@ fn main() -> std::io::Result<()> {
     .invoke_handler(tauri::generate_handler![
       // common
       cmds::restart_sidecar,
-      cmds::set_sys_proxy,
       cmds::get_sys_proxy,
       cmds::get_cur_proxy,
-      cmds::win_drag,
-      cmds::win_hide,
-      cmds::win_mini,
       // clash
       cmds::get_clash_info,
       cmds::patch_clash_config,
@@ -77,13 +80,14 @@ fn main() -> std::io::Result<()> {
       cmds::get_verge_config,
       cmds::patch_verge_config,
       // profile
+      cmds::edit_profile,
+      cmds::patch_profile,
       cmds::import_profile,
       cmds::update_profile,
       cmds::delete_profile,
       cmds::select_profile,
-      cmds::patch_profile,
-      cmds::sync_profiles,
       cmds::get_profiles,
+      cmds::sync_profiles,
     ])
     .build(tauri::generate_context!())
     .expect("error while running tauri application")

src-tauri/src/utils/fetch.rs

@@ -23,11 +23,20 @@ fn parse_string<T: FromStr>(target: &str, key: &str) -> Option<T> {
 }
 
 /// fetch and parse the profile
-pub async fn fetch_profile(url: &str) -> Option<ProfileResponse> {
+pub async fn fetch_profile(url: &str, with_proxy: bool) -> Option<ProfileResponse> {
-  let resp = match reqwest::get(url).await {
+  let builder = reqwest::ClientBuilder::new();
-    Ok(res) => res,
+  let client = match with_proxy {
+    true => builder.build(),
+    false => builder.no_proxy().build(),
+  };
+  let resp = match client {
+    Ok(client) => match client.get(url).send().await {
+      Ok(res) => res,
+      Err(_) => return None,
+    },
     Err(_) => return None,
   };
+
   let header = resp.headers();
 
   // parse the Subscription Userinfo

src-tauri/src/utils/resolve.rs

@@ -9,6 +9,16 @@ pub fn resolve_setup(app: &App) {
   let window = app.get_window("main").unwrap();
   window.set_shadow(true);
 
+  // enable system blur
+  use tauri_plugin_vibrancy::Vibrancy;
+  #[cfg(target_os = "windows")]
+  window.apply_blur();
+  #[cfg(target_os = "macos")]
+  {
+    use tauri_plugin_vibrancy::MacOSVibrancy;
+    window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
+  }
+
   // setup a simple http server for singleton
   server::embed_server(&app.handle());
 
@@ -34,6 +44,10 @@ pub fn resolve_setup(app: &App) {
   }
 
   verge.init_sysproxy(clash.info.port.clone());
+  verge.init_launch(app.package_info());
+  if let Err(err) = verge.sync_launch() {
+    log::error!("{}", err);
+  }
 }
 
 /// reset system proxy

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "clash-verge",
-    "version": "0.0.6"
+    "version": "0.0.11"
   },
   "build": {
     "distDir": "../dist",
@@ -50,7 +50,11 @@
       }
     },
     "updater": {
-      "active": false
+      "active": true,
+      "endpoints": [
+        "https://github.com/zzzgydi/clash-verge/releases/download/updater/update.json"
+      ],
+      "dialog": false
     },
     "allowlist": {
       "all": true
@@ -63,7 +67,7 @@
         "resizable": true,
         "fullscreen": false,
         "decorations": false,
-        "transparent": false,
+        "transparent": true,
         "minWidth": 600,
         "minHeight": 520
       }

src/assets/styles/index.scss

@@ -28,3 +28,4 @@ body {
 }
 
 @import "./layout.scss";
+@import "./page.scss";

src/assets/styles/layout.scss

@@ -17,6 +17,7 @@
     overflow: hidden;
 
     .the-logo {
+      position: relative;
       flex: 0 1 180px;
       width: 100%;
       max-width: 180px;
@@ -25,6 +26,17 @@
       padding: 0 8px;
       text-align: center;
       box-sizing: border-box;
+
+      img {
+        width: 100%;
+      }
+
+      .the-newbtn {
+        position: absolute;
+        right: 20px;
+        bottom: 12px;
+        transform: scale(0.8);
+      }
     }
 
     .the-menu {
@@ -46,27 +58,24 @@
     position: relative;
     flex: 1 1 75%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 2px 0;
-    box-sizing: border-box;
 
     .the-bar {
-      flex: 0 0 30px;
+      position: absolute;
-      width: 100%;
+      top: 2px;
-      height: 30px;
+      right: 8px;
-      padding: 0 16px;
+      height: 36px;
       display: flex;
       align-items: center;
-      justify-content: flex-end;
       box-sizing: border-box;
+      z-index: 2;
     }
 
     .the-content {
-      flex: 1 1 100%;
+      position: absolute;
-      overflow: auto;
+      left: 0;
-      box-sizing: border-box;
+      right: 0;
-      scrollbar-gutter: stable;
+      top: 30px;
+      bottom: 10px;
     }
   }
 }

src/assets/styles/page.scss

@@ -0,0 +1,33 @@
+.base-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > header {
+    flex: 0 0 58px;
+    width: 90%;
+    max-width: 850px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  > section {
+    position: relative;
+    flex: 1 1 100%;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    padding: 8px 0;
+    box-sizing: border-box;
+    scrollbar-gutter: stable;
+
+    .base-content {
+      width: 90%;
+      max-width: 850px;
+      margin: 0 auto;
+    }
+  }
+}

src/components/base-page.tsx

@@ -0,0 +1,32 @@
+import { Typography } from "@mui/material";
+import React from "react";
+
+interface Props {
+  title?: React.ReactNode; // the page title
+  header?: React.ReactNode; // something behind title
+  contentStyle?: React.CSSProperties;
+}
+
+const BasePage: React.FC<Props> = (props) => {
+  const { title, header, contentStyle, children } = props;
+
+  return (
+    <div className="base-page" data-windrag>
+      <header data-windrag>
+        <Typography variant="h4" component="h1">
+          {title}
+        </Typography>
+
+        {header}
+      </header>
+
+      <section data-windrag>
+        <div className="base-content" style={contentStyle} data-windrag>
+          {children}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default BasePage;

src/components/layout-control.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@mui/material";
+import { appWindow } from "@tauri-apps/api/window";
+import {
+  CloseRounded,
+  CropSquareRounded,
+  HorizontalRuleRounded,
+} from "@mui/icons-material";
+
+const LayoutControl = () => {
+  const minWidth = 40;
+
+  return (
+    <>
+      <Button
+        size="small"
+        sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
+        onClick={() => appWindow.minimize()}
+      >
+        <HorizontalRuleRounded fontSize="small" />
+      </Button>
+
+      <Button
+        size="small"
+        sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
+        onClick={() => appWindow.toggleMaximize()}
+      >
+        <CropSquareRounded fontSize="small" />
+      </Button>
+
+      <Button
+        size="small"
+        sx={{ minWidth, svg: { transform: "scale(1.05)" } }}
+        onClick={() => appWindow.hide()}
+      >
+        <CloseRounded fontSize="small" />
+      </Button>
+    </>
+  );
+};
+
+export default LayoutControl;

src/components/notice.tsx

@@ -0,0 +1,92 @@
+import ReactDOM from "react-dom";
+import { ReactNode, useState } from "react";
+import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
+import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
+
+interface InnerProps {
+  type: string;
+  duration?: number;
+  message: ReactNode;
+  onClose: () => void;
+}
+
+const NoticeInner = (props: InnerProps) => {
+  const { type, message, duration = 2000, onClose } = props;
+  const [visible, setVisible] = useState(true);
+
+  const onBtnClose = () => {
+    setVisible(false);
+    onClose();
+  };
+  const onAutoClose = (_e: any, reason: string) => {
+    if (reason !== "clickaway") onBtnClose();
+  };
+
+  const msgElement =
+    type === "info" ? (
+      message
+    ) : (
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        {type === "error" && <ErrorRounded color="error" />}
+        {type === "success" && <CheckCircleRounded color="success" />}
+
+        <Typography
+          sx={{ ml: 1, wordWrap: "break-word", wordBreak: "break-all" }}
+        >
+          {message}
+        </Typography>
+      </Box>
+    );
+
+  return (
+    <Snackbar
+      open={visible}
+      anchorOrigin={{ vertical: "top", horizontal: "right" }}
+      autoHideDuration={duration}
+      onClose={onAutoClose}
+      message={msgElement}
+      sx={{ maxWidth: 360 }}
+      TransitionComponent={(p) => <Slide {...p} direction="left" />}
+      transitionDuration={200}
+      action={
+        <IconButton size="small" color="inherit" onClick={onBtnClose}>
+          <Close fontSize="inherit" />
+        </IconButton>
+      }
+    />
+  );
+};
+
+interface NoticeInstance {
+  (props: Omit<InnerProps, "onClose">): void;
+
+  info(message: ReactNode, duration?: number): void;
+  error(message: ReactNode, duration?: number): void;
+  success(message: ReactNode, duration?: number): void;
+}
+
+let parent: HTMLDivElement = null!;
+
+// @ts-ignore
+const Notice: NoticeInstance = (props) => {
+  if (!parent) {
+    parent = document.createElement("div");
+    document.body.appendChild(parent);
+  }
+
+  const container = document.createElement("div");
+  parent.appendChild(container);
+
+  const onUnmount = () => {
+    const result = ReactDOM.unmountComponentAtNode(container);
+    if (result && parent) parent.removeChild(container);
+  };
+
+  ReactDOM.render(<NoticeInner {...props} onClose={onUnmount} />, container);
+};
+
+(["info", "error", "success"] as const).forEach((type) => {
+  Notice[type] = (message, duration) => Notice({ type, message, duration });
+});
+
+export default Notice;

src/components/profile-item.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import dayjs from "dayjs";
 import {
   alpha,
@@ -14,7 +14,8 @@ import {
 import { useSWRConfig } from "swr";
 import { RefreshRounded } from "@mui/icons-material";
 import { CmdType } from "../services/types";
-import { updateProfile, deleteProfile } from "../services/cmds";
+import { updateProfile, deleteProfile, editProfile } from "../services/cmds";
+import Notice from "./notice";
 import parseTraffic from "../utils/parse-traffic";
 import relativeTime from "dayjs/plugin/relativeTime";
 
@@ -32,19 +33,19 @@ const Wrapper = styled(Box)(({ theme }) => ({
 }));
 
 const round = keyframes`
-from { transform: rotate(0deg); }
+  from { transform: rotate(0deg); }
-to { transform: rotate(360deg); }
+  to { transform: rotate(360deg); }
 `;
 
 interface Props {
   index: number;
   selected: boolean;
   itemData: CmdType.ProfileItem;
-  onClick: () => void;
+  onSelect: (force: boolean) => void;
 }
 
-const ProfileItemComp: React.FC<Props> = (props) => {
+const ProfileItem: React.FC<Props> = (props) => {
-  const { index, selected, itemData, onClick } = props;
+  const { index, selected, itemData, onSelect } = props;
 
   const { mutate } = useSWRConfig();
   const [loading, setLoading] = useState(false);
@@ -58,27 +59,46 @@ const ProfileItemComp: React.FC<Props> = (props) => {
   const progress = Math.round(((download + upload) * 100) / (total + 0.1));
   const fromnow = updated > 0 ? dayjs(updated * 1000).fromNow() : "";
 
-  const onUpdate = async () => {
+  const onEdit = async () => {
+    setAnchorEl(null);
+    try {
+      await editProfile(index);
+    } catch (err: any) {
+      Notice.error(err.toString());
+    }
+  };
+
+  const onForceSelect = () => {
+    setAnchorEl(null);
+    onSelect(true);
+  };
+
+  const onUpdateWrapper = (withProxy: boolean) => async () => {
     setAnchorEl(null);
     if (loading) return;
     setLoading(true);
     try {
-      await updateProfile(index);
+      await updateProfile(index, withProxy);
       mutate("getProfiles");
-    } catch (err) {
+    } catch (err: any) {
-      console.error(err);
+      Notice.error(err.toString());
     } finally {
       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) {
+    } catch (err: any) {
-      console.error(err);
+      Notice.error(err.toString());
+    } finally {
+      deleteRef.current = false;
     }
   };
 
@@ -121,7 +141,7 @@ const ProfileItemComp: React.FC<Props> = (props) => {
 
           return { bgcolor, color, "& h2": { color: h2color } };
         }}
-        onClick={onClick}
+        onClick={() => onSelect(false)}
         onContextMenu={handleContextMenu}
       >
         <Box display="flex" justifyContent="space-between">
@@ -145,7 +165,7 @@ const ProfileItemComp: React.FC<Props> = (props) => {
             disabled={loading}
             onClick={(e) => {
               e.stopPropagation();
-              onUpdate();
+              onUpdateWrapper(false)();
             }}
           >
             <RefreshRounded />
@@ -196,9 +216,11 @@ const ProfileItemComp: React.FC<Props> = (props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
       >
-        <MenuItem onClick={onUpdate}>Update</MenuItem>
+        <MenuItem onClick={onForceSelect}>Select</MenuItem>
+        <MenuItem onClick={onEdit}>Edit(VScode)</MenuItem>
+        <MenuItem onClick={onUpdateWrapper(false)}>Update</MenuItem>
+        <MenuItem onClick={onUpdateWrapper(true)}>Update(Proxy)</MenuItem>
         <MenuItem onClick={onDelete}>Delete</MenuItem>
-        {/* <MenuItem>Update(proxy)</MenuItem> */}
       </Menu>
     </>
   );
@@ -216,4 +238,4 @@ function parseExpire(expire?: number) {
   return dayjs(expire * 1000).format("YYYY-MM-DD");
 }
 
-export default ProfileItemComp;
+export default ProfileItem;

src/components/proxy-group.tsx

@@ -1,15 +1,12 @@
 import { useState } from "react";
 import { Virtuoso } from "react-virtuoso";
 import {
-  alpha,
   Box,
   Collapse,
   Divider,
   IconButton,
   List,
   ListItem,
-  ListItemButton,
-  ListItemIcon,
   ListItemText,
 } from "@mui/material";
 import {
@@ -18,53 +15,11 @@ import {
   ExpandMoreRounded,
   MyLocationRounded,
   NetworkCheckRounded,
-  CheckCircleOutlineRounded,
 } from "@mui/icons-material";
 import { updateProxy } from "../services/api";
 import { ApiType } from "../services/types";
 import { getProfiles, patchProfile } from "../services/cmds";
-
+import ProxyItem from "./proxy-item";
-interface ItemProps {
-  proxy: ApiType.ProxyItem;
-  selected: boolean;
-  onClick?: (name: string) => void;
-}
-
-const Item = ({ proxy, selected, onClick }: ItemProps) => {
-  return (
-    <ListItem sx={{ py: 0, pl: 4 }}>
-      <ListItemButton
-        dense
-        selected={selected}
-        onClick={() => onClick?.(proxy.name)}
-        sx={[
-          {
-            borderRadius: 1,
-          },
-          ({ palette: { mode, primary } }) => {
-            const bgcolor =
-              mode === "light"
-                ? alpha(primary.main, 0.15)
-                : alpha(primary.main, 0.35);
-            const color = mode === "light" ? primary.main : primary.light;
-
-            return {
-              "&.Mui-selected": { bgcolor },
-              "&.Mui-selected .MuiListItemText-secondary": { color },
-            };
-          },
-        ]}
-      >
-        <ListItemText title={proxy.name} secondary={proxy.name} />
-        <ListItemIcon
-          sx={{ justifyContent: "flex-end", color: "primary.main" }}
-        >
-          {selected && <CheckCircleOutlineRounded sx={{ fontSize: 16 }} />}
-        </ListItemIcon>
-      </ListItemButton>
-    </ListItem>
-  );
-};
 
 interface Props {
   group: ApiType.ProxyGroupItem;
@@ -143,12 +98,13 @@ const ProxyGroup = ({ group }: Props) => {
 
         {proxies.length >= 10 ? (
           <Virtuoso
-            style={{ height: "400px", marginBottom: "4px" }}
+            style={{ height: "320px", marginBottom: "4px" }}
             totalCount={proxies.length}
             itemContent={(index) => (
-              <Item
+              <ProxyItem
                 proxy={proxies[index]}
                 selected={proxies[index].name === now}
+                sx={{ py: 0, pl: 4 }}
                 onClick={onUpdate}
               />
             )}
@@ -157,13 +113,14 @@ const ProxyGroup = ({ group }: Props) => {
           <List
             component="div"
             disablePadding
-            sx={{ maxHeight: "400px", overflow: "auto", mb: "4px" }}
+            sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
           >
             {proxies.map((proxy) => (
-              <Item
+              <ProxyItem
                 key={proxy.name}
                 proxy={proxy}
                 selected={proxy.name === now}
+                sx={{ py: 0, pl: 4 }}
                 onClick={onUpdate}
               />
             ))}

src/components/proxy-item.tsx

@@ -0,0 +1,58 @@
+import { CheckCircleOutlineRounded } from "@mui/icons-material";
+import {
+  alpha,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  SxProps,
+  Theme,
+} from "@mui/material";
+import { ApiType } from "../services/types";
+
+interface Props {
+  proxy: ApiType.ProxyItem;
+  selected: boolean;
+  sx?: SxProps<Theme>;
+  onClick?: (name: string) => void;
+}
+
+const ProxyItem = (props: Props) => {
+  const { proxy, selected, sx, onClick } = props;
+
+  return (
+    <ListItem sx={sx}>
+      <ListItemButton
+        dense
+        selected={selected}
+        onClick={() => onClick?.(proxy.name)}
+        sx={[
+          {
+            borderRadius: 1,
+          },
+          ({ palette: { mode, primary } }) => {
+            const bgcolor =
+              mode === "light"
+                ? alpha(primary.main, 0.15)
+                : alpha(primary.main, 0.35);
+            const color = mode === "light" ? primary.main : primary.light;
+
+            return {
+              "&.Mui-selected": { bgcolor },
+              "&.Mui-selected .MuiListItemText-secondary": { color },
+            };
+          },
+        ]}
+      >
+        <ListItemText title={proxy.name} secondary={proxy.name} />
+        <ListItemIcon
+          sx={{ justifyContent: "flex-end", color: "primary.main" }}
+        >
+          {selected && <CheckCircleOutlineRounded sx={{ fontSize: 16 }} />}
+        </ListItemIcon>
+      </ListItemButton>
+    </ListItem>
+  );
+};
+
+export default ProxyItem;

src/components/setting-item.tsx

@@ -1,8 +0,0 @@
-import { ListItem, styled } from "@mui/material";
-
-const SettingItem = styled(ListItem)(() => ({
-  paddingTop: 5,
-  paddingBottom: 5,
-}));
-
-export default SettingItem;

src/components/setting-verge.tsx

@@ -1,103 +0,0 @@
-import useSWR, { useSWRConfig } from "swr";
-import {
-  List,
-  ListItemText,
-  ListSubheader,
-  Switch,
-  Typography,
-} from "@mui/material";
-import {
-  getVergeConfig,
-  patchVergeConfig,
-  setSysProxy,
-} from "../services/cmds";
-import { CmdType } from "../services/types";
-import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
-import PaletteSwitch from "./palette-switch";
-import { version } from "../../package.json";
-
-interface Props {
-  onError?: (err: Error) => void;
-}
-
-const SettingVerge = ({ onError }: Props) => {
-  const { mutate } = useSWRConfig();
-  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
-
-  const {
-    theme_mode: mode = "light",
-    enable_self_startup: startup = false,
-    enable_system_proxy: proxy = false,
-  } = vergeConfig ?? {};
-
-  const onSwitchFormat = (_e: any, value: boolean) => value;
-
-  const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
-    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
-  };
-
-  return (
-    <List>
-      <ListSubheader sx={{ background: "transparent" }}>
-        Common Setting
-      </ListSubheader>
-
-      <SettingItem>
-        <ListItemText primary="Theme Mode" />
-        <GuardState
-          value={mode === "dark"}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
-          onGuard={async (c) => {
-            await patchVergeConfig({ theme_mode: c ? "dark" : "light" });
-          }}
-        >
-          <PaletteSwitch edge="end" />
-        </GuardState>
-      </SettingItem>
-
-      <SettingItem>
-        <ListItemText primary="Self Start" />
-        <GuardState
-          value={startup}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_self_startup: e })}
-          onGuard={async (e) => {
-            await patchVergeConfig({ enable_self_startup: e });
-          }}
-        >
-          <Switch edge="end" />
-        </GuardState>
-      </SettingItem>
-
-      <SettingItem>
-        <ListItemText primary="System Proxy" />
-        <GuardState
-          value={proxy}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ enable_system_proxy: e })}
-          onGuard={async (e) => {
-            await setSysProxy(e);
-            await patchVergeConfig({ enable_system_proxy: e });
-          }}
-        >
-          <Switch edge="end" />
-        </GuardState>
-      </SettingItem>
-
-      <SettingItem>
-        <ListItemText primary="Version" />
-        <Typography sx={{ py: "6px" }}>v{version}</Typography>
-      </SettingItem>
-    </List>
-  );
-};
-
-export default SettingVerge;

src/components/setting/guard-state.tsx

@@ -1,5 +1,5 @@
 import { cloneElement, isValidElement, ReactNode, useRef } from "react";
-import noop from "../utils/noop";
+import noop from "../../utils/noop";
 
 interface Props<Value> {
   value?: Value;

src/components/setting/setting-clash.tsx

@@ -1,18 +1,16 @@
 import useSWR, { useSWRConfig } from "swr";
 import {
-  List,
   ListItemText,
-  ListSubheader,
   TextField,
   Switch,
   Select,
   MenuItem,
 } from "@mui/material";
-import { getClashConfig, updateConfigs } from "../services/api";
+import { getClashConfig, updateConfigs } from "../../services/api";
-import { patchClashConfig } from "../services/cmds";
+import { SettingList, SettingItem } from "./setting";
-import { ApiType } from "../services/types";
+import { patchClashConfig } from "../../services/cmds";
+import { ApiType } from "../../services/types";
 import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -30,22 +28,16 @@ const SettingClash = ({ onError }: Props) => {
   } = clashConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
-
   const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
     mutate("getClashConfig", { ...clashConfig, ...patch }, false);
   };
-
   const onUpdateData = async (patch: Partial<ApiType.ConfigData>) => {
     await updateConfigs(patch);
     await patchClashConfig(patch);
   };
 
   return (
-    <List>
+    <SettingList title="Clash Setting">
-      <ListSubheader sx={{ background: "transparent" }}>
-        Clash Setting
-      </ListSubheader>
-
       <SettingItem>
         <ListItemText primary="Allow Lan" />
         <GuardState
@@ -102,7 +94,7 @@ const SettingClash = ({ onError }: Props) => {
           disabled
         />
       </SettingItem>
-    </List>
+    </SettingList>
   );
 };
 

src/components/setting/setting-system.tsx

@@ -0,0 +1,67 @@
+import useSWR, { useSWRConfig } from "swr";
+import { Box, ListItemText, Switch } from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { SettingList, SettingItem } from "./setting";
+import { CmdType } from "../../services/types";
+import GuardState from "./guard-state";
+import SysproxyTooltip from "./sysproxy-tooltip";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingSystem = ({ onError }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  const {
+    enable_auto_launch: startup = false,
+    enable_system_proxy: proxy = false,
+  } = vergeConfig ?? {};
+
+  const onSwitchFormat = (_e: any, value: boolean) => value;
+  const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
+    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+  };
+
+  return (
+    <SettingList title="System Setting">
+      <SettingItem>
+        <ListItemText primary="Auto Launch" />
+        <GuardState
+          value={startup}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_auto_launch: e })}
+          onGuard={(e) => patchVergeConfig({ enable_auto_launch: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText
+          primary={
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              System Proxy
+              <SysproxyTooltip />
+            </Box>
+          }
+        />
+        <GuardState
+          value={proxy}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ enable_system_proxy: e })}
+          onGuard={(e) => patchVergeConfig({ enable_system_proxy: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+    </SettingList>
+  );
+};
+
+export default SettingSystem;

src/components/setting/setting-verge.tsx

@@ -0,0 +1,66 @@
+import useSWR, { useSWRConfig } from "swr";
+import { ListItemText, Switch, Typography } from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { SettingList, SettingItem } from "./setting";
+import { CmdType } from "../../services/types";
+import { version } from "../../../package.json";
+import GuardState from "./guard-state";
+import PaletteSwitch from "./palette-switch";
+
+interface Props {
+  onError?: (err: Error) => void;
+}
+
+const SettingVerge = ({ onError }: Props) => {
+  const { mutate } = useSWRConfig();
+  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+
+  const { theme_mode: mode = "light", theme_blur: blur = false } =
+    vergeConfig ?? {};
+
+  const onSwitchFormat = (_e: any, value: boolean) => value;
+  const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
+    mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
+  };
+
+  return (
+    <SettingList title="Verge Setting">
+      <SettingItem>
+        <ListItemText primary="Theme Mode" />
+        <GuardState
+          value={mode === "dark"}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
+          onGuard={(c) =>
+            patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+          }
+        >
+          <PaletteSwitch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Theme Blur" />
+        <GuardState
+          value={blur}
+          valueProps="checked"
+          onCatch={onError}
+          onFormat={onSwitchFormat}
+          onChange={(e) => onChangeData({ theme_blur: e })}
+          onGuard={(e) => patchVergeConfig({ theme_blur: e })}
+        >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Version" />
+        <Typography sx={{ py: "6px" }}>v{version}</Typography>
+      </SettingItem>
+    </SettingList>
+  );
+};
+
+export default SettingVerge;

src/components/setting/setting.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { List, ListItem, ListSubheader, styled } from "@mui/material";
+
+export const SettingItem = styled(ListItem)(() => ({
+  paddingTop: 5,
+  paddingBottom: 5,
+}));
+
+export const SettingList: React.FC<{ title: string }> = (props) => (
+  <List>
+    <ListSubheader sx={{ background: "transparent" }} disableSticky>
+      {props.title}
+    </ListSubheader>
+
+    {props.children}
+  </List>
+);

src/components/setting/sysproxy-tooltip.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { InfoRounded } from "@mui/icons-material";
+import { ClickAwayListener, Tooltip } from "@mui/material";
+import { getSystemProxy } from "../../services/cmds";
+
+const SysproxyTooltip = () => {
+  const [open, setOpen] = useState(false);
+  const [info, setInfo] = useState<any>({});
+
+  const onShow = async () => {
+    const data = await getSystemProxy();
+    setInfo(data ?? {});
+    setOpen(true);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => setOpen(false), 2000);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  // todo: add error info
+  const showTitle = (
+    <div>
+      <div>Enable: {(!!info.enable).toString()}</div>
+      <div>Server: {info.server}</div>
+      <div>Bypass: {info.bypass}</div>
+    </div>
+  );
+
+  return (
+    <ClickAwayListener onClickAway={() => setOpen(false)}>
+      <Tooltip
+        PopperProps={{
+          disablePortal: true,
+        }}
+        onClose={() => setOpen(false)}
+        open={open}
+        disableFocusListener
+        disableHoverListener
+        disableTouchListener
+        placement="top"
+        title={showTitle}
+        arrow
+      >
+        <InfoRounded fontSize="small" onClick={onShow} />
+      </Tooltip>
+    </ClickAwayListener>
+  );
+};
+
+export default SysproxyTooltip;

src/components/update-button.tsx

@@ -0,0 +1,40 @@
+import useSWR from "swr";
+import { useState } from "react";
+import { Button } from "@mui/material";
+import { checkUpdate } from "@tauri-apps/api/updater";
+import UpdateDialog from "./update-dialog";
+
+interface Props {
+  className?: string;
+}
+
+const UpdateButton = (props: Props) => {
+  const { className } = props;
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
+    errorRetryCount: 2,
+    revalidateIfStale: false,
+    focusThrottleInterval: 36e5, // 1 hour
+  });
+
+  if (!updateInfo?.shouldUpdate) return null;
+
+  return (
+    <>
+      <Button
+        color="error"
+        variant="contained"
+        size="small"
+        className={className}
+        onClick={() => setDialogOpen(true)}
+      >
+        New
+      </Button>
+
+      <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+    </>
+  );
+};
+
+export default UpdateButton;

src/components/update-dialog.tsx

@@ -0,0 +1,66 @@
+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,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+let uploadingState = false;
+
+const UpdateDialog = (props: Props) => {
+  const { open, onClose } = props;
+  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
+    errorRetryCount: 2,
+    revalidateIfStale: false,
+    focusThrottleInterval: 36e5, // 1 hour
+  });
+  const [uploading, setUploading] = useState(uploadingState);
+
+  const onUpdate = async () => {
+    try {
+      setUploading(true);
+      uploadingState = true;
+      await installUpdate();
+      await relaunch();
+    } catch (error) {
+      console.log(error);
+      window.alert("Failed to upload, please try again.");
+    } finally {
+      setUploading(true);
+      uploadingState = true;
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>New Version v{updateInfo?.manifest?.version}</DialogTitle>
+      <DialogContent sx={{ minWidth: 360, maxWidth: 400, maxHeight: "50vh" }}>
+        <DialogContentText>{updateInfo?.manifest?.body}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          variant="contained"
+          autoFocus
+          onClick={onUpdate}
+          disabled={uploading}
+        >
+          Update
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default UpdateDialog;

src/pages/_layout.tsx

@@ -1,61 +1,34 @@
-import { useEffect, useMemo } from "react";
 import useSWR, { SWRConfig } from "swr";
+import { useEffect, useMemo } from "react";
 import { Route, Routes } from "react-router-dom";
 import { useRecoilState } from "recoil";
-import {
+import { alpha, createTheme, List, Paper, ThemeProvider } from "@mui/material";
-  createTheme,
+import { appWindow } from "@tauri-apps/api/window";
-  IconButton,
+import { atomPaletteMode, atomThemeBlur } from "../states/setting";
-  List,
+import { getVergeConfig } from "../services/cmds";
-  Paper,
+import { routers } from "./_routers";
-  ThemeProvider,
-} from "@mui/material";
-import { HorizontalRuleRounded, CloseRounded } from "@mui/icons-material";
-import { atomPaletteMode } from "../states/setting";
-import { getVergeConfig, windowDrag, windowHide } from "../services/cmds";
 import LogoSvg from "../assets/image/logo.svg";
-import LogPage from "./log";
-import ProfilePage from "./profile";
-import ProxyPage from "./proxy";
-import SettingPage from "./setting";
-import ConnectionsPage from "./connections";
-import LayoutItem from "../components/layout-item";
 import Traffic from "../components/traffic";
-
+import LayoutItem from "../components/layout-item";
-const routers = [
+import UpdateButton from "../components/update-button";
-  {
+import LayoutControl from "../components/layout-control";
-    label: "Proxy",
-    link: "/",
-    ele: ProxyPage,
-  },
-  {
-    label: "Profile",
-    link: "/profile",
-    ele: ProfilePage,
-  },
-  {
-    label: "Connections",
-    link: "/connections",
-    ele: ConnectionsPage,
-  },
-  {
-    label: "Log",
-    link: "/log",
-    ele: LogPage,
-  },
-  {
-    label: "Setting",
-    link: "/setting",
-    ele: SettingPage,
-  },
-];
 
 const Layout = () => {
   const [mode, setMode] = useRecoilState(atomPaletteMode);
+  const [blur, setBlur] = useRecoilState(atomThemeBlur);
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
   useEffect(() => {
-    setMode(vergeConfig?.theme_mode ?? "light");
+    window.addEventListener("keydown", (e) => {
-  }, [vergeConfig?.theme_mode]);
+      if (e.key === "Escape") appWindow.hide();
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!vergeConfig) return;
+    setBlur(!!vergeConfig.theme_blur);
+    setMode(vergeConfig.theme_mode ?? "light");
+  }, [vergeConfig]);
 
   const theme = useMemo(() => {
     // const background = mode === "light" ? "#f5f5f5" : "#000";
@@ -77,24 +50,34 @@ const Layout = () => {
     });
   }, [mode]);
 
+  const onDragging = (e: any) => {
+    if (e?.target?.dataset?.windrag) {
+      appWindow.startDragging();
+    }
+  };
+
   return (
     <SWRConfig value={{}}>
       <ThemeProvider theme={theme}>
-        <Paper square elevation={0} className="layout">
+        <Paper
-          <div className="layout__left">
+          square
-            <div className="the-logo">
+          elevation={0}
-              <img
+          className="layout"
-                src={LogoSvg}
+          onPointerDown={onDragging}
-                width="100%"
+          sx={[
-                alt=""
+            (theme) => ({
-                onPointerDown={(e) => {
+              bgcolor: alpha(theme.palette.background.paper, blur ? 0.85 : 1),
-                  windowDrag();
+            }),
-                  e.preventDefault();
+          ]}
-                }}
+        >
-              />
+          <div className="layout__left" data-windrag>
+            <div className="the-logo" data-windrag>
+              <img src={LogoSvg} alt="" data-windrag />
+
+              <UpdateButton className="the-newbtn" />
             </div>
 
-            <List className="the-menu">
+            <List className="the-menu" data-windrag>
               {routers.map((router) => (
                 <LayoutItem key={router.label} to={router.link}>
                   {router.label}
@@ -102,32 +85,20 @@ const Layout = () => {
               ))}
             </List>
 
-            <div className="the-traffic">
+            <div className="the-traffic" data-windrag>
               <Traffic />
             </div>
           </div>
 
-          <div className="layout__right">
+          <div className="layout__right" data-windrag>
-            <div
+            <div className="the-bar">
-              className="the-bar"
+              <LayoutControl />
-              onPointerDown={(e) =>
-                e.target === e.currentTarget && windowDrag()
-              }
-            >
-              {/* todo: onClick = windowMini */}
-              <IconButton size="small" sx={{ mx: 1 }} onClick={windowHide}>
-                <HorizontalRuleRounded fontSize="inherit" />
-              </IconButton>
-
-              <IconButton size="small" onClick={windowHide}>
-                <CloseRounded fontSize="inherit" />
-              </IconButton>
             </div>
 
-            <div className="the-content">
+            <div className="the-content" data-windrag>
               <Routes>
-                {routers.map(({ link, ele: Ele }) => (
+                {routers.map(({ label, link, ele: Ele }) => (
-                  <Route path={link} element={<Ele />} />
+                  <Route key={label} path={link} element={<Ele />} />
                 ))}
               </Routes>
             </div>

src/pages/_routers.tsx

@@ -0,0 +1,33 @@
+import LogsPage from "./logs";
+import ProxiesPage from "./proxies";
+import ProfilesPage from "./profiles";
+import SettingsPage from "./settings";
+import ConnectionsPage from "./connections";
+
+export const routers = [
+  {
+    label: "Proxies",
+    link: "/",
+    ele: ProxiesPage,
+  },
+  {
+    label: "Profiles",
+    link: "/profile",
+    ele: ProfilesPage,
+  },
+  {
+    label: "Connections",
+    link: "/connections",
+    ele: ConnectionsPage,
+  },
+  {
+    label: "Logs",
+    link: "/logs",
+    ele: LogsPage,
+  },
+  {
+    label: "Settings",
+    link: "/settings",
+    ele: SettingsPage,
+  },
+];

src/pages/connections.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
-import { Box, Paper, Typography } from "@mui/material";
+import { Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
-import { getInfomation } from "../services/api";
 import { ApiType } from "../services/types";
+import { getInfomation } from "../services/api";
+import BasePage from "../components/base-page";
 import ConnectionItem from "../components/connection-item";
 
 const ConnectionsPage = () => {
@@ -26,25 +27,14 @@ const ConnectionsPage = () => {
   }, []);
 
   return (
-    <Box
+    <BasePage title="Connections" contentStyle={{ height: "100%" }}>
-      sx={{
+      <Paper sx={{ boxShadow: 2, height: "100%" }}>
-        width: 0.9,
-        maxWidth: "850px",
-        height: "100%",
-        mx: "auto",
-      }}
-    >
-      <Typography variant="h4" component="h1" sx={{ py: 2 }}>
-        Connections
-      </Typography>
-
-      <Paper sx={{ boxShadow: 2, height: "calc(100% - 100px)" }}>
         <Virtuoso
           data={conn.connections}
           itemContent={(index, item) => <ConnectionItem value={item} />}
         />
       </Paper>
-    </Box>
+    </BasePage>
   );
 };
 

src/pages/logs.tsx

@@ -1,9 +1,10 @@
 import dayjs from "dayjs";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
-import { Box, Button, Paper, Typography } from "@mui/material";
+import { Button, Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { ApiType } from "../services/types";
 import { getInfomation } from "../services/api";
+import BasePage from "../components/base-page";
 import LogItem from "../components/log-item";
 
 let logCache: ApiType.LogItem[] = [];
@@ -28,33 +29,27 @@ const LogPage = () => {
     return () => ws?.close();
   }, []);
 
+  const onClear = () => {
+    setLogData([]);
+    logCache = [];
+  };
+
   return (
-    <Box
+    <BasePage
-      sx={{
+      title="Logs"
-        position: "relative",
+      contentStyle={{ height: "100%" }}
-        width: 0.9,
+      header={
-        maxWidth: "850px",
+        <Button
-        height: "100%",
+          size="small"
-        mx: "auto",
+          sx={{ mt: 1 }}
-      }}
+          variant="contained"
+          onClick={onClear}
+        >
+          Clear
+        </Button>
+      }
     >
-      <Typography variant="h4" component="h1" sx={{ py: 2 }}>
+      <Paper sx={{ boxShadow: 2, height: "100%" }}>
-        Logs
-      </Typography>
-
-      <Button
-        size="small"
-        variant="contained"
-        sx={{ position: "absolute", top: 22, right: 0 }}
-        onClick={() => {
-          setLogData([]);
-          logCache = [];
-        }}
-      >
-        Clear
-      </Button>
-
-      <Paper sx={{ boxShadow: 2, height: "calc(100% - 100px)" }}>
         <Virtuoso
           initialTopMostItemIndex={999}
           data={logData}
@@ -62,7 +57,7 @@ const LogPage = () => {
           followOutput={"smooth"}
         />
       </Paper>
-    </Box>
+    </BasePage>
   );
 };
 

src/pages/profiles.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
-import { Box, Button, Grid, TextField, Typography } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { Box, Button, Grid, TextField } from "@mui/material";
 import {
   getProfiles,
   selectProfile,
@@ -8,14 +8,14 @@ import {
   importProfile,
 } from "../services/cmds";
 import { getProxies, updateProxy } from "../services/api";
-import ProfileItemComp from "../components/profile-item";
-import useNotice from "../utils/use-notice";
 import noop from "../utils/noop";
+import Notice from "../components/notice";
+import BasePage from "../components/base-page";
+import ProfileItem from "../components/profile-item";
 
 const ProfilePage = () => {
   const [url, setUrl] = useState("");
   const [disabled, setDisabled] = useState(false);
-  const [notice, noticeElement] = useNotice();
 
   const { mutate } = useSWRConfig();
   const { data: profiles = {} } = useSWR("getProfiles", getProfiles);
@@ -71,37 +71,31 @@ const ProfilePage = () => {
       await importProfile(url);
       mutate("getProfiles", getProfiles());
       if (!profiles.items?.length) selectProfile(0).catch(noop);
-      notice.success("Successfully import profile.");
+      Notice.success("Successfully import profile.");
     } catch {
-      notice.error("Failed to import profile.");
+      Notice.error("Failed to import profile.");
     } finally {
       setDisabled(false);
     }
   };
 
   const lockRef = useRef(false);
-  const onProfileChange = (index: number) => {
+  const onSelect = async (index: number, force: boolean) => {
-    if (index === profiles.current || lockRef.current) return;
     if (lockRef.current) return;
+    if (!force && index === profiles.current) return;
     lockRef.current = true;
-    selectProfile(index)
+    try {
-      .then(() => {
+      await selectProfile(index);
-        mutate("getProfiles", { ...profiles, current: index }, true);
+      mutate("getProfiles", { ...profiles, current: index }, true);
-      })
+    } catch (err: any) {
-      .catch((err) => {
+      err && Notice.error(err.toString());
-        console.error(err);
+    } finally {
-      })
+      lockRef.current = false;
-      .finally(() => {
+    }
-        lockRef.current = false;
-      });
   };
 
   return (
-    <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
+    <BasePage title="Profiles">
-      <Typography variant="h4" component="h1" sx={{ py: 2, mb: 1 }}>
-        Profiles
-      </Typography>
-
       <Box sx={{ display: "flex", mb: 3 }}>
         <TextField
           id="profile_url"
@@ -111,7 +105,7 @@ const ProfilePage = () => {
           fullWidth
           value={url}
           onChange={(e) => setUrl(e.target.value)}
-          sx={{ mr: 4 }}
+          sx={{ mr: 2 }}
         />
         <Button
           disabled={!url || disabled}
@@ -125,18 +119,16 @@ const ProfilePage = () => {
       <Grid container spacing={3}>
         {profiles?.items?.map((item, idx) => (
           <Grid item xs={12} sm={6} key={item.file}>
-            <ProfileItemComp
+            <ProfileItem
               index={idx}
               selected={profiles.current === idx}
               itemData={item}
-              onClick={() => onProfileChange(idx)}
+              onSelect={(f) => onSelect(idx, f)}
             />
           </Grid>
         ))}
       </Grid>
-
+    </BasePage>
-      {noticeElement}
-    </Box>
   );
 };
 

src/pages/proxies.tsx

@@ -0,0 +1,50 @@
+import useSWR, { useSWRConfig } from "swr";
+import { useEffect } from "react";
+import { List, Paper } from "@mui/material";
+import { getProxies } from "../services/api";
+import BasePage from "../components/base-page";
+import ProxyItem from "../components/proxy-item";
+import ProxyGroup from "../components/proxy-group";
+
+const ProxyPage = () => {
+  const { mutate } = useSWRConfig();
+  const { data: proxiesData } = useSWR("getProxies", getProxies);
+  const { groups = [], proxies = [] } = proxiesData ?? {};
+
+  useEffect(() => {
+    // fix the empty proxies on the first sight
+    // this bud only show on the build version
+    // call twice to avoid something unknown or the delay of the clash startup
+    setTimeout(() => mutate("getProxies"), 250);
+    setTimeout(() => mutate("getProxies"), 1000);
+  }, []);
+
+  return (
+    <BasePage title={groups.length ? "Proxy Groups" : "Proxies"}>
+      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 1 }}>
+        {groups.length > 0 && (
+          <List>
+            {groups.map((group) => (
+              <ProxyGroup key={group.name} group={group} />
+            ))}
+          </List>
+        )}
+
+        {!groups.length && (
+          <List>
+            {Object.values(proxies).map((proxy) => (
+              <ProxyItem
+                key={proxy.name}
+                proxy={proxy}
+                selected={false}
+                sx={{ py: 0, px: 2 }}
+              />
+            ))}
+          </List>
+        )}
+      </Paper>
+    </BasePage>
+  );
+};
+
+export default ProxyPage;

src/pages/proxy.tsx

@@ -1,29 +0,0 @@
-import useSWR from "swr";
-import { Box, List, Paper, Typography } from "@mui/material";
-import { getProxies } from "../services/api";
-import ProxyGroup from "../components/proxy-group";
-
-const ProxyPage = () => {
-  const { data: proxiesData } = useSWR("getProxies", getProxies);
-  const { groups = [] } = proxiesData ?? {};
-
-  return (
-    <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
-      <Typography variant="h4" component="h1" sx={{ py: 2 }}>
-        Proxy Groups
-      </Typography>
-
-      {groups.length > 0 && (
-        <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
-          <List>
-            {groups.map((group) => (
-              <ProxyGroup key={group.name} group={group} />
-            ))}
-          </List>
-        </Paper>
-      )}
-    </Box>
-  );
-};
-
-export default ProxyPage;

src/pages/setting.tsx

@@ -1,23 +0,0 @@
-import { Box, Paper, Typography } from "@mui/material";
-import SettingVerge from "../components/setting-verge";
-import SettingClash from "../components/setting-clash";
-
-const SettingPage = () => {
-  return (
-    <Box sx={{ width: 0.9, maxWidth: 850, mx: "auto", mb: 2 }}>
-      <Typography variant="h4" component="h1" sx={{ py: 2 }}>
-        Setting
-      </Typography>
-
-      <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
-        <SettingVerge />
-      </Paper>
-
-      <Paper sx={{ borderRadius: 1, boxShadow: 2, mt: 3 }}>
-        <SettingClash />
-      </Paper>
-    </Box>
-  );
-};
-
-export default SettingPage;

src/pages/settings.tsx

@@ -0,0 +1,30 @@
+import { Paper } from "@mui/material";
+import BasePage from "../components/base-page";
+import SettingVerge from "../components/setting/setting-verge";
+import SettingClash from "../components/setting/setting-clash";
+import SettingSystem from "../components/setting/setting-system";
+import Notice from "../components/notice";
+
+const SettingPage = () => {
+  const onError = (error: any) => {
+    error && Notice.error(error.toString());
+  };
+
+  return (
+    <BasePage title="Settings">
+      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+        <SettingClash onError={onError} />
+      </Paper>
+
+      <Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 3 }}>
+        <SettingSystem onError={onError} />
+      </Paper>
+
+      <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
+        <SettingVerge onError={onError} />
+      </Paper>
+    </BasePage>
+  );
+};
+
+export default SettingPage;

src/services/cmds.ts

@@ -9,12 +9,16 @@ export async function syncProfiles() {
   return invoke<void>("sync_profiles");
 }
 
-export async function importProfile(url: string) {
+export async function editProfile(index: number) {
-  return invoke<void>("import_profile", { url });
+  return invoke<void>("edit_profile", { index });
 }
 
-export async function updateProfile(index: number) {
+export async function importProfile(url: string) {
-  return invoke<void>("update_profile", { index });
+  return invoke<void>("import_profile", { url, withProxy: true });
+}
+
+export async function updateProfile(index: number, withProxy: boolean) {
+  return invoke<void>("update_profile", { index, withProxy });
 }
 
 export async function deleteProfile(index: number) {
@@ -36,18 +40,6 @@ export async function restartSidecar() {
   return invoke<void>("restart_sidecar");
 }
 
-export async function windowDrag() {
-  return invoke<void>("win_drag");
-}
-
-export async function windowHide() {
-  return invoke<void>("win_hide");
-}
-
-export async function windowMini() {
-  return invoke<void>("win_mini");
-}
-
 export async function getClashInfo() {
   return invoke<CmdType.ClashInfo | null>("get_clash_info");
 }
@@ -56,10 +48,6 @@ export async function patchClashConfig(payload: Partial<ApiType.ConfigData>) {
   return invoke<void>("patch_clash_config", { payload });
 }
 
-export async function setSysProxy(enable: boolean) {
-  return invoke<void>("set_sys_proxy", { enable });
-}
-
 export async function getVergeConfig() {
   return invoke<CmdType.VergeConfig>("get_verge_config");
 }
@@ -67,3 +55,7 @@ export async function getVergeConfig() {
 export async function patchVergeConfig(payload: CmdType.VergeConfig) {
   return invoke<void>("patch_verge_config", { payload });
 }
+
+export async function getSystemProxy() {
+  return invoke<any>("get_sys_proxy");
+}

src/services/types.ts

@@ -110,7 +110,8 @@ export namespace CmdType {
 
   export interface VergeConfig {
     theme_mode?: "light" | "dark";
-    enable_self_startup?: boolean;
+    theme_blur?: boolean;
+    enable_auto_launch?: boolean;
     enable_system_proxy?: boolean;
   }
 }

src/states/setting.ts

@@ -4,3 +4,8 @@ export const atomPaletteMode = atom<"light" | "dark">({
   key: "atomPaletteMode",
   default: "light",
 });
+
+export const atomThemeBlur = atom<boolean>({
+  key: "atomThemeBlur",
+  default: false,
+});

src/utils/use-notice.tsx

@@ -1,68 +0,0 @@
-import { useMemo, useState } from "react";
-import { Box, IconButton, Slide, Snackbar } from "@mui/material";
-import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
-
-interface NoticeInstance {
-  info: (msg: string) => void;
-  error: (msg: string) => void;
-  success: (msg: string) => void;
-}
-
-const useNotice = () => {
-  const [message, setMessage] = useState("");
-  const [level, setLevel] = useState<"info" | "error" | "success">("info");
-
-  const handleClose = (_e: any, reason: string) => {
-    if (reason !== "clickaway") setMessage("");
-  };
-
-  const msgElement =
-    level === "info" ? (
-      message
-    ) : (
-      <Box sx={{ display: "flex", alignItems: "center" }}>
-        {level === "error" && <ErrorRounded color="error" />}
-        {level === "success" && <CheckCircleRounded color="success" />}
-        <span style={{ marginLeft: 4 }}>{message}</span>
-      </Box>
-    );
-
-  const element = useMemo(
-    () => (
-      <Snackbar
-        open={!!message}
-        anchorOrigin={{ vertical: "top", horizontal: "right" }}
-        autoHideDuration={3000}
-        onClose={handleClose}
-        message={msgElement}
-        sx={{ maxWidth: 360 }}
-        TransitionComponent={(p) => <Slide {...p} direction="left" />}
-        transitionDuration={200}
-        action={
-          <IconButton
-            size="small"
-            color="inherit"
-            onClick={() => setMessage("")}
-          >
-            <Close fontSize="small" />
-          </IconButton>
-        }
-      />
-    ),
-    [message]
-  );
-
-  const instance = (Object.fromEntries(
-    (["info", "error", "success"] as const).map((item) => [
-      item,
-      (msg: string) => {
-        setLevel(item);
-        setMessage(msg);
-      },
-    ])
-  ) as unknown) as NoticeInstance;
-
-  return [instance, element] as const;
-};
-
-export default useNotice;