From 8f1395117a11a02089d7294cfb6cb4dc1be6bf8d Mon Sep 17 00:00:00 2001
From: Marcin Macierzanka <mmacierzanka@grzana.dev>
Date: Sun, 13 Sep 2026 16:18:18 +0200
Subject: [PATCH] feat: add loading state and voice channel validation to queue
 restoration and update uploads panel header

---
 frontend/src/components/QueuePanel.vue   | 55 ++++++++++++++++++++----
 frontend/src/components/UploadsPanel.vue |  2 +-
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/QueuePanel.vue b/frontend/src/components/QueuePanel.vue
index 5266a4c..bcf543e 100644
--- a/frontend/src/components/QueuePanel.vue
+++ b/frontend/src/components/QueuePanel.vue
@@ -79,12 +79,25 @@ const setPlays = (id: string, plays: number) =>
 
 const warnInvalidPlays = () => notify('Wartość musi być z przedziału 1-999', 'error')
 
-const restoreQueue = () =>
-  run(
-    () => api.restoreQueue(),
-    'Przywrócono ostatnią kolejkę',
-    'Nie udało się przywrócić ostatniej kolejki',
-  )
+const restoring = ref(false)
+
+async function restoreQueue() {
+  if (restoring.value) return
+  if (!props.status?.active_voice_channel) {
+    notify('Bot musi być połączony z kanałem głosowym!', 'error')
+    return
+  }
+  restoring.value = true
+  try {
+    await run(
+      () => api.restoreQueue(),
+      'Przywrócono ostatnią kolejkę',
+      'Nie udało się przywrócić ostatniej kolejki',
+    )
+  } finally {
+    restoring.value = false
+  }
+}
 </script>
 
 <template>
@@ -146,11 +159,14 @@ const restoreQueue = () =>
     </div>
     <button
       class="btn btn-secondary btn-block restore-queue-button"
-      :disabled="!savedQueueAvailable"
+      :class="{ loading: restoring }"
+      :disabled="!savedQueueAvailable || restoring"
       title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem"
       @click="restoreQueue"
     >
-      <RotateCcw /> Przywróć ostatnią kolejkę
+      <LoaderCircle v-if="restoring" class="restore-spinner" />
+      <RotateCcw v-else />
+      <span>{{ restoring ? 'Przywracanie kolejki…' : 'Przywróć ostatnią kolejkę' }}</span>
     </button>
   </div>
 </template>
@@ -158,6 +174,29 @@ const restoreQueue = () =>
 <style scoped>
 .restore-queue-button {
   margin-top: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.restore-queue-button.loading {
+  opacity: 0.9;
+  cursor: wait;
+  border-color: var(--primary, #f59e0b);
+  color: var(--primary, #f59e0b);
+  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
+}
+
+.restore-queue-button:disabled:not(.loading) {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.restore-spinner {
+  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
 }
 
 .queue-item-pending {
diff --git a/frontend/src/components/UploadsPanel.vue b/frontend/src/components/UploadsPanel.vue
index ca56ac5..1e66f14 100644
--- a/frontend/src/components/UploadsPanel.vue
+++ b/frontend/src/components/UploadsPanel.vue
@@ -35,7 +35,7 @@ function play(filename: string) {
   <div class="glass-card uploads-panel">
     <div class="queue-header">
       <h2 class="card-title">
-        <FolderUp /> Serwerowa baza plików
+        <FolderUp /> Pliki serwera
       </h2>
       <span class="queue-count">{{ filesLabel(files.length) }}</span>
     </div>