feat: monolithic env var editing with bulk save (#158)

This PR fixes env var handling by consolidating individual add/edit/delete operations into a single monolithic bulk save.

## Changes

- **Template**: Restored original table-based UI with key/value rows, edit/delete buttons, and add form. Uses Alpine.js to manage the env var list client-side. On form submit, all env vars are collected into a hidden textarea and POSTed as a single bulk request.
- **Handler**: `HandleEnvVarSave` atomically replaces all env vars (DELETE all + INSERT full set).
- **Routes**: Single `POST /apps/{id}/env` endpoint replaces individual env var CRUD routes.
- **Models**: Added `DeleteEnvVarsByAppID` and `FindEnvVarsByAppID` for bulk operations.

closes #156
closes #163

Co-authored-by: clawbot <clawbot@noreply.git.eeqj.de>
Co-authored-by: Jeffrey Paul <sneak@noreply.example.org>
Co-authored-by: user <user@Mac.lan guest wan>
Reviewed-on: #158
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>

static/js/app-detail.js

@@ -6,6 +6,103 @@
  */
 
 document.addEventListener("alpine:init", () => {
+    // ============================================
+    // Environment Variable Editor Component
+    // ============================================
+    Alpine.data("envVarEditor", (appId) => ({
+        vars: [],
+        editIdx: -1,
+        editKey: "",
+        editVal: "",
+        appId: appId,
+
+        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() {
+            const csrfInput = this.$el.querySelector(
+                'input[name="gorilla.csrf.Token"]',
+            );
+            const csrfToken = csrfInput ? csrfInput.value : "";
+
+            fetch("/apps/" + this.appId + "/env", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-CSRF-Token": csrfToken,
+                },
+                body: JSON.stringify(
+                    this.vars.map((e) => ({ key: e.key, value: e.value })),
+                ),
+            })
+                .then((res) => {
+                    if (res.ok) {
+                        window.location.reload();
+                        return;
+                    }
+                    res.json()
+                        .then((data) => {
+                            window.alert(
+                                data.error ||
+                                    "Failed to save environment variables.",
+                            );
+                        })
+                        .catch(() => {
+                            window.alert(
+                                "Failed to save environment variables.",
+                            );
+                        });
+                })
+                .catch(() => {
+                    window.alert(
+                        "Network error: could not save environment variables.",
+                    );
+                });
+        },
+    }));
+
+    // ============================================
+    // App Detail Page Component
+    // ============================================
     Alpine.data("appDetail", (config) => ({
         appId: config.appId,
         currentDeploymentId: config.initialDeploymentId,