fix: use /env routes for env var CRUD, fixing 404 on env var forms

Change route patterns in routes.go from /env-vars to /env and update
edit/delete form actions in app_detail.html to match. The add form
already used /env and was correct.

Update test route setup to match the new /env paths.

Closes #156

internal/handlers/handlers_test.go

@@ -732,11 +732,11 @@ func TestHandleEnvVarDeleteUsesCorrectRouteParam(t *testing.T) {
 
 	// Use chi router with the real route pattern to test param name
 	r := chi.NewRouter()
-	r.Post("/apps/{id}/env-vars/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
+	r.Post("/apps/{id}/env/{varID}/delete", testCtx.handlers.HandleEnvVarDelete())
 
 	request := httptest.NewRequest(
 		http.MethodPost,
-		"/apps/"+createdApp.ID+"/env-vars/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
+		"/apps/"+createdApp.ID+"/env/"+strconv.FormatInt(envVar.ID, 10)+"/delete",
 		nil,
 	)
 	recorder := httptest.NewRecorder()

internal/server/routes.go

@@ -82,9 +82,9 @@ func (s *Server) SetupRoutes() {
 			r.Post("/apps/{id}/start", s.handlers.HandleAppStart())
 
 			// Environment variables
-			r.Post("/apps/{id}/env-vars", s.handlers.HandleEnvVarAdd())
+			r.Post("/apps/{id}/env", s.handlers.HandleEnvVarAdd())
-			r.Post("/apps/{id}/env-vars/{varID}/edit", s.handlers.HandleEnvVarEdit())
+			r.Post("/apps/{id}/env/{varID}/edit", s.handlers.HandleEnvVarEdit())
-			r.Post("/apps/{id}/env-vars/{varID}/delete", s.handlers.HandleEnvVarDelete())
+			r.Post("/apps/{id}/env/{varID}/delete", s.handlers.HandleEnvVarDelete())
 
 			// Labels
 			r.Post("/apps/{id}/labels", s.handlers.HandleLabelAdd())

static/js/app-detail.js

@@ -31,22 +31,14 @@ document.addEventListener("alpine:init", () => {
 
       // Set up scroll listeners after DOM is ready
       this.$nextTick(() => {
-                this._initScrollTracking(
+        this._initScrollTracking(this.$refs.containerLogsWrapper, '_containerAutoScroll');
-                    this.$refs.containerLogsWrapper,
+        this._initScrollTracking(this.$refs.buildLogsWrapper, '_buildAutoScroll');
-                    "_containerAutoScroll",
-                );
-                this._initScrollTracking(
-                    this.$refs.buildLogsWrapper,
-                    "_buildAutoScroll",
-                );
       });
     },
 
     _schedulePoll() {
       if (this._pollTimer) clearTimeout(this._pollTimer);
-            const interval = Alpine.store("utils").isDeploying(this.appStatus)
+      const interval = Alpine.store("utils").isDeploying(this.appStatus) ? 1000 : 10000;
-                ? 1000
-                : 10000;
       this._pollTimer = setTimeout(() => {
         this.fetchAll();
         this._schedulePoll();
@@ -55,29 +47,18 @@ document.addEventListener("alpine:init", () => {
 
     _initScrollTracking(el, flag) {
       if (!el) return;
-            el.addEventListener(
+      el.addEventListener('scroll', () => {
-                "scroll",
-                () => {
         this[flag] = Alpine.store("utils").isScrolledToBottom(el);
-                },
+      }, { passive: true });
-                { passive: true },
-            );
     },
 
     fetchAll() {
       this.fetchAppStatus();
       // Only fetch logs when the respective pane is visible
-            if (
+      if (this.$refs.containerLogsWrapper && this._isElementVisible(this.$refs.containerLogsWrapper)) {
-                this.$refs.containerLogsWrapper &&
-                this._isElementVisible(this.$refs.containerLogsWrapper)
-            ) {
         this.fetchContainerLogs();
       }
-            if (
+      if (this.showBuildLogs && this.$refs.buildLogsWrapper && this._isElementVisible(this.$refs.buildLogsWrapper)) {
-                this.showBuildLogs &&
-                this.$refs.buildLogsWrapper &&
-                this._isElementVisible(this.$refs.buildLogsWrapper)
-            ) {
         this.fetchBuildLogs();
       }
       this.fetchRecentDeployments();
@@ -126,9 +107,7 @@ document.addEventListener("alpine:init", () => {
         this.containerStatus = data.status;
         if (changed && this._containerAutoScroll) {
           this.$nextTick(() => {
-                        Alpine.store("utils").scrollToBottom(
+            Alpine.store("utils").scrollToBottom(this.$refs.containerLogsWrapper);
-                            this.$refs.containerLogsWrapper,
-                        );
           });
         }
       } catch (err) {
@@ -149,9 +128,7 @@ document.addEventListener("alpine:init", () => {
         this.buildStatus = data.status;
         if (changed && this._buildAutoScroll) {
           this.$nextTick(() => {
-                        Alpine.store("utils").scrollToBottom(
+            Alpine.store("utils").scrollToBottom(this.$refs.buildLogsWrapper);
-                            this.$refs.buildLogsWrapper,
-                        );
           });
         }
       } catch (err) {
@@ -161,9 +138,7 @@ document.addEventListener("alpine:init", () => {
 
     async fetchRecentDeployments() {
       try {
-                const res = await fetch(
+        const res = await fetch(`/apps/${this.appId}/recent-deployments`);
-                    `/apps/${this.appId}/recent-deployments`,
-                );
         const data = await res.json();
         this.deployments = data.deployments || [];
       } catch (err) {
@@ -196,8 +171,7 @@ document.addEventListener("alpine:init", () => {
 
     get buildStatusBadgeClass() {
       return (
-                Alpine.store("utils").statusBadgeClass(this.buildStatus) +
+        Alpine.store("utils").statusBadgeClass(this.buildStatus) + " text-xs"
-                " text-xs"
       );
     },
 

static/js/dashboard.js

@@ -12,8 +12,7 @@ document.addEventListener("alpine:init", () => {
         this.$el.querySelectorAll("[data-time]").forEach((el) => {
           const time = el.getAttribute("data-time");
           if (time) {
-                        el.textContent =
+            el.textContent = Alpine.store("utils").formatRelativeTime(time);
-                            Alpine.store("utils").formatRelativeTime(time);
           }
         });
       }, 60000);

static/js/deployment.js

@@ -26,16 +26,9 @@ document.addEventListener("alpine:init", () => {
       this.$nextTick(() => {
         const wrapper = this.$refs.logsWrapper;
         if (wrapper) {
-                    wrapper.addEventListener(
+          wrapper.addEventListener('scroll', () => {
-                        "scroll",
+            this._autoScroll = Alpine.store("utils").isScrolledToBottom(wrapper);
-                        () => {
+          }, { passive: true });
-                            this._autoScroll =
-                                Alpine.store("utils").isScrolledToBottom(
-                                    wrapper,
-                                );
-                        },
-                        { passive: true },
-                    );
         }
       });
 
@@ -66,9 +59,7 @@ document.addEventListener("alpine:init", () => {
         // Scroll to bottom only when content changes AND user hasn't scrolled up
         if (logsChanged && this._autoScroll) {
           this.$nextTick(() => {
-                        Alpine.store("utils").scrollToBottom(
+            Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper);
-                            this.$refs.logsWrapper,
-                        );
           });
         }
 

static/js/utils.js

@@ -21,9 +21,7 @@ document.addEventListener("alpine:init", () => {
 
       if (diffSec < 60) return "just now";
       if (diffMin < 60)
-                return (
+        return diffMin + (diffMin === 1 ? " minute ago" : " minutes ago");
-                    diffMin + (diffMin === 1 ? " minute ago" : " minutes ago")
-                );
       if (diffHour < 24)
         return diffHour + (diffHour === 1 ? " hour ago" : " hours ago");
       if (diffDay < 7)
@@ -35,8 +33,7 @@ document.addEventListener("alpine:init", () => {
      * Get the badge class for a given status
      */
     statusBadgeClass(status) {
-            if (status === "running" || status === "success")
+      if (status === "running" || status === "success") return "badge-success";
-                return "badge-success";
       if (status === "building" || status === "deploying")
         return "badge-warning";
       if (status === "failed" || status === "error") return "badge-error";
@@ -75,9 +72,7 @@ document.addEventListener("alpine:init", () => {
      */
     isScrolledToBottom(el, tolerance = 30) {
       if (!el) return true;
-            return (
+      return el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance;
-                el.scrollHeight - el.scrollTop - el.clientHeight <= tolerance
-            );
     },
 
     /**

templates/app_detail.html

@@ -122,7 +122,7 @@
                         <template x-if="!editing">
                             <td class="text-right">
                                 <button @click="editing = true" class="text-primary-600 hover:text-primary-800 text-sm mr-2">Edit</button>
-                                <form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
+                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.ID}}/delete" class="inline" x-data="confirmAction('Delete this environment variable?')" @submit="confirm($event)">
                                     {{ $.CSRFField }}
                                     <button type="submit" class="text-error-500 hover:text-error-700 text-sm">Delete</button>
                                 </form>
@@ -130,7 +130,7 @@
                         </template>
                         <template x-if="editing">
                             <td colspan="3">
-                                <form method="POST" action="/apps/{{$.App.ID}}/env-vars/{{.ID}}/edit" class="flex gap-2 items-center">
+                                <form method="POST" action="/apps/{{$.App.ID}}/env/{{.ID}}/edit" class="flex gap-2 items-center">
                                     {{ $.CSRFField }}
                                     <input type="text" name="key" value="{{.Key}}" required class="input flex-1 font-mono text-sm">
                                     <input type="text" name="value" value="{{.Value}}" required class="input flex-1 font-mono text-sm">
@@ -146,7 +146,7 @@
             </table>
         </div>
         {{end}}
-        <form method="POST" action="/apps/{{.App.ID}}/env-vars" class="flex flex-col sm:flex-row gap-2">
+        <form method="POST" action="/apps/{{.App.ID}}/env" class="flex flex-col sm:flex-row gap-2">
                 {{ .CSRFField }}
             <input type="text" name="key" placeholder="KEY" required class="input flex-1 font-mono text-sm">
             <input type="text" name="value" placeholder="value" required class="input flex-1 font-mono text-sm">