✨ Add queue refreshing indicator to UI

- Introduce `QueueRefreshing` event type for dedicated queue refresh state
- Add reactive tracking of refreshing queues via new `queueRefreshingIds` Set in useRenderers composable
- Display visual indicator (spinning icon + text) when queue is refreshing in QueueViewer component
- Update `picomatch` dependency to v4.0.4 (patch)
- Minor cleanup in package-lock.json files

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

@@ -2,7 +2,7 @@
 import { computed, ref, watch, nextTick, toRef } from "vue";
 import { useRenderer } from "@/composables/useRenderers";
 import QueueItem from "./QueueItem.vue";
-import { Link, Radio } from "lucide-vue-next";
+import { Link, Radio, RefreshCw } from "lucide-vue-next";
 import type { QueueItem as QueueItemType } from "@/services/pmocontrol/types";
 
 const props = defineProps<{
@@ -13,7 +13,7 @@ const emit = defineEmits<{
     clickItem: [item: QueueItemType];
 }>();
 
-const { queue, binding, isStream } = useRenderer(toRef(props, "rendererId"));
+const { queue, binding, isStream, queueRefreshing } = useRenderer(toRef(props, "rendererId"));
 
 const isAttached = computed(() => !!binding.value);
 
@@ -72,6 +72,12 @@ watch(
                     <Radio :size="16" />
                     <span class="stream-text"> Web Radio </span>
                 </div>
+
+                <!-- Indicateur de mise à jour de queue -->
+                <div v-if="queueRefreshing" class="refresh-indicator">
+                    <RefreshCw :size="14" class="refresh-icon" />
+                    <span class="refresh-text"> Mise à jour... </span>
+                </div>
             </div>
         </div>
 
@@ -162,6 +168,33 @@ watch(
     font-size: var(--text-xs);
 }
 
+.refresh-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    border: 1px solid var(--color-border);
+    width: fit-content;
+}
+
+.refresh-icon {
+    animation: spin 1s linear infinite;
+}
+
+.refresh-text {
+    font-size: var(--text-xs);
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
 .queue-list {
     flex: 1;
     overflow-y: auto;