loadSavedForms function

async function loadSavedForms(): Promise<void> {
  const forms = (await chrome.runtime.sendMessage({
    type: "GET_SAVED_FORMS",
  })) as SavedForm[];
  const list = document.getElementById("saved-forms-list");
  if (!list) return;

  list.innerHTML = "";

  if (!Array.isArray(forms) || forms.length === 0) {
    list.innerHTML = `<div class="empty">${t("noSavedForms")}</div>`;
    return;
  }

  for (const form of forms) {
    const item = document.createElement("div");
    item.className = "rule-item";
    item.innerHTML = `
      <div class="rule-info">
        <strong>${escapeHtml(form.name)}</strong>
        <span class="rule-selector">${escapeHtml(form.urlPattern)}</span>
        <span class="badge">${escapeHtml(fieldSummary(form))}</span>
      </div>
      <div class="rule-actions">
        <button class="btn btn-sm btn-edit" data-form-id="${escapeHtml(form.id)}">${t("btnEdit")}</button>
        <button class="btn btn-sm btn-delete" data-form-id="${escapeHtml(form.id)}">${t("btnDelete")}</button>
      </div>
    `;

    item.querySelector(".btn-edit")?.addEventListener("click", () => {
      openEditPanel(form);
    });

    item.querySelector(".btn-delete")?.addEventListener("click", async () => {
      await chrome.runtime.sendMessage({
        type: "DELETE_FORM",
        payload: form.id,
      });
      await loadSavedForms();
      showToast(t("toastFormDeleted"));
    });

    list.appendChild(item);
  }
}