refactor(cms): replace custom icon comboboxes with standardized icon picker

Replace the legacy `cms-icon-combobox` implementation with a new, standardized `icon-picker` across multiple admin modules. This change simplifies the UI by using a Bootstrap input group with a dedicated "Pick Icon" button and a preview cell.

Affected areas:
- Policies block editor
- Accreditation, Admissions, History, and Policies admin editor scripts
- Admissions calculator options view
This removes redundant icon list generation and manual dropdown management in favor of a centralized icon picker utility.

public/js/policies-block-editor.js

@@ -549,24 +549,24 @@
           </div>
           <div>
             <label class="form-label fw-semibold">Icon</label>
-            <div class="icon-combobox" data-role="icon-combobox">
+            <div class="input-group" data-role="icon-picker-group">
-              <input type="hidden" data-field="icon" value="${escapeAttribute(block.icon || "")}" />
+              <span class="input-group-text icon-preview-cell">
-              <button type="button" class="icon-combobox-trigger">
+                ${block.icon ? `<i class="${escapeAttribute(resolveCalloutIconPreviewClass(block.icon))}"></i>` : ""}
-                <span class="icon-combobox-value">
+              </span>
-                  <span class="icon-combobox-preview">
+              <input
-                    ${block.icon ? `<i class="fa-solid ${escapeAttribute(block.icon)}"></i>` : '<i class="fas fa-icons"></i>'}
+                type="text"
-                  </span>
+                class="form-control"
-                  <span class="icon-combobox-text">
+                data-field="icon"
-                    <strong>${escapeHtml(block.icon || "Select icon")}</strong>
+                value="${escapeAttribute(block.icon || "")}"
-                  </span>
+                placeholder="Click to pick..."
-                </span>
+                readonly
-                <i class="fas fa-chevron-down icon-combobox-caret"></i>
+                style="cursor:pointer;background:#fff"
+                data-icon-picker-value-mode="icon-name"
+                data-icon-picker-preview-prefix="${escapeAttribute(resolveCalloutIconPreviewPrefix(block.icon))}"
+              />
+              <button type="button" class="btn btn-outline-secondary" data-action="pick-icon">
+                <i class="fas fa-icons me-1"></i>Pick Icon
               </button>
-              <div class="icon-combobox-panel is-hidden">
-                <input type="text" class="form-control icon-combobox-search" placeholder="Search icon name" value="${escapeAttribute(block.icon || "")}" />
-                <div class="icon-combobox-options"></div>
-                <div class="icon-combobox-empty is-hidden">No matching icons. Press Enter to use custom value.</div>
-              </div>
             </div>
           </div>
           <div>
@@ -583,7 +583,7 @@
         block.html = value;
       });
 
