drag DirectoryEntry onto directory to move

frontend/components/DirectoryEntry.vue

@@ -10,6 +10,7 @@ import {
     deleteWarrenDirectory,
     deleteWarrenFile,
     fetchFile,
+    moveFile,
 } from '~/lib/api/warrens';
 import type { DirectoryEntry } from '#shared/types';
 
@@ -78,6 +79,38 @@ async function onClick() {
         }
     }
 }
+
+function onDragStart(e: DragEvent) {
+    if (e.dataTransfer == null) {
+        return;
+    }
+
+    e.dataTransfer.setData('application/warren', entry.name);
+    e.dataTransfer.dropEffect = 'move';
+}
+
+async function onDrop(e: DragEvent) {
+    if (e.dataTransfer == null || warrenStore.current == null) {
+        return;
+    }
+
+    if (entry.fileType !== 'directory') {
+        return;
+    }
+
+    const fileName = e.dataTransfer.getData('application/warren');
+
+    if (entry.name === fileName) {
+        return;
+    }
+
+    await moveFile(
+        warrenStore.current.warrenId,
+        warrenStore.current.path,
+        fileName,
+        `${warrenStore.current.path}/${entry.name}`
+    );
+}
 </script>
 
 <template>
@@ -85,7 +118,10 @@ async function onClick() {
         <ContextMenuTrigger>
             <button
                 :disabled="warrenStore.loading || disabled"
-                class="bg-accent/30 border-border select-none, flex w-52 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2"
+                class="bg-accent/30 border-border select-none, flex w-52 translate-0 flex-row gap-4 overflow-hidden rounded-md border-1 px-4 py-2"
+                draggable="true"
+                @dragstart="onDragStart"
+                @drop="onDrop"
                 @click="onClick"
             >
                 <div class="flex flex-row items-center">