AnyClip/src/popup/popup.js

const form = {
  apiBase: document.getElementById("apiBase"),
  apiKey: document.getElementById("apiKey"),
  spaceId: document.getElementById("spaceId"),
  objectType: document.getElementById("objectType")
};

const status = document.getElementById("status");

document.getElementById("refreshSpaces").addEventListener("click", refreshSpaces);
document.getElementById("savePage").addEventListener("click", () => saveClip("full"));
document.getElementById("saveSelection").addEventListener("click", saveSettingsOnly);

bootstrap().catch(showError);

async function bootstrap() {
  const settings = await browser.runtime.sendMessage({ type: "load-settings" });
  populateForm(settings);
  await refreshSpaces(settings.spaceId);
}

function populateForm(settings) {
  form.apiBase.value = settings.apiBase || "";
  form.apiKey.value = settings.apiKey || "";
  form.objectType.value = settings.objectType || "page";
}

async function saveSettingsOnly() {
  await persistForm();
  setStatus("Einstellungen gespeichert.");
}

async function refreshSpaces(selectedSpaceId = form.spaceId.value) {
  setStatus("Lade Spaces ...");
  await browser.runtime.sendMessage({
    type: "save-settings",
    payload: {
      apiBase: form.apiBase.value.trim(),
      apiKey: form.apiKey.value.trim()
    }
  });

  try {
    const response = await browser.runtime.sendMessage({ type: "list-spaces" });
    const spaces = response?.spaces || [];

    form.spaceId.innerHTML = "";

    if (spaces.length === 0) {
      const option = document.createElement("option");
      option.value = "";
      option.textContent = "Keine Spaces gefunden";
      form.spaceId.appendChild(option);
      setStatus("Keine Spaces verfügbar.");
      return;
    }

    spaces.forEach((space) => {
      const option = document.createElement("option");
      option.value = space.id || space.space_id || "";
      option.textContent = space.name || option.value;
      option.selected = option.value === selectedSpaceId;
      form.spaceId.appendChild(option);
    });

    if (!form.spaceId.value) {
      form.spaceId.selectedIndex = 0;
    }

    await persistForm();
    setStatus("Spaces geladen.");
  } catch (error) {
    showError(error);
  }
}

async function saveClip(mode) {
  setStatus("Sichere Webseite ...");

  try {
    const result = await browser.runtime.sendMessage({
      type: "save-active-tab",
      payload: {
        mode,
        settings: readForm()
      }
    });

    const objectId = result?.created?.id || result?.created?.object?.id;
    const suffix = objectId ? ` Objekt-ID: ${objectId}` : "";
    setStatus(`In Anytype gespeichert.${suffix}`);
    window.close();
  } catch (error) {
    showError(error);
  }
}

async function persistForm() {
  await browser.runtime.sendMessage({
    type: "save-settings",
    payload: readForm()
  });
}

function readForm() {
  return {
    apiBase: form.apiBase.value.trim(),
    apiKey: form.apiKey.value.trim(),
    spaceId: form.spaceId.value,
    objectType: form.objectType.value
  };
}

function showError(error) {
  setStatus(formatErrorMessage(error));
}

function formatErrorMessage(error) {
  if (error instanceof TypeError) {
    return "Anytype ist nicht erreichbar. Ist Anytype Desktop gestartet? Stimmt die API-URL?";
  }

  const msg = error?.message || "";

  if (msg.includes("(401)")) {
    return "Zugriff verweigert. Bitte den API-Key prüfen.";
  }

  return msg || String(error);
}

function setStatus(message) {
  status.textContent = message;
}