From ddb8ef223f97cf5841da7ae263571ebfa77721ed Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Fri, 13 Dec 2024 00:13:00 +0100
Subject: [PATCH] the tags form is now a dialog. see #183

---
 js/mzta-compose-script.js | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/js/mzta-compose-script.js b/js/mzta-compose-script.js
index 12454b7d..5f7cf3ac 100644
--- a/js/mzta-compose-script.js
+++ b/js/mzta-compose-script.js
@@ -220,6 +220,21 @@ switch (message.command) {
         font-size: 14px;
       }
 
+      .div_btns{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --dialog-bg-color: #2e2e2e;
+          --dialog-text-color: #ffffff;
+        }
+      }
+
+      /* Darker overlay for the page background */
       .mzta_dialog_overlay {
         position: fixed;
         top: 0;
@@ -229,24 +244,17 @@ switch (message.command) {
         background: rgba(0, 0, 0, 0.7);
         z-index: 1000;
       }
-
-      .div_btns{
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        margin-top: 20px;
-      }
     `;
     document.head.appendChild(style);
 
     function createDialog(inputString, onSubmit) {
       // Create the overlay
-      const overlay = document.createElement('div');
-      overlay.className = 'mzta_dialog_overlay';
-      document.body.appendChild(overlay);
+      // const overlay = document.createElement('div');
+      // overlay.className = 'mzta_dialog_overlay';
+      // document.body.appendChild(overlay);
 
       // Create the dialog
-      const dialog = document.createElement('div');
+      const dialog = document.createElement('dialog');
       dialog.className = 'mzta_dialog';
 
       // Create the content
@@ -304,6 +312,8 @@ switch (message.command) {
         document.body.removeChild(dialog);
         document.body.removeChild(overlay);
       }
+
+      dialog.showModal();
     }
 
     // Example usage