From f8f8a401489980f4b6be08c2acd958a9e622ff9b Mon Sep 17 00:00:00 2001
From: Simon Cordt <s.b.cordt@gmail.com>
Date: Fri, 26 Sep 2025 14:50:48 +0200
Subject: [PATCH] Improve empty state handling for pending queues

---
 web/js/pqueue.ui.js       | 12 +++++++++++-
 web/js/pqueue.ui.queue.js | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/web/js/pqueue.ui.js b/web/js/pqueue.ui.js
index 5acb59f..8f50dc1 100644
--- a/web/js/pqueue.ui.js
+++ b/web/js/pqueue.ui.js
@@ -772,7 +772,8 @@
                     if (subtitle) subtitle.textContent = state.metrics.queueCount ? `${state.metrics.queueCount} pending` : '';
                     const table = state.dom.pendingTable;
                     if (!table) return;
-                    Array.from(table.querySelectorAll('.pqueue-row[data-id]')).forEach((n) => n.remove());
+					Array.from(table.querySelectorAll('.pqueue-row[data-id]')).forEach((n) => n.remove());
+					try { Array.from(table.querySelectorAll('.pqueue-empty')).forEach((n) => n.remove()); } catch (err) { /* noop */ }
                     const rows = state.queue_pending.map(UI.pendingRow).filter(Boolean);
                     const header = table.querySelector('.pqueue-list__header');
                     const frag = document.createDocumentFragment();
@@ -782,6 +783,15 @@
                     } else {
                         table.appendChild(frag);
                     }
+					if (!rows.length) {
+						const empty = UI.emptyState({
+							icon: 'ti ti-stack-2',
+							title: 'Queue empty',
+							description: 'Enqueue prompts in ComfyUI to populate the persistent queue.',
+						});
+						if (header && header.nextSibling) table.insertBefore(empty, header.nextSibling);
+						else table.appendChild(empty);
+					}
                     UI.refreshFilter();
                     UI.updateSelectionUI();
                     UI.updatePendingFooter(Array.from(table.querySelectorAll('.pqueue-row[data-id]')).filter((r) => r.style.display !== 'none').length);
diff --git a/web/js/pqueue.ui.queue.js b/web/js/pqueue.ui.queue.js
index c35dfc8..cc1448e 100644
--- a/web/js/pqueue.ui.queue.js
+++ b/web/js/pqueue.ui.queue.js
@@ -364,7 +364,8 @@
                 if (subtitle) subtitle.textContent = state.metrics.queueCount ? `${state.metrics.queueCount} pending` : '';
                 const table = state.dom.pendingTable;
                 if (!table) return;
-                Array.from(table.querySelectorAll('.pqueue-row[data-id]')).forEach((n) => n.remove());
+				Array.from(table.querySelectorAll('.pqueue-row[data-id]')).forEach((n) => n.remove());
+				try { Array.from(table.querySelectorAll('.pqueue-empty')).forEach((n) => n.remove()); } catch (err) { /* noop */ }
                 const rows = state.queue_pending.map(UI.pendingRow).filter(Boolean);
                 const header = table.querySelector('.pqueue-list__header');
                 const frag = document.createDocumentFragment();
@@ -374,6 +375,15 @@
                 } else {
                     table.appendChild(frag);
                 }
+				if (!rows.length) {
+					const empty = UI.emptyState({
+						icon: 'ti ti-stack-2',
+						title: 'Queue empty',
+						description: 'Enqueue prompts in ComfyUI to populate the persistent queue.',
+					});
+					if (header && header.nextSibling) table.insertBefore(empty, header.nextSibling);
+					else table.appendChild(empty);
+				}
                 UI.refreshFilter();
                 UI.updateSelectionUI();
                 UI.updatePendingFooter(Array.from(table.querySelectorAll('.pqueue-row[data-id]')).filter((r) => r.style.display !== 'none').length);