Merge pull request #854 from getmaxun/edit-page

feat: group action inputs by type

Author: amhsirak

src/components/robot/pages/RobotConfigPage.tsx

@@ -62,7 +62,6 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
     <Box sx={{
       maxWidth: 1000,
       margin: '50px auto',
-      maxHeight: '100vh',
       display: 'flex',
       flexDirection: 'column',
       width: '1000px',

src/components/robot/pages/RobotEditPage.tsx

@@ -506,7 +506,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
 
     return (
       <>
-        <Typography variant="body1" style={{ marginBottom: "20px" }}>
+        <Typography variant="h6" style={{ marginBottom: "20px", marginTop: "20px" }}>
           {t("List Limits")}
         </Typography>
 
@@ -539,22 +539,22 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
     if (!robot || !robot.recording || !robot.recording.workflow) return null;
 
     const editableActions = new Set(['screenshot', 'scrapeList', 'scrapeSchema']);
-    const inputs: JSX.Element[] = [];
+    const textInputs: JSX.Element[] = [];
+    const screenshotInputs: JSX.Element[] = [];
+    const listInputs: JSX.Element[] = [];
 
     robot.recording.workflow.forEach((pair, pairIndex) => {
       if (!pair.what) return;
 
       pair.what.forEach((action, actionIndex) => {
-        // Only show editable name inputs for meaningful action types
         if (!editableActions.has(String(action.action))) return;
 
-        // derive current name from possible fields
         const currentName =
           action.name ||
           (action.args && action.args[0] && typeof action.args[0] === 'object' && action.args[0].__name) ||
           '';
 
-        inputs.push(
+        const textField = (
           <TextField
             key={`action-name-${pairIndex}-${actionIndex}`}
             type="text"
@@ -564,17 +564,56 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
             fullWidth
           />
         );
+
+        switch (action.action) {
+          case 'scrapeSchema':
+            textInputs.push(textField);
+            break;
+          case 'screenshot':
+            screenshotInputs.push(textField);
+            break;
+          case 'scrapeList':
+            listInputs.push(textField);
+            break;
+        }
       });
     });
 
-    if (inputs.length === 0) return null;
+    const hasAnyInputs = textInputs.length > 0 || screenshotInputs.length > 0 || listInputs.length > 0;
+    if (!hasAnyInputs) return null;
 
     return (
       <>
-        <Typography variant="body1" style={{ marginBottom: '10px' }}>
+        <Typography variant="h6" style={{ marginBottom: '20px', marginTop: '20px' }}>
           {t('Actions')}
         </Typography>
-        {inputs}
+
+        {textInputs.length > 0 && (
+          <>
+            <Typography variant="subtitle1" style={{ marginBottom: '8px' }}>
+              Texts
+            </Typography>
+            {textInputs}
+          </>
+        )}
+
+        {screenshotInputs.length > 0 && (
+          <>
+            <Typography variant="subtitle1" style={{ marginBottom: '8px', marginTop: textInputs.length > 0 ? '16px' : '0' }}>
+              Screenshots
+            </Typography>
+            {screenshotInputs}
+          </>
+        )}
+
+        {listInputs.length > 0 && (
+          <>
+            <Typography variant="subtitle1" style={{ marginBottom: '8px', marginTop: (textInputs.length > 0 || screenshotInputs.length > 0) ? '16px' : '0' }}>
+              Lists
+            </Typography>
+            {listInputs}
+          </>
+        )}
       </>
     );
   };