vibespot 0.4.0

package/ui/dashboard.js

@@ -0,0 +1,383 @@
+/**
+ * Dashboard screen — project overview with templates, module library, and brand assets.
+ * Sits between setup (project list) and chat (template editing).
+ */
+
+const dashboardScreen = document.getElementById("dashboard-screen");
+
+// Page type labels for display
+const PAGE_TYPE_LABELS = {
+  landing_page: "LP",
+  blog_post: "Blog",
+  website_page: "Web",
+  module_only: "Mod",
+};
+
+const PAGE_TYPE_FULL_LABELS = {
+  landing_page: "Landing Page",
+  blog_post: "Blog Post",
+  website_page: "Website Page",
+  module_only: "Module Only",
+};
+
+// ---------------------------------------------------------------------------
+// Show / hide dashboard
+// ---------------------------------------------------------------------------
+
+let currentDashboardTheme = "";
+
+async function showDashboard(themeName) {
+  currentDashboardTheme = themeName;
+
+  // Hide other screens
+  setupScreen.classList.add("hidden");
+  document.getElementById("setup-topbar").classList.add("hidden");
+  appScreen.classList.add("hidden");
+  dashboardScreen.classList.remove("hidden");
+
+  document.getElementById("dashboard-theme-name").textContent = themeName;
+
+  // Update URL
+  const target = "#/dashboard/" + encodeURIComponent(themeName);
+  if (location.hash !== target) {
+    history.pushState(null, "", target);
+  }
+
+  // Load dashboard data
+  await refreshDashboard();
+}
+
+function hideDashboard() {
+  dashboardScreen.classList.add("hidden");
+  currentDashboardTheme = "";
+  closeModulePreview();
+}
+
+// ---------------------------------------------------------------------------
+// Load dashboard data from server
+// ---------------------------------------------------------------------------
+
+async function refreshDashboard() {
+  try {
+    const res = await fetch("/api/dashboard");
+    const data = await res.json();
+    if (data.error) {
+      console.warn("Dashboard load error:", data.error);
+      return;
+    }
+    renderTemplateList(data.templates || []);
+    renderModuleLibrary(data.moduleLibrary || []);
+    renderBrandAssets(data.brandAssets || {});
+  } catch (err) {
+    console.error("Failed to load dashboard:", err);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Template list
+// ---------------------------------------------------------------------------
+
+function renderTemplateList(templates) {
+  const list = document.getElementById("dashboard-template-list");
+  const countEl = document.getElementById("dashboard-template-count");
+  countEl.textContent = templates.length;
+
+  if (templates.length === 0) {
+    list.innerHTML = `<p class="dashboard__empty-state">No templates yet. Choose a page type above to get started.</p>`;
+    return;
+  }
+
+  list.innerHTML = "";
+  for (const tpl of templates) {
+    const item = document.createElement("div");
+    item.className = "dashboard__template-item";
+    item.innerHTML = `
+      <span class="dashboard__template-badge dashboard__template-badge--${tpl.pageType}">${esc(PAGE_TYPE_LABELS[tpl.pageType] || "?")}</span>
+      <span class="dashboard__template-label">${esc(tpl.label)}</span>
+      <span class="dashboard__template-meta">${tpl.moduleCount} module${tpl.moduleCount !== 1 ? "s" : ""}</span>
+      <button class="btn btn--sm btn--primary dashboard__template-open" data-id="${esc(tpl.id)}">Open</button>
+      <button class="dashboard__template-delete" data-id="${esc(tpl.id)}" title="Delete template">&times;</button>
+    `;
+    list.appendChild(item);
+  }
+
+  // Attach click handlers
+  list.querySelectorAll(".dashboard__template-open").forEach((btn) => {
+    btn.addEventListener("click", () => openTemplate(btn.dataset.id));
+  });
+  list.querySelectorAll(".dashboard__template-delete").forEach((btn) => {
+    btn.addEventListener("click", () => confirmDeleteTemplate(btn.dataset.id));
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Module library
+// ---------------------------------------------------------------------------
+
+let activePreviewModule = "";
+
+function renderModuleLibrary(modules) {
+  const container = document.getElementById("dashboard-module-library");
+
+  if (modules.length === 0) {
+    container.innerHTML = `<p class="dashboard__empty-state">Modules will appear here as you build pages.</p>`;
+    closeModulePreview();
+    return;
+  }
+
+  container.innerHTML = "";
+  for (const mod of modules) {
+    const chip = document.createElement("span");
+    chip.className = "dashboard__module-chip";
+    if (mod.moduleName === activePreviewModule) chip.classList.add("dashboard__module-chip--active");
+    chip.textContent = mod.moduleName;
+    chip.title = `Used in: ${mod.usedIn.join(", ")}`;
+    chip.dataset.module = mod.moduleName;
+    chip.dataset.usedIn = mod.usedIn.join(", ");
+    chip.addEventListener("click", () => toggleModulePreview(mod.moduleName, mod.usedIn));
+    container.appendChild(chip);
+  }
+}
+
+function toggleModulePreview(moduleName, usedIn) {
+  if (activePreviewModule === moduleName) {
+    closeModulePreview();
+    return;
+  }
+  showModulePreview(moduleName, usedIn);
+}
+
+async function showModulePreview(moduleName, usedIn) {
+  const previewEl = document.getElementById("dashboard-module-preview");
+  const nameEl = document.getElementById("dashboard-preview-name");
+  const usedEl = document.getElementById("dashboard-preview-used");
+  const frame = document.getElementById("dashboard-preview-frame");
+
+  activePreviewModule = moduleName;
+
+  // Update active chip styling
+  document.querySelectorAll(".dashboard__module-chip").forEach((c) => {
+    c.classList.toggle("dashboard__module-chip--active", c.dataset.module === moduleName);
+  });
+
+  nameEl.textContent = moduleName;
+  usedEl.textContent = usedIn ? `Used in: ${usedIn.join(", ")}` : "";
+  previewEl.classList.remove("hidden");
+
+  // Load preview into iframe
+  try {
+    const res = await fetch(`/module-preview?module=${encodeURIComponent(moduleName)}`);
+    const html = await res.text();
+    frame.srcdoc = html;
+  } catch {
+    frame.srcdoc = "<p style='padding:2rem;color:#888;font-family:sans-serif'>Preview unavailable</p>";
+  }
+}
+
+function closeModulePreview() {
+  activePreviewModule = "";
+  const previewEl = document.getElementById("dashboard-module-preview");
+  previewEl.classList.add("hidden");
+  document.querySelectorAll(".dashboard__module-chip").forEach((c) => {
+    c.classList.remove("dashboard__module-chip--active");
+  });
+}
+
+// Close button for module preview
+document.getElementById("dashboard-preview-close").addEventListener("click", closeModulePreview);
+
+// ---------------------------------------------------------------------------
+// Brand assets
+// ---------------------------------------------------------------------------
+
+function renderBrandAssets(assets) {
+  const sgIcon = document.getElementById("brand-icon-styleguide");
+  const bvIcon = document.getElementById("brand-icon-brandvoice");
+
+  if (assets.hasStyleguide) {
+    sgIcon.textContent = "\u2713";
+    sgIcon.classList.add("brand-asset-upload__icon--done");
+  } else {
+    sgIcon.textContent = "+";
+    sgIcon.classList.remove("brand-asset-upload__icon--done");
+  }
+
+  if (assets.hasBrandvoice) {
+    bvIcon.textContent = "\u2713";
+    bvIcon.classList.add("brand-asset-upload__icon--done");
+  } else {
+    bvIcon.textContent = "+";
+    bvIcon.classList.remove("brand-asset-upload__icon--done");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+
+async function createTemplateFromPageType(pageType) {
+  const defaultLabels = {
+    landing_page: "Landing Page",
+    blog_post: "Blog Post",
+    website_page: "Website Page",
+    module_only: "Module",
+  };
+
+  const label = await vibePrompt("Template name", defaultLabels[pageType] || "New Template");
+  if (!label) return;
+
+  try {
+    const res = await fetch("/api/templates", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ pageType, label }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      await vibeAlert(data.error, "Error");
+      return;
+    }
+
+    // Open the newly created template in chat
+    openTemplate(data.template.id);
+  } catch (err) {
+    await vibeAlert("Failed to create template: " + err.message, "Error");
+  }
+}
+
+async function openTemplate(templateId) {
+  try {
+    // Activate the template on the server
+    const res = await fetch("/api/templates/activate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ templateId }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      await vibeAlert(data.error, "Error");
+      return;
+    }
+
+    // Transition to chat screen
+    showChat(currentDashboardTheme, templateId);
+  } catch (err) {
+    await vibeAlert("Failed to open template: " + err.message, "Error");
+  }
+}
+
+async function confirmDeleteTemplate(templateId) {
+  const ok = await vibeConfirm("Delete this template?", "This cannot be undone.", { confirmLabel: "Delete" });
+  if (!ok) return;
+
+  try {
+    await fetch("/api/templates", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ templateId }),
+    });
+    await refreshDashboard();
+  } catch (err) {
+    await vibeAlert("Failed to delete: " + err.message, "Error");
+  }
+}
+
+async function uploadBrandAsset(type) {
+  const uploadEl = document.getElementById(`brand-upload-${type}`);
+  const fileInput = uploadEl.querySelector("input[type=file]");
+
+  // Trigger file picker
+  fileInput.click();
+}
+
+async function handleBrandFileSelected(type, file) {
+  const content = await file.text();
+
+  try {
+    const res = await fetch("/api/brand-assets", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, content }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      await vibeAlert(data.error, "Error");
+      return;
+    }
+    refreshDashboard();
+  } catch (err) {
+    await vibeAlert("Failed to upload: " + err.message, "Error");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Chat screen transition
+// ---------------------------------------------------------------------------
+
+function showChat(themeName, templateId) {
+  hideDashboard();
+
+  // Show app screen
+  appScreen.classList.remove("hidden");
+  document.getElementById("theme-name").textContent = themeName;
+
+  // Update browser chrome URL bar
+  const urlEl = document.getElementById("browser-url");
+  if (urlEl) urlEl.textContent = themeName + ".vibespot.app";
+
+  // Update URL
+  const target = `#/app/${encodeURIComponent(themeName)}/${encodeURIComponent(templateId)}`;
+  if (location.hash !== target) {
+    history.pushState(null, "", target);
+  }
+
+  // Connect WebSocket (defined in chat.js)
+  if (typeof connectWebSocket === "function") {
+    connectWebSocket();
+  }
+
+  // Load initial preview
+  if (typeof refreshPreview === "function") {
+    refreshPreview();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Event listeners
+// ---------------------------------------------------------------------------
+
+// Page type cards
+document.querySelectorAll(".page-type-card").forEach((card) => {
+  card.addEventListener("click", () => {
+    createTemplateFromPageType(card.dataset.type);
+  });
+});
+
+// Back button → setup
+document.getElementById("dashboard-back").addEventListener("click", () => {
+  hideDashboard();
+  if (typeof showSetup === "function") showSetup();
+});
+
+// Settings button
+document.getElementById("dashboard-settings-btn").addEventListener("click", () => {
+  if (typeof openSettings === "function") openSettings();
+});
+
+// Deploy button
+document.getElementById("dashboard-deploy-btn").addEventListener("click", () => {
+  if (typeof startUpload === "function") {
+    // Need to show app screen temporarily for upload
+    appScreen.classList.remove("hidden");
+    dashboardScreen.classList.add("hidden");
+    startUpload();
+  }
+});
+
+// Brand asset file inputs
+document.getElementById("brand-upload-styleguide").querySelector("input").addEventListener("change", (e) => {
+  if (e.target.files[0]) handleBrandFileSelected("styleguide", e.target.files[0]);
+});
+document.getElementById("brand-upload-brandvoice").querySelector("input").addEventListener("change", (e) => {
+  if (e.target.files[0]) handleBrandFileSelected("brandvoice", e.target.files[0]);
+});

package/ui/dialog.js

@@ -0,0 +1,117 @@
+/**
+ * Shared modal dialog utilities — styled replacements for native alert/confirm/prompt.
+ * Uses the existing .confirm-overlay / .confirm-dialog CSS pattern.
+ */
+
+// HTML-escape helper (standalone so dialog.js has no load-order dependency)
+if (typeof esc === "undefined") {
+  // eslint-disable-next-line no-var
+  var esc = function (str) {
+    const el = document.createElement("span");
+    el.textContent = String(str);
+    return el.innerHTML;
+  };
+}
+
+/**
+ * Show a styled alert dialog (replaces window.alert).
+ * @param {string} message — the message to display
+ * @param {string} [title] — optional dialog title
+ * @returns {Promise<void>}
+ */
+function vibeAlert(message, title) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    overlay.innerHTML = `
+      <div class="confirm-dialog">
+        ${title ? `<div class="confirm-dialog__title">${esc(title)}</div>` : ""}
+        <p class="confirm-dialog__detail">${esc(message)}</p>
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--primary" data-action="ok">OK</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    const close = () => { overlay.remove(); resolve(); };
+    overlay.querySelector('[data-action="ok"]').addEventListener("click", close);
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+  });
+}
+
+/**
+ * Show a styled confirm dialog (replaces window.confirm).
+ * @param {string} title — dialog title / question
+ * @param {string} [detail] — optional detail text
+ * @param {object} [opts] — options: { confirmLabel, confirmClass }
+ * @returns {Promise<boolean>}
+ */
+function vibeConfirm(title, detail, opts) {
+  const label = (opts && opts.confirmLabel) || "Confirm";
+  const btnClass = (opts && opts.confirmClass) || "btn--danger";
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    overlay.innerHTML = `
+      <div class="confirm-dialog">
+        <div class="confirm-dialog__title">${esc(title)}</div>
+        ${detail ? `<p class="confirm-dialog__warn">${esc(detail)}</p>` : ""}
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--secondary" data-action="cancel">Cancel</button>
+          <button class="btn ${btnClass}" data-action="confirm">${esc(label)}</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    const close = (val) => { overlay.remove(); resolve(val); };
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", () => close(false));
+    overlay.querySelector('[data-action="confirm"]').addEventListener("click", () => close(true));
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(false); });
+  });
+}
+
+/**
+ * Show a styled prompt dialog with an input field (replaces window.prompt).
+ * @param {string} title — dialog title
+ * @param {string} [defaultValue] — pre-filled input value
+ * @param {string} [placeholder] — input placeholder
+ * @returns {Promise<string|null>} — input value or null if cancelled
+ */
+function vibePrompt(title, defaultValue, placeholder) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    overlay.innerHTML = `
+      <div class="confirm-dialog">
+        <div class="confirm-dialog__title">${esc(title)}</div>
+        <input
+          type="text"
+          class="confirm-dialog__input"
+          value="${esc(defaultValue || "")}"
+          placeholder="${esc(placeholder || "")}"
+          data-role="input"
+        />
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--secondary" data-action="cancel">Cancel</button>
+          <button class="btn btn--primary" data-action="ok">OK</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    const input = overlay.querySelector('[data-role="input"]');
+    setTimeout(() => { input.focus(); input.select(); }, 50);
+
+    const close = (val) => { overlay.remove(); resolve(val); };
+
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", () => close(null));
+    overlay.querySelector('[data-action="ok"]').addEventListener("click", () => close(input.value));
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(null); });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") close(input.value);
+      if (e.key === "Escape") close(null);
+    });
+  });
+}