add a left drag handle on the toolbar (#291)

Author: lihebi

ui/src/components/nodes/Code.tsx

@@ -308,6 +308,17 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
     <Box
       sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
     >
+      <Box
+        className="custom-drag-handle"
+        sx={{
+          cursor: "grab",
+          fontSize: "1.5rem",
+          padding: "8px",
+          display: "inline-flex",
+        }}
+      >
+        <DragIndicatorIcon fontSize="inherit" />
+      </Box>
       {!isGuest && (
         <Tooltip title="Run (shift-enter)">
           <IconButton
@@ -384,7 +395,15 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
           <ViewComfyIcon fontSize="inherit" />
         </IconButton>
       </Tooltip>
-      <Box className="custom-drag-handle" sx={{ cursor: "grab" }}>
+      <Box
+        className="custom-drag-handle"
+        sx={{
+          cursor: "grab",
+          fontSize: "1.5rem",
+          padding: "8px",
+          display: "inline-flex",
+        }}
+      >
         <DragIndicatorIcon fontSize="inherit" />
       </Box>
     </Box>

ui/src/components/nodes/Rich.tsx

@@ -624,6 +624,17 @@ function MyFloatingToolbar({ id }: { id: string }) {
   const isGuest = useStore(store, (state) => state.role === "GUEST");
   return (
     <>
+      <Box
+        className="custom-drag-handle"
+        sx={{
+          cursor: "grab",
+          fontSize: "1.5rem",
+          padding: "8px",
+          display: "inline-flex",
+        }}
+      >
+        <DragIndicatorIcon fontSize="inherit" />
+      </Box>
       {!isGuest && (
         <Tooltip title="Delete">
           <IconButton
@@ -636,8 +647,16 @@ function MyFloatingToolbar({ id }: { id: string }) {
           </IconButton>
         </Tooltip>
       )}
-      <Box className="custom-drag-handle" sx={{ cursor: "grab" }}>
-        <DragIndicatorIcon fontSize="small" />
+      <Box
+        className="custom-drag-handle"
+        sx={{
+          cursor: "grab",
+          fontSize: "1.5rem",
+          padding: "8px",
+          display: "inline-flex",
+        }}
+      >
+        <DragIndicatorIcon fontSize="inherit" />
       </Box>
     </>
   );

ui/src/components/nodes/Scope.tsx

@@ -94,6 +94,17 @@ function MyFloatingToolbar({ id }: { id: string }) {
         alignItems: "center",
       }}
     >
+      <Box
+        className="custom-drag-handle"
+        sx={{
+          cursor: "grab",
+          fontSize: "1.5rem",
+          padding: "8px",
+          display: "inline-flex",
+        }}
+      >
+        <DragIndicatorIcon fontSize="inherit" />
+      </Box>
       {!isGuest && (
         <Tooltip title="Run (shift-enter)">
           <IconButton
@@ -158,7 +169,15 @@ function MyFloatingToolbar({ id }: { id: string }) {
           </IconButton>
         </Tooltip>
       )}
-      <Box className="custom-drag-handle" sx={{ cursor: "grab" }}>
+      <Box
+        className="custom-drag-handle"
+        sx={{
+          cursor: "grab",
+          fontSize: "1.5rem",
+          padding: "8px",
+          display: "inline-flex",
+        }}
+      >
         <DragIndicatorIcon fontSize="inherit" />
       </Box>
     </Box>