feat: ajouter styles icon-btn/note-pin-corner/note-hover-actions/note-input-expanded-actions avec tokens sémantiques (--special-view-strong/muted/divider/panel-bg/panel-alt), implémenter pin corner absolu top-right avec opacity 0→1 hover/active + color primary active, barre actions hover bottom avec boutons 30px transparent→12% mix hover, refactoring toolbar expanded avec border-top divider + background 88% panel-bg mix, styler todo-draft-add-btn full-width avec gap 8px icon/text, override

shaarli-pro/css/custom_views.css

@@ -869,3 +869,252 @@ body.view-notes .notes-masonry:empty::after {
     color: var(--special-view-muted);
     font-size: 0.95rem;
 }
+
+/* =========================================================
+   Icon buttons — base (view-switch + card action btns)
+   ========================================================= */
+.icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--special-view-strong);
+    cursor: pointer;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 1;
+    text-decoration: none;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+
+.notes-tools {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* =========================================================
+   Note card — pin corner
+   ========================================================= */
+.note-pin-corner {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--special-view-muted);
+    opacity: 0;
+    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+    text-decoration: none;
+    font-size: 1rem;
+}
+
+.note-card:hover .note-pin-corner,
+.note-pin-corner.active {
+    opacity: 1;
+}
+
+.note-pin-corner:hover {
+    background: color-mix(in srgb, var(--text-main) 12%, transparent);
+    color: var(--special-view-strong);
+}
+
+.note-pin-corner.active {
+    color: var(--primary);
+}
+
+/* =========================================================
+   Note card — tags row
+   ========================================================= */
+.note-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 4px 0 6px;
+}
+
+/* =========================================================
+   Note card — hover actions bar (bottom strip)
+   ========================================================= */
+.note-hover-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 8px 6px;
+    border-top: 1px solid var(--special-view-divider);
+    margin-top: 8px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.note-card:hover .note-hover-actions {
+    opacity: 1;
+}
+
+.note-hover-actions button,
+.note-hover-actions > a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    font-size: 0.95rem;
+    text-decoration: none;
+    line-height: 1;
+    transition: background 0.15s ease;
+}
+
+.note-hover-actions button:hover,
+.note-hover-actions > a:hover {
+    background: color-mix(in srgb, var(--text-main) 12%, transparent);
+}
+
+.note-hover-actions .spacer {
+    flex: 1;
+}
+
+/* =========================================================
+   Collapsed input bar — layout fixes
+   ========================================================= */
+.note-input-placeholder {
+    flex: 1;
+    font-weight: 500;
+    font-size: 1rem;
+    color: var(--special-view-muted);
+}
+
+/* Override toolbar styling that bleeds into the collapsed bar's action zone */
+.note-input-collapsed .note-input-actions {
+    padding: 0;
+    border-top: none;
+    background: transparent;
+    flex-shrink: 0;
+}
+
+/* =========================================================
+   Expanded draft editor — layout & component styles
+   ========================================================= */
+.note-input-expanded,
+.todo-draft-expanded {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.todo-draft-list {
+    padding: 4px 0;
+    max-height: 220px;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.note-input-expanded-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 10px;
+    border-top: 1px solid var(--special-view-divider);
+    background: color-mix(in srgb, var(--special-view-panel-bg) 88%, var(--bg-body));
+    flex-shrink: 0;
+}
+
+.note-input-actions-left {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* "+ Élément de liste" add-item button */
+.todo-draft-add-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: var(--special-view-muted);
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-family: inherit;
+    padding: 8px 14px;
+    text-align: left;
+    width: 100%;
+    flex-shrink: 0;
+    transition: color 0.15s ease;
+}
+
+.todo-draft-add-btn:hover {
+    color: var(--special-view-strong);
+}
+
+.todo-draft-add-btn i {
+    font-size: 18px;
+}
+
+/* "Fermer" close button — pill style, override the transparent-btn rule */
+.note-input-close-btn {
+    display: inline-flex !important;
+    align-items: center !important;
+    background: var(--special-view-panel-alt) !important;
+    color: var(--special-view-strong) !important;
+    border: 1px solid var(--special-view-border) !important;
+    border-radius: 8px !important;
+    padding: 6px 16px !important;
+    font-size: 0.9rem !important;
+    font-family: inherit;
+    cursor: pointer;
+    flex-shrink: 0;
+    width: auto !important;
+    height: auto !important;
+    transition: background 0.15s ease;
+}
+
+.note-input-close-btn:hover {
+    background: var(--tile-bg-hover, var(--bg-card-hover)) !important;
+}
+
+/* Palette button inside editor toolbar */
+.note-input-palette-btn,
+.note-input-format-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--special-view-strong);
+    border-radius: 8px;
+    cursor: pointer;
+    padding: 0;
+    font-size: 1.1rem;
+    transition: background 0.15s ease;
+}
+
+.note-input-palette-btn:hover,
+.note-input-format-btn:hover {
+    background: color-mix(in srgb, var(--text-main) 10%, transparent);
+}
+
+/* Draft title input — bolder heading style */
+.note-input-container .todo-draft-title,
+.note-input-container .note-input-title {
+    font-weight: 600;
+    font-size: 1.05rem;
+    padding: 12px 14px 4px;
+}

shaarli-pro/js/custom_views.js

@@ -2112,7 +2112,7 @@ function initTodoView(linkList, container) {
       inputContainer.classList.add("is-editing", "todo-draft-mode");
       inputContainer.innerHTML = `
         <div class="note-input-expanded todo-draft-expanded">
-          <input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" />
+          <input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" autocomplete="off" />
           <div class="todo-draft-list" role="list"></div>
           <button type="button" class="todo-draft-add-btn"><i class="mdi mdi-plus"></i> Élément de liste</button>
           <div class="note-input-expanded-actions">
@@ -2427,7 +2427,7 @@ function initTodoView(linkList, container) {
     if (deleteUrl && deleteUrl !== "#") {
       deleteEntitySilently(deleteUrl)
         .then(() => {
-          window.location.href = "/?searchtags=shaarli-todo";
+          window.location.href = "/?searchtags=todo";
         })
         .catch((err) => {
           console.error("Delete failed:", err);
@@ -2939,7 +2939,7 @@ function renderTodos(container, todos, viewMode) {
       if (!confirm("Supprimer cette tâche ?")) return;
       deleteEntitySilently(todo.deleteUrl)
         .then(() => {
-          window.location.href = "/?searchtags=shaarli-todo";
+          window.location.href = "/?searchtags=todo";
         })
         .catch((err) => {
           console.error("Delete failed:", err);
@@ -3457,7 +3457,7 @@ function initNoteView(linkList, container) {
         inputContainer.classList.add("is-editing", "todo-draft-mode");
         inputContainer.innerHTML = `
           <div class="note-input-expanded todo-draft-expanded">
-            <input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" />
+            <input type="text" class="note-input-title todo-draft-title" placeholder="Titre de la liste" autocomplete="off" />
             <div class="todo-draft-list" role="list"></div>
             <button type="button" class="todo-draft-add-btn"><i class="mdi mdi-plus"></i> Élément de liste</button>
             <div class="note-input-expanded-actions">