From 88eebf6944d0fbdbc3d9e272fa768c2e7774984d Mon Sep 17 00:00:00 2001
From: Anders Holck <anders@holck.se>
Date: Fri, 22 May 2026 20:08:09 +0200
Subject: [PATCH] Drag and drop files between folders

---
 frontend/src/App.vue                 | 18 ++++++++++--
 frontend/src/components/FileTree.vue | 42 ++++++++++++++++++++++++----
 internal/api/handlers.go             | 18 ++++++++++++
 internal/api/router.go               |  1 +
 internal/files/files.go              | 13 +++++++++
 5 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2e625bf..76ab0ce 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,8 +18,8 @@
         <button :class="{active: view === 'prefs'}" @click="view = 'prefs'">⚙️ Preferences</button>
         <button v-if="isAdmin" :class="{active: view === 'admin'}" @click="view = 'admin'">👤 Admin</button>
       </div>
-      <FileTree v-if="view === 'files'" :files="filteredFiles" :selected="currentFile" @select="openFile" @delete="deleteItem" />
-      <FileTree v-if="view === 'shared'" :files="sharedFiles" :selected="currentFile" @select="openFile" @delete="deleteItem" />
+      <FileTree v-if="view === 'files'" :files="filteredFiles" :selected="currentFile" @select="openFile" @delete="deleteItem" @move="moveFile" />
+      <FileTree v-if="view === 'shared'" :files="sharedFiles" :selected="currentFile" @select="openFile" @delete="deleteItem" @move="moveFile" />
     </aside>
     <main class="editor-area" v-if="view === 'files' || view === 'shared'">
       <div class="toolbar">
@@ -361,6 +361,20 @@ async function deleteItem(item) {
   await loadFiles()
 }
 
