From 6cfb37aa6469be685dfef86ecea5ae1c20447b6b Mon Sep 17 00:00:00 2001
From: Mitchell R <root@mitchellr.info>
Date: Thu, 21 May 2026 08:57:54 +0200
Subject: [PATCH] fix(admin): restore display layout switching

---
 docker-compose.coolify.yml                    |  6 +--
 .../service-admin-http/routes-admin.ts        |  9 +++-
 server/src/web-templates/admin-pages.tsx      | 43 +++++++++++--------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/docker-compose.coolify.yml b/docker-compose.coolify.yml
index dce08aa..9796c46 100644
--- a/docker-compose.coolify.yml
+++ b/docker-compose.coolify.yml
@@ -18,7 +18,8 @@ services:
       context: .
       dockerfile: deploy/docker/Dockerfile.server
       args:
-        BF_SERVER_VERSION: ${BF_SERVER_VERSION:-}
+        BF_SERVER_VERSION: ${BF_SERVER_VERSION:-${SOURCE_COMMIT:-dev}}
+        SOURCE_COMMIT: ${SOURCE_COMMIT:-}
     container_name: betterframe-server
     restart: unless-stopped
     environment:
@@ -27,8 +28,7 @@ services:
       - BF_SQLITE_PATH=/var/lib/betterframe/betterframe.db
       - BF_NODERED_URL=http://nodered:1880
       - BF_SELF_URL=http://server:18080
-      - BF_SERVER_VERSION=${BF_SERVER_VERSION:-}
-      - COOLIFY_GIT_COMMIT=${COOLIFY_GIT_COMMIT:-}
+      - BF_SERVER_VERSION=${BF_SERVER_VERSION:-${SOURCE_COMMIT:-dev}}
       - SOURCE_COMMIT=${SOURCE_COMMIT:-}
     volumes:
       - betterframe-data:/var/lib/betterframe
diff --git a/server/src/plugins/service-admin-http/routes-admin.ts b/server/src/plugins/service-admin-http/routes-admin.ts
index c1a30b6..ed80348 100644
--- a/server/src/plugins/service-admin-http/routes-admin.ts
+++ b/server/src/plugins/service-admin-http/routes-admin.ts
@@ -1498,9 +1498,13 @@ export function registerAdminRoutes(app: H3, deps: AdminDeps): void {
     });
   };
 
-  const displayLayoutSwitch = (event: any) => {
+  const displayLayoutSwitch = async (event: any) => {
     const displayId = Number(getRouterParam(event, "displayId"));
-    const layoutId = Number(getRouterParam(event, "layoutId"));
+    let layoutId = Number(getRouterParam(event, "layoutId"));
+    if (!Number.isFinite(layoutId) || layoutId <= 0) {
+      const body = await readBody<Record<string, string>>(event);
+      layoutId = Number(body?.["layout_id"]);
+    }
     if (Number.isFinite(displayId) && Number.isFinite(layoutId)) {
       const display = deps.repo.getDisplayById(displayId);
       const attached = deps.repo.listLayoutsForDisplay(displayId);
@@ -1516,6 +1520,7 @@ export function registerAdminRoutes(app: H3, deps: AdminDeps): void {
     }
     return new Response(null, { status: 302, headers: { location: `/admin/displays/${displayId}` } });
   };
+  app.post("/admin/displays/:displayId/layout", displayLayoutSwitch);
   app.post("/admin/displays/:displayId/layout/:layoutId", displayLayoutSwitch);
   app.get("/admin/displays/:displayId/layout/:layoutId", displayLayoutSwitch);
 
diff --git a/server/src/web-templates/admin-pages.tsx b/server/src/web-templates/admin-pages.tsx
index 914c17c..0d7a2ef 100644
--- a/server/src/web-templates/admin-pages.tsx
+++ b/server/src/web-templates/admin-pages.tsx
@@ -1561,13 +1561,21 @@ export function KioskEditPage(props: KioskEditProps) {
               <div style="font-size:0.85rem; font-weight:600; margin-bottom:0.5rem">Switch Layout By Display</div>
               <div style="display:grid; gap:0.75rem">
                 {props.displayLayouts.map(({ display, layouts }) => (
-                  <div style="display:grid; grid-template-columns:minmax(130px, 0.8fr) minmax(180px, 1fr) auto; gap:0.5rem; align-items:center">
+                  <form
+                    method="post"
+                    action={`/admin/displays/${String(display.id)}/layout`}
+                    style="display:grid; grid-template-columns:minmax(130px, 0.8fr) minmax(180px, 1fr) auto; gap:0.5rem; align-items:center"
+                    {...{
+                      "hx-post": `/admin/displays/${String(display.id)}/layout`,
+                      "hx-swap": "none",
+                    }}
+                  >
                     <div style="font-size:0.85rem">
                       <a href={`/admin/displays/${String(display.id)}`}><strong>{display.name}</strong></a>
                       <div style="color:#666; font-size:0.75rem">{String(display.width_px)}x{String(display.height_px)}</div>
                     </div>
                     {layouts.length > 0 ? (
-                      <select id={`display-layout-pick-${String(display.id)}`} class="form-input">
+                      <select name="layout_id" class="form-input">
                         {layouts.map((l) => (
                           <option value={String(l.id)}>{l.name}</option>
                         ))}
@@ -1576,16 +1584,11 @@ export function KioskEditPage(props: KioskEditProps) {
                       <span style="color:#999; font-size:0.85rem">No attached layouts</span>
                     )}
                     <button
-                      type="button"
+                      type="submit"
                       class="btn btn-sm"
                       disabled={layouts.length === 0}
-                      {...{
-                        "hx-post": `/admin/displays/${String(display.id)}/layout/0`,
-                        "hx-swap": "none",
-                        "hx-on::config-request": `event.detail.path = event.detail.path.replace(/\\/layout\\/.*/, '/layout/' + document.getElementById('display-layout-pick-${String(display.id)}').value);`,
-                      }}
                     >Switch</button>
-                  </div>
+                  </form>
                 )).join("")}
               </div>
             </div>
@@ -2518,23 +2521,25 @@ export function DisplayEditPage(props: DisplayEditPageProps) {
           {props.attachedLayouts.length > 0 && d.kiosk_id ? (
             <div style="margin-bottom:1rem; padding:0.75rem; background:#f9fafb; border-radius:4px">
               <div style="font-size:0.85rem; font-weight:600; margin-bottom:0.5rem">Switch Layout Now</div>
-              <div style="display:flex; gap:0.5rem; align-items:center">
-                <select id={`layout-pick-${d.id}`} class="form-input" style="flex:1">
+              <form
+                method="post"
+                action={`/admin/displays/${d.id}/layout`}
+                style="display:flex; gap:0.5rem; align-items:center"
+                {...{
+                  "hx-post": `/admin/displays/${d.id}/layout`,
+                  "hx-swap": "none",
+                }}
+              >
+                <select name="layout_id" class="form-input" style="flex:1">
                   {props.attachedLayouts.map((l) => (
                     <option value={String(l.id)}>{l.name}</option>
                   ))}
                 </select>
                 <button
-                  type="button"
+                  type="submit"
                   class="btn btn-sm"
-                  {...{
-                    "hx-post": `/admin/displays/${d.id}/layout/0`,
-                    "hx-swap": "none",
-                    "hx-vals": "js:{}",
-                    "hx-on::config-request": `event.detail.path = event.detail.path.replace(/\\/layout\\/.*/, '/layout/' + document.getElementById('layout-pick-${d.id}').value);`,
-                  }}
                 >Switch</button>
-              </div>
+              </form>
             </div>
           ) : null}