From c9f9eb4ee54730c1099d002220b5f97b9ee0df4a Mon Sep 17 00:00:00 2001
From: Eric Coissac <eric@coissac.eu>
Date: Wed, 21 Jan 2026 20:01:42 +0100
Subject: [PATCH] Fix cache image loading bug in webapp

Fix the bug where cached images were not displaying in the webapp due to synchronous load events. Added checkImageComplete() function to detect already loaded images from cache and updated all affected components (CurrentTrack, QueueItem, MediaItem, RendererCard) to properly handle cached image loading.
---
 Blackboard/Report/bug_images_cache_webapp.md  | 134 +++++
 Blackboard/Todo/bug_images_cache_webapp.md    |  35 ++
 PMOMusic/Cargo.toml                           |   2 +-
 .../components/pmocontrol/CurrentTrack.vue    |  28 +-
 .../src/components/pmocontrol/MediaItem.vue   |  28 +-
 .../src/components/pmocontrol/QueueItem.vue   |  28 +-
 .../components/pmocontrol/RendererCard.vue    | 488 ++++++++++--------
 version.txt                                   |   2 +-
 8 files changed, 524 insertions(+), 221 deletions(-)
 create mode 100644 Blackboard/Report/bug_images_cache_webapp.md
 create mode 100644 Blackboard/Todo/bug_images_cache_webapp.md

