feat: ajouter boutons de suppression de tags interactifs avec pills redesignés (border-radius 999px), système de filtrage des tags techniques (note, shaarli-pin, note-color-, notefilter-, notebg-), fonction removeTagFromEntity pour suppression via API, synchronisation bidirectionnelle entre cartes et modale, et amélioration du style avec flexbox, gaps optimisés, et support complet thème clair/sombre

shaarli-pro/css/custom_views.css

@@ -457,29 +457,53 @@ body.view-notes .content-container {
 }
 
 .note-modal-tags .note-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     background: rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(0, 0, 0, 0.14);
     color: inherit;
     border-radius: 999px;
-    padding: 4px 10px;
+    padding: 4px 8px;
     font-size: 0.72rem;
     letter-spacing: 0.02em;
 }
 
-[data-theme="dark"] .note-modal-tags .note-tag {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.22);
+.note-modal-tags .note-tag-text {
+    line-height: 1.2;
+}
+
+.note-modal-tags .note-tag-remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: none;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.12);
+    color: currentColor;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    font-size: 14px;
+    opacity: 0.9;
+}
+
+[data-theme="dark"] .note-modal-tags .note-tag-remove-btn {
+    background: rgba(255, 255, 255, 0.18);
 }
 
 .note-modal-actions {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 10px;
+    gap: 6px;
     padding: 8px 12px;
     border-top: 1px solid rgba(0, 0, 0, 0.12);
     background: rgba(0, 0, 0, 0.03);
     flex-shrink: 0;
+    flex-wrap: wrap;
 }
 
 [data-theme="dark"] .note-modal-actions {
@@ -574,17 +598,13 @@ body.view-notes .content-container {
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     margin-bottom: 16px;
-    /* spacing for masonry */
     break-inside: avoid;
-    /* Prevent split */
     position: relative;
     transition: box-shadow 0.2s, transform 0.2s, background-color 0.2s;
     overflow: visible;
-    /* allow palette popup to escape card bounds */
     color: var(--note-card-fg, #202124);
 }
 
-/* Dark Mode Card */
 [data-theme="dark"] .note-card {
     background-color: #202124;
     border: 1px solid #5f6368;
@@ -597,10 +617,14 @@ body.view-notes .content-container {
 
 [data-theme="dark"] .note-card:hover {
     background-color: #202124;
-    /* Keep lightens on hover? usually same but controls appear */
 }
 
 /* Cover Image */
+.note-cover {
+    overflow: hidden;
+    border-radius: 8px 8px 0 0;
+}
+
 .note-cover img {
     width: 100%;
     height: auto;
@@ -608,11 +632,6 @@ body.view-notes .content-container {
     object-fit: cover;
 }
 
-.note-cover {
-    overflow: hidden;
-    border-radius: 8px 8px 0 0;
-}
-
 /* Inner Content */
 .note-inner {
     padding: 12px 16px;
@@ -640,14 +659,12 @@ body.view-notes .content-container {
     line-height: 1.25rem;
     color: var(--text-color, #202124);
     word-wrap: break-word;
-    /* Limit to ~12 lines */
     display: -webkit-box;
     -webkit-line-clamp: 12;
     line-clamp: 12;
     -webkit-box-orient: vertical;
     overflow: hidden;
     max-height: 300px;
-    /* Fallback */
 }
 
 [data-theme="dark"] .note-body {
@@ -663,9 +680,12 @@ body.view-notes .content-container {
 }
 
 .note-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     background: rgba(0, 0, 0, 0.06);
-    padding: 2px 6px;
-    border-radius: 4px;
+    padding: 2px 8px;
+    border-radius: 999px;
     font-size: 0.7rem;
     color: var(--text-light);
 }
@@ -675,6 +695,31 @@ body.view-notes .content-container {
     color: #9aa0a6;
 }
 
+.note-tag-text {
+    line-height: 1.2;
+}
+
+.note-tag-remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: none;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.12);
+    color: currentColor;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    font-size: 14px;
+    opacity: 0.9;
+}
+
+[data-theme="dark"] .note-tag-remove-btn {
+    background: rgba(255, 255, 255, 0.18);
+}
+
 /* Hover Actions */
 .note-hover-actions {
     display: flex;