fix: adjust web ui item style

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

@@ -1,5 +1,11 @@
 import { useState } from "react";
-import { IconButton, Stack, TextField, Typography } from "@mui/material";
+import {
+  Divider,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
 import {
   CheckRounded,
   CloseRounded,
@@ -32,83 +38,94 @@ const WebUIItem = (props: Props) => {
 
   if (editing || onlyEdit) {
     return (
-      <Stack spacing={1} direction="row" mt={1} mb={2} alignItems="center">
-        <TextField
-          fullWidth
-          size="small"
-          value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
-          placeholder={`Support %host %port %secret`}
-          autoComplete="off"
+      <>
+        <Stack spacing={0.75} direction="row" mt={1} mb={1} alignItems="center">
+          <TextField
+            fullWidth
+            size="small"
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            placeholder={`Support %host %port %secret`}
+            autoComplete="off"
+          />
+          <IconButton
+            size="small"
+            title="Save"
+            color="inherit"
+            onClick={() => {
+              onChange(editValue);
+              setEditing(false);
+            }}
+          >
+            <CheckRounded fontSize="inherit" />
+          </IconButton>
+          <IconButton
+            size="small"
+            title="Cancel"
+            color="inherit"
+            onClick={() => {
+              onCancel?.();
+              setEditing(false);
+            }}
+          >
+            <CloseRounded fontSize="inherit" />
+          </IconButton>
+        </Stack>
+        <Divider />
+      </>
+    );
+  }
+
+  const html = value
+    ?.replace("%host", "<span>%host</span>")
+    .replace("%port", "<span>%port</span>")
+    .replace("%secret", "<span>%secret</span>");
+
+  return (
+    <>
+      <Stack spacing={0.75} direction="row" alignItems="center" mt={1} mb={1}>
+        <Typography
+          component="div"
+          width="100%"
+          title={value}
+          color={value ? "text.primary" : "text.secondary"}
+          sx={({ palette }) => ({
+            "> span": {
+              color: palette.primary.main,
+            },
+          })}
+          dangerouslySetInnerHTML={{ __html: html || "NULL" }}
         />
         <IconButton
           size="small"
-          title="Save"
+          title="Open URL"
           color="inherit"
-          onClick={() => {
-            onChange(editValue);
-            setEditing(false);
-          }}
+          onClick={() => onOpenUrl?.(value)}
         >
-          <CheckRounded fontSize="inherit" />
+          <OpenInNewRounded fontSize="inherit" />
         </IconButton>
         <IconButton
           size="small"
-          title="Cancel"
+          title="Edit"
           color="inherit"
           onClick={() => {
-            onCancel?.();
-            setEditing(false);
+            setEditing(true);
+            setEditValue(value);
           }}
         >
-          <CloseRounded fontSize="inherit" />
+          <EditRounded fontSize="inherit" />
+        </IconButton>
+        <IconButton
+          size="small"
+          title="Delete"
+          color="inherit"
+          onClick={onDelete}
+        >
+          <DeleteRounded fontSize="inherit" />
         </IconButton>
       </Stack>
-    );
-  }
-
-  return (
-    <Stack spacing={1} direction="row" alignItems="center" mt={1} mb={2}>
-      <Typography
-        component="div"
-        width="100%"
-        title={value}
-        sx={{
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {value || "NULL"}
-      </Typography>
-      <IconButton
-        size="small"
-        title="Open URL"
-        color="inherit"
-        onClick={() => onOpenUrl?.(value)}
-      >
-        <OpenInNewRounded fontSize="inherit" />
-      </IconButton>
-      <IconButton
-        size="small"
-        title="Edit"
-        color="inherit"
-        onClick={() => {
-          setEditing(true);
-          setEditValue(value);
-        }}
-      >
-        <EditRounded fontSize="inherit" />
-      </IconButton>
-      <IconButton
-        size="small"
-        title="Delete"
-        color="inherit"
-        onClick={onDelete}
-      >
-        <DeleteRounded fontSize="inherit" />
-      </IconButton>
-    </Stack>
+      <Divider />
+    </>
   );
 };