management.js

const $ = (selector) => document.querySelector(selector);
const i18n = globalThis.WindowstabI18n;
const t = (key, vars) => i18n.t(key, vars, state.settings.language);
const selected = new Set();
let state = { categories: [], ungroupedTabs: [], settings: {} };
let editMode = false;
let lastIndex = null;
let deletingCategory = null;
let activeScope = "ungrouped";

const call = (message) => new Promise((resolve, reject) => chrome.runtime.sendMessage(message, (result) => {
  if (chrome.runtime.lastError) reject(chrome.runtime.lastError);
  else if (result?.error) reject(new Error(result.error));
  else resolve(result);
}));
const escape = (value) => String(value || "").replace(/[&<>'"]/g, (character) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" }[character]));
const tabs = () => activeScope === "ungrouped" ? state.ungroupedTabs || [] : state.categories.find((category) => String(category.id) === String(activeScope))?.tabs || [];
const fav = () => "◉"; // Never request remote favicon URLs; browsing data stays local.

async function refresh() {
  state = await call({ type: "get-state" });
  if (activeScope !== "ungrouped" && !state.categories.some((category) => String(category.id) === String(activeScope))) activeScope = "ungrouped";
  const liveIds = new Set(tabs().map((tab) => tab.id));
  [...selected].forEach((id) => { if (!liveIds.has(id)) selected.delete(id); });
  render();
}

function render() {
  const filter = $("#filter").value.toLowerCase();
  const activeCategory = activeScope === "ungrouped" ? null : state.categories.find((category) => String(category.id) === String(activeScope));
  const visibleTabs = tabs();
  $("#category-total").textContent = state.categories.length;
  $("#ungrouped-total").textContent = state.ungroupedTabs.length;
  $("#active-scope-title").textContent = activeCategory ? activeCategory.name : t("ungrouped");
  $("#active-scope-total").textContent = visibleTabs.length;
  $("#open-ungrouped").classList.toggle("active", activeScope === "ungrouped");
  $("#presentation-mode").innerHTML = `<option value="float">${t("modeFloat")}</option><option value="dock">${t("modeDock")}</option><option value="classic">${t("modeClassic")}</option>`;
  $("#presentation-mode").value = state.settings.mode;
  $("#language").innerHTML = i18n.supported.map((locale) => `<option value="${locale}">${i18n.t("languageName", {}, locale)}</option>`).join("");
  $("#language").value = state.settings.language;
  $("#management-title").textContent = t("management");
  document.documentElement.lang = i18n.normalize(state.settings.language);
  document.title = "TabNest · Tab management";
  $("#management-description").textContent = t("managementDesc");
  $("#categories-title").textContent = t("categories");
  $("#category-hint").textContent = t("categoryHint");
  $("#ungrouped-label").textContent = t("ungrouped");
  $("#selection-hint").textContent = t("selectHint");
  $("#move-button").textContent = t("move");
  $("#move-category").setAttribute("aria-label", t("moveCategoryAria"));
  $("#delete-title").textContent = t("deleteDialogTitle");
  $("#delete-warning").textContent = t("cannotUndo");
  $("#delete-cancel").textContent = t("cancel");
  $("#delete-preserve").textContent = t("preserveShort");
  $("#delete-close").textContent = t("closeAll");
  $("#mode-label").childNodes[0].nodeValue = t("displayMode");
  $("#language-label").childNodes[0].nodeValue = t("language");
  $("#filter").placeholder = t("search");
  $("#new-category").textContent = t("create");
  $("#category-list").innerHTML = state.categories.length ? state.categories.map((category) => `<article class="category ${String(activeScope) === String(category.id) ? "active" : ""}" draggable="true" data-category="${category.id}"><span class="drag" aria-hidden="true">⠿</span><i class="${category.color}"></i><button class="category-name" data-open-scope="${category.id}" aria-label="${escape(t("viewCategory", { name: category.name }))}">${escape(category.name)}</button><span class="count">${category.tabs.length}</span><button class="category-edit" aria-label="${t("rename")} ${escape(category.name)}" data-rename="${category.id}">✎</button><button class="delete" aria-label="${t("delete")} ${escape(category.name)}" data-delete="${category.id}">×</button></article>`).join("") : `<p class="empty">${t("noCategories")}</p>`;
  const filtered = visibleTabs.filter((tab) => `${tab.title} ${tab.url}`.toLowerCase().includes(filter));
  $("#tab-list").innerHTML = filtered.map((tab, index) => `<article class="tab ${selected.has(tab.id) ? "selected" : ""}" draggable="${editMode}" data-tab="${tab.id}" data-index="${index}"><button class="check" aria-label="${escape(t("selectTab", { name: tab.title }))}">${selected.has(tab.id) ? "✓" : ""}</button><span class="favicon">${fav(tab)}</span><div><strong>${escape(tab.title || t("unnamed"))}</strong><small>${escape(tab.url || "")}</small></div></article>`).join("") || `<p class="empty">${activeCategory ? t("emptyCategory") : t("noUngrouped")}</p>`;
  $("#selected-count").textContent = selected.size ? t("selected", { count: selected.size }) : activeScope === "ungrouped" ? t("selectUngrouped") : t("selectGrouped");
  $("#edit-mode").textContent = editMode ? t("done") : t("edit");
  $("#tab-list").classList.toggle("editing", editMode);
  $("#move-category").innerHTML = `<option value="">${t("chooseCategory")}</option>${state.categories.map((category) => `<option value="${category.id}">${escape(category.name)}</option>`).join("")}`;
  $("#new-category").disabled = !selected.size || activeScope !== "ungrouped";
  $("#move-button").disabled = !selected.size || !state.categories.length;
}

function selectTab(tabId, index, event) {
  if (!editMode) return;
  if (event.shiftKey && lastIndex !== null) {
    const visibleTabs = [...document.querySelectorAll(".tab")];
    const start = Math.min(lastIndex, index), end = Math.max(lastIndex, index);
    visibleTabs.slice(start, end + 1).forEach((row) => selected.add(Number(row.dataset.tab)));
  } else if (event.ctrlKey || event.metaKey) {
    selected.has(tabId) ? selected.delete(tabId) : selected.add(tabId);
    lastIndex = index;
  } else { selected.clear(); selected.add(tabId); lastIndex = index; }
  render();
}

async function moveSelected(groupId) {
  if (!groupId || !selected.size) return;
  await call({ type: "move-tabs", tabIds: [...selected], groupId });
  selected.clear(); lastIndex = null;
  await refresh();
}

document.addEventListener("click", async (event) => {
  const tab = event.target.closest(".tab");
  const categoryId = event.target.closest("[data-delete]")?.dataset.delete;
  const renameId = event.target.closest("[data-rename]")?.dataset.rename;
  try {
    if (event.target.closest("#new-category")) {
      if (activeScope !== "ungrouped" || !selected.size) throw new Error(t("createNeedsUngrouped"));
      const name = prompt(t("newCategoryPrompt"));
      if (name) await call({ type: "create-group", name, tabIds: [...selected], windowId: state.windowId });
      selected.clear(); lastIndex = null; await refresh(); return;
    }
    if (event.target.closest("#edit-mode")) { editMode = !editMode; if (!editMode) { selected.clear(); lastIndex = null; } render(); return; }
    if (tab) { selectTab(Number(tab.dataset.tab), Number(tab.dataset.index), event); return; }
    const openScope = event.target.closest("[data-open-scope]")?.dataset.openScope;
    if (openScope !== undefined) { activeScope = openScope; selected.clear(); lastIndex = null; render(); return; }
    if (categoryId) { deletingCategory = categoryId; const category = state.categories.find((item) => String(item.id) === String(categoryId)); $("#delete-copy").textContent = t("deleteCopy", { name: category.name, count: category.tabs.length }); $("#delete-dialog").showModal(); return; }
    if (renameId) { const category = state.categories.find((item) => String(item.id) === String(renameId)); const name = prompt(t("renamePrompt"), category.name); if (name) await call({ type: "rename-group", groupId: renameId, name }); await refresh(); }
  } catch (error) { alert(error.message); }
});

$("#filter").addEventListener("input", render);
$("#presentation-mode").addEventListener("change", async (event) => {
  state = await call({ type: "save-settings", settings: { ...state.settings, mode: event.target.value } });
  await refresh();
});
$("#language").addEventListener("change", async (event) => {
  await call({ type: "set-language", language: event.target.value });
  await refresh();
});
$("#move-button").addEventListener("click", () => moveSelected($("#move-category").value).catch((error) => alert(error.message)));
$("#delete-dialog").addEventListener("close", async () => {
  const disposition = $("#delete-dialog").returnValue;
  try {
    if (deletingCategory && ["close", "preserve"].includes(disposition)) await call({ type: "delete-group", groupId: deletingCategory, disposition });
    deletingCategory = null; await refresh();
  } catch (error) { deletingCategory = null; alert(error.message); await refresh(); }
});

document.addEventListener("dragstart", (event) => {
  const tab = event.target.closest(".tab"), category = event.target.closest(".category");
  if (tab && editMode) { if (!selected.has(Number(tab.dataset.tab))) { selected.clear(); selected.add(Number(tab.dataset.tab)); render(); } event.dataTransfer.setData("text/windowstab-tabs", JSON.stringify([...selected])); }
  if (category) event.dataTransfer.setData("text/windowstab-category", category.dataset.category);
});
document.addEventListener("dragover", (event) => { if (event.target.closest(".category")) event.preventDefault(); });
document.addEventListener("drop", async (event) => {
  const target = event.target.closest(".category"); if (!target) return; event.preventDefault();
  const tabIds = event.dataTransfer.getData("text/windowstab-tabs"); const draggedCategory = event.dataTransfer.getData("text/windowstab-category");
  try {
    if (tabIds) { await moveSelected(target.dataset.category); return; }
    if (draggedCategory && draggedCategory !== target.dataset.category) {
      const ids = state.categories.map((item) => String(item.id)); ids.splice(ids.indexOf(String(draggedCategory)), 1); ids.splice(ids.indexOf(String(target.dataset.category)), 0, String(draggedCategory));
      await call({ type: "reorder-groups", groupIds: ids, windowId: state.windowId }); await refresh();
    }
  } catch (error) { alert(error.message); }
});

refresh().catch((error) => alert(t("loadError", { error: error.message })));