v0.0.25

README.md

@@ -17,7 +17,7 @@ A <a href="https://github.com/Dreamacro/clash">Clash</a> GUI based on <a href="h
 
 ## Install
 
-Download from [release](https://github.com/zzzgydi/clash-verge/releases). Supports Windows x64 and macOS 11+
+Download from [release](https://github.com/zzzgydi/clash-verge/releases). Supports Windows x64, Linux x86_64 and macOS 11+
 
 Or you can build it yourself. Supports Windows, Linux and macOS 10.15+
 

UPDATELOG.md

@@ -1,3 +1,20 @@
+## v0.0.25
+
+### Features
+
+- update clash core version
+
+### Bug Fixes
+
+- app updater error
+- display window controllers on Linux
+
+### Notes
+
+If you can't update the app properly, please consider downloading the latest version from github release.
+
+---
+
 ## v0.0.24
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "license": "GPL-3.0",
   "scripts": {
     "dev": "tauri dev",

scripts/check.mjs

@@ -16,7 +16,7 @@ function resolveClash() {
 
   const CLASH_URL_PREFIX =
     "https://github.com/Dreamacro/clash/releases/download/premium/";
-  const CLASH_LATEST_DATE = "2022.03.19";
+  const CLASH_LATEST_DATE = "2022.03.21";
 
   // todo
   const map = {

src-tauri/Cargo.toml

@@ -21,7 +21,7 @@ chrono = "0.4.19"
 serde_json = "1.0"
 serde_yaml = "0.8"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.0.0-rc.4", features = ["shell-all", "system-tray", "updater", "window-all"] }
+tauri = { version = "1.0.0-rc.4", features = ["process-all", "shell-all", "system-tray", "updater", "window-all"] }
 window-shadows = { git = "https://github.com/tauri-apps/window-shadows" }
 window-vibrancy = { git = "https://github.com/tauri-apps/window-vibrancy" }
 

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "Clash Verge",
-    "version": "0.0.24"
+    "version": "0.0.25"
   },
   "build": {
     "distDir": "../dist",
@@ -64,6 +64,9 @@
       },
       "window": {
         "all": true
+      },
+      "process": {
+        "all": true
       }
     },
     "windows": [

src/assets/styles/layout.scss

@@ -80,8 +80,12 @@
   }
 }
 
-.windows.layout {
-  .layout__right .the-content {
-    top: 30px;
+.linux,
+.windows,
+.unknown {
+  &.layout {
+    .layout__right .the-content {
+      top: 30px;
+    }
   }
 }

src/components/layout/update-dialog.tsx

@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import snarkdown from "snarkdown";
-import { useState, useMemo } from "react";
+import { useMemo } from "react";
+import { useRecoilState } from "recoil";
 import {
   Box,
   Button,
@@ -13,6 +14,7 @@ import {
 import { relaunch } from "@tauri-apps/api/process";
 import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
 import { killSidecars, restartSidecar } from "../../services/cmds";
+import { atomUpdateState } from "../../services/states";
 import Notice from "../base/base-notice";
 
 interface Props {
@@ -24,8 +26,6 @@ const UpdateLog = styled(Box)(() => ({
   "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
 }));
 
-let uploadingState = false;
-
 const UpdateDialog = (props: Props) => {
   const { open, onClose } = props;
   const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
@@ -33,22 +33,22 @@ const UpdateDialog = (props: Props) => {
     revalidateIfStale: false,
     focusThrottleInterval: 36e5, // 1 hour
   });
-  const [uploading, setUploading] = useState(uploadingState);
+
+  const [updateState, setUpdateState] = useRecoilState(atomUpdateState);
 
   const onUpdate = async () => {
-    setUploading(true);
-    uploadingState = true;
+    if (updateState) return;
+    setUpdateState(true);
 
     try {
-      await installUpdate();
       await killSidecars();
+      await installUpdate();
       await relaunch();
     } catch (err: any) {
       await restartSidecar();
       Notice.error(err?.message || err.toString());
     } finally {
-      setUploading(false);
-      uploadingState = false;
+      setUpdateState(false);
     }
   };
 
@@ -73,7 +73,7 @@ const UpdateDialog = (props: Props) => {
         <Button
           autoFocus
           variant="contained"
-          disabled={uploading}
+          disabled={updateState}
           onClick={onUpdate}
         >
           Update

src/components/profile/profile-item.tsx

@@ -1,7 +1,8 @@
 import dayjs from "dayjs";
+import { useState } from "react";
 import { useLockFn } from "ahooks";
 import { useSWRConfig } from "swr";
-import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
 import { useTranslation } from "react-i18next";
 import {
   alpha,
@@ -16,6 +17,7 @@ import {
 } from "@mui/material";
 import { RefreshRounded } from "@mui/icons-material";
 import { CmdType } from "../../services/types";
+import { atomLoadingCache } from "../../services/states";
 import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
 import parseTraffic from "../../utils/parse-traffic";
 import ProfileEdit from "./profile-edit";
@@ -37,9 +39,6 @@ const round = keyframes`
   to { transform: rotate(360deg); }
 `;
 
-// save the state of each item loading
-const loadingCache: Record<string, boolean> = {};
-
 interface Props {
   selected: boolean;
   itemData: CmdType.ProfileItem;
@@ -51,9 +50,9 @@ const ProfileItem = (props: Props) => {
 
   const { t } = useTranslation();
   const { mutate } = useSWRConfig();
-  const [loading, setLoading] = useState(loadingCache[itemData.uid] ?? false);
   const [anchorEl, setAnchorEl] = useState<any>(null);
   const [position, setPosition] = useState({ left: 0, top: 0 });
+  const [loadingCache, setLoadingCache] = useRecoilState(atomLoadingCache);
 
   const { name = "Profile", extra, updated = 0 } = itemData;
   const { upload = 0, download = 0, total = 0 } = extra ?? {};
@@ -68,9 +67,7 @@ const ProfileItem = (props: Props) => {
   const hasUrl = !!itemData.url;
   const hasExtra = !!extra; // only subscription url has extra info
 
-  useEffect(() => {
-    loadingCache[itemData.uid] = loading;
-  }, [itemData, loading]);
+  const loading = loadingCache[itemData.uid] ?? false;
 
   const [editOpen, setEditOpen] = useState(false);
   const onEdit = () => {
@@ -92,19 +89,19 @@ const ProfileItem = (props: Props) => {
     onSelect(true);
   };
 
-  const onUpdateWrapper = (withProxy: boolean) => async () => {
+  const onUpdate = useLockFn(async (withProxy: boolean) => {
     setAnchorEl(null);
-    if (loading) return;
-    setLoading(true);
+    setLoadingCache((cache) => ({ ...cache, [itemData.uid]: true }));
+
     try {
       await updateProfile(itemData.uid, { with_proxy: withProxy });
-      setLoading(false);
       mutate("getProfiles");
     } catch (err: any) {
-      setLoading(false);
       Notice.error(err?.message || err.toString());
+    } finally {
+      setLoadingCache((cache) => ({ ...cache, [itemData.uid]: false }));
     }
-  };
+  });
 
   const onDelete = useLockFn(async () => {
     setAnchorEl(null);
@@ -127,8 +124,8 @@ const ProfileItem = (props: Props) => {
     { label: "Select", handler: onForceSelect },
     { label: "Edit", handler: onEdit },
     { label: "File", handler: onView },
-    { label: "Update", handler: onUpdateWrapper(false) },
-    { label: "Update(Proxy)", handler: onUpdateWrapper(true) },
+    { label: "Update", handler: () => onUpdate(false) },
+    { label: "Update(Proxy)", handler: () => onUpdate(true) },
     { label: "Delete", handler: onDelete },
   ];
   const fileModeMenu = [
@@ -199,7 +196,7 @@ const ProfileItem = (props: Props) => {
               disabled={loading}
               onClick={(e) => {
                 e.stopPropagation();
-                onUpdateWrapper(false)();
+                onUpdate(false);
               }}
             >
               <RefreshRounded />

src/pages/_layout.tsx

@@ -16,11 +16,12 @@ import LayoutItem from "../components/layout/layout-item";
 import LayoutControl from "../components/layout/layout-control";
 import LayoutTraffic from "../components/layout/layout-traffic";
 import UpdateButton from "../components/layout/update-button";
+import getSystem from "../utils/get-system";
 import "dayjs/locale/zh-cn";
 
 dayjs.extend(relativeTime);
 
-const isWinOs = /win64|win32/i.test(navigator.userAgent);
+const OS = getSystem();
 
 const Layout = () => {
   const { t } = useTranslation();
@@ -85,11 +86,11 @@ const Layout = () => {
         <Paper
           square
           elevation={0}
-          className={`${isWinOs ? "windows " : ""}layout`}
+          className={`${OS} layout`}
           onPointerDown={onDragging}
           onContextMenu={(e) => {
             // only prevent it on Windows
-            if (isWinOs) e.preventDefault();
+            if (OS === "windows") e.preventDefault();
           }}
           sx={[
             (theme) => ({
@@ -118,7 +119,7 @@ const Layout = () => {
           </div>
 
           <div className="layout__right" data-windrag>
-            {isWinOs && (
+            {OS === "windows" && (
               <div className="the-bar">
                 <LayoutControl />
               </div>

src/services/states.ts

@@ -10,3 +10,15 @@ export const atomLogData = atom<ApiType.LogItem[]>({
   key: "atomLogData",
   default: [],
 });
+
+// save the state of each profile item loading
+export const atomLoadingCache = atom<Record<string, boolean>>({
+  key: "atomLoadingCache",
+  default: {},
+});
+
+// save update state
+export const atomUpdateState = atom<boolean>({
+  key: "atomUpdateState",
+  default: false,
+});

src/utils/get-system.ts

@@ -0,0 +1,13 @@
+// get the system os
+// according to UA
+export default function getSystem() {
+  const ua = navigator.userAgent;
+
+  if (ua.includes("Mac OS X")) return "macos";
+
+  if (/win64|win32/i.test(ua)) return "windows";
+
+  if (/linux/i.test(ua)) return "linux";
+
+  return "unknown";
+}