Nouvelle UI du controle point

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

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { useTabs } from '@/composables/useTabs'
+import { useSwipe } from '@vueuse/core'
+
+const { tabs, activeTabId, switchTab, closeTab, nextTab, previousTab } = useTabs()
+
+const tabBarRef = ref<HTMLElement | null>(null)
+const scrollContainerRef = ref<HTMLElement | null>(null)
+
+// Gestion du swipe pour changer d'onglet
+useSwipe(tabBarRef, {
+  threshold: 50,
+  onSwipeEnd(_e: TouchEvent, swipeDirection: string) {
+    if (swipeDirection === 'left') {
+      nextTab()
+    } else if (swipeDirection === 'right') {
+      previousTab()
+    }
+  },
+})
+
+// Scroll vers l'onglet actif
+function scrollToActiveTab() {
+  if (!scrollContainerRef.value) return
+
+  const activeTabElement = scrollContainerRef.value.querySelector('.tab-item.active')
+  if (activeTabElement) {
+    activeTabElement.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center',
+    })
+  }
+}
+
+// Scroll vers l'onglet actif quand il change
+watch(() => activeTabId.value, () => {
+  scrollToActiveTab()
+})
+
+// Gestion des boutons de scroll
+const showLeftScroll = ref(false)
+const showRightScroll = ref(false)
+
+function updateScrollButtons() {
+  if (!scrollContainerRef.value) return
+
+  const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.value
+  showLeftScroll.value = scrollLeft > 10
+  showRightScroll.value = scrollLeft < scrollWidth - clientWidth - 10
+}
+
+function scrollLeft() {
+  if (!scrollContainerRef.value) return
+  scrollContainerRef.value.scrollBy({ left: -200, behavior: 'smooth' })
+}
+
+function scrollRight() {
+  if (!scrollContainerRef.value) return
+  scrollContainerRef.value.scrollBy({ left: 200, behavior: 'smooth' })
+}
+
+onMounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.addEventListener('scroll', updateScrollButtons)
+    updateScrollButtons()
+  }
+})
+
+onUnmounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.removeEventListener('scroll', updateScrollButtons)
+  }
+})
+
+// Gestion du clic sur un onglet
+function handleTabClick(tabId: string) {
+  switchTab(tabId)
+}
+
+// Gestion du clic sur le bouton fermer
+function handleCloseClick(event: Event, tabId: string) {
+  event.stopPropagation()
+  closeTab(tabId)
+}
+</script>
+
+<template>
+  <div ref="tabBarRef" class="bottom-tab-bar">
+    <!-- Bouton scroll gauche -->
+    <button
+      v-if="showLeftScroll"
+      class="scroll-button scroll-left"
+      @click="scrollLeft"
+      aria-label="Scroll left"
+    >
+      <ChevronLeft :size="20" />
+    </button>
+
+    <!-- Container avec scroll horizontal -->
+    <div ref="scrollContainerRef" class="tabs-scroll-container">
+      <div class="tabs-container">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="tab-item"
+          :class="{ active: tab.id === activeTabId }"
+          @click="handleTabClick(tab.id)"
+          :aria-label="`Switch to ${tab.title} tab`"
+          :aria-current="tab.id === activeTabId ? 'page' : undefined"
+        >
+          <!-- Icône -->
+          <component :is="tab.icon" class="tab-icon" :size="24" />
+
+          <!-- Titre -->
+          <span class="tab-title">{{ tab.title }}</span>
+
+          <!-- Bouton fermer (seulement pour les onglets fermables) -->
+          <button
+            v-if="tab.closeable"
+            class="tab-close"
+            @click="(e) => handleCloseClick(e, tab.id)"
+            :aria-label="`Close ${tab.title} tab`"
+          >
+            <X :size="16" />
+          </button>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bouton scroll droite -->
+    <button
+      v-if="showRightScroll"
+      class="scroll-button scroll-right"
+      @click="scrollRight"
+      aria-label="Scroll right"
+    >
+      <ChevronRight :size="20" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.bottom-tab-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 64px;
+  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);
+  z-index: 100;
+  overflow: hidden;
+}
+
+/* Support pour thème sombre */
+@media (prefers-color-scheme: dark) {
+  .bottom-tab-bar {
+    background: rgba(0, 0, 0, 0.25);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
+
+.tabs-scroll-container {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.tabs-scroll-container::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+.tabs-container {
+  display: flex;
+  gap: 4px;
+  padding: 0 8px;
+  min-width: 100%;
+}
+
+.tab-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 100px;
+  max-width: 200px;
+  height: 64px;
+  padding: 8px 16px;
+  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-family: inherit;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tab-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text);
+}
+
+.tab-item.active {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom-color: var(--color-primary);
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tab-item:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .tab-item.active {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+.tab-icon {
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+.tab-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.tab-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text-secondary);
+}
+
+.tab-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+  color: var(--color-text);
+  transform: scale(1.1);
+}
+
+.tab-close:active {
+  transform: scale(0.95);
+}
+
+/* Boutons de scroll */
+.scroll-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--color-text);
+}
+
+.scroll-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.scroll-button:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.scroll-left {
+  left: 8px;
+}
+
+.scroll-right {
+  right: 8px;
+}
+
+/* Responsive mobile */
+@media (max-width: 768px) {
+  .tab-item {
+    min-width: 80px;
+    max-width: 150px;
+    padding: 8px 12px;
+    gap: 6px;
+  }
+
+  .tab-title {
+    font-size: 12px;
+  }
+
+  .tab-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .tab-close {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+/* Animation d'entrée */
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.bottom-tab-bar {
+  animation: slideInUp 0.3s ease-out;
+}
+
+/* Effet de swipe visuel */
+.tabs-scroll-container {
+  touch-action: pan-x;
+}
+</style>

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

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRenderers } from '@/composables/useRenderers'
+import { useMediaServers } from '@/composables/useMediaServers'
+import { useTabs } from '@/composables/useTabs'
+import RendererCard from '@/components/pmocontrol/RendererCard.vue'
+import MediaServerCard from '@/components/pmocontrol/MediaServerCard.vue'
+import { Radio, Server } from 'lucide-vue-next'
+
+const {
+  allRenderers: renderers,
+  onlineRenderers,
+  getStateById,
+  fetchRenderers,
+  fetchRendererSnapshot,
+} = useRenderers()
+
+const { allServers: mediaServers, onlineServers, fetchServers } = useMediaServers()
+
+const { openRenderer, openServer } = useTabs()
+
+// Charger les données au montage
+onMounted(async () => {
+  await fetchRenderers()
+  await fetchServers()
+
+  // Charger les snapshots de tous les renderers
+  for (const renderer of renderers.value) {
+    fetchRendererSnapshot(renderer.id, { force: true })
+  }
+})
+
+// Gestion des clics sur les cartes
+function handleRendererClick(rendererId: string) {
+  const renderer = renderers.value.find((r) => r.id === rendererId)
+  if (renderer) {
+    openRenderer(renderer)
+  }
+}
+
+function handleServerClick(serverId: string) {
+  const server = mediaServers.value.find((s) => s.id === serverId)
+  if (server) {
+    openServer(server)
+  }
+}
+</script>
+
+<template>
+  <div class="home-tab-content">
+    <!-- Header avec statistiques -->
+    <header class="dashboard-header">
+      <h1 class="dashboard-title">PMOControl Dashboard</h1>
+      <div class="dashboard-stats">
+        <div class="stat">
+          <Radio :size="20" />
+          <span>{{ onlineRenderers.length }} / {{ renderers.length }} renderers</span>
+        </div>
+        <div class="stat">
+          <Server :size="20" />
+          <span>{{ onlineServers.length }} / {{ mediaServers.length }} serveurs</span>
+        </div>
+      </div>
+    </header>
+
+    <!-- Section Renderers -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <Radio :size="24" />
+          <span>Renderers Audio</span>
+        </h2>
+      </div>
+
+      <div v-if="renderers.length" class="renderers-grid">
+        <div
+          v-for="renderer in renderers"
+          :key="renderer.id"
+          @click="handleRendererClick(renderer.id)"
+          class="renderer-card-wrapper"
+        >
+          <RendererCard :renderer="renderer" :state="getStateById(renderer.id) ?? null" />
+        </div>
+      </div>
+
+      <div v-else class="empty-state">
+        <p>Aucun renderer découvert</p>
+        <button class="btn btn-secondary" @click="fetchRenderers(true)">Actualiser</button>
+      </div>
+    </section>
+
+    <!-- Section Media Servers -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <Server :size="24" />
+          <span>Serveurs de Médias</span>
+        </h2>
+      </div>
+
+      <div v-if="mediaServers.length" class="servers-grid">
+        <div
+          v-for="server in mediaServers"
+          :key="server.id"
+          @click="handleServerClick(server.id)"
+          class="server-card-wrapper"
+        >
+          <MediaServerCard :server="server" />
+        </div>
+      </div>
+
+      <div v-else class="empty-state">
+        <p>Aucun serveur de médias découvert</p>
+        <button class="btn btn-secondary" @click="fetchServers(true)">Actualiser</button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.home-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  padding: var(--spacing-lg);
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Header */
+.dashboard-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.dashboard-title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.dashboard-stats {
+  display: flex;
+  gap: var(--spacing-lg);
+  flex-wrap: wrap;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.stat svg {
+  color: var(--color-primary);
+}
+
+/* Sections */
+.dashboard-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.section-title svg {
+  color: var(--color-primary);
+}
+
+/* Grids */
+.renderers-grid,
+.servers-grid {
+  display: grid;
+  gap: var(--spacing-lg);
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+/* Wrappers pour les cartes cliquables */
+.renderer-card-wrapper,
+.server-card-wrapper {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.renderer-card-wrapper:hover,
+.server-card-wrapper:hover {
+  transform: translateY(-2px);
+}
+
+.renderer-card-wrapper:active,
+.server-card-wrapper:active {
+  transform: translateY(0);
+}
+
+/* Empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xl);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: var(--radius-lg);
+  border: 2px dashed rgba(255, 255, 255, 0.1);
+}
+
+.empty-state p {
+  font-size: var(--text-base);
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+/* Responsive pour 800x600 landscape */
+@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
+  .home-tab-content {
+    padding: var(--spacing-md);
+    gap: var(--spacing-lg);
+  }
+
+  .dashboard-title {
+    font-size: var(--text-2xl);
+  }
+
+  .section-title {
+    font-size: var(--text-xl);
+  }
+
+  .renderers-grid,
+  .servers-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-md);
+  }
+}
+
+/* Responsive mobile portrait */
+@media (max-width: 768px) and (orientation: portrait) {
+  .home-tab-content {
+    padding: var(--spacing-md);
+    gap: var(--spacing-lg);
+  }
+
+  .dashboard-title {
+    font-size: var(--text-2xl);
+  }
+
+  .section-title {
+    font-size: var(--text-xl);
+  }
+
+  .renderers-grid,
+  .servers-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-stats {
+    gap: var(--spacing-sm);
+  }
+
+  .stat {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+}
+
+/* Grid responsive pour très grand écran */
+@media (min-width: 1024px) {
+  .renderers-grid,
+  .servers-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+</style>

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

@@ -0,0 +1,483 @@
+<script setup lang="ts">
+import { ref, computed, toRef, onMounted } from 'vue'
+import { useRenderer } from '@/composables/useRenderers'
+import CurrentTrack from '@/components/pmocontrol/CurrentTrack.vue'
+import TransportControls from '@/components/pmocontrol/TransportControls.vue'
+import VolumeControl from '@/components/pmocontrol/VolumeControl.vue'
+import QueueViewer from '@/components/pmocontrol/QueueViewer.vue'
+import StatusBadge from '@/components/pmocontrol/StatusBadge.vue'
+import { ChevronUp, ChevronDown, Link } from 'lucide-vue-next'
+import { useRenderers } from '@/composables/useRenderers'
+import { useUIStore } from '@/stores/ui'
+
+const props = defineProps<{
+  rendererId: string
+}>()
+
+const { renderer, state, queue, binding, refresh } = useRenderer(toRef(props, 'rendererId'))
+const { detachPlaylist } = useRenderers()
+const uiStore = useUIStore()
+
+// État du drawer queue sur mobile
+const queueDrawerOpen = ref(false)
+
+function toggleQueueDrawer() {
+  queueDrawerOpen.value = !queueDrawerOpen.value
+}
+
+// Charger les données au montage
+onMounted(async () => {
+  await refresh()
+})
+
+// État du renderer pour affichage
+const isOnline = computed(() => renderer.value?.online ?? false)
+const transportState = computed(() => state.value?.transport_state ?? 'STOPPED')
+const hasPlaylistBinding = computed(() => !!binding.value)
+
+// Détacher la playlist
+async function handleDetachPlaylist() {
+  try {
+    await detachPlaylist(props.rendererId)
+    uiStore.notifySuccess('Playlist détachée')
+  } catch (error) {
+    uiStore.notifyError(`Erreur: ${error instanceof Error ? error.message : 'Erreur inconnue'}`)
+  }
+}
+</script>
+
+<template>
+  <div class="renderer-tab-content">
+    <!-- Header avec nom du renderer et état -->
+    <header class="renderer-header">
+      <div class="header-info">
+        <h1 class="renderer-name">{{ renderer?.friendly_name || 'Renderer' }}</h1>
+        <p v-if="renderer?.model_name" class="renderer-model">{{ renderer.model_name }}</p>
+      </div>
+      <div class="header-badges">
+        <StatusBadge v-if="state" :status="transportState" />
+        <span v-if="renderer?.protocol" class="protocol-badge">
+          {{ renderer.protocol.toUpperCase() }}
+        </span>
+
+        <!-- Badge playlist binding avec tooltip -->
+        <div v-if="hasPlaylistBinding" class="playlist-badge" :title="`Playlist liée\nServeur: ${binding?.server_id}\nContainer: ${binding?.container_id}`">
+          <button class="playlist-badge-btn" @click="handleDetachPlaylist" title="Cliquer pour détacher">
+            <Link :size="16" />
+          </button>
+        </div>
+
+        <span v-if="!isOnline" class="offline-badge">OFFLINE</span>
+      </div>
+    </header>
+
+    <!-- Layout principal -->
+    <div class="renderer-layout" :class="{ 'queue-open': queueDrawerOpen }">
+      <!-- Colonne gauche: Contrôles -->
+      <div class="controls-column">
+        <!-- Pochette + infos track -->
+        <CurrentTrack v-if="state" :renderer-id="rendererId" class="current-track-section" />
+
+        <!-- Contrôles de transport -->
+        <div v-if="state" class="controls-section">
+          <TransportControls :renderer-id="rendererId" />
+        </div>
+
+        <!-- Contrôle de volume -->
+        <div v-if="state" class="volume-section">
+          <VolumeControl :renderer-id="rendererId" />
+        </div>
+
+        <!-- Message si offline -->
+        <div v-if="!isOnline" class="offline-message">
+          <p>Ce renderer est actuellement hors ligne</p>
+        </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>
+      </div>
+
+      <!-- Drawer queue (mobile uniquement) -->
+      <div class="queue-drawer" :class="{ open: queueDrawerOpen }">
+        <!-- Toggle button -->
+        <button class="queue-drawer-toggle" @click="toggleQueueDrawer">
+          <ChevronUp v-if="queueDrawerOpen" :size="24" />
+          <ChevronDown v-else :size="24" />
+          <span>File d'attente ({{ queue?.items.length || 0 }})</span>
+        </button>
+
+        <!-- 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>
+        </div>
+      </div>
+
+      <!-- Backdrop pour fermer le drawer -->
+      <div
+        v-if="queueDrawerOpen"
+        class="queue-drawer-backdrop"
+        @click="queueDrawerOpen = false"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.renderer-tab-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Header */
+.renderer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.header-info {
+  flex: 1;
+}
+
+.renderer-name {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.renderer-model {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 4px 0 0 0;
+}
+
+.header-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.protocol-badge,
+.offline-badge {
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.protocol-badge {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.offline-badge {
+  background: var(--status-offline);
+  color: white;
+}
+
+/* Badge playlist binding compact */
+.playlist-badge {
+  position: relative;
+  display: inline-flex;
+}
+
+.playlist-badge-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: rgba(102, 126, 234, 0.2);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(102, 126, 234, 0.4);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: rgba(102, 126, 234, 1);
+}
+
+.playlist-badge-btn:hover {
+  background: rgba(102, 126, 234, 0.3);
+  border-color: rgba(102, 126, 234, 0.6);
+  transform: scale(1.1);
+}
+
+.playlist-badge-btn:active {
+  transform: scale(1.0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .playlist-badge-btn {
+    background: rgba(102, 126, 234, 0.15);
+    border-color: rgba(102, 126, 234, 0.3);
+  }
+
+  .playlist-badge-btn:hover {
+    background: rgba(102, 126, 234, 0.25);
+    border-color: rgba(102, 126, 234, 0.5);
+  }
+}
+
+/* Layout principal - 800x600 landscape (2 colonnes) */
+.renderer-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-lg);
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Colonne gauche - Contrôles */
+.controls-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  overflow-y: auto;
+  padding-right: var(--spacing-sm);
+}
+
+.current-track-section,
+.controls-section,
+.volume-section,
+.playlist-section {
+  flex-shrink: 0;
+}
+
+.offline-message {
+  padding: var(--spacing-lg);
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-md);
+  text-align: center;
+  color: var(--status-offline);
+}
+
+/* Colonne droite - Queue */
+.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 {
+  display: none;
+}
+
+/* Responsive - Mobile portrait */
+@media (max-width: 768px) and (orientation: portrait) {
+  .renderer-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+  }
+
+  .header-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .renderer-layout {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    padding-bottom: 0;
+  }
+
+  /* Queue column cachée sur mobile */
+  .queue-column {
+    display: none;
+  }
+
+  /* Queue drawer visible sur mobile */
+  .queue-drawer {
+    display: block;
+    position: fixed;
+    bottom: 64px; /* Hauteur de la tab bar */
+    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);
+    transform: translateY(calc(100% - 56px));
+    transition: transform 0.3s ease;
+    z-index: 90;
+    max-height: 70vh;
+  }
+
+  .queue-drawer.open {
+    transform: translateY(0);
+  }
+
+  .queue-drawer-toggle {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text);
+    font-size: var(--text-base);
+    font-weight: 600;
+    font-family: inherit;
+  }
+
+  .queue-drawer-content {
+    max-height: calc(70vh - 56px);
+    overflow-y: auto;
+    padding: var(--spacing-md);
+  }
+
+  .queue-drawer-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 64px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 89;
+  }
+
+  .controls-column {
+    padding-right: 0;
+  }
+}
+
+/* Responsive - 800x600 landscape */
+@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
+  .renderer-layout {
+    grid-template-columns: 280px 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+  }
+
+  .renderer-header {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .renderer-name {
+    font-size: var(--text-xl);
+  }
+
+  .queue-title {
+    font-size: var(--text-lg);
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1200px) {
+  .renderer-layout {
+    grid-template-columns: 350px 1fr;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
+
+/* Scrollbar styling */
+.controls-column::-webkit-scrollbar,
+.queue-viewer::-webkit-scrollbar {
+  width: 6px;
+}
+
+.controls-column::-webkit-scrollbar-track,
+.queue-viewer::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+.controls-column::-webkit-scrollbar-thumb,
+.queue-viewer::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.controls-column::-webkit-scrollbar-thumb:hover,
+.queue-viewer::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+</style>

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

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useMediaServers } from '@/composables/useMediaServers'
+import MediaBrowser from '@/components/pmocontrol/MediaBrowser.vue'
+
+const props = defineProps<{
+  serverId: string
+}>()
+
+const { getServerById, fetchServers } = useMediaServers()
+
+// Container ID actuel (commence à la racine '0')
+const containerId = ref('0')
+
+const server = computed(() => getServerById(props.serverId))
+const isOnline = computed(() => server.value?.online ?? false)
+
+// Gestion de la navigation dans les containers
+function handleNavigate(newContainerId: string) {
+  containerId.value = newContainerId
+}
+
+onMounted(async () => {
+  await fetchServers()
+})
+</script>
+
+<template>
+  <div class="server-tab-content">
+    <!-- Header avec nom du serveur et état -->
+    <header class="server-header">
+      <div class="header-info">
+        <h1 class="server-name">{{ server?.friendly_name || 'Media Server' }}</h1>
+        <p v-if="server?.model_name" class="server-model">{{ server.model_name }}</p>
+      </div>
+      <div class="header-badges">
+        <span v-if="isOnline" class="online-badge">ONLINE</span>
+        <span v-else class="offline-badge">OFFLINE</span>
+      </div>
+    </header>
+
+    <!-- Browser de médias -->
+    <div class="browser-section">
+      <MediaBrowser
+        v-if="isOnline"
+        :server-id="serverId"
+        :container-id="containerId"
+        @navigate="handleNavigate"
+      />
+
+      <div v-else class="offline-message">
+        <p>Ce serveur est actuellement hors ligne</p>
+        <button class="btn btn-secondary" @click="fetchServers(true)">Actualiser</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.server-tab-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Header */
+.server-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.header-info {
+  flex: 1;
+}
+
+.server-name {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.server-model {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 4px 0 0 0;
+}
+
+.header-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.online-badge,
+.offline-badge {
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.online-badge {
+  background: var(--status-playing);
+  color: white;
+}
+
+.offline-badge {
+  background: var(--status-offline);
+  color: white;
+}
+
+/* Section browser */
+.browser-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: var(--spacing-lg);
+}
+
+.offline-message {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xl);
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius-lg);
+  text-align: center;
+}
+
+.offline-message p {
+  color: var(--status-offline);
+  font-size: var(--text-lg);
+  margin: 0;
+}
+
+/* Responsive - Mobile portrait */
+@media (max-width: 768px) and (orientation: portrait) {
+  .server-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+  }
+
+  .header-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .browser-section {
+    padding: var(--spacing-md);
+  }
+}
+
+/* Responsive - 800x600 landscape */
+@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) {
+  .server-header {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+
+  .server-name {
+    font-size: var(--text-xl);
+  }
+
+  .browser-section {
+    padding: var(--spacing-md);
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1200px) {
+  .browser-section {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+</style>