From 20eceb898319228a43eba6341366e0c1893a781e Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Mon, 15 Jun 2026 20:44:39 +0200
Subject: [PATCH] =?UTF-8?q?feat(10-10):=20implement=20OsDragOverlay.vue=20?=
 =?UTF-8?q?=E2=80=94=20OS=20file=20drag=20detection=20with=20depth=20count?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Options API component; emits files-dropped with file list
- Depth-counter pattern (D-16) prevents flicker across child element boundaries
- Guards against in-app drags via dataTransfer.types.includes('Files') check
- window addEventListener/removeEventListener in mounted/beforeUnmount
- Teleport to body; z-[9998] keeps overlay below ToastContainer z-[9999]
- Fade transition via scoped CSS (.fade-enter-active/.fade-leave-active)
- 8/8 tests GREEN
---
 .../src/components/layout/OsDragOverlay.vue   | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 frontend/src/components/layout/OsDragOverlay.vue

diff --git a/frontend/src/components/layout/OsDragOverlay.vue b/frontend/src/components/layout/OsDragOverlay.vue
new file mode 100644
index 0000000..d26b469
--- /dev/null
+++ b/frontend/src/components/layout/OsDragOverlay.vue
@@ -0,0 +1,76 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="showOverlay"
+        class="fixed inset-0 z-[9998] bg-indigo-900/40 flex items-center justify-center pointer-events-none"
+        data-test="os-drag-overlay"
+      >
+        <div class="bg-white rounded-2xl px-10 py-8 text-center shadow-xl pointer-events-none">
+          <AppIcon name="upload" class="w-10 h-10 text-indigo-400 mx-auto mb-3" />
+          <p class="text-base font-semibold text-gray-800">Drop files to upload</p>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script>
+import AppIcon from '../ui/AppIcon.vue'
+
+export default {
+  name: 'OsDragOverlay',
+  components: { AppIcon },
+  emits: ['files-dropped'],
+  data() {
+    return {
+      dragDepth: 0,
+      showOverlay: false,
+    }
+  },
+  methods: {
+    onDragEnter(e) {
+      if (!e.dataTransfer?.types.includes('Files')) return
+      this.dragDepth++
+      this.showOverlay = true
+    },
+    onDragLeave() {
+      this.dragDepth = Math.max(0, this.dragDepth - 1)
+      if (this.dragDepth === 0) this.showOverlay = false
+    },
+    onDragOver(e) {
+      e.preventDefault()
+    },
+    onDrop(e) {
+      e.preventDefault()
+      this.dragDepth = 0
+      this.showOverlay = false
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length) this.$emit('files-dropped', files)
+    },
+  },
+  mounted() {
+    window.addEventListener('dragenter', this.onDragEnter)
+    window.addEventListener('dragleave', this.onDragLeave)
+    window.addEventListener('dragover', this.onDragOver)
+    window.addEventListener('drop', this.onDrop)
+  },
+  beforeUnmount() {
+    window.removeEventListener('dragenter', this.onDragEnter)
+    window.removeEventListener('dragleave', this.onDragLeave)
+    window.removeEventListener('dragover', this.onDragOver)
+    window.removeEventListener('drop', this.onDrop)
+  },
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>