From 71f4e9507cac5386980945544df85a9deb70a142 Mon Sep 17 00:00:00 2001
From: Anthony Donlon <idonlon@hotmail.com>
Date: Mon, 22 Dec 2025 21:27:47 +0800
Subject: [PATCH] editor/web: support responsive save as dialog

---
 editor/web/index.html             | 134 +++++++++++++++++++++---------
 editor/web/src/codegen/js.ejs     |   2 +-
 editor/web/src/codegen/json.ejs   |   2 +-
 editor/web/src/codegen/python.ejs |   2 +-
 editor/web/src/index.js           |  13 +--
 5 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/editor/web/index.html b/editor/web/index.html
index 5d1e72b..e34a755 100644
--- a/editor/web/index.html
+++ b/editor/web/index.html
@@ -148,6 +148,75 @@
       --bs-popover-body-padding-x: 0.7rem !important;
       --bs-popover-body-padding-y: 0.5rem !important;
     }
+
+    .save-as-dialog__container {
+      display: grid;
+      grid-template-areas:
+        "selector"
+        "code"
+        "buttons";
+      height: fit-content;
+      grid-template-columns: auto;
+      gap: 1em;
+    }
+
+    .save-as-dialog__selector {
+      grid-area: selector;
+      min-width: 10em;
+    }
+
+    .save-as-dialog__code {
+      grid-area: code;
+      width: 100%;
+      height: 100%;
+      min-height: 700px !important;
+      font-family: monospace;
+      font-size: 0.8em !important;
+    }
+
+    .save-as-dialog__buttons {
+      grid-area: buttons;
+      flex-direction: row;
+    }
+
+    .save-as-dialog__buttons>* {
+      flex: 1 1 auto;
+    }
+
+    @media (min-width: 576px) {
+      .save-as-dialog__container {
+        grid-template-areas:
+          "selector code"
+          "buttons code";
+        grid-template-columns: auto 2fr;
+        height: 100%;
+      }
+
+      .save-as-dialog__selector {
+        text-align: right;
+      }
+
+      .save-as-dialog__code {
+        min-height: 0 !important;
+      }
+
+      .save-as-dialog__buttons {
+        grid-area: buttons;
+        flex-direction: column;
+        justify-content: flex-end !important;
+      }
+
+      .save-as-dialog__buttons>* {
+        flex: none;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .save-as-dialog__selector {
+        grid-area: selector;
+        min-width: 13em;
+      }
+    }
   </style>
 </head>
 
@@ -408,7 +477,7 @@
             </button>
           </div>
 
-          <button type="button" id="btnShare" class="btn btn-sm btn-primary">Create shareable link</button>
+          <button type="button" id="btnShare" class="btn btn-sm btn-secondary">Create shareable link</button>
           <div class="mt-2">
             <div class="input-group input-group-sm">
               <input id="shareLink" class="form-control" readonly />
@@ -443,51 +512,38 @@
   </div>
 
   <!-- Modal -->
-  <div class="modal fade" id="saveAsDialog" tabindex="-1" aria-labelledby="saveAsDialogLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl modal-fullscreen-lg-down">
-      <!-- <div class="modal-dialog modal-lg modal-dialog-centered"> -->
-      <div class="modal-content">
-
+  <div class="modal fade" id="saveAsDialog" tabindex="-1" aria-labelledby="saveAsDialogLabel">
+    <div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-scrollable">
+      <div class="modal-content h-100">
         <div class="modal-header">
           <h5 class="modal-title" id="saveAsDialogLabel">Save As ...</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
 
         <div class="modal-body">
-          <div class="container-fluid">
-            <div class="row g-3">
-              <!-- Left: List Group -->
-              <div class="col-3 d-flex flex-column" style="justify-content: space-between;">
-                <div id="saveAsDialogTypes" class="list-group" style="text-align: right;">
-                  <button type="button" data-type="json" class="list-group-item list-group-item-action active">
-                    JSON
-                  </button>
-                  <button type="button" data-type="python" class="list-group-item list-group-item-action">
-                    Python Example
-                  </button>
-                  <button type="button" data-type="js" class="list-group-item list-group-item-action">
-                    NodeJS Example
-                  </button>
-                </div>
-                <!-- Bottom Buttons -->
-                <div class="d-flex flex-column justify-content-end gap-1">
-                  <button type="button" class="btn btn-success" id="saveAsDialogCopyBtn" data-bs-toggle="popover"
-                    data-bs-placement="right" data-bs-trigger="manual" data-bs-content="Copied">
-                    Copy
-                  </button>
-                  <button type="button" class="btn btn-primary" id="saveAsDialogSaveBtn">
-                    Save
-                  </button>
-                </div>
-              </div>
-
-              <!-- Right: Main Content -->
-              <div class="col-9">
-                <textarea id="saveAsDialogCode" class="form-control" spellcheck="false"
-                  style="font-family: monospace; min-height: 500px; height: 100%; font-size: 0.8em;"
-                  readonly></textarea>
-              </div>
+          <div class="mx-2 save-as-dialog__container">
+            <div id="saveAsDialogTypes" class="list-group save-as-dialog__selector">
+              <button type="button" data-type="json" class="list-group-item list-group-item-action active">
+                JSON
+              </button>
+              <button type="button" data-type="python" class="list-group-item list-group-item-action">
+                Python Example
+              </button>
+              <button type="button" data-type="js" class="list-group-item list-group-item-action">
+                NodeJS Example
+              </button>
             </div>
+            <div class="d-flex gap-1 save-as-dialog__buttons">
+              <button type="button" class="btn btn-success" id="saveAsDialogCopyBtn" data-bs-toggle="popover"
+                data-bs-placement="right" data-bs-trigger="manual" data-bs-content="Copied">
+                Copy
+              </button>
+              <button type="button" class="btn btn-primary" id="saveAsDialogSaveBtn">
+                Save
+              </button>
+            </div>
+            <textarea id="saveAsDialogCode" class="form-control save-as-dialog__code" spellcheck="false"
+              readonly></textarea>
           </div>
         </div>
       </div>
diff --git a/editor/web/src/codegen/js.ejs b/editor/web/src/codegen/js.ejs
index ae0f8b3..ea45346 100644
--- a/editor/web/src/codegen/js.ejs
+++ b/editor/web/src/codegen/js.ejs
@@ -7,7 +7,7 @@ const port = 3000;
 // Define a route for GET requests to the root URL
 <%# TODO: format to JS-style object (key w/o parens) _%>
 app.get('/', (req, res) => {
-  res.status(500).send(render_cf_error_page(<%=JSON.stringify(params, null, 2).replaceAll('\n', '\n  ')%>));
+  res.status(500).send(render_cf_error_page(<%-JSON.stringify(params, null, 2).replaceAll('\n', '\n  ')%>));
 });
 
 // Start the server and listen on the specified port
diff --git a/editor/web/src/codegen/json.ejs b/editor/web/src/codegen/json.ejs
index 94a36fb..ff9d4ad 100644
--- a/editor/web/src/codegen/json.ejs
+++ b/editor/web/src/codegen/json.ejs
@@ -1 +1 @@
-<%=JSON.stringify(params, null, 4)%>
+<%-JSON.stringify(params, null, 4)%>
diff --git a/editor/web/src/codegen/python.ejs b/editor/web/src/codegen/python.ejs
index 31ac4e4..42aa721 100644
--- a/editor/web/src/codegen/python.ejs
+++ b/editor/web/src/codegen/python.ejs
@@ -26,4 +26,4 @@ def index():
     return render_cf_error_page(<%=paramsArg.replaceAll('\n', '\n    ')%>), 500
 
 if __name__ == '__main__':
-    app.run(debug=True, port=8080)
+    app.run(debug=True, port=5000)
diff --git a/editor/web/src/index.js b/editor/web/src/index.js
index f501ad8..07981c9 100644
--- a/editor/web/src/index.js
+++ b/editor/web/src/index.js
@@ -387,7 +387,7 @@ $('btnCopyLink').addEventListener('click', () => {
   navigator.clipboard.writeText(field.value).then(() => {
     shareLinkPopover.show();
     setTimeout(() => {
-      shareLinkPopover.hide()
+      shareLinkPopover.hide();
     }, 2000);
   });
 });
@@ -422,7 +422,9 @@ function saveFile(content, saveName) {
   document.body.removeChild(link);
   window.URL.revokeObjectURL(url);
 }
+
 let saveAsType;
+let saveAsContent;
 
 function updateSaveAsDialog(e) {
   if (e) {
@@ -445,7 +447,8 @@ function updateSaveAsDialog(e) {
   }
   const params = { ...lastCfg };
   delete params.time;
-  document.getElementById('saveAsDialogCode').innerHTML = codegen.generate(params);
+  $('saveAsDialogCode').innerHTML = saveAsContent = codegen.generate(params);
+  $('saveAsDialogCode').scrollTop = 0;
 
   document.querySelectorAll('#saveAsDialogTypes button').forEach((element) => {
     const isCurrent = element.dataset.type == saveAsType;
@@ -470,9 +473,9 @@ $('saveAsDialogCopyBtn').addEventListener('click', (e) => {
   field.select();
   // field.setSelectionRange(0, field.value.length);
   navigator.clipboard.writeText(field.value).then(() => {
-    saveAsDialogCopyPopover.show()
+    saveAsDialogCopyPopover.show();
     setTimeout(() => {
-      saveAsDialogCopyPopover.hide()
+      saveAsDialogCopyPopover.hide();
     }, 2000);
   });
 });
@@ -489,5 +492,5 @@ $('saveAsDialogSaveBtn').addEventListener('click', (e) => {
       saveName = 'cf_error_page_example.py';
       break;
   }
-  saveFile($('saveAsDialogCode').innerHTML, saveName);
+  saveFile(saveAsContent, saveName);
 });