From 1ea13ff16b36e3a13273fa4121a20224a3ead9f1 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Fri, 20 Feb 2026 09:19:01 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9liorer=20la=20recherche=20de=20?=
 =?UTF-8?q?tags=20avec=20extraction=20via=20data-attributes,=20ajouter=20r?=
 =?UTF-8?q?accourci=20clavier=20T=20pour=20mode=20tags=20direct,=20styles?=
 =?UTF-8?q?=20th=C3=A8me=20clair=20pour=20tag=20cloud=20avec=20gradients?=
 =?UTF-8?q?=20bleus=20optimis=C3=A9s,=20et=20correction=20syntaxe=20Smarty?=
 =?UTF-8?q?=20tag.list.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/js/script.js     | 28 +++++++++++----
 shaarli-pro/page.header.html |  1 +
 shaarli-pro/tag.cloud.html   | 70 ++++++++++++++++++++++++++++++++++--
 shaarli-pro/tag.list.html    |  3 +-
 4 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/shaarli-pro/js/script.js b/shaarli-pro/js/script.js
index 81156e8..e6e6036 100644
--- a/shaarli-pro/js/script.js
+++ b/shaarli-pro/js/script.js
@@ -129,14 +129,23 @@ document.addEventListener('DOMContentLoaded', () => {
     function fetchTags() {
         if (cachedTags) return cachedTags;
         try {
-            const tagElements = document.querySelectorAll('.link-tag, .tag-link, [class*="tag"]');
             const tagsSet = new Set();
 
-            tagElements.forEach(el => {
-                const tagText = el.textContent.trim();
-                if (tagText && tagText.length > 0 && !tagText.includes('•')) {
-                    tagsSet.add(tagText);
-                }
+            const addTag = (value) => {
+                if (typeof value !== 'string') return;
+                const cleaned = value.trim();
+                if (!cleaned || cleaned.includes('•')) return;
+                tagsSet.add(cleaned);
+            };
+
+            // Prefer explicit tag data attributes to avoid polluted text values (e.g. remove buttons)
+            document.querySelectorAll('.link-tag[data-tag], .tag-item[data-tag], [data-tag-name]').forEach((el) => {
+                addTag(el.getAttribute('data-tag') || el.getAttribute('data-tag-name'));
+            });
+
+            // Fallback selectors with reliable text content
+            document.querySelectorAll('.link-tag-link, .tag-link, .cloud-tag').forEach((el) => {
+                addTag(el.textContent);
             });
 
             // Convert to array and sort alphabetically
@@ -428,6 +437,13 @@ document.addEventListener('DOMContentLoaded', () => {
             e.preventDefault();
             openSearch();
         }
+
+        // T to open search directly in tags mode (when not typing)
+        if (!isTyping && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key === 't' || e.key === 'T')) {
+            e.preventDefault();
+            openSearch();
+            setSearchMode('tags');
+        }
     });
 
     // ===== Filter Panel =====
diff --git a/shaarli-pro/page.header.html b/shaarli-pro/page.header.html
index c812c5f..6881c74 100644
--- a/shaarli-pro/page.header.html
+++ b/shaarli-pro/page.header.html
@@ -286,6 +286,7 @@ Bookmarklet detection logic
             </div>
             <div class="search-footer">
                 <span class="search-footer-hint">
+                    <kbd class="search-kbd">T</kbd> tags
                     <kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> to navigate
                     <kbd class="search-kbd">Enter</kbd> to select
                     <kbd class="search-kbd">ESC</kbd> to close
diff --git a/shaarli-pro/tag.cloud.html b/shaarli-pro/tag.cloud.html
index 051372c..d799f6e 100644
--- a/shaarli-pro/tag.cloud.html
+++ b/shaarli-pro/tag.cloud.html
@@ -273,9 +273,75 @@
                 box-shadow: 0 3px 10px rgba(99, 102, 241, 0.5);
             }
 
+            /* Light mode overrides */
+            [data-theme="light"] .page-tag-cloud .alphabet-filter {
+                background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
+                border-color: rgba(59, 130, 246, 0.22);
+                box-shadow:
+                    0 6px 18px rgba(15, 23, 42, 0.08),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.85);
+            }
+
+            [data-theme="light"] .page-tag-cloud .alpha-btn {
+                color: rgba(71, 85, 105, 0.9);
+            }
+
+            [data-theme="light"] .page-tag-cloud .alpha-btn:hover:not(.disabled) {
+                color: #1e293b;
+            }
+
+            [data-theme="light"] .page-tag-cloud .alpha-btn:hover:not(.disabled)::before {
+                background: rgba(59, 130, 246, 0.16);
+            }
+
+            [data-theme="light"] .page-tag-cloud .alpha-btn.active {
+                color: #ffffff;
+                text-shadow: none;
+            }
+
+            [data-theme="light"] .page-tag-cloud .alpha-btn.active::before {
+                background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+                box-shadow:
+                    0 3px 10px rgba(59, 130, 246, 0.35),
+                    0 0 14px rgba(99, 102, 241, 0.2);
+            }
+
+            [data-theme="light"] .page-tag-cloud .alpha-btn.disabled {
+                color: rgba(148, 163, 184, 0.75);
+            }
+
+            [data-theme="light"] .page-tag-cloud .cloud-tag {
+                color: #1e293b;
+                background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
+                border-color: rgba(99, 102, 241, 0.22);
+                box-shadow:
+                    0 2px 8px rgba(15, 23, 42, 0.1),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+            }
+
+            [data-theme="light"] .page-tag-cloud .cloud-tag:hover {
+                color: #0f172a;
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.16) 100%);
+                border-color: rgba(59, 130, 246, 0.42);
+                box-shadow:
+                    0 4px 12px rgba(59, 130, 246, 0.2),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.85);
+            }
+
+            [data-theme="light"] .page-tag-cloud .count-badge {
+                background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+                box-shadow: 0 2px 7px rgba(59, 130, 246, 0.35);
+            }
+
+            [data-theme="light"] .page-tag-cloud .cloud-tag[style*="font-size:4"],
+            [data-theme="light"] .page-tag-cloud .cloud-tag[style*="font-size:5"] {
+                background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, #eef3ff 100%);
+                border-color: rgba(59, 130, 246, 0.26);
+            }
+
             /* Size variations for visual hierarchy - keeping font-size from template */
-            .cloud-tag[style*="font-size:1"] {
-                padding: 0.4em 0.8em;
+            .cloud-tag[style*="font-size:2"] {
+                font-weight: 550;
             }
 
             .cloud-tag[style*="font-size:2"],
diff --git a/shaarli-pro/tag.list.html b/shaarli-pro/tag.list.html
index a9c2b00..9c6a593 100644
--- a/shaarli-pro/tag.list.html
+++ b/shaarli-pro/tag.list.html
@@ -162,11 +162,11 @@
         <input type="hidden" name="taglist" id="tagListData" value="">
         {/if}
 
-        {literal}
         <script>
             (function () {
                 var filterInput = document.getElementById('tagFilterInput');
                 var clearBtn = document.getElementById('tagFilterClear');
+
                 var tagListContainer = document.getElementById('tagListContainer');
                 var noTagsMessage = document.getElementById('noTagsMessage');
                 var visibleTagCount = document.getElementById('visibleTagCount');
@@ -230,7 +230,6 @@
                 });
             })();
         </script>
-        {/literal}
 
         {include="page.footer"}
     </body>