Simplification de la web UI en reposant davantage sur le serveur.

pmoapp/webapp/src/views/DashboardView.vue

@@ -1,26 +1,33 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useRenderersStore } from '@/stores/renderers'
-import { useMediaServersStore } from '@/stores/mediaServers'
+import { onMounted } from 'vue'
+import { useRenderers } from '@/composables/useRenderers'
+import { useMediaServers } from '@/composables/useMediaServers'
 import RendererCard from '@/components/pmocontrol/RendererCard.vue'
 import MediaServerCard from '@/components/pmocontrol/MediaServerCard.vue'
 import { Radio, Server } from 'lucide-vue-next'
 
-const renderersStore = useRenderersStore()
-const mediaServersStore = useMediaServersStore()
+const {
+  allRenderers: renderers,
+  onlineRenderers,
+  getStateById,
+  fetchRenderers,
+  fetchRendererState
+} = useRenderers()
 
-const renderers = computed(() => Array.from(renderersStore.renderers.values()))
-const onlineRenderers = computed(() => renderersStore.onlineRenderers)
-const mediaServers = computed(() => Array.from(mediaServersStore.servers.values()))
-const onlineServers = computed(() => mediaServersStore.onlineServers)
+const {
+  allServers: mediaServers,
+  onlineServers,
+  fetchServers
+} = useMediaServers()
 
-// Charger les données au montage (si pas encore chargées par SSE)
+// Charger les données au montage
 onMounted(async () => {
-  if (renderers.value.length === 0) {
-    await renderersStore.fetchRenderers()
-  }
-  if (mediaServers.value.length === 0) {
-    await mediaServersStore.fetchServers()
+  await fetchRenderers()
+  await fetchServers()
+
+  // Charger les états de tous les renderers pour afficher les covers
+  for (const renderer of renderers.value) {
+    fetchRendererState(renderer.id)
   }
 })
 </script>
@@ -56,13 +63,13 @@ onMounted(async () => {
           v-for="renderer in renderers"
           :key="renderer.id"
           :renderer="renderer"
-          :state="renderersStore.getStateById(renderer.id) ?? null"
+          :state="getStateById(renderer.id) ?? null"
         />
       </div>
 
       <div v-else class="empty-state">
         <p>Aucun renderer découvert</p>
-        <button class="btn btn-secondary" @click="renderersStore.fetchRenderers()">
+        <button class="btn btn-secondary" @click="fetchRenderers(true)">
           Actualiser
         </button>
       </div>
@@ -87,7 +94,7 @@ onMounted(async () => {
 
       <div v-else class="empty-state">
         <p>Aucun serveur de médias découvert</p>
-        <button class="btn btn-secondary" @click="mediaServersStore.fetchServers()">
+        <button class="btn btn-secondary" @click="fetchServers(true)">
           Actualiser
         </button>
       </div>

pmoapp/webapp/src/views/MediaServerView.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { computed, watch, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useMediaServersStore } from '@/stores/mediaServers'
+import { useMediaServers } from '@/composables/useMediaServers'
 import MediaBrowser from '@/components/pmocontrol/MediaBrowser.vue'
 import { ArrowLeft, Server } from 'lucide-vue-next'
 
 const route = useRoute()
 const router = useRouter()
-const mediaServersStore = useMediaServersStore()
+const { getServerById } = useMediaServers()
 
 const serverId = computed(() => route.params.serverId as string)
 const containerId = ref(route.query.container as string || '0')
 
-const server = computed(() => mediaServersStore.getServerById(serverId.value))
+const server = computed(() => getServerById(serverId.value))
 
 // Watcher sur query.container pour mettre à jour containerId
 watch(

pmoapp/webapp/src/views/RendererView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, toRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useRenderersStore } from '@/stores/renderers'
+import { useRenderer, useRenderers } from '@/composables/useRenderers'
 import { useUIStore } from '@/stores/ui'
 import CurrentTrack from '@/components/pmocontrol/CurrentTrack.vue'
 import TransportControls from '@/components/pmocontrol/TransportControls.vue'
@@ -20,12 +20,11 @@ import type { OpenHomePlaylistSnapshot } from '@/services/pmocontrol/types'
 
 const route = useRoute()
 const router = useRouter()
-const renderersStore = useRenderersStore()
 const uiStore = useUIStore()
 
 const rendererId = computed(() => route.params.id as string)
-const renderer = computed(() => renderersStore.getRendererById(rendererId.value))
-const state = computed(() => renderersStore.getStateById(rendererId.value))
+const { renderer, state, refresh } = useRenderer(toRef(() => rendererId.value))
+const { fetchRenderers } = useRenderers()
 const openHomeSupported = computed(() => {
   const current = renderer.value
   if (!current) return false
@@ -48,13 +47,11 @@ onMounted(async () => {
   // Indiquer à uiStore quel renderer est sélectionné
   uiStore.selectRenderer(rendererId.value)
 
+  // Charger toutes les données du renderer
   if (!renderer.value) {
-    await renderersStore.fetchRenderers()
+    await fetchRenderers()
   }
-  if (!state.value) {
-    await renderersStore.fetchRendererState(rendererId.value)
-  }
-  await renderersStore.fetchQueue(rendererId.value)
+  await refresh()
 })
 
 watch(