estela 0.1.3 → 0.1.6

package/web/app.js

@@ -36,7 +36,15 @@ async function api(path, options) {
     ...options,
   });
   const body = await res.json();
-  if (!res.ok) throw new Error(body.error || `Error ${res.status}`);
+  if (!res.ok) {
+    // El cuerpo entero viaja con el error, no solo el mensaje: quien llama a
+    // veces necesita distinguir un tipo de fallo de otro (por ejemplo,
+    // "falta vincular cuenta" de "cuota agotada"), y con solo el texto no
+    // hay forma fiable de hacerlo sin analizar frases.
+    const error = new Error(body.error || `Error ${res.status}`);
+    error.body = body;
+    throw error;
+  }
   return body;
 }
 
@@ -937,38 +945,55 @@ function wireProjects() {
   document.querySelectorAll(".share-btn").forEach((btn) => {
     btn.addEventListener("click", async () => {
       const card = btn.closest(".pcard");
+      const projectId = card.dataset.project;
       const out = card.querySelector(".share-out");
       btn.disabled = true;
       try {
+        // El token ya vive en la base de datos local (una fila por proyecto,
+        // se lee de state.projects.publications): guardarlo también en
+        // localStorage sería una segunda copia que puede desincronizarse de
+        // la real, y lo hizo — un token de una prueba vieja en el navegador
+        // pisó el que de verdad estaba publicado.
+        const known = state.projects?.publications?.find((p) => p.projectId === projectId);
         const r = await api("/api/publish", {
           method: "POST",
-          body: JSON.stringify({
-            projectId: card.dataset.project,
-            baseUrl: localStorage.getItem("estela.baseUrl") || "",
-            token: localStorage.getItem("estela.token." + card.dataset.project) || "",
-          }),
+          body: JSON.stringify({ projectId, token: known?.token || "" }),
         });
-        // Guardar el token: republicar con otro le rompería el enlace al cliente.
-        localStorage.setItem("estela.token." + card.dataset.project, r.token);
 
         out.hidden = false;
         out.innerHTML =
-          '<p class="share-line"><b>Panel generado</b> — ' + r.sizeKb + ' KB, un solo fichero.</p>' +
-          (r.url
-            ? '<p class="share-line">Enlace: <code>' + esc(r.url) + '</code></p>'
-            : '<label class="field"><span>Tu dominio (se recuerda)</span>' +
-              '<input class="base-url" type="text" placeholder="https://estela.tudominio.com"></label>') +
-          '<p class="share-line">1. Súbelo:</p><code class="cmd">' + esc(r.uploadCommand) + '</code>' +
-          '<p class="share-warn">Quien tenga el enlace, entra: no hay contraseña. Para revocarlo, ' +
-          'borra <code>e/' + esc(r.token) + '/</code> del servidor.</p>';
-
-        out.querySelector(".base-url")?.addEventListener("change", (e) => {
-          localStorage.setItem("estela.baseUrl", e.target.value.trim());
-          btn.click();
-        });
-        toast("Panel generado en ~/.estela/publicar");
-      } catch (error) { toast(error.message); }
-      finally { btn.disabled = false; }
+          '<p class="share-line"><b>' + (r.adopted ? "Panel vinculado" : "Panel publicado") +
+          '</b></p>' +
+          '<p class="share-line">Enlace: <code>' + esc(r.url) + '</code></p>' +
+          '<p class="share-warn">Quien tenga el enlace, entra: no hay contraseña.</p>';
+        toast(r.adopted ? "Vinculado a tu cuenta" : "Panel publicado");
+
+        // Publicar pone a cero los "bloques nuevos desde que lo publicaste",
+        // pero ese número vive en `state`, que se quedaba con el valor de
+        // antes: el aviso seguía ahí después de resolverlo, y solo se iba
+        // recargando la página a mano. Se vuelve a pedir el estado y se
+        // repinta, conservando el mensaje del enlace recién generado.
+        const recien = out.innerHTML;
+        await loadProjects();
+        const card2 = document.querySelector(`.pcard[data-project="${CSS.escape(projectId)}"]`);
+        const out3 = card2?.querySelector(".share-out");
+        if (out3) { out3.hidden = false; out3.innerHTML = recien; }
+      } catch (error) {
+        const out2 = card.querySelector(".share-out");
+        // "Sin cuenta" no es un error cualquiera: se enseña con el comando
+        // exacto para resolverlo, no como un aviso genérico que hay que
+        // interpretar. `needsLogin` viaja en el cuerpo desde /api/publish.
+        if (error.body?.needsLogin) {
+          out2.hidden = false;
+          out2.innerHTML =
+            '<p class="share-line"><b>Hace falta vincular una cuenta</b></p>' +
+            '<p class="share-line">Publicar aloja el panel en getestela.dev, y eso exige sesión:</p>' +
+            '<code class="cmd">estela login --email tu@correo.com</code>' +
+            '<p class="share-warn">Se ejecuta una vez, en la terminal. Luego vuelve a pulsar aquí.</p>';
+        } else {
+          toast(error.message);
+        }
+      } finally { btn.disabled = false; }
     });
   });
 
