feat: implémenter système Read It Later natif basé sur tags avec bouton toggle interactif, badge visuel rouge "Read Later", synchronisation bidirectionnelle des tags (readitlater/readlater/toread), intégration dans sidebar et header de navigation, mise à jour automatique des pills de tags, et support complet thème clair/sombre avec états hover et loading

This commit is contained in:
2026-02-18 16:41:49 -05:00
parent 6b1f4b3e28
commit ab097cd1fe
5 changed files with 268 additions and 26 deletions
+59
View File
@@ -1233,6 +1233,35 @@ input:checked+.theme-slider:before {
text-decoration: none;
}
.link-actions .readitlater-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
}
.link-actions .readitlater-toggle-btn i {
font-size: 1.15rem;
color: inherit;
}
.link-actions .readitlater-toggle-btn.active {
color: #dc2626;
background: rgba(220, 38, 38, 0.08);
}
.link-actions .readitlater-toggle-btn.is-loading {
opacity: 0.7;
pointer-events: none;
}
.link-hover-btn:hover {
background: var(--primary);
border-color: var(--primary);
@@ -1289,6 +1318,31 @@ input:checked+.theme-slider:before {
transition: all 0.2s ease;
}
.link-readlater-badge {
position: absolute;
top: 0.75rem;
right: 3.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 0.6rem;
border-radius: 0.5rem;
background: rgba(239, 68, 68, 0.92);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
z-index: 10;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .link-readlater-badge {
background: rgba(248, 113, 113, 0.9);
color: #1b0b0b;
}
.link-visibility-badge i {
font-size: 1.25rem;
line-height: 1;
@@ -1487,6 +1541,11 @@ input:checked+.theme-slider:before {
right: 1.5rem;
}
.view-list .link-readlater-badge {
top: 1.25rem;
right: 3.95rem;
}
/* List view - selection */
.view-list .link-select-checkbox {
left: 1rem;