fix: folder/container drag targets

src/components/Photos/FolderStack.vue

@@ -62,6 +62,7 @@ const emit = defineEmits<{
   delete: [folder: PhotoFolder]
   'drop-photo': [photoId: number, folderId: number]
   'drop-files': [files: File[], folderId: number]
+  'drag-over-change': [isOver: boolean]
 }>()
 
 const isDragOver = ref(false)
@@ -99,7 +100,14 @@ function onDragStart(e: DragEvent) {
 }
 
 function onDragEnd() {
-  isDragOver.value = false
+  setDragOver(false)
+}
+
+function setDragOver(value: boolean) {
+  if (isDragOver.value !== value) {
+    isDragOver.value = value
+    emit('drag-over-change', value)
+  }
 }
 
 function onDragOver(e: DragEvent) {
@@ -108,16 +116,16 @@ function onDragOver(e: DragEvent) {
     e.dataTransfer.types.includes('application/x-pantry-photo') ||
     e.dataTransfer.types.includes('Files')
   ) {
-    isDragOver.value = true
+    setDragOver(true)
   }
 }
 
 function onDragLeave() {
-  isDragOver.value = false
+  setDragOver(false)
 }
 
 function onDrop(e: DragEvent) {
-  isDragOver.value = false
+  setDragOver(false)
   if (!e.dataTransfer) return
 
   // External file drop

src/views/PhotosView.vue

@@ -70,6 +70,7 @@
             @delete="confirmDeleteFolder(folder)"
             @drop-photo="onDropPhotoToFolder"
             @drop-files="onDropFilesToFolder"
+            @drag-over-change="onFolderDragOverChange"
           />
           <template v-for="(item, i) in rootGridItems" :key="item.key">
             <div
@@ -421,10 +422,18 @@ async function onFilesSelected(e: Event) {
 // ----- Drag and drop (file upload) -----
 
 let dragCounter = 0
+const folderHasDrag = ref(false)
+
+function onFolderDragOverChange(isOver: boolean) {
+  folderHasDrag.value = isOver
+  if (isOver) {
+    isFileDragOver.value = false
+  }
+}
 
 function onWallDragEnter(e: DragEvent) {
   dragCounter++
-  if (e.dataTransfer?.types.includes('Files')) {
+  if (e.dataTransfer?.types.includes('Files') && !folderHasDrag.value) {
     isFileDragOver.value = true
   }
 }