From c2f1c7732eb451ebd0aabde3cc0b380c53d59fd9 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Fri, 6 Mar 2026 12:11:53 +0100
Subject: [PATCH] feat(ui): Lazy loading images + dark mode job highlight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout loading='lazy' sur les couvertures de livres (BookCard + detail)
- Correction couleur job-highlighted en dark mode (fond bleu foncé)
- Animation pulse adaptée pour le dark mode
---
 apps/backoffice/app/books/[id]/page.tsx     |  1 +
 apps/backoffice/app/components/BookCard.tsx |  1 +
 apps/backoffice/app/globals.css             | 49 +++++++++++++++++++--
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/app/books/[id]/page.tsx b/apps/backoffice/app/books/[id]/page.tsx
index 0d95739..0233ec2 100644
--- a/apps/backoffice/app/books/[id]/page.tsx
+++ b/apps/backoffice/app/books/[id]/page.tsx
@@ -45,6 +45,7 @@ export default async function BookDetailPage({
             height={440}
             className="detail-cover-image"
             unoptimized
+            loading="lazy"
           />
         </div>
 
diff --git a/apps/backoffice/app/components/BookCard.tsx b/apps/backoffice/app/components/BookCard.tsx
index 0664fd8..60f1aa9 100644
--- a/apps/backoffice/app/components/BookCard.tsx
+++ b/apps/backoffice/app/components/BookCard.tsx
@@ -18,6 +18,7 @@ export function BookCard({ book, getBookCoverUrl }: BookCardProps) {
           height={220}
           className="cover-image"
           unoptimized
+          loading="lazy"
         />
       </div>
       <div className="book-info">
diff --git a/apps/backoffice/app/globals.css b/apps/backoffice/app/globals.css
index b6f06f8..76bbf17 100644
--- a/apps/backoffice/app/globals.css
+++ b/apps/backoffice/app/globals.css
@@ -234,10 +234,10 @@ button:hover {
   border-color: hsl(280 60% 45% / 0.5);
 }
 
-.status-pending { color: hsl(45 93% 47%); }
-.status-running { color: hsl(192 85% 55%); }
-.status-completed { color: hsl(142 60% 45%); }
-.status-failed { color: hsl(2 72% 48%); }
+.status-pending { color: hsl(45 93% 35%); }
+.status-running { color: hsl(198 78% 37%); font-weight: 700; }
+.status-completed { color: hsl(142 60% 35%); }
+.status-failed { color: hsl(2 72% 45%); }
 .status-cancelled { color: hsl(220 13% 40%); }
 
 .error-hint {
@@ -1111,6 +1111,32 @@ button:hover {
   color: hsl(198 78% 75%);
 }
 
+/* Dark mode status colors for job list - couleurs plus soutenues */
+.dark .status-running {
+  color: hsl(192 85% 55%);
+  font-weight: 700;
+  text-shadow: 0 0 10px hsl(192 85% 55% / 0.3);
+}
+
+.dark .status-pending {
+  color: hsl(45 100% 55%);
+  font-weight: 600;
+}
+
+.dark .status-completed {
+  color: hsl(142 70% 55%);
+  font-weight: 600;
+}
+
+.dark .status-failed {
+  color: hsl(2 80% 60%);
+  font-weight: 600;
+}
+
+.dark .status-cancelled {
+  color: hsl(220 20% 65%);
+}
+
 /* Progress bar visibility fix */
 .job-progress {
   background: var(--card);
@@ -1172,6 +1198,21 @@ tr.job-highlighted td {
   50% { box-shadow: inset 0 0 0 2px hsl(198 78% 37% / 0.6); }
 }
 
+/* Dark mode for highlighted job row */
+.dark tr.job-highlighted {
+  background: hsl(198 52% 20%);
+  box-shadow: inset 0 0 0 2px hsl(198 78% 50%);
+}
+
+.dark tr.job-highlighted td {
+  animation: pulse-border-dark 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border-dark {
+  0%, 100% { box-shadow: inset 0 0 0 1px hsl(198 78% 50% / 0.3); }
+  50% { box-shadow: inset 0 0 0 2px hsl(198 78% 50% / 0.6); }
+}
+
 /* Monitoring styles */
 .monitoring-cell {
   display: flex;