From 5299ab91489a364026b05d288261505b681c63db Mon Sep 17 00:00:00 2001
From: Eric Coissac <eric@coissac.eu>
Date: Wed, 25 Mar 2026 20:54:47 +0100
Subject: [PATCH] Refactor drawer animations and update dark/light theme styles

- Remove global CSS drawer animations, moving them to scoped component styles for direction-specific control
- Update BottomTabBar and RendererTabContent background/border/shadow for dark mode with consistent styling
- Add light theme media query support for queue-drawer and bottom-bar
- Adjust backdrop-filter blur intensity from 30px to 8px for better performance and visual consistency
---
 pmoapp/webapp/src/assets/styles/drawers.css   | 22 ++-----------------
 .../src/components/unified/BottomTabBar.vue   | 16 +++++++-------
 .../src/components/unified/RendererDrawer.vue |  2 +-
 .../components/unified/RendererTabContent.vue | 17 +++++++++-----
 4 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/pmoapp/webapp/src/assets/styles/drawers.css b/pmoapp/webapp/src/assets/styles/drawers.css
index 265ce95b..e442aaa3 100644
--- a/pmoapp/webapp/src/assets/styles/drawers.css
+++ b/pmoapp/webapp/src/assets/styles/drawers.css
@@ -266,23 +266,5 @@
     }
 }
 
-/* ========================================
-   ANIMATIONS D'ENTRÉE/SORTIE
-   ======================================== */
-
-.drawer-enter-active,
-.drawer-leave-active {
-    transition: transform var(--transition-normal) ease;
-}
-
-/* ServerDrawer : entre par la gauche */
-.drawer-left-enter-from,
-.drawer-left-leave-to {
-    transform: translateX(-100%);
-}
-
-/* RendererDrawer : entre par la droite */
-.drawer-right-enter-from,
-.drawer-right-leave-to {
-    transform: translateX(100%);
-}
+/* Les animations d'entrée/sortie sont définies dans chaque composant (scoped)
+   car elles diffèrent selon la direction (gauche/droite/bas) */
diff --git a/pmoapp/webapp/src/components/unified/BottomTabBar.vue b/pmoapp/webapp/src/components/unified/BottomTabBar.vue
index 67d616a2..31abd54f 100644
--- a/pmoapp/webapp/src/components/unified/BottomTabBar.vue
+++ b/pmoapp/webapp/src/components/unified/BottomTabBar.vue
@@ -148,18 +148,18 @@ function handleRendererDrawerClick() {
     gap: var(--spacing-md);
     height: 72px;
     padding: 0 var(--spacing-md);
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(30px) saturate(180%);
-    -webkit-backdrop-filter: blur(30px) saturate(180%);
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
+    background: rgba(22, 22, 32, 0.96);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
     z-index: 100;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
     .bottom-bar {
-        background: rgba(0, 0, 0, 0.25);
-        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(245, 245, 250, 0.97);
+        border-top-color: rgba(0, 0, 0, 0.1);
     }
 }
 
diff --git a/pmoapp/webapp/src/components/unified/RendererDrawer.vue b/pmoapp/webapp/src/components/unified/RendererDrawer.vue
index 8b9decc1..82a4e443 100644
--- a/pmoapp/webapp/src/components/unified/RendererDrawer.vue
+++ b/pmoapp/webapp/src/components/unified/RendererDrawer.vue
@@ -695,7 +695,7 @@ async function handleTransferQueue(event: Event, targetRendererId: string) {
     right: 0;
     top: calc(100% + 4px);
     min-width: 200px;
-    background: var(--color-surface-elevated);
+    background: rgba(20, 20, 30, 0.98);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
diff --git a/pmoapp/webapp/src/components/unified/RendererTabContent.vue b/pmoapp/webapp/src/components/unified/RendererTabContent.vue
index 12950107..7d0e1b3d 100644
--- a/pmoapp/webapp/src/components/unified/RendererTabContent.vue
+++ b/pmoapp/webapp/src/components/unified/RendererTabContent.vue
@@ -228,11 +228,11 @@ async function handleQueueItemClick(item: QueueItem) {
         bottom: 0;
         left: 0;
         right: 0;
-        background: rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(30px) saturate(180%);
-        -webkit-backdrop-filter: blur(30px) saturate(180%);
-        border-top: 1px solid rgba(255, 255, 255, 0.2);
-        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
+        background: rgba(22, 22, 32, 0.96);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        border-top: 1px solid rgba(255, 255, 255, 0.12);
+        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
         /* Fermé: caché sauf le toggle (56px) qui dépasse au-dessus de la BottomTabBar (64px) */
         transform: translateY(calc(100% - 56px - 64px));
         transition: transform 0.3s ease;
@@ -250,6 +250,13 @@ async function handleQueueItemClick(item: QueueItem) {
         pointer-events: auto; /* Ouvert: capture les clics */
     }
 
+    @media (prefers-color-scheme: light) {
+        .queue-drawer {
+            background: rgba(245, 245, 250, 0.97);
+            border-top-color: rgba(0, 0, 0, 0.1);
+        }
+    }
+
     .queue-drawer-toggle {
         width: 100%;
         height: 56px;