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"}>
-          {t("Cancel")}
+        <Button onClick={onClose} variant="outlined">
+          {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 Alpha", core: "verge-mihomo-alpha" },
+  { name: "Mihomo", core: "verge-mihomo", chip: "Release Version" },
+  { 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"