chore: group types locale

src/components/base/base-search-box.tsx

@@ -26,7 +26,7 @@ type SearchProps = {
 export const BaseSearchBox = styled((props: SearchProps) => {
   const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
-  const [matchCase, setMatchCase] = useState(props.matchCase ?? true);
+  const [matchCase, setMatchCase] = useState(props.matchCase ?? false);
   const [matchWholeWord, setMatchWholeWord] = useState(
     props.matchWholeWord ?? false
   );

src/components/profile/groups-editor-viewer.tsx

@@ -23,6 +23,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  InputAdornment,
   List,
   ListItem,
   ListItemText,
@@ -273,7 +274,7 @@ export const GroupsEditorViewer = (props: Props) => {
   const validateGroup = () => {
     let group = formIns.getValues();
     if (group.name === "") {
-      throw new Error(t("Group Name Cannot Be Empty"));
+      throw new Error(t("Group Name Required"));
     }
   };
 
@@ -342,6 +343,11 @@ export const GroupsEditorViewer = (props: Props) => {
                           "relay",
                         ]}
                         value={field.value}
+                        renderOption={(props, option) => (
+                          <li {...props} title={t(option)}>
+                            {option}
+                          </li>
+                        )}
                         onChange={(_, value) => value && field.onChange(value)}
                         renderInput={(params) => <TextField {...params} />}
                       />
@@ -370,7 +376,7 @@ export const GroupsEditorViewer = (props: Props) => {
                   control={control}
                   render={({ field }) => (
                     <Item>
-                      <ListItemText primary={t("Icon")} />
+                      <ListItemText primary={t("Proxy Group Icon")} />
                       <TextField
                         autoComplete="new-password"
                         size="small"
@@ -418,7 +424,6 @@ export const GroupsEditorViewer = (props: Props) => {
                     </Item>
                   )}
                 />
-
                 <Controller
                   name="url"
                   control={control}
@@ -427,6 +432,7 @@ export const GroupsEditorViewer = (props: Props) => {
                       <ListItemText primary={t("Health Check Url")} />
                       <TextField
                         autoComplete="new-password"
+                        placeholder="https://www.gstatic.com/generate_204"
                         size="small"
                         sx={{ width: "calc(100% - 150px)" }}
                         {...field}
@@ -434,6 +440,24 @@ export const GroupsEditorViewer = (props: Props) => {
                     </Item>
                   )}
                 />
+                <Controller
+                  name="expected-status"
+                  control={control}
+                  render={({ field }) => (
+                    <Item>
+                      <ListItemText primary={t("Expected Status")} />
+                      <TextField
+                        autoComplete="new-password"
+                        placeholder="*"
+                        size="small"
+                        sx={{ width: "calc(100% - 150px)" }}
+                        onChange={(e) => {
+                          field.onChange(parseInt(e.target.value));
+                        }}
+                      />
+                    </Item>
+                  )}
+                />
                 <Controller
                   name="interval"
                   control={control}
@@ -442,12 +466,20 @@ export const GroupsEditorViewer = (props: Props) => {
                       <ListItemText primary={t("Interval")} />
                       <TextField
                         autoComplete="new-password"
+                        placeholder="300"
                         type="number"
                         size="small"
                         sx={{ width: "calc(100% - 150px)" }}
                         onChange={(e) => {
                           field.onChange(parseInt(e.target.value));
                         }}
+                        InputProps={{
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              {t("seconds")}
+                            </InputAdornment>
+                          ),
+                        }}
                       />
                     </Item>
                   )}
@@ -460,12 +492,20 @@ export const GroupsEditorViewer = (props: Props) => {
                       <ListItemText primary={t("Timeout")} />
                       <TextField
                         autoComplete="new-password"
+                        placeholder="5000"
                         type="number"
                         size="small"
                         sx={{ width: "calc(100% - 150px)" }}
                         onChange={(e) => {
                           field.onChange(parseInt(e.target.value));
                         }}
+                        InputProps={{
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              {t("millis")}
+                            </InputAdornment>
+                          ),
+                        }}
                       />
                     </Item>
                   )}
@@ -478,6 +518,7 @@ export const GroupsEditorViewer = (props: Props) => {
                       <ListItemText primary={t("Max Failed Times")} />
                       <TextField
                         autoComplete="new-password"
+                        placeholder="5"
                         type="number"
                         size="small"
                         sx={{ width: "calc(100% - 150px)" }}
@@ -599,23 +640,6 @@ export const GroupsEditorViewer = (props: Props) => {
                     </Item>
                   )}
                 />
-                <Controller
-                  name="expected-status"
-                  control={control}
-                  render={({ field }) => (
-                    <Item>
-                      <ListItemText primary={t("Expected Status")} />
-                      <TextField
-                        autoComplete="new-password"
-                        size="small"
-                        sx={{ width: "calc(100% - 150px)" }}
-                        onChange={(e) => {
-                          field.onChange(parseInt(e.target.value));
-                        }}
-                      />
-                    </Item>
-                  )}
-                />
                 <Controller
                   name="include-all"
                   control={control}
@@ -684,7 +708,7 @@ export const GroupsEditorViewer = (props: Props) => {
                   onClick={() => {
                     try {
                       validateGroup();
-                      for (const item of prependSeq) {
+                      for (const item of [...prependSeq, ...groupList]) {
                         if (item.name === formIns.getValues().name) {
                           throw new Error(t("Group Name Already Exists"));
                         }
@@ -705,7 +729,7 @@ export const GroupsEditorViewer = (props: Props) => {
                   onClick={() => {
                     try {
                       validateGroup();
-                      for (const item of appendSeq) {
+                      for (const item of [...appendSeq, ...groupList]) {
                         if (item.name === formIns.getValues().name) {
                           throw new Error(t("Group Name Already Exists"));
                         }
@@ -727,10 +751,7 @@ export const GroupsEditorViewer = (props: Props) => {
                 padding: "0 10px",
               }}
             >
-              <BaseSearchBox
-                matchCase={false}
-                onSearch={(match) => setMatch(() => match)}
-              />
+              <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
               <Virtuoso
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={

src/components/profile/proxies-editor-viewer.tsx

@@ -298,10 +298,7 @@ export const ProxiesEditorViewer = (props: Props) => {
                 padding: "0 10px",
               }}
             >
-              <BaseSearchBox
-                matchCase={false}
-                onSearch={(match) => setMatch(() => match)}
-              />
+              <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
               <Virtuoso
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={

src/components/profile/proxy-item.tsx

@@ -56,6 +56,7 @@ export const ProxyItem = (props: Props) => {
         sx={{ cursor: sortable ? "move" : "" }}
         primary={
           <StyledPrimary
+            title={proxy.name}
             sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
           >
             {proxy.name}

src/components/profile/rule-item.tsx

@@ -59,6 +59,7 @@ export const RuleItem = (props: Props) => {
         sx={{ cursor: sortable ? "move" : "" }}
         primary={
           <StyledPrimary
+            title={ruleContent || "-"}
             sx={{ textDecoration: type === "delete" ? "line-through" : "" }}
           >
             {ruleContent || "-"}

src/components/profile/rules-editor-viewer.tsx

@@ -573,10 +573,7 @@ export const RulesEditorViewer = (props: Props) => {
                 padding: "0 10px",
               }}
             >
-              <BaseSearchBox
-                matchCase={false}
-                onSearch={(match) => setMatch(() => match)}
-              />
+              <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
               <Virtuoso
                 style={{ height: "calc(100% - 24px)", marginTop: "8px" }}
                 totalCount={