From 34d20c52245a421a142fa66f61862ca00212c084 Mon Sep 17 00:00:00 2001
From: Zaki <18zaki18@gmail.com>
Date: Sat, 9 May 2026 14:57:13 +0100
Subject: [PATCH] Fix rect selection to work on vault background, not just
 entriesContainer

The entriesContainer has no padding so cards fill the grid edge-to-edge;
there is no clickable empty space at the left/top/bottom of the card area
within entriesContainer.  Moved rect-selection initiation into the
document-level mousedown handler so it fires when clicking on ANY
non-interactive element inside .vault (padding, grid gaps, etc.).
Interactive elements (buttons, inputs, folders bar, toolbar, etc.)
still clear selection as expected.
---
 js/app.js | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/js/app.js b/js/app.js
index c8e32cb..68bd1d4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1141,27 +1141,27 @@ if (token && curUser) {
     }
 })();
 
-// Click outside any entry card → clear selection
+// Document mousedown: rect selection on vault background, clear outside vault
 document.addEventListener('mousedown', function(e) {
     if (e.button !== 0 || rectState.active) return;
     if (e.target?.closest?.('.entry-card,.entry-row,.entry-compact,.table-row-drag,#batchBar,.custom-modal-overlay.show,.edit-modal.show,.modal-overlay.show,#genModal,#settingsMenu')) return;
-    if (selectedIds.size > 0) clearSelection();
-});
-
-// Rectangle selection
-document.getElementById('entriesContainer').addEventListener('mousedown', function(e) {
-    if (rectState.active || e.button !== 0) return;
-    if (e.target?.closest?.('[draggable="true"]') || e.target?.closest?.('.action-btns')) return;
-    rectState.active = true;
-    rectState.startX = e.clientX;
-    rectState.startY = e.clientY;
-    rectState.started = false;
-    rectState.el = null;
-    // Clear selection without full re-render to avoid detaching event target
-    selectedIds.clear();
-    lastSelectedId = null;
-    hideBatchBar();
-    document.getElementById('entriesContainer')?.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
+    if (e.target?.closest?.('button,input,select,.folders-bar,.toolbar,#trashActions,.settings-dropdown,.fab,.view-toggle,.auth-section')) {
+        if (selectedIds.size > 0) clearSelection();
+        return;
+    }
+    if (e.target?.closest?.('.vault')) {
+        rectState.active = true;
+        rectState.startX = e.clientX;
+        rectState.startY = e.clientY;
+        rectState.started = false;
+        rectState.el = null;
+        selectedIds.clear();
+        lastSelectedId = null;
+        hideBatchBar();
+        document.getElementById('entriesContainer')?.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
+    } else if (selectedIds.size > 0) {
+        clearSelection();
+    }
 });
 document.addEventListener('mousemove', function(e) {
     if (!rectState.active) return;