Plus de dashboard.

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

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from 'vue'
-import { X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { X, ChevronLeft, ChevronRight, Server } from 'lucide-vue-next'
 import { useTabs } from '@/composables/useTabs'
 import { useSwipe } from '@vueuse/core'
 
-const { tabs, activeTabId, switchTab, closeTab, nextTab, previousTab } = useTabs()
+defineProps<{
+  onlineServersCount?: number
+}>()
+
+const emit = defineEmits<{
+  'open-drawer': []
+}>()
+
+const { tabs, activeTabId, switchTab, closeTab, nextTab, previousTab, compactMode } = useTabs()
 
 const tabBarRef = ref<HTMLElement | null>(null)
 const scrollContainerRef = ref<HTMLElement | null>(null)
@@ -85,10 +93,26 @@ function handleCloseClick(event: Event, tabId: string) {
   event.stopPropagation()
   closeTab(tabId)
 }
+
+// Gestion du clic sur le bouton server drawer
+function handleServerDrawerClick() {
+  emit('open-drawer')
+}
 </script>
 
 <template>
   <div ref="tabBarRef" class="bottom-tab-bar">
+    <!-- Bouton pour ouvrir le drawer des servers -->
+    <button
+      class="server-drawer-button"
+      @click="handleServerDrawerClick"
+      :aria-label="`Open media servers (${onlineServersCount || 0} online)`"
+      :title="`Media Servers (${onlineServersCount || 0} online)`"
+    >
+      <Server :size="24" />
+      <span v-if="onlineServersCount && onlineServersCount > 0" class="server-badge">{{ onlineServersCount }}</span>
+    </button>
+
     <!-- Bouton scroll gauche -->
     <button
       v-if="showLeftScroll"
@@ -106,23 +130,27 @@ function handleCloseClick(event: Event, tabId: string) {
           v-for="tab in tabs"
           :key="tab.id"
           class="tab-item"
-          :class="{ active: tab.id === activeTabId }"
+          :class="{
+            active: tab.id === activeTabId,
+            compact: compactMode
+          }"
           @click="handleTabClick(tab.id)"
-          :aria-label="`Switch to ${tab.title} tab`"
+          :title="tab.fullTitle"
+          :aria-label="`Switch to ${tab.fullTitle} tab`"
           :aria-current="tab.id === activeTabId ? 'page' : undefined"
         >
           <!-- Icône -->
-          <component :is="tab.icon" class="tab-icon" :size="24" />
+          <component :is="tab.icon" class="tab-icon" :size="compactMode ? 28 : 24" />
 
-          <!-- Titre -->
+          <!-- Titre (masqué en mode compact) -->
-          <span class="tab-title">{{ tab.title }}</span>
+          <span v-if="!compactMode" class="tab-title">{{ tab.title }}</span>
 
-          <!-- Bouton fermer (seulement pour les onglets fermables) -->
+          <!-- Bouton fermer (seulement pour les onglets fermables, masqué en mode compact) -->
           <button
-            v-if="tab.closeable"
+            v-if="tab.closeable && !compactMode"
             class="tab-close"
             @click="(e) => handleCloseClick(e, tab.id)"
-            :aria-label="`Close ${tab.title} tab`"
+            :aria-label="`Close ${tab.fullTitle} tab`"
           >
             <X :size="16" />
           </button>
@@ -205,6 +233,14 @@ function handleCloseClick(event: Event, tabId: string) {
   flex-shrink: 0;
 }
 
+/* Mode compact: icônes seulement */
+.tab-item.compact {
+  min-width: 60px;
+  max-width: 60px;
+  padding: 8px;
+  justify-content: center;
+}
+
 .tab-item:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--color-text);