diff --git a/Blackboard/Report/bug_images_cache_webapp.md b/Blackboard/Report/bug_images_cache_webapp.md
new file mode 100644
index 00000000..620b476a
--- /dev/null
+++ b/Blackboard/Report/bug_images_cache_webapp.md
@@ -0,0 +1,134 @@
+# Rapport : Correction du bug d'affichage des images en cache dans la webapp
+
+## Tâche originale
+
+Les images de couverture d'album ne s'affichaient plus dans l'application web Control Point. Seuls les logos SVG de fallback étaient visibles, bien que les URLs soient correctes et les images accessibles.
+
+## Analyse
+
+### Pattern d'affichage existant
+
+Les composants utilisaient le pattern suivant :
+
+```vue
+<img
+    v-if="item.album_art_uri && !imageError"
+    v-show="imageLoaded"
+    :src="item.album_art_uri"
+    @load="handleImageLoad"
+    @error="handleImageError"
+/>
+<div v-if="!item.album_art_uri || imageError || !imageLoaded" class="placeholder">
+    <Music :size="20" />
+</div>
+```
+
+Avec :
+```typescript
+const imageLoaded = ref(false);
+
+watch(() => props.item.album_art_uri, () => {
+    imageLoaded.value = false;
+    imageError.value = false;
+});
+
+function handleImageLoad() {
+    imageLoaded.value = true;
+}
+```
+
+### Cause du bug
+
+Lorsqu'une image est **déjà en cache du navigateur**, elle peut se charger de manière **synchrone** avant que Vue n'ait attaché l'écouteur d'événement `@load`. Dans ce cas :
+
+1. L'image est créée dans le DOM (via `v-if`)
+2. Le navigateur charge l'image immédiatement depuis le cache
+3. L'événement `load` se déclenche **avant** que Vue n'ait attaché `@load`
+4. `imageLoaded` reste à `false`
+5. L'image reste cachée par `v-show="imageLoaded"`
+6. Le placeholder SVG s'affiche à la place
+
+Ce comportement est particulièrement fréquent avec des images déjà visitées ou après un rechargement de page.
+
+## Correction appliquée
+
+### Solution
+
+Ajout d'une fonction `checkImageComplete()` qui vérifie si l'image est déjà chargée via les propriétés natives de l'élément `<img>` :
+
+```typescript
+const coverImageRef = ref<HTMLImageElement | null>(null);
+
+function checkImageComplete() {
+    nextTick(() => {
+        if (coverImageRef.value?.complete && coverImageRef.value?.naturalWidth > 0) {
+            imageLoaded.value = true;
+            imageError.value = false;
+        }
+    });
+}
+
+onMounted(() => {
+    checkImageComplete();
+});
+
+watch(() => metadata.value?.album_art_uri, (newUri) => {
+    imageLoaded.value = false;
+    imageError.value = false;
+    if (newUri) {
+        checkImageComplete();
+    }
+});
+```
+
+Et ajout de la référence sur l'élément `<img>` :
+
+```vue
+<img ref="coverImageRef" ... />
+```
+
+### Fichiers modifiés
+
+| Fichier | Modification |
+|---------|--------------|
+| `pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue` | Ajout `checkImageComplete()`, `coverImageRef`, `onMounted` |
+| `pmoapp/webapp/src/components/pmocontrol/QueueItem.vue` | Ajout `checkImageComplete()`, `coverImageRef`, `onMounted` |
+| `pmoapp/webapp/src/components/pmocontrol/MediaItem.vue` | Ajout `checkImageComplete()`, `coverImageRef`, `onMounted` |
+| `pmoapp/webapp/src/components/pmocontrol/RendererCard.vue` | Ajout complet de la gestion d'état image (était absent) |
+
+### Détail des modifications par composant
+
+#### CurrentTrack.vue
+- Import de `onMounted`, `nextTick`
+- Ajout de `coverImageRef`
+- Ajout de `checkImageComplete()`
+- Modification du `watch` pour appeler `checkImageComplete()` après changement d'URL
+- Ajout de `onMounted(() => checkImageComplete())`
+- Ajout de `ref="coverImageRef"` sur l'élément `<img>`
+
+#### QueueItem.vue
+- Mêmes modifications que CurrentTrack.vue
+
+#### MediaItem.vue
+- Mêmes modifications que CurrentTrack.vue
+
+#### RendererCard.vue
+- Ce composant n'avait pas de gestion d'état de chargement d'image
+- Ajout complet : `imageLoaded`, `imageError`, `coverImageRef`, `checkImageComplete()`
+- Ajout des handlers `@load` et `@error`
+- Modification de `hasCover` pour inclure `!imageError`
+- Ajout de `v-show="imageLoaded"` sur l'image
+- Modification de la condition du placeholder
+
+## Vérification
+
+- Build webpack réussi sans erreur
+- Compilation TypeScript OK
+
+## Remarque technique
+
+La propriété `HTMLImageElement.complete` retourne `true` si :
+- L'image a fini de charger (succès ou erreur)
+- L'attribut `src` est vide ou absent
+
+C'est pourquoi on vérifie également `naturalWidth > 0` pour s'assurer que l'image a bien été chargée avec succès (une image en erreur a `naturalWidth === 0`).
diff --git a/Blackboard/Todo/bug_images_cache_webapp.md b/Blackboard/Todo/bug_images_cache_webapp.md
new file mode 100644
index 00000000..6260c8a4
--- /dev/null
+++ b/Blackboard/Todo/bug_images_cache_webapp.md
@@ -0,0 +1,35 @@
+# Bug : Images non affichées dans la webapp (fallback SVG systématique)
+
+## Description du bug
+
+Dans l'application web Control Point, les images de couverture d'album ne s'affichent plus correctement. Au lieu d'afficher les images, seuls les petits logos SVG de fallback (icône Music) sont visibles, alors que :
+- Les URLs des images sont correctes
+- Les images sont bien présentes dans le cache
+- Les images sont accessibles via leur URL directe
+
+Ce bug est apparu après une correction précédente visant à éliminer les images grises.
+
+## Symptômes
+
+- Les composants affichent l'icône SVG de fallback au lieu des vraies images
+- Le problème est plus fréquent qu'avant la correction précédente
+- Les images en cache du navigateur ne s'affichent pas
+
+## Crates/Modules concernées
+
+- **pmoapp/webapp** (application Vue.js)
+
+## Composants à examiner
+
+- `src/components/pmocontrol/CurrentTrack.vue`
+- `src/components/pmocontrol/QueueItem.vue`
+- `src/components/pmocontrol/MediaItem.vue`
+- `src/components/pmocontrol/RendererCard.vue`
+
+## Cause suspectée
+
+Le pattern d'affichage d'image avec `v-show="imageLoaded"` ne gère pas correctement le cas où l'image est déjà en cache du navigateur. Dans ce cas, l'événement `@load` peut se déclencher de manière synchrone avant que Vue n'ait attaché l'écouteur, laissant `imageLoaded` à `false`.
+
+## Solution attendue
+
+Ajouter une vérification de l'état `complete` de l'image après le montage du composant et après chaque changement d'URL, pour détecter les images déjà chargées depuis le cache.
diff --git a/PMOMusic/Cargo.toml b/PMOMusic/Cargo.toml
index 526e1fb0..c879644d 100644
--- a/PMOMusic/Cargo.toml
+++ b/PMOMusic/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "PMOMusic"
-version = "0.3.10"
+version = "0.3.11"
 edition = "2024"
 
 [dependencies]
