openclacky 1.3.6 → 1.3.7

data/lib/clacky/web/features/extensions/store.js

@@ -0,0 +1,184 @@
+// ── Extensions · store — data, state, network for the extension marketplace ─
+//
+// The store is the single source of truth for the public extension catalog. It
+// owns state, talks to the local server (which proxies the platform's public
+// /api/v1/extensions endpoint), and emits events so the view re-renders. It
+// NEVER touches the DOM directly.
+//
+// Extension archives are NOT downloadable from here — extensions ship inside
+// license-gated brand packages (path B distribution). This panel is a
+// read-only browse/search catalog of metadata only.
+//
+// Two event channels (same convention as the skills store):
+//   1. Internal bus (Extensions.on / _emit) — always live; the core view
+//      subscribes here so the panel keeps rendering under ?pure=true.
+//   2. Clacky.ext.emit(...) — extension bus; silenced in pure mode.
+//
+// Depends on: I18n, global $ / escapeHtml helpers, Clacky.ext (core/ext.js)
+// ───────────────────────────────────────────────────────────────────────────
+
+const ExtensionsStore = (() => {
+  // ── State (single source of truth) ─────────────────────────────────────
+  let _extensions = [];        // [{ id, name, name_zh, description, ..., units }]
+  let _query      = "";        // current search text
+  let _sort       = "newest";  // "newest" | "updated" | "downloads"
+  let _loading    = false;
+  let _error      = null;      // soft warning when the store is unreachable
+  let _detail     = null;      // currently opened extension detail, or null
+  let _detailLoading = false;
+  let _detailError   = null;
+
+  // ── Internal event bus ──────────────────────────────────────────────────
+  const _listeners = {};       // event => [handler]
+
+  function _on(event, handler) {
+    (_listeners[event] ||= []).push(handler);
+    return () => {
+      const list = _listeners[event];
+      const i = list ? list.indexOf(handler) : -1;
+      if (i >= 0) list.splice(i, 1);
+    };
+  }
+
+  function _emit(event, payload) {
+    (_listeners[event] || []).forEach((h) => h(payload));
+    if (window.Clacky && Clacky.ext) Clacky.ext.emit(event, payload);
+  }
+
+  // ── Read-only accessors used by the view ────────────────────────────────
+  const state = {
+    get extensions() { return _extensions; },
+    get query()      { return _query; },
+    get sort()       { return _sort; },
+    get loading()    { return _loading; },
+    get error()      { return _error; },
+    get detail()        { return _detail; },
+    get detailLoading() { return _detailLoading; },
+    get detailError()   { return _detailError; },
+  };
+
+  const Extensions = {
+    on: _on,
+    state,
+
+    /** Fetch the catalog from the server for the current query + sort. */
+    async load() {
+      _loading = true;
+      _error   = null;
+      _emit("extensions:loading");
+      try {
+        const params = new URLSearchParams();
+        if (_query) params.set("q", _query);
+        if (_sort)  params.set("sort", _sort);
+        const qs   = params.toString();
+        const res  = await fetch("/api/store/extensions" + (qs ? "?" + qs : ""));
+        const data = await res.json();
+        _extensions = data.extensions || [];
+        _error      = data.warning || null;
+        _loading    = false;
+        _emit("extensions:changed", { extensions: _extensions, warning: _error });
+      } catch (e) {
+        console.error("[Extensions] load failed", e);
+        _extensions = [];
+        _error      = I18n.t("extensions.loadFailed");
+        _loading    = false;
+        _emit("extensions:error", { network: true });
+      } finally {
+        _loading = false;
+      }
+    },
+
+    /** Set the search text and reload. */
+    setQuery(query) {
+      _query = (query || "").trim();
+      return Extensions.load();
+    },
+
+    /** Set the sort order and reload. */
+    setSort(sort) {
+      _sort = sort || "newest";
+      return Extensions.load();
+    },
+
+    /** Open the detail view for one extension (fetches contributes + versions). */
+    async loadDetail(id) {
+      if (!id) return;
+      _detail        = null;
+      _detailLoading = true;
+      _detailError   = null;
+      _emit("extensions:detail");
+      try {
+        const res  = await fetch("/api/store/extension?id=" + encodeURIComponent(id));
+        const data = await res.json();
+        if (res.ok && data.ok && data.extension) {
+          _detail      = data.extension;
+          _detailError = null;
+        } else {
+          _detail      = null;
+          _detailError = data.error || I18n.t("extensions.loadFailed");
+        }
+      } catch (e) {
+        console.error("[Extensions] loadDetail failed", e);
+        _detail      = null;
+        _detailError = I18n.t("extensions.loadFailed");
+      } finally {
+        _detailLoading = false;
+        _emit("extensions:detail");
+      }
+    },
+
+    /** Close the detail view. */
+    closeDetail() {
+      _detail        = null;
+      _detailLoading = false;
+      _detailError   = null;
+      _emit("extensions:detail");
+    },
+
+    /** Disable/enable an installed extension, then refresh the open detail. */
+    async setEnabled(id, enabled) {
+      if (!id) return;
+      const path = enabled ? "/api/store/extension/enable" : "/api/store/extension/disable";
+      try {
+        const res = await fetch(path, {
+          method:  "POST",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ id }),
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) throw new Error(data.error || "toggle failed");
+        await Extensions.loadDetail(id);
+        Extensions.load();
+      } catch (e) {
+        console.error("[Extensions] setEnabled failed", e);
+        _detailError = e.message;
+        _emit("extensions:detail");
+      }
+    },
+
+    /** Remove an installed extension, then return to the list. */
+    async uninstall(id) {
+      if (!id) return;
+      try {
+        const res = await fetch("/api/store/extension", {
+          method:  "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ id }),
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) throw new Error(data.error || "uninstall failed");
+        Extensions.closeDetail();
+        Extensions.load();
+      } catch (e) {
+        console.error("[Extensions] uninstall failed", e);
+        _detailError = e.message;
+        _emit("extensions:detail");
+      }
+    },
+  };
+
+  return Extensions;
+})();
+
+const Extensions = ExtensionsStore;
+Clacky.Extensions = Extensions;

