From 06526cbac40b3c9924ab05935666b3b2e19cd313 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 22 Apr 2026 10:26:34 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20afficher=20badge=20lecture=20ult=C3=A9r?=
 =?UTF-8?q?ieure=20dans=20vue=20compacte=20avec=20positionnement=20vertica?=
 =?UTF-8?q?l=20centr=C3=A9=20(top=2050%=20transform=20-50%=20desktop,=200.?=
 =?UTF-8?q?7rem=20mobile),=20style=20ic=C3=B4ne=20bookmark=20SVG=2026?=
 =?UTF-8?q?=C3=9726px=20rouge=20(#ef4444)=20avec=20shadow,=20z-index=2020?=
 =?UTF-8?q?=20pour=20overlay,=20padding-right=204.8rem=20sur=20link-title/?=
 =?UTF-8?q?link-content=20pour=20=C3=A9viter=20chevauchement=20badge,=20et?=
 =?UTF-8?q?=20refactoring=20z-index=20link-outer=20enfants=20(content/acti?=
 =?UTF-8?q?ons/meta=20z-1,=20hover-actions/checkbox/visibility=20z-20)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/css/custom_views.css | 10 +++++----
 shaarli-pro/css/style.css        | 38 +++++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css
index 86c3be9..a7af2f0 100644
--- a/shaarli-pro/css/custom_views.css
+++ b/shaarli-pro/css/custom_views.css
@@ -1743,13 +1743,15 @@ body.view-notes .notes-masonry:empty::after {
 
 .link-outer .link-content,
 .link-outer .link-actions,
-.link-outer .link-hover-actions,
-.link-outer .link-meta,
-.link-outer .link-select-checkbox,
-.link-outer .link-visibility-badge {
+.link-outer .link-meta {
     position: relative;
     z-index: 1;
 }
+.link-outer .link-hover-actions,
+.link-outer .link-select-checkbox,
+.link-outer .link-visibility-badge {
+    z-index: 20;
+}
 
 /* Let Background Studio font color affect bookmark tiles too */
 .link-outer[class*="note-color-"],
diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index c32d91d..2920046 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -1649,6 +1649,7 @@ body.view-notes .paging {
     display: block;
     margin-bottom: 0.25rem;
     line-height: 1.4;
+    padding-right: 4.8rem;
 }
 
 .link-title:hover {
@@ -4274,8 +4275,7 @@ table {
 }
 
 .view-compact .link-thumbnail,
-.view-compact .link-description,
-.view-compact .link-readlater-badge {
+.view-compact .link-description {
     display: none !important;
 }
 
@@ -4284,7 +4284,7 @@ table {
     grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr) minmax(120px, 0.75fr) auto;
     gap: 0.85rem;
     align-items: center;
-    padding: 0.85rem 2.6rem 0.85rem 2.8rem;
+    padding: 0.85rem 4.6rem 0.85rem 2.8rem;
 }
 
 .view-compact .link-header {
@@ -4383,6 +4383,28 @@ table {
     font-size: 1rem;
 }
 
+.view-compact .link-readlater-badge {
+    top: 50%;
+    right: calc(0.65rem + 26px + 0.4rem);
+    left: auto;
+    transform: translateY(-50%);
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    color: transparent;
+    font-size: 0;
+    border-radius: 0.45rem;
+    background: #ef4444 url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>') no-repeat center;
+    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+[data-theme="dark"] .view-compact .link-readlater-badge {
+    background-color: #f87171;
+}
+
 @media (max-width: 768px) {
     .view-compact .compact-table-head {
         display: none;
@@ -4401,7 +4423,7 @@ table {
     .view-compact .link-content {
         grid-template-columns: minmax(0, 1fr);
         gap: 0.55rem;
-        padding: 0.8rem 0.85rem 0.8rem 2.65rem;
+        padding: 0.8rem 4.6rem 0.8rem 2.65rem;
     }
 
     .view-compact .link-title,
@@ -4425,7 +4447,8 @@ table {
     }
 
     .view-compact .link-select-checkbox,
-    .view-compact .link-visibility-badge {
+    .view-compact .link-visibility-badge,
+    .view-compact .link-readlater-badge {
         top: 0.7rem;
         transform: none;
     }
@@ -4435,6 +4458,11 @@ table {
         right: 0.7rem;
     }
 
+    .view-compact .link-readlater-badge {
+        left: auto;
+        right: calc(0.7rem + 26px + 0.4rem);
+    }
+
     .view-compact .link-select-checkbox {
         right: auto;
         left: 0.7rem;