From 77ba31ce8fb7999c83c98f775ba3af446bbb4c44 Mon Sep 17 00:00:00 2001
From: Thomas Nilles <thomas@nilles.net>
Date: Thu, 15 Jan 2026 13:02:50 -0500
Subject: [PATCH] Inline component templates into JS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace HTML template lookups with programmatically created
  `<template>` elements.
- Add component‑specific styles and markup for CanvasDisplay, including
  a grid overlay SVG.
- Add SideMenu markup with toggle button, menu styling, and slot
  content.
---
 .../canvas-display/canvas-display.js          | 47 +++++++++++++++---
 static/components/side-menu/side-menu.js      | 48 +++++++++++++++++--
 2 files changed, 85 insertions(+), 10 deletions(-)

diff --git a/static/components/canvas-display/canvas-display.js b/static/components/canvas-display/canvas-display.js
index 82a864d..6bc47dc 100644
--- a/static/components/canvas-display/canvas-display.js
+++ b/static/components/canvas-display/canvas-display.js
@@ -13,12 +13,47 @@ class CanvasDisplay extends HTMLElement {
     // Attach shadow root
     this.attachShadow({ mode: "open" });
 
-    // Grab the template defined in canvas-display.html
-    const tmpl = document.getElementById("canvas-display-template");
-    if (!tmpl) {
-      console.error("CanvasDisplay: template not found");
-      return;
-    }
+    // Create a template element with the canvas-display markup directly in JS
+    const tmpl = document.createElement("template");
+    tmpl.innerHTML = `
+    <style>
+      :host {
+        display: block;
+        position: relative;
+        font-family: sans-serif;
+      }
+
+      .canvas-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--bg-color, #ffffff);
+      }
+
+      /* grid overlay */
+      .grid-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+    </style>
+
+    <div class="canvas-wrapper">
+      <canvas id="draw-canvas"></canvas>
+      <svg class="grid-overlay" id="grid-overlay"></svg>
+    </div>
+
+`;
     this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
 
     // Elements inside the shadow DOM
diff --git a/static/components/side-menu/side-menu.js b/static/components/side-menu/side-menu.js
index c0d572a..2a77f2e 100644
--- a/static/components/side-menu/side-menu.js
+++ b/static/components/side-menu/side-menu.js
@@ -6,11 +6,51 @@ class SideMenu extends HTMLElement {
 
     // Attach a shadow root and clone the template defined in side-menu.html
     this.attachShadow({ mode: "open" });
-    const tmpl = document.getElementById("side-menu-template");
-    if (!tmpl) {
-      console.error("SideMenu: template not found");
-      return;
+    // Create a template element with the side‑menu markup directly in JS
+    const tmpl = document.createElement("template");
+    tmpl.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      width: var(--side-menu-width, 250px);
+      height: 100%;
+      background: var(--side-menu-bg, #f9f9f9);
+      border-right: 1px solid #ccc;
+      box-sizing: border-box;
+      position: relative;
+      transition: transform 0.3s ease;
     }
+
+    .menu {
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    .toggle {
+      position: absolute;
+      top: 0.5rem;
+      right: -1.5rem;
+      background: var(--toggle-bg, #f0f0f0);
+      border: 1px solid #ccc;
+      border-left: none;
+      border-radius: 0 4px 4px 0;
+      padding: 0.25rem 0.5rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .collapsed {
+      transform: translateX(-100%);
+    }
+  </style>
+
+  <div class="toggle" part="toggle">☰</div>
+  <nav class="menu" part="menu">
+    <slot></slot>
+    <color-picker></color-picker>
+    <label id="grid-toggle-label"><input type="checkbox" id="grid-toggle"> Grid</label>
+  </nav>
+`;
     this.shadowRoot.appendChild(tmpl.content.cloneNode(true));
 
     // Reference the toggle button and the menu container