From 2c834eb42bf3b93366d1b124e0a60d130972fc9f Mon Sep 17 00:00:00 2001
From: 409 <409dev@protonmail.com>
Date: Tue, 29 Jul 2025 22:14:45 +0200
Subject: [PATCH] drag `DirectoryEntry` onto directory to move

---
 frontend/components/DirectoryEntry.vue | 38 ++++++++++++++++++++-
 frontend/lib/api/warrens.ts            | 46 ++++++++++++++++++++++++++
 frontend/pages/warrens/files.vue       |  5 ++-
 3 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/frontend/components/DirectoryEntry.vue b/frontend/components/DirectoryEntry.vue
index f222001..a3b27ae 100644
--- a/frontend/components/DirectoryEntry.vue
+++ b/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">
diff --git a/frontend/lib/api/warrens.ts b/frontend/lib/api/warrens.ts
index 4e1e9e1..ac7c893 100644
--- a/frontend/lib/api/warrens.ts
+++ b/frontend/lib/api/warrens.ts
@@ -300,3 +300,49 @@ export async function fetchFile(
         data: data.value,
     };
 }
+
+export async function moveFile(
+    warrenId: string,
+    path: string,
+    fileName: string,
+    targetPath: string
+): Promise<{ success: boolean }> {
+    if (!path.endsWith('/')) {
+        path += '/';
+    }
+    path += fileName;
+
+    if (!targetPath.endsWith('/')) {
+        targetPath += '/';
+    }
+    targetPath += fileName;
+
+    const { status } = await useFetch(getApiUrl(`warrens/files/mv`), {
+        method: 'POST',
+        headers: getApiHeaders(),
+        body: JSON.stringify({
+            warrenId,
+            path,
+            targetPath,
+        }),
+    });
+
+    if (status.value !== 'success') {
+        toast.error('Move', {
+            id: 'MOVE_FILE_TOAST',
+            description: `Failed to move ${fileName}`,
+        });
+        return { success: false };
+    }
+
+    await refreshNuxtData('current-directory');
+
+    toast.success('Rename', {
+        id: 'RENAME_FILE_TOAST',
+        description: `Successfully moved ${fileName} to ${targetPath}`,
+    });
+
+    return {
+        success: true,
+    };
+}
diff --git a/frontend/pages/warrens/files.vue b/frontend/pages/warrens/files.vue
index 4562ca8..4f06ae8 100644
--- a/frontend/pages/warrens/files.vue
+++ b/frontend/pages/warrens/files.vue
@@ -81,7 +81,10 @@ function onDrop(files: File[] | null, e: DragEvent) {
         <DirectoryListContextMenu class="w-full grow">
             <DirectoryList
                 v-if="entries != null"
-                :is-over-drop-zone="dropZone.isOverDropZone.value"
+                :is-over-drop-zone="
+                    dropZone.isOverDropZone.value &&
+                    dropZone.files.value != null
+                "
                 :entries="entries"
             />
         </DirectoryListContextMenu>