Merge pull request #4 from superdoc-dev/caio/sd-532-display-field-id-instead-of-alias-in-fields-list

feat: enhance FieldList component

Author: caio-pizzol

src/defaults/FieldList.tsx

@@ -40,6 +40,7 @@ export const FieldList: React.FC<FieldListProps> = ({
               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<FieldListProps> = ({
                   e.currentTarget.style.background = "#f9fafb";
                 }
               }}
+              title={field.alias}
             >
-              <div
+              <button
+                onClick={(e) => {
+                  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"
               >
-                <div>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 2V1.5C6 1.22386 6.22386 1 6.5 1H9.5C9.77614 1 10 1.22386 10 1.5V2M2 4H14M12.6667 4L12.1991 11.0129C12.129 12.065 12.0939 12.5911 11.8667 12.99C11.6666 13.3412 11.3648 13.6235 11.0011 13.7998C10.588 14 10.0607 14 9.00623 14H6.99377C5.93927 14 5.41202 14 4.99889 13.7998C4.63517 13.6235 4.33339 13.3412 4.13332 12.99C3.90607 12.5911 3.871 12.065 3.80086 11.0129L3.33333 4"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+              <div style={{ paddingRight: "24px" }}>
+                <div
+                  style={{
+                    fontWeight: "500",
+                    fontSize: "14px",
+                    marginBottom:
+                      field.alias && field.alias !== field.id ? "4px" : "0",
+                  }}
+                >
+                  {field.id}
+                </div>
+                {field.alias && field.alias !== field.id && (
                   <div
                     style={{
-                      fontWeight: "500",
-                      fontSize: "14px",
-                      marginBottom: "4px",
+                      fontSize: "12px",
+                      color: "#4b5563",
                     }}
                   >
                     {field.alias}
                   </div>
-                  {field.tag && (
-                    <div style={{ fontSize: "12px", color: "#6b7280" }}>
-                      {field.tag}
-                    </div>
-                  )}
-                </div>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onDelete(field.id);
-                  }}
-                  style={{
-                    padding: "4px 8px",
-                    background: "#ef4444",
-                    color: "white",
-                    border: "none",
-                    borderRadius: "4px",
-                    fontSize: "12px",
-                    cursor: "pointer",
-                    opacity: 0.8,
-                    transition: "opacity 0.2s",
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.opacity = "1";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.opacity = "0.8";
-                  }}
-                >
-                  Delete
-                </button>
+                )}
               </div>
             </div>
           ))}