perfectionist-plugins 1.4.1 → 1.6.0

package/auto-claimer.js

@@ -1,5 +1,5 @@
 const PLUGIN_ID = "auto-claimer";
-const version = "1.0.0";
+const version = "1.2.0";
 
 const SWEEP_DEBOUNCE_MS = 400;
 const CLAIM_COOLDOWN_MS = 5 * 60 * 1000;
@@ -29,7 +29,7 @@ let shopQueued = false;
 let unsubscribes = [];
 let sourceInstalled = false;
 const cooldowns = new Map();
-const menus = new Map();
+const recipes = new Map();
 
 function on(key) {
   try {
@@ -113,20 +113,26 @@ async function sweepTftPasses() {
   }
 }
 
-function menuFor(lootId) {
-  if (!menus.has(lootId)) {
-    const promise = getJson(`/lol-loot/v1/player-loot/${encodeURIComponent(lootId)}/context-menu`).catch(() => {
-      menus.delete(lootId);
-      return null;
-    });
-    menus.set(lootId, promise);
+function recipeFor(lootId) {
+  if (!recipes.has(lootId)) {
+    const promise = getJson(`/lol-loot/v1/recipes/initial-item/${encodeURIComponent(lootId)}`)
+      .then((list) => (Array.isArray(list) ? (list.find((entry) => entry?.type === "OPEN" && entry.recipeName) ?? null) : null))
+      .catch(() => {
+        recipes.delete(lootId);
+        return null;
+      });
+    recipes.set(lootId, promise);
   }
-  return menus.get(lootId);
+  return recipes.get(lootId);
 }
 
 async function sweepLoot() {
   const loot = await getJson(LOOT_URI);
   if (!Array.isArray(loot)) return;
+  const owned = new Map();
+  for (const item of loot) {
+    if (item?.lootId) owned.set(item.lootId, item.count ?? 0);
+  }
   let actions = 0;
   for (const item of loot) {
     if (actions >= MAX_ACTIONS_PER_SWEEP) break;
@@ -134,15 +140,32 @@ async function sweepLoot() {
     const count = item?.count ?? 0;
     if (!lootId || count <= 0 || /^(CURRENCY|MATERIAL)_/.test(lootId)) continue;
     if (!ready(`loot:${lootId}`, CLAIM_COOLDOWN_MS)) continue;
-    const menu = await menuFor(lootId);
-    const open = (Array.isArray(menu) ? menu : []).find((action) => action?.actionType === "OPEN" && action.name && action.enabled !== false);
-    if (!open) continue;
-    const needsKey = (open.requiredOthersCount ?? 0) > 0;
-    if (needsKey ? !on("openChests") : !on("openLoot")) continue;
+    const recipe = await recipeFor(lootId);
+    if (!recipe) continue;
+    const isChest = item.type === "CHEST" || /CHEST/i.test(lootId) || /CHEST/i.test(recipe.displayCategories ?? "");
+    if (!on("openLoot") || !(isChest ? on("openChests") : on("openMystery"))) continue;
+    const slots = Array.isArray(recipe.slots) ? recipe.slots : [];
+    const body = [];
+    let repeat = count;
+    let blocked = false;
+    for (const slot of slots) {
+      const candidates = Array.isArray(slot?.lootIds) ? slot.lootIds : [];
+      const match = candidates.find((id) => (owned.get(id) ?? 0) > 0);
+      if (!match) {
+        blocked = true;
+        break;
+      }
+      body.push(match);
+      repeat = Math.min(repeat, Math.floor((owned.get(match) ?? 0) / Math.max(1, slot.quantity ?? 1)));
+    }
+    if (blocked || body.length === 0 || repeat <= 0) continue;
+    repeat = Math.min(repeat, 25);
     stamp(`loot:${lootId}`);
     actions++;
-    const repeat = Math.min(count, 25);
-    await sendJson("POST", `/lol-loot/v1/recipes/${encodeURIComponent(open.name)}/craft?repeat=${repeat}`, [lootId]).catch(() => {});
+    for (let i = 0; i < body.length; i++) {
+      owned.set(body[i], (owned.get(body[i]) ?? 0) - repeat * (slots[i].quantity ?? 1));
+    }
+    await sendJson("POST", `/lol-loot/v1/recipes/${encodeURIComponent(recipe.recipeName)}/craft?repeat=${repeat}`, body).catch(() => {});
   }
 }
 
@@ -221,7 +244,7 @@ async function runClaims() {
     await sweepEvents().catch(() => {});
     await sweepMissions().catch(() => {});
     await sweepTftPasses().catch(() => {});
-    if (on("openLoot") || on("openChests")) await sweepLoot().catch(() => {});
+    if (on("openLoot") && (on("openMystery") || on("openChests"))) await sweepLoot().catch(() => {});
   } finally {
     claimRunning = false;
     if (claimQueued) {
@@ -279,7 +302,7 @@ function onEnable(utils) {
   api = utils;
   active = true;
   cooldowns.clear();
-  menus.clear();
+  recipes.clear();
   const claimPush = () => scheduleClaims();
   const shopPush = () => {
     if (on("buy1Be")) scheduleShop();
@@ -317,7 +340,7 @@ function onDisable() {
   }
   unsubscribes = [];
   cooldowns.clear();
-  menus.clear();
+  recipes.clear();
   api = null;
 }
 
@@ -349,15 +372,23 @@ export function init() {
         },
         {
           key: "openLoot",
-          label: "Auto-open loot (mystery icons, ward skins, ...)",
-          description: "Opens free mystery loot the moment you get it. Never touches items that need a key.",
-          default: false,
-        },
-        {
-          key: "openChests",
-          label: "Auto-open chests with keys",
-          description: "Opens chest + key loot automatically while you have keys.",
+          label: "Auto-open loot",
+          description: "Master switch for opening loot automatically. Choose what to include below.",
           default: false,
+          children: [
+            {
+              key: "openMystery",
+              label: "Include mystery items",
+              description: "Mystery icons, mystery ward skins, mystery emotes, mystery skins and other random-reward items.",
+              default: false,
+            },
+            {
+              key: "openChests",
+              label: "Include Hextech Chests",
+              description: "Hextech Chests, opened with your keys when one is required.",
+              default: false,
+            },
+          ],
         },
       ],
       onEnable,

package/auto-read.js

@@ -0,0 +1,263 @@
+const PLUGIN_ID = "auto-read";
+const version = "1.0.0";
+
+const SWEEP_DEBOUNCE_MS = 500;
+const ITEM_COOLDOWN_MS = 10 * 60 * 1000;
+const BULK_COOLDOWN_MS = 60 * 1000;
+
+const MISSIONS_URI = "/lol-missions/v1/missions";
+const MISSIONS_PLAYER_URI = "/lol-missions/v1/player";
+const LOOT_URI = "/lol-loot/v1/player-loot";
+const CLASH_FLAGS_URI = "/lol-clash/v1/simple-state-flags";
+const RANKED_NOTIF_URI = "/lol-ranked/v1/notifications";
+const EOS_NOTIF_URI = "/lol-ranked/v1/eos-notifications";
+const NOTICE_LIST_URIS = [
+  "/player-notifications/v1/notifications",
+  "/lol-patch/v1/notifications",
+  "/patcher/v1/notifications",
+  "/lol-leaver-buster/v1/notifications",
+  "/lol-lobby/v2/notifications",
+];
+const NOTICE_BULK_DELETES = [
+  "/lol-gameflow/v1/early-exit-notifications/eog",
+  "/lol-gameflow/v1/early-exit-notifications/missions",
+  "/lol-statstones/v1/vignette-notifications",
+  "/lol-player-behavior/v1/code-of-conduct-notification",
+];
+const CLASH_BULK_ACKS = [
+  "/lol-clash/v1/notifications/acknowledge",
+  "/lol-clash/v1/eog-player-update/acknowledge",
+  "/lol-clash/v1/game-end/acknowledge",
+];
+const PIP_STYLE_ID = "auto-read-pips-style";
+const PIP_CSS = ".activity-center__tab_label_notification { display: none !important; }";
+
+let api = null;
+let active = false;
+let sweepTimer = null;
+let sweepRunning = false;
+let sweepQueued = false;
+let unsubscribes = [];
+const cooldowns = new Map();
+
+function on(key) {
+  try {
+    return api?.getOption?.(PLUGIN_ID, `read.${key}`) === true;
+  } catch {
+    return false;
+  }
+}
+
+function ready(key, wait) {
+  return (cooldowns.get(key) ?? 0) + wait <= Date.now();
+}
+
+function stamp(key) {
+  cooldowns.set(key, Date.now());
+}
+
+function getJson(path) {
+  return fetch(path, { headers: { Accept: "application/json" } }).then((response) => {
+    if (!response.ok) throw new Error(`${path} responded ${response.status}`);
+    return response.json();
+  });
+}
+
+function sendJson(method, path, body) {
+  return fetch(path, {
+    method,
+    headers: { Accept: "application/json", "Content-Type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  }).then((response) => {
+    if (!response.ok) throw new Error(`${method} ${path} responded ${response.status}`);
+    return response.status === 204 ? null : response.json().catch(() => null);
+  });
+}
+
+async function sweepQuests() {
+  const missions = await getJson(MISSIONS_URI);
+  if (!Array.isArray(missions)) return;
+  const ids = [];
+  for (const mission of missions) {
+    if (!mission?.id || mission.viewed !== false) continue;
+    if (!ready(`mission:${mission.id}`, ITEM_COOLDOWN_MS)) continue;
+    stamp(`mission:${mission.id}`);
+    ids.push(mission.id);
+  }
+  for (let i = 0; i < ids.length; i += 100) {
+    await sendJson("PUT", MISSIONS_PLAYER_URI, { missionIds: ids.slice(i, i + 100) }).catch(() => {});
+  }
+}
+
+async function sweepLootMarks() {
+  const loot = await getJson(LOOT_URI);
+  if (!Array.isArray(loot)) return;
+  for (const item of loot) {
+    const id = item?.lootId;
+    if (!id || item.isNew !== true || !ready(`lootmark:${id}`, ITEM_COOLDOWN_MS)) continue;
+    stamp(`lootmark:${id}`);
+    await sendJson("DELETE", `${LOOT_URI}/${encodeURIComponent(id)}/new-notification`).catch(() => {});
+  }
+}
+
+async function sweepClash() {
+  const flags = await getJson(CLASH_FLAGS_URI).catch(() => null);
+  if (Array.isArray(flags)) {
+    for (const flag of flags) {
+      if (!flag?.id || flag.status === "ACKNOWLEDGED" || !ready(`clashflag:${flag.id}`, ITEM_COOLDOWN_MS)) continue;
+      stamp(`clashflag:${flag.id}`);
+      await sendJson("POST", `${CLASH_FLAGS_URI}/${encodeURIComponent(flag.id)}/acknowledge`).catch(() => {});
+    }
+  }
+  if (!ready("clash-bulk", BULK_COOLDOWN_MS)) return;
+  stamp("clash-bulk");
+  for (const path of CLASH_BULK_ACKS) {
+    await sendJson("POST", path).catch(() => {});
+  }
+}
+
+async function sweepRanked() {
+  for (const uri of [RANKED_NOTIF_URI, EOS_NOTIF_URI]) {
+    const list = await getJson(uri).catch(() => null);
+    if (!Array.isArray(list)) continue;
+    for (const note of list) {
+      const id = note?.id ?? note?.notificationId;
+      if (id == null || !ready(`ranked:${id}`, ITEM_COOLDOWN_MS)) continue;
+      stamp(`ranked:${id}`);
+      await sendJson("POST", `${uri}/${encodeURIComponent(id)}/acknowledge`).catch(() => {});
+    }
+  }
+}
+
+async function sweepNotices() {
+  for (const uri of NOTICE_LIST_URIS) {
+    const list = await getJson(uri).catch(() => null);
+    if (!Array.isArray(list)) continue;
+    for (const note of list) {
+      const id = note?.id ?? note?.notificationId;
+      if (id == null || !ready(`notice:${id}`, ITEM_COOLDOWN_MS)) continue;
+      stamp(`notice:${id}`);
+      await sendJson("DELETE", `${uri}/${encodeURIComponent(id)}`).catch(() => {});
+    }
+  }
+  if (!ready("notice-bulk", BULK_COOLDOWN_MS)) return;
+  stamp("notice-bulk");
+  for (const path of NOTICE_BULK_DELETES) {
+    await sendJson("DELETE", path).catch(() => {});
+  }
+}
+
+function syncPips() {
+  const wanted = active && on("pips");
+  let style = document.getElementById(PIP_STYLE_ID);
+  if (wanted && !style) {
+    style = document.createElement("style");
+    style.id = PIP_STYLE_ID;
+    style.textContent = PIP_CSS;
+    document.head.appendChild(style);
+  } else if (!wanted && style) {
+    style.remove();
+  }
+}
+
+function scheduleSweep() {
+  if (!active) return;
+  clearTimeout(sweepTimer);
+  sweepTimer = setTimeout(runSweep, SWEEP_DEBOUNCE_MS);
+}
+
+async function runSweep() {
+  if (!active) return;
+  if (sweepRunning) {
+    sweepQueued = true;
+    return;
+  }
+  sweepRunning = true;
+  try {
+    if (on("quests")) await sweepQuests().catch(() => {});
+    if (on("loot")) await sweepLootMarks().catch(() => {});
+    if (on("clash")) await sweepClash().catch(() => {});
+    if (on("ranked")) await sweepRanked().catch(() => {});
+    if (on("notices")) await sweepNotices().catch(() => {});
+  } finally {
+    sweepRunning = false;
+    if (sweepQueued) {
+      sweepQueued = false;
+      scheduleSweep();
+    }
+  }
+}
+
+function onEnable(utils) {
+  api = utils;
+  active = true;
+  cooldowns.clear();
+  for (const uri of [MISSIONS_URI, LOOT_URI, CLASH_FLAGS_URI, RANKED_NOTIF_URI, EOS_NOTIF_URI, ...NOTICE_LIST_URIS]) {
+    try {
+      const off = api.subscribe(uri, scheduleSweep);
+      if (off) unsubscribes.push(off);
+    } catch {}
+  }
+  scheduleSweep();
+  syncPips();
+}
+
+function onDisable() {
+  active = false;
+  clearTimeout(sweepTimer);
+  sweepTimer = null;
+  sweepRunning = false;
+  sweepQueued = false;
+  for (const off of unsubscribes) {
+    try {
+      off();
+    } catch {}
+  }
+  unsubscribes = [];
+  cooldowns.clear();
+  api = null;
+  syncPips();
+}
+
+function onOptionChange() {
+  if (!active) return;
+  scheduleSweep();
+  syncPips();
+}
+
+export function init() {
+  const registerWith = (utils) => {
+    utils.registerPlugin({
+      id: PLUGIN_ID,
+      name: "Auto Read",
+      description: "Automatically marks quests, loot, Clash and client notices as read so no badge or dot stays lit.",
+      version,
+      defaultEnabled: true,
+      options: [
+        {
+          type: "chips",
+          key: "read",
+          label: "Mark as read",
+          description: "Choose what gets marked as read automatically.",
+          items: [
+            { id: "quests", label: "Quests", description: "Quest and mission badges, including the mission button counter.", default: true },
+            { id: "loot", label: "Loot marks", description: "The new mark on freshly earned loot.", default: true },
+            { id: "clash", label: "Clash", description: "Clash tab flags and Clash notifications.", default: true },
+            { id: "ranked", label: "Ranked", description: "Ranked, end-of-season and champion mastery notices.", default: true },
+            { id: "notices", label: "Notices", description: "Patch, patcher, leaver buster, lobby, behavior and gameflow notices.", default: true },
+            { id: "pips", label: "Tab pips", description: "Hides the new pips on activity tabs.", default: true },
+          ],
+        },
+      ],
+      onEnable,
+      onDisable,
+      onOptionChange,
+    });
+  };
+
+  if (window.PerfectionistUtils) {
+    registerWith(window.PerfectionistUtils);
+    return;
+  }
+  addEventListener("perfectionist:utils-ready", (e) => registerWith(e.detail ?? window.PerfectionistUtils), { once: true });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfectionist-plugins",
-  "version": "1.4.1",
+  "version": "1.6.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",
@@ -10,14 +10,16 @@
     "./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-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-claimer.js",
+    "auto-read.js"
   ],
   "repository": {
     "type": "git",

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.2.0";
+export const version = "1.6.0";
 
 const PKG = "perfectionist-plugins";
 const CDN = "https://cdn.jsdelivr.net/npm";
@@ -47,13 +47,21 @@ const BUNDLED_MODULES = [
     id: "auto-claimer",
     file: "auto-claimer.js",
     name: "Auto Claimer",
-    version: "1.0.0",
+    version: "1.2.0",
     description: "Automatically claims battle pass, event and mission rewards the moment they become claimable.",
   },
+  {
+    id: "auto-read",
+    file: "auto-read.js",
+    name: "Auto Read",
+    version: "1.0.0",
+    description: "Automatically marks quests, loot, Clash and client notices as read so no badge or dot stays lit.",
+  },
 ];
 
 const STYLE_CSS = `
-#${PANEL_ID} { padding: 12px 24px 24px 8px; box-sizing: border-box; color: #f0e6d2; font-family: "LoL Body", Arial, "Helvetica Neue", Helvetica, sans-serif; }
+#${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} .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; }
@@ -88,6 +96,30 @@ const STYLE_CSS = `
 #${PANEL_ID} .perf-opt { display: flex; align-items: center; gap: 9px; cursor: pointer; }
 #${PANEL_ID} .perf-opt .perf-opt-label { font-size: 11px; letter-spacing: 0.3px; color: #a09b8c; }
 #${PANEL_ID} .perf-opt:hover .perf-opt-label { color: #f0e6d2; }
+#${PANEL_ID} .perf-opt-group { margin-top: 2px; }
+#${PANEL_ID} .perf-opt-head { display: flex; align-items: center; gap: 9px; }
+#${PANEL_ID} .perf-caret { flex: 0 0 auto; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  border: 1px solid transparent; background: transparent; }
+#${PANEL_ID} .perf-caret:hover { border-color: #785a28; background: #0a1428; }
+#${PANEL_ID} .perf-caret::after { content: ""; width: 12px; height: 12px; transform-origin: center;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 1l4 3-4 3z' fill='%23c89b3c'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
+  transition: transform 0.15s; }
+#${PANEL_ID} .perf-caret:hover::after { filter: brightness(1.4); }
+#${PANEL_ID} .perf-caret--open::after { transform: rotate(90deg); }
+#${PANEL_ID} .perf-opt-children { margin: 8px 0 2px 25px; padding-left: 12px; display: flex; flex-direction: column; gap: 8px;
+  border-left: 1px solid #785a28; }
+#${PANEL_ID} .perf-toggle input:disabled + .perf-box,
+#${PANEL_ID} .perf-toggle input:disabled ~ .perf-opt-label { opacity: 0.45; }
+#${PANEL_ID} .perf-toggle input:disabled ~ .perf-opt-label { cursor: default; }
+#${PANEL_ID} .perf-chip-block { margin-top: 11px; }
+#${PANEL_ID} .perf-chips-label { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #c89b3c; margin-bottom: 7px; }
+#${PANEL_ID} .perf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+#${PANEL_ID} .perf-chip { font-family: "LoL Body", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 10px; font-weight: 700;
+  letter-spacing: 0.5px; text-transform: uppercase; color: #a09b8c; background: #0a1428; border: 1px solid #785a28;
+  padding: 6px 11px; cursor: pointer; }
+#${PANEL_ID} .perf-chip:hover { color: #f0e6d2; border-color: #c89b3c; }
+#${PANEL_ID} .perf-chip--on { color: #010a13; background: #c89b3c; border-color: #c89b3c; }
+#${PANEL_ID} .perf-chip--on:hover { background: #f0e6d2; }
 
 .perf-update { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center;
   justify-content: center; background: rgba(1, 10, 19, 0.72); }
@@ -215,9 +247,22 @@ function setPluginEnabled(id, enabled) {
   return true;
 }
 
+function findOption(entry, key) {
+  for (const option of entry?.options ?? []) {
+    if (option.key === key) return option;
+    for (const child of option.children ?? []) {
+      if (child.key === key) return child;
+    }
+    for (const item of option.items ?? []) {
+      if (`${option.key}.${item.id}` === key) return item;
+    }
+  }
+  return null;
+}
+
 function getOption(id, key) {
   const entry = registry.get(id);
-  const fallback = entry?.options?.find((option) => option.key === key)?.default;
+  const fallback = findOption(entry, key)?.default;
   const stored = state.options?.[id]?.[key];
   return stored === undefined ? Boolean(fallback) : Boolean(stored);
 }
@@ -542,20 +587,86 @@ function el(tag, className, text) {
   return node;
 }
 
+const optionGroupState = new Map();
+
+function buildOptionRow(mod, option, disabled, onChange) {
+  const row = el("label", "perf-opt perf-toggle");
+  row.title = option.description ?? "";
+  const input = el("input");
+  input.type = "checkbox";
+  input.checked = getOption(mod.id, option.key);
+  input.disabled = Boolean(disabled);
+  input.setAttribute("aria-label", `${mod.name}: ${option.label}`);
+  input.addEventListener("change", () => {
+    if (onChange) onChange(input.checked);
+    else setOption(mod.id, option.key, input.checked);
+  });
+  row.append(input, el("span", "perf-box"), el("span", "perf-opt-label", option.label));
+  return row;
+}
+
+function buildChips(mod, option) {
+  const block = el("div", "perf-chip-block");
+  block.title = option.description ?? "";
+  if (option.label) block.append(el("div", "perf-chips-label", option.label));
+  const row = el("div", "perf-chips");
+  for (const item of option.items ?? []) {
+    const key = `${option.key}.${item.id}`;
+    const chip = el("button", "perf-chip", item.label);
+    chip.type = "button";
+    chip.title = item.description ?? "";
+    if (getOption(mod.id, key)) chip.classList.add("perf-chip--on");
+    chip.addEventListener("click", () => setOption(mod.id, key, !getOption(mod.id, key)));
+    row.append(chip);
+  }
+  block.append(row);
+  return block;
+}
+
 function buildOptions(mod) {
   const options = registry.get(mod.id)?.options ?? [];
   if (options.length === 0) return null;
   const wrap = el("div", "perf-opts");
   for (const option of options) {
-    const row = el("label", "perf-opt perf-toggle");
-    row.title = option.description ?? "";
-    const input = el("input");
-    input.type = "checkbox";
-    input.checked = getOption(mod.id, option.key);
-    input.setAttribute("aria-label", `${mod.name}: ${option.label}`);
-    input.addEventListener("change", () => setOption(mod.id, option.key, input.checked));
-    row.append(input, el("span", "perf-box"), el("span", "perf-opt-label", option.label));
-    wrap.append(row);
+    if (option.type === "chips") {
+      wrap.append(buildChips(mod, option));
+      continue;
+    }
+    if (!option.children?.length) {
+      wrap.append(buildOptionRow(mod, option));
+      continue;
+    }
+    const group = el("div", "perf-opt-group");
+    const head = el("div", "perf-opt-head");
+    const caret = el("span", "perf-caret");
+    caret.setAttribute("role", "button");
+    caret.setAttribute("aria-label", `Show ${mod.name} options`);
+    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));
+      childInputs.push(childRow.querySelector("input"));
+      kids.append(childRow);
+    }
+    const master = buildOptionRow(mod, option, false, (checked) => {
+      for (const input of childInputs) input.disabled = !checked;
+      setOption(mod.id, option.key, checked);
+    });
+    const groupKey = `${mod.id}:${option.key}`;
+    const setExpanded = (open) => {
+      optionGroupState.set(groupKey, open);
+      kids.style.display = open ? "" : "none";
+      caret.classList.toggle("perf-caret--open", open);
+    };
+    setExpanded(optionGroupState.get(groupKey) ?? false);
+    caret.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setExpanded(!(optionGroupState.get(groupKey) ?? false));
+    });
+    head.append(master, caret);
+    group.append(head, kids);
+    wrap.append(group);
   }
   return wrap;
 }
@@ -620,13 +731,15 @@ function buildCard(mod) {
 function buildPanel() {
   const panel = el("div");
   panel.id = PANEL_ID;
+  const scroller = el("lol-uikit-scrollable");
+  panel.append(scroller);
 
   const modules = getAvailableModules();
   if (modules.length === 0) {
-    panel.append(el("div", "perf-empty", "No plugins are available."));
+    scroller.append(el("div", "perf-empty", "No plugins are available."));
     return panel;
   }
-  for (const mod of modules) panel.append(buildCard(mod));
+  for (const mod of modules) scroller.append(buildCard(mod));
   return panel;
 }