vibespot 1.2.0 → 1.3.0

package/ui/code-editor.js

@@ -77,7 +77,18 @@ function renderCodeFileList(files) {
       const itemEl = document.createElement("div");
       itemEl.className = "code-view__file-item";
       itemEl.dataset.fileId = f.id;
-      itemEl.innerHTML = (FILE_ICONS[f.lang] || "") + '<span class="code-view__file-name">' + f.label + "</span>";
+      // HubSpot-familiar trust signals: HubL on the templated module HTML,
+      // HubSpot fields schema on fields.json. These tell HubSpot devs "this
+      // is real CMS output, not generic web code".
+      let badge = "";
+      if (f.fileType === "html") {
+        badge = ' <span class="code-view__file-tag code-view__file-tag--hubl" title="Renders HubL — HubSpot CMS templating language">HubL</span>';
+      } else if (f.fileType === "fields") {
+        badge = ' <span class="code-view__file-tag code-view__file-tag--fields" title="HubSpot module field schema">HubSpot fields</span>';
+      }
+      itemEl.innerHTML = (FILE_ICONS[f.lang] || "")
+        + '<span class="code-view__file-name">' + f.label + "</span>"
+        + badge;
       itemEl.addEventListener("click", () => openCodeFile(f));
       groupEl.appendChild(itemEl);
     }
@@ -348,24 +359,55 @@ async function loadCodeFiles() {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Split view — preview + code side by side via CSS grid
+// ---------------------------------------------------------------------------
+
+function enterSplitView() {
+  const panelRight = document.getElementById("panel-right");
+  const previewEl = document.getElementById("preview-container");
+  const codeEl = document.getElementById("code-view");
+
+  document.querySelector(".right-split").classList.remove("hidden");
+  panelRight.classList.add("split-active");
+  previewEl.classList.remove("hidden");
+  codeEl.classList.remove("hidden");
+  loadCodeFiles();
+}
+
+function exitSplitView() {
+  const panelRight = document.getElementById("panel-right");
+  panelRight.classList.remove("split-active");
+}
+
 document.querySelectorAll(".view-toggle__btn").forEach((btn) => {
   btn.addEventListener("click", () => {
     const view = btn.dataset.view;
-    document.querySelectorAll(".view-toggle__btn").forEach((b) => b.classList.remove("active"));
-    btn.classList.add("active");
+    document.querySelectorAll(".view-toggle__btn").forEach((b) => {
+      const isActive = b === btn;
+      b.classList.toggle("active", isActive);
+      // Only the role="tab" buttons (Preview / Split / Code) carry
+      // aria-selected — the plan sidebar toggle uses aria-pressed instead.
+      if (b.getAttribute("role") === "tab") {
+        b.setAttribute("aria-selected", isActive ? "true" : "false");
+      }
+    });
 
     const previewEl = document.getElementById("preview-container");
     const codeEl = document.getElementById("code-view");
-    const chromeBar = document.getElementById("browser-chrome");
 
-    if (view === "code") {
-      previewEl.classList.add("hidden");
+    exitSplitView();
+
+    if (view === "split") {
+      enterSplitView();
+    } else if (view === "code") {
+      document.querySelector(".right-split").classList.add("hidden");
       codeEl.classList.remove("hidden");
       loadCodeFiles();
     } else {
+      document.querySelector(".right-split").classList.remove("hidden");
       codeEl.classList.add("hidden");
       previewEl.classList.remove("hidden");
-      // Refresh preview if code was saved while in code view
       if (codeSavedSinceSwitch && typeof refreshPreview === "function") {
         refreshPreview();
       }