@@ -350,4 +386,64 @@ function handleCloseClick(event: Event, tabId: string) {
 .tabs-scroll-container {
   touch-action: pan-x;
 }
+
+/* Bouton server drawer */
+.server-drawer-button {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  margin: 0 8px;
+  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.3s ease;
+  color: var(--color-text);
+}
+
+.server-drawer-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.server-drawer-button:active {
+  transform: scale(0.95);
+}
+
+@media (prefers-color-scheme: dark) {
+  .server-drawer-button {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .server-drawer-button:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+/* Badge pour le nombre de servers online */
+.server-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  background: rgba(102, 126, 234, 0.9);
+  border: 2px solid var(--color-bg);
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
 </style>

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

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { RadioTower, RefreshCw } from 'lucide-vue-next'
+import { useRenderers } from '@/composables/useRenderers'
+import { ref } from 'vue'
+
+const { fetchRenderers } = useRenderers()
+const isRefreshing = ref(false)
+
+async function handleRefresh() {
+  isRefreshing.value = true
+  try {
+    await fetchRenderers(true) // Force refresh
+  } finally {
+    // Petit délai pour montrer l'animation
+    setTimeout(() => {
+      isRefreshing.value = false
+    }, 500)
+  }
+}
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="empty-content">
+      <!-- Icône -->
+      <div class="empty-icon">
+        <RadioTower :size="80" />
+      </div>
+
+      <!-- Message -->
+      <h2 class="empty-title">Aucun renderer détecté</h2>
+      <p class="empty-description">
+        Vérifiez que vos renderers (Chromecast, UPnP, OpenHome) sont allumés et connectés au réseau.
+      </p>
+
+      <!-- Bouton refresh -->
+      <button
+        class="btn-refresh"
+        :class="{ refreshing: isRefreshing }"
+        @click="handleRefresh"
+        :disabled="isRefreshing"
+      >
+        <RefreshCw :size="20" :class="{ spin: isRefreshing }" />
+        <span>{{ isRefreshing ? 'Actualisation...' : 'Actualiser' }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-xl);
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-lg);
+  max-width: 500px;
+  padding: var(--spacing-2xl);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+  text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  .empty-content {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.empty-title {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.empty-description {
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+  max-width: 400px;
+}
+
+.btn-refresh {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: 12px 24px;
+  margin-top: var(--spacing-md);
+  font-size: var(--text-base);
+  font-weight: 600;
+  font-family: inherit;
+  color: white;
+  background: rgba(102, 126, 234, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(102, 126, 234, 0.4);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.btn-refresh:hover:not(:disabled) {
+  background: rgba(102, 126, 234, 1);
+  border-color: rgba(102, 126, 234, 0.6);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+}
+
+.btn-refresh:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-refresh:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.btn-refresh .spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Responsive mobile */
+@media (max-width: 768px) {
+  .empty-state {
+    padding: var(--spacing-lg);
+  }
+
+  .empty-content {
+    padding: var(--spacing-xl);
+  }
+
+  .empty-icon {
+    width: 100px;
+    height: 100px;
+  }
+
+  .empty-icon svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  .empty-title {
+    font-size: var(--text-xl);
+  }
+
+  .empty-description {
+    font-size: var(--text-sm);
+  }
+}
+
+/* Fallback pour navigateurs sans backdrop-filter */
+@supports not (backdrop-filter: blur(20px)) {
+  .empty-content {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .empty-content {
+      background: rgba(20, 20, 30, 0.95);
+    }
+  }
+}
+</style>

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

@@ -1,304 +0,0 @@
-<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/ServerDrawer.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { X, Server as ServerIcon, Circle } from 'lucide-vue-next'
+import { useMediaServers } from '@/composables/useMediaServers'
+import type { MediaServerSummary } from '@/services/pmocontrol/types'
+
+const props = defineProps<{
+  modelValue: boolean // v-model pour contrôler l'ouverture
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'server-selected': [server: MediaServerSummary]
+}>()
+
+const { allServers, fetchServers } = useMediaServers()
+
+// Rafraîchir la liste quand le drawer s'ouvre
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    fetchServers()
+  }
+})
+
+const onlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => s.online))
+const offlineServers = computed(() => allServers.value.filter((s: MediaServerSummary) => !s.online))
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function handleServerClick(server: MediaServerSummary) {
+  if (!server.online) return
+  emit('server-selected', server)
+  close()
+}
+</script>
+
+<template>
+  <div>
+    <!-- Backdrop -->
+    <Transition name="backdrop">
+      <div v-if="modelValue" class="drawer-backdrop" @click="close"></div>
+    </Transition>
+
+    <!-- Drawer -->
+    <Transition name="drawer">
+      <aside v-if="modelValue" class="server-drawer">
+        <!-- Header -->
+        <header class="drawer-header">
+          <div class="drawer-title-section">
+            <ServerIcon :size="24" />
+            <h2 class="drawer-title">Media Servers</h2>
+          </div>
+          <button class="drawer-close-btn" @click="close" aria-label="Fermer">
+            <X :size="24" />
+          </button>
+        </header>
+
+        <!-- Liste des servers -->
+        <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">
+              <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>
+      </aside>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.drawer-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 200;
+}
+
+.server-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 320px;
+  max-width: 80vw;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
+  z-index: 201;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .server-drawer {
+    background: rgba(0, 0, 0, 0.4);
+    border-right-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Header */
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.drawer-title-section {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  color: var(--color-text);
+}
+
+.drawer-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  margin: 0;
+}
+
+.drawer-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  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);
+}
+
+.drawer-close-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+.drawer-close-btn:active {
+  transform: scale(0.95);
+}
+
+/* Content */
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+.server-section {
+  margin-bottom: var(--spacing-lg);
+}
+
+.section-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-secondary);
+  margin: 0 0 var(--spacing-sm) 0;
+  padding: 0 var(--spacing-sm);
+}
+
+.server-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.server-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
+}
+
+.server-item.online {
+  cursor: pointer;
+}
+
+.server-item.online:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateX(4px);
+}
+
+.server-item.online:active {
+  transform: translateX(2px);
+}
+
+.server-item.offline {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.server-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--color-text-secondary);
+}
+
+.server-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.server-name {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.server-model {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 2px 0 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.server-status {
+  flex-shrink: 0;
+  color: var(--status-playing);
+}
+
+.server-item.offline .server-status {
+  color: var(--status-offline);
+}
+
+.empty-servers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+.empty-servers p {
+  margin: 0;
+  font-size: var(--text-base);
+}
+
+/* Animations */
+.backdrop-enter-active,
+.backdrop-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.backdrop-enter-from,
+.backdrop-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translateX(-100%);
+}
+
+/* Scrollbar styling */
+.drawer-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.drawer-content::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+}
+
+.drawer-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.drawer-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .server-drawer {
+    width: 280px;
+  }
+
+  .drawer-header {
+    padding: var(--spacing-md);
+  }
+
+  .drawer-title {
+    font-size: var(--text-lg);
+  }
+}
+
+/* Fallback pour navigateurs sans backdrop-filter */
+@supports not (backdrop-filter: blur(30px)) {
+  .server-drawer {
+    background: rgba(255, 255, 255, 0.98);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .server-drawer {
+      background: rgba(20, 20, 30, 0.98);
+    }
+  }
+}
+</style>

