From cc1b33a8c18e1c2d71ae3aca5161dac28ae5a1f6 Mon Sep 17 00:00:00 2001
From: bluebird42 <2034043+bluebird42@users.noreply.github.com>
Date: Mon, 12 Oct 2026 22:14:07 +0200
Subject: [PATCH] Add a development alignment grid toggled with Ctrl+G

Render an 8px/32px grid overlay in both root layouts when dev routes are
enabled. Ctrl+G toggles it and the choice persists across page loads.
Production builds render nothing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 assets/js/app.js                              | 30 +++++++++++++++++++
 lib/mave_core_web/components/layouts.ex       | 26 ++++++++++++++++
 .../layouts/dashboard_root.html.heex          |  1 +
 .../components/layouts/root.html.heex         |  1 +
 4 files changed, 58 insertions(+)

diff --git a/assets/js/app.js b/assets/js/app.js
index 6f7dc7f..14d3eaf 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -746,6 +746,36 @@ window.addEventListener('mave:clipcopy', (event) => {
   }
 })
 
+// Development alignment grid: Ctrl+G toggles #dev-grid, which only renders
+// when dev routes are enabled. The state survives page loads.
+const DEV_GRID_KEY = "mave:dev-grid"
+
+const readDevGrid = () => {
+  try {
+    return localStorage.getItem(DEV_GRID_KEY) === "on"
+  } catch (_error) {
+    return false
+  }
+}
+
+const applyDevGrid = () => {
+  const grid = document.getElementById("dev-grid")
+  if (grid) grid.hidden = !readDevGrid()
+}
+
+window.addEventListener("keydown", (event) => {
+  const grid = document.getElementById("dev-grid")
+  if (!grid || !event.ctrlKey || event.metaKey || event.altKey || event.key.toLowerCase() !== "g") return
+
+  event.preventDefault()
+  grid.hidden = !grid.hidden
+  try {
+    localStorage.setItem(DEV_GRID_KEY, grid.hidden ? "off" : "on")
+  } catch (_error) {}
+})
+window.addEventListener("phx:page-loading-stop", applyDevGrid)
+applyDevGrid()
+
 // The lines below enable quality of life phoenix_live_reload
 // development features:
 //
diff --git a/lib/mave_core_web/components/layouts.ex b/lib/mave_core_web/components/layouts.ex
index d779319..708f845 100644
--- a/lib/mave_core_web/components/layouts.ex
+++ b/lib/mave_core_web/components/layouts.ex
@@ -8,6 +8,32 @@ defmodule MaveCoreWeb.Layouts do
 
   embed_templates "layouts/*"
 
+  @doc """
+  Renders a development-only alignment grid overlay, toggled with Ctrl+G.
+
+  Renders nothing unless dev routes are enabled, so the overlay never ships
+  in production builds.
+  """
+  if Application.compile_env(:mave_core, :dev_routes, false) do
+    def dev_grid(assigns) do
+      ~H"""
+      <div
+        id="dev-grid"
+        aria-hidden="true"
+        hidden
+        class="pointer-events-none fixed inset-0 z-[9999]"
+        style="background-image: linear-gradient(to right, rgb(255 0 80 / 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 0 80 / 0.22) 1px, transparent 1px), linear-gradient(to right, rgb(255 0 80 / 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 0 80 / 0.08) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;"
+      >
+      </div>
+      """
+    end
+  else
+    def dev_grid(assigns) do
+      ~H"""
+      """
+    end
+  end
+
   @doc """
   Shows the flash group with standard titles and content.
 
diff --git a/lib/mave_core_web/components/layouts/dashboard_root.html.heex b/lib/mave_core_web/components/layouts/dashboard_root.html.heex
index 217687b..f86ce43 100644
--- a/lib/mave_core_web/components/layouts/dashboard_root.html.heex
+++ b/lib/mave_core_web/components/layouts/dashboard_root.html.heex
@@ -12,5 +12,6 @@
   </head>
   <body class="bg-white h-full overflow-hidden">
     {@inner_content}
+    <.dev_grid />
   </body>
 </html>
diff --git a/lib/mave_core_web/components/layouts/root.html.heex b/lib/mave_core_web/components/layouts/root.html.heex
index 79518cb..90eff0a 100644
--- a/lib/mave_core_web/components/layouts/root.html.heex
+++ b/lib/mave_core_web/components/layouts/root.html.heex
@@ -11,5 +11,6 @@
   </head>
   <body>
     {@inner_content}
+    <.dev_grid />
   </body>
 </html>