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.
2026-06-11 21:50:10 +02:00
parent 8179c0e239
commit 0dab3077cf
8 changed files with 57 additions and 91 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -4,7 +4,7 @@ version = 4

 [[package]]
 name = "PMOMusic"
-version = "0.3.51"
+version = "0.3.52"
 dependencies = [
 "axum 0.8.7",
 "console-subscriber",
--- a/PMOMusic/Cargo.toml
+++ b/PMOMusic/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "PMOMusic"
-version = "0.3.51"
+version = "0.3.52"
 edition = "2024"

 [dependencies]
--- a/pmoapp/webapp/src/components/pmocontrol/MediaBrowser.vue
+++ b/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 -->
--- a/pmoapp/webapp/src/components/unified/ServerDrawer.vue
+++ b/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
--- a/pmoapp/webapp/src/composables/useMediaServers.ts
+++ b/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,
--- a/pmocontrol/src/pmoserver_ext.rs
+++ b/pmocontrol/src/pmoserver_ext.rs
@@ -8,6 +8,8 @@ use crate::control_point::ControlPoint;
 #[cfg(feature = "pmoserver")]
 use crate::media_server::{MediaBrowser, playback_item_from_entry};
 #[cfg(feature = "pmoserver")]
+use crate::MediaEntry;
+#[cfg(feature = "pmoserver")]
 use crate::model::{RendererCapabilities, RendererProtocol};
 #[cfg(feature = "pmoserver")]
 use crate::openapi::{
@@ -2392,6 +2394,22 @@ struct SearchQuery {
    q: String,
 }

+#[cfg(feature = "pmoserver")]
+fn search_result_container_id(entries: &[ContainerEntry]) -> String {
+    entries
+        .iter()
+        .find(|entry| entry.is_container)
+        .and_then(|entry| {
+            let parts: Vec<&str> = entry.id.splitn(5, ':').collect();
+            if parts.len() == 5 && parts[0] == "qobuz" && parts[1] == "search" {
+                Some(format!("qobuz:search:{}:all:{}", parts[2], parts[4]))
+            } else {
+                None
+            }
+        })
+        .unwrap_or_else(|| "search".to_string())
+}
+
 /// GET /control/servers/{server_id}/search?q=<query> - Recherche dans un serveur
 #[cfg(feature = "pmoserver")]
 #[utoipa::path(
@@ -2503,8 +2521,10 @@ async fn search_server(
        })
        .collect();

+    let container_id = search_result_container_id(&container_entries);
+
    Ok(Json(BrowseResponse {
-        container_id: "search".to_string(),
+        container_id,
        entries: container_entries,
        total_count,
        offset: 0,
--- a/pmoqobuz/src/source.rs
+++ b/pmoqobuz/src/source.rs
@@ -1898,7 +1898,8 @@ impl MusicSource for QobuzSource {
            }

            ObjectIdType::SearchResult(scope, media_type, query) => {
-                tracing::debug!(scope = ?scope, media_type = ?media_type, query, "browse → execute_search");
+                tracing::debug!(scope = ?scope, media_type = ?media_type, query, "browse → search");
+                let is_all_search = media_type == MediaSearchType::All;
                let sq = SearchQuery {
                    text: query,
                    media_type,
@@ -1906,9 +1907,11 @@ impl MusicSource for QobuzSource {
                    limit: 200,
                    offset: 0,
                };
-                let result = self.execute_search(&sq).await;
-                tracing::debug!(ok = result.is_ok(), "execute_search returned");
-                result
+                if is_all_search {
+                    self.search_grouped(&sq).await
+                } else {
+                    self.execute_search(&sq).await
+                }
            }

            ObjectIdType::Track(_) => {
@@ -2410,10 +2413,11 @@ impl QobuzSource {
        };

        let (n_albums, n_artists, n_tracks, n_playlists) = counts;
+        let parent_id = format!("qobuz:search:{}:all:{}", scope_str, query.text);

        let mk_container = |type_str: &str, title: &str, count: usize| Container {
            id: format!("qobuz:search:{}:{}:{}", scope_str, type_str, query.text),
-            parent_id: "qobuz:search".to_string(),
+            parent_id: parent_id.clone(),
            restricted: Some("1".to_string()),
            child_count: Some(count.to_string()),
            searchable: None,
@@ -2466,7 +2470,6 @@ impl QobuzSource {
        use tracing::debug;
        debug!(text = %query.text, scope = ?query.scope, media_type = ?query.media_type, "execute_search entry");
        let text = &query.text;
-        let limit = query.limit;
        let scope_str = match query.scope {
            SearchScope::Catalog => "catalog",
            SearchScope::UserLibrary => "favorites",
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-0.3.51
+0.3.52
@@ -1 +1 @@
 .3.51
 .3.52