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

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" 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>
+<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>
@@ -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>
@@ -75,11 +90,24 @@
 {/loop}
 </div>
 {include="linklist.paging"}
-{/if}
+{/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>
+
+</html>