openclacky 1.1.2 → 1.1.4

data/lib/clacky/web/skills.js

@@ -19,6 +19,8 @@ const Skills = (() => {
   let _brandSkills = [];          // skills from cloud license API
   let _activeTab   = "my-skills"; // "my-skills" | "brand-skills"
   let _brandActivated = false;    // whether a license is currently active
+  let _freeMode       = false;    // brand-skills tab is showing free-mode skills
+  let _paidSkillsCount = 0;       // count of premium (encrypted) skills locked behind activation
   let _domWired       = false;    // whether one-time DOM listeners have been bound
   let _showSystemSkills = false;  // whether system (source=default) skills are shown
 
@@ -55,38 +57,14 @@ const Skills = (() => {
       const res  = await fetch("/api/brand/skills");
       const data = await res.json();
 
-      if (res.status === 403 || (data.ok === false && (data.error || "").toLowerCase().includes("not activated"))) {
-        // License not activated — show a friendly prompt instead of an error
-        const btn = document.createElement("button");
-        btn.className   = "brand-skills-activate-btn";
-        btn.textContent = I18n.t("skills.brand.activateBtn");
-        btn.addEventListener("click", () => {
-          // Reuse the same behaviour as the top banner: navigate to Settings,
-          // scroll to the license section, flash it, and focus the input.
-          if (typeof Brand !== "undefined" && Brand.goToLicenseInput) {
-            Brand.goToLicenseInput();
-          } else {
-            Router.navigate("settings");
-          }
-        });
-
-        const wrapper = document.createElement("div");
-        wrapper.className = "brand-skills-unlicensed";
-        wrapper.innerHTML = `
-          <div class="brand-skills-unlicensed-icon">🔒</div>
-          <div class="brand-skills-unlicensed-msg">${I18n.t("skills.brand.needsActivation")}</div>`;
-        wrapper.appendChild(btn);
-        container.innerHTML = "";
-        container.appendChild(wrapper);
-        return;
-      }
-
       if (!res.ok || !data.ok) {
         container.innerHTML = '<div class="brand-skills-error">' + escapeHtml(data.error || I18n.t("skills.brand.loadFailed")) + "</div>";
         return;
       }
 
-      _brandSkills = data.skills || [];
+      _brandSkills      = data.skills || [];
+      _freeMode         = !!data.free_mode;
+      _paidSkillsCount  = Number(data.paid_skills_count) || 0;
 
       // Soft warning: remote API unavailable but local skills returned.
       // Prefer the server-provided warning_code for proper i18n; fall back to
@@ -126,7 +104,7 @@ const Skills = (() => {
     if (!container) return;
     container.innerHTML = "";
 
-    if (_brandSkills.length === 0) {
+    if (_brandSkills.length === 0 && !(_freeMode && _paidSkillsCount > 0)) {
       container.innerHTML = `<div class="brand-skills-empty">${I18n.t("skills.brand.empty")}</div>`;
       return;
     }
@@ -135,6 +113,34 @@ const Skills = (() => {
       const card = _renderBrandSkillCard(skill);
       container.appendChild(card);
     });
+
+    // Free mode + premium skills exist → show a footer hint inviting the user to activate.
+    if (_freeMode && _paidSkillsCount > 0) {
+      const hint = document.createElement("div");
+      hint.className = "brand-skills-paid-hint";
+
+      const msgEl = document.createElement("div");
+      msgEl.className = "brand-skills-paid-hint-msg";
+      msgEl.textContent = I18n.t("skills.brand.paidHint", { n: _paidSkillsCount });
+      msgEl.setAttribute("data-i18n", "skills.brand.paidHint");
+      msgEl.setAttribute("data-i18n-vars", `n=${_paidSkillsCount}`);
+
+      const btn = document.createElement("button");
+      btn.className   = "brand-skills-activate-btn";
+      btn.textContent = I18n.t("skills.brand.activateBtn");
+      btn.setAttribute("data-i18n", "skills.brand.activateBtn");
+      btn.addEventListener("click", () => {
+        if (typeof Brand !== "undefined" && Brand.goToLicenseInput) {
+          Brand.goToLicenseInput();
+        } else {
+          Router.navigate("settings");
+        }
+      });
+
+      hint.appendChild(msgEl);
+      hint.appendChild(btn);
+      container.appendChild(hint);
+    }
   }
 
   /** Render a single brand skill card. */
@@ -164,8 +170,10 @@ const Skills = (() => {
         <button class="btn-brand-use" data-name="${escapeHtml(name)}">${I18n.t("skills.brand.btn.use")}</button>`;
     }
 
-    // All brand skills are private — always show the private badge
-    const privateBadge = `<span class="brand-skill-badge-private" title="${I18n.t("skills.brand.privateTip")}">🔒 ${I18n.t("skills.brand.private")}</span>`;
+    // Free skills show a "Free" badge; paid (encrypted) brand skills show "Private".
+    const badge = skill.is_free
+      ? `<span class="brand-skill-badge-free" title="${I18n.t("skills.brand.freeTip")}">✨ ${I18n.t("skills.brand.free")}</span>`
+      : `<span class="brand-skill-badge-private" title="${I18n.t("skills.brand.privateTip")}">🔒 ${I18n.t("skills.brand.private")}</span>`;
 
     // Choose description based on current language
     const currentLang = I18n.lang();
@@ -180,7 +188,7 @@ const Skills = (() => {
         <div class="brand-skill-info">
           <div class="brand-skill-title">
             <span class="brand-skill-name">${escapeHtml((currentLang === "zh" && skill.name_zh) ? skill.name_zh : name)}</span>
-            ${privateBadge}
+            ${badge}
           </div>
           <div class="brand-skill-desc">${escapeHtml(description)}</div>
         </div>
@@ -357,6 +365,20 @@ const Skills = (() => {
       });
     }
 
+    // Flip tooltip below when toggle is near top of scroll container
+    const toggleLabel = card.querySelector(".skill-toggle");
+    if (toggleLabel) {
+      toggleLabel.addEventListener("mouseenter", () => {
+        const scroller = toggleLabel.closest(".skills-tab-content");
+        if (!scroller) return;
+        const toggleTop = toggleLabel.getBoundingClientRect().top;
+        const scrollerTop = scroller.getBoundingClientRect().top;
+        if (toggleTop - scrollerTop < 80) {
+          toggleLabel.classList.add("skill-toggle-flip");
+        }
+      });
+    }
+
     // Bind "Use" button event
     const useBtn = card.querySelector(".btn-skill-use");
     if (useBtn) {