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

shaarli-pro/css/style.css

@@ -3256,3 +3256,113 @@ select:focus {
 .paging.single-page .paging-stats {
     margin: 0;
 }
+
+/* ===== Fullscreen Description Modal ===== */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    z-index: 1050;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.modal-overlay.show {
+    display: flex;
+    opacity: 1;
+}
+
+.modal-content {
+    background: var(--bg-card);
+    width: 100%;
+    max-width: 900px;
+    max-height: 90vh;
+    border-radius: 1rem;
+    box-shadow: var(--shadow-xl);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+    border: 1px solid var(--border);
+}
+
+.modal-overlay.show .modal-content {
+    transform: translateY(0);
+}
+
+.modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--bg-body);
+    border: 1px solid var(--border);
+    color: var(--text-main);
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: var(--danger);
+    color: white;
+    border-color: var(--danger);
+    transform: rotate(90deg);
+}
+
+.modal-body {
+    padding: 3rem 2rem 2rem;
+    overflow-y: auto;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: var(--text-main);
+}
+
+.modal-body h1, .modal-body h2, .modal-body h3, 
+.modal-body h4, .modal-body h5, .modal-body h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    color: var(--text-main);
+}
+
+.modal-body p {
+    margin-bottom: 1.5em;
+}
+
+.modal-body img {
+    max-width: 100%;
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+}
+
+.modal-body pre, .modal-body code {
+    background: var(--bg-body);
+    font-family: monospace;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.3rem;
+}
+
+.modal-body pre {
+    padding: 1rem;
+    overflow-x: auto;
+}
+
+/* Button style adjustment if needed */
+.view-desc-btn {
+    cursor: pointer;
+}

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>');
+                }
+            }
+        }
+    });
 });

shaarli-pro/linklist.html

@@ -10,16 +10,19 @@
 {loop="$plugin_start_zone"}
 {$value}
 {/loop}
+<!-- {* ----- barre outils ----- *} -->
 <div class="content-toolbar">
 <div class="toolbar-left">{include="linklist.paging"}</div>
 <div class="toolbar-right">
 <div class="view-toggle">
-<button class="view-toggle-btn active" id="view-grid-btn" title="Grid View"><i class="mdi mdi-view-grid"></i></button>
+<button class="view-toggle-btn active" id="view-grid-btn" title="Grid"><i class="mdi mdi-view-grid"></i></button>
-<button class="view-toggle-btn" id="view-list-btn" title="List View"><i class="mdi mdi-view-list"></i></button>
+<button class="view-toggle-btn" id="view-list-btn" title="List"><i class="mdi mdi-view-list"></i></button>
-<button class="view-toggle-btn" id="view-compact-btn" title="Compact View"><i class="mdi mdi-view-headline"></i></button>
+<button class="view-toggle-btn" id="view-compact-btn" title="Compact"><i class="mdi mdi-view-headline"></i></button>
 </div>
 </div>
 </div>
+
+<!-- {* ----- résultats de recherche par tags ----- *} -->
 {if="!empty($search_tags)"}
 <div class="search-results-header">
 <span class="search-count">{$result_count} results tagged</span>
@@ -29,6 +32,8 @@
 {/loop}
 </div>
 {/if}
+
+<!-- {* ----- aucun lien ----- *} -->
 {if="count($links)==0"}
 <div class="empty-state">
 <div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
