v0.0.7

package.json

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

src-tauri/Cargo.toml

@@ -20,7 +20,7 @@ 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"] }
 
 reqwest = { version = "0.11", features = ["json"] }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "clash-verge",
-    "version": "0.0.6"
+    "version": "0.0.7"
   },
   "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

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,13 @@
       padding: 0 8px;
       text-align: center;
       box-sizing: border-box;
+
+      .the-newbtn {
+        position: absolute;
+        right: 20px;
+        bottom: 12px;
+        transform: scale(0.8);
+      }
     }
 
     .the-menu {

src/components/setting-verge.tsx

@@ -7,15 +7,15 @@ import {
   Typography,
 } from "@mui/material";
 import {
+  setSysProxy,
   getVergeConfig,
   patchVergeConfig,
-  setSysProxy,
 } from "../services/cmds";
 import { CmdType } from "../services/types";
+import { version } from "../../package.json";
 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;
@@ -32,7 +32,6 @@ const SettingVerge = ({ onError }: Props) => {
   } = vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
-
   const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
     mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
   };

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,8 +1,9 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import useSWR, { SWRConfig } from "swr";
 import { Route, Routes } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import {
+  Button,
   createTheme,
   IconButton,
   List,
@@ -10,6 +11,7 @@ import {
   ThemeProvider,
 } from "@mui/material";
 import { HorizontalRuleRounded, CloseRounded } from "@mui/icons-material";
+import { checkUpdate } from "@tauri-apps/api/updater";
 import { atomPaletteMode } from "../states/setting";
 import { getVergeConfig, windowDrag, windowHide } from "../services/cmds";
 import LogoSvg from "../assets/image/logo.svg";
@@ -20,6 +22,7 @@ import SettingPage from "./setting";
 import ConnectionsPage from "./connections";
 import LayoutItem from "../components/layout-item";
 import Traffic from "../components/traffic";
+import UpdateDialog from "../components/update-dialog";
 
 const routers = [
   {
@@ -52,6 +55,12 @@ const routers = [
 const Layout = () => {
   const [mode, setMode] = useRecoilState(atomPaletteMode);
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
+    errorRetryCount: 2,
+    revalidateIfStale: false,
+    focusThrottleInterval: 36e5, // 1 hour
+  });
+  const [dialogOpen, setDialogOpen] = useState(false);
 
   useEffect(() => {
     setMode(vergeConfig?.theme_mode ?? "light");
@@ -92,6 +101,18 @@ const Layout = () => {
                   e.preventDefault();
                 }}
               />
+
+              {updateInfo?.shouldUpdate && (
+                <Button
+                  color="error"
+                  variant="contained"
+                  size="small"
+                  className="the-newbtn"
+                  onClick={() => setDialogOpen(true)}
+                >
+                  New
+                </Button>
+              )}
             </div>
 
             <List className="the-menu">
@@ -126,13 +147,14 @@ const Layout = () => {
 
             <div className="the-content">
               <Routes>
-                {routers.map(({ link, ele: Ele }) => (
-                  <Route path={link} element={<Ele />} />
+                {routers.map(({ label, link, ele: Ele }) => (
+                  <Route key={label} path={link} element={<Ele />} />
                 ))}
               </Routes>
             </div>
           </div>
         </Paper>
+        <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
       </ThemeProvider>
     </SWRConfig>
   );