From ca159ec4f36c0a43a1c3bf6abf2b01dc5303fce2 Mon Sep 17 00:00:00 2001
From: Zaki <18zaki18@gmail.com>
Date: Sat, 9 May 2026 15:23:21 +0100
Subject: [PATCH] Add custom drag ghost showing selected count for multi-drag

---
 js/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index e71bbc1..dc5ee96 100644
--- a/js/app.js
+++ b/js/app.js
@@ -863,7 +863,7 @@ function attachEvents() {
 function setupDrag() {
     const c = document.getElementById('entriesContainer'); if (!c) return;
     c.querySelectorAll('[draggable="true"]').forEach(el => {
-        el.ondragstart = function(e) { draggedId = this.dataset.id; const dragIds = selectedIds.has(parseInt(draggedId)) && selectedIds.size > 1 ? [...selectedIds] : [parseInt(draggedId)]; c.querySelectorAll('[draggable="true"]').forEach(card => { if (dragIds.includes(parseInt(card.dataset.id))) card.style.opacity = '0.5'; }); e.dataTransfer.setData('text/plain', this.dataset.id); e.dataTransfer.effectAllowed = 'move'; };
+        el.ondragstart = function(e) { draggedId = this.dataset.id; const dragIds = selectedIds.has(parseInt(draggedId)) && selectedIds.size > 1 ? [...selectedIds] : [parseInt(draggedId)]; c.querySelectorAll('[draggable="true"]').forEach(card => { if (dragIds.includes(parseInt(card.dataset.id))) card.style.opacity = '0.5'; }); e.dataTransfer.setData('text/plain', this.dataset.id); e.dataTransfer.effectAllowed = 'move'; if (dragIds.length > 1) { const cv = document.createElement('canvas'); cv.width = 80; cv.height = 28; const x = cv.getContext('2d'); x.fillStyle = 'rgba(59,130,246,0.85)'; x.beginPath(); x.arc(14, 14, 12, 0, Math.PI*2); x.fill(); x.fillStyle = '#fff'; x.font = 'bold 13px sans-serif'; x.textAlign = 'center'; x.textBaseline = 'middle'; x.fillText(dragIds.length, 14, 14); x.fillStyle = '#fff'; x.font = '12px sans-serif'; x.textAlign = 'left'; x.fillText('selected', 30, 14); e.dataTransfer.setDragImage(cv, 6, 14); } };
         el.ondragend = function(e) { c.querySelectorAll('[draggable="true"]').forEach(card => card.style.opacity = '1'); draggedId = null; c.querySelectorAll('.drag-over').forEach(x => x.classList.remove('drag-over')); document.getElementById('trashBtn')?.classList.remove('drag-over'); };
         el.ondragover = function(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; if (this.dataset.id !== draggedId) this.classList.add('drag-over'); };
         el.ondragleave = function(e) { this.classList.remove('drag-over'); };