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

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 {