From 3f96f4f81bc1ee76f909e45ab2f5e6ea11ba6a34 Mon Sep 17 00:00:00 2001
From: clawbot <clawbot@noreply.git.eeqj.de>
Date: Tue, 10 Mar 2026 11:23:36 -0700
Subject: [PATCH] fix: match original table UI with immediate per-action
 submission
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the Save All workflow with the original per-action behavior:
- Edit row: shows Save/Cancel buttons, submits full set immediately
- Delete row: shows confirmation dialog, submits full set immediately
- Add row: submits full set immediately on Add click

Moves Alpine.js logic into a proper envVarEditor component in
app-detail.js. Initializes env var data from hidden span elements
with data attributes for safe HTML escaping.

All actions collect the complete env var set and POST to the single
bulk endpoint POST /apps/{id}/env — no Save All button needed.
---
 static/js/app-detail.js   |  62 ++++++++++++++++++
 templates/app_detail.html | 134 +++++++++++++++-----------------------
 2 files changed, 113 insertions(+), 83 deletions(-)

diff --git a/static/js/app-detail.js b/static/js/app-detail.js
index 9778ea8..8636d54 100644
--- a/static/js/app-detail.js
+++ b/static/js/app-detail.js
@@ -6,6 +6,68 @@
  */
 
 document.addEventListener("alpine:init", () => {
+    // ============================================
+    // Environment Variable Editor Component
+    // ============================================
+    Alpine.data("envVarEditor", () => ({
+        vars: [],
+        editIdx: -1,
+        editKey: "",
+        editVal: "",
+
+        init() {
+            this.vars = Array.from(this.$el.querySelectorAll(".env-init")).map(
+                (span) => ({
+                    key: span.dataset.key,
+                    value: span.dataset.value,
+                }),
+            );
+        },
+
+        startEdit(i) {
+            this.editIdx = i;
+            this.editKey = this.vars[i].key;
+            this.editVal = this.vars[i].value;
+        },
+
+        saveEdit(i) {
+            this.vars[i] = { key: this.editKey, value: this.editVal };
+            this.editIdx = -1;
+            this.submitAll();
+        },
+
+        removeVar(i) {
+            if (!window.confirm("Delete this environment variable?")) {
+                return;
+            }
+
+            this.vars.splice(i, 1);
+            this.submitAll();
+        },
+
+        addVar(keyEl, valEl) {
+            const k = keyEl.value.trim();
+            const v = valEl.value.trim();
+
+            if (!k) {
+                return;
+            }
+
+            this.vars.push({ key: k, value: v });
+            this.submitAll();
+        },
+
+        submitAll() {
+            this.$refs.bulkData.value = this.vars
+                .map((e) => e.key + "=" + e.value)
+                .join("\n");
+            this.$refs.bulkForm.submit();
+        },
+    }));
+
+    // ============================================
+    // App Detail Page Component
+    // ============================================
     Alpine.data("appDetail", (config) => ({
         appId: config.appId,
         currentDeploymentId: config.initialDeploymentId,
diff --git a/templates/app_detail.html b/templates/app_detail.html
index e315e4c..0e10cf9 100644
--- a/templates/app_detail.html
+++ b/templates/app_detail.html
@@ -101,91 +101,59 @@
     </div>
 
     <!-- Environment Variables -->
-    <div class="card p-6 mb-6" x-data="{
-        vars: [],
-        newKey: '',
-        newValue: '',
-        init() {
-            const text = this.$refs.envVarsField.value;
-            if (!text.trim()) return;
-            this.vars = text.split('\n')
-                .map(l => l.trim())
-                .filter(l => l !== '')
-                .map(l => {
-                    const idx = l.indexOf('=');
-                    if (idx === -1) return null;
-                    return { key: l.substring(0, idx), value: l.substring(idx + 1), editing: false };
-                })
-                .filter(v => v !== null);
-        },
-        addVar() {
-            if (this.newKey.trim() === '') return;
-            this.vars.push({ key: this.newKey.trim(), value: this.newValue, editing: false });
-            this.newKey = '';
-            this.newValue = '';
-        },
-        removeVar(index) {
-            this.vars.splice(index, 1);
-        },
-        prepareSubmit() {
-            this.$refs.envVarsField.value = this.vars.map(v => v.key + '=' + v.value).join('\n');
-        }
-    }">
+    <div class="card p-6 mb-6" x-data="envVarEditor()">
         <h2 class="section-title mb-4">Environment Variables</h2>
-        <form method="POST" action="/apps/{{.App.ID}}/env" @submit="prepareSubmit()">
+        {{range .EnvVars}}<span class="env-init hidden" data-key="{{.Key}}" data-value="{{.Value}}"></span>{{end}}
+        <template x-if="vars.length > 0">
+        <div class="overflow-x-auto mb-4">
+            <table class="table">
+                <thead class="table-header">
+                    <tr>
+                        <th>Key</th>
+                        <th>Value</th>
+                        <th class="text-right">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="table-body">
+                    <template x-for="(env, idx) in vars" :key="idx">
+                    <tr>
+                        <template x-if="editIdx !== idx">
+                            <td class="font-mono font-medium" x-text="env.key"></td>
+                        </template>
+                        <template x-if="editIdx !== idx">
+                            <td class="font-mono text-gray-500" x-text="env.value"></td>
+                        </template>
+                        <template x-if="editIdx !== idx">
+                            <td class="text-right">
+                                <button @click="startEdit(idx)" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
+                                <button @click="removeVar(idx)" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
+                            </td>
+                        </template>
+                        <template x-if="editIdx === idx">
+                            <td colspan="3">
+                                <form @submit.prevent="saveEdit(idx)" class="flex gap-2 items-center">
+                                    <input type="text" x-model="editKey" required class="input flex-1 font-mono text-sm">
+                                    <input type="text" x-model="editVal" required class="input flex-1 font-mono text-sm">
+                                    <button type="submit" class="btn-primary text-sm">Save</button>
+                                    <button type="button" @click="editIdx = -1" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button>
+                                </form>
+                                <p class="text-xs text-amber-600 mt-1">⚠ Container restart needed after env var changes.</p>
+                            </td>
+                        </template>
+                    </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
+        </template>
+        <form @submit.prevent="addVar($refs.newKey, $refs.newVal)" class="flex flex-col sm:flex-row gap-2">
+            <input x-ref="newKey" type="text" placeholder="KEY" required class="input flex-1 font-mono text-sm">
+            <input x-ref="newVal" type="text" placeholder="value" required class="input flex-1 font-mono text-sm">
+            <button type="submit" class="btn-primary">Add</button>
+        </form>
+        <form x-ref="bulkForm" method="POST" action="/apps/{{.App.ID}}/env" class="hidden">
             {{ .CSRFField }}
-            <template x-if="vars.length > 0">
-                <div class="overflow-x-auto mb-4">
-                    <table class="table">
-                        <thead class="table-header">
-                            <tr>
-                                <th>Key</th>
-                                <th>Value</th>
-                                <th class="text-right">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody class="table-body">
-                            <template x-for="(v, index) in vars" :key="index">
-                                <tr>
-                                    <template x-if="!v.editing">
-                                        <td class="font-mono font-medium" x-text="v.key"></td>
-                                    </template>
-                                    <template x-if="!v.editing">
-                                        <td class="font-mono text-gray-500" x-text="v.value"></td>
-                                    </template>
-                                    <template x-if="!v.editing">
-                                        <td class="text-right">
-                                            <button type="button" @click="v.editing = true" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
-                                            <button type="button" @click="removeVar(index)" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
-                                        </td>
-                                    </template>
-                                    <template x-if="v.editing">
-                                        <td colspan="3">
-                                            <div class="flex gap-2 items-center">
-                                                <input type="text" x-model="v.key" required class="input flex-1 font-mono text-sm">
-                                                <input type="text" x-model="v.value" required class="input flex-1 font-mono text-sm">
-                                                <button type="button" @click="v.editing = false" class="btn-primary text-sm">Done</button>
-                                            </div>
-                                            <p class="text-xs text-amber-600 mt-1">⚠ Container restart needed after env var changes.</p>
-                                        </td>
-                                    </template>
-                                </tr>
-                            </template>
-                        </tbody>
-                    </table>
-                </div>
-            </template>
-            <div class="flex flex-col sm:flex-row gap-2 mb-3">
-                <input type="text" x-model="newKey" placeholder="KEY" class="input flex-1 font-mono text-sm">
-                <input type="text" x-model="newValue" placeholder="value" class="input flex-1 font-mono text-sm">
-                <button type="button" @click="addVar()" class="btn-secondary">Add</button>
-            </div>
-            <textarea name="env_vars" x-ref="envVarsField" class="hidden">{{range .EnvVars}}{{.Key}}={{.Value}}
-{{end}}</textarea>
-            <div class="flex items-center gap-3">
-                <button type="submit" class="btn-primary">Save All</button>
-                <p class="text-xs text-amber-600">⚠ Container restart needed after env var changes.</p>
-            </div>
+            <textarea x-ref="bulkData" name="env_vars"></textarea>
         </form>
     </div>