feat: implémenter système Todo interactif complet avec checklist drag-and-drop, preview items dans cards (max 5 items + compteur), modal dédiée avec gestion checkbox/ajout/suppression/réorganisation items, styles todo-card avec support backgrounds et font-color auto, synchronisation bidirectionnelle card↔modal, extraction/sauvegarde checklist via data-attributes et champs cachés formulaire, intégration palette couleurs/backgrounds, suppression vue wrapper au profit layout notes unifié, et

shaarli-pro/css/custom_views.css

@@ -13,14 +13,18 @@
 
 /* --- TODO VIEW --- */
 body.view-todo .content-container {
-    max-width: 100%;
+    padding: 2rem;
-    padding: 0;
+    background-color: var(--bg-body);
-    margin: 0;
+    min-height: 100vh;
+}
+
+[data-theme="dark"] body.view-todo .content-container {
+    background-color: var(--bg-body);
 }
 
 body.view-todo #linklist {
-    display: none;
+    display: block;
-    /* Hide default list when wrapper is active */
+    /* Show default list when wrapper is not active */
 }
 
 /* Sidebar */
@@ -636,6 +640,8 @@ body.view-notes .content-container {
             display: flex;
             flex-direction: column;
             gap: 8px;
+            position: relative;
+            z-index: 2;
         }
 
         /* Title */
@@ -1487,6 +1493,13 @@ body.view-notes .content-container {
     background-position: center bottom;
 }
 
+.note-card.todo-card.note-has-bg[data-font-color="auto"] {
+    --note-card-fg: rgba(255, 255, 255, 0.92);
+    color: var(--note-card-fg);
+    background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), var(--note-bg-image);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
+}
+
 .note-card .note-title,
 .note-card .note-body,
 .note-card .note-tag,
@@ -2180,3 +2193,225 @@ body.view-archive .content-container {
     top: auto;
     transform: none;
 }
+
+body.view-todo .note-card.todo-card .note-body {
+    padding-top: 0.25rem;
+}
+
+body.view-todo .note-card.todo-card .todo-checklist-preview-wrap {
+    display: block;
+    -webkit-line-clamp: initial;
+    line-clamp: initial;
+    -webkit-box-orient: initial;
+    overflow: visible;
+    max-height: none;
+}
+
+.todo-checklist-preview {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.todo-checklist-preview-item {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.95rem;
+    line-height: 1.35;
+}
+
+.todo-checklist-preview-box {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 2px solid currentColor;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    opacity: 0.7;
+}
+
+.todo-checklist-preview-box i {
+    font-size: 14px;
+    opacity: 0;
+}
+
+.todo-checklist-preview-item.is-checked {
+    opacity: 0.7;
+}
+
+.todo-checklist-preview-item.is-checked .todo-checklist-preview-box i {
+    opacity: 1;
+}
+
+.todo-checklist-preview-item.is-checked .todo-checklist-preview-text {
+    text-decoration: line-through;
+}
+
+.todo-checklist-preview-more {
+    opacity: 0.7;
+}
+
+.todo-modal .note-modal-content {
+    padding-top: 6px;
+}
+
+.todo-checklist {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-bottom: 6px;
+}
+
+.todo-checklist-row {
+    display: grid;
+    grid-template-columns: 26px 26px minmax(0, 1fr) 34px;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 2px;
+    border-radius: 8px;
+}
+
+.todo-checklist-row.is-checked {
+    opacity: 0.75;
+}
+
+.todo-checklist-row.is-dragging {
+    opacity: 0.6;
+}
+
+.todo-drag-handle {
+    width: 26px;
+    height: 26px;
+    border: none;
+    background: none;
+    color: inherit;
+    opacity: 0.7;
+    cursor: grab;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.todo-drag-handle:active {
+    cursor: grabbing;
+}
+
+.todo-drag-handle i {
+    font-size: 18px;
+}
+
+.todo-checklist-box {
+    width: 26px;
+    height: 26px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.todo-checklist-box input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.todo-checklist-box-ui {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    border: 2px solid currentColor;
+    display: inline-block;
+    opacity: 0.75;
+}
+
+.todo-item-checkbox:checked + .todo-checklist-box-ui {
+    background: currentColor;
+    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22);
+}
+
+[data-theme="dark"] .todo-item-checkbox:checked + .todo-checklist-box-ui {
+    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35);
+}
+
+.todo-item-text {
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1.4;
+    padding: 6px 6px;
+    border-radius: 6px;
+    outline: none;
+    min-width: 0;
+}
+
+.todo-checklist-row.is-checked .todo-item-text {
+    text-decoration: line-through;
+}
+
+.todo-item-text:focus {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="dark"] .todo-item-text:focus {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.todo-item-delete {
+    width: 34px;
+    height: 34px;
+    border: none;
+    background: none;
+    color: inherit;
+    opacity: 0.7;
+    cursor: pointer;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.todo-item-delete:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="dark"] .todo-item-delete:hover {
+    background: rgba(255, 255, 255, 0.12);
+}
+
+.todo-item-delete i {
+    font-size: 20px;
+}
+
+.todo-add-item-btn {
+    border: none;
+    background: none;
+    color: inherit;
+    opacity: 0.8;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 0;
+    font-size: 1rem;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.todo-add-item-btn i {
+    font-size: 18px;
+}
+
+.todo-add-item-btn:hover {
+    opacity: 1;
+}