prompt reordering works

src/components/OutputsTable/VariantHeader.tsx

@@ -1,25 +1,26 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { type PromptVariant } from "./types";
 import { api } from "~/utils/api";
 import { useHandledAsyncCallback } from "~/utils/hooks";
-import { Button, HStack, Heading, Tooltip } from "@chakra-ui/react";
+import { Button, HStack, Input, Icon, Tooltip } from "@chakra-ui/react"; // Changed here
 import { BsX } from "react-icons/bs";
+import { RiDraggable } from "react-icons/ri";
 import { cellPadding, headerMinHeight } from "../constants";
 
 export default function VariantHeader(props: { variant: PromptVariant }) {
   const utils = api.useContext();
+  const [isDragTarget, setIsDragTarget] = useState(false);
+  const [label, setLabel] = useState(props.variant.label);
 
-  const labelRef = useRef<HTMLHeadingElement | null>(null);
   const updateMutation = api.promptVariants.update.useMutation();
   const [onSaveLabel] = useHandledAsyncCallback(async () => {
-    const newLabel = labelRef.current?.innerText;
-    if (newLabel && newLabel !== props.variant.label) {
+    if (label && label !== props.variant.label) {
       await updateMutation.mutateAsync({
         id: props.variant.id,
-        updates: { label: newLabel },
+        updates: { label: label },
       });
     }
-  }, [updateMutation, props.variant.id, props.variant.label]);
+  }, [updateMutation, props.variant.id, props.variant.label, label]);
 
   const hideMutation = api.promptVariants.hide.useMutation();
   const [onHide] = useHandledAsyncCallback(async () => {
@@ -29,36 +30,69 @@ export default function VariantHeader(props: { variant: PromptVariant }) {
     await utils.promptVariants.list.invalidate();
   }, [hideMutation, props.variant.id]);
 
+  const reorderMutation = api.promptVariants.reorder.useMutation();
+  const [onReorder] = useHandledAsyncCallback(
+    async (e: DragEvent) => {
+      e.preventDefault();
+      console.log("onDrop");
+      const draggedId = e.dataTransfer.getData("text/plain");
+      const droppedId = props.variant.id;
+      if (!draggedId || !droppedId || draggedId === droppedId) return;
+      await reorderMutation.mutateAsync({
+        draggedId,
+        droppedId,
+      });
+      await utils.promptVariants.list.invalidate();
+    },
+    [reorderMutation, props.variant.id]
+  );
+
   return (
-    <HStack spacing={4} alignItems="center" minH={headerMinHeight}>
-      <Heading
-        fontWeight="bold"
-        size="md"
-        ref={labelRef}
-        contentEditable
-        suppressContentEditableWarning
+    <HStack
+      spacing={4}
+      alignItems="center"
+      minH={headerMinHeight}
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.setData("text/plain", props.variant.id);
+        e.currentTarget.style.opacity = "0.4";
+      }}
+      onDragEnd={(e) => {
+        e.currentTarget.style.opacity = "1";
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragTarget(true);
+      }}
+      onDragLeave={() => {
+        setIsDragTarget(false);
+      }}
+      onDrop={onReorder}
+      backgroundColor={isDragTarget ? "gray.100" : "transparent"}
+    >
+      <Icon
+        as={RiDraggable}
+        boxSize={6}
+        color="gray.400"
+        _hover={{ color: "gray.800", cursor: "pointer" }}
+      />
+      <Input // Changed to Input
+        size="sm"
+        value={label}
+        onChange={(e) => setLabel(e.target.value)}
+        onBlur={onSaveLabel}
         borderWidth={1}
         borderColor="transparent"
+        fontWeight="bold"
+        fontSize={16}
         _hover={{ borderColor: "gray.300" }}
         _focus={{ borderColor: "blue.500", outline: "none" }}
-        onBlur={onSaveLabel}
         flex={1}
         px={cellPadding.x}
-        // py={cellPadding.y}
-      >
-        {props.variant.label}
-      </Heading>
+      />
       <Tooltip label="Hide Variant" hasArrow>
-        <Button
-          variant="ghost"
-          colorScheme="gray"
-          size="sm"
-          onClick={onHide}
-          borderRadius={0}
-          // px={cellPadding.x}
-          // py={cellPadding.y}
-        >
-          <BsX size={24} />
+        <Button variant="ghost" colorScheme="gray" size="sm" onClick={onHide} borderRadius={0}>
+          <Icon as={BsX} boxSize={6} />
         </Button>
       </Tooltip>
     </HStack>