feat: implémenter vue compacte tableau avec grille multi-colonnes (titre/tags/meta/actions), en-têtes de sections pinned/normal avec badges visuels, mode responsive single-column mobile, masquage sélectif thumbnail/description/permalink, actions hover avec opacity, checkbox/badge repositionnés, calendrier daily en modal fixe plein écran, amélioration indentation CSS page-edit, et ajout styles key-value-data/bookmarklet-actions/third-party-links avec support complet thème clair/sombre

shaarli-pro/js/custom_views.js

@@ -11,6 +11,10 @@ document.addEventListener("DOMContentLoaded", function () {
       initBookmarkPaletteButtons();
     }
 
+  if (typeof organizePinnedBookmarks === "function") {
+    window.requestAnimationFrame(organizePinnedBookmarks);
+  }
+
     // Always init Pinned Items logic (sorting and listeners)
     // This function is defined at the end of the file
     if (typeof initPinnedItems === "function") {
@@ -265,7 +269,7 @@ function initTagDisplayAndRemoval() {
       return;
     }
     if (isTechnicalTag(tag)) {
-      el.remove();
+      el.classList.add("is-tech-tag");
     }
   });
 
@@ -385,6 +389,79 @@ if (typeof console !== "undefined" && console && typeof console.info === "functi
   console.info("[custom_views] loaded", window.__shaarliCustomViewsVersion);
 }
 
+function organizePinnedBookmarks() {
+  const linksList = document.getElementById("links-list");
+  if (!linksList) return;
+
+  const pinnedHead = linksList.querySelector(".pinned-section-head");
+  const normalHead = linksList.querySelector(".normal-section-head");
+  const compactHead = linksList.querySelector(".compact-table-head");
+  if (!pinnedHead || !normalHead || !compactHead) return;
+
+  const allBookmarks = Array.from(linksList.getElementsByClassName("link-outer"));
+  if (!allBookmarks.length) return;
+
+  const isPinnedBookmark = (bookmark) => {
+    if (bookmark.classList.contains("is-sticky") || bookmark.classList.contains("is-pinned-tag")) {
+      return true;
+    }
+
+    const tags = bookmark.querySelectorAll(".link-tag-list a, .link-tag-list .link-tag-link, .note-tag");
+    for (const tag of tags) {
+      const value = (tag.textContent || "").trim().toLowerCase();
+      if (value === "shaarli-pin") {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const pinnedBookmarks = allBookmarks.filter((bookmark) => isPinnedBookmark(bookmark));
+  const normalBookmarks = allBookmarks.filter((bookmark) => !isPinnedBookmark(bookmark));
+
+  linksList.classList.toggle("has-pinned", pinnedBookmarks.length > 0);
+  linksList.classList.toggle("has-normal", normalBookmarks.length > 0);
+
+  const fragment = document.createDocumentFragment();
+
+  fragment.appendChild(pinnedHead);
+  pinnedBookmarks.forEach((bookmark) => fragment.appendChild(bookmark));
+
+  fragment.appendChild(normalHead);
+  fragment.appendChild(compactHead);
+  normalBookmarks.forEach((bookmark) => fragment.appendChild(bookmark));
+
+  linksList.replaceChildren(fragment);
+}
+
+function initPinnedBookmarksSeparation() {
+  const linksList = document.getElementById("links-list");
+  if (!linksList) return;
+
+  organizePinnedBookmarks();
+
+  const viewButtons = ["view-grid-btn", "view-list-btn", "view-compact-btn"];
+  viewButtons.forEach((id) => {
+    const button = document.getElementById(id);
+    if (!button) return;
+    button.addEventListener("click", () => {
+      window.requestAnimationFrame(organizePinnedBookmarks);
+    });
+  });
+
+  linksList.addEventListener("click", (event) => {
+    const pinLink = event.target.closest('a[href*="/pin?token="]');
+    if (!pinLink) return;
+
+    window.setTimeout(() => {
+      window.location.reload();
+    }, 500);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", initPinnedBookmarksSeparation);
+
 const NOTE_BACKGROUND_MANIFEST_INLINE = [
   { key: "cafe", label: "Café", files: { light: "bg-light-cafe.jpg", dark: "bg-dark-cafe.jpg" } },
   { key: "codes", label: "Codes", files: { light: "bg-light-codes.jpg", dark: "bg-dark-codes.jpg" } },
@@ -2660,6 +2737,10 @@ function initPinnedItems() {
     }
   }
 
+  if (typeof organizePinnedBookmarks === "function") {
+    window.requestAnimationFrame(organizePinnedBookmarks);
+  }
+
   // 4. Click Listener for all Pin Buttons (Event Delegation)
   // Avoid adding multiple listeners if init called multiple times?
   // We'll rely on one global listener on document, but here we add it inside this function which is called once on load.
@@ -2717,6 +2798,8 @@ function togglePinTag(id, editUrl, btn) {
   // Update Title Icon (The one "devant le titre")
   const card = btn.closest(".link-outer, .note-card");
   if (card) {
+    card.classList.toggle("is-pinned-tag", isPinning);
+
     // Update Title Icon
     const titleArea = card.querySelector(".link-title, .note-title");
     if (titleArea) {
@@ -2847,7 +2930,12 @@ function togglePinTag(id, editUrl, btn) {
       });
     })
     .then((res) => {
-      if (res.ok) console.log("Pin toggled successfully");
+      if (res.ok) {
+        console.log("Pin toggled successfully");
+        if (typeof organizePinnedBookmarks === "function") {
+          window.requestAnimationFrame(organizePinnedBookmarks);
+        }
+      }
     })
     .catch((err) => console.error(err));
 }