openclacky 1.5.3 → 1.5.5

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

@@ -17,19 +17,29 @@
 // Depends on: I18n, global $ / escapeHtml helpers, Clacky.ext (core/ext.js)
 // ───────────────────────────────────────────────────────────────────────────
 
+const EXT_TAB_KEY      = "clacky-ext-tab";
+const EXT_SORT_KEY     = "clacky-ext-sort";
+const EXT_INSTALLED_KEY = "clacky-ext-installed-filter";
+
 const ExtensionsStore = (() => {
   // ── State (single source of truth) ─────────────────────────────────────
   let _extensions      = [];        // [{ id, name, name_zh, description, ..., units }]
   let _allExtensions   = [];        // unfiltered result from server
   let _query           = "";        // current search text
-  let _sort            = "downloads";  // "newest" | "updated" | "downloads"
+  let _sort            = (function() { try { return localStorage.getItem(EXT_SORT_KEY) || "downloads"; } catch (_) { return "downloads"; } })();
   let _filterInstalled = false;     // when true, show only installed extensions
   let _filterBrand     = false;     // when true, show only brand-private extensions
+  let _filterSystem    = false;      // when true, show system (builtin) extensions
+  let _filterMarket    = true;     // when true, show marketplace extensions
+  let _onlyInstalled   = (function() { try { return localStorage.getItem(EXT_INSTALLED_KEY) === "installed"; } catch (_) { return false; } })();
   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;
+  let _installJob    = null;   // { stage, progress } while install is running, null otherwise
+  let _installError  = null;   // error message from a failed install attempt
+  let _pollToken     = 0;      // bumped by closeDetail() to abandon an in-flight poll loop
 
   // ── Internal event bus ──────────────────────────────────────────────────
   const _listeners = {};       // event => [handler]
@@ -55,11 +65,16 @@ const ExtensionsStore = (() => {
     get sort()       { return _sort; },
     get filterInstalled() { return _filterInstalled; },
     get filterBrand()     { return _filterBrand; },
+    get filterSystem()    { return _filterSystem; },
+    get filterMarket()    { return _filterMarket; },
+    get onlyInstalled()   { return _onlyInstalled; },
     get loading()    { return _loading; },
     get error()      { return _error; },
     get detail()        { return _detail; },
     get detailLoading() { return _detailLoading; },
     get detailError()   { return _detailError; },
+    get installJob()    { return _installJob; },
+    get installError()  { return _installError; },
   };
 
   const Extensions = {
@@ -68,8 +83,10 @@ const ExtensionsStore = (() => {
 
     /** Fetch the catalog from the server for the current query + sort. */
     async load() {
+      if (_filterSystem) return Extensions.loadSystemExtensions();
       if (_filterInstalled) return;
       if (_filterBrand) return Extensions.loadBrandExtensions();
+      if (_filterMarket) return Extensions.loadMarketExtensions();
       _loading = true;
       _error   = null;
       _emit("extensions:loading");
@@ -96,26 +113,111 @@ const ExtensionsStore = (() => {
       }
     },
 
+    /** Load builtin system extensions from /api/store/extensions/system. */
+    async loadSystemExtensions() {
+      _loading = true;
+      _error   = null;
+      _emit("extensions:loading");
+      try {
+        const res  = await fetch("/api/store/extensions/system");
+        const data = await res.json();
+        const all  = data.extensions || [];
+        _extensions = _query
+          ? all.filter(e => [e.name, e.display_name, e.display_name_zh, e.description].some(
+              f => f && f.toLowerCase().includes(_query.toLowerCase())))
+          : all;
+        _error   = null;
+        _loading = false;
+        _emit("extensions:changed", { extensions: _extensions, warning: _error });
+      } catch (e) {
+        console.error("[Extensions] loadSystemExtensions failed", e);
+        _extensions = [];
+        _error      = I18n.t("extensions.loadFailed");
+        _loading    = false;
+        _emit("extensions:error", { network: true });
+      } finally {
+        _loading = false;
+      }
+    },
+
+    /** Load marketplace extensions (all, not filtered by installed). */
+    async loadMarketExtensions() {
+      _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();
+        _allExtensions = data.extensions || [];
+        _error      = data.warning || null;
+        _loading    = false;
+        _extensions = _onlyInstalled ? _allExtensions.filter(e => e.installed) : _allExtensions;
+        _emit("extensions:changed", { extensions: _extensions, warning: _error });
+      } catch (e) {
+        console.error("[Extensions] loadMarketExtensions 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();
-      if (_filterInstalled) return Extensions.setFilterInstalled(true);
+      if (_filterSystem) return Extensions.loadSystemExtensions();
       if (_filterBrand) return Extensions.loadBrandExtensions();
-      return Extensions.load();
+      return Extensions.loadMarketExtensions();
     },
 
     /** Set the sort order and reload. */
     setSort(sort) {
       _sort = sort || "downloads";
+      try { localStorage.setItem(EXT_SORT_KEY, _sort); } catch (_) {}
+      if (_filterSystem) return Extensions.loadSystemExtensions();
+      if (_filterBrand) return Extensions.loadBrandExtensions();
+      return Extensions.loadMarketExtensions();
+    },
+
+    /** Toggle the global "only installed" overlay and reload the current tab. */
+    async setOnlyInstalled(only) {
+      _onlyInstalled = !!only;
+      try { localStorage.setItem(EXT_INSTALLED_KEY, _onlyInstalled ? "installed" : "all"); } catch (_) {}
+      if (_filterSystem) return Extensions.loadSystemExtensions();
       if (_filterBrand) return Extensions.loadBrandExtensions();
-      if (_filterInstalled) return Extensions.setFilterInstalled(true);
-      return Extensions.load();
+      return Extensions.loadMarketExtensions();
+    },
+
+    /** Switch to the system (builtin) extensions tab. */
+    async setFilterSystem() {
+      _filterSystem    = true;
+      _filterMarket    = false;
+      _filterInstalled = false;
+      _filterBrand     = false;
+      return Extensions.loadSystemExtensions();
+    },
+
+    /** Switch to the marketplace extensions tab. */
+    async setFilterMarket() {
+      _filterMarket    = true;
+      _filterSystem    = false;
+      _filterInstalled = false;
+      _filterBrand     = false;
+      return Extensions.loadMarketExtensions();
     },
 
     /** Toggle the "installed only" filter — fetches from local store when enabled. */
     async setFilterInstalled(onlyInstalled) {
       _filterInstalled = !!onlyInstalled;
       _filterBrand     = false;
+      _filterSystem    = false;
+      _filterMarket    = !onlyInstalled;
       if (_filterInstalled) {
         _loading = true;
         _emit("extensions:loading");
@@ -143,10 +245,12 @@ const ExtensionsStore = (() => {
     async setFilterBrand(onlyBrand) {
       _filterBrand     = !!onlyBrand;
       _filterInstalled = false;
+      _filterSystem    = false;
+      _filterMarket    = !onlyBrand;
       if (_filterBrand) {
         return Extensions.loadBrandExtensions();
       } else {
-        return Extensions.load();
+        return Extensions.loadMarketExtensions();
       }
     },
 
@@ -159,10 +263,11 @@ const ExtensionsStore = (() => {
         const res  = await fetch("/api/store/extensions/brand");
         const data = await res.json();
         const all  = data.extensions || [];
-        _extensions = _query
+        const matched = _query
           ? all.filter(e => [e.name, e.name_zh, e.description].some(
               f => f && f.toLowerCase().includes(_query.toLowerCase())))
           : all;
+        _extensions = _onlyInstalled ? matched.filter(e => e.installed) : matched;
         _error      = data.warning || null;
         _loading    = false;
         _emit("extensions:changed", { extensions: _extensions, warning: _error });
@@ -183,6 +288,14 @@ const ExtensionsStore = (() => {
       _detail        = null;
       _detailLoading = true;
       _detailError   = null;
+      // Reopening/refreshing this detail (back button, switching panels and
+      // returning, etc.) must not resurrect a stale install/update job
+      // snapshot from a previous visit — bump the token so any poll loop
+      // still running for that old visit becomes a no-op, and clear the
+      // snapshot itself so the button starts from a clean slate.
+      _pollToken += 1;
+      _installJob   = null;
+      _installError = null;
       _emit("extensions:detail");
       try {
         const isBrand = source === "brand" || _filterBrand;
@@ -224,6 +337,16 @@ const ExtensionsStore = (() => {
       _detail        = null;
       _detailLoading = false;
       _detailError   = null;
+      // Abandon any install/update poll still running for this detail — bumping
+      // the token makes the next loop iteration in _pollInstallStatus a no-op,
+      // so we stop hammering the status endpoint once nobody is watching.
+      // Also clear the job/error snapshot itself: since nothing will update it
+      // anymore, leaving a stale value around would make the button look frozen
+      // (e.g. stuck on "downloading 22%") the next time this extension's detail
+      // is reopened.
+      _pollToken += 1;
+      _installJob   = null;
+      _installError = null;
       _emit("extensions:detail");
     },
 
@@ -239,6 +362,8 @@ const ExtensionsStore = (() => {
         });
         const data = await res.json();
         if (!res.ok || !data.ok) throw new Error(data.error || "toggle failed");
+        const activeTab = _filterSystem ? "system" : _filterBrand ? "brand" : "market";
+        try { sessionStorage.setItem(EXT_TAB_KEY, activeTab); } catch (_) {}
         location.reload();
       } catch (e) {
         console.error("[Extensions] setEnabled failed", e);
@@ -250,6 +375,11 @@ const ExtensionsStore = (() => {
     /** Install a marketplace extension by fetching its download_url then posting to the local server. */
     async install(id) {
       if (!id) return;
+      _installError = null;
+      // Capture the current token so that if the user closes the detail panel
+      // mid-install, both the poll loop and this catch block notice and stop
+      // touching state for a view nobody is looking at anymore.
+      const token = _pollToken;
       try {
         // Prefer the already-loaded detail (avoids a second round-trip and correctly
         // handles brand-private extensions whose detail was fetched with &source=brand).
@@ -265,6 +395,8 @@ const ExtensionsStore = (() => {
         }
         const download_url = ext.download_url;
         if (!download_url) throw new Error("No download URL available");
+
+        // Start async install — server returns job_id immediately
         const res = await fetch("/api/store/extension/install", {
           method:  "POST",
           headers: { "Content-Type": "application/json" },
@@ -272,10 +404,15 @@ const ExtensionsStore = (() => {
         });
         const data = await res.json();
         if (!res.ok || !data.ok) throw new Error(data.error || "install failed");
-        location.reload();
+
+        // Poll for progress until done.
+        const jobId = data.job_id;
+        await _pollInstallStatus(jobId, token);
       } catch (e) {
         console.error("[Extensions] install failed", e);
-        _detailError = e.message;
+        if (token !== _pollToken) return; // panel was closed — nothing to update
+        _installJob   = null;
+        _installError = e.message;
         _emit("extensions:detail");
       }
     },
@@ -303,8 +440,76 @@ const ExtensionsStore = (() => {
         _emit("extensions:detail");
       }
     },
+
+    /** Create a new extension via ext-studio and return the session_id. */
+    async createNew(idea) {
+      const res = await fetch("/api/ext/ext-studio/develop", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ idea: idea || null }),
+      });
+      return res.json();
+    },
+
   };
 
+  // Poll /api/store/extension/install/status until done, updating _installJob each tick.
+  // `token` is the _pollToken snapshot taken when the poll started; if the
+  // user closes the detail panel, closeDetail() bumps _pollToken and this
+  // loop notices on its next tick and quietly stops (no more state writes,
+  // no more network requests).
+  const POLL_MAX_DURATION_MS = 30 * 60 * 1000; // give up after 30 minutes total
+
+  async function _pollInstallStatus(jobId, token) {
+    const INTERVAL = 1000;
+    const startedAt = Date.now();
+    let first = true;
+    while (true) {
+      // Check immediately on the first iteration — the job already exists
+      // server-side by the time we get here, so there's no reason to sit on
+      // the initial "downloading" placeholder for a full INTERVAL before
+      // fetching real progress. Subsequent iterations still wait normally.
+      if (first) {
+        first = false;
+      } else {
+        await new Promise(r => setTimeout(r, INTERVAL));
+      }
+
+      // Panel closed mid-poll — abandon silently, nothing left to update.
+      if (token !== _pollToken) return;
+
+      if (Date.now() - startedAt > POLL_MAX_DURATION_MS) {
+        throw new Error(I18n.t("extensions.action.installTimeout"));
+      }
+
+      let data;
+      try {
+        const r = await fetch("/api/store/extension/install/status?job_id=" + encodeURIComponent(jobId));
+        data = await r.json();
+      } catch (e) {
+        // network hiccup — keep polling
+        continue;
+      }
+      if (!data.ok) {
+        throw new Error(data.error || "install failed");
+      }
+      if (token !== _pollToken) return; // closed while the fetch was in flight
+
+      _installJob = { stage: data.stage, progress: data.progress };
+      _emit("extensions:detail");
+
+      if (data.stage === "done") {
+        _installJob = null;
+        location.reload();
+        return;
+      }
+      if (data.stage === "error") {
+        _installJob = null;
+        throw new Error(data.error || "install failed");
+      }
+    }
+  }
+
   return Extensions;
 })();
 

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

@@ -102,7 +102,7 @@ const ExtensionsView = (() => {
     const versionHtml = ext.version
       ? `<span class="extension-version">v${escapeHtml(String(ext.version))}</span>` : "";
     const canUpdate = ext.installed_version && ext.version && ext.installed_version !== ext.version;
-    const installedHtml = ext.installed
+    const installedHtml = (ext.installed && ext.layer !== "builtin")
       ? `<span class="extension-installed">${escapeHtml(I18n.t("extensions.installed"))}</span>` : "";
     const updatableHtml = canUpdate
       ? `<span class="extension-updatable">${escapeHtml(I18n.t("extensions.updatable"))}</span>` : "";
@@ -119,8 +119,12 @@ const ExtensionsView = (() => {
     const installsHtml = ext.download_count > 0
       ? `<span class="extension-installs">${escapeHtml(String(ext.download_count))} ${escapeHtml(I18n.t("extensions.installs"))}</span>` : "";
 
+    const isSystem = ext.layer === "builtin";
+    const slug = ext.slug || (ext.id != null ? String(ext.id) : (ext.name || ""));
+    const toggleHtml = isSystem ? _renderCardToggle(slug, ext.disabled) : "";
+
     const card = document.createElement("div");
-    card.className = "extension-card extension-card-clickable";
+    card.className = isSystem ? "extension-card extension-card-system" : "extension-card extension-card-clickable";
     card.dataset.extId     = ext.id != null ? String(ext.id) : (ext.name || "");
     card.dataset.extOrigin = ext.origin || "";
     card.innerHTML = `
@@ -140,10 +144,59 @@ const ExtensionsView = (() => {
           ${description ? `<div class="extension-desc">${escapeHtml(description)}</div>` : ""}
           ${homepageHtml ? `<div class="extension-meta">${homepageHtml}</div>` : ""}
         </div>
+        ${toggleHtml}
       </div>`;
+
+    if (isSystem) {
+      const toggle = card.querySelector(".ext-card-toggle");
+      if (toggle) {
+        toggle.addEventListener("click", (e) => {
+          e.stopPropagation();
+          const id      = toggle.dataset.extToggle;
+          const enabled = toggle.dataset.extEnabled === "1";
+          Extensions.setEnabled(id, !enabled);
+        });
+      }
+    } else {
+      card.addEventListener("click", (e) => {
+        if (e.target.closest("a")) return;
+        const router = window.Clacky && window.Clacky.Router;
+        const isBrand = card.dataset.extOrigin === "self" || Extensions.state.filterBrand;
+        const source  = isBrand ? "brand" : null;
+        if (router) router.navigate("extensions", { detailId: card.dataset.extId, source });
+        else Extensions.loadDetail(card.dataset.extId, source);
+      });
+    }
+
     return card;
   }
 
+  function _renderCardToggle(id, disabled) {
+    const checked = !disabled;
+    return `
+      <button type="button" class="ext-card-toggle${checked ? " ext-card-toggle-on" : ""}"
+        data-ext-toggle="${escapeHtml(id)}" data-ext-enabled="${checked ? "1" : "0"}"
+        title="${escapeHtml(I18n.t(checked ? "extensions.action.disable" : "extensions.action.enable"))}">
+        <span class="ext-card-toggle-thumb"></span>
+      </button>`;
+  }
+
+  // Returns a human-readable button label for a given install job state.
+  function _installJobLabel(job) {
+    if (!job) return I18n.t("extensions.action.install");
+    switch (job.stage) {
+      case "downloading": {
+        // Suppress "0%" — it's shown for a very brief instant right after the
+        // download starts (or never, for fast installs) and just looks like a stall.
+        const pct = (job.progress != null && job.progress > 0) ? ` ${job.progress}%` : "...";
+        return I18n.t("extensions.action.downloading") + pct;
+      }
+      case "extracting": return I18n.t("extensions.action.extracting") + "...";
+      case "verifying":  return I18n.t("extensions.action.verifying") + "...";
+      default:           return I18n.t("extensions.action.installing");
+    }
+  }
+
   function _renderDetail() {
     const panel = $("extensions-detail");
     const body  = $("extensions-body");
@@ -180,6 +233,33 @@ const ExtensionsView = (() => {
 
     panel.innerHTML = _detailShell(_detailContent(st.detail));
     _wireDetail();
+
+    // If an install/update job is in-progress, update the button text to reflect current stage.
+    // Note: both the "install" and "update" buttons drive the same job/poll flow, so we must
+    // look for whichever one is actually present in the freshly-rendered DOM.
+    const job = st.installJob;
+    const actionBtn = document.querySelector("[data-ext-install], [data-ext-update]");
+    if (job) {
+      if (actionBtn) {
+        actionBtn.disabled = true;
+        actionBtn.textContent = _installJobLabel(job);
+      }
+    }
+
+    // If the last install/update attempt failed, show an inline error banner
+    if (st.installError) {
+      if (actionBtn) {
+        actionBtn.disabled = false;
+        // Insert error message right after the button if not already there
+        let errEl = panel.querySelector(".extension-install-error");
+        if (!errEl) {
+          errEl = document.createElement("p");
+          errEl.className = "extension-install-error";
+          actionBtn.insertAdjacentElement("afterend", errEl);
+        }
+        errEl.textContent = st.installError;
+      }
+    }
   }
 
   function _detailShell(inner) {
@@ -223,7 +303,11 @@ const ExtensionsView = (() => {
       installBtn.addEventListener("click", () => {
         const id = installBtn.getAttribute("data-ext-install");
         installBtn.disabled = true;
-        installBtn.textContent = I18n.t("extensions.action.installing");
+        // Show a "downloading" placeholder rather than a generic "installing" —
+        // the next real state is always the download starting, so this avoids
+        // a jarring "installing → downloading → installing" flash before any
+        // real progress data has arrived.
+        installBtn.textContent = _installJobLabel({ stage: "downloading", progress: null });
         Extensions.install(id);
       });
     }
@@ -233,7 +317,7 @@ const ExtensionsView = (() => {
       updateBtn.addEventListener("click", () => {
         const id = updateBtn.getAttribute("data-ext-update");
         updateBtn.disabled = true;
-        updateBtn.textContent = I18n.t("extensions.action.updating");
+        updateBtn.textContent = _installJobLabel({ stage: "downloading", progress: null });
         Extensions.update(id);
       });
     }
@@ -327,7 +411,7 @@ const ExtensionsView = (() => {
       }
       return "";
     }
-    const slug = ext.name || ext.slug || id;
+    const slug = ext.slug || 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
@@ -445,16 +529,36 @@ const ExtensionsView = (() => {
       sortSelect.addEventListener("change", () => Extensions.setSort(sortSelect.value));
     }
 
+    const installedFilter = $("extensions-installed-filter");
+    if (installedFilter) {
+      installedFilter.value = ExtensionsStore.state.onlyInstalled ? "installed" : "all";
+      installedFilter.addEventListener("change", () => {
+        Extensions.setOnlyInstalled(installedFilter.value === "installed");
+      });
+    }
     document.querySelectorAll(".extensions-filter-tab").forEach(btn => {
       btn.addEventListener("click", () => {
         document.querySelectorAll(".extensions-filter-tab").forEach(b => b.classList.remove("extensions-filter-tab-active"));
         btn.classList.add("extensions-filter-tab-active");
         const filter = btn.dataset.filter;
-        if (filter === "installed") {
-          Extensions.setFilterInstalled(true);
+        const sortEl = $("extensions-sort");
+        const installedFilterEl = $("extensions-installed-filter");
+        if (filter === "system") {
+          if (sortEl) sortEl.style.display = "none";
+          if (installedFilterEl) installedFilterEl.style.display = "none";
+          Extensions.setFilterSystem();
         } else if (filter === "brand") {
+          if (sortEl) sortEl.style.display = "";
+          if (installedFilterEl) installedFilterEl.style.display = "";
           Extensions.setFilterBrand(true);
+        } else if (filter === "market") {
+          if (sortEl) sortEl.style.display = "";
+          if (installedFilterEl) installedFilterEl.style.display = "";
+          Extensions.setFilterMarket();
+        } else if (filter === "installed") {
+          Extensions.setFilterInstalled(true);
         } else {
+          if (sortEl) sortEl.style.display = "";
           Extensions.setFilterInstalled(false);
         }
       });
@@ -484,8 +588,24 @@ const ExtensionsView = (() => {
       });
     }
 
+    const newBtn = $("extensions-new-btn");
+    if (newBtn) {
+      newBtn.addEventListener("click", () => {
+        const seed = I18n.t("extensions.newExt.seed");
+        ExtensionsStore.createNew(seed || null)
+          .then((data) => {
+            if (data && data.session_id) {
+              const router = window.Clacky && window.Clacky.Router;
+              if (router) router.navigate("session", { id: data.session_id });
+            }
+          })
+          .catch(() => {});
+      });
+    }
+
     document.addEventListener("langchange", () => {
       if (input) input.placeholder = I18n.t("extensions.searchPlaceholder");
+      if (newBtn) newBtn.textContent = I18n.t("extensions.newExt.btn");
       _renderList();
       _renderDetail();
     });
@@ -503,17 +623,42 @@ const ExtensionsView = (() => {
   const viewApi = {
     async onPanelShow(opts) {
       _wireDom();
-      // Apply brand tab visibility based on current status (fast path),
-      // then also refresh in background so it stays up-to-date.
       _applyBrandTab();
       if (window.Skills && Skills.refreshBrandStatus) Skills.refreshBrandStatus();
+
+      const sortEl = $("extensions-sort");
       const detailId = opts && opts.detailId;
       if (detailId) {
-        Extensions.load();
+        if (sortEl) sortEl.style.display = "";
+        Extensions.loadMarketExtensions();
         Extensions.loadDetail(detailId, opts && opts.source);
       } else {
         Extensions.closeDetail();
-        Extensions.load();
+
+        let restoredTab = null;
+        try { restoredTab = sessionStorage.getItem(EXT_TAB_KEY); } catch (_) {}
+        if (restoredTab) {
+          try { sessionStorage.removeItem(EXT_TAB_KEY); } catch (_) {}
+        }
+
+        const tab = restoredTab || "market";
+        document.querySelectorAll(".extensions-filter-tab").forEach(b => {
+          b.classList.toggle("extensions-filter-tab-active", b.dataset.filter === tab);
+        });
+        const installedFilterEl = $("extensions-installed-filter");
+        if (tab === "system") {
+          if (sortEl) sortEl.style.display = "none";
+          if (installedFilterEl) installedFilterEl.style.display = "none";
+          Extensions.setFilterSystem();
+        } else if (tab === "brand") {
+          if (sortEl) sortEl.style.display = "";
+          if (installedFilterEl) installedFilterEl.style.display = "";
+          Extensions.setFilterBrand(true);
+        } else {
+          if (sortEl) sortEl.style.display = "";
+          if (installedFilterEl) installedFilterEl.style.display = "";
+          Extensions.setFilterMarket();
+        }
       }
     },
   };