-      initializeIconCombobox(body.querySelector('[data-role="icon-combobox"]'), block);
+      initializeIconPicker(body.querySelector('[data-role="icon-picker-group"]'), block);
 
       body.querySelectorAll("input[data-field], select[data-field], textarea[data-field]").forEach((input) => {
         const syncField = function () {
@@ -661,111 +661,184 @@
     return editor;
   }
 
-  function initializeIconCombobox(wrapper, block) {
+  function initializeIconPicker(wrapper, block) {
     if (!wrapper) {
       return;
     }
 
-    const hiddenInput = wrapper.querySelector('input[data-field="icon"]');
+    const input = wrapper.querySelector('input[data-field="icon"]');
-    const trigger = wrapper.querySelector(".icon-combobox-trigger");
+    const button = wrapper.querySelector('[data-action="pick-icon"]');
-    const panel = wrapper.querySelector(".icon-combobox-panel");
-    const searchInput = wrapper.querySelector(".icon-combobox-search");
-    const optionsContainer = wrapper.querySelector(".icon-combobox-options");
-    const emptyState = wrapper.querySelector(".icon-combobox-empty");
-    const preview = wrapper.querySelector(".icon-combobox-preview");
-    const title = wrapper.querySelector(".icon-combobox-text strong");
-    const card = wrapper.closest(".block-card");
 
-    if (!hiddenInput || !trigger || !panel || !searchInput || !optionsContainer || !emptyState || !preview || !title) {
+    if (!input || !button) {
       return;
     }
 
-    const setOpen = function (isOpen) {
-      wrapper.classList.toggle("is-open", isOpen);
-      panel.classList.toggle("is-hidden", !isOpen);
-      if (card) {
-        card.classList.toggle("has-floating-ui", isOpen);
-      }
-      if (isOpen) {
-        searchInput.focus();
-        searchInput.select();
-      }
-    };
-
     const syncIconValue = function (value) {
       const nextValue = String(value || "").trim();
-      hiddenInput.value = nextValue;
+      input.value = nextValue;
-      searchInput.value = nextValue;
+      input.dataset.iconPickerPreviewPrefix = resolveCalloutIconPreviewPrefix(nextValue);
       block.icon = nextValue;
-      preview.innerHTML = nextValue
+      syncCalloutIconPreview(input);
-        ? `<i class="fa-solid ${escapeAttribute(nextValue)}"></i>`
-        : '<i class="fas fa-icons"></i>';
-      title.textContent = nextValue || "Select icon";
       renderPreview();
       renderValidation(validateState());
     };
 
-    const renderOptions = function (query) {
+    input.addEventListener("click", function () {
-      const normalizedQuery = String(query || "").trim().toLowerCase();
+      openSharedIconPicker(input, syncIconValue);
-      const filteredOptions = iconOptions.filter((option) =>
-        option.toLowerCase().includes(normalizedQuery),
-      );
-
-      optionsContainer.innerHTML = "";
-      emptyState.classList.toggle("is-hidden", filteredOptions.length > 0);
-
-      filteredOptions.forEach((option) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = "icon-combobox-option";
-        button.classList.toggle("is-active", option === hiddenInput.value);
-        button.innerHTML = `
-          <span class="icon-combobox-option-main">
-            <i class="fa-solid ${escapeAttribute(option)}"></i>
-            <span>${escapeHtml(option)}</span>
-          </span>
-          ${option === hiddenInput.value ? '<i class="fas fa-check small"></i>' : ""}
-        `;
-        button.addEventListener("click", function () {
-          syncIconValue(option);
-          renderOptions(option);
-          setOpen(false);
-        });
-        optionsContainer.appendChild(button);
-      });
-    };
-
-    trigger.addEventListener("click", function () {
-      const nextIsOpen = panel.classList.contains("is-hidden");
-      setOpen(nextIsOpen);
-      if (nextIsOpen) {
-        renderOptions(searchInput.value || hiddenInput.value);
-      }
     });
 
-    searchInput.addEventListener("input", function () {
+    button.addEventListener("click", function () {
-      renderOptions(searchInput.value);
+      openSharedIconPicker(input, syncIconValue);
-    });
-
-    searchInput.addEventListener("keydown", function (event) {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        syncIconValue(searchInput.value);
-        renderOptions(searchInput.value);
-        setOpen(false);
-      }
-    });
-
-    wrapper.addEventListener("focusout", function () {
-      window.setTimeout(function () {
-        if (!wrapper.contains(document.activeElement)) {
-          setOpen(false);
-        }
-      }, 0);
     });
 
     syncIconValue(block.icon || "");
-    renderOptions(block.icon || "");
+  }
+
+  function openSharedIconPicker(input, onPicked) {
+    if (!window.IconPicker || typeof window.IconPicker.open !== "function") {
+      return;
+    }
+
+    patchSharedIconPicker();
+    window.__policyBlockIconPickerInput = input;
+    window.__policyBlockIconPickerOnPicked = onPicked;
+    window.IconPicker.open(input);
+  }
+
+  function patchSharedIconPicker() {
+    if (!window.IconPicker || window.IconPicker.__policyBlockPatched) {
+      return;
+    }
+
+    const originalPick = typeof window.IconPicker.pick === "function"
+      ? window.IconPicker.pick.bind(window.IconPicker)
+      : null;
+
+    if (!originalPick) {
+      return;
+    }
+
+    const patchedPick = function (value) {
+      originalPick(value);
+
+      const activeInput = window.__policyBlockIconPickerInput;
+      const onPicked = window.__policyBlockIconPickerOnPicked;
+
+      if (!activeInput || typeof onPicked !== "function") {
+        return;
+      }
+
+      activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(value)
+        || resolveCalloutIconPreviewPrefix(activeInput.value || value);
+
+      onPicked(extractIconName(value));
+      activeInput.dispatchEvent(new Event("input", { bubbles: true }));
+      activeInput.dispatchEvent(new Event("change", { bubbles: true }));
+
+      window.__policyBlockIconPickerInput = null;
+      window.__policyBlockIconPickerOnPicked = null;
+    };
+
+    window.IconPicker.pick = patchedPick;
+    window.IconPickerPick = patchedPick;
+    window.IconPicker.__policyBlockPatched = true;
+  }
+
+  function syncCalloutIconPreview(input) {
+    if (!input) {
+      return;
+    }
+
+    const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
+    if (!previewCell) {
+      return;
+    }
+
+    const previewClass = resolveCalloutIconPreviewClass(input.value, input);
+    previewCell.innerHTML = previewClass ? `<i class="${escapeAttribute(previewClass)}"></i>` : "";
+
+    loadIconStyleLookup().then(function () {
+      const nextPrefix = resolveCalloutIconPreviewPrefix(input.value, input);
+      if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
+        input.dataset.iconPickerPreviewPrefix = nextPrefix;
+        const refreshedPreviewClass = resolveCalloutIconPreviewClass(input.value, input);
+        previewCell.innerHTML = refreshedPreviewClass
+          ? `<i class="${escapeAttribute(refreshedPreviewClass)}"></i>`
+          : "";
+      }
+    });
+  }
+
+  function resolveCalloutIconPreviewClass(iconName, input) {
+    const normalizedValue = String(iconName || "").trim();
+    if (!normalizedValue) {
+      return "";
+    }
+
+    return `${resolveCalloutIconPreviewPrefix(normalizedValue, input)} ${normalizedValue}`.trim();
+  }
+
+  function resolveCalloutIconPreviewPrefix(iconName, input) {
+    const explicitPrefix = String(input?.dataset?.iconPickerPreviewPrefix || "").trim();
+    if (explicitPrefix && explicitPrefix !== "fa-solid") {
+      return explicitPrefix;
+    }
+
+    const normalizedIconName = extractIconName(iconName);
+    const knownStyles = window.__policyBlockIconStyleLookup?.[normalizedIconName] || [];
+
+    if (knownStyles.includes("fa-brands")) return "fa-brands";
+    if (knownStyles.includes("fa-regular")) return "fa-regular";
+    if (knownStyles.includes("fa-solid")) return "fa-solid";
+
+    return explicitPrefix || "fa-solid";
+  }
+
+  function extractIconName(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find(
+        (token) =>
+          /^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
+      ) || "";
+  }
+
+  function extractIconStyle(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
+  }
+
+  function loadIconStyleLookup() {
+    if (window.__policyBlockIconStyleLookupPromise) {
+      return window.__policyBlockIconStyleLookupPromise;
+    }
+
+    window.__policyBlockIconStyleLookupPromise = fetch("/js/fa-icons.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        const lookup = {};
+        Object.entries(json || {}).forEach(([name, meta]) => {
+          lookup[`fa-${name}`] = (meta.styles || [])
+            .filter((style) => ["solid", "regular", "brands"].includes(style))
+            .map((style) => `fa-${style}`);
+        });
+        window.__policyBlockIconStyleLookup = lookup;
+        return lookup;
+      })
+      .catch(() => {
+        window.__policyBlockIconStyleLookup = window.__policyBlockIconStyleLookup || {};
+        return window.__policyBlockIconStyleLookup;
+      });
+
+    return window.__policyBlockIconStyleLookupPromise;
   }
 
   function bindEditable(element, onChange, options) {
@@ -1150,7 +1223,7 @@
         callout.className = "callout-block";
         callout.dataset.tone = block.tone || "info";
         callout.innerHTML = `
-          ${block.title ? `<div class="fw-semibold mb-2"><i class="fa-solid ${escapeAttribute(block.icon || "fa-circle-info")} me-2"></i>${escapeHtml(block.title)}</div>` : ""}
+          ${block.title ? `<div class="fw-semibold mb-2"><i class="${escapeAttribute(resolveCalloutIconPreviewClass(block.icon || "fa-circle-info"))} me-2"></i>${escapeHtml(block.title)}</div>` : ""}
           <div>${block.html || ""}</div>
         `;
         node.appendChild(callout);

views/admin/accreditation/partials/editor-script.ejs

@@ -12,15 +12,6 @@
   }
 
   const state = JSON.parse(JSON.stringify(initialData));
-  const iconOptions = Array.from(
-    new Set(
-      (config.tabs || [])
-        .flatMap((tab) => collectIcons(tab.schema))
-        .filter(Boolean),
-    ),
-  );
-
-  ensureIconDatalist(iconOptions);
   renderAllSections();
 
   document.querySelectorAll("[data-tab-key]").forEach((tabTrigger) => {
@@ -602,119 +593,191 @@
   }
 
   function renderIconField(schema, col, parent, key) {
-    const selected = parent[key] || "";
+    const group = document.createElement("div");
-    const wrapper = document.createElement("div");
+    group.className = "input-group";
-    wrapper.className = "cms-icon-combobox";
-    const trigger = document.createElement("button");
-    trigger.type = "button";
-    trigger.className = "cms-icon-dropdown-trigger";
 
-    const triggerValue = document.createElement("div");
+    const preview = document.createElement("span");
-    triggerValue.className = "cms-icon-dropdown-value";
+    preview.className = "input-group-text icon-preview-cell";
+    preview.style.minWidth = "38px";
+    group.appendChild(preview);
 
-    const preview = document.createElement("div");
+    const input = document.createElement("input");
-    preview.className = "cms-icon-preview";
+    input.type = "text";
-    triggerValue.appendChild(preview);
+    input.className = "form-control";
-
+    input.value = parent[key] || "";
-    const triggerText = document.createElement("div");
+    input.readOnly = true;
-    triggerText.className = "cms-icon-dropdown-text";
+    input.placeholder = schema.placeholder || "Click to pick...";
-    triggerValue.appendChild(triggerText);
+    input.style.cursor = "pointer";
-    trigger.appendChild(triggerValue);
+    input.style.backgroundColor = "#fff";
-
+    input.dataset.iconPickerValueMode = "icon-name";
-    const caret = document.createElement("i");
+    input.dataset.iconPickerPreviewPrefix = "fa-solid";
-    caret.className = "fas fa-chevron-down cms-icon-dropdown-caret";
+    input.addEventListener("click", function () {
-    trigger.appendChild(caret);
+      openIconPickerForInput(input);
-    wrapper.appendChild(trigger);
-
-    const panel = document.createElement("div");
-    panel.className = "cms-icon-dropdown-panel d-none";
-
-    const searchInput = document.createElement("input");
-    searchInput.type = "text";
-    searchInput.className = "form-control";
-    searchInput.placeholder = "Search icon name";
-    panel.appendChild(searchInput);
-
-    const optionsWrap = document.createElement("div");
-    optionsWrap.className = "cms-icon-options";
-    panel.appendChild(optionsWrap);
-
-    const empty = document.createElement("div");
-    empty.className = "cms-icon-option-empty d-none";
-    empty.textContent = "No matching icons";
-    panel.appendChild(empty);
-    wrapper.appendChild(panel);
-
-    const setOpen = function (isOpen) {
-      wrapper.classList.toggle("is-open", isOpen);
-      panel.classList.toggle("d-none", !isOpen);
-      if (isOpen) {
-        searchInput.focus();
-        searchInput.select();
-      }
-    };
-
-    const updateTrigger = function (value) {
-      preview.innerHTML = value
-        ? `<i class="fa-solid ${escapeHtml(value)}"></i>`
-        : '<span class="text-muted small">--</span>';
-      triggerText.innerHTML = value
-        ? `<strong>${escapeHtml(value)}</strong><span class="text-muted small">Selected icon</span>`
-        : '<strong>Select icon</strong><span class="text-muted small">No icon selected</span>';
-    };
-
-    const renderOptions = function (searchTerm = "") {
-      const normalized = String(searchTerm || "").trim().toLowerCase();
-      const filteredOptions = (schema.options || []).filter((option) =>
-        option.toLowerCase().includes(normalized),
-      );
-
-      optionsWrap.innerHTML = "";
-      empty.classList.toggle("d-none", filteredOptions.length > 0);
-
-      filteredOptions.forEach((option) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = `cms-icon-option ${parent[key] === option ? "is-active" : ""}`;
-        button.innerHTML = `<span class="cms-icon-option-main"><i class="fa-solid ${escapeHtml(option)}"></i><span>${escapeHtml(option)}</span></span>${parent[key] === option ? '<i class="fas fa-check small"></i>' : ""}`;
-        button.addEventListener("click", function () {
-          parent[key] = option;
-          searchInput.value = option;
-          updateTrigger(option);
-          renderOptions(option);
-          setOpen(false);
-        });
-        optionsWrap.appendChild(button);
-      });
-    };
-
-    trigger.addEventListener("click", function () {
-      const nextOpen = panel.classList.contains("d-none");
-      setOpen(nextOpen);
-      if (nextOpen) {
-        renderOptions(searchInput.value || parent[key] || "");
-      }
     });
-
+    input.addEventListener("input", function () {
-    searchInput.addEventListener("input", function () {
+      parent[key] = input.value;
-      renderOptions(searchInput.value);
     });
+    group.appendChild(input);
 
-    wrapper.addEventListener("focusout", function () {
+    const button = document.createElement("button");
-      window.setTimeout(function () {
+    button.type = "button";
-        if (!wrapper.contains(document.activeElement)) {
+    button.className = "btn btn-outline-secondary";
-          setOpen(false);
+    button.innerHTML = '<i class="fas fa-icons me-1"></i>Pick Icon';
-        }
+    button.addEventListener("click", function () {
-      }, 0);
+      openIconPickerForInput(input);
     });
+    group.appendChild(button);
 
-    searchInput.value = selected;
+    col.appendChild(group);
-    updateTrigger(selected);
+    syncIconPickerPreview(input);
-    renderOptions(selected);
-    col.appendChild(wrapper);
     appendHelp(col, schema, parent[key]);
   }
 
+  function openIconPickerForInput(input) {
+    window.__cmsIconPickerActiveInput = input;
+    patchIconPickerForIconNames();
+    window.IconPicker?.open(input);
+  }
+
+  function patchIconPickerForIconNames() {
+    if (!window.IconPicker || window.IconPicker.__cmsIconNamePatched) {
+      return;
+    }
+
+    const originalPick = typeof window.IconPicker.pick === "function"
+      ? window.IconPicker.pick.bind(window.IconPicker)
+      : null;
+
+    if (!originalPick) {
+      return;
+    }
+
+    const patchedPick = function (value) {
+      originalPick(value);
+
+      const activeInput = window.__cmsIconPickerActiveInput;
+      if (!activeInput) {
+        return;
+      }
+
+      if (activeInput.dataset.iconPickerValueMode === "icon-name") {
+        activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(
+          activeInput.value || value,
+        ) || determineIconPreviewPrefix(activeInput);
+        activeInput.value = extractIconName(activeInput.value || value);
+        syncIconPickerPreview(activeInput);
+        activeInput.dispatchEvent(new Event("input", { bubbles: true }));
+        activeInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+
+      window.__cmsIconPickerActiveInput = null;
+    };
+
+    window.IconPicker.pick = patchedPick;
+    window.IconPickerPick = patchedPick;
+    window.IconPicker.__cmsIconNamePatched = true;
+  }
+
+  function syncIconPickerPreview(input) {
+    if (!input) return;
+
+    const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
+    if (!previewCell) return;
+
+    const previewClass = resolveIconPreviewClass(input);
+    previewCell.innerHTML = previewClass ? `<i class="${escapeHtml(previewClass)}"></i>` : "";
+
+    if (input.dataset.iconPickerValueMode === "icon-name") {
+      loadIconStyleLookup().then(function () {
+        const nextPrefix = determineIconPreviewPrefix(input);
+        if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
+          input.dataset.iconPickerPreviewPrefix = nextPrefix;
+          const nextPreviewClass = resolveIconPreviewClass(input);
+          previewCell.innerHTML = nextPreviewClass
+            ? `<i class="${escapeHtml(nextPreviewClass)}"></i>`
+            : "";
+        }
+      });
+    }
+  }
+
+  function resolveIconPreviewClass(input) {
+    const normalizedValue = String(input?.value || "").trim();
+    if (!normalizedValue) {
+      return "";
+    }
+
+    if (input?.dataset.iconPickerValueMode === "icon-name") {
+      const prefix = determineIconPreviewPrefix(input);
+      return `${prefix} ${normalizedValue}`.trim();
+    }
+
+    return normalizedValue;
+  }
+
+  function extractIconName(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find(
+        (token) =>
+          /^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
+      ) || "";
+  }
+
+  function extractIconStyle(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
+  }
+
+  function determineIconPreviewPrefix(input) {
+    const explicitPrefix = String(input?.dataset.iconPickerPreviewPrefix || "").trim();
+    if (explicitPrefix && explicitPrefix !== "fa-solid") {
+      return explicitPrefix;
+    }
+
+    const iconName = extractIconName(input?.value || "");
+    const knownStyles = window.__cmsIconStyleLookup?.[iconName] || [];
+
+    if (knownStyles.includes("fa-brands")) return "fa-brands";
+    if (knownStyles.includes("fa-regular")) return "fa-regular";
+    if (knownStyles.includes("fa-solid")) return "fa-solid";
+
+    return explicitPrefix || "fa-solid";
+  }
+
+  function loadIconStyleLookup() {
+    if (window.__cmsIconStyleLookupPromise) {
+      return window.__cmsIconStyleLookupPromise;
+    }
+
+    window.__cmsIconStyleLookupPromise = fetch("/js/fa-icons.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        const lookup = {};
+        Object.entries(json || {}).forEach(([name, meta]) => {
+          lookup[`fa-${name}`] = (meta.styles || [])
+            .filter((style) => ["solid", "regular", "brands"].includes(style))
+            .map((style) => `fa-${style}`);
+        });
+        window.__cmsIconStyleLookup = lookup;
+        return lookup;
+      })
+      .catch(() => {
+        window.__cmsIconStyleLookup = window.__cmsIconStyleLookup || {};
+        return window.__cmsIconStyleLookup;
+      });
+
+    return window.__cmsIconStyleLookupPromise;
+  }
+
   function renderCheckbox(schema, container, parent, key) {
     if (typeof parent[key] !== "boolean") {
       parent[key] = Boolean(parent[key]);
@@ -892,33 +955,6 @@
     return schema.options || [];
   }
 
-  function collectIcons(schema) {
-    if (!schema) return [];
-    if (schema.type === "icon") return schema.options || [];
-    if (schema.type === "object") return (schema.fields || []).flatMap(collectIcons);
-    if (schema.type === "array") return collectIcons(schema.itemSchema);
-    if (schema.type === "variant") {
-      return Object.values(schema.variants || {}).flatMap((variant) =>
-        collectIcons(variant.schema),
-      );
-    }
-    return [];
-  }
-
-  function ensureIconDatalist(options) {
-    const existing = document.getElementById("cms-icon-options");
-    if (existing) existing.remove();
-
-    const dataList = document.createElement("datalist");
-    dataList.id = "cms-icon-options";
-    options.forEach((option) => {
-      const item = document.createElement("option");
-      item.value = option;
-      dataList.appendChild(item);
-    });
-    document.body.appendChild(dataList);
-  }
-
   function applyAutoSequenceToArray(schema, targetArray) {
     if (!schema || !Array.isArray(targetArray) || schema.itemSchema.type !== "object") {
       return;

views/admin/admissions/calculator-option.ejs

@@ -87,20 +87,23 @@
 
               <div class="col-12">
                 <label class="form-label fw-semibold"><%= fieldConfig.noteIcon?.label || "Note icon" %></label>
-                <div class="cms-icon-combobox" id="noteIconCombobox">
+                <div class="input-group">
-                  <input type="hidden" name="noteIcon" id="noteIcon" value="<%= option.noteIcon %>" />
+                  <span class="input-group-text icon-preview-cell" style="min-width:38px"></span>
-                  <button type="button" class="cms-icon-dropdown-trigger" id="noteIconTrigger">
+                  <input
-                    <div class="cms-icon-dropdown-value">
+                    type="text"
-                      <div class="cms-icon-preview" id="noteIconPreview"></div>
+                    name="noteIcon"
-                      <div class="cms-icon-dropdown-text" id="noteIconText"></div>
+                    id="noteIcon"
-                    </div>
+                    class="form-control"
-                    <i class="fas fa-chevron-down cms-icon-dropdown-caret"></i>
+                    value="<%= option.noteIcon %>"
+                    placeholder="Click to pick..."
+                    readonly
+                    style="cursor:pointer;background:#fff"
+                    data-icon-picker-value-mode="icon-name"
+                    data-icon-picker-preview-prefix="fa-solid"
+                  />
+                  <button type="button" class="btn btn-outline-secondary" id="noteIconButton">
+                    <i class="fas fa-icons me-1"></i>Pick Icon
                   </button>
-                  <div class="cms-icon-dropdown-panel d-none" id="noteIconPanel">
-                    <input type="text" class="form-control" id="noteIconSearch" placeholder="Search icon name" />
-                    <div class="cms-icon-options" id="noteIconOptions"></div>
-                    <div class="cms-icon-option-empty d-none" id="noteIconEmpty">No matching icons</div>
-                  </div>
                 </div>
                 <div class="field-meta-row">
                   <div class="form-text"><%= fieldConfig.noteIcon?.helpText || "" %></div>
@@ -136,19 +139,11 @@
 
 <script>
   (function () {
-    const iconOptions = <%- JSON.stringify(iconOptions) %>;
     const existingOptionLabels = <%- JSON.stringify(existingOptionLabels || []) %>;
     const form = document.getElementById("calculatorOptionForm");
     const labelInput = document.getElementById("label");
-    const hiddenInput = document.getElementById("noteIcon");
+    const noteIconInput = document.getElementById("noteIcon");
-    const combobox = document.getElementById("noteIconCombobox");
+    const noteIconButton = document.getElementById("noteIconButton");
-    const trigger = document.getElementById("noteIconTrigger");
-    const panel = document.getElementById("noteIconPanel");
-    const preview = document.getElementById("noteIconPreview");
-    const text = document.getElementById("noteIconText");
-    const search = document.getElementById("noteIconSearch");
-    const optionsWrap = document.getElementById("noteIconOptions");
-    const empty = document.getElementById("noteIconEmpty");
 
     form.querySelectorAll("[maxlength]").forEach((input) => {
       const counter = form.querySelector(`[data-counter-for="${input.id}"]`);
@@ -207,69 +202,160 @@
       this.value = numericValue > 0 ? String(Math.floor(numericValue)) : "1";
     });
 
-    function updateTrigger(value) {
+    noteIconInput?.addEventListener("click", function () {
-      preview.innerHTML = value
+      openIconPickerForInput(noteIconInput);
-        ? `<i class="fa-solid ${escapeHtml(value)}"></i>`
-        : '<span class="text-muted small">--</span>';
-      text.innerHTML = value
-        ? `<strong>${escapeHtml(value)}</strong><span class="text-muted small">Selected icon</span>`
-        : '<strong>Select icon</strong><span class="text-muted small">No icon selected</span>';
-    }
-
-    function setOpen(isOpen) {
-      combobox.classList.toggle("is-open", isOpen);
-      panel.classList.toggle("d-none", !isOpen);
-      if (isOpen) {
-        search.focus();
-        search.select();
-      }
-    }
-
-    function renderOptions(term) {
-      const query = String(term || "").trim().toLowerCase();
-      const filtered = iconOptions.filter((option) => option.toLowerCase().includes(query));
-      optionsWrap.innerHTML = "";
-      empty.classList.toggle("d-none", filtered.length > 0);
-
-      filtered.forEach((option) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = `cms-icon-option ${hiddenInput.value === option ? "is-active" : ""}`;
-        button.innerHTML = `<span class="cms-icon-option-main"><i class="fa-solid ${escapeHtml(option)}"></i><span>${escapeHtml(option)}</span></span>${hiddenInput.value === option ? '<i class="fas fa-check small"></i>' : ""}`;
-        button.addEventListener("click", function () {
-          hiddenInput.value = option;
-          search.value = option;
-          updateTrigger(option);
-          renderOptions(option);
-          setOpen(false);
-        });
-        optionsWrap.appendChild(button);
-      });
-    }
-
-    trigger.addEventListener("click", function () {
-      const shouldOpen = panel.classList.contains("d-none");
-      setOpen(shouldOpen);
-      if (shouldOpen) {
-        renderOptions(search.value || hiddenInput.value);
-      }
     });
 
-    search.addEventListener("input", function () {
+    noteIconButton?.addEventListener("click", function () {
-      renderOptions(search.value);
+      openIconPickerForInput(noteIconInput);
     });
 
-    combobox.addEventListener("focusout", function () {
+    syncIconPickerPreview(noteIconInput);
-      window.setTimeout(function () {
+
-        if (!combobox.contains(document.activeElement)) {
+    function openIconPickerForInput(input) {
-          setOpen(false);
+      window.__cmsIconPickerActiveInput = input;
+      patchIconPickerForIconNames();
+      window.IconPicker?.open(input);
+    }
+
+    function patchIconPickerForIconNames() {
+      if (!window.IconPicker || window.IconPicker.__cmsIconNamePatched) {
+        return;
+      }
+
+      const originalPick = typeof window.IconPicker.pick === "function"
+        ? window.IconPicker.pick.bind(window.IconPicker)
+        : null;
+
+      if (!originalPick) {
+        return;
+      }
+
+      const patchedPick = function (value) {
+        originalPick(value);
+
+        const activeInput = window.__cmsIconPickerActiveInput;
+        if (!activeInput) {
+          return;
         }
-      }, 0);
-    });
 
-    search.value = hiddenInput.value;
+        if (activeInput.dataset.iconPickerValueMode === "icon-name") {
-    updateTrigger(hiddenInput.value);
+          activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(
-    renderOptions(hiddenInput.value);
+            activeInput.value || value,
+          ) || determineIconPreviewPrefix(activeInput);
+          activeInput.value = extractIconName(activeInput.value || value);
+          syncIconPickerPreview(activeInput);
+          activeInput.dispatchEvent(new Event("input", { bubbles: true }));
+          activeInput.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+
+        window.__cmsIconPickerActiveInput = null;
+      };
+
+      window.IconPicker.pick = patchedPick;
+      window.IconPickerPick = patchedPick;
+      window.IconPicker.__cmsIconNamePatched = true;
+    }
+
+    function syncIconPickerPreview(input) {
+      if (!input) return;
+
+      const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
+      if (!previewCell) return;
+
+      const previewClass = resolveIconPreviewClass(input);
+      previewCell.innerHTML = previewClass ? `<i class="${escapeHtml(previewClass)}"></i>` : "";
+
+      if (input.dataset.iconPickerValueMode === "icon-name") {
+        loadIconStyleLookup().then(function () {
+          const nextPrefix = determineIconPreviewPrefix(input);
+          if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
+            input.dataset.iconPickerPreviewPrefix = nextPrefix;
+            const nextPreviewClass = resolveIconPreviewClass(input);
+            previewCell.innerHTML = nextPreviewClass
+              ? `<i class="${escapeHtml(nextPreviewClass)}"></i>`
+              : "";
+          }
+        });
+      }
+    }
+
+    function resolveIconPreviewClass(input) {
+      const normalizedValue = String(input?.value || "").trim();
+      if (!normalizedValue) {
+        return "";
+      }
+
+      if (input?.dataset.iconPickerValueMode === "icon-name") {
+        const prefix = determineIconPreviewPrefix(input);
+        return `${prefix} ${normalizedValue}`.trim();
+      }
+
+      return normalizedValue;
+    }
+
+    function extractIconName(value) {
+      return String(value || "")
+        .trim()
+        .split(/\s+/)
+        .find(
+          (token) =>
+            /^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
+        ) || "";
+    }
+
+    function extractIconStyle(value) {
+      return String(value || "")
+        .trim()
+        .split(/\s+/)
+        .find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
+    }
+
+    function determineIconPreviewPrefix(input) {
+      const explicitPrefix = String(input?.dataset.iconPickerPreviewPrefix || "").trim();
+      if (explicitPrefix && explicitPrefix !== "fa-solid") {
+        return explicitPrefix;
+      }
+
+      const iconName = extractIconName(input?.value || "");
+      const knownStyles = window.__cmsIconStyleLookup?.[iconName] || [];
+
+      if (knownStyles.includes("fa-brands")) return "fa-brands";
+      if (knownStyles.includes("fa-regular")) return "fa-regular";
+      if (knownStyles.includes("fa-solid")) return "fa-solid";
+
+      return explicitPrefix || "fa-solid";
+    }
+
+    function loadIconStyleLookup() {
+      if (window.__cmsIconStyleLookupPromise) {
+        return window.__cmsIconStyleLookupPromise;
+      }
+
+      window.__cmsIconStyleLookupPromise = fetch("/js/fa-icons.json")
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((json) => {
+          const lookup = {};
+          Object.entries(json || {}).forEach(([name, meta]) => {
+            lookup[`fa-${name}`] = (meta.styles || [])
+              .filter((style) => ["solid", "regular", "brands"].includes(style))
+              .map((style) => `fa-${style}`);
+          });
+          window.__cmsIconStyleLookup = lookup;
+          return lookup;
+        })
+        .catch(() => {
+          window.__cmsIconStyleLookup = window.__cmsIconStyleLookup || {};
+          return window.__cmsIconStyleLookup;
+        });
+
+      return window.__cmsIconStyleLookupPromise;
+    }
 
     function escapeHtml(value) {
       return String(value || "")

views/admin/admissions/partials/editor-script.ejs

@@ -18,15 +18,6 @@
       ? initialData.calculator.options.map((item) => item.id).filter(Boolean)
       : [],
   );
-  const iconOptions = Array.from(
-    new Set(
-      (config.tabs || [])
-        .flatMap((tab) => collectIcons(tab.schema))
-        .filter(Boolean),
-    ),
-  );
-
-  ensureIconDatalist(iconOptions);
   renderAllSections();
 
   document.querySelectorAll("[data-tab-key]").forEach((tabTrigger) => {
@@ -1078,119 +1069,191 @@
   }
 
   function renderIconField(schema, col, parent, key) {
-    const selected = parent[key] || "";
+    const group = document.createElement("div");
-    const wrapper = document.createElement("div");
+    group.className = "input-group";
-    wrapper.className = "cms-icon-combobox";
-    const trigger = document.createElement("button");
-    trigger.type = "button";
-    trigger.className = "cms-icon-dropdown-trigger";
 
-    const triggerValue = document.createElement("div");
+    const preview = document.createElement("span");
-    triggerValue.className = "cms-icon-dropdown-value";
+    preview.className = "input-group-text icon-preview-cell";
+    preview.style.minWidth = "38px";
+    group.appendChild(preview);
 
-    const preview = document.createElement("div");
+    const input = document.createElement("input");
-    preview.className = "cms-icon-preview";
+    input.type = "text";
-    triggerValue.appendChild(preview);
+    input.className = "form-control";
-
+    input.value = parent[key] || "";
-    const triggerText = document.createElement("div");
+    input.readOnly = true;
-    triggerText.className = "cms-icon-dropdown-text";
+    input.placeholder = schema.placeholder || "Click to pick...";
-    triggerValue.appendChild(triggerText);
+    input.style.cursor = "pointer";
-    trigger.appendChild(triggerValue);
+    input.style.backgroundColor = "#fff";
-
+    input.dataset.iconPickerValueMode = "icon-name";
-    const caret = document.createElement("i");
+    input.dataset.iconPickerPreviewPrefix = "fa-solid";
-    caret.className = "fas fa-chevron-down cms-icon-dropdown-caret";
+    input.addEventListener("click", function () {
-    trigger.appendChild(caret);
+      openIconPickerForInput(input);
-    wrapper.appendChild(trigger);
-
-    const panel = document.createElement("div");
-    panel.className = "cms-icon-dropdown-panel d-none";
-
-    const searchInput = document.createElement("input");
-    searchInput.type = "text";
-    searchInput.className = "form-control";
-    searchInput.placeholder = "Search icon name";
-    panel.appendChild(searchInput);
-
-    const optionsWrap = document.createElement("div");
-    optionsWrap.className = "cms-icon-options";
-    panel.appendChild(optionsWrap);
-
-    const empty = document.createElement("div");
-    empty.className = "cms-icon-option-empty d-none";
-    empty.textContent = "No matching icons";
-    panel.appendChild(empty);
-    wrapper.appendChild(panel);
-
-    const setOpen = function (isOpen) {
-      wrapper.classList.toggle("is-open", isOpen);
-      panel.classList.toggle("d-none", !isOpen);
-      if (isOpen) {
-        searchInput.focus();
-        searchInput.select();
-      }
-    };
-
-    const updateTrigger = function (value) {
-      preview.innerHTML = value
-        ? `<i class="fa-solid ${escapeHtml(value)}"></i>`
-        : '<span class="text-muted small">--</span>';
-      triggerText.innerHTML = value
-        ? `<strong>${escapeHtml(value)}</strong><span class="text-muted small">Selected icon</span>`
-        : '<strong>Select icon</strong><span class="text-muted small">No icon selected</span>';
-    };
-
-    const renderOptions = function (searchTerm = "") {
-      const normalized = String(searchTerm || "").trim().toLowerCase();
-      const filteredOptions = (schema.options || []).filter((option) =>
-        option.toLowerCase().includes(normalized),
-      );
-
-      optionsWrap.innerHTML = "";
-      empty.classList.toggle("d-none", filteredOptions.length > 0);
-
-      filteredOptions.forEach((option) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = `cms-icon-option ${parent[key] === option ? "is-active" : ""}`;
-        button.innerHTML = `<span class="cms-icon-option-main"><i class="fa-solid ${escapeHtml(option)}"></i><span>${escapeHtml(option)}</span></span>${parent[key] === option ? '<i class="fas fa-check small"></i>' : ""}`;
-        button.addEventListener("click", function () {
-          parent[key] = option;
-          searchInput.value = option;
-          updateTrigger(option);
-          renderOptions(option);
-          setOpen(false);
-        });
-        optionsWrap.appendChild(button);
-      });
-    };
-
-    trigger.addEventListener("click", function () {
-      const nextOpen = panel.classList.contains("d-none");
-      setOpen(nextOpen);
-      if (nextOpen) {
-        renderOptions(searchInput.value || parent[key] || "");
-      }
     });
-
+    input.addEventListener("input", function () {
-    searchInput.addEventListener("input", function () {
+      parent[key] = input.value;
-      renderOptions(searchInput.value);
     });
+    group.appendChild(input);
 
-    wrapper.addEventListener("focusout", function () {
+    const button = document.createElement("button");
-      window.setTimeout(function () {
+    button.type = "button";
-        if (!wrapper.contains(document.activeElement)) {
+    button.className = "btn btn-outline-secondary";
-          setOpen(false);
+    button.innerHTML = '<i class="fas fa-icons me-1"></i>Pick Icon';
-        }
+    button.addEventListener("click", function () {
-      }, 0);
+      openIconPickerForInput(input);
     });
+    group.appendChild(button);
 
-    searchInput.value = selected;
+    col.appendChild(group);
-    updateTrigger(selected);
+    syncIconPickerPreview(input);
-    renderOptions(selected);
-    col.appendChild(wrapper);
     appendHelp(col, schema, parent[key]);
   }
 
+  function openIconPickerForInput(input) {
+    window.__cmsIconPickerActiveInput = input;
+    patchIconPickerForIconNames();
+    window.IconPicker?.open(input);
+  }
+
+  function patchIconPickerForIconNames() {
+    if (!window.IconPicker || window.IconPicker.__cmsIconNamePatched) {
+      return;
+    }
+
+    const originalPick = typeof window.IconPicker.pick === "function"
+      ? window.IconPicker.pick.bind(window.IconPicker)
+      : null;
+
+    if (!originalPick) {
+      return;
+    }
+
+    const patchedPick = function (value) {
+      originalPick(value);
+
+      const activeInput = window.__cmsIconPickerActiveInput;
+      if (!activeInput) {
+        return;
+      }
+
+      if (activeInput.dataset.iconPickerValueMode === "icon-name") {
+        activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(
+          activeInput.value || value,
+        ) || determineIconPreviewPrefix(activeInput);
+        activeInput.value = extractIconName(activeInput.value || value);
+        syncIconPickerPreview(activeInput);
+        activeInput.dispatchEvent(new Event("input", { bubbles: true }));
+        activeInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+
+      window.__cmsIconPickerActiveInput = null;
+    };
+
+    window.IconPicker.pick = patchedPick;
+    window.IconPickerPick = patchedPick;
+    window.IconPicker.__cmsIconNamePatched = true;
+  }
+
+  function syncIconPickerPreview(input) {
+    if (!input) return;
+
+    const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
+    if (!previewCell) return;
+
+    const previewClass = resolveIconPreviewClass(input);
+    previewCell.innerHTML = previewClass ? `<i class="${escapeHtml(previewClass)}"></i>` : "";
+
+    if (input.dataset.iconPickerValueMode === "icon-name") {
+      loadIconStyleLookup().then(function () {
+        const nextPrefix = determineIconPreviewPrefix(input);
+        if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
+          input.dataset.iconPickerPreviewPrefix = nextPrefix;
+          const nextPreviewClass = resolveIconPreviewClass(input);
+          previewCell.innerHTML = nextPreviewClass
+            ? `<i class="${escapeHtml(nextPreviewClass)}"></i>`
+            : "";
+        }
+      });
+    }
+  }
+
+  function resolveIconPreviewClass(input) {
+    const normalizedValue = String(input?.value || "").trim();
+    if (!normalizedValue) {
+      return "";
+    }
+
+    if (input?.dataset.iconPickerValueMode === "icon-name") {
+      const prefix = determineIconPreviewPrefix(input);
+      return `${prefix} ${normalizedValue}`.trim();
+    }
+
+    return normalizedValue;
+  }
+
+  function extractIconName(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find(
+        (token) =>
+          /^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
+      ) || "";
+  }
+
+  function extractIconStyle(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
+  }
+
+  function determineIconPreviewPrefix(input) {
+    const explicitPrefix = String(input?.dataset.iconPickerPreviewPrefix || "").trim();
+    if (explicitPrefix && explicitPrefix !== "fa-solid") {
+      return explicitPrefix;
+    }
+
+    const iconName = extractIconName(input?.value || "");
+    const knownStyles = window.__cmsIconStyleLookup?.[iconName] || [];
+
+    if (knownStyles.includes("fa-brands")) return "fa-brands";
+    if (knownStyles.includes("fa-regular")) return "fa-regular";
+    if (knownStyles.includes("fa-solid")) return "fa-solid";
+
+    return explicitPrefix || "fa-solid";
+  }
+
+  function loadIconStyleLookup() {
+    if (window.__cmsIconStyleLookupPromise) {
+      return window.__cmsIconStyleLookupPromise;
+    }
+
+    window.__cmsIconStyleLookupPromise = fetch("/js/fa-icons.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        const lookup = {};
+        Object.entries(json || {}).forEach(([name, meta]) => {
+          lookup[`fa-${name}`] = (meta.styles || [])
+            .filter((style) => ["solid", "regular", "brands"].includes(style))
+            .map((style) => `fa-${style}`);
+        });
+        window.__cmsIconStyleLookup = lookup;
+        return lookup;
+      })
+      .catch(() => {
+        window.__cmsIconStyleLookup = window.__cmsIconStyleLookup || {};
+        return window.__cmsIconStyleLookup;
+      });
+
+    return window.__cmsIconStyleLookupPromise;
+  }
+
   function renderCheckbox(schema, container, parent, key) {
     if (typeof parent[key] !== "boolean") {
       parent[key] = Boolean(parent[key]);
@@ -1394,33 +1457,6 @@
     return schema.options || [];
   }
 
-  function collectIcons(schema) {
-    if (!schema) return [];
-    if (schema.type === "icon") return schema.options || [];
-    if (schema.type === "object") return (schema.fields || []).flatMap(collectIcons);
-    if (schema.type === "array") return collectIcons(schema.itemSchema);
-    if (schema.type === "variant") {
-      return Object.values(schema.variants || {}).flatMap((variant) =>
-        collectIcons(variant.schema),
-      );
-    }
-    return [];
-  }
-
-  function ensureIconDatalist(options) {
-    const existing = document.getElementById("cms-icon-options");
-    if (existing) existing.remove();
-
-    const dataList = document.createElement("datalist");
-    dataList.id = "cms-icon-options";
-    options.forEach((option) => {
-      const item = document.createElement("option");
-      item.value = option;
-      dataList.appendChild(item);
-    });
-    document.body.appendChild(dataList);
-  }
-
   function applyAutoSequenceToArray(schema, targetArray) {
     if (!schema || !Array.isArray(targetArray) || schema.itemSchema.type !== "object") {
       return;

views/admin/history/partials/editor-script.ejs

@@ -12,15 +12,6 @@
   }
 
   const state = JSON.parse(JSON.stringify(initialData));
-  const iconOptions = Array.from(
-    new Set(
-      (config.tabs || [])
-        .flatMap((tab) => collectIcons(tab.schema))
-        .filter(Boolean),
-    ),
-  );
-
-  ensureIconDatalist(iconOptions);
   renderAllSections();
 
   document.querySelectorAll("[data-tab-key]").forEach((tabTrigger) => {
@@ -531,119 +522,191 @@
   }
 
   function renderIconField(schema, col, parent, key) {
-    const selected = parent[key] || "";
+    const group = document.createElement("div");
-    const wrapper = document.createElement("div");
+    group.className = "input-group";
-    wrapper.className = "cms-icon-combobox";
-    const trigger = document.createElement("button");
-    trigger.type = "button";
-    trigger.className = "cms-icon-dropdown-trigger";
 
-    const triggerValue = document.createElement("div");
+    const preview = document.createElement("span");
-    triggerValue.className = "cms-icon-dropdown-value";
+    preview.className = "input-group-text icon-preview-cell";
+    preview.style.minWidth = "38px";
+    group.appendChild(preview);
 
-    const preview = document.createElement("div");
+    const input = document.createElement("input");
-    preview.className = "cms-icon-preview";
+    input.type = "text";
-    triggerValue.appendChild(preview);
+    input.className = "form-control";
-
+    input.value = parent[key] || "";
-    const triggerText = document.createElement("div");
+    input.readOnly = true;
-    triggerText.className = "cms-icon-dropdown-text";
+    input.placeholder = schema.placeholder || "Click to pick...";
-    triggerValue.appendChild(triggerText);
+    input.style.cursor = "pointer";
-    trigger.appendChild(triggerValue);
+    input.style.backgroundColor = "#fff";
-
+    input.dataset.iconPickerValueMode = "icon-name";
-    const caret = document.createElement("i");
+    input.dataset.iconPickerPreviewPrefix = "fa-solid";
-    caret.className = "fas fa-chevron-down cms-icon-dropdown-caret";
+    input.addEventListener("click", function () {
-    trigger.appendChild(caret);
+      openIconPickerForInput(input);
-    wrapper.appendChild(trigger);
-
-    const panel = document.createElement("div");
-    panel.className = "cms-icon-dropdown-panel d-none";
-
-    const searchInput = document.createElement("input");
-    searchInput.type = "text";
-    searchInput.className = "form-control";
-    searchInput.placeholder = "Search icon name";
-    panel.appendChild(searchInput);
-
-    const optionsWrap = document.createElement("div");
-    optionsWrap.className = "cms-icon-options";
-    panel.appendChild(optionsWrap);
-
-    const empty = document.createElement("div");
-    empty.className = "cms-icon-option-empty d-none";
-    empty.textContent = "No matching icons";
-    panel.appendChild(empty);
-    wrapper.appendChild(panel);
-
-    const setOpen = function (isOpen) {
-      wrapper.classList.toggle("is-open", isOpen);
-      panel.classList.toggle("d-none", !isOpen);
-      if (isOpen) {
-        searchInput.focus();
-        searchInput.select();
-      }
-    };
-
-    const updateTrigger = function (value) {
-      preview.innerHTML = value
-        ? `<i class="fa-solid ${escapeHtml(value)}"></i>`
-        : '<span class="text-muted small">--</span>';
-      triggerText.innerHTML = value
-        ? `<strong>${escapeHtml(value)}</strong><span class="text-muted small">Selected icon</span>`
-        : '<strong>Select icon</strong><span class="text-muted small">No icon selected</span>';
-    };
-
-    const renderOptions = function (searchTerm = "") {
-      const normalized = String(searchTerm || "").trim().toLowerCase();
-      const filteredOptions = (schema.options || []).filter((option) =>
-        option.toLowerCase().includes(normalized),
-      );
-
-      optionsWrap.innerHTML = "";
-      empty.classList.toggle("d-none", filteredOptions.length > 0);
-
-      filteredOptions.forEach((option) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = `cms-icon-option ${parent[key] === option ? "is-active" : ""}`;
-        button.innerHTML = `<span class="cms-icon-option-main"><i class="fa-solid ${escapeHtml(option)}"></i><span>${escapeHtml(option)}</span></span>${parent[key] === option ? '<i class="fas fa-check small"></i>' : ""}`;
-        button.addEventListener("click", function () {
-          parent[key] = option;
-          searchInput.value = option;
-          updateTrigger(option);
-          renderOptions(option);
-          setOpen(false);
-        });
-        optionsWrap.appendChild(button);
-      });
-    };
-
-    trigger.addEventListener("click", function () {
-      const nextOpen = panel.classList.contains("d-none");
-      setOpen(nextOpen);
-      if (nextOpen) {
-        renderOptions(searchInput.value || parent[key] || "");
-      }
     });
-
+    input.addEventListener("input", function () {
-    searchInput.addEventListener("input", function () {
+      parent[key] = input.value;
-      renderOptions(searchInput.value);
     });
+    group.appendChild(input);
 
-    wrapper.addEventListener("focusout", function () {
+    const button = document.createElement("button");
-      window.setTimeout(function () {
+    button.type = "button";
-        if (!wrapper.contains(document.activeElement)) {
+    button.className = "btn btn-outline-secondary";
-          setOpen(false);
+    button.innerHTML = '<i class="fas fa-icons me-1"></i>Pick Icon';
-        }
+    button.addEventListener("click", function () {
-      }, 0);
+      openIconPickerForInput(input);
     });
+    group.appendChild(button);
 
-    searchInput.value = selected;
+    col.appendChild(group);
-    updateTrigger(selected);
+    syncIconPickerPreview(input);
-    renderOptions(selected);
-    col.appendChild(wrapper);
     appendHelp(col, schema, parent[key]);
   }
 
+  function openIconPickerForInput(input) {
+    window.__cmsIconPickerActiveInput = input;
+    patchIconPickerForIconNames();
+    window.IconPicker?.open(input);
+  }
+
+  function patchIconPickerForIconNames() {
+    if (!window.IconPicker || window.IconPicker.__cmsIconNamePatched) {
+      return;
+    }
+
+    const originalPick = typeof window.IconPicker.pick === "function"
+      ? window.IconPicker.pick.bind(window.IconPicker)
+      : null;
+
+    if (!originalPick) {
+      return;
+    }
+
+    const patchedPick = function (value) {
+      originalPick(value);
+
+      const activeInput = window.__cmsIconPickerActiveInput;
+      if (!activeInput) {
+        return;
+      }
+
+      if (activeInput.dataset.iconPickerValueMode === "icon-name") {
+        activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(
+          activeInput.value || value,
+        ) || determineIconPreviewPrefix(activeInput);
+        activeInput.value = extractIconName(activeInput.value || value);
+        syncIconPickerPreview(activeInput);
+        activeInput.dispatchEvent(new Event("input", { bubbles: true }));
+        activeInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+
+      window.__cmsIconPickerActiveInput = null;
+    };
+
+    window.IconPicker.pick = patchedPick;
+    window.IconPickerPick = patchedPick;
+    window.IconPicker.__cmsIconNamePatched = true;
+  }
+
+  function syncIconPickerPreview(input) {
+    if (!input) return;
+
+    const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
+    if (!previewCell) return;
+
+    const previewClass = resolveIconPreviewClass(input);
+    previewCell.innerHTML = previewClass ? `<i class="${escapeHtml(previewClass)}"></i>` : "";
+
+    if (input.dataset.iconPickerValueMode === "icon-name") {
+      loadIconStyleLookup().then(function () {
+        const nextPrefix = determineIconPreviewPrefix(input);
+        if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
+          input.dataset.iconPickerPreviewPrefix = nextPrefix;
+          const nextPreviewClass = resolveIconPreviewClass(input);
+          previewCell.innerHTML = nextPreviewClass
+            ? `<i class="${escapeHtml(nextPreviewClass)}"></i>`
+            : "";
+        }
+      });
+    }
+  }
+
+  function resolveIconPreviewClass(input) {
+    const normalizedValue = String(input?.value || "").trim();
+    if (!normalizedValue) {
+      return "";
+    }
+
+    if (input?.dataset.iconPickerValueMode === "icon-name") {
+      const prefix = determineIconPreviewPrefix(input);
+      return `${prefix} ${normalizedValue}`.trim();
+    }
+
+    return normalizedValue;
+  }
+
+  function extractIconName(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find(
+        (token) =>
+          /^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
+      ) || "";
+  }
+
+  function extractIconStyle(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
+  }
+
+  function determineIconPreviewPrefix(input) {
+    const explicitPrefix = String(input?.dataset.iconPickerPreviewPrefix || "").trim();
+    if (explicitPrefix && explicitPrefix !== "fa-solid") {
+      return explicitPrefix;
+    }
+
+    const iconName = extractIconName(input?.value || "");
+    const knownStyles = window.__cmsIconStyleLookup?.[iconName] || [];
+
+    if (knownStyles.includes("fa-brands")) return "fa-brands";
+    if (knownStyles.includes("fa-regular")) return "fa-regular";
+    if (knownStyles.includes("fa-solid")) return "fa-solid";
+
+    return explicitPrefix || "fa-solid";
+  }
+
+  function loadIconStyleLookup() {
+    if (window.__cmsIconStyleLookupPromise) {
+      return window.__cmsIconStyleLookupPromise;
+    }
+
+    window.__cmsIconStyleLookupPromise = fetch("/js/fa-icons.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        const lookup = {};
+        Object.entries(json || {}).forEach(([name, meta]) => {
+          lookup[`fa-${name}`] = (meta.styles || [])
+            .filter((style) => ["solid", "regular", "brands"].includes(style))
+            .map((style) => `fa-${style}`);
+        });
+        window.__cmsIconStyleLookup = lookup;
+        return lookup;
+      })
+      .catch(() => {
+        window.__cmsIconStyleLookup = window.__cmsIconStyleLookup || {};
+        return window.__cmsIconStyleLookup;
+      });
+
+    return window.__cmsIconStyleLookupPromise;
+  }
+
   function renderCheckbox(schema, container, parent, key) {
     if (typeof parent[key] !== "boolean") {
       parent[key] = Boolean(parent[key]);
@@ -821,33 +884,6 @@
     return schema.options || [];
   }
 
-  function collectIcons(schema) {
-    if (!schema) return [];
-    if (schema.type === "icon") return schema.options || [];
-    if (schema.type === "object") return (schema.fields || []).flatMap(collectIcons);
-    if (schema.type === "array") return collectIcons(schema.itemSchema);
-    if (schema.type === "variant") {
-      return Object.values(schema.variants || {}).flatMap((variant) =>
-        collectIcons(variant.schema),
-      );
-    }
-    return [];
-  }
-
-  function ensureIconDatalist(options) {
-    const existing = document.getElementById("cms-icon-options");
-    if (existing) existing.remove();
-
-    const dataList = document.createElement("datalist");
-    dataList.id = "cms-icon-options";
-    options.forEach((option) => {
-      const item = document.createElement("option");
-      item.value = option;
-      dataList.appendChild(item);
-    });
-    document.body.appendChild(dataList);
-  }
-
   function applyAutoSequenceToArray(schema, targetArray) {
     if (!schema || !Array.isArray(targetArray) || schema.itemSchema.type !== "object") {
       return;

views/admin/policies/partials/editor-script.ejs

@@ -12,15 +12,6 @@
   }
 
   const state = JSON.parse(JSON.stringify(initialData));
-  const iconOptions = Array.from(
-    new Set(
-      (config.tabs || [])
-        .flatMap((tab) => collectIcons(tab.schema))
-        .filter(Boolean),
-    ),
-  );
-
-  ensureIconDatalist(iconOptions);
   renderAllSections();
 
   document.querySelectorAll("[data-tab-key]").forEach((tabTrigger) => {
@@ -550,119 +541,191 @@
   }
 
   function renderIconField(schema, col, parent, key) {
-    const selected = parent[key] || "";
+    const group = document.createElement("div");
-    const wrapper = document.createElement("div");
+    group.className = "input-group";
-    wrapper.className = "cms-icon-combobox";
-    const trigger = document.createElement("button");
-    trigger.type = "button";
-    trigger.className = "cms-icon-dropdown-trigger";
 
-    const triggerValue = document.createElement("div");
+    const preview = document.createElement("span");
-    triggerValue.className = "cms-icon-dropdown-value";
+    preview.className = "input-group-text icon-preview-cell";
+    preview.style.minWidth = "38px";
+    group.appendChild(preview);
 
-    const preview = document.createElement("div");
+    const input = document.createElement("input");
-    preview.className = "cms-icon-preview";
+    input.type = "text";
-    triggerValue.appendChild(preview);
+    input.className = "form-control";
-
+    input.value = parent[key] || "";
-    const triggerText = document.createElement("div");
+    input.readOnly = true;
-    triggerText.className = "cms-icon-dropdown-text";
+    input.placeholder = schema.placeholder || "Click to pick...";
-    triggerValue.appendChild(triggerText);
+    input.style.cursor = "pointer";
-    trigger.appendChild(triggerValue);
+    input.style.backgroundColor = "#fff";
-
+    input.dataset.iconPickerValueMode = "icon-name";
-    const caret = document.createElement("i");
+    input.dataset.iconPickerPreviewPrefix = "fa-solid";
-    caret.className = "fas fa-chevron-down cms-icon-dropdown-caret";
+    input.addEventListener("click", function () {
-    trigger.appendChild(caret);
+      openIconPickerForInput(input);
-    wrapper.appendChild(trigger);
-
-    const panel = document.createElement("div");
-    panel.className = "cms-icon-dropdown-panel d-none";
-
-    const searchInput = document.createElement("input");
-    searchInput.type = "text";
-    searchInput.className = "form-control";
-    searchInput.placeholder = "Search icon name";
-    panel.appendChild(searchInput);
-
-    const optionsWrap = document.createElement("div");
-    optionsWrap.className = "cms-icon-options";
-    panel.appendChild(optionsWrap);
-
-    const empty = document.createElement("div");
-    empty.className = "cms-icon-option-empty d-none";
-    empty.textContent = "No matching icons";
-    panel.appendChild(empty);
-    wrapper.appendChild(panel);
-
-    const setOpen = function (isOpen) {
-      wrapper.classList.toggle("is-open", isOpen);
-      panel.classList.toggle("d-none", !isOpen);
-      if (isOpen) {
-        searchInput.focus();
-        searchInput.select();
-      }
-    };
-
-    const updateTrigger = function (value) {
-      preview.innerHTML = value
-        ? `<i class="fa-solid ${escapeHtml(value)}"></i>`
-        : '<span class="text-muted small">--</span>';
-      triggerText.innerHTML = value
-        ? `<strong>${escapeHtml(value)}</strong><span class="text-muted small">Selected icon</span>`
-        : '<strong>Select icon</strong><span class="text-muted small">No icon selected</span>';
-    };
-
-    const renderOptions = function (searchTerm = "") {
-      const normalized = String(searchTerm || "").trim().toLowerCase();
-      const filteredOptions = (schema.options || []).filter((option) =>
-        option.toLowerCase().includes(normalized),
-      );
-
-      optionsWrap.innerHTML = "";
-      empty.classList.toggle("d-none", filteredOptions.length > 0);
-
-      filteredOptions.forEach((option) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.className = `cms-icon-option ${parent[key] === option ? "is-active" : ""}`;
-        button.innerHTML = `<span class="cms-icon-option-main"><i class="fa-solid ${escapeHtml(option)}"></i><span>${escapeHtml(option)}</span></span>${parent[key] === option ? '<i class="fas fa-check small"></i>' : ""}`;
-        button.addEventListener("click", function () {
-          parent[key] = option;
-          searchInput.value = option;
-          updateTrigger(option);
-          renderOptions(option);
-          setOpen(false);
-        });
-        optionsWrap.appendChild(button);
-      });
-    };
-
-    trigger.addEventListener("click", function () {
-      const nextOpen = panel.classList.contains("d-none");
-      setOpen(nextOpen);
-      if (nextOpen) {
-        renderOptions(searchInput.value || parent[key] || "");
-      }
     });
-
+    input.addEventListener("input", function () {
-    searchInput.addEventListener("input", function () {
+      parent[key] = input.value;
-      renderOptions(searchInput.value);
     });
+    group.appendChild(input);
 
-    wrapper.addEventListener("focusout", function () {
+    const button = document.createElement("button");
-      window.setTimeout(function () {
+    button.type = "button";
-        if (!wrapper.contains(document.activeElement)) {
+    button.className = "btn btn-outline-secondary";
-          setOpen(false);
+    button.innerHTML = '<i class="fas fa-icons me-1"></i>Pick Icon';
-        }
+    button.addEventListener("click", function () {
-      }, 0);
+      openIconPickerForInput(input);
     });
+    group.appendChild(button);
 
-    searchInput.value = selected;
+    col.appendChild(group);
-    updateTrigger(selected);
+    syncIconPickerPreview(input);
-    renderOptions(selected);
-    col.appendChild(wrapper);
     appendHelp(col, schema, parent[key]);
   }
 
+  function openIconPickerForInput(input) {
+    window.__cmsIconPickerActiveInput = input;
+    patchIconPickerForIconNames();
+    window.IconPicker?.open(input);
+  }
+
+  function patchIconPickerForIconNames() {
+    if (!window.IconPicker || window.IconPicker.__cmsIconNamePatched) {
+      return;
+    }
+
+    const originalPick = typeof window.IconPicker.pick === "function"
+      ? window.IconPicker.pick.bind(window.IconPicker)
+      : null;
+
+    if (!originalPick) {
+      return;
+    }
+
+    const patchedPick = function (value) {
+      originalPick(value);
+
+      const activeInput = window.__cmsIconPickerActiveInput;
+      if (!activeInput) {
+        return;
+      }
+
+      if (activeInput.dataset.iconPickerValueMode === "icon-name") {
+        activeInput.dataset.iconPickerPreviewPrefix = extractIconStyle(
+          activeInput.value || value,
+        ) || determineIconPreviewPrefix(activeInput);
+        activeInput.value = extractIconName(activeInput.value || value);
+        syncIconPickerPreview(activeInput);
+        activeInput.dispatchEvent(new Event("input", { bubbles: true }));
+        activeInput.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+
+      window.__cmsIconPickerActiveInput = null;
+    };
+
+    window.IconPicker.pick = patchedPick;
+    window.IconPickerPick = patchedPick;
+    window.IconPicker.__cmsIconNamePatched = true;
+  }
+
+  function syncIconPickerPreview(input) {
+    if (!input) return;
+
+    const previewCell = input.closest(".input-group")?.querySelector(".icon-preview-cell");
+    if (!previewCell) return;
+
+    const previewClass = resolveIconPreviewClass(input);
+    previewCell.innerHTML = previewClass ? `<i class="${escapeHtml(previewClass)}"></i>` : "";
+
+    if (input.dataset.iconPickerValueMode === "icon-name") {
+      loadIconStyleLookup().then(function () {
+        const nextPrefix = determineIconPreviewPrefix(input);
+        if (nextPrefix !== input.dataset.iconPickerPreviewPrefix) {
+          input.dataset.iconPickerPreviewPrefix = nextPrefix;
+          const nextPreviewClass = resolveIconPreviewClass(input);
+          previewCell.innerHTML = nextPreviewClass
+            ? `<i class="${escapeHtml(nextPreviewClass)}"></i>`
+            : "";
+        }
+      });
+    }
+  }
+
+  function resolveIconPreviewClass(input) {
+    const normalizedValue = String(input?.value || "").trim();
+    if (!normalizedValue) {
+      return "";
+    }
+
+    if (input?.dataset.iconPickerValueMode === "icon-name") {
+      const prefix = determineIconPreviewPrefix(input);
+      return `${prefix} ${normalizedValue}`.trim();
+    }
+
+    return normalizedValue;
+  }
+
+  function extractIconName(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find(
+        (token) =>
+          /^fa-[a-z0-9-]+$/i.test(token) && !/^fa-(solid|regular|brands)$/i.test(token),
+      ) || "";
+  }
+
+  function extractIconStyle(value) {
+    return String(value || "")
+      .trim()
+      .split(/\s+/)
+      .find((token) => /^fa-(solid|regular|brands)$/i.test(token)) || "";
+  }
+
+  function determineIconPreviewPrefix(input) {
+    const explicitPrefix = String(input?.dataset.iconPickerPreviewPrefix || "").trim();
+    if (explicitPrefix && explicitPrefix !== "fa-solid") {
+      return explicitPrefix;
+    }
+
+    const iconName = extractIconName(input?.value || "");
+    const knownStyles = window.__cmsIconStyleLookup?.[iconName] || [];
+
+    if (knownStyles.includes("fa-brands")) return "fa-brands";
+    if (knownStyles.includes("fa-regular")) return "fa-regular";
+    if (knownStyles.includes("fa-solid")) return "fa-solid";
+
+    return explicitPrefix || "fa-solid";
+  }
+
+  function loadIconStyleLookup() {
+    if (window.__cmsIconStyleLookupPromise) {
+      return window.__cmsIconStyleLookupPromise;
+    }
+
+    window.__cmsIconStyleLookupPromise = fetch("/js/fa-icons.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((json) => {
+        const lookup = {};
+        Object.entries(json || {}).forEach(([name, meta]) => {
+          lookup[`fa-${name}`] = (meta.styles || [])
+            .filter((style) => ["solid", "regular", "brands"].includes(style))
+            .map((style) => `fa-${style}`);
+        });
+        window.__cmsIconStyleLookup = lookup;
+        return lookup;
+      })
+      .catch(() => {
+        window.__cmsIconStyleLookup = window.__cmsIconStyleLookup || {};
+        return window.__cmsIconStyleLookup;
+      });
+
+    return window.__cmsIconStyleLookupPromise;
+  }
+
   function renderCheckbox(schema, container, parent, key) {
     if (typeof parent[key] !== "boolean") {
       parent[key] = Boolean(parent[key]);
@@ -910,33 +973,6 @@
     return schema.options || [];
   }
 
-  function collectIcons(schema) {
-    if (!schema) return [];
-    if (schema.type === "icon") return schema.options || [];
-    if (schema.type === "object") return (schema.fields || []).flatMap(collectIcons);
-    if (schema.type === "array") return collectIcons(schema.itemSchema);
-    if (schema.type === "variant") {
-      return Object.values(schema.variants || {}).flatMap((variant) =>
-        collectIcons(variant.schema),
-      );
-    }
-    return [];
-  }
-
-  function ensureIconDatalist(options) {
-    const existing = document.getElementById("cms-icon-options");
-    if (existing) existing.remove();
-
-    const dataList = document.createElement("datalist");
-    dataList.id = "cms-icon-options";
-    options.forEach((option) => {
-      const item = document.createElement("option");
-      item.value = option;
-      dataList.appendChild(item);
-    });
-    document.body.appendChild(dataList);
-  }
-
   function applyAutoSequenceToArray(schema, targetArray) {
     if (!schema || !Array.isArray(targetArray) || schema.itemSchema.type !== "object") {
       return;