chore: tooltips and locales

src/components/base/base-empty.tsx

@@ -1,5 +1,6 @@
 import { alpha, Box, Typography } from "@mui/material";
 import { InboxRounded } from "@mui/icons-material";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   text?: React.ReactNode;
@@ -8,6 +9,7 @@ interface Props {
 
 export const BaseEmpty = (props: Props) => {
   const { text = "Empty", extra } = props;
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -22,7 +24,7 @@ export const BaseEmpty = (props: Props) => {
       })}
     >
       <InboxRounded sx={{ fontSize: "4em" }} />
-      <Typography sx={{ fontSize: "1.25em" }}>{text}</Typography>
+      <Typography sx={{ fontSize: "1.25em" }}>{t(`${text}`)}</Typography>
       {extra}
     </Box>
   );

src/components/layout/layout-traffic.tsx

@@ -13,6 +13,7 @@ import { useVisibility } from "@/hooks/use-visibility";
 import parseTraffic from "@/utils/parse-traffic";
 import useSWRSubscription from "swr/subscription";
 import { createSockette } from "@/utils/websocket";
+import { useTranslation } from "react-i18next";
 
 interface MemoryUsage {
   inuse: number;
@@ -21,6 +22,7 @@ interface MemoryUsage {
 
 // setup the traffic
 export const LayoutTraffic = () => {
+  const { t } = useTranslation();
   const { clashInfo } = useClashInfo();
   const { verge } = useVerge();
 
@@ -115,7 +117,6 @@ export const LayoutTraffic = () => {
   };
   const valStyle: any = {
     component: "span",
-    // color: "primary",
     textAlign: "center",
     sx: { flex: "1 1 56px", userSelect: "none" },
   };
@@ -128,15 +129,23 @@ export const LayoutTraffic = () => {
   };
 
   return (
-    <Box position="relative" onClick={trafficRef.current?.toggleStyle}>
+    <Box position="relative">
       {trafficGraph && pageVisible && (
-        <div style={{ width: "100%", height: 60, marginBottom: 6 }}>
+        <div
+          style={{ width: "100%", height: 60, marginBottom: 6 }}
+          onClick={trafficRef.current?.toggleStyle}
+        >
           <TrafficGraph ref={trafficRef} />
         </div>
       )}
 
       <Box display="flex" flexDirection="column" gap={0.75}>
-        <Box display="flex" alignItems="center" whiteSpace="nowrap">
+        <Box
+          display="flex"
+          alignItems="center"
+          whiteSpace="nowrap"
+          title={t("Upload Speed")}
+        >
           <ArrowUpward
             {...iconStyle}
             color={+up > 0 ? "secondary" : "disabled"}
@@ -147,7 +156,12 @@ export const LayoutTraffic = () => {
           <Typography {...unitStyle}>{upUnit}/s</Typography>
         </Box>
 
-        <Box display="flex" alignItems="center" whiteSpace="nowrap">
+        <Box
+          display="flex"
+          alignItems="center"
+          whiteSpace="nowrap"
+          title={t("Download Speed")}
+        >
           <ArrowDownward
             {...iconStyle}
             color={+down > 0 ? "primary" : "disabled"}
@@ -163,7 +177,7 @@ export const LayoutTraffic = () => {
             display="flex"
             alignItems="center"
             whiteSpace="nowrap"
-            title="Memory Usage"
+            title={t("Memory Usage")}
           >
             <MemoryOutlined {...iconStyle} color="disabled" />
             <Typography {...valStyle}>{inuse}</Typography>

src/components/profile/confirm-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Button,

src/components/profile/editor-viewer.tsx

@@ -171,10 +171,10 @@ export const EditorViewer = (props: Props) => {
       </DialogContent>
 
       <DialogActions>
-        <Button onClick={onClose} variant={readOnly ? "contained" : "outlined"}>
+        <Button onClick={onClose} variant="outlined">
-          {t("Cancel")}
+          {t(readOnly ? "Close" : "Cancel")}
         </Button>
-        {readOnly ? null : (
+        {!readOnly && (
           <Button onClick={onSave} variant="contained">
             {t("Save")}
           </Button>

src/components/profile/log-viewer.tsx

@@ -61,7 +61,7 @@ export const LogViewer = (props: Props) => {
 
       <DialogActions>
         <Button onClick={onClose} variant="outlined">
-          {t("Back")}
+          {t("Close")}
         </Button>
       </DialogActions>
     </Dialog>

src/components/proxy/provider-button.tsx

@@ -94,7 +94,7 @@ export const ProviderButton = () => {
         }
         contentSx={{ width: 400 }}
         disableOk
-        cancelBtn={t("Cancel")}
+        cancelBtn={t("Close")}
         onClose={() => setOpen(false)}
         onCancel={() => setOpen(false)}
       >

src/components/proxy/proxy-groups.tsx

@@ -14,12 +14,14 @@ import { BaseEmpty } from "../base";
 import { useRenderList } from "./use-render-list";
 import { ProxyRender } from "./proxy-render";
 import delayManager from "@/services/delay";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   mode: string;
 }
 
 export const ProxyGroups = (props: Props) => {
+  const { t } = useTranslation();
   const { mode } = props;
 
   const { renderList, onProxies, onHeadState } = useRenderList(mode);
@@ -116,7 +118,7 @@ export const ProxyGroups = (props: Props) => {
   };
 
   if (mode === "direct") {
-    return <BaseEmpty text="Direct Mode" />;
+    return <BaseEmpty text={t("clash_mode_direct")} />;
   }
 
   return (

src/components/rule/provider-button.tsx

@@ -92,7 +92,7 @@ export const ProviderButton = () => {
         }
         contentSx={{ width: 400 }}
         disableOk
-        cancelBtn={t("Cancel")}
+        cancelBtn={t("Close")}
         onClose={() => setOpen(false)}
         onCancel={() => setOpen(false)}
       >

src/components/setting/mods/clash-core-viewer.tsx

@@ -6,18 +6,22 @@ import { useVerge } from "@/hooks/use-verge";
 import { useLockFn } from "ahooks";
 import { LoadingButton } from "@mui/lab";
 import { SwitchAccessShortcut, RestartAlt } from "@mui/icons-material";
-import { Box, Button, List, ListItemButton, ListItemText } from "@mui/material";
+import {
+  Box,
+  Button,
+  Chip,
+  List,
+  ListItemButton,
+  ListItemText,
+} from "@mui/material";
 import { changeClashCore, restartSidecar } from "@/services/cmds";
 import { closeAllConnections, upgradeCore } from "@/services/api";
-import getSystem from "@/utils/get-system";
 
 const VALID_CORE = [
-  { name: "Mihomo", core: "verge-mihomo" },
+  { name: "Mihomo", core: "verge-mihomo", chip: "Release Version" },
-  { name: "Mihomo Alpha", core: "verge-mihomo-alpha" },
+  { name: "Mihomo Alpha", core: "verge-mihomo-alpha", chip: "Alpha Version" },
 ];
 
-const OS = getSystem();
-
 export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
@@ -109,7 +113,7 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
         marginTop: "-8px",
       }}
       disableOk
-      cancelBtn={t("Back")}
+      cancelBtn={t("Close")}
       onClose={() => setOpen(false)}
       onCancel={() => setOpen(false)}
     >
@@ -121,6 +125,7 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
             onClick={() => onCoreChange(each.core)}
           >
             <ListItemText primary={each.name} secondary={`/${each.core}`} />
+            <Chip label={t(`${each.chip}`)} size="small" />
           </ListItemButton>
         ))}
       </List>

src/components/setting/mods/layout-viewer.tsx

@@ -79,7 +79,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
       title={t("Layout Setting")}
       contentSx={{ width: 450 }}
       disableOk
-      cancelBtn={t("Cancel")}
+      cancelBtn={t("Close")}
       onClose={() => setOpen(false)}
       onCancel={() => setOpen(false)}
     >

src/components/setting/mods/sysproxy-viewer.tsx

@@ -166,7 +166,10 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
         </ListItem>
 
         <ListItem sx={{ padding: "5px 2px" }}>
-          <ListItemText primary={t("Proxy Guard")} />
+          <ListItemText
+            primary={t("Proxy Guard")}
+            sx={{ maxWidth: "fit-content" }}
+          />
           <Tooltip title={t("Proxy Guard Info")}>
             <IconButton color="inherit" size="small">
               <InfoRounded
@@ -180,6 +183,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             disabled={!enabled}
             checked={value.guard}
             onChange={(_, e) => setValue((v) => ({ ...v, guard: e }))}
+            sx={{ marginLeft: "auto" }}
           />
         </ListItem>
 

src/components/setting/mods/web-ui-viewer.tsx

@@ -98,14 +98,13 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
         overflowY: "auto",
         userSelect: "text",
       }}
-      cancelBtn={t("Back")}
+      cancelBtn={t("Close")}
       disableOk
       onClose={() => setOpen(false)}
       onCancel={() => setOpen(false)}
     >
       {!editing && webUIList.length === 0 && (
         <BaseEmpty
-          text="Empty"
           extra={
             <Typography mt={2} sx={{ fontSize: "12px" }}>
               {t("Replace host, port, secret with %host, %port, %secret")}

src/components/setting/setting-clash.tsx

@@ -9,7 +9,8 @@ import {
   IconButton,
   Tooltip,
 } from "@mui/material";
-import { Settings, Shuffle } from "@mui/icons-material";
+
+import { InfoRounded, Settings, Shuffle } from "@mui/icons-material";
 import { DialogRef, Notice, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { GuardState } from "./mods/guard-state";
@@ -175,7 +176,22 @@ const SettingClash = ({ onError }: Props) => {
       </SettingItem>
 
       {isWIN && (
-        <SettingItem onClick={invoke_uwp_tool} label={t("Open UWP tool")} />
+        <SettingItem
+          onClick={invoke_uwp_tool}
+          label={t("Open UWP tool")}
+          extra={
+            <>
+              <Tooltip title={t("Open UWP tool Info")} placement="top">
+                <IconButton color="inherit" size="small">
+                  <InfoRounded
+                    fontSize="inherit"
+                    style={{ cursor: "pointer", opacity: 0.75 }}
+                  />
+                </IconButton>
+              </Tooltip>
+            </>
+          }
+        />
       )}
 
       <SettingItem onClick={onUpdateGeo} label={t("Update GeoData")} />

src/components/setting/setting-system.tsx

@@ -170,7 +170,21 @@ const SettingSystem = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
-      <SettingItem label={t("Silent Start")}>
+      <SettingItem
+        label={t("Silent Start")}
+        extra={
+          <>
+            <Tooltip title={t("Silent Start Info")} placement="top">
+              <IconButton color="inherit" size="small">
+                <InfoRounded
+                  fontSize="inherit"
+                  style={{ cursor: "pointer", opacity: 0.75 }}
+                />
+              </IconButton>
+            </Tooltip>
+          </>
+        }
+      >
         <GuardState
           value={enable_silent_start ?? false}
           valueProps="checked"

src/locales/en.json

@@ -6,6 +6,7 @@
   "Close": "Close",
   "Cancel": "Cancel",
   "Confirm": "Confirm",
+  "Empty": "Empty",
 
   "New": "New",
   "Edit": "Edit",
@@ -150,6 +151,7 @@
   "PAC URL": "PAC URL: ",
   "Auto Launch": "Auto Launch",
   "Silent Start": "Silent Start",
+  "Silent Start Info": "Start the program in background mode without displaying the panel",
 
   "Clash Setting": "Clash Setting",
   "Allow Lan": "Allow Lan",
@@ -167,9 +169,12 @@
   "Clash Core": "Clash Core",
   "Upgrade": "Upgrade",
   "Restart": "Restart",
+  "Release Version": "Release Version",
+  "Alpha Version": "Alpha Version",
   "Tun mode requires": "Tun mode requires",
   "Grant": "Grant",
   "Open UWP tool": "Open UWP tool",
+  "Open UWP tool Info": "Since Windows 8, UWP apps (such as Microsoft Store) are restricted from directly accessing local host network services, and this tool can be used to bypass this restriction",
   "Update GeoData": "Update GeoData",
 
   "Verge Setting": "Verge Setting",

src/locales/fa.json

@@ -6,6 +6,7 @@
   "Close": "بستن",
   "Cancel": "لغو",
   "Confirm": "تأیید",
+  "Empty": "خالی خالی",
 
   "New": "جدید",
   "Edit": "ویرایش",
@@ -150,6 +151,7 @@
   "PAC URL": "PAC URL: ",
   "Auto Launch": "راه‌اندازی خودکار",
   "Silent Start": "شروع بی‌صدا",
+  "Silent Start Info": "برنامه را در حالت پس‌زمینه بدون نمایش پانل اجرا کنید",
 
   "Clash Setting": "تنظیمات Clash",
   "Allow Lan": "اجازه LAN",
@@ -167,9 +169,12 @@
   "Clash Core": "هسته Clash",
   "Upgrade": "ارتقاء",
   "Restart": "راه‌اندازی مجدد",
+  "Release Version": "نسخه نهایی",
+  "Alpha Version": "نسخه آلفا",
   "Tun mode requires": "Tun mode نیاز دارد",
   "Grant": "اعطا",
   "Open UWP tool": "باز کردن ابزار UWP",
+  "Open UWP tool Info": "از ویندوز 8 به بعد، برنامه‌های UWP (مانند Microsoft Store) از دسترسی مستقیم به خدمات شبکه محلی محدود شده‌اند و این ابزار می‌تواند برای دور زدن این محدودیت استفاده شود",
   "Update GeoData": "به‌روزرسانی GeoData",
 
   "Verge Setting": "تنظیمات Verge",

src/locales/ru.json

@@ -6,6 +6,7 @@
   "Close": "Закрыть",
   "Cancel": "Отмена",
   "Confirm": "Подтвердить",
+  "Empty": "Пусто",
 
   "New": "Новый",
   "Edit": "Редактировать",
@@ -150,6 +151,7 @@
   "PAC URL": "Адрес PAC: ",
   "Auto Launch": "Автозапуск",
   "Silent Start": "Тихий запуск",
+  "Silent Start Info": "Запускать программу в фоновом режиме без отображения панели",
 
   "Clash Setting": "Настройки Clash",
   "Allow Lan": "Разрешить локальную сеть",
@@ -167,9 +169,12 @@
   "Clash Core": "Ядра Clash",
   "Upgrade": "Обновлять",
   "Restart": "Перезапуск",
+  "Release Version": "Официальная версия",
+  "Alpha Version": "Альфа-версия",
   "Tun mode requires": "Требуется Режим туннеля",
   "Grant": "Предоставить",
   "Open UWP tool": "Открыть UWP инструмент",
+  "Open UWP tool Info": "С Windows 8 приложения UWP (такие как Microsoft Store) ограничены в прямом доступе к сетевым службам локального хоста, и этот инструмент позволяет обойти это ограничение",
   "Update GeoData": "Обновление GeoData",
 
   "Verge Setting": "Настройки Verge",

src/locales/zh.json

@@ -6,6 +6,7 @@
   "Close": "关闭",
   "Cancel": "取消",
   "Confirm": "确认",
+  "Empty": "空空如也",
 
   "New": "新建",
   "Edit": "编辑",
@@ -150,6 +151,7 @@
   "PAC URL": "PAC地址：",
   "Auto Launch": "开机自启",
   "Silent Start": "静默启动",
+  "Silent Start Info": "程序启动时以后台模式运行，不显示程序面板",
 
   "Clash Setting": "Clash 设置",
   "Allow Lan": "局域网连接",
@@ -167,9 +169,12 @@
   "Clash Core": "Clash 内核",
   "Upgrade": "升级内核",
   "Restart": "重启内核",
+  "Release Version": "正式版",
+  "Alpha Version": "内测版",
   "Tun mode requires": "如需启用 Tun 模式需要授权",
   "Grant": "授权",
   "Open UWP tool": "UWP 工具",
+  "Open UWP tool Info": "Windows 8开始限制 UWP 应用（如微软商店）直接访问本地主机的网络服务，使用此工具可绕过该限制",
   "Update GeoData": "更新 GeoData",
 
   "Verge Setting": "Verge 设置",

src/pages/connections.tsx

@@ -208,7 +208,7 @@ const ConnectionsPage = () => {
         }}
       >
         {filterConn.length === 0 ? (
-          <BaseEmpty text="No Connections" />
+          <BaseEmpty />
         ) : isTableLayout ? (
           <ConnectionTable
             connections={filterConn}

src/pages/logs.tsx

@@ -102,7 +102,7 @@ const LogPage = () => {
             followOutput={"smooth"}
           />
         ) : (
-          <BaseEmpty text="No Logs" />
+          <BaseEmpty />
         )}
       </Box>
     </BasePage>

src/pages/rules.tsx

@@ -62,7 +62,7 @@ const RulesPage = () => {
             followOutput={"smooth"}
           />
         ) : (
-          <BaseEmpty text="No Rules" />
+          <BaseEmpty />
         )}
       </Box>
     </BasePage>