data/lib/clacky/web/features/extensions/view.js

@@ -0,0 +1,389 @@
+// ── Extensions · view — rendering, DOM wiring for the extension marketplace ─
+//
+// The view owns everything DOM: the search bar, sort control, extension cards,
+// loading/empty states. It reads data only through ExtensionsStore.state and
+// reacts to store events via Extensions.on(...). It never fetches directly — it
+// calls store actions.
+//
+// The panel is read-only: extensions are delivered inside license-gated brand
+// packages, so there is no install button here, only a "how to get" hint.
+//
+// Depends on: ExtensionsStore (store.js), I18n/Router, global $ / escapeHtml.
+// ───────────────────────────────────────────────────────────────────────────
+
+const ExtensionsView = (() => {
+  let _domWired    = false;
+  let _searchTimer = null;
+
+  function _renderLoading() {
+    const container = $("extensions-list");
+    if (!container) return;
+    container.innerHTML = Array.from({ length: 4 }).map(() => `
+      <div class="extension-card">
+        <div class="extension-card-main">
+          <span class="skel" style="height:2rem;width:2rem;border-radius:8px;"></span>
+          <div class="extension-info">
+            <span class="skel skel-title"></span>
+            <span class="skel skel-subtitle"></span>
+          </div>
+        </div>
+      </div>`).join("");
+  }
+
+  function _renderEmpty() {
+    const container = $("extensions-list");
+    if (!container) return;
+    const key = ExtensionsStore.state.query ? "extensions.noResults" : "extensions.empty";
+    container.innerHTML = `<div class="extensions-empty">${escapeHtml(I18n.t(key))}</div>`;
+  }
+
+  function _renderList() {
+    const container = $("extensions-list");
+    if (!container) return;
+
+    if (ExtensionsStore.state.loading) { _renderLoading(); return; }
+
+    const list = ExtensionsStore.state.extensions;
+    if (!list || list.length === 0) { _renderEmpty(); return; }
+
+    container.innerHTML = "";
+    list.forEach(ext => container.appendChild(_renderCard(ext)));
+
+    _applyWarning(ExtensionsStore.state.error);
+  }
+
+  function _applyWarning(warning) {
+    const banner = $("extensions-warning");
+    if (!banner) return;
+    if (warning) {
+      banner.textContent   = warning;
+      banner.style.display = "";
+    } else {
+      banner.style.display = "none";
+    }
+  }
+
+  function _formatUnits(units) {
+    if (!units || typeof units !== "object") return "";
+    const parts = [];
+    Object.keys(units).forEach((type) => {
+      const n = parseInt(units[type], 10);
+      if (!n) return;
+      const key = "extensions.unit." + type + (n > 1 ? "s" : "");
+      const label = I18n.t(key);
+      const word = (label && label !== key) ? label : type;
+      parts.push(`${n} ${word}`);
+    });
+    return parts.join(" · ");
+  }
+
+  function _renderCard(ext) {
+    const currentLang = I18n.lang();
+    const name = (currentLang === "zh" && ext.name_zh) ? ext.name_zh : ext.name;
+    const description = (currentLang === "zh" && ext.description_zh)
+      ? ext.description_zh
+      : ext.description || "";
+    const emoji = ext.emoji || "🧩";
+
+    const versionHtml = ext.version
+      ? `<span class="extension-version">v${escapeHtml(String(ext.version))}</span>` : "";
+    const installedHtml = ext.installed
+      ? `<span class="extension-installed">${escapeHtml(I18n.t("extensions.installed"))}</span>` : "";
+    const unitsText = _formatUnits(ext.units);
+    const unitsHtml = unitsText
+      ? `<span class="extension-units">${escapeHtml(unitsText)}</span>` : "";
+    const homepageHtml = ext.homepage
+      ? `<a class="extension-homepage" href="${escapeHtml(ext.homepage)}" target="_blank" rel="noopener noreferrer">${I18n.t("extensions.homepage")}</a>`
+      : "";
+
+    const card = document.createElement("div");
+    card.className = "extension-card extension-card-clickable";
+    card.dataset.extId = ext.id != null ? String(ext.id) : (ext.name || "");
+    card.innerHTML = `
+      <div class="extension-card-main">
+        <div class="extension-emoji">${escapeHtml(emoji)}</div>
+        <div class="extension-info">
+          <div class="extension-title">
+            <span class="extension-name">${escapeHtml(name)}</span>
+            ${versionHtml}
+            ${installedHtml}
+            ${unitsHtml}
+          </div>
+          <div class="extension-desc">${escapeHtml(description)}</div>
+          <div class="extension-meta">
+            ${homepageHtml}
+          </div>
+        </div>
+      </div>`;
+    return card;
+  }
+
+  function _renderDetail() {
+    const panel = $("extensions-detail");
+    const body  = $("extensions-body");
+    if (!panel) return;
+
+    const st = ExtensionsStore.state;
+    const open = st.detail || st.detailLoading || st.detailError;
+
+    if (!open) {
+      panel.style.display = "none";
+      panel.innerHTML = "";
+      if (body) body.style.display = "";
+      return;
+    }
+
+    if (body) body.style.display = "none";
+    panel.style.display = "";
+
+    if (st.detailLoading) {
+      panel.innerHTML = _detailShell(`
+        <div class="extension-detail-loading">
+          <span class="skel skel-title"></span>
+          <span class="skel skel-subtitle"></span>
+        </div>`);
+      _wireDetail();
+      return;
+    }
+
+    if (st.detailError) {
+      panel.innerHTML = _detailShell(`
+        <div class="extensions-empty">${escapeHtml(st.detailError)}</div>`);
+      _wireDetail();
+      return;
+    }
+
+    panel.innerHTML = _detailShell(_detailContent(st.detail));
+    _wireDetail();
+  }
+
+  function _detailShell(inner) {
+    return `
+      <div class="extension-detail-head">
+        <button type="button" class="extension-detail-back" id="extension-detail-back">
+          ← ${escapeHtml(I18n.t("extensions.detail.back"))}
+        </button>
+      </div>
+      ${inner}`;
+  }
+
+  function _wireDetail() {
+    const back = $("extension-detail-back");
+    if (back) back.addEventListener("click", () => _backToList());
+
+    const toggle = document.querySelector("[data-ext-toggle]");
+    if (toggle) {
+      toggle.addEventListener("click", () => {
+        const id = toggle.getAttribute("data-ext-toggle");
+        const currentlyDisabled = toggle.getAttribute("data-ext-enabled") === "1";
+        Extensions.setEnabled(id, currentlyDisabled);
+      });
+    }
+
+    const remove = document.querySelector("[data-ext-remove]");
+    if (remove) {
+      remove.addEventListener("click", async () => {
+        const id = remove.getAttribute("data-ext-remove");
+        const ok = await Modal.confirm(I18n.t("extensions.action.removeConfirm"));
+        if (ok) Extensions.uninstall(id);
+      });
+    }
+  }
+
+  function _backToList() {
+    const router = window.Clacky && window.Clacky.Router;
+    if (router) router.navigate("extensions");
+    else Extensions.closeDetail();
+  }
+
+  function _detailContent(ext) {
+    const currentLang = I18n.lang();
+    const name = (currentLang === "zh" && ext.name_zh) ? ext.name_zh : ext.name;
+    const description = (currentLang === "zh" && ext.description_zh)
+      ? ext.description_zh
+      : ext.description || "";
+    const emoji = ext.emoji || "🧩";
+
+    const versionHtml = ext.version
+      ? `<span class="extension-version">v${escapeHtml(String(ext.version))}</span>` : "";
+    const installedHtml = ext.installed
+      ? `<span class="extension-installed">${escapeHtml(I18n.t("extensions.installed"))}</span>` : "";
+    const unitsText = _formatUnits(ext.units);
+    const unitsHtml = unitsText
+      ? `<span class="extension-units">${escapeHtml(unitsText)}</span>` : "";
+    const homepageHtml = ext.homepage
+      ? `<a class="extension-homepage" href="${escapeHtml(ext.homepage)}" target="_blank" rel="noopener noreferrer">${I18n.t("extensions.homepage")}</a>`
+      : "";
+
+    return `
+      <div class="extension-detail-hero">
+        <div class="extension-emoji extension-emoji-lg">${escapeHtml(emoji)}</div>
+        <div class="extension-detail-heading">
+          <div class="extension-title">
+            <span class="extension-name extension-name-lg">${escapeHtml(name)}</span>
+            ${versionHtml}
+            ${installedHtml}
+            ${unitsHtml}
+          </div>
+          <div class="extension-desc">${escapeHtml(description)}</div>
+          <div class="extension-meta">
+            ${homepageHtml}
+          </div>
+          ${_renderActions(ext)}
+        </div>
+      </div>
+      ${_renderContributes(ext.contributes)}
+      ${_renderVersions(ext.versions)}`;
+  }
+
+  // Manage buttons for a locally installed extension: enable/disable toggle
+  // (always available when installed) plus remove (installed layer only).
+  function _renderActions(ext) {
+    if (!ext.installed) return "";
+    const slug = ext.name || ext.slug || (ext.id != null ? String(ext.id) : "");
+    const toggleKey = ext.disabled ? "extensions.action.enable" : "extensions.action.disable";
+    const toggleCls = ext.disabled ? "extension-action-enable" : "extension-action-disable";
+    const disabledBadge = ext.disabled
+      ? `<span class="extension-disabled">${escapeHtml(I18n.t("extensions.disabled"))}</span>` : "";
+    const removeBtn = ext.removable
+      ? `<button type="button" class="extension-action extension-action-remove" data-ext-remove="${escapeHtml(slug)}">${escapeHtml(I18n.t("extensions.action.remove"))}</button>`
+      : "";
+    return `
+      <div class="extension-detail-actions">
+        ${disabledBadge}
+        <button type="button" class="extension-action ${toggleCls}" data-ext-toggle="${escapeHtml(slug)}" data-ext-enabled="${ext.disabled ? "1" : "0"}">${escapeHtml(I18n.t(toggleKey))}</button>
+        ${removeBtn}
+      </div>`;
+  }
+
+  function _sectionHeading(type) {
+    const key = "extensions.section." + type;
+    const label = I18n.t(key);
+    return (label && label !== key) ? label : type;
+  }
+
+  function _renderContributes(contributes) {
+    if (!contributes || typeof contributes !== "object") return "";
+    const currentLang = I18n.lang();
+    const sections = [];
+
+    Object.keys(contributes).forEach((type) => {
+      const items = contributes[type];
+      if (!Array.isArray(items) || items.length === 0) return;
+      const singular = type.replace(/s$/, "");
+      const heading = _sectionHeading(type);
+      const rows = items.map((it) => {
+        const title = (currentLang === "zh" && it.title_zh) ? it.title_zh
+          : (it.title || it.name || it.id || singular);
+        const desc = (currentLang === "zh" && it.description_zh) ? it.description_zh
+          : (it.description || "");
+        return `
+          <li class="extension-contrib-item">
+            <span class="extension-contrib-title">${escapeHtml(String(title))}</span>
+            ${desc ? `<span class="extension-contrib-desc">${escapeHtml(String(desc))}</span>` : ""}
+          </li>`;
+      }).join("");
+      sections.push(`
+        <div class="extension-detail-section">
+          <h4 class="extension-detail-section-title">${escapeHtml(heading)}</h4>
+          <ul class="extension-contrib-list">${rows}</ul>
+        </div>`);
+    });
+
+    if (sections.length === 0) return "";
+    return `
+      <div class="extension-detail-block">
+        <h3 class="extension-detail-block-title">${escapeHtml(I18n.t("extensions.detail.contributes"))}</h3>
+        ${sections.join("")}
+      </div>`;
+  }
+
+  function _renderVersions(versions) {
+    if (!Array.isArray(versions) || versions.length === 0) return "";
+    const rows = versions.map((v) => {
+      const date = v.published_at ? String(v.published_at).slice(0, 10) : "";
+      return `
+        <li class="extension-version-item">
+          <div class="extension-version-row">
+            <span class="extension-version">v${escapeHtml(String(v.version || ""))}</span>
+            ${date ? `<span class="extension-version-date">${escapeHtml(date)}</span>` : ""}
+          </div>
+          ${v.release_notes ? `<div class="extension-version-notes">${escapeHtml(String(v.release_notes))}</div>` : ""}
+        </li>`;
+    }).join("");
+    return `
+      <div class="extension-detail-block">
+        <h3 class="extension-detail-block-title">${escapeHtml(I18n.t("extensions.detail.versions"))}</h3>
+        <ul class="extension-version-list">${rows}</ul>
+      </div>`;
+  }
+
+  function _wireDom() {
+    if (_domWired) return;
+
+    const input = $("extensions-search-input");
+    if (input) {
+      input.placeholder = I18n.t("extensions.searchPlaceholder");
+      input.addEventListener("input", () => {
+        clearTimeout(_searchTimer);
+        _searchTimer = setTimeout(() => Extensions.setQuery(input.value), 300);
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") { e.preventDefault(); clearTimeout(_searchTimer); Extensions.setQuery(input.value); }
+      });
+    }
+
+    const sortSelect = $("extensions-sort");
+    if (sortSelect) {
+      sortSelect.value = ExtensionsStore.state.sort;
+      sortSelect.addEventListener("change", () => Extensions.setSort(sortSelect.value));
+    }
+
+    const list = $("extensions-list");
+    if (list) {
+      list.addEventListener("click", (e) => {
+        if (e.target.closest("a")) return;
+        const card = e.target.closest(".extension-card-clickable");
+        if (card && card.dataset.extId) {
+          const router = window.Clacky && window.Clacky.Router;
+          if (router) router.navigate("extensions", { detailId: card.dataset.extId });
+          else Extensions.loadDetail(card.dataset.extId);
+        }
+      });
+    }
+
+    document.addEventListener("langchange", () => {
+      if (input) input.placeholder = I18n.t("extensions.searchPlaceholder");
+      _renderList();
+      _renderDetail();
+    });
+
+    _domWired = true;
+  }
+
+  function _subscribe() {
+    Extensions.on("extensions:loading", _renderLoading);
+    Extensions.on("extensions:changed", _renderList);
+    Extensions.on("extensions:error",   _renderList);
+    Extensions.on("extensions:detail",  _renderDetail);
+  }
+
+  const viewApi = {
+    onPanelShow(opts) {
+      _wireDom();
+      const detailId = opts && opts.detailId;
+      if (detailId) {
+        Extensions.load();
+        Extensions.loadDetail(detailId);
+      } else {
+        Extensions.closeDetail();
+        Extensions.load();
+      }
+    },
+  };
+
+  return { init: _subscribe, api: viewApi };
+})();
+
+Object.assign(Extensions, ExtensionsView.api);
+ExtensionsView.init();