fix: Drop zone showing on startup and drag-drop not working

Author: FileShot

renderer/local/app.js

@@ -153,37 +153,51 @@ function switchToTool(toolName) {
 // DRAG & DROP
 // ============================================================================
 
+let dragCounter = 0;
+
 function initDropZone() {
-  const appContainer = document.querySelector('.app-container');
   const dropZone = DOM.dropZone();
 
-  // Show drop zone on drag over
-  appContainer.addEventListener('dragover', (e) => {
+  // Ensure drop zone is hidden on init
+  dropZone.hidden = true;
+  dragCounter = 0;
+  
+  // Listen on document level for drag events
+  document.addEventListener('dragenter', (e) => {
     e.preventDefault();
-    e.stopPropagation();
-    dropZone.hidden = false;
+    dragCounter++;
+    if (dragCounter === 1) {
+      dropZone.hidden = false;
+    }
   });
 
-  appContainer.addEventListener('dragleave', (e) => {
+  document.addEventListener('dragleave', (e) => {
     e.preventDefault();
-    if (e.target === appContainer) {
+    dragCounter--;
+    if (dragCounter === 0) {
       dropZone.hidden = true;
     }
   });
 
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  
   // Handle file drop
-  dropZone.addEventListener('drop', handleFileDrop);
-  appContainer.addEventListener('drop', handleFileDrop);
+  document.addEventListener('drop', handleFileDrop);
 }
 
 function handleFileDrop(e) {
   e.preventDefault();
   e.stopPropagation();
 
+  // Reset drag counter and hide drop zone
+  dragCounter = 0;
   DOM.dropZone().hidden = true;
 
-  const files = e.dataTransfer.files;
-  if (files.length === 0) return;
+  const files = e.dataTransfer?.files;
+  if (!files || files.length === 0) return;
 
   // Switch to vault tool
   switchToTool('vault');

renderer/local/styles.css

@@ -49,7 +49,8 @@ body {
 .topbar-right { display: flex; gap: 12px; align-items: center; }
 .status-badge { font-size: 12px; color: var(--text-secondary); background: var(--panel); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); }
 
-.drop-zone { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px); }
+.drop-zone { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px); pointer-events: all; }
+.drop-zone:not([hidden]) { display: flex; }
 .drop-zone-content { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--text); pointer-events: none; }
 .drop-zone-content svg { color: var(--accent); opacity: 0.9; }
 .drop-zone-text { font-size: 18px; font-weight: 600; }