From 530b59b53d54426dfc50c55fc3a2a45c438a0450 Mon Sep 17 00:00:00 2001
From: Simon Cordt <s.b.cordt@gmail.com>
Date: Thu, 25 Sep 2025 14:20:25 +0200
Subject: [PATCH] Add separate module for UI Fallback Mechanism for Persistent
 Queue

---
 web/js/pqueue.ui.fallback.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 web/js/pqueue.ui.fallback.js

diff --git a/web/js/pqueue.ui.fallback.js b/web/js/pqueue.ui.fallback.js
new file mode 100644
index 0000000..1fd92ea
--- /dev/null
+++ b/web/js/pqueue.ui.fallback.js
@@ -0,0 +1,36 @@
+(function () {
+    "use strict";
+
+    const UI = (window.PQueue && window.PQueue.UI) || window.UI;
+    const state = (window.PQueue && window.PQueue.state) || {};
+
+    UI.mountFallback = function mountFallback() {
+        if (document.getElementById("pqueue-fallback-panel")) {
+            state.container = document.querySelector("#pqueue-fallback-panel .pqueue-fallback__content");
+            return;
+        }
+        const fab = UI.el("button", { id: "pqueue-fab", class: "pqueue-fab", type: "button" }, [UI.icon("ti ti-history", { size: "md" }), UI.el("span", { class: "pqueue-fab__label", text: "Persistent Queue" })]);
+        const panel = UI.el("div", { id: "pqueue-fallback-panel", class: "pqueue-fallback", "data-open": "false" });
+        const header = UI.el("header", { class: "pqueue-fallback__header" }, [UI.el("div", { class: "pqueue-fallback__title", text: "Persistent Queue" }), UI.button({ icon: "ti ti-x", variant: "ghost", subtle: true, title: "Close", onClick: () => panel.setAttribute("data-open", "false") })]);
+        const content = UI.el("div", { class: "pqueue-fallback__content" });
+        panel.appendChild(header);
+        panel.appendChild(content);
+        document.body.appendChild(panel);
+        document.body.appendChild(fab);
+        fab.addEventListener("click", () => {
+            const open = panel.getAttribute("data-open") === "true";
+            panel.setAttribute("data-open", open ? "false" : "true");
+            if (!open) refresh({ skipIfBusy: true });
+        });
+        state.container = content;
+    };
+
+    UI.removeFallback = function removeFallback() {
+        document.getElementById("pqueue-fab")?.remove();
+        document.getElementById("pqueue-fallback-panel")?.remove();
+    };
+})();
+
+
+
+