05/19 Enhance codes 3

app/static/js/vault.js

@@ -634,6 +634,8 @@ const Vault = (() => {
     // Wire the bulk-select checkbox.
     const checkbox = li.querySelector(".item-checkbox");
     if (checkbox) {
+      // Stop the click from bubbling to the li (which would open the modal).
+      checkbox.addEventListener("click", (e) => e.stopPropagation());
       checkbox.addEventListener("change", () => {
         if (checkbox.checked) {
           _selectedIds.add(item.id);
@@ -714,7 +716,18 @@ const Vault = (() => {
         confirmDeleteItem(item);
       },
     );
-    li.addEventListener("click", () => openModal("edit", item));
+    li.addEventListener("click", (e) => {
+      if (_selectMode) {
+        // Toggle the checkbox when the row itself is clicked (not the checkbox).
+        const cb = li.querySelector(".item-checkbox");
+        if (cb && e.target !== cb) {
+          cb.checked = !cb.checked;
+          cb.dispatchEvent(new Event("change"));
+        }
+        return;
+      }
+      openModal("edit", item);
+    });
     return li;
   }
 
@@ -1835,8 +1848,7 @@ const Vault = (() => {
           <span class="share-name">${escHtml(s.item_name)}</span>
           <span class="share-meta">From ${escHtml(s.owner_email)}${expiryLabel}</span>
         </div>
-        ${
-          !s.accepted
+        ${!s.accepted
               ? `<button class="btn-primary btn-sm" data-accept="${s.id}">Accept</button>`
               : `<button class="btn-secondary btn-sm"
                 data-view-share="${s.id}"
@@ -2389,8 +2401,7 @@ const Vault = (() => {
           <span class="em-vault-chevron">▸</span>
         </button>
         <div class="em-vault-item-body hidden" id="em-vault-body-${idx}">
-          ${
-            hasFields
+          ${hasFields
             ? '<div class="detail-body em-detail-body"></div>'
             : '<p class="vault-empty">Could not decrypt this item.</p>'
           }
@@ -2985,8 +2996,7 @@ const Vault = (() => {
         <h3 style="margin:0 0 8px;font-size:16px;color:#111827;">
           ${isFirstTime ? "🔐 MFA enabled — save your backup codes" : "🔐 New backup codes"}
         </h3>
-        ${
-          isFirstTime
+        ${isFirstTime
         ? `<p style="font-size:13px;color:#374151;margin-bottom:12px;">
           These codes let you sign in if you lose access to your authenticator app.
           <strong>Save them now — they will not be shown again.</strong>