From 36c6036060c63f18a15b08786e34f6378a0e09a7 Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Mon, 18 May 2026 17:06:28 -0400
Subject: [PATCH] feat(central-ui): enlarge script modal; tab the Shared Script
 form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Script editor modal (TemplateEdit): the tabbed Trigger/Code/Parameters/
Return content is substantial, so the dialog now fills most of the
viewport — a .script-editor-modal class (96vw wide, ~full height) replaces
modal-xl, paired with modal-dialog-scrollable so the body scrolls.

Shared Script create/edit form (SharedScriptForm): Code, Parameters, and
Return type move from stacked sections into a tab strip, matching the
template script modal. Panels toggle via display:none so the Monaco editor
and JSONJoy island stay mounted across tab switches; Code is the default
tab. Name stays above the tabs.

Markup/CSS only — no logic change. CentralUI suite 316 green; both
verified in the browser.
---
 .../Pages/Design/SharedScriptForm.razor       | 70 +++++++++++++------
 .../Pages/Design/TemplateEdit.razor           |  2 +-
 src/ScadaLink.CentralUI/wwwroot/css/site.css  | 13 ++++
 3 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/src/ScadaLink.CentralUI/Components/Pages/Design/SharedScriptForm.razor b/src/ScadaLink.CentralUI/Components/Pages/Design/SharedScriptForm.razor
index 17761f6..236485b 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/SharedScriptForm.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/SharedScriptForm.razor
@@ -26,32 +26,59 @@
     {
         <div class="card mb-3">
             <div class="card-body">
-                <div class="mb-2">
+                <div class="mb-3">
                     <label class="form-label small">Name</label>
                     <input type="text" class="form-control form-control-sm" @bind="_formName"
                            disabled="@(Id.HasValue)" />
                 </div>
-                <div class="mb-3">
-                    <label class="form-label small">Parameters</label>
-                    <SchemaBuilder Mode="object"
-                                   Value="@_formParameters"
-                                   ValueChanged="@(v => _formParameters = v)" />
-                </div>
-                <div class="mb-3">
-                    <label class="form-label small">Return value</label>
-                    <SchemaBuilder Mode="value"
-                                   Value="@_formReturn"
-                                   ValueChanged="@(v => _formReturn = v)" />
-                </div>
-                <div class="mb-2">
-                    <label class="form-label small">Code</label>
-                    <MonacoEditor @ref="_editor" Value="@_formCode" ValueChanged="@(v => _formCode = v)"
-                                  Language="csharp" Height="320px"
-                                  DeclaredParameters="@ScriptParameterNames.Parse(_formParameters)"
-                                  DeclaredParameterShapes="@ScriptParameterNames.ParseShapes(_formParameters)"
-                                  MarkersChanged="@(m => { _markers = m; StateHasChanged(); })" />
-                    <ProblemsPanel Markers="@_markers" OnNavigate="@(m => _editor?.RevealLineAsync(m.StartLineNumber, m.StartColumn) ?? Task.CompletedTask)" />
+
+                @* Tabs: Code, Parameters, Return. Panels stay mounted (toggled
+                   via display:none) so the Monaco editor and the JSONJoy React
+                   island don't tear down on tab switch. *@
+                <ul class="nav nav-tabs" role="tablist">
+                    <li class="nav-item" role="presentation">
+                        <button type="button"
+                                class="nav-link @(_formTab == "code" ? "active" : "")"
+                                role="tab"
+                                aria-selected="@(_formTab == "code" ? "true" : "false")"
+                                @onclick='() => _formTab = "code"'>Code</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button type="button"
+                                class="nav-link @(_formTab == "parameters" ? "active" : "")"
+                                role="tab"
+                                aria-selected="@(_formTab == "parameters" ? "true" : "false")"
+                                @onclick='() => _formTab = "parameters"'>Parameters</button>
+                    </li>
+                    <li class="nav-item" role="presentation">
+                        <button type="button"
+                                class="nav-link @(_formTab == "return" ? "active" : "")"
+                                role="tab"
+                                aria-selected="@(_formTab == "return" ? "true" : "false")"
+                                @onclick='() => _formTab = "return"'>Return type</button>
+                    </li>
+                </ul>
+                <div class="border border-top-0 rounded-bottom p-3">
+                    <div style="display: @(_formTab == "code" ? "block" : "none")">
+                        <MonacoEditor @ref="_editor" Value="@_formCode" ValueChanged="@(v => _formCode = v)"
+                                      Language="csharp" Height="320px"
+                                      DeclaredParameters="@ScriptParameterNames.Parse(_formParameters)"
+                                      DeclaredParameterShapes="@ScriptParameterNames.ParseShapes(_formParameters)"
+                                      MarkersChanged="@(m => { _markers = m; StateHasChanged(); })" />
+                        <ProblemsPanel Markers="@_markers" OnNavigate="@(m => _editor?.RevealLineAsync(m.StartLineNumber, m.StartColumn) ?? Task.CompletedTask)" />
+                    </div>
+                    <div style="display: @(_formTab == "parameters" ? "block" : "none")">
+                        <SchemaBuilder Mode="object"
+                                       Value="@_formParameters"
+                                       ValueChanged="@(v => _formParameters = v)" />
+                    </div>
+                    <div style="display: @(_formTab == "return" ? "block" : "none")">
+                        <SchemaBuilder Mode="value"
+                                       Value="@_formReturn"
+                                       ValueChanged="@(v => _formReturn = v)" />
+                    </div>
                 </div>
+
                 @if (_formError != null)
                 {
                     <div class="text-danger small mt-2">@_formError</div>
@@ -156,6 +183,7 @@
     [Parameter] public int? Id { get; set; }
 
     private bool _loading;
+    private string _formTab = "code"; // "code" | "parameters" | "return"
     private string _formName = string.Empty;
     private string _formCode = string.Empty;
     private string? _formParameters;
diff --git a/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
index b83338e..64c8840 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Design/TemplateEdit.razor
@@ -863,7 +863,7 @@
         {
             var editingScript = _editScriptId.HasValue;
             <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
-                <div class="modal-dialog modal-xl modal-dialog-scrollable">
+                <div class="modal-dialog modal-dialog-scrollable script-editor-modal">
                     <div class="modal-content">
                         <div class="modal-header">
                             <h6 class="modal-title">@(editingScript ? "Edit Script" : "Add Script")</h6>
diff --git a/src/ScadaLink.CentralUI/wwwroot/css/site.css b/src/ScadaLink.CentralUI/wwwroot/css/site.css
index d8621ff..55a6252 100644
--- a/src/ScadaLink.CentralUI/wwwroot/css/site.css
+++ b/src/ScadaLink.CentralUI/wwwroot/css/site.css
@@ -86,3 +86,16 @@
     background: var(--bs-white);
     border-radius: 0.5rem;
 }
+
+/* Script editor modal — the tabbed Trigger/Code/Parameters/Return content is
+   substantial, so the dialog fills most of the viewport. Pairs with
+   .modal-dialog-scrollable so the body scrolls within the fixed height. */
+.modal-dialog.script-editor-modal {
+    max-width: 96vw;
+    width: 96vw;
+    height: calc(100vh - 2rem);
+}
+
+.modal-dialog.script-editor-modal .modal-content {
+    height: 100%;
+}