feat: unify search state and dynamic container routing

Refactor search handling across the frontend and backend to use a unified reactive state and dynamic container ID generation. The frontend now leverages a centralized `useMediaServers` composable for search queries and results, while the backend computes container IDs dynamically from source entries instead of using hardcoded values. Bumps version to 0.3.52.

pmoapp/webapp/src/components/pmocontrol/MediaBrowser.vue

@@ -22,17 +22,14 @@ const {
     loading,
     loadingMore,
     error,
-    searchResults,
-    searchQuery,
     searchServer,
-    clearSearch,
 } = useMediaServers();
 
 const searchInput = ref('');
 
 async function handleSearch() {
     if (searchInput.value.trim()) {
-        const virtualId = await searchServer(props.serverId, searchInput.value.trim(), props.containerId);
+        const virtualId = await searchServer(props.serverId, searchInput.value.trim());
         if (virtualId) {
             emit("navigate", virtualId);
         }
@@ -41,11 +38,8 @@ async function handleSearch() {
 
 function handleClearSearch() {
     searchInput.value = '';
-    clearSearch();
 }
 
-const isSearchMode = computed(() => searchQuery.value !== '');
-
 const { playContent, addToQueue, attachAndPlayPlaylist, attachPlaylist } =
     useRenderers();
 const uiStore = useUIStore();
@@ -55,9 +49,7 @@ const sentinelRef = ref<HTMLElement | null>(null);
 let observer: IntersectionObserver | null = null;
 
 const browseData = computed(() =>
-    isSearchMode.value
-        ? searchResults.value
-        : getBrowseCached(props.serverId, props.containerId),
+    getBrowseCached(props.serverId, props.containerId),
 );
 
 const containers = computed(
@@ -68,7 +60,7 @@ const items = computed(
     () => browseData.value?.entries.filter((e) => !e.is_container) || [],
 );
 
-const canLoadMore = computed(() => !isSearchMode.value && hasMore(props.serverId, props.containerId));
+const canLoadMore = computed(() => hasMore(props.serverId, props.containerId));
 
 function setupObserver() {
     if (observer) observer.disconnect();
@@ -201,7 +193,7 @@ async function handleQueueItem(itemId: string, rendererId: string) {
                     @keyup.enter="handleSearch"
                 />
                 <button
-                    v-if="searchInput || isSearchMode"
+                    v-if="searchInput"
                     class="search-clear"
                     @click="handleClearSearch"
                     title="Effacer"
@@ -269,7 +261,7 @@ async function handleQueueItem(itemId: string, rendererId: string) {
                 v-if="!containers.length && !items.length"
                 class="browser-empty"
             >
-                <p>{{ isSearchMode ? 'Aucun résultat' : 'Ce dossier est vide' }}</p>
+                <p>{{ 'Ce dossier est vide' }}</p>
             </div>
 
             <!-- Sentinel infinite scroll -->

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

@@ -41,24 +41,33 @@ const {
     currentPath,
     setPath,
     clearPath,
-    searchResults,
-    searchQuery,
     searchServer,
-    clearSearch,
 } = useMediaServers();
 
 const searchInput = ref('');
-const isSearchMode = computed(() => searchQuery.value !== '');
 
 async function handleSearch() {
     console.log('[ServerDrawer] handleSearch called, currentServer:', currentServer.value?.id, 'searchInput:', searchInput.value);
     if (!currentServer.value || !searchInput.value.trim()) return;
-    await searchServer(currentServer.value.id, searchInput.value.trim());
+
+    const query = searchInput.value.trim();
+    isLoading.value = true;
+    try {
+        const virtualId = await searchServer(currentServer.value.id, query);
+        if (!virtualId) return;
+
+        currentContainerId.value = virtualId;
+        setPath([
+            { id: '0', title: currentServer.value.friendly_name },
+            { id: virtualId, title: `Recherche : ${query}` },
+        ]);
+    } finally {
+        isLoading.value = false;
+    }
 }
 
 function handleClearSearch() {
     searchInput.value = '';
-    clearSearch();
 }
 
 const { playContent, addToQueue, addAfterCurrent, attachAndPlayPlaylist } =
@@ -473,7 +482,7 @@ function handleSettingsClick() {
                         @keyup.enter="handleSearch"
                     />
                     <button
-                        v-if="searchInput || isSearchMode"
+                        v-if="searchInput"
                         class="search-clear-btn"
                         @click="handleClearSearch"
                         title="Effacer"
@@ -578,53 +587,6 @@ function handleSettingsClick() {
                             <p>Chargement...</p>
                         </div>
 
-                        <!-- Résultats de recherche -->
-                        <div v-else-if="isSearchMode && searchResults">
-                            <p v-if="searchResults.entries.length === 0" class="empty-state">Aucun résultat</p>
-                            <ul v-else class="content-list">
-                                <li
-                                    v-for="item in searchResults.entries"
-                                    :key="item.id"
-                                    class="content-item"
-                                    :class="{ navigable: item.is_container }"
-                                    @click="handleItemClick(item)"
-                                >
-                                    <div class="content-cover">
-                                        <img
-                                            v-if="item.album_art_uri && !getImageState(item.id).error"
-                                            :src="item.album_art_uri"
-                                            :alt="item.title"
-                                            class="cover-img"
-                                            :class="{ loaded: getImageState(item.id).loaded }"
-                                            @load="handleImageLoad(item.id)"
-                                            @error="handleImageError(item.id)"
-                                        />
-                                        <div v-else class="cover-placeholder">
-                                            <Folder v-if="item.is_container" :size="24" />
-                                            <Music v-else :size="24" />
-                                        </div>
-                                    </div>
-                                    <div class="content-info">
-                                        <p class="content-title">{{ item.title }}</p>
-                                        <p v-if="item.artist" class="content-subtitle">{{ item.artist }}</p>
-                                    </div>
-                                    <div class="item-actions" @click.stop>
-                                        <button class="action-btn play-btn" @click="handlePlayItem($event, item)" title="Lire">
-                                            <Play :size="14" />
-                                        </button>
-                                        <button class="action-btn" @click="toggleMenu(item.id, $event)" title="Plus">
-                                            <MoreVertical :size="14" />
-                                        </button>
-                                        <div v-if="openMenuId === item.id" class="item-menu">
-                                            <button @click="handleAddToQueue($event, item)"><Plus :size="14" /> Ajouter à la queue</button>
-                                            <button @click="handleAddAfterCurrent($event, item)"><Plus :size="14" /> Après le current</button>
-                                        </div>
-                                    </div>
-                                    <ChevronRight v-if="item.is_container" :size="16" class="content-chevron" />
-                                </li>
-                            </ul>
-                        </div>
-
                         <!-- Contenu du serveur -->
                         <ul v-else-if="browseData" class="content-list">
                             <li

pmoapp/webapp/src/composables/useMediaServers.ts

@@ -32,8 +32,6 @@ function browseCacheKey(serverId: string, containerId: string): string {
   return `${encodeURIComponent(serverId)}:${encodeURIComponent(containerId)}`
 }
 const currentPath = ref<BreadcrumbItem[]>([])
-const searchResults = ref<BrowseState | null>(null)
-const searchQuery = ref<string>('')
 
 const CACHE_DURATION_MS = 2000
 const BROWSE_WINDOW_SIZE = 200
@@ -215,14 +213,14 @@ export function useMediaServers() {
   }
 
   // Recherche dans un serveur — retourne l'ID du container virtuel de résultats
-  async function searchServer(serverId: string, query: string, context?: string): Promise<string | null> {
+  async function searchServer(serverId: string, query: string): Promise<string | null> {
     if (!query.trim()) return null
 
     try {
       loading.value = true
       error.value = null
 
-      const data = await api.searchServer(serverId, query, context)
+      const data = await api.searchServer(serverId, query)
       // data.container_id est l'ID virtuel réel (ex: "qobuz:search:catalog:all:camille")
       const key = browseCacheKey(serverId, data.container_id)
       browseCache.value.set(key, {
@@ -240,11 +238,6 @@ export function useMediaServers() {
     }
   }
 
-  function clearSearch() {
-    searchResults.value = null
-    searchQuery.value = ''
-  }
-
   // Getters
   function getServerById(id: string) {
     return serversCache.value.get(id)
@@ -299,13 +292,9 @@ export function useMediaServers() {
     getServerById,
     getBrowseCached,
     hasMore,
-    // Search
-    searchResults,
-    searchQuery,
-    searchServer,
-    clearSearch,
     // Actions
     fetchServers,
+    searchServer,
     browseContainer,
     loadMoreBrowse,
     setPath,