feat: improve dnd icon

app/components/chat.module.scss

@@ -101,6 +101,19 @@
     width: 100%;
     margin-bottom: 10px;
 
+    &:hover {
+      .context-drag {
+        opacity: 1;
+      }
+    }
+
+    .context-drag {
+      display: flex;
+      align-items: center;
+      opacity: 0.5;
+      transition: all ease 0.3s;
+    }
+
     .context-role {
       margin-right: 10px;
     }

app/components/home.module.scss

@@ -61,24 +61,36 @@
       }
     }
   }
+
+  &:hover,
+  &:active {
+    .sidebar-drag {
+      background-color: rgba($color: #000000, $alpha: 0.01);
+
+      svg {
+        opacity: 0.2;
+      }
+    }
+  }
 }
 
 .sidebar-drag {
-  $width: 10px;
+  $width: 14px;
 
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   width: $width;
-  background-color: var(--black);
+  background-color: rgba($color: #000000, $alpha: 0);
   cursor: ew-resize;
-  opacity: 0;
   transition: all ease 0.3s;
+  display: flex;
+  align-items: center;
 
-  &:hover,
-  &:active {
-    opacity: 0.2;
+  svg {
+    opacity: 0;
+    margin-left: -2px;
   }
 }
 

app/components/mask.tsx

@@ -11,6 +11,7 @@ import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
 import EyeIcon from "../icons/eye.svg";
 import CopyIcon from "../icons/copy.svg";
+import DragIcon from "../icons/drag.svg";
 
 import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
 import {
@@ -214,7 +215,7 @@ function ContextPromptItem(props: {
   const [focusingInput, setFocusingInput] = useState(false);
 
   return (
-    <Draggable draggableId={props.prompt.id} index={props.index}>
+    <Draggable draggableId={props.prompt.id.toString()} index={props.index}>
       {(provided) => (
         <div
           className={chatStyle["context-prompt-row"]}
@@ -223,22 +224,27 @@ function ContextPromptItem(props: {
           {...provided.dragHandleProps}
         >
           {!focusingInput && (
-            <Select
-              value={props.prompt.role}
-              className={chatStyle["context-role"]}
-              onChange={(e) =>
-                props.update({
-                  ...props.prompt,
-                  role: e.target.value as any,
-                })
-              }
-            >
-              {ROLES.map((r) => (
-                <option key={r} value={r}>
-                  {r}
-                </option>
-              ))}
-            </Select>
+            <>
+              <div className={chatStyle["context-drag"]}>
+                <DragIcon />
+              </div>
+              <Select
+                value={props.prompt.role}
+                className={chatStyle["context-role"]}
+                onChange={(e) =>
+                  props.update({
+                    ...props.prompt,
+                    role: e.target.value as any,
+                  })
+                }
+              >
+                {ROLES.map((r) => (
+                  <option key={r} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </Select>
+            </>
           )}
           <Input
             value={props.prompt.content}

app/components/sidebar.tsx

@@ -10,6 +10,7 @@ import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
 import MaskIcon from "../icons/mask.svg";
 import PluginIcon from "../icons/plugin.svg";
+import DragIcon from "../icons/drag.svg";
 
 import Locale from "../locales";
 
@@ -198,7 +199,9 @@ export function SideBar(props: { className?: string }) {
       <div
         className={styles["sidebar-drag"]}
         onMouseDown={(e) => onDragMouseDown(e as any)}
-      ></div>
+      >
+        <DragIcon />
+      </div>
     </div>
   );
 }