@@ -996,11 +1021,24 @@ function wireProjects() {
 
 // ── Informes ───────────────────────────────────────────────────────────
 
+/* Plegado por defecto: fecha y botón de descarga solo aparecen al pulsar el
+   proyecto, igual que un bloque de Mi día. Con muchos proyectos, la lista
+   entera desplegada era una columna larga sin forma de encontrar nada. */
+const REPORT_ROWS = 5;
+state.reportsQuery = "";
+state.reportsAll = false;
+state.reportsOpen = new Set();
+
 async function loadReports() {
   // Mismo periodo que Resumen: si las dos pantallas contestan a la misma
   // pregunta, tienen que dar el mismo número.
   const { from, to } = periodRange(state.period);
-  const overview = await api(`/api/overview?from=${from}&to=${to}`);
+  state.reportsOverview = await api(`/api/overview?from=${from}&to=${to}`);
+  renderReports();
+}
+
+function renderReports() {
+  const overview = state.reportsOverview;
   const parts = [];
 
   parts.push(`<div class="filters" id="rep-periods">
@@ -1026,19 +1064,42 @@ async function loadReports() {
       <code>estela status</code>
     </div>`);
   } else {
-    for (const row of overview.unbilled) {
+    // Filtra en el propio navegador: ya se tiene la lista entera cargada, y
+    // un buscador que hiciera una petición por letra tecleada sería más lento
+    // que no tenerlo.
+    const q = state.reportsQuery.trim().toLowerCase();
+    const matches = !q ? overview.unbilled : overview.unbilled.filter((row) =>
+      row.projectName.toLowerCase().includes(q) || row.clientName.toLowerCase().includes(q));
+
+    if (overview.unbilled.length > REPORT_ROWS || q) {
+      parts.push(`<input type="search" class="search" id="rep-search"
+        placeholder="Buscar proyecto o cliente…" value="${esc(state.reportsQuery)}">`);
+    }
+
+    if (q && matches.length === 0) {
+      parts.push(`<p class="note">Ningún proyecto coincide con «${esc(state.reportsQuery)}».</p>`);
+    }
+
+    const shown = state.reportsAll ? matches : matches.slice(0, REPORT_ROWS);
+
+    for (const row of shown) {
       const amount = fmtMoney(row.amountMinor, row.currency);
+      const open = state.reportsOpen.has(row.projectId);
       parts.push(`
-<div class="report">
-  <div class="report-text">
-    <div class="report-name">${esc(row.projectName)}</div>
-    <div class="report-client">${esc(row.clientName)} · ${row.blocks} bloques ·
-      todo lo pendiente desde ${esc(row.firstDay)}</div>
-  </div>
-  <div class="report-figs">
-    <div class="report-hours">${fmtDuration(row.seconds)}</div>
-    <div class="report-amount">${amount || "—"}</div>
-  </div>
+<div class="report${open ? " is-open" : ""}">
+  <button type="button" class="report-head" data-toggle-report="${esc(row.projectId)}" aria-expanded="${open}">
+    <div class="report-text">
+      <div class="report-name">${esc(row.projectName)}</div>
+      <div class="report-client">${esc(row.clientName)} · ${row.blocks} bloques ·
+        todo lo pendiente desde ${esc(row.firstDay)}</div>
+    </div>
+    <div class="report-figs">
+      <div class="report-hours">${fmtDuration(row.seconds)}</div>
+      <div class="report-amount">${amount || "—"}</div>
+    </div>
+    <span class="chev">›</span>
+  </button>
+  ${open ? `
   <form class="report-actions" data-project="${esc(row.projectId)}">
     <label class="field"><span>Desde</span>
       <input type="date" class="rep-from" value="${esc(row.firstDay)}"></label>
@@ -1049,9 +1110,17 @@ async function loadReports() {
     <label class="checkline"><input type="checkbox" class="rep-amounts">
       <span>Incluir importes</span></label>
     <button type="submit" class="btn-main">Descargar informe</button>
-  </form>
+  </form>` : ""}
 </div>`);
     }
+
+    if (!state.reportsAll && matches.length > REPORT_ROWS) {
+      parts.push(`<button type="button" class="more" id="reports-more">
+        Ver ${matches.length - REPORT_ROWS} proyecto${matches.length - REPORT_ROWS === 1 ? "" : "s"} más</button>`);
+    } else if (state.reportsAll && matches.length > REPORT_ROWS) {
+      parts.push(`<button type="button" class="more" id="reports-more">Ver menos</button>`);
+    }
+
     parts.push(`<p class="note">El informe recoge horas y commits. No es una factura:
       Estela no emite documentos fiscales, adjunta este respaldo a la tuya.</p>`);
   }
@@ -1059,7 +1128,35 @@ async function loadReports() {
   $("#reports-body").innerHTML = parts.join("");
 
   document.querySelectorAll("#rep-periods .period").forEach((btn) => {
-    btn.addEventListener("click", () => { state.period = btn.dataset.period; loadReports(); });
+    btn.addEventListener("click", () => {
+      state.period = btn.dataset.period; state.reportsAll = false; loadReports();
+    });
+  });
+
+  const search = $("#rep-search");
+  search?.addEventListener("input", () => {
+    state.reportsQuery = search.value;
+    state.reportsAll = false;
+    renderReports();
+    // renderReports() reconstruye el input entero: sin esto, el foco salta
+    // fuera de la caja de búsqueda con cada letra que se escribe.
+    const again = $("#rep-search");
+    again.focus();
+    again.setSelectionRange(again.value.length, again.value.length);
+  });
+
+  $("#reports-more")?.addEventListener("click", () => {
+    state.reportsAll = !state.reportsAll;
+    renderReports();
+  });
+
+  document.querySelectorAll("[data-toggle-report]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const id = btn.dataset.toggleReport;
+      if (state.reportsOpen.has(id)) state.reportsOpen.delete(id);
+      else state.reportsOpen.add(id);
+      renderReports();
+    });
   });
 
   document.querySelectorAll(".report-actions").forEach((form) => {
@@ -1239,11 +1336,74 @@ document.addEventListener("keydown", (e) => {
   if (e.key === "ArrowRight" && !$("#next-day").disabled) moveDay(1);
 });
 
+// ── Upgrade y banner de ofertas ───────────────────────────────────────
+
+async function loadAccountUpgrade() {
+  try {
+    const account = await api("/api/account");
+    $("#upgrade-wrap").hidden = account.plan === "pro" || account.plan === "teams";
+  } catch {
+    // Si no se puede saber el plan, mejor no ofrecer un botón que no va a
+    // completar la compra.
+    $("#upgrade-wrap").hidden = true;
+  }
+}
+
+$("#upgrade-btn").addEventListener("click", () => {
+  $("#upgrade-menu").hidden = !$("#upgrade-menu").hidden;
+});
+
+document.querySelectorAll(".upgrade-option").forEach((btn) => {
+  btn.addEventListener("click", async () => {
+    btn.disabled = true;
+    try {
+      const { url } = await api("/api/billing/checkout", {
+        method: "POST", body: JSON.stringify({ plan: btn.dataset.plan }),
+      });
+      window.open(url, "_blank", "noopener");
+      $("#upgrade-menu").hidden = true;
+    } catch (error) {
+      // needsLogin viaja en el cuerpo desde /api/billing/checkout, mismo
+      // criterio que ya usa /api/publish para distinguir "hace falta
+      // vincular cuenta" de un error genérico.
+      toast(error.body?.needsLogin
+        ? "Vincula tu cuenta primero: estela login --email tu@correo.com"
+        : error.message);
+    } finally {
+      btn.disabled = false;
+    }
+  });
+});
+
+async function loadBanner() {
+  try {
+    const banner = await api("/api/banner");
+    if (!banner.enabled || !banner.text) return;
+    // Recordado por texto, no por un id: si el admin cambia el mensaje,
+    // vuelve a aparecer aunque el anterior ya se hubiera cerrado.
+    if (localStorage.getItem("estela.bannerDismissed") === banner.text) return;
+
+    $("#banner-text").textContent = banner.text;
+    const link = $("#banner-link");
+    if (banner.link) { link.href = banner.link; link.hidden = false; } else { link.hidden = true; }
+    $("#banner-promo").hidden = false;
+  } catch {
+    // Sin conexión, o getestela.dev caído: el banner simplemente no sale.
+  }
+}
+
+$("#banner-close").addEventListener("click", () => {
+  localStorage.setItem("estela.bannerDismissed", $("#banner-text").textContent);
+  $("#banner-promo").hidden = true;
+});
+
 // ── Arranque ───────────────────────────────────────────────────────────
 
 /* Arranca en el resumen: la primera pregunta al abrir es "¿cómo va todo?",
    no "¿qué hice hoy?". El día concreto está a un clic. */
 (async function boot() {
+  loadAccountUpgrade();
+  loadBanner();
   await loadSummary();
 
   /* Si hoy no tiene actividad, "Mi día" apunta al último día con trabajo:

package/web/index.html

@@ -12,8 +12,7 @@
 
 <header class="top">
   <div class="brand">
-    <img class="mark" src="/logo-mark.png" alt="" aria-hidden="true">
-    Estela
+    <img class="brand-logo" src="/logo.png" alt="getestela.dev">
   </div>
   <nav class="tabs" role="tablist">
     <button type="button" class="tab is-on" data-view="summary" role="tab">Resumen</button>
@@ -23,6 +22,17 @@
     <button type="button" class="tab" data-view="projects" role="tab">Proyectos</button>
   </nav>
   <div class="top-right" id="top-right">
+    <div class="upgrade-wrap" id="upgrade-wrap" hidden>
+      <button type="button" class="btn-main btn-upgrade" id="upgrade-btn">Actualizar a Pro o Teams</button>
+      <div class="upgrade-menu" id="upgrade-menu" hidden>
+        <button type="button" class="upgrade-option" data-plan="pro">
+          <b>Pro</b><span>9€/mes · paneles y sync ilimitados</span>
+        </button>
+        <button type="button" class="upgrade-option" data-plan="teams">
+          <b>Teams</b><span>15€/persona/mes · horas de equipo medidas</span>
+        </button>
+      </div>
+    </div>
     <span class="sync-warn" id="sync-warn" hidden></span>
     <button type="button" class="sync" id="sync" title="Buscar trabajo nuevo (R)">
       <span class="sync-dot" aria-hidden="true"></span>
@@ -31,6 +41,12 @@
   </div>
 </header>
 
+<div class="banner-promo" id="banner-promo" hidden>
+  <span id="banner-text"></span>
+  <a id="banner-link" href="#" target="_blank" rel="noopener" hidden>Ver más →</a>
+  <button type="button" id="banner-close" aria-label="Cerrar">×</button>
+</div>
+
 <main>
   <!-- ══════════════ EQUIPO — quién trabaja en qué ══════════════ -->
   <section class="view" id="view-team">