diff --git a/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue b/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
index 214bd445..165b4ece 100644
--- a/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRef, ref, watch } from "vue";
+import { computed, toRef, ref, watch, onMounted, nextTick } from "vue";
 import { useRenderer } from "@/composables/useRenderers";
 import { useUIStore } from "@/stores/ui";
 import { api } from "@/services/pmocontrol/api";
@@ -25,6 +25,9 @@ const showMetadata = ref(false);
 const imageLoaded = ref(false);
 const imageError = ref(false);
 
+// Reference to the image element
+const coverImageRef = ref<HTMLImageElement | null>(null);
+
 function openCoverOverlay() {
     if (hasCover.value) {
         showCoverOverlay.value = true;
@@ -96,15 +99,35 @@ const hasCover = computed(
     () => !!metadata.value?.album_art_uri && !imageError.value,
 );
 
+// Check if image is already loaded (cached images may load synchronously)
+function checkImageComplete() {
+    nextTick(() => {
+        if (
+            coverImageRef.value?.complete &&
+            coverImageRef.value?.naturalWidth > 0
+        ) {
+            imageLoaded.value = true;
+            imageError.value = false;
+        }
+    });
+}
+
 // Reset image state when album_art_uri changes
 watch(
     () => metadata.value?.album_art_uri,
-    () => {
+    (newUri) => {
         imageLoaded.value = false;
         imageError.value = false;
+        if (newUri) {
+            checkImageComplete();
+        }
     },
 );
 
+onMounted(() => {
+    checkImageComplete();
+});
+
 function handleImageLoad() {
     imageLoaded.value = true;
     imageError.value = false;
@@ -358,6 +381,7 @@ const swipeOpacity = computed(() => {
             @click="openCoverOverlay"
         >
             <img
+                ref="coverImageRef"
                 v-if="metadata?.album_art_uri && !imageError"
                 v-show="imageLoaded"
                 :src="metadata.album_art_uri"
diff --git a/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue b/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue
index c768856b..13091e48 100644
--- a/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/MediaItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, onMounted, nextTick } from "vue";
 import type { ContainerEntry } from "@/services/pmocontrol/types";
 import { Music } from "lucide-vue-next";
 import ActionMenu from "./ActionMenu.vue";
@@ -19,15 +19,38 @@ const emit = defineEmits<{
 const imageLoaded = ref(false);
 const imageError = ref(false);
 
+// Reference to the image element
+const coverImageRef = ref<HTMLImageElement | null>(null);
+
+// Check if image is already loaded (cached images may load synchronously)
+function checkImageComplete() {
+    nextTick(() => {
+        if (
+            coverImageRef.value?.complete &&
+            coverImageRef.value?.naturalWidth > 0
+        ) {
+            imageLoaded.value = true;
+            imageError.value = false;
+        }
+    });
+}
+
 // Reset image state when album_art_uri changes
 watch(
     () => props.entry.album_art_uri,
-    () => {
+    (newUri) => {
         imageLoaded.value = false;
         imageError.value = false;
+        if (newUri) {
+            checkImageComplete();
+        }
     },
 );
 
+onMounted(() => {
+    checkImageComplete();
+});
+
 function handleImageLoad() {
     imageLoaded.value = true;
     imageError.value = false;
@@ -51,6 +74,7 @@ function handleAddToQueue(rendererId: string) {
         <!-- Cover miniature -->
         <div class="media-cover">
             <img
+                ref="coverImageRef"
                 v-if="entry.album_art_uri && !imageError"
                 v-show="imageLoaded"
                 :src="entry.album_art_uri"
diff --git a/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue b/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue
index 38d456ed..2932ee00 100644
--- a/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/QueueItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, onMounted, nextTick } from "vue";
 import { Music, Play } from "lucide-vue-next";
 import type { QueueItem } from "@/services/pmocontrol/types";
 
@@ -16,15 +16,38 @@ const emit = defineEmits<{
 const imageLoaded = ref(false);
 const imageError = ref(false);
 
+// Reference to the image element
+const coverImageRef = ref<HTMLImageElement | null>(null);
+
+// Check if image is already loaded (cached images may load synchronously)
+function checkImageComplete() {
+    nextTick(() => {
+        if (
+            coverImageRef.value?.complete &&
+            coverImageRef.value?.naturalWidth > 0
+        ) {
+            imageLoaded.value = true;
+            imageError.value = false;
+        }
+    });
+}
+
 // Reset image state when album_art_uri changes
 watch(
     () => props.item.album_art_uri,
-    () => {
+    (newUri) => {
         imageLoaded.value = false;
         imageError.value = false;
+        if (newUri) {
+            checkImageComplete();
+        }
     },
 );
 
+onMounted(() => {
+    checkImageComplete();
+});
+
 function handleImageLoad() {
     imageLoaded.value = true;
     imageError.value = false;
@@ -56,6 +79,7 @@ function handleClick(item: QueueItem) {
         <!-- Cover miniature -->
         <div class="item-cover">
             <img
+                ref="coverImageRef"
                 v-if="item.album_art_uri && !imageError"
                 v-show="imageLoaded"
                 :src="item.album_art_uri"
diff --git a/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue b/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue
index 3d411c80..4eb7db1d 100644
--- a/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue
+++ b/pmoapp/webapp/src/components/pmocontrol/RendererCard.vue
@@ -1,331 +1,393 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, watch, onMounted, nextTick } from "vue";
+import { useRouter } from "vue-router";
 import type {
-  RendererCapabilitiesSummary,
-  RendererSummary,
-  RendererState,
-} from '@/services/pmocontrol/types'
-import StatusBadge from './StatusBadge.vue'
-import { Music, Volume2, VolumeX } from 'lucide-vue-next'
+    RendererCapabilitiesSummary,
+    RendererSummary,
+    RendererState,
+} from "@/services/pmocontrol/types";
+import StatusBadge from "./StatusBadge.vue";
+import { Music, Volume2, VolumeX } from "lucide-vue-next";
 
 const props = defineProps<{
-  renderer: RendererSummary
-  state: RendererState | null
-}>()
+    renderer: RendererSummary;
+    state: RendererState | null;
+}>();
 
-const router = useRouter()
+const router = useRouter();
 
 // Métadonnées proviennent directement de l'état du renderer (API + SSE)
-const metadata = computed(() => props.state?.current_track)
+const metadata = computed(() => props.state?.current_track);
+
+// Track image loading state
+const imageLoaded = ref(false);
+const imageError = ref(false);
+
+// Reference to the image element
+const coverImageRef = ref<HTMLImageElement | null>(null);
+
+// Check if image is already loaded (cached images may load synchronously)
+function checkImageComplete() {
+    nextTick(() => {
+        if (
+            coverImageRef.value?.complete &&
+            coverImageRef.value?.naturalWidth > 0
+        ) {
+            imageLoaded.value = true;
+            imageError.value = false;
+        }
+    });
+}
+
+// Reset image state when album_art_uri changes
+watch(
+    () => metadata.value?.album_art_uri,
+    (newUri) => {
+        imageLoaded.value = false;
+        imageError.value = false;
+        if (newUri) {
+            checkImageComplete();
+        }
+    },
+);
+
+onMounted(() => {
+    checkImageComplete();
+});
+
+function handleImageLoad() {
+    imageLoaded.value = true;
+    imageError.value = false;
+}
+
+function handleImageError() {
+    imageError.value = true;
+}
 
 const protocolLabel = computed(() => {
-  switch (props.renderer.protocol) {
-    case 'upnp':
-      return 'UPnP AV'
-    case 'openhome':
-      return 'OpenHome'
-    case 'hybrid':
-      return 'Hybrid (UPnP + OpenHome)'
-    default:
-      return 'Inconnu'
-  }
-})
+    switch (props.renderer.protocol) {
+        case "upnp":
+            return "UPnP AV";
+        case "openhome":
+            return "OpenHome";
+        case "hybrid":
+            return "Hybrid (UPnP + OpenHome)";
+        default:
+            return "Inconnu";
+    }
+});
 
 const protocolClass = computed(() => {
-  switch (props.renderer.protocol) {
-    case 'upnp':
-      return 'protocol-upnp'
-    case 'openhome':
-      return 'protocol-openhome'
-    case 'hybrid':
-      return 'protocol-hybrid'
-    default:
-      return 'protocol-unknown'
-  }
-})
+    switch (props.renderer.protocol) {
+        case "upnp":
+            return "protocol-upnp";
+        case "openhome":
+            return "protocol-openhome";
+        case "hybrid":
+            return "protocol-hybrid";
+        default:
+            return "protocol-unknown";
+    }
+});
 
 const capabilityBadges = computed(() => {
-  const caps = props.renderer.capabilities
-  if (!caps) return []
-  const mapping: Array<{ key: keyof RendererCapabilitiesSummary; label: string }> = [
-    { key: 'has_avtransport', label: 'AVTransport' },
-    { key: 'has_oh_playlist', label: 'OpenHome' },
-    { key: 'has_linkplay_http', label: 'Hybrid' },
-    { key: 'has_oh_volume', label: 'Vol' },
-    { key: 'has_oh_time', label: 'Time' },
-    { key: 'has_oh_info', label: 'Info' },
-  ]
-  return mapping.filter(({ key }) => caps[key]).map(({ key, label }) => ({ key, label }))
-})
+    const caps = props.renderer.capabilities;
+    if (!caps) return [];
+    const mapping: Array<{
+        key: keyof RendererCapabilitiesSummary;
+        label: string;
+    }> = [
+        { key: "has_avtransport", label: "AVTransport" },
+        { key: "has_oh_playlist", label: "OpenHome" },
+        { key: "has_linkplay_http", label: "Hybrid" },
+        { key: "has_oh_volume", label: "Vol" },
+        { key: "has_oh_time", label: "Time" },
+        { key: "has_oh_info", label: "Info" },
+    ];
+    return mapping
+        .filter(({ key }) => caps[key])
+        .map(({ key, label }) => ({ key, label }));
+});
 
-const hasCover = computed(() => !!metadata.value?.album_art_uri)
+const hasCover = computed(
+    () => !!metadata.value?.album_art_uri && !imageError.value,
+);
 
 function goToRenderer() {
-  router.push(`/renderer/${props.renderer.id}`)
+    router.push(`/renderer/${props.renderer.id}`);
 }
 </script>
 
 <template>
-  <div :class="['renderer-card', { offline: !renderer.online }]">
-    <!-- Header -->
-    <div class="card-header">
-      <div class="header-content">
-        <h3 class="renderer-name">{{ renderer.friendly_name }}</h3>
-        <p class="renderer-model">{{ renderer.model_name }}</p>
-      </div>
-      <div class="badges">
-        <span :class="['protocol-badge', protocolClass]">
-          {{ protocolLabel }}
-        </span>
-        <StatusBadge v-if="state" :status="state.transport_state" />
-      </div>
-    </div>
+    <div :class="['renderer-card', { offline: !renderer.online }]">
+        <!-- Header -->
+        <div class="card-header">
+            <div class="header-content">
+                <h3 class="renderer-name">{{ renderer.friendly_name }}</h3>
+                <p class="renderer-model">{{ renderer.model_name }}</p>
+            </div>
+            <div class="badges">
+                <span :class="['protocol-badge', protocolClass]">
+                    {{ protocolLabel }}
+                </span>
+                <StatusBadge v-if="state" :status="state.transport_state" />
+            </div>
+        </div>
 
-    <!-- Cover Art -->
-    <div v-if="capabilityBadges.length" class="capabilities">
-      <span v-for="badge in capabilityBadges" :key="badge.key" class="capability-badge">
-        {{ badge.label }}
-      </span>
-    </div>
+        <!-- Cover Art -->
+        <div v-if="capabilityBadges.length" class="capabilities">
+            <span
+                v-for="badge in capabilityBadges"
+                :key="badge.key"
+                class="capability-badge"
+            >
+                {{ badge.label }}
+            </span>
+        </div>
 
-    <div class="card-cover">
-      <img
-        v-if="hasCover"
-        :src="metadata?.album_art_uri!"
-        :alt="metadata?.album || 'Album cover'"
-        class="cover-image"
-        loading="lazy"
-      />
-      <div v-else class="cover-placeholder">
-        <Music :size="48" />
-      </div>
-    </div>
+        <div class="card-cover">
+            <img
+                ref="coverImageRef"
+                v-if="hasCover"
+                v-show="imageLoaded"
+                :src="metadata?.album_art_uri!"
+                :alt="metadata?.album || 'Album cover'"
+                class="cover-image"
+                loading="lazy"
+                @load="handleImageLoad"
+                @error="handleImageError"
+            />
+            <div v-if="!hasCover || !imageLoaded" class="cover-placeholder">
+                <Music :size="48" />
+            </div>
+        </div>
 
-    <!-- Metadata (current track) -->
-    <div v-if="metadata" class="card-metadata">
-      <p class="track-title">{{ metadata.title || 'Sans titre' }}</p>
-      <p class="track-artist">{{ metadata.artist || 'Artiste inconnu' }}</p>
-    </div>
-    <div v-else class="card-metadata empty">
-      <p class="track-title">Aucun média</p>
-    </div>
+        <!-- Metadata (current track) -->
+        <div v-if="metadata" class="card-metadata">
+            <p class="track-title">{{ metadata.title || "Sans titre" }}</p>
+            <p class="track-artist">
+                {{ metadata.artist || "Artiste inconnu" }}
+            </p>
+        </div>
+        <div v-else class="card-metadata empty">
+            <p class="track-title">Aucun média</p>
+        </div>
 
-    <!-- Volume -->
-    <div v-if="state && state.volume !== null" class="card-volume">
-      <VolumeX v-if="state.mute" :size="16" class="volume-icon muted" />
-      <Volume2 v-else :size="16" class="volume-icon" />
-      <div class="volume-bar">
-        <div
-          class="volume-bar-fill"
-          :style="{ width: `${state.mute ? 0 : state.volume}%` }"
-        ></div>
-      </div>
-      <span class="volume-value">{{ state.volume }}</span>
-    </div>
+        <!-- Volume -->
+        <div v-if="state && state.volume !== null" class="card-volume">
+            <VolumeX v-if="state.mute" :size="16" class="volume-icon muted" />
+            <Volume2 v-else :size="16" class="volume-icon" />
+            <div class="volume-bar">
+                <div
+                    class="volume-bar-fill"
+                    :style="{ width: `${state.mute ? 0 : state.volume}%` }"
+                ></div>
+            </div>
+            <span class="volume-value">{{ state.volume }}</span>
+        </div>
 
-    <!-- Control Button -->
-    <button class="btn btn-primary card-control-btn" @click="goToRenderer">
-      Contrôler
-    </button>
-  </div>
+        <!-- Control Button -->
+        <button class="btn btn-primary card-control-btn" @click="goToRenderer">
+            Contrôler
+        </button>
+    </div>
 </template>
 
 <style scoped>
 .renderer-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  padding: var(--spacing-lg);
-  background-color: var(--color-bg-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  transition: all var(--transition-normal);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg);
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border);
+    transition: all var(--transition-normal);
 }
 
 .renderer-card:hover {
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-md);
+    border-color: var(--color-primary);
+    box-shadow: var(--shadow-md);
 }
 
 .renderer-card.offline {
-  opacity: 0.6;
-  filter: grayscale(0.5);
+    opacity: 0.6;
+    filter: grayscale(0.5);
 }
 
 /* Header */
 .card-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
 }
 
 .header-content {
-  flex: 1;
+    flex: 1;
 }
 
 .renderer-name {
-  font-size: var(--text-lg);
-  font-weight: 600;
-  color: var(--color-text);
-  margin: 0 0 var(--spacing-xs);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-text);
+    margin: 0 0 var(--spacing-xs);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .renderer-model {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .badges {
-  display: flex;
-  gap: var(--spacing-xs);
-  flex-wrap: wrap;
+    display: flex;
+    gap: var(--spacing-xs);
+    flex-wrap: wrap;
 }
 
 .capabilities {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
 }
 
 .capability-badge {
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
-  font-size: var(--text-xs);
-  background-color: var(--color-bg-tertiary);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: var(--text-xs);
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border);
 }
 
 .protocol-badge {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
 .protocol-upnp {
-  background-color: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-  border: 1px solid #3b82f6;
+    background-color: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+    border: 1px solid #3b82f6;
 }
 
 .protocol-openhome {
-  background-color: rgba(139, 92, 246, 0.1);
-  color: #8b5cf6;
-  border: 1px solid #8b5cf6;
+    background-color: rgba(139, 92, 246, 0.1);
+    color: #8b5cf6;
+    border: 1px solid #8b5cf6;
 }
 
 .protocol-hybrid {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
-  border: 1px solid #10b981;
+    background-color: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+    border: 1px solid #10b981;
 }
 
 /* Cover */
 .card-cover {
-  width: 100%;
-  aspect-ratio: 1;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background-color: var(--color-bg-tertiary);
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background-color: var(--color-bg-tertiary);
 }
 
 .cover-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .cover-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-tertiary);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-tertiary);
 }
 
 /* Metadata */
 .card-metadata {
-  min-height: 3rem;
+    min-height: 3rem;
 }
 
 .track-title {
-  font-size: var(--text-base);
-  font-weight: 600;
-  color: var(--color-text);
-  margin: 0 0 var(--spacing-xs);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    font-size: var(--text-base);
+    font-weight: 600;
+    color: var(--color-text);
+    margin: 0 0 var(--spacing-xs);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .track-artist {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .card-metadata.empty .track-title {
-  color: var(--color-text-tertiary);
-  font-weight: 400;
+    color: var(--color-text-tertiary);
+    font-weight: 400;
 }
 
 /* Volume */
 .card-volume {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
 }
 
 .volume-icon {
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
+    color: var(--color-text-secondary);
+    flex-shrink: 0;
 }
 
 .volume-icon.muted {
-  color: var(--status-offline);
+    color: var(--status-offline);
 }
 
 .volume-bar {
-  flex: 1;
-  height: 4px;
-  background-color: var(--color-bg-tertiary);
-  border-radius: var(--radius-full);
-  overflow: hidden;
+    flex: 1;
+    height: 4px;
+    background-color: var(--color-bg-tertiary);
+    border-radius: var(--radius-full);
+    overflow: hidden;
 }
 
 .volume-bar-fill {
-  height: 100%;
-  background-color: var(--color-primary);
-  transition: width var(--transition-fast);
+    height: 100%;
+    background-color: var(--color-primary);
+    transition: width var(--transition-fast);
 }
 
 .volume-value {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  min-width: 2rem;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    min-width: 2rem;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
 }
 
 /* Control Button */
 .card-control-btn {
-  width: 100%;
+    width: 100%;
 }
 
 /* Responsive grid handled by parent (DashboardView) */
diff --git a/version.txt b/version.txt
index 5503126d..20805912 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-0.3.10
+0.3.11