feat: add fullscreen description modal with overlay, animations, and keyboard navigation support.

shaarli-pro/js/script.js

@@ -951,4 +951,57 @@ document.addEventListener('DOMContentLoaded', () => {
             updateThumbnail(thumbnailsIdList[0]);
         }
     }
+    // ===== Fullscreen Description Modal =====
+    const descModal = document.getElementById('desc-modal');
+    const descModalBody = document.getElementById('desc-modal-body');
+    const descModalClose = document.getElementById('desc-modal-close');
+
+    function openDescModal(content) {
+        if (descModal && descModalBody) {
+            descModalBody.innerHTML = content;
+            descModal.classList.add('show');
+            document.body.style.overflow = 'hidden'; // Prevent background scrolling
+        }
+    }
+
+    function closeDescModal() {
+        if (descModal) {
+            descModal.classList.remove('show');
+            document.body.style.overflow = '';
+        }
+    }
+
+    descModalClose?.addEventListener('click', closeDescModal);
+    descModal?.addEventListener('click', (e) => {
+        if (e.target === descModal) {
+            closeDescModal();
+        }
+    });
+
+    // Press ESC to close description modal
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && descModal?.classList.contains('show')) {
+            closeDescModal();
+        }
+    });
+
+    // Delegate click event for dynamic buttons
+    document.addEventListener('click', (e) => {
+        const btn = e.target.closest('.view-desc-btn');
+        if (btn) {
+            e.preventDefault();
+            const id = btn.dataset.id;
+
+            const card = document.getElementById(id);
+            if (card) {
+                // Try to find description element (even if hidden in compact view)
+                const descEl = card.querySelector('.link-description');
+                if (descEl) {
+                    openDescModal(descEl.innerHTML);
+                } else {
+                    openDescModal('<p class="text-muted">No description available.</p>');
+                }
+            }
+        }
+    });
 });