loadDatasetList function

async function loadDatasetList(filter = ""): Promise<void> {
  const list = document.getElementById("dataset-list");
  const badge = document.getElementById("dataset-count-badge");
  if (!list) return;

  const entries = filter
    ? _allDatasetEntries.filter(
        (e) =>
          e.signals.includes(filter.toLowerCase()) ||
          e.type.includes(filter.toLowerCase()),
      )
    : _allDatasetEntries;

  if (badge)
    badge.textContent = t("datasetEntryCount", [
      String(_allDatasetEntries.length),
    ]);

  list.innerHTML = "";

  if (entries.length === 0) {
    list.innerHTML = `<div class="empty">${t("noDatasetEntries")}</div>`;
    return;
  }

  const visible = entries.slice(0, 200);

  const sourceLabel: Record<string, string> = {
    manual: t("sourceManual"),
    auto: t("sourceAuto"),
    imported: t("sourceImported"),
    builtin: t("sourceBuiltin"),
  };
  const diffLabel: Record<string, string> = {
    easy: t("diffEasy"),
    medium: t("diffMedium"),
    hard: t("diffHard"),
  };

  for (const entry of visible) {
    const item = document.createElement("div");
    item.className = "rule-item";
    item.style.cssText = "gap: 8px; align-items: center;";
    item.innerHTML = `
      <div class="rule-info" style="flex: 1; min-width: 0;">
        <span class="badge">${escapeHtml(entry.type)}</span>
        <span class="rule-selector" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px;" title="${escapeHtml(entry.signals)}">${escapeHtml(entry.signals)}</span>
        <span class="rule-priority" style="white-space: nowrap;">${sourceLabel[entry.source] ?? entry.source} · ${diffLabel[entry.difficulty] ?? entry.difficulty}</span>
      </div>
      <button class="btn btn-sm btn-delete" data-entry-id="${escapeHtml(entry.id)}" title="${t("removeEntryTitle")}">✕</button>
    `;

    item.querySelector(".btn-delete")?.addEventListener("click", async () => {
      await chrome.runtime.sendMessage({
        type: "REMOVE_DATASET_ENTRY",
        payload: entry.id,
      });
      _allDatasetEntries = _allDatasetEntries.filter((e) => e.id !== entry.id);
      const filterInput = document.getElementById(
        "dataset-filter",
      ) as HTMLInputElement | null;
      await loadDatasetList(filterInput?.value ?? "");
      if (badge)
        badge.textContent = t("datasetEntryCount", [
          String(_allDatasetEntries.length),
        ]);
      showToast(t("toastDatasetEntryRemoved"));
    });

    list.appendChild(item);
  }

  if (entries.length > 200) {
    const note = document.createElement("div");
    note.className = "empty";
    note.style.padding = "8px 0";
    note.textContent = t("moreEntriesNote", [String(entries.length - 200)]);
    list.appendChild(note);
  }
}