@@ -36,12 +41,14 @@
 <p class="empty-state-text">{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>{else}Start adding bookmarks to see them here.{/if}</p>
 </div>
 {else}
+<!-- {* ----- au moins un lien ----- *} -->
 <div class="links-list view-grid" id="links-list">
 {loop="$links"}
 <div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
 {if="$is_logged_in"}<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>{/if}
-{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%; height:100%; object-fit:cover;"></div>{/if}
+{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;"></div>{/if}
 <div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
+
 {if="$is_logged_in"}
 <div class="link-hover-actions">
 <a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
@@ -49,24 +56,32 @@
 <a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
 </div>
 {/if}
+
 <div class="link-content">
 <div class="link-header">
-<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}</a>
+<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>
+{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}
+</a>
 <span class="link-url">{$value.url}</span>
 <div class="link-meta">
 <span class="link-date">{function="strftime('%c', $value.timestamp)"}</span>
 <a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
 </div>
 </div>
+
 {if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
 <div class="link-footer">
-<div class="link-tag-list">{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}</div>
+<div class="link-tag-list">
+{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
+</div>
 <div class="link-actions">
 {if="$is_logged_in"}
 <a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
 <a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
 <a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
 {/if}
+<!-- bouton plein écran (dans les 3 vues) -->
+<a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
 <a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
 </div>
 </div>
@@ -76,10 +91,23 @@
 </div>
 {include="linklist.paging"}
 {/if} 
+
+{* ferme le ELSE du “count($links)==0” *}
+
 {loop="$plugin_end_zone"}
 {$value}
 {/loop}
+</div> {* ferme #linklist *}
+
+<!-- {* ----- modale unique ----- *} -->
+<div id="desc-modal" class="modal-overlay">
+<div class="modal-content">
+<button class="modal-close" id="desc-modal-close">&times;</button>
+<div class="modal-body" id="desc-modal-body"></div>
 </div>
+</div>
+
 {include="page.footer"}
 </body>
+
 </html>

shaarli-pro/linklist_noError.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
+<head>
+{$pageName="linklist"}
+{include="includes"}
+</head>
+<body>
+{include="page.header"}
+<div id="linklist">
+{loop="$plugin_start_zone"}
+{$value}
+{/loop}
+<div class="content-toolbar">
+<div class="toolbar-left">{include="linklist.paging"}</div>
+<div class="toolbar-right">
+<div class="view-toggle">
+<button class="view-toggle-btn active" id="view-grid-btn" title="Grid View"><i class="mdi mdi-view-grid"></i></button>
+<button class="view-toggle-btn" id="view-list-btn" title="List View"><i class="mdi mdi-view-list"></i></button>
+<button class="view-toggle-btn" id="view-compact-btn" title="Compact View"><i class="mdi mdi-view-headline"></i></button>
+</div>
+</div>
+</div>
+{if="!empty($search_tags)"}
+<div class="search-results-header">
+<span class="search-count">{$result_count} results tagged</span>
+{$exploded_tags=tags_str2array($search_tags, $tags_separator)}
+{loop="$exploded_tags"}
+<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="urlencode($value)"}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a></span>
+{/loop}
+</div>
+{/if}
+{if="count($links)==0"}
+<div class="empty-state">
+<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
+<h2 class="empty-state-title">No bookmarks found</h2>
+<p class="empty-state-text">{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>{else}Start adding bookmarks to see them here.{/if}</p>
+</div>
+{else}
+<div class="links-list view-grid" id="links-list">
+{loop="$links"}
+<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
+{if="$is_logged_in"}<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>{/if}
+{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%; height:100%; object-fit:cover;"></div>{/if}
+<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
+{if="$is_logged_in"}
+<div class="link-hover-actions">
+<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
+<a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
+<a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
+</div>
+{/if}
+<div class="link-content">
+<div class="link-header">
+<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}</a>
+<span class="link-url">{$value.url}</span>
+<div class="link-meta">
+<span class="link-date">{function="strftime('%c', $value.timestamp)"}</span>
+<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
+</div>
+</div>
+{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
+<div class="link-footer">
+<div class="link-tag-list">{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}</div>
+<div class="link-actions">
+{if="$is_logged_in"}
+<a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
+<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
+<a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
+{/if}
+<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
+</div>
+</div>
+</div>
+</div>
+{/loop}
+</div>
+{include="linklist.paging"}
+{/if}
+{loop="$plugin_end_zone"}
+{$value}
+{/loop}
+</div>
+{include="page.footer"}
+</body>
+</html>

shaarli-pro/linklist_withError.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
+
+    <head>
+        {$pageName='linklist'}
+        {include="includes"}
+    </head>
+
+    <body>
+        {include="page.header"}
+
+        <div id="linklist">
+            {* ----- barre outils ----- *}
+            <div class="content-toolbar">
+                <div class="toolbar-left">{include="linklist.paging"}</div>
+                <div class="toolbar-right">
+                    <div class="view-toggle">
+                        <button class="view-toggle-btn active" id="view-grid-btn" title="Grid"><i class="mdi mdi-view-grid"></i></button>
+                        <button class="view-toggle-btn" id="view-list-btn" title="List"><i class="mdi mdi-view-list"></i></button>
+                        <button class="view-toggle-btn" id="view-compact-btn" title="Compact"><i class="mdi mdi-view-headline"></i></button>
+                    </div>
+                </div>
+            </div>
+
+            {* ----- résultats de recherche par tags ----- *}
+            {if="!empty($search_tags)"}
+            <div class="search-results-header">
+                <span class="search-count">{$result_count} results tagged</span>
+                {$exploded_tags=tags_str2array($search_tags,$tags_separator)}
+                {loop="$exploded_tags"}
+                <span class="search-tag-chip">{$value}
+                    <a href="{$base_path}/remove-tag/{function=" urlencode($value")}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a>
+                </span>
+                {/loop}
+            </div>
+            {/if}
+
+            {* ----- aucun lien ----- *}
+            {if="count($links)==0"}
+            <div class="empty-state">
+                <div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
+                <h2 class="empty-state-title">No bookmarks found</h2>
+                <p class="empty-state-text">
+                    {if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>
+                    {else}Start adding bookmarks to see them here.{/if}
+                </p>
+            </div>
+            {* ----- au moins un lien ----- *}
+            {else}
+            <div class="links-list view-grid" id="links-list">
+                {loop="$links"}
+                <div id="{$value.id}" class="link-outer{if=" isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class" } {$value.class}{/if}{if="$value.private" } private{else} public{/if}" data-id="{$value.id}">
+                    {if="$is_logged_in"}<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>{/if}
+                    {if="$value.thumbnail!==false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;"></div>{/if}
+                    <div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
+
+                    {if="$is_logged_in"}
+                    <div class="link-hover-actions">
+                        <a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
+                        <a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
+                        <a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
+                    </div>
+                    {/if}
+
+                    <div class="link-content">
+                        <div class="link-header">
+                            <a href="{$value.real_url}" class="link-title" {if="strpos($value.url,$value.shorturl)!==false" } title="Note" {/if}>
+                                {if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}
+                            </a>
+                            <span class="link-url">{$value.url}</span>
+                            <div class="link-meta">
+                                <span class="link-date">{function="strftime('%c',$value.timestamp)"}</span>
+                                <a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
+                            </div>
+                        </div>
+                        {if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
+                        <div class="link-footer">
+                            <div class="link-tag-list">
+                                {loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
+                            </div>
+                            <div class="link-actions">
+                                {if="$is_logged_in"}
+                                <a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
+                                <a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
+                                <a href="{$base_path}/admin/shaare/delete?id={$value.id}&amp;token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
+                                {/if}
+                                <!-- bouton plein écran (dans les 3 vues) -->
+                                <a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
+                                <a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {/loop}
+            </div>
+            {include="linklist.paging"}
+            {/if} {* ferme le ELSE du “count($links)==0” *}
+
+            {loop="$plugin_end_zone"}{$value}{/loop}
+        </div> {* ferme #linklist *}
+
+        {* ----- modale unique ----- *}
+        <div id="desc-modal" class="modal-overlay">
+            <div class="modal-content">
+                <button class="modal-close" id="desc-modal-close">&times;</button>
+                <div class="modal-body" id="desc-modal-body"></div>
+            </div>
+        </div>
+
+        {include="page.footer"}
+    </body>
+
+    </html>