chore: missing locale

src/components/base/base-fieldset.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box, styled } from "@mui/material";
+
+type Props = {
+  label: string;
+  fontSize?: string;
+  width?: string;
+  padding?: string;
+  children?: React.ReactNode;
+};
+
+export const BaseFieldset: React.FC<Props> = (props: Props) => {
+  const Fieldset = styled(Box)(() => ({
+    position: "relative",
+    border: "1px solid #bbb",
+    borderRadius: "5px",
+    width: props.width ?? "auto",
+    padding: props.padding ?? "15px",
+  }));
+
+  const Label = styled("legend")(({ theme }) => ({
+    position: "absolute",
+    top: "-10px",
+    left: props.padding ?? "15px",
+    backgroundColor: theme.palette.background.paper,
+    backgroundImage:
+      "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+    color: theme.palette.text.primary,
+    fontSize: props.fontSize ?? "1em",
+  }));
+
+  return (
+    <Fieldset component="fieldset">
+      <Label>{props.label}</Label>
+      {props.children}
+    </Fieldset>
+  );
+};

src/components/profile/profile-item.tsx

@@ -278,6 +278,7 @@ export const ProfileItem = (props: Props) => {
           {/* only if has url can it be updated */}
           {hasUrl && (
             <IconButton
+              title={t("Refresh")}
               sx={{
                 position: "absolute",
                 p: "3px",

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

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { IconButton, Tooltip } from "@mui/material";
 import { InfoRounded } from "@mui/icons-material";
 import {
-  Box,
   InputAdornment,
   List,
   ListItem,
@@ -19,6 +18,7 @@ import { getSystemProxy, getAutotemProxy } from "@/services/cmds";
 import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 import { Edit } from "@mui/icons-material";
 import { EditorViewer } from "@/components/profile/editor-viewer";
+import { BaseFieldset } from "@/components/base/base-fieldset";
 const DEFAULT_PAC = `function FindProxyForURL(url, host) {
   return "PROXY 127.0.0.1:%mixed-port%; SOCKS5 127.0.0.1:%mixed-port%; DIRECT;";
 }`;
@@ -113,16 +113,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
       onOk={onSave}
     >
       <List>
-        <Box
-          sx={{
-            border: "1px solid #bbb",
-            borderRadius: "5px",
-            padding: "8px",
-          }}
-        >
-          <Typography variant="body1" sx={{ fontSize: "18px" }}>
-            {t("Current System Proxy")}
-          </Typography>
+        <BaseFieldset label={t("Current System Proxy")} padding="15px 10px">
           <FlexBox>
             <Typography className="label">{t("Enable status")}</Typography>
             <Typography className="value">
@@ -145,7 +136,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
               </FlexBox>
             </>
           )}
-        </Box>
+        </BaseFieldset>
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Use PAC Mode")} />
           <Switch

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

@@ -13,6 +13,7 @@ import {
   EditRounded,
   OpenInNewRounded,
 } from "@mui/icons-material";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   value?: string;
@@ -35,6 +36,7 @@ export const WebUIItem = (props: Props) => {
 
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(value);
+  const { t } = useTranslation();
 
   if (editing || onlyEdit) {
     return (
@@ -45,12 +47,12 @@ export const WebUIItem = (props: Props) => {
             size="small"
             value={editValue}
             onChange={(e) => setEditValue(e.target.value)}
-            placeholder={`Support %host %port %secret`}
+            placeholder={t("Support %host, %port, %secret")}
             autoComplete="off"
           />
           <IconButton
             size="small"
-            title="Save"
+            title={t("Save")}
             color="inherit"
             onClick={() => {
               onChange(editValue);
@@ -61,7 +63,7 @@ export const WebUIItem = (props: Props) => {
           </IconButton>
           <IconButton
             size="small"
-            title="Cancel"
+            title={t("Cancel")}
             color="inherit"
             onClick={() => {
               onCancel?.();
@@ -100,7 +102,7 @@ export const WebUIItem = (props: Props) => {
         />
         <IconButton
           size="small"
-          title="Open URL"
+          title={t("Open URL")}
           color="inherit"
           onClick={() => onOpenUrl?.(value)}
         >
@@ -108,7 +110,7 @@ export const WebUIItem = (props: Props) => {
         </IconButton>
         <IconButton
           size="small"
-          title="Edit"
+          title={t("Edit")}
           color="inherit"
           onClick={() => {
             setEditing(true);
@@ -119,7 +121,7 @@ export const WebUIItem = (props: Props) => {
         </IconButton>
         <IconButton
           size="small"
-          title="Delete"
+          title={t("Delete")}
           color="inherit"
           onClick={onDelete}
         >

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

@@ -105,10 +105,10 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
     >
       {!editing && webUIList.length === 0 && (
         <BaseEmpty
-          text="Empty List"
+          text="Empty"
           extra={
             <Typography mt={2} sx={{ fontSize: "12px" }}>
-              Replace host, port, secret with "%host" "%port" "%secret"
+              {t("Replace host, port, secret with %host, %port, %secret")}
             </Typography>
           }
         />

src/components/test/test-item.tsx

@@ -175,7 +175,7 @@ export const TestItem = (props: Props) => {
                 ":hover": { bgcolor: alpha(palette.primary.main, 0.15) },
               })}
             >
-              Check
+              {t("Test")}
             </Widget>
           )}