Grosse correction sur l'interface graphique et débugage de Open Home.

pmoapp/webapp/src/components/unified/BottomTabBar.vue

@@ -139,8 +139,8 @@ function handleServerDrawerClick() {
           :aria-label="`Switch to ${tab.fullTitle} tab`"
           :aria-current="tab.id === activeTabId ? 'page' : undefined"
         >
-          <!-- Icône -->
-          <component :is="tab.icon" class="tab-icon" :size="compactMode ? 28 : 24" />
+          <!-- Icône (réduite pour plus d'espace pour le texte) -->
+          <component :is="tab.icon" class="tab-icon" :size="compactMode ? 24 : 20" />
 
           <!-- Titre (masqué en mode compact) -->
           <span v-if="!compactMode" class="tab-title">{{ tab.title }}</span>
@@ -172,7 +172,10 @@ function handleServerDrawerClick() {
 
 <style scoped>
 .bottom-tab-bar {
-  position: relative;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
   height: 64px;
@@ -216,27 +219,24 @@ function handleServerDrawerClick() {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-width: 100px;
-  max-width: 200px;
+  gap: 6px;
+  width: 140px; /* Largeur fixe pour éviter l'espace blanc */
   height: 64px;
-  padding: 8px 16px;
+  padding: 6px 12px;
   background: transparent;
   border: none;
   border-bottom: 4px solid transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   color: var(--color-text-secondary);
-  font-size: var(--text-sm);
+  font-size: 13px; /* Réduit de var(--text-sm) pour plus d'espace */
   font-family: inherit;
-  white-space: nowrap;
   flex-shrink: 0;
 }
 
 /* Mode compact: icônes seulement */
 .tab-item.compact {
-  min-width: 60px;
-  max-width: 60px;
+  width: 60px;
   padding: 8px;
   justify-content: center;
 }
@@ -274,8 +274,14 @@ function handleServerDrawerClick() {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   text-align: left;
+  /* Permettre au texte de se replier sur 2 lignes */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.2;
+  max-height: 2.4em; /* 2 lignes × 1.2 line-height */
+  word-break: break-word;
 }
 
 .tab-close {
@@ -345,19 +351,16 @@ function handleServerDrawerClick() {
 /* Responsive mobile */
 @media (max-width: 768px) {
   .tab-item {
-    min-width: 80px;
-    max-width: 150px;
-    padding: 8px 12px;
-    gap: 6px;
+    width: 110px; /* Largeur fixe plus petite sur mobile */
+    padding: 6px 10px;
+    gap: 4px;
+    font-size: 12px; /* Encore un peu plus petit sur mobile */
   }
 
   .tab-title {
     font-size: 12px;
-  }
-
-  .tab-icon {
-    width: 20px;
-    height: 20px;
+    line-height: 1.3;
+    max-height: 2.6em; /* 2 lignes × 1.3 line-height */
   }
 
   .tab-close {

pmoapp/webapp/src/components/unified/RendererTabContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, toRef, onMounted } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
 import { useRenderer } from '@/composables/useRenderers'
 import CurrentTrack from '@/components/pmocontrol/CurrentTrack.vue'
 import TransportControls from '@/components/pmocontrol/TransportControls.vue'
@@ -18,6 +19,9 @@ const { renderer, state, queue, binding, refresh } = useRenderer(toRef(props, 'r
 const { detachPlaylist } = useRenderers()
 const uiStore = useUIStore()
 
+// Détection mobile portrait pour afficher le drawer au lieu de la colonne
+const isMobilePortrait = useMediaQuery('(max-width: 768px) and (orientation: portrait)')
+
 // État du drawer queue sur mobile
 const queueDrawerOpen = ref(false)
 
@@ -94,22 +98,13 @@ async function handleDetachPlaylist() {
         </div>
       </div>
 
-      <!-- Colonne droite: Queue (desktop) -->
-      <div class="queue-column">
-        <div class="queue-header">
-          <h2 class="queue-title">File d'attente</h2>
-          <span v-if="queue" class="queue-count">{{ queue.items.length }} morceaux</span>
-        </div>
-
-        <QueueViewer v-if="queue" :renderer-id="rendererId" class="queue-viewer" />
-
-        <div v-else class="queue-empty">
-          <p>Aucun morceau en file d'attente</p>
-        </div>
+      <!-- Colonne droite: Queue (desktop et landscape uniquement) -->
+      <div v-if="!isMobilePortrait" class="queue-column">
+        <QueueViewer :renderer-id="rendererId" class="queue-viewer" />
       </div>
 
-      <!-- Drawer queue (mobile uniquement) -->
-      <div class="queue-drawer" :class="{ open: queueDrawerOpen }">
+      <!-- Drawer queue (mobile portrait uniquement) -->
+      <div v-if="isMobilePortrait" class="queue-drawer" :class="{ open: queueDrawerOpen }">
         <!-- Toggle button -->
         <button class="queue-drawer-toggle" @click="toggleQueueDrawer">
           <ChevronUp v-if="queueDrawerOpen" :size="24" />
@@ -119,10 +114,7 @@ async function handleDetachPlaylist() {
 
         <!-- Contenu du drawer -->
         <div class="queue-drawer-content">
-          <QueueViewer v-if="queue" :renderer-id="rendererId" />
-          <div v-else class="queue-empty">
-            <p>Aucun morceau en file d'attente</p>
-          </div>
+          <QueueViewer :renderer-id="rendererId" />
         </div>
       </div>
 
@@ -286,60 +278,23 @@ async function handleDetachPlaylist() {
 .queue-column {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
   overflow: hidden;
 }
 
-.queue-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.queue-title {
-  font-size: var(--text-xl);
-  font-weight: 600;
-  color: var(--color-text);
-  margin: 0;
-}
-
-.queue-count {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  padding: 4px 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: var(--radius-sm);
-}
-
 .queue-viewer {
   flex: 1;
   overflow-y: auto;
 }
 
-.queue-empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-xl);
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: var(--radius-md);
-  border: 1px dashed rgba(255, 255, 255, 0.1);
-}
-
-.queue-empty p {
-  color: var(--color-text-tertiary);
-  font-size: var(--text-base);
-  margin: 0;
-}
-
-/* Queue drawer - masqué sur desktop, visible sur mobile */
+/* Queue drawer - masqué sur desktop, visible uniquement sur mobile portrait */
 .queue-drawer {
   display: none;
 }
 
+.queue-drawer-backdrop {
+  display: none;
+}
+
 /* Responsive - Mobile portrait */
 @media (max-width: 768px) and (orientation: portrait) {
   .renderer-header {
@@ -358,17 +313,11 @@ async function handleDetachPlaylist() {
     grid-template-columns: 1fr;
     gap: var(--spacing-md);
     padding: var(--spacing-md);
-    padding-bottom: 0;
+    padding-bottom: var(--spacing-xl); /* Espace pour éviter que la tab bar cache les contrôles */
   }
 
-  /* Queue column cachée sur mobile */
-  .queue-column {
-    display: none;
-  }
-
-  /* Queue drawer visible sur mobile */
+  /* Queue drawer visible sur mobile (géré par v-if maintenant) */
   .queue-drawer {
-    display: block;
     position: fixed;
     bottom: 64px; /* Hauteur de la tab bar */
     left: 0;
@@ -425,10 +374,11 @@ async function handleDetachPlaylist() {
 
   .controls-column {
     padding-right: 0;
+    padding-bottom: 100px; /* Espace supplémentaire pour éviter que la tab bar (64px) cache le volume */
   }
 }
 
-/* Responsive - 800x600 landscape */
+/* Responsive - 800x600 landscape et petites hauteurs (mode kiosque) */
 @media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
   .renderer-layout {
     grid-template-columns: 280px 1fr;
@@ -443,10 +393,35 @@ async function handleDetachPlaylist() {
   .renderer-name {
     font-size: var(--text-xl);
   }
+}
 
-  .queue-title {
+/* Mode kiosque - compactage pour hauteurs ≤ 700px (ex: 800x600) */
+@media (max-height: 700px) and (orientation: landscape) {
+  .renderer-header {
+    padding: var(--spacing-xs) var(--spacing-md);
+  }
+
+  .renderer-name {
     font-size: var(--text-lg);
   }
+
+  .renderer-model {
+    font-size: 11px;
+  }
+
+  .renderer-layout {
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+  }
+
+  .controls-column {
+    gap: var(--spacing-sm);
+  }
+
+  /* Masquer le scroll, tout doit tenir */
+  .controls-column {
+    overflow-y: visible;
+  }
 }
 
 /* Large desktop */

pmoapp/webapp/src/components/unified/ServerDrawer.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
-import { X, Server as ServerIcon, Circle } from 'lucide-vue-next'
+import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { X, Server as ServerIcon, Circle, ChevronLeft, Folder, Music, ChevronRight, Play, Plus, Settings } from 'lucide-vue-next'
 import { useMediaServers } from '@/composables/useMediaServers'
-import type { MediaServerSummary } from '@/services/pmocontrol/types'
+import type { MediaServerSummary, BrowseResponse, ContainerEntry } from '@/services/pmocontrol/types'
 
 const props = defineProps<{
   modelValue: boolean // v-model pour contrôler l'ouverture
@@ -10,28 +11,141 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
-  'server-selected': [server: MediaServerSummary]
+  'play-item': [item: ContainerEntry, serverId: string]
+  'queue-item': [item: ContainerEntry, serverId: string]
 }>()
 
-const { allServers, fetchServers } = useMediaServers()
+const { allServers, fetchServers, browseContainer, currentPath, setPath, clearPath } = useMediaServers()
+const router = useRouter()
+
+// État de navigation
+const currentServer = ref<MediaServerSummary | null>(null)
+const browseData = ref<BrowseResponse | null>(null)
+const isLoading = ref(false)
 
 // Rafraîchir la liste quand le drawer s'ouvre
 watch(() => props.modelValue, (isOpen) => {
   if (isOpen) {
     fetchServers()
+  } else {
+    // Reset navigation quand on ferme
+    currentServer.value = null
+    browseData.value = null
+    clearPath()
   }
 })
 
 const onlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => s.online))
 const offlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => !s.online))
 
+// Mode du drawer
+const isNavigating = computed(() => currentServer.value !== null)
+
 function close() {
   emit('update:modelValue', false)
 }
 
-function handleServerClick(server: MediaServerSummary) {
+async function handleServerClick(server: MediaServerSummary) {
   if (!server.online) return
-  emit('server-selected', server)
+
+  // Commencer la navigation dans ce serveur
+  currentServer.value = server
+  isLoading.value = true
+
+  try {
+    // Browse racine (containerId = "0")
+    browseData.value = await browseContainer(server.id, '0')
+    setPath([{ id: '0', title: server.friendly_name }])
+  } catch (error) {
+    console.error('[ServerDrawer] Erreur browse racine:', error)
+    browseData.value = null
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function goBack() {
+  currentServer.value = null
+  browseData.value = null
+  clearPath()
+}
+
+async function handleContainerClick(item: ContainerEntry) {
+  if (!currentServer.value) return
+
+  isLoading.value = true
+  try {
+    browseData.value = await browseContainer(currentServer.value.id, item.id)
+    setPath([...currentPath.value, { id: item.id, title: item.title }])
+  } catch (error) {
+    console.error('[ServerDrawer] Erreur browse container:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function handleBreadcrumbClick(index: number) {
+  if (!currentServer.value || index >= currentPath.value.length) return
+
+  const targetCrumb = currentPath.value[index]
+  if (!targetCrumb) return
+
+  isLoading.value = true
+
+  try {
+    browseData.value = await browseContainer(currentServer.value.id, targetCrumb.id)
+    setPath(currentPath.value.slice(0, index + 1))
+  } catch (error) {
+    console.error('[ServerDrawer] Erreur breadcrumb navigation:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Détermine si un item est jouable (track ou container jouable comme album/playlist)
+function isPlayable(item: ContainerEntry): boolean {
+  if (!item.is_container) return true // Les tracks sont toujours jouables
+
+  // Containers jouables basés sur la classe UPnP
+  const playableClasses = [
+    'object.container.album',
+    'object.container.playlist',
+    'object.container.person.musicartist'
+  ]
+
+  return playableClasses.some(cls => item.class.toLowerCase().includes(cls))
+}
+
+// Détermine si un container est navigable
+function isNavigable(item: ContainerEntry): boolean {
+  // Tous les containers sont navigables (on laisse le serveur décider si vide)
+  return item.is_container
+}
+
+function handleItemClick(item: ContainerEntry) {
+  if (!currentServer.value) return
+
+  // Les containers sont toujours navigables
+  if (item.is_container) {
+    handleContainerClick(item)
+  }
+  // Les tracks individuels : on ne fait rien (actions via boutons)
+}
+
+function handlePlayItem(event: Event, item: ContainerEntry) {
+  event.stopPropagation()
+  if (!currentServer.value) return
+  emit('play-item', item, currentServer.value.id)
+}
+
+function handleQueueItem(event: Event, item: ContainerEntry) {
+  event.stopPropagation()
+  if (!currentServer.value) return
+  emit('queue-item', item, currentServer.value.id)
+}
+
+function handleSettingsClick() {
+  router.push('/debug/api-dashboard')
   close()
 }
 </script>
@@ -46,8 +160,8 @@ function handleServerClick(server: MediaServerSummary) {
     <!-- Drawer -->
     <Transition name="drawer">
       <aside v-if="modelValue" class="server-drawer">
-        <!-- Header -->
-        <header class="drawer-header">
+        <!-- Header - Liste des serveurs -->
+        <header v-if="!isNavigating" class="drawer-header">
           <div class="drawer-title-section">
             <ServerIcon :size="24" />
             <h2 class="drawer-title">Media Servers</h2>
@@ -57,61 +171,161 @@ function handleServerClick(server: MediaServerSummary) {
           </button>
         </header>
 
-        <!-- Liste des servers -->
+        <!-- Header - Navigation dans un serveur -->
+        <header v-else class="drawer-header">
+          <button class="back-btn" @click="goBack" aria-label="Retour aux serveurs">
+            <ChevronLeft :size="20" />
+          </button>
+          <div class="drawer-title-section">
+            <ServerIcon :size="20" />
+            <h2 class="drawer-title small">{{ currentServer?.friendly_name }}</h2>
+          </div>
+          <button class="drawer-close-btn" @click="close" aria-label="Fermer">
+            <X :size="24" />
+          </button>
+        </header>
+
+        <!-- Breadcrumb -->
+        <nav v-if="isNavigating && currentPath.length > 1" class="breadcrumb">
+          <button
+            v-for="(crumb, index) in currentPath"
+            :key="crumb.id"
+            class="breadcrumb-item"
+            :class="{ active: index === currentPath.length - 1 }"
+            @click="handleBreadcrumbClick(index)"
+          >
+            {{ crumb.title }}
+            <ChevronRight v-if="index < currentPath.length - 1" :size="14" />
+          </button>
+        </nav>
+
+        <!-- Contenu -->
         <div class="drawer-content">
-          <!-- Servers online -->
-          <section v-if="onlineServers.length > 0" class="server-section">
-            <h3 class="section-title">Disponibles ({{ onlineServers.length }})</h3>
-            <ul class="server-list">
+          <!-- Liste des serveurs -->
+          <div v-if="!isNavigating">
+            <!-- Servers online -->
+            <section v-if="onlineServers.length > 0" class="server-section">
+              <h3 class="section-title">Disponibles ({{ onlineServers.length }})</h3>
+              <ul class="server-list">
+                <li
+                  v-for="server in onlineServers"
+                  :key="server.id"
+                  class="server-item online"
+                  @click="handleServerClick(server)"
+                >
+                  <div class="server-icon">
+                    <ServerIcon :size="20" />
+                  </div>
+                  <div class="server-info">
+                    <p class="server-name">{{ server.friendly_name }}</p>
+                    <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                  </div>
+                  <div class="server-status">
+                    <Circle :size="8" fill="currentColor" />
+                  </div>
+                </li>
+              </ul>
+            </section>
+
+            <!-- Servers offline -->
+            <section v-if="offlineServers.length > 0" class="server-section">
+              <h3 class="section-title">Hors ligne ({{ offlineServers.length }})</h3>
+              <ul class="server-list">
+                <li
+                  v-for="server in offlineServers"
+                  :key="server.id"
+                  class="server-item offline"
+                >
+                  <div class="server-icon">
+                    <ServerIcon :size="20" />
+                  </div>
+                  <div class="server-info">
+                    <p class="server-name">{{ server.friendly_name }}</p>
+                    <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                  </div>
+                  <div class="server-status">
+                    <Circle :size="8" fill="currentColor" />
+                  </div>
+                </li>
+              </ul>
+            </section>
+
+            <!-- Aucun server -->
+            <div v-if="allServers.length === 0" class="empty-servers">
+              <ServerIcon :size="48" />
+              <p>Aucun serveur multimédia détecté</p>
+            </div>
+          </div>
+
+          <!-- Navigation dans un serveur -->
+          <div v-else>
+            <!-- Loading -->
+            <div v-if="isLoading" class="loading-state">
+              <div class="spinner"></div>
+              <p>Chargement...</p>
+            </div>
+
+            <!-- Contenu du serveur -->
+            <ul v-else-if="browseData" class="content-list">
               <li
-                v-for="server in onlineServers"
-                :key="server.id"
-                class="server-item online"
-                @click="handleServerClick(server)"
+                v-for="item in browseData.entries"
+                :key="item.id"
+                class="content-item"
+                :class="{ navigable: item.is_container && isNavigable(item) }"
+                @click="handleItemClick(item)"
               >
-                <div class="server-icon">
-                  <ServerIcon :size="20" />
+                <div class="content-icon">
+                  <Folder v-if="item.is_container" :size="20" />
+                  <Music v-else :size="20" />
                 </div>
-                <div class="server-info">
-                  <p class="server-name">{{ server.friendly_name }}</p>
-                  <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
+                <div class="content-info">
+                  <p class="content-title">{{ item.title }}</p>
+                  <p v-if="item.artist" class="content-subtitle">{{ item.artist }}</p>
+                  <p v-else-if="item.album" class="content-subtitle">{{ item.album }}</p>
                 </div>
-                <div class="server-status">
-                  <Circle :size="8" fill="currentColor" />
+
+                <!-- Actions pour items jouables -->
+                <div v-if="isPlayable(item)" class="content-actions">
+                  <button
+                    class="action-btn play-btn"
+                    :title="item.is_container ? 'Jouer tout' : 'Jouer'"
+                    @click="handlePlayItem($event, item)"
+                  >
+                    <Play :size="16" />
+                  </button>
+                  <button
+                    class="action-btn queue-btn"
+                    :title="item.is_container ? 'Ajouter tout à la queue' : 'Ajouter à la queue'"
+                    @click="handleQueueItem($event, item)"
+                  >
+                    <Plus :size="16" />
+                  </button>
                 </div>
+
+                <!-- Chevron pour containers navigables (même si jouables) -->
+                <ChevronRight
+                  v-if="item.is_container && isNavigable(item)"
+                  :size="16"
+                  class="content-chevron"
+                />
               </li>
             </ul>
-          </section>
 
-          <!-- Servers offline -->
-          <section v-if="offlineServers.length > 0" class="server-section">
-            <h3 class="section-title">Hors ligne ({{ offlineServers.length }})</h3>
-            <ul class="server-list">
-              <li
-                v-for="server in offlineServers"
-                :key="server.id"
-                class="server-item offline"
-              >
-                <div class="server-icon">
-                  <ServerIcon :size="20" />
-                </div>
-                <div class="server-info">
-                  <p class="server-name">{{ server.friendly_name }}</p>
-                  <p v-if="server.model_name" class="server-model">{{ server.model_name }}</p>
-                </div>
-                <div class="server-status">
-                  <Circle :size="8" fill="currentColor" />
-                </div>
-              </li>
-            </ul>
-          </section>
-
-          <!-- Aucun server -->
-          <div v-if="allServers.length === 0" class="empty-servers">
-            <ServerIcon :size="48" />
-            <p>Aucun serveur multimédia détecté</p>
+            <!-- Vide -->
+            <div v-else class="empty-servers">
+              <Folder :size="48" />
+              <p>Dossier vide</p>
+            </div>
           </div>
         </div>
+
+        <!-- Footer avec bouton settings -->
+        <footer class="drawer-footer">
+          <button class="settings-btn" @click="handleSettingsClick" title="Ouvrir le menu Debug">
+            <Settings :size="20" />
+            <span>Debug & Config</span>
+          </button>
+        </footer>
       </aside>
     </Transition>
   </div>
@@ -121,22 +335,27 @@ function handleServerClick(server: MediaServerSummary) {
 .drawer-backdrop {
   position: fixed;
   top: 0;
-  left: 0;
+  left: 50vw; /* Commence après le drawer (desktop: 50vw) */
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.35); /* Moins sombre */
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   z-index: 200;
 }
 
+@media (max-width: 768px) and (orientation: portrait) {
+  .drawer-backdrop {
+    left: 80vw; /* Mobile portrait: 80vw */
+  }
+}
+
 .server-drawer {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
-  width: 320px;
-  max-width: 80vw;
+  width: 50vw; /* Desktop/landscape: 50% de l'écran */
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(30px) saturate(180%);
   -webkit-backdrop-filter: blur(30px) saturate(180%);
@@ -160,6 +379,7 @@ function handleServerClick(server: MediaServerSummary) {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--spacing-sm);
   padding: var(--spacing-lg);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   flex-shrink: 0;
@@ -170,12 +390,42 @@ function handleServerClick(server: MediaServerSummary) {
   align-items: center;
   gap: var(--spacing-sm);
   color: var(--color-text);
+  flex: 1;
+  min-width: 0;
 }
 
 .drawer-title {
   font-size: var(--text-xl);
   font-weight: 700;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.drawer-title.small {
+  font-size: var(--text-base);
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+}
+
+.back-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
 }
 
 .drawer-close-btn {
@@ -184,6 +434,7 @@ function handleServerClick(server: MediaServerSummary) {
   justify-content: center;
   width: 40px;
   height: 40px;
+  flex-shrink: 0;
   padding: 0;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
@@ -202,6 +453,47 @@ function handleServerClick(server: MediaServerSummary) {
   transform: scale(0.95);
 }
 
+/* Breadcrumb */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.breadcrumb-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text);
+}
+
+.breadcrumb-item.active {
+  color: var(--color-text);
+  font-weight: 600;
+  cursor: default;
+}
+
+.breadcrumb-item.active:hover {
+  background: transparent;
+}
+
 /* Content */
 .drawer-content {
   flex: 1;
@@ -307,6 +599,168 @@ function handleServerClick(server: MediaServerSummary) {
   color: var(--status-offline);
 }
 
+/* Content list */
+.content-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.content-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.content-item.navigable {
+  cursor: pointer;
+}
+
+.content-item.navigable:hover {
+  background: rgba(255, 255, 255, 0.12);
+  transform: translateX(2px);
+}
+
+.content-item.navigable:active {
+  transform: translateX(1px);
+}
+
+.content-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--color-text-secondary);
+}
+
+.content-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.content-title {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content-subtitle {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  margin: 2px 0 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+}
+
+/* Actions pour items jouables */
+.content-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  opacity: 1; /* Toujours visible pour le tactile */
+  transition: all 0.2s ease;
+  z-index: 1; /* Au-dessus pour capturer les clicks */
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+  pointer-events: auto; /* S'assurer que les boutons capturent les clicks */
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.action-btn:active {
+  transform: scale(0.95);
+}
+
+.play-btn {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.play-btn:hover {
+  background: var(--color-primary);
+  color: white;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+}
+
+.queue-btn {
+  color: var(--color-text-secondary);
+}
+
+.queue-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  color: var(--color-text);
+}
+
+/* Loading state */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
+  color: var(--color-text-secondary);
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-state p {
+  margin: 0;
+  font-size: var(--text-sm);
+}
+
 .empty-servers {
   display: flex;
   flex-direction: column;
@@ -323,10 +777,51 @@ function handleServerClick(server: MediaServerSummary) {
   font-size: var(--text-base);
 }
 
+/* Footer */
+.drawer-footer {
+  flex-shrink: 0;
+  padding: var(--spacing-md);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.settings-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  padding: var(--spacing-md);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--color-text);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.settings-btn:active {
+  transform: translateY(0);
+}
+
 /* Animations */
-.backdrop-enter-active,
+.backdrop-enter-active {
+  transition: opacity 0.2s ease;
+  transition-delay: 0.15s; /* Attend que le drawer soit à moitié visible */
+}
+
 .backdrop-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity 0.2s ease;
+  /* Pas de delay au leave - disparaît en même temps que le drawer */
 }
 
 .backdrop-enter-from,
@@ -345,28 +840,33 @@ function handleServerClick(server: MediaServerSummary) {
 }
 
 /* Scrollbar styling */
-.drawer-content::-webkit-scrollbar {
+.drawer-content::-webkit-scrollbar,
+.breadcrumb::-webkit-scrollbar {
   width: 6px;
+  height: 6px;
 }
 
-.drawer-content::-webkit-scrollbar-track {
+.drawer-content::-webkit-scrollbar-track,
+.breadcrumb::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
 }
 
-.drawer-content::-webkit-scrollbar-thumb {
+.drawer-content::-webkit-scrollbar-thumb,
+.breadcrumb::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
 }
 
-.drawer-content::-webkit-scrollbar-thumb:hover {
+.drawer-content::-webkit-scrollbar-thumb:hover,
+.breadcrumb::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }
 
-/* Mobile responsive */
-@media (max-width: 768px) {
+/* Mobile responsive - portrait */
+@media (max-width: 768px) and (orientation: portrait) {
   .server-drawer {
-    width: 280px;
+    width: 80vw; /* Mobile portrait: 80% de l'écran */
   }
 
   .drawer-header {