vibespot 0.7.1 → 0.9.0

package/ui/setup.js

@@ -101,10 +101,8 @@ async function initSetup() {
       return;
     }
 
-    // Show fetch section if hs is installed
-    if (info.hsInstalled) {
-      document.getElementById("section-fetch").classList.remove("hidden");
-    }
+    // Reset panel state
+    remoteThemesLoaded = false;
 
   } catch (err) {
     showError("Could not connect to server. Is vibeSpot running?");
@@ -853,35 +851,226 @@ function hideError() {
   document.getElementById("setup-error").classList.add("hidden");
 }
 
+// ---------------------------------------------------------------------------
+// Action button panel toggling
+// ---------------------------------------------------------------------------
+
+let activePanel = null;
+let remoteThemesLoaded = false;
+
+function togglePanel(action) {
+  const panels = document.querySelectorAll(".setup__panel");
+  const buttons = document.querySelectorAll(".setup__action-btn");
+
+  // Close if same panel clicked
+  if (activePanel === action) {
+    panels.forEach((p) => p.classList.add("hidden"));
+    buttons.forEach((b) => b.classList.remove("active"));
+    activePanel = null;
+    return;
+  }
+
+  // Hide all, show target
+  panels.forEach((p) => p.classList.add("hidden"));
+  buttons.forEach((b) => b.classList.remove("active"));
+
+  const panelMap = { new: "panel-new", continue: "panel-continue", download: "panel-download", convert: "panel-convert" };
+  const panel = document.getElementById(panelMap[action]);
+  if (panel) {
+    panel.classList.remove("hidden");
+    activePanel = action;
+  }
+
+  // Mark button active
+  const btn = document.querySelector(`.setup__action-btn[data-action="${action}"]`);
+  if (btn) btn.classList.add("active");
+
+  // Focus input if applicable
+  if (action === "new") setTimeout(() => document.getElementById("new-theme-name")?.focus(), 50);
+  if (action === "convert") setTimeout(() => document.getElementById("import-url")?.focus(), 50);
+
+  // Load remote themes on first open
+  if (action === "download" && !remoteThemesLoaded) loadDownloadPanel();
+
+  // Populate continue panel
+  if (action === "continue") populateContinuePanel();
+}
+
+function populateContinuePanel() {
+  const container = document.getElementById("continue-projects");
+  const empty = document.getElementById("continue-empty");
+  if (!container) return;
+
+  // Gather projects from the rail
+  const railItems = document.querySelectorAll(".project-rail__item");
+  if (railItems.length === 0) {
+    container.innerHTML = "";
+    empty.classList.remove("hidden");
+    return;
+  }
+
+  empty.classList.add("hidden");
+  container.innerHTML = "";
+
+  railItems.forEach((item) => {
+    const name = item.dataset.name || item.querySelector(".project-rail__name")?.textContent || "";
+    const sessionId = item.dataset.sessionId || "";
+    const meta = item.querySelector(".project-rail__meta")?.textContent || "";
+
+    const pill = document.createElement("button");
+    pill.className = "setup__pill";
+    pill.innerHTML = `<span>${esc(name)}</span>${meta ? `<span class="setup__pill__meta">${esc(meta)}</span>` : ""}`;
+    pill.addEventListener("click", () => {
+      if (sessionId) {
+        resumeSession(sessionId);
+      } else {
+        openTheme(name);
+      }
+    });
+    container.appendChild(pill);
+  });
+}
+
+async function loadDownloadPanel() {
+  const accountEl = document.getElementById("dl-account");
+  const accountName = document.getElementById("dl-account-name");
+  const switchArea = document.getElementById("dl-account-switch");
+  const inputRow = document.getElementById("dl-input-row");
+  const hint = document.getElementById("dl-hint");
+  const noAccount = document.getElementById("dl-no-account");
+
+  accountEl.classList.add("hidden");
+  switchArea.classList.add("hidden");
+  inputRow.classList.add("hidden");
+  hint.classList.add("hidden");
+  noAccount.classList.add("hidden");
+
+  // Fetch active account info to show portal name
+  try {
+    const statusRes = await fetch("/api/settings/status");
+    const statusData = await statusRes.json();
+    const accounts = statusData.config?.hubspotAccounts || [];
+    const activeId = statusData.config?.activeHubSpotAccount;
+    const active = accounts.find((a) => a.portalId === activeId) || accounts[0];
+
+    if (active) {
+      accountName.textContent = `${active.portalName || active.portalId} (${active.portalId})`;
+      accountEl.classList.remove("hidden");
+      inputRow.classList.remove("hidden");
+      hint.classList.remove("hidden");
+
+      // Wire up change button
+      initDlAccountSwitch(accounts, activeId);
+      remoteThemesLoaded = true;
+    } else {
+      noAccount.classList.remove("hidden");
+    }
+  } catch {
+    noAccount.classList.remove("hidden");
+  }
+}
+
+function initDlAccountSwitch(accounts, activeId) {
+  const changeBtn = document.getElementById("dl-account-change");
+  const switchArea = document.getElementById("dl-account-switch");
+
+  // Remove old listener by replacing the element
+  const newBtn = changeBtn.cloneNode(true);
+  changeBtn.parentNode.replaceChild(newBtn, changeBtn);
+
+  newBtn.addEventListener("click", () => {
+    if (!switchArea.classList.contains("hidden")) { switchArea.classList.add("hidden"); return; }
+    switchArea.classList.remove("hidden");
+
+    let html = '<div style="display:flex;flex-direction:column;gap:6px">';
+    for (const acct of accounts) {
+      const isActive = acct.portalId === activeId;
+      html += `<button class="btn btn--${isActive ? "primary" : "secondary"} dl-acct-btn" data-portal="${esc(acct.portalId)}" style="text-align:left;padding:6px 12px;font-size:13px">${esc(acct.portalName || acct.portalId)} (${esc(acct.portalId)})${isActive ? " ✓" : ""}</button>`;
+    }
+    html += `<button class="btn btn--secondary dl-acct-btn" data-portal="__new" style="text-align:left;padding:6px 12px;font-size:13px">+ Add another account</button>`;
+    html += '</div>';
+    switchArea.innerHTML = html;
+
+    switchArea.querySelectorAll(".dl-acct-btn").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const pid = btn.dataset.portal;
+        if (pid === "__new") {
+          switchArea.classList.add("hidden");
+          if (typeof openSettings === "function") openSettings();
+          return;
+        }
+        if (pid === activeId) { switchArea.classList.add("hidden"); return; }
+        await fetch("/api/settings/hs-switch", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ portalId: pid }),
+        });
+        switchArea.classList.add("hidden");
+        // Reload themes for the new account
+        remoteThemesLoaded = false;
+        loadDownloadPanel();
+      });
+    });
+  });
+}
+
+async function downloadThemeByName() {
+  const input = document.getElementById("dl-theme-name");
+  const name = input.value.trim();
+  if (!name) { showError("Enter a theme name."); return; }
+
+  showLoading(`Downloading ${name} from HubSpot...`);
+
+  try {
+    const res = await fetch("/api/setup/fetch", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    const data = await res.json();
+
+    if (data.error) { showError(data.error); return; }
+    showApp(data.themeName);
+  } catch (err) {
+    showError("Failed to download theme: " + err.message);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Event listeners
 // ---------------------------------------------------------------------------
 
+// Action buttons
+document.querySelectorAll(".setup__action-btn").forEach((btn) => {
+  btn.addEventListener("click", () => togglePanel(btn.dataset.action));
+});
+
+// New theme
 document.getElementById("btn-create-theme").addEventListener("click", createTheme);
 document.getElementById("new-theme-name").addEventListener("keydown", (e) => {
   if (e.key === "Enter") { e.preventDefault(); createTheme(); }
 });
 
-document.getElementById("btn-fetch-theme").addEventListener("click", fetchTheme);
-document.getElementById("fetch-theme-name").addEventListener("keydown", (e) => {
-  if (e.key === "Enter") { e.preventDefault(); fetchTheme(); }
+// Download from HubSpot
+document.getElementById("btn-fetch-theme").addEventListener("click", downloadThemeByName);
+document.getElementById("dl-theme-name").addEventListener("keydown", (e) => {
+  if (e.key === "Enter") { e.preventDefault(); downloadThemeByName(); }
 });
 
-document.getElementById("btn-open-theme").addEventListener("click", () => {
-  openTheme(document.getElementById("open-theme-path").value.trim());
-});
-document.getElementById("open-theme-path").addEventListener("keydown", (e) => {
-  if (e.key === "Enter") { e.preventDefault(); document.getElementById("btn-open-theme").click(); }
-});
+// Settings link in download panel
+const dlSettingsLink = document.getElementById("dl-open-settings");
+if (dlSettingsLink) {
+  dlSettingsLink.addEventListener("click", (e) => { e.preventDefault(); openSettings(); });
+}
 
-// Import from GitHub (on setup screen)
+// Import from GitHub / Lovable
 document.getElementById("import-btn").addEventListener("click", async () => {
   const urlInput = document.getElementById("import-url");
   const url = urlInput.value.trim();
   if (!url) return;
 
   // Extract repo name to use as theme name
-  const repoMatch = url.match(/github\.com\/[\w.-]+\/([\w.-]+)/);
+  const repoMatch = url.match(/(?:github\.com|lovable\.dev)\/[\w.-]+\/([\w.-]+)/);
   const themeName = repoMatch ? repoMatch[1].replace(/\.git$/, "") : "imported-project";
 
   showLoading(`Importing ${themeName}...`);
@@ -893,7 +1082,7 @@ document.getElementById("import-btn").addEventListener("click", async () => {
     const setupRes = await fetch("/api/setup/create", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ themeName }),
+      body: JSON.stringify({ name: themeName }),
     });
     const setupData = await setupRes.json();
     if (setupData.error) {
@@ -932,8 +1121,6 @@ document.getElementById("import-url").addEventListener("keydown", (e) => {
   if (e.key === "Enter") { e.preventDefault(); document.getElementById("import-btn").click(); }
 });
 
-// API key is now handled in the settings panel (settings.js)
-
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------

package/ui/styles.css

@@ -270,6 +270,124 @@ body { display: flex; }
   margin-top: 6px;
 }
 
+/* Action buttons grid */
+.setup__actions {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.setup__action-btn {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 16px 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+.setup__action-btn:hover {
+  border-color: var(--accent);
+  background: var(--bg-card);
+}
+.setup__action-btn.active {
+  border-color: var(--accent);
+  background: var(--accent-bg, rgba(232, 97, 58, 0.08));
+}
+.setup__action-icon {
+  font-size: 20px;
+  line-height: 1;
+  opacity: 0.7;
+}
+.setup__action-btn.active .setup__action-icon { opacity: 1; }
+.setup__action-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  line-height: 1.4;
+}
+
+/* Expandable panels */
+.setup__panel {
+  padding: 12px 0;
+  animation: panelSlideIn 0.15s ease-out;
+}
+@keyframes panelSlideIn {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.setup__panel-account {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+}
+.setup__panel-account span { color: var(--text); font-weight: 500; }
+.setup__panel-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* Theme pills for Continue panel */
+.setup__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.setup__pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+.setup__pill:hover {
+  border-color: var(--accent);
+  background: var(--bg-card);
+}
+.setup__pill__meta {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Select dropdown */
+.setup__select {
+  flex: 1;
+  padding: 10px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+}
+.setup__select:focus { border-color: var(--accent-glow); }
+
 .setup__cards {
   display: flex;
   flex-wrap: wrap;
@@ -1017,6 +1135,18 @@ body { display: flex; }
   gap: 8px;
 }
 
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+  margin-left: 6px;
+  text-decoration: underline;
+}
+.btn-link:hover { opacity: 0.8; }
+
 /* HubSpot setup dialog (deferred install/auth) */
 .hs-setup__steps {
   margin: 12px 0 16px;
@@ -1686,6 +1816,130 @@ body { display: flex; }
   padding: 12px 16px;
   border-top: 1px solid var(--border);
   background: var(--bg-panel-solid);
+  position: relative;
+}
+
+/* File chips (pending attachments) */
+.chat__file-chips {
+  display: none;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.chat__file-chips.visible {
+  display: flex;
+}
+
+.file-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  line-height: 1.4;
+}
+.file-chip--image {
+  background: rgba(74, 255, 74, 0.1);
+  border: 1px solid rgba(74, 255, 74, 0.3);
+  color: #4aff4a;
+}
+.file-chip--doc {
+  background: rgba(180, 120, 255, 0.1);
+  border: 1px solid rgba(180, 120, 255, 0.3);
+  color: #b478ff;
+}
+.file-chip__icon { font-size: 13px; }
+.file-chip__name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-chip__size {
+  color: var(--text-muted);
+  font-size: 10px;
+}
+.file-chip__remove {
+  background: none;
+  border: none;
+  color: #ff6b6b;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
+}
+.file-chip__remove:hover { color: #ff4444; }
+
+.file-chip--sent {
+  padding: 3px 8px;
+  font-size: 11px;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.25);
+  color: var(--text);
+}
+.file-chip--sent.file-chip--image {
+  background: rgba(74, 255, 74, 0.12);
+  border-color: rgba(74, 255, 74, 0.35);
+  color: #5cff5c;
+}
+.file-chip--sent.file-chip--doc {
+  background: rgba(180, 120, 255, 0.12);
+  border-color: rgba(180, 120, 255, 0.35);
+  color: #c49aff;
+}
+.file-chip--sent .file-chip__icon { font-size: 12px; }
+.file-chip--sent .file-chip__name {
+  max-width: 150px;
+}
+
+.chat-msg__files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-bottom: 6px;
+}
+
+/* Drop overlay */
+.chat__drop-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(74, 158, 255, 0.08);
+  border: 2px dashed var(--accent);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+.chat__drop-overlay.hidden { display: none; }
+.chat__drop-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--accent);
+  font-size: 14px;
+}
+
+/* Toast notification */
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: #333;
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  opacity: 0;
+  transition: opacity 0.3s, transform 0.3s;
+  z-index: 9999;
+}
+.toast.visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
 }
 
 .chat__input-wrapper {
@@ -1997,6 +2251,95 @@ body { display: flex; }
 }
 .settings__close:hover { background: var(--bg-hover); color: var(--text); }
 
+.settings__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  padding: 0 20px;
+  flex-shrink: 0;
+}
+.settings__tab {
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+  transition: color 0.15s, border-color 0.15s;
+}
+.settings__tab:hover { color: var(--text); }
+.settings__tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+.settings__description {
+  color: var(--text-muted);
+  font-size: 12px;
+  margin: 4px 0 12px;
+  line-height: 1.4;
+}
+
+.settings__toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+.settings__toggle-label {
+  font-size: 13px;
+  color: var(--text);
+}
+.settings__toggle-label-sub {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.settings__toggle {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background: var(--border);
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.settings__toggle.active { background: var(--accent); }
+.settings__toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+.settings__toggle.active::after { transform: translateX(16px); }
+
+.settings__mode-pills {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.settings__mode-pill {
+  flex: 1;
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.settings__mode-pill:not(:last-child) { border-right: 1px solid var(--border); }
+.settings__mode-pill:hover { background: var(--bg-hover); color: var(--text); }
+.settings__mode-pill.active { background: var(--accent); color: white; }
+
 .settings__body {
   overflow-y: auto;
   padding: 20px;