perfectionist-plugins 1.8.0 → 2.0.0

package/hide-unowned-skins.js

@@ -1,10 +1,11 @@
-export const version = "2.3.2";
+export const version = "2.4.0";
 
 const PLUGIN_ID = "hide-unowned-skins";
 const STYLE_ID = "perfectionist-hide-unowned-skins-style";
 const HIDDEN_CLASS = "perf-unowned-skin-hidden";
 const SKIN_ITEM_SELECTOR = ".skin-selection-item";
 const DOT_SELECTOR = ".skin-selection-indicator-selector";
+const SELECTED_CLASS = "skin-selection-item-selected";
 const SESSION_URI = "/lol-champ-select/v1/session";
 const SELECTION_URI = "/lol-champ-select/v1/session/my-selection";
 const CAROUSEL_URI = "/lol-champ-select/v1/skin-carousel-skins";
@@ -25,7 +26,7 @@ const OBSERVER_OPTIONS = {
   childList: true,
   subtree: true,
   attributes: true,
-  attributeFilter: ["class", "style"],
+  attributeFilter: ["class", "style", "src"],
 };
 
 let filterActive = true;
@@ -160,7 +161,14 @@ function installFetchFilter() {
   if (!rawFetch) rawFetch = original;
 
   const wrapped = function (input, init) {
-    const url = typeof input === "string" ? input : (input && input.url) || "";
+    const url =
+    typeof input === "string"
+      ? input
+      : typeof input?.url === "string"
+        ? input.url
+        : typeof input?.href === "string"
+          ? input.href
+          : "";
     const promise = original.call(this, input, init);
     if (!filterActive || url.split("?")[0].indexOf(CAROUSEL_URI) === -1) return promise;
     return promise.then((response) => {
@@ -263,6 +271,7 @@ let allSkinIds = null;
 let currentChampionId = null;
 let carouselOrder = [];
 let selectedSkinId = null;
+let lastServerSkinId = null;
 let failure = null;
 let requestToken = 0;
 let refreshTimer = null;
@@ -273,16 +282,21 @@ let sessionMisses = 0;
 let championMisses = 0;
 let renderObserver = null;
 const repackOriginals = new Map();
+const lastAppliedLeft = new Map();
 const skinSuffixCache = new Map();
 let repackTimer = null;
 let removeStyle = null;
+let lastSelectedDomIndex = -1;
+let navFixAt = 0;
+let lastSkipSignature = null;
+const widthCache = new Map();
 
 function logError(scope, error) {
   console.error(`[Perfectionist] Hide Unowned Skins: ${scope}`, error);
 }
 
 function skinSuffixOf(text) {
-  const numbered = text.match(/Skins\/Skin(\d+)\//i) ?? text.match(/Skin(\d+)\//);
+  const numbered = text.match(/Skins\/Skin(\d+)\//i) ?? text.match(/skin(\d+)\//i);
   if (numbered) return Number(numbered[1]);
   return /Skins\/Base\//i.test(text) ? 0 : null;
 }
@@ -311,7 +325,49 @@ function hideTargetFor(item) {
   return target;
 }
 
+function pruneRepack() {
+  for (const item of [...repackOriginals.keys()]) {
+    if (item.isConnected) continue;
+    repackOriginals.delete(item);
+    lastAppliedLeft.delete(item);
+  }
+}
+
+function guardSelection(items) {
+  const selectedIndex = items.findIndex((item) => item.classList.contains(SELECTED_CLASS));
+  if (selectedIndex < 0) return false;
+  const previous = lastSelectedDomIndex;
+  lastSelectedDomIndex = selectedIndex;
+  const selected = items[selectedIndex];
+  const hidden = selected.classList.contains(HIDDEN_CLASS) || Boolean(selected.parentElement?.classList.contains(HIDDEN_CLASS));
+  if (!hidden) {
+    lastSkipSignature = null;
+    return false;
+  }
+
+  const visible = items.map((item, index) => (item.classList.contains(HIDDEN_CLASS) ? -1 : index)).filter((index) => index >= 0);
+  if (visible.length === 0) return false;
+
+  const forward = previous < 0 ? true : selectedIndex >= previous;
+  const target = forward
+    ? (visible.find((index) => index > selectedIndex) ?? visible[0])
+    : ([...visible].reverse().find((index) => index < selectedIndex) ?? visible[visible.length - 1]);
+  const skinId = readSkinId(items[target]);
+  if (skinId === null) return false;
+
+  const signature = `${selectedIndex}:${skinId}`;
+  if (lastSkipSignature === signature) return true;
+  const now = Date.now();
+  if (now < navFixAt) return true;
+  navFixAt = now + 150;
+  lastSkipSignature = signature;
+  lastSelectedDomIndex = target;
+  selectSkin(skinId).catch((error) => logError("could not skip the unowned skin.", error));
+  return true;
+}
+
 function repackVisibleItems(items) {
+  pruneRepack();
   const visible = items.filter((item) => !item.classList.contains(HIDDEN_CLASS));
   if (visible.length < 2) {
     restoreRepack();
@@ -326,7 +382,14 @@ function repackVisibleItems(items) {
   if (!anchor) anchor = visible[Math.floor(visible.length / 2)];
   const anchorDomIndex = items.indexOf(anchor);
 
-  const widthOf = (item) => item.getBoundingClientRect().width || (item === anchor ? 117 : 73);
+  const widthOf = (item) => {
+    const measured = item.getBoundingClientRect().width;
+    if (measured > 0) {
+      widthCache.set(item, measured);
+      return measured;
+    }
+    return widthCache.get(item) ?? (item === anchor ? 117 : 73);
+  };
   const toPx = (item) => {
     const raw = item.style.left || "0";
     if (raw.endsWith("px")) return parseFloat(raw);
@@ -340,15 +403,17 @@ function repackVisibleItems(items) {
 
   const setLeft = (item, x) => {
     const want = `${x}px`;
-    if (item.style.getPropertyValue("left") !== want || item.style.getPropertyPriority("left") !== "important") {
-      if (!repackOriginals.has(item)) {
-        repackOriginals.set(item, {
-          value: item.style.getPropertyValue("left"),
-          priority: item.style.getPropertyPriority("left"),
-        });
-      }
+    const current = item.style.getPropertyValue("left");
+    const priority = item.style.getPropertyPriority("left");
+    const last = lastAppliedLeft.get(item);
+    const clientMoved = last !== undefined && (current !== last || priority !== "important");
+    if (clientMoved || !repackOriginals.has(item)) {
+      repackOriginals.set(item, { value: current, priority });
+    }
+    if (current !== want || priority !== "important") {
       item.style.setProperty("left", want, "important");
     }
+    lastAppliedLeft.set(item, want);
   };
 
   items.forEach((item, index) => {
@@ -367,12 +432,16 @@ function repackVisibleItems(items) {
 }
 
 function restoreRepack() {
-  if (repackOriginals.size === 0) return;
   for (const [item, original] of repackOriginals) {
+    if (!item.isConnected) continue;
+    const current = item.style.getPropertyValue("left");
+    const last = lastAppliedLeft.get(item);
+    if (last !== undefined && (current !== last || item.style.getPropertyPriority("left") !== "important")) continue;
     if (original.value) item.style.setProperty("left", original.value, original.priority || undefined);
     else item.style.removeProperty("left");
   }
   repackOriginals.clear();
+  lastAppliedLeft.clear();
 }
 
 function applyAll() {
@@ -401,8 +470,10 @@ function applyAll() {
     else if (dotsHidden === 0 && dotList.hasAttribute("data-perf-dots")) dotList.removeAttribute("data-perf-dots");
   }
 
-  if (ownedSkinIds !== null && hidden > 0) scheduleRepack();
-  else if (hidden === 0) restoreRepack();
+  if (ownedSkinIds !== null && hidden > 0) {
+    if (guardSelection(items)) runRepack();
+    else scheduleRepack();
+  } else if (hidden === 0) restoreRepack();
 }
 
 function scheduleRepack() {
@@ -456,8 +527,18 @@ async function loadCarouselOrder() {
   try {
     let skins;
     if (rawFetch) {
-      const response = await rawFetch(CAROUSEL_URI, { headers: { Accept: "application/json" } });
-      skins = response.ok ? await response.json() : null;
+      let timer = null;
+      try {
+        const response = await Promise.race([
+          rawFetch(CAROUSEL_URI, { headers: { Accept: "application/json" } }),
+          new Promise((_, reject) => {
+            timer = setTimeout(() => reject(new Error("carousel request timed out")), 8000);
+          }),
+        ]);
+        skins = response.ok ? await response.json() : null;
+      } finally {
+        clearTimeout(timer);
+      }
     } else {
       skins = await api.lcu.get(CAROUSEL_URI);
     }
@@ -478,9 +559,13 @@ function nextOwnedSkin(owned, fromId, direction) {
 async function selectSkin(skinId) {
   selectedSkinId = skinId;
   selectInFlight = true;
+  const guard = setTimeout(() => {
+    selectInFlight = false;
+  }, 8000);
   try {
     await api.lcu.send("PATCH", SELECTION_URI, { selectedSkinId: skinId });
   } finally {
+    clearTimeout(guard);
     selectInFlight = false;
   }
 }
@@ -548,15 +633,21 @@ function updateForSession(session, selection) {
 
   const knownUnownedSkin = allSkinIds !== null && allSkinIds.has(serverSkinId) && !ownedSkinIds.has(serverSkinId);
   if (!selectInFlight && knownUnownedSkin) {
-    const fallback = nextOwnedSkin(ownedSkinIds, 0, 1);
+    const direction = lastServerSkinId !== null && serverSkinId !== null && serverSkinId < lastServerSkinId ? -1 : 1;
+    const fallback = nextOwnedSkin(ownedSkinIds, serverSkinId ?? 0, direction) ?? nextOwnedSkin(ownedSkinIds, 0, 1);
     if (fallback !== null) {
       selectSkin(fallback).catch((error) => logError("could not correct the selected skin.", error));
     }
   }
+  if (!selectInFlight && belongsToChampion && ownedSkinIds.has(serverSkinId)) lastServerSkinId = serverSkinId;
 
   applyAllGuarded();
 }
 
+function onWindowResize() {
+  scheduleRepack();
+}
+
 function scheduleRefresh() {
   clearTimeout(refreshTimer);
   refreshTimer = setTimeout(pollSession, REFRESH_DEBOUNCE_MS);
@@ -596,6 +687,7 @@ function onEnable(utils) {
   removeStyle = api.addStyle(STYLE_ID, CSS);
 
   renderObserver = new MutationObserver(() => {
+    ensureSourceFilter();
     const item = document.querySelector(SKIN_ITEM_SELECTOR);
     if (!item && !document.querySelector(DOT_SELECTOR)) return;
     applyAllGuarded();
@@ -603,11 +695,13 @@ function onEnable(utils) {
   });
   renderObserver.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
 
+  window.addEventListener("resize", onWindowResize);
   unsubscribe = api.subscribe(SESSION_URI, onSessionPush);
   pollSession();
 }
 
 function onDisable() {
+  window.removeEventListener("resize", onWindowResize);
   unsubscribe?.();
   unsubscribe = null;
   clearTimeout(refreshTimer);

package/package.json

@@ -1,34 +1,37 @@
-{
-  "name": "perfectionist-plugins",
-  "version": "1.8.0",
-  "description": "Small plugins that fix the annoying parts of League of Legends champ select. Built for Pengu Loader.",
-  "type": "module",
-  "main": "perfectionist-utils.js",
-  "exports": {
-    ".": "./perfectionist-utils.js",
-    "./perfectionist-utils.js": "./perfectionist-utils.js",
-    "./ban-blocker.js": "./ban-blocker.js",
-    "./hide-unowned-skins.js": "./hide-unowned-skins.js",
-    "./unlock-profile-skins.js": "./unlock-profile-skins.js",
-    "./auto-claimer.js": "./auto-claimer.js",
-    "./auto-read.js": "./auto-read.js"
-  },
-  "files": [
-    "perfectionist-utils.js",
-    "ban-blocker.js",
-    "hide-unowned-skins.js",
-    "unlock-profile-skins.js",
-    "auto-claimer.js",
-    "auto-read.js"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/SrKing-9812/Perfectionist-Plugins.git"
-  },
-  "keywords": [
-    "pengu-loader",
-    "league-of-legends",
-    "plugin"
-  ],
-  "author": "Sr. King"
-}
+{
+  "name": "perfectionist-plugins",
+  "version": "2.0.0",
+  "description": "Small plugins that fix the annoying parts of League of Legends champ select. Built for Pengu Loader.",
+  "type": "module",
+  "main": "perfectionist-utils.js",
+  "exports": {
+    ".": "./perfectionist-utils.js",
+    "./perfectionist-utils.js": "./perfectionist-utils.js",
+    "./ban-blocker.js": "./ban-blocker.js",
+    "./hide-unowned-skins.js": "./hide-unowned-skins.js",
+    "./unlock-profile-skins.js": "./unlock-profile-skins.js",
+    "./auto-claimer.js": "./auto-claimer.js",
+    "./auto-read.js": "./auto-read.js",
+    "./better-client.js": "./better-client.js"
+  },
+  "files": [
+    "perfectionist-utils.js",
+    "ban-blocker.js",
+    "hide-unowned-skins.js",
+    "unlock-profile-skins.js",
+    "auto-claimer.js",
+    "auto-read.js",
+    "better-client.js",
+    "tools/betterclient-monitor.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SrKing-9812/Perfectionist-Plugins.git"
+  },
+  "keywords": [
+    "pengu-loader",
+    "league-of-legends",
+    "plugin"
+  ],
+  "author": "Sr. King"
+}

package/perfectionist-utils.js

@@ -6,7 +6,7 @@ const PANEL_ID = "perfectionist-plugins-panel";
 const STYLE_ID = "perfectionist-plugins-style";
 const TAB_TITLE = "Perfectionism";
 
-export const version = "1.7.0";
+export const version = "2.0.0";
 
 const PKG = "perfectionist-plugins";
 const CDN = "https://cdn.jsdelivr.net/npm";
@@ -22,6 +22,13 @@ const BUNDLED_MODULES = [
     description: "Shared core for the Perfectionism plugins.",
     core: true,
   },
+  {
+    id: "better-client",
+    file: "better-client.js",
+    name: "BetterClient",
+    version: "1.2.0",
+    description: "Debloats the client: blocks telemetry, merges duplicate requests, caches immutable data, decodes images asynchronously and fixes several bugs.",
+  },
   {
     id: "ban-blocker",
     file: "ban-blocker.js",
@@ -29,13 +36,6 @@ const BUNDLED_MODULES = [
     version: "3.6.0",
     description: "During bans, blocking a teammate instantly claims the champion they hover to ban.",
   },
-  {
-    id: "hide-unowned-skins",
-    file: "hide-unowned-skins.js",
-    name: "Hide Unowned Skins",
-    version: "2.3.2",
-    description: "In champion select, only shows the skins you own for the picked champion.",
-  },
   {
     id: "unlock-profile-skins",
     file: "unlock-profile-skins.js",
@@ -43,6 +43,13 @@ const BUNDLED_MODULES = [
     version: "1.2.1",
     description: "Unlocks every skin in the Set profile background window.",
   },
+  {
+    id: "hide-unowned-skins",
+    file: "hide-unowned-skins.js",
+    name: "Hide Unowned Skins",
+    version: "2.4.0",
+    description: "In champion select, only shows the skins you own for the picked champion.",
+  },
   {
     id: "auto-claimer",
     file: "auto-claimer.js",
@@ -54,14 +61,14 @@ const BUNDLED_MODULES = [
     id: "auto-read",
     file: "auto-read.js",
     name: "Auto Read",
-    version: "1.1.0",
-    description: "Automatically marks quests, loot, Clash and client notices as read so no badge or dot stays lit.",
+    version: "1.2.0",
+    description: "Automatically marks quests, loot, Clash, TFT and client notices as read so no badge or dot stays lit.",
   },
 ];
 
 const STYLE_CSS = `
-#${PANEL_ID} { overflow-x: hidden; padding: 15px 20px; position: relative; width: calc(100% - 40px); box-sizing: content-box; color: #f0e6d2; font-family: "LoL Body", Arial, "Helvetica Neue", Helvetica, sans-serif; }
-#${PANEL_ID} > lol-uikit-scrollable { display: block; height: 100%; }
+#${PANEL_ID} { display: flex; flex-direction: column; overflow-x: hidden; padding: 15px 20px; position: relative; width: calc(100% - 40px); box-sizing: content-box; color: #f0e6d2; font-family: "LoL Body", Arial, "Helvetica Neue", Helvetica, sans-serif; }
+#${PANEL_ID} > lol-uikit-scrollable { display: block; flex: 1 1 auto; min-height: 0; }
 #${PANEL_ID} .perf-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
   padding: 16px 18px; margin-bottom: 12px; box-sizing: border-box;
   background: #010a13; border: 1px solid #785a28; }
@@ -121,6 +128,21 @@ const STYLE_CSS = `
 #${PANEL_ID} .perf-chip--on { color: #010a13; background: #c89b3c; border-color: #c89b3c; }
 #${PANEL_ID} .perf-chip--on:hover { background: #f0e6d2; }
 
+#${PANEL_ID} .perf-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-bottom: 14px; }
+#${PANEL_ID} .perf-search { flex: 1 1 auto; min-width: 0; box-sizing: border-box;
+  font-family: "LoL Body", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; letter-spacing: 0.3px;
+  color: #f0e6d2; background: #0a1428; border: 1px solid #785a28; padding: 9px 12px; outline: none; }
+#${PANEL_ID} .perf-search:focus { border-color: #c89b3c; }
+#${PANEL_ID} .perf-search::placeholder { color: #a09b8c; }
+#${PANEL_ID} .perf-master { flex: 0 0 auto; white-space: nowrap; }
+#${PANEL_ID} .perf-card--locked .perf-opts { pointer-events: none; }
+#${PANEL_ID} .perf-card--locked .perf-actions > .perf-toggle { pointer-events: none; }
+#${PANEL_ID} .perf-card--locked .perf-caret { opacity: 0.45; }
+#${PANEL_ID} .perf-card--locked .perf-chips-label { opacity: 0.45; }
+#${PANEL_ID} .perf-chip:disabled { opacity: 0.45; cursor: default; }
+#${PANEL_ID} .perf-chip:disabled:hover { color: #a09b8c; border-color: #785a28; background: #0a1428; }
+#${PANEL_ID} .perf-chip--on:disabled:hover { color: #010a13; border-color: #c89b3c; background: #c89b3c; }
+
 .perf-update { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center;
   justify-content: center; background: rgba(1, 10, 19, 0.72); }
 .perf-update-box { width: 430px; box-sizing: border-box; padding: 22px 26px;
@@ -145,9 +167,10 @@ let coords = null;
 const resolved = new Map();
 let availableModules = BUNDLED_MODULES;
 let pendingReload = false;
+let searchQuery = "";
 let runningVersion = version;
 
-let state = { installed: {}, enabled: {}, options: {} };
+let state = { installed: {}, enabled: {}, options: {}, masterLocked: false };
 
 async function loadState() {
   let saved = null;
@@ -160,7 +183,7 @@ async function loadState() {
     saved = null;
   }
   if (saved?.installed && typeof saved.installed === "object") {
-    state = { installed: saved.installed, enabled: saved.enabled ?? {}, options: saved.options ?? {} };
+    state = { installed: saved.installed, enabled: saved.enabled ?? {}, options: saved.options ?? {}, masterLocked: saved.masterLocked === true };
     return;
   }
   saveState();
@@ -172,6 +195,7 @@ function saveState() {
     installed: state.installed,
     enabled: state.enabled,
     options: state.options,
+    masterLocked: state.masterLocked === true,
   };
   try {
     localStorage.setItem(STATE_KEY, JSON.stringify(record));
@@ -524,16 +548,23 @@ function addStyle(name, css) {
   return () => element.remove();
 }
 
+const LCU_TIMEOUT_MS = 10000;
+
 function lcuGet(path, { ttl = 0 } = {}) {
   const now = Date.now();
   const cached = requestCache.get(path);
   if (cached && (cached.pending || cached.expires > now)) return cached.promise;
 
   const entry = { pending: true, expires: 0, promise: null };
-  entry.promise = fetch(path, { headers: { Accept: "application/json" } }).then(async (response) => {
+  const request = fetch(path, { headers: { Accept: "application/json" } }).then(async (response) => {
     if (!response.ok) throw new Error(`LCU ${path} responded ${response.status}`);
     return response.status === 204 ? null : response.json();
   });
+  let timer = null;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(new Error(`LCU ${path} timed out`)), LCU_TIMEOUT_MS);
+  });
+  entry.promise = Promise.race([request, timeout]).finally(() => clearTimeout(timer));
   requestCache.set(path, entry);
   entry.promise.then(
     () => {
@@ -605,7 +636,7 @@ function buildOptionRow(mod, option, disabled, onChange) {
   return row;
 }
 
-function buildChips(mod, option) {
+function buildChips(mod, option, locked) {
   const block = el("div", "perf-chip-block");
   block.title = option.description ?? "";
   if (option.label) block.append(el("div", "perf-chips-label", option.label));
@@ -615,6 +646,7 @@ function buildChips(mod, option) {
     const chip = el("button", "perf-chip", item.label);
     chip.type = "button";
     chip.title = item.description ?? "";
+    chip.disabled = Boolean(locked);
     if (getOption(mod.id, key)) chip.classList.add("perf-chip--on");
     chip.addEventListener("click", () => {
       setOption(mod.id, key, !getOption(mod.id, key), false);
@@ -626,17 +658,17 @@ function buildChips(mod, option) {
   return block;
 }
 
-function buildOptions(mod) {
+function buildOptions(mod, locked) {
   const options = registry.get(mod.id)?.options ?? [];
   if (options.length === 0) return null;
   const wrap = el("div", "perf-opts");
   for (const option of options) {
     if (option.type === "chips") {
-      wrap.append(buildChips(mod, option));
+      wrap.append(buildChips(mod, option, locked));
       continue;
     }
     if (!option.children?.length) {
-      wrap.append(buildOptionRow(mod, option));
+      wrap.append(buildOptionRow(mod, option, Boolean(locked)));
       continue;
     }
     const group = el("div", "perf-opt-group");
@@ -647,12 +679,12 @@ function buildOptions(mod) {
     const kids = el("div", "perf-opt-children");
     const childInputs = [];
     for (const child of option.children) {
-      const childRow = buildOptionRow(mod, child, !getOption(mod.id, option.key));
+      const childRow = buildOptionRow(mod, child, !getOption(mod.id, option.key) || Boolean(locked));
       childInputs.push(childRow.querySelector("input"));
       kids.append(childRow);
     }
-    const master = buildOptionRow(mod, option, false, (checked) => {
-      for (const input of childInputs) input.disabled = !checked;
+    const master = buildOptionRow(mod, option, Boolean(locked), (checked) => {
+      for (const input of childInputs) input.disabled = !checked || Boolean(locked);
       setOption(mod.id, option.key, checked, false);
     });
     const groupKey = `${mod.id}:${option.key}`;
@@ -674,12 +706,13 @@ function buildOptions(mod) {
   return wrap;
 }
 
-function buildToggle(mod) {
+function buildToggle(mod, locked) {
   const label = el("label", "perf-toggle");
   label.title = `Enable ${mod.name}`;
   const input = el("input");
   input.type = "checkbox";
   input.checked = isPluginEnabled(mod.id);
+  input.disabled = Boolean(locked);
   input.setAttribute("aria-label", `Enable ${mod.name}`);
   input.addEventListener("change", () => setPluginEnabled(mod.id, input.checked));
   label.append(input, el("span", "perf-box"));
@@ -711,20 +744,87 @@ function buildUninstallButton(mod) {
   return button;
 }
 
-function buildCard(mod) {
+function installedModules() {
+  return getAvailableModules().filter(isInstalled);
+}
+
+function masterLocked() {
+  return installedModules().length > 0 && state.masterLocked === true;
+}
+
+function disableAllPlugins() {
+  state.masterLocked = true;
+  saveState();
+  refreshPanel();
+}
+
+function enableAllPlugins() {
+  state.masterLocked = false;
+  saveState();
+  refreshPanel();
+}
+
+function applySearchFilter(panel = document.getElementById(PANEL_ID)) {
+  if (!panel) return;
+  let shown = 0;
+  for (const card of panel.querySelectorAll(".perf-card")) {
+    const match = !searchQuery || (card.dataset.search ?? "").includes(searchQuery);
+    card.style.display = match ? "" : "none";
+    if (match) shown += 1;
+  }
+  const scroller = panel.querySelector("lol-uikit-scrollable");
+  let empty = panel.querySelector(".perf-no-match");
+  if (shown === 0 && getAvailableModules().length > 0) {
+    if (!empty && scroller) {
+      empty = el("div", "perf-empty perf-no-match", "No plugins match your search.");
+      scroller.append(empty);
+    }
+  } else if (empty) {
+    empty.remove();
+  }
+}
+
+function buildTools() {
+  const tools = el("div", "perf-tools");
+
+  const search = el("input", "perf-search");
+  search.type = "search";
+  search.placeholder = "Search plugins...";
+  search.value = searchQuery;
+  search.setAttribute("aria-label", "Search plugins");
+  search.addEventListener("input", () => {
+    searchQuery = search.value.trim().toLowerCase();
+    applySearchFilter();
+  });
+
+  const master = el("button", "perf-btn perf-master", masterLocked() ? "Enable All" : "Disable All");
+  master.type = "button";
+  master.disabled = installedModules().length === 0;
+  master.addEventListener("click", () => {
+    if (masterLocked()) enableAllPlugins();
+    else disableAllPlugins();
+  });
+
+  tools.append(search, master);
+  return tools;
+}
+
+function buildCard(mod, locked) {
   const installed = isInstalled(mod);
   const card = el("div", installed ? "perf-card" : "perf-card perf-card--missing");
+  if (locked) card.classList.add("perf-card--locked");
+  card.dataset.search = `${mod.name} ${mod.description}`.toLowerCase();
 
   const info = el("div", "perf-info");
   const name = el("div", "perf-name", mod.name);
   name.append(el("span", "perf-version", `v${registry.get(mod.id)?.version ?? mod.version}`));
   info.append(name);
   if (mod.description) info.append(el("div", "perf-desc", mod.description));
-  const optionList = buildOptions(mod);
+  const optionList = buildOptions(mod, locked);
   if (optionList) info.append(optionList);
 
   const actions = el("div", "perf-actions");
-  if (installed) actions.append(buildToggle(mod));
+  if (installed) actions.append(buildToggle(mod, locked));
   actions.append(installed ? buildUninstallButton(mod) : buildInstallButton(mod));
 
   card.append(info, actions);
@@ -734,6 +834,8 @@ function buildCard(mod) {
 function buildPanel() {
   const panel = el("div");
   panel.id = PANEL_ID;
+  panel.append(buildTools());
+
   const scroller = el("lol-uikit-scrollable");
   panel.append(scroller);
 
@@ -742,7 +844,9 @@ function buildPanel() {
     scroller.append(el("div", "perf-empty", "No plugins are available."));
     return panel;
   }
-  for (const mod of modules) scroller.append(buildCard(mod));
+  const locked = masterLocked();
+  for (const mod of modules) scroller.append(buildCard(mod, locked));
+  applySearchFilter(panel);
   return panel;
 }