diff --git a/src/defaults/FieldList.tsx b/src/defaults/FieldList.tsx index 1e40c1c..3d015ba 100644 --- a/src/defaults/FieldList.tsx +++ b/src/defaults/FieldList.tsx @@ -40,6 +40,7 @@ export const FieldList: React.FC = ({ key={field.id} onClick={() => onSelect(field)} style={{ + position: "relative", padding: "12px", background: selectedFieldId === field.id ? "#eff6ff" : "#f9fafb", @@ -61,55 +62,72 @@ export const FieldList: React.FC = ({ e.currentTarget.style.background = "#f9fafb"; } }} + title={field.alias} > -
{ + e.stopPropagation(); + onDelete(field.id); + }} style={{ + position: "absolute", + top: "8px", + right: "8px", + padding: "4px", + background: "transparent", + border: "none", + cursor: "pointer", + color: "#9ca3af", + transition: "color 0.2s", display: "flex", - justifyContent: "space-between", alignItems: "center", + justifyContent: "center", + }} + onMouseEnter={(e) => { + e.currentTarget.style.color = "#ef4444"; }} + onMouseLeave={(e) => { + e.currentTarget.style.color = "#9ca3af"; + }} + title="Delete field" > -
+ + + + +
+
+ {field.id} +
+ {field.alias && field.alias !== field.id && (
{field.alias}
- {field.tag && ( -
- {field.tag} -
- )} -
- + )}
))}