pmoapp/webapp/src/composables/useTabs.ts

@@ -1,21 +1,23 @@
 /**
  * Composable pour gérer les onglets dynamiques de l'interface unifiée.
- * Supporte les onglets home, renderer et server avec persistance localStorage.
+ * Onglets renderer auto-générés depuis la liste des renderers online.
+ * Onglets server ouverts manuellement via le drawer (fermables).
  */
 import { reactive, computed, watch, onMounted, type Component } from 'vue'
-import { Home, Radio, Server } from 'lucide-vue-next'
+import { Radio, Server } from 'lucide-vue-next'
 import type { RendererSummary, MediaServerSummary } from '../services/pmocontrol/types'
 
 export interface Tab {
-  id: string // "home", "renderer-{id}", "server-{id}"
+  id: string // "renderer-{id}", "server-{id}"
-  type: 'home' | 'renderer' | 'server'
+  type: 'renderer' | 'server'
   title: string // Nom affiché (tronqué sur mobile)
+  fullTitle: string // Nom complet (pour tooltip)
   icon: Component
   metadata?: {
     rendererId?: string
     serverId?: string
   }
-  closeable: boolean // home tab non fermable
+  closeable: boolean // renderer: false (auto-géré), server: true (manuel)
 }
 
 interface TabsState {
@@ -24,22 +26,15 @@ interface TabsState {
   tabHistory: string[] // Pour back/forward navigation
 }
 
-const MAX_TABS = 8
+const MAX_TABS = 12 // Augmenté car onglets auto-générés
 const STORAGE_KEY = 'pmo-tabs-state'
+const COMPACT_MODE_THRESHOLD = 5 // Passer en mode icônes seulement au-delà de 5 onglets
 
 // État global partagé entre toutes les instances du composable
 const state = reactive<TabsState>({
-  tabs: [
+  tabs: [],
-    {
+  activeTabId: '',
-      id: 'home',
+  tabHistory: [],
-      type: 'home',
-      title: 'Home',
-      icon: Home,
-      closeable: false,
-    },
-  ],
-  activeTabId: 'home',
-  tabHistory: ['home'],
 })
 
 // Flag pour éviter les boucles de sauvegarde
@@ -54,13 +49,17 @@ function truncateTitle(title: string, maxLength = 15): string {
 
 /**
  * Sauvegarde l'état dans localStorage
+ * Note: On ne sauvegarde que les onglets server (les renderer tabs sont auto-générés)
  */
 function saveToLocalStorage() {
   if (isRestoringFromStorage) return
 
   try {
     const stateToSave = {
-      tabs: state.tabs.map((tab) => ({
+      // Sauvegarder uniquement les onglets server (fermables manuellement)
+      tabs: state.tabs
+        .filter((tab) => tab.type === 'server')
+        .map((tab) => ({
           ...tab,
           // On ne peut pas sauvegarder les composants Vue, on sauve juste le type
           icon: undefined,
@@ -76,6 +75,7 @@ function saveToLocalStorage() {
 
 /**
  * Restaure l'état depuis localStorage
+ * Note: Restaure uniquement les onglets server (les renderer tabs seront auto-générés)
  */
 function restoreFromLocalStorage() {
   try {
@@ -85,18 +85,25 @@ function restoreFromLocalStorage() {
     isRestoringFromStorage = true
     const savedState = JSON.parse(saved)
 
-    // Reconstituer les tabs avec les bonnes icônes
+    // Reconstituer uniquement les tabs server avec les bonnes icônes
-    state.tabs = savedState.tabs.map((tab: Tab) => ({
+    const serverTabs = (savedState.tabs || [])
+      .filter((tab: Tab) => tab.type === 'server')
+      .map((tab: Tab) => ({
         ...tab,
-      icon: tab.type === 'home' ? Home : tab.type === 'renderer' ? Radio : Server,
+        icon: Server,
+        closeable: true,
+        fullTitle: tab.fullTitle || tab.title, // Fallback si fullTitle n'existe pas
       }))
 
-    state.activeTabId = savedState.activeTabId || 'home'
+    // Ajouter les tabs server restaurés (les renderer tabs seront ajoutés par syncWithRenderers)
-    state.tabHistory = savedState.tabHistory || ['home']
+    state.tabs.push(...serverTabs)
 
-    // Vérifier que l'onglet actif existe toujours
+    state.activeTabId = savedState.activeTabId || ''
+    state.tabHistory = savedState.tabHistory || []
+
+    // Vérifier que l'onglet actif existe toujours (sera validé après syncWithRenderers)
     if (!state.tabs.find((t) => t.id === state.activeTabId)) {
-      state.activeTabId = 'home'
+      state.activeTabId = ''
     }
 
     isRestoringFromStorage = false
@@ -116,13 +123,11 @@ function findTab(tabId: string): Tab | undefined {
 /**
  * Ouvre un nouvel onglet ou active un onglet existant
  */
-function openTab(newTab: Omit<Tab, 'id'> & { id?: string }): string {
+function openTab(newTab: Omit<Tab, 'id' | 'fullTitle'> & { id?: string; fullTitle?: string }): string {
   // Générer un ID si non fourni
   const tabId =
     newTab.id ||
-    (newTab.type === 'home'
+    (newTab.type === 'renderer'
-      ? 'home'
-      : newTab.type === 'renderer'
       ? `renderer-${newTab.metadata?.rendererId}`
       : `server-${newTab.metadata?.serverId}`)
 
@@ -144,6 +149,7 @@ function openTab(newTab: Omit<Tab, 'id'> & { id?: string }): string {
     id: tabId,
     type: newTab.type,
     title: truncateTitle(newTab.title),
+    fullTitle: newTab.fullTitle || newTab.title, // Utiliser fullTitle si fourni, sinon title
     icon: newTab.icon,
     metadata: newTab.metadata,
     closeable: newTab.closeable !== false, // true par défaut sauf si explicitement false
@@ -156,15 +162,17 @@ function openTab(newTab: Omit<Tab, 'id'> & { id?: string }): string {
 }
 
 /**
- * Ferme un onglet
+ * Ferme un onglet (uniquement les onglets server manuels)
+ * Les onglets renderer sont auto-gérés et ne peuvent pas être fermés manuellement
  */
 function closeTab(tabId: string) {
   const tab = findTab(tabId)
   if (!tab) return
 
-  // Ne pas fermer l'onglet home
+  // Ne fermer que les onglets server (closeable = true)
-  if (!tab.closeable) {
+  // Les renderer tabs sont auto-gérés par syncWithRenderers
-    console.warn('[useTabs] Impossible de fermer un onglet non fermable')
+  if (!tab.closeable || tab.type === 'renderer') {
+    console.warn('[useTabs] Impossible de fermer un onglet renderer (auto-géré)')
     return
   }
 
@@ -188,8 +196,13 @@ function closeTab(tabId: string) {
     if (previousTab) {
       switchTab(previousTab)
     } else {
-      // Fallback sur home
+      // Fallback sur le premier onglet disponible (ou vide)
-      switchTab('home')
+      const firstTab = state.tabs[0]
+      if (firstTab) {
+        switchTab(firstTab.id)
+      } else {
+        state.activeTabId = ''
+      }
     }
   }
 }
@@ -238,25 +251,69 @@ function previousTab() {
 }
 
 /**
- * Ouvre un onglet renderer
+ * Synchronise les onglets avec la liste des renderers online
+ * Les renderer tabs sont automatiquement créés/supprimés selon l'état online
  */
-function openRenderer(renderer: RendererSummary | undefined) {
+function syncWithRenderers(renderers: RendererSummary[]) {
-  if (!renderer) return 'home'
+  const onlineRenderers = renderers.filter((r) => r.online)
 
-  return openTab({
+  // Extraire les tabs renderer actuels
+  const currentRendererTabs = state.tabs.filter((t) => t.type === 'renderer')
+
+  // IDs des renderers online
+  const onlineRendererIds = new Set(onlineRenderers.map((r) => `renderer-${r.id}`))
+
+  // Supprimer les tabs des renderers qui ne sont plus online
+  const renderersToRemove = currentRendererTabs.filter((t) => !onlineRendererIds.has(t.id))
+  renderersToRemove.forEach((tab) => {
+    const index = state.tabs.findIndex((t) => t.id === tab.id)
+    if (index !== -1) state.tabs.splice(index, 1)
+    state.tabHistory = state.tabHistory.filter((id) => id !== tab.id)
+  })
+
+  // Ajouter les nouveaux renderers online
+  const currentRendererIds = new Set(currentRendererTabs.map((t) => t.id))
+  onlineRenderers.forEach((renderer) => {
+    const tabId = `renderer-${renderer.id}`
+    if (!currentRendererIds.has(tabId)) {
+      const newTab: Tab = {
+        id: tabId,
         type: 'renderer',
-    title: renderer.friendly_name,
+        title: truncateTitle(renderer.friendly_name),
+        fullTitle: renderer.friendly_name,
         icon: Radio,
         metadata: { rendererId: renderer.id },
-    closeable: true,
+        closeable: false, // renderer tabs ne sont pas fermables manuellement
+      }
+      state.tabs.unshift(newTab) // Ajouter au début
+    }
   })
+
+  // Vérifier que l'onglet actif existe toujours
+  if (state.activeTabId && !state.tabs.find((t) => t.id === state.activeTabId)) {
+    // Basculer vers le premier onglet disponible
+    const firstTab = state.tabs[0]
+    if (firstTab) {
+      state.activeTabId = firstTab.id
+    } else {
+      state.activeTabId = ''
+    }
+  }
+
+  // Si aucun onglet actif et qu'il y a des onglets, sélectionner le premier
+  if (!state.activeTabId && state.tabs.length > 0) {
+    const firstTab = state.tabs[0]
+    if (firstTab) {
+      state.activeTabId = firstTab.id
+    }
+  }
 }
 
 /**
- * Ouvre un onglet server
+ * Ouvre un onglet server (manuel)
  */
 function openServer(server: MediaServerSummary | undefined) {
-  if (!server) return 'home'
+  if (!server) return ''
 
   return openTab({
     type: 'server',
@@ -267,31 +324,11 @@ function openServer(server: MediaServerSummary | undefined) {
   })
 }
 
-/**
- * Ferme tous les onglets sauf home
- */
-function closeAllTabs() {
-  state.tabs = state.tabs.filter((t) => !t.closeable)
-  state.activeTabId = 'home'
-  state.tabHistory = ['home']
-}
-
-/**
- * Ferme tous les onglets sauf l'actif
- */
-function closeOtherTabs() {
-  const activeTab = findTab(state.activeTabId)
-  if (!activeTab) return
-
-  state.tabs = state.tabs.filter((t) => !t.closeable || t.id === state.activeTabId)
-  state.tabHistory = state.tabHistory.filter((id) => state.tabs.some((t) => t.id === id))
-}
-
 /**
  * Composable principal
  */
 export function useTabs() {
-  // Watch pour sauvegarde automatique
+  // Watch pour sauvegarde automatique (uniquement les server tabs)
   watch(
     () => [state.tabs, state.activeTabId, state.tabHistory],
     () => {
@@ -300,10 +337,10 @@ export function useTabs() {
     { deep: true },
   )
 
-  // Restaurer au montage (une seule fois)
+  // Restaurer au montage (uniquement les server tabs)
   onMounted(() => {
-    const firstTab = state.tabs[0]
+    // Restaurer seulement si pas déjà fait
-    if (state.tabs.length === 1 && firstTab && firstTab.id === 'home') {
+    if (state.tabs.filter((t) => t.type === 'server').length === 0) {
       restoreFromLocalStorage()
     }
   })
@@ -312,6 +349,8 @@ export function useTabs() {
   const activeTab = computed(() => findTab(state.activeTabId) || state.tabs[0] || null)
   const hasMultipleTabs = computed(() => state.tabs.length > 1)
   const canAddTab = computed(() => state.tabs.length < MAX_TABS)
+  const isEmpty = computed(() => state.tabs.length === 0)
+  const compactMode = computed(() => state.tabs.length > COMPACT_MODE_THRESHOLD)
 
   return {
     // State
@@ -321,17 +360,17 @@ export function useTabs() {
     tabHistory: computed(() => state.tabHistory),
     hasMultipleTabs,
     canAddTab,
+    isEmpty,
+    compactMode,
 
     // Actions
+    syncWithRenderers, // Nouvelle fonction clé pour auto-sync
     openTab,
     closeTab,
     switchTab,
     nextTab,
     previousTab,
-    openRenderer,
     openServer,
-    closeAllTabs,
-    closeOtherTabs,
     findTab,
   }
 }

pmoapp/webapp/src/views/UnifiedControlView.vue

@@ -1,27 +1,86 @@
 <script setup lang="ts">
-import { watch, onMounted, computed } from 'vue'
+import { ref, watch, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useTabs } from '@/composables/useTabs'
-import BottomTabBar from '@/components/unified/BottomTabBar.vue'
+import { useRenderers } from '@/composables/useRenderers'
+import { useMediaServers } from '@/composables/useMediaServers'
+import { useSwipe } from '@vueuse/core'
+import type { MediaServerSummary } from '@/services/pmocontrol/types'
 
-// Import des composants de contenu
+// Import des composants
-import HomeTabContent from '@/components/unified/HomeTabContent.vue'
+import BottomTabBar from '@/components/unified/BottomTabBar.vue'
+import EmptyState from '@/components/unified/EmptyState.vue'
+import ServerDrawer from '@/components/unified/ServerDrawer.vue'
 import RendererTabContent from '@/components/unified/RendererTabContent.vue'
 import ServerTabContent from '@/components/unified/ServerTabContent.vue'
 
 const route = useRoute()
 const router = useRouter()
-const { tabs, activeTabId, switchTab, activeTab } = useTabs()
+const { tabs, activeTabId, switchTab, activeTab, syncWithRenderers, isEmpty, openServer } = useTabs()
+const { allRenderers, fetchRenderers } = useRenderers()
+const { allServers, fetchServers } = useMediaServers()
+
+// État du drawer server
+const drawerOpen = ref(false)
+
+// Ref pour le swipe edge detection
+const viewRef = ref<HTMLElement | null>(null)
+
+// Swipe depuis le bord gauche pour ouvrir le drawer
+useSwipe(viewRef, {
+  threshold: 50,
+  onSwipeEnd(_e: TouchEvent, swipeDirection: string) {
+    // Swipe right depuis le bord gauche → ouvrir drawer
+    if (swipeDirection === 'right' && !drawerOpen.value) {
+      const touch = _e.changedTouches[0]
+      // Vérifier que le swipe commence depuis le bord gauche (< 50px)
+      if (touch && touch.clientX < 50) {
+        drawerOpen.value = true
+      }
+    }
+  },
+})
+
+// Gestion de l'ouverture d'un server depuis le drawer
+function handleServerSelected(server: MediaServerSummary) {
+  openServer(server)
+}
+
+// Nombre de servers online pour afficher dans le badge
+const onlineServersCount = computed(() => allServers.value.filter((s) => s.online).length)
+
+// Gestion de l'ouverture du drawer depuis le bouton
+function handleDrawerOpen() {
+  drawerOpen.value = true
+}
 
 // Sync route query params avec l'état des tabs
-onMounted(() => {
+onMounted(async () => {
-  // Restaurer l'onglet actif depuis l'URL au montage
+  // Fetch renderers et servers au montage
+  await Promise.all([
+    fetchRenderers(),
+    fetchServers()
+  ])
+
+  // Sync initial des tabs avec les renderers
+  syncWithRenderers(allRenderers.value)
+
+  // Restaurer l'onglet actif depuis l'URL
   const urlTabId = route.query.tab as string
   if (urlTabId && tabs.value.find((t) => t.id === urlTabId)) {
     switchTab(urlTabId)
   }
 })
 
+// Watch renderers pour sync automatique des tabs
+watch(
+  () => allRenderers.value,
+  (newRenderers) => {
+    syncWithRenderers(newRenderers)
+  },
+  { deep: true },
+)
+
 // Watch les changements d'URL pour changer d'onglet
 watch(
   () => route.query.tab,
@@ -58,8 +117,6 @@ const currentTabComponent = computed(() => {
   if (!tab) return null
 
   switch (tab.type) {
-    case 'home':
-      return HomeTabContent
     case 'renderer':
       return RendererTabContent
     case 'server':
@@ -68,24 +125,45 @@ const currentTabComponent = computed(() => {
       return null
   }
 })
+
+// Props pour le composant actif
+const currentTabProps = computed(() => {
+  const tab = activeTab.value
+  if (!tab || !tab.metadata) return null
+
+  if (tab.type === 'renderer' && tab.metadata.rendererId) {
+    return { rendererId: tab.metadata.rendererId }
+  }
+  if (tab.type === 'server' && tab.metadata.serverId) {
+    return { serverId: tab.metadata.serverId }
+  }
+  return null
+})
 </script>
 
 <template>
-  <div class="unified-control-view">
+  <div ref="viewRef" class="unified-control-view">
-    <!-- Zone de contenu avec keep-alive pour la performance -->
+    <!-- Zone de contenu -->
     <main class="content-area">
-      <keep-alive :max="8">
+      <!-- État vide: aucun renderer détecté -->
+      <EmptyState v-if="isEmpty" />
+
+      <!-- Onglets renderers/servers avec keep-alive -->
+      <keep-alive v-else :max="12">
         <component
-          v-if="currentTabComponent"
+          v-if="currentTabComponent && currentTabProps"
           :is="currentTabComponent"
           :key="activeTab?.id"
-          v-bind="activeTab?.metadata || {}"
+          v-bind="currentTabProps"
         />
       </keep-alive>
     </main>
 
     <!-- Barre d'onglets en bas -->
-    <BottomTabBar />
+    <BottomTabBar :online-servers-count="onlineServersCount" @open-drawer="handleDrawerOpen" />
+
+    <!-- Drawer servers (swipe depuis bord gauche) -->
+    <ServerDrawer v-model="drawerOpen" @server-selected="handleServerSelected" />
   </div>
 </template>