+async function moveFile({ from, to }) {
+  const filename = from.split('/').pop()
+  const newPath = to + '/' + filename
+  try {
+    await api('/api/files/move', { from, to: newPath })
+    if (currentFile.value === from) {
+      currentFile.value = newPath
+    }
+    await loadFiles()
+  } catch (e) {
+    alert('Move failed')
+  }
+}
+
 // ─── Shared ──────────────────────────────────────────────────────────────────
 
 async function loadShared() {
diff --git a/frontend/src/components/FileTree.vue b/frontend/src/components/FileTree.vue
index aff2688..5e0ba07 100644
--- a/frontend/src/components/FileTree.vue
+++ b/frontend/src/components/FileTree.vue
@@ -3,36 +3,67 @@
     <div v-for="item in files" :key="item.path" class="tree-item">
       <div
         class="tree-node"
-        :class="{ selected: item.path === selected, folder: item.isDir }"
+        :class="{ selected: item.path === selected, folder: item.isDir, 'drop-target': dropTarget === item.path }"
         @click="item.isDir ? toggleFolder(item) : $emit('select', item.path)"
-        @contextmenu.prevent="showContext($event, item)"
+        @contextmenu.prevent="null"
+        draggable="true"
+        @dragstart="onDragStart($event, item)"
+        @dragover.prevent="onDragOver($event, item)"
+        @dragleave="onDragLeave"
+        @drop="onDrop($event, item)"
       >
         <span class="icon">{{ item.isDir ? (expanded[item.path] ? '📂' : '📁') : '📄' }}</span>
         <span class="name">{{ item.name }}</span>
         <button class="delete-btn" @click.stop="$emit('delete', item)" title="Delete">×</button>
       </div>
       <div v-if="item.isDir && expanded[item.path] && item.children" class="children">
-        <FileTree :files="item.children" :selected="selected" @select="$emit('select', $event)" @delete="$emit('delete', $event)" />
+        <FileTree :files="item.children" :selected="selected" @select="$emit('select', $event)" @delete="$emit('delete', $event)" @move="$emit('move', $event)" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 defineProps({
   files: { type: Array, default: () => [] },
   selected: { type: String, default: '' },
 })
 
-defineEmits(['select', 'delete'])
+const emit = defineEmits(['select', 'delete', 'move'])
 
 const expanded = reactive({})
+const dropTarget = ref('')
 
 function toggleFolder(item) {
   expanded[item.path] = !expanded[item.path]
 }
+
+function onDragStart(e, item) {
+  e.dataTransfer.setData('text/plain', item.path)
+  e.dataTransfer.effectAllowed = 'move'
+}
+
+function onDragOver(e, item) {
+  if (item.isDir) {
+    e.dataTransfer.dropEffect = 'move'
+    dropTarget.value = item.path
+  }
+}
+
+function onDragLeave() {
+  dropTarget.value = ''
+}
+
+function onDrop(e, targetItem) {
+  dropTarget.value = ''
+  const sourcePath = e.dataTransfer.getData('text/plain')
+  if (!sourcePath || !targetItem.isDir || sourcePath === targetItem.path) return
+  // Don't drop into itself
+  if (targetItem.path.startsWith(sourcePath + '/')) return
+  emit('move', { from: sourcePath, to: targetItem.path })
+}
 </script>
 
 <style scoped>
@@ -50,6 +81,7 @@ function toggleFolder(item) {
 }
 .tree-node:hover { background: var(--hover-bg, #313244); }
 .tree-node.selected { background: var(--selected-bg, #45475a); }
+.tree-node.drop-target { background: var(--accent, #89b4fa); opacity: 0.7; }
 .icon { font-size: 14px; }
 .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .delete-btn {
diff --git a/internal/api/handlers.go b/internal/api/handlers.go
index 991ba45..b6a324c 100644
--- a/internal/api/handlers.go
+++ b/internal/api/handlers.go
@@ -263,6 +263,24 @@ func (s *Server) handleDeleteFile(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 200, map[string]string{"status": "deleted"})
 }
 
+func (s *Server) handleMoveFile(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		From string `json:"from"`
+		To   string `json:"to"`
+	}
+	if err := decodeBody(r, &req); err != nil || req.From == "" || req.To == "" {
+		writeJSON(w, 400, map[string]string{"error": "from and to required"})
+		return
+	}
+
+	userID := getUserID(r)
+	if err := files.MoveFile(s.dataDir, userID, req.From, req.To); err != nil {
+		writeJSON(w, 500, map[string]string{"error": "move failed"})
+		return
+	}
+	writeJSON(w, 200, map[string]string{"status": "moved"})
+}
+
 func (s *Server) handleSharedFiles(w http.ResponseWriter, r *http.Request) {
 	// TODO: query permissions table for files shared with this user
 	// For now return empty list
diff --git a/internal/api/router.go b/internal/api/router.go
index 5c6ef86..06da52a 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -35,6 +35,7 @@ func NewRouter(db *sql.DB, dataDir, secret string) http.Handler {
 	mux.HandleFunc("POST /api/files/create", s.requireAuth(s.handleCreateFile))
 	mux.HandleFunc("POST /api/files/create-folder", s.requireAuth(s.handleCreateFolder))
 	mux.HandleFunc("POST /api/files/delete", s.requireAuth(s.handleDeleteFile))
+	mux.HandleFunc("POST /api/files/move", s.requireAuth(s.handleMoveFile))
 	mux.HandleFunc("POST /api/files/search", s.requireAuth(s.handleSearchFiles))
 	mux.HandleFunc("POST /api/files/shared", s.requireAuth(s.handleListSharedFiles))
 
diff --git a/internal/files/files.go b/internal/files/files.go
index d3a9936..25b8229 100644
--- a/internal/files/files.go
+++ b/internal/files/files.go
@@ -63,6 +63,19 @@ func DeleteFile(dataDir, userID, relPath string) error {
 	return os.RemoveAll(p)
 }
 
+// MoveFile moves a file or folder to a new path.
+func MoveFile(dataDir, userID, fromRel, toRel string) error {
+	from := safePath(dataDir, userID, fromRel)
+	to := safePath(dataDir, userID, toRel)
+	if from == "" || to == "" {
+		return os.ErrPermission
+	}
+	if err := os.MkdirAll(filepath.Dir(to), 0755); err != nil {
+		return err
+	}
+	return os.Rename(from, to)
+}
+
 // ListTree returns the file tree for a user.
 func ListTree(dataDir, userID string) ([]FileInfo, error) {
 	root := UserDir(dataDir, userID)