From 387d2ba2aba2255eed54ab3d68f70e7440f3143f Mon Sep 17 00:00:00 2001
From: Jose Lago <jose@lago.dev>
Date: Sun, 17 May 2026 22:41:44 +0200
Subject: [PATCH] feat: replace toast notifications with a customizable popup
 for admin messages

---
 frontend/admin.js | 51 ++++++++++++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/frontend/admin.js b/frontend/admin.js
index cfd7833..8bffa9a 100644
--- a/frontend/admin.js
+++ b/frontend/admin.js
@@ -75,24 +75,47 @@ function notify(message, duration = 3000) {
         window.showToast(message, duration);
         return;
     }
-    showAdminToast(message, duration);
+    showAdminPopup(message, duration);
 }
 
-function showAdminToast(message, duration = 3000) {
-    let toast = document.querySelector("#toast");
-    if (!toast) {
-        toast = document.createElement("div");
-        toast.id = "toast";
-        toast.className = "toast";
-        toast.setAttribute("role", "status");
-        toast.setAttribute("aria-live", "polite");
-        document.body.appendChild(toast);
+function showAdminPopup(message, duration = 3000) {
+    const host = document.querySelector("dialog[open]") || document.body;
+    let popup = host.querySelector("[data-admin-notify-popup]");
+    if (!popup) {
+        popup = document.createElement("div");
+        popup.setAttribute("data-admin-notify-popup", "1");
+        popup.setAttribute("role", "status");
+        popup.setAttribute("aria-live", "polite");
+        popup.style.position = host.tagName === "DIALOG" ? "absolute" : "fixed";
+        popup.style.left = "50%";
+        popup.style.top = "50%";
+        popup.style.transform = "translate(-50%, -50%) scale(0.96)";
+        popup.style.minWidth = "320px";
+        popup.style.maxWidth = "min(92vw, 560px)";
+        popup.style.padding = "1rem 1.2rem";
+        popup.style.borderRadius = "12px";
+        popup.style.border = "1px solid var(--line)";
+        popup.style.background = "var(--bg-card)";
+        popup.style.color = "var(--text)";
+        popup.style.boxShadow = "0 16px 40px rgba(0,0,0,0.35)";
+        popup.style.textAlign = "center";
+        popup.style.fontSize = "1rem";
+        popup.style.fontWeight = "600";
+        popup.style.opacity = "0";
+        popup.style.zIndex = "3000";
+        popup.style.pointerEvents = "none";
+        popup.style.transition = "opacity 0.18s ease, transform 0.18s ease";
+        host.appendChild(popup);
     }
 
-    toast.textContent = message;
-    toast.classList.add("show");
-    setTimeout(() => {
-        toast.classList.remove("show");
+    popup.textContent = message;
+    popup.style.opacity = "1";
+    popup.style.transform = "translate(-50%, -50%) scale(1)";
+
+    clearTimeout(popup._hideTimer);
+    popup._hideTimer = setTimeout(() => {
+        popup.style.opacity = "0";
+        popup.style.transform = "translate(-50%, -50%) scale(0.96)";
     }, duration);
 }