feat: handle user input

src/components/organisms/RightSidePanel.tsx

@@ -26,6 +26,8 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
   const [action, setAction] = useState<string>('');
   const [isSettingsDisplayed, setIsSettingsDisplayed] = useState<boolean>(false);
   const [labels, setLabels] = useState<{ [id: number]: string }>({});
+  const [errors, setErrors] = useState<{ [id: number]: string }>({});
+    const [confirmedSteps, setConfirmedSteps] = useState<{ [id: number]: boolean }>({});
   
 
   const { lastAction } = useGlobalInfoStore();
@@ -42,19 +44,36 @@ export const RightSidePanel = ({ pairForEdit }: RightSidePanelProps) => {
     setIsSettingsDisplayed(true);
   };
 
-  
+
   const handleLabelChange = (id: number, label: string) => {
     setLabels(prevLabels => ({ ...prevLabels, [id]: label }));
+    if (!label.trim()) {
+        setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' }));
+    } else {
+        setErrors(prevErrors => ({ ...prevErrors, [id]: '' }));
+    }
 };
 
 const handleConfirm = (id: number) => {
-    if (labels[id]) {
+    const label = labels[id]?.trim();
-      updateBrowserStepLabel(id, labels[id]);
+    if (label) {
+        updateBrowserStepLabel(id, label);
+        setConfirmedSteps(prev => ({ ...prev, [id]: true }));
+    } else {
+        setErrors(prevErrors => ({ ...prevErrors, [id]: 'Label cannot be empty' }));
     }
 };
 
 const handleDiscard = (id: number) => {
     deleteBrowserStep(id);
+    setLabels(prevLabels => {
+        const { [id]: _, ...rest } = prevLabels;
+        return rest;
+    });
+    setErrors(prevErrors => {
+        const { [id]: _, ...rest } = prevErrors;
+        return rest;
+    });
 };
 
   return (
@@ -131,16 +150,25 @@ const handleDiscard = (id: number) => {
                         onChange={(e) => handleLabelChange(step.id, e.target.value)}
                         fullWidth
                         margin="normal"
+                        error={!!errors[step.id]}
+                        helperText={errors[step.id]}
+                        disabled={confirmedSteps[step.id]}
                     />
-                    <Typography variant="h6">Description: {step.value}</Typography>
+                                        <Typography variant="h6">Description: {step.value}</Typography>
-                    <Box display="flex" justifyContent="space-between" gap={2}>
+                    {!confirmedSteps[step.id] && (
-                        <Button variant="contained" onClick={() => handleConfirm(step.id)}>
+                        <Box display="flex" justifyContent="space-between" gap={2}>
-                            Confirm
+                            <Button
-                        </Button>
+                                variant="contained"
-                        <Button variant="contained" onClick={() => handleDiscard(step.id)}>
+                                onClick={() => handleConfirm(step.id)}
-                            Discard
+                                disabled={!labels[step.id]?.trim()}
-                        </Button>
+                            >
-                    </Box>
+                                Confirm
+                            </Button>
+                            <Button variant="contained" onClick={() => handleDiscard(step.id)}>
+                                Discard
+                            </Button>
+                        </Box>
+                    )}
                 </Box>
             ))}
         </Box>