sidepanel.js

/* ============================================
   QuickLinks — JS
   ============================================ */

// ── Helpers ──
const $ = (sel) => document.getElementById(sel) || document.querySelector(sel);
const $$ = (sel, root = document) => root.querySelectorAll(sel);

function generateId() {
  return Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
}

function getHostname(url) {
  try { return new URL(url).hostname.replace('www.', ''); } catch { return url; }
}

function escapeHtml(str) {
  const el = document.createElement('div');
  el.textContent = str;
  return el.innerHTML;
}

// ICONS loaded from icons.js

// ── State ──
let groups = [];
const expandedGroups = new Set();

// ── Storage ──
async function loadGroups() {
  const data = await chrome.storage.local.get('groups');
  groups = data.groups || [];
  render();
}

async function saveGroups() {
  await chrome.storage.local.set({ groups });
}

chrome.storage.onChanged.addListener((changes) => {
  if (changes.groups) {
    groups = changes.groups.newValue || [];
    render();
  }
});

// ── DOM Refs ──
const groupsContainer = $('groups-container');
const addGroupBtn = $('add-group-btn');
const modalOverlay = $('modal-overlay');
const modal = $('modal-popup');
const modalTitle = $('modal-title');
const modalBody = $('modal-body');
const modalSave = $('modal-save');
const modalClose = $('modal-close');
const settingsBtn = $('settings-btn');
const settingsView = $('settings-view');
const settingsBack = $('settings-back');
const bottomActions = document.querySelector('.bottom-actions');

// ── Modal ──
let modalSaveHandler = null;

function openModal(title, bodyHTML, saveLabel, onSave, triggerEl) {
  modalTitle.textContent = title;
  modalBody.innerHTML = bodyHTML;
  modalSave.textContent = saveLabel;

  modalOverlay.classList.remove('hidden', 'closing');
  modal.classList.remove('hidden', 'modal-close-anim');

  // Position near trigger
  if (triggerEl) {
    const rect = triggerEl.getBoundingClientRect();
    const viewH = window.innerHeight;
    const gap = 8;

    modal.style.visibility = 'hidden';
    modal.style.top = '0px';
    const modalH = modal.offsetHeight;
    modal.style.visibility = '';

    const below = viewH - rect.bottom - gap;
    const above = rect.top - gap;

    if (below >= modalH) {
      modal.style.top = `${rect.bottom + gap}px`;
      modal.style.transformOrigin = 'center top';
    } else if (above >= modalH) {
      modal.style.top = `${rect.top - gap - modalH}px`;
      modal.style.transformOrigin = 'center bottom';
    } else {
      modal.style.top = `${Math.max(gap, (viewH - modalH) / 2)}px`;
      modal.style.transformOrigin = 'center center';
    }
  } else {
    modal.style.top = '24px';
    modal.style.transformOrigin = 'center top';
  }

  if (modalSaveHandler) modalSave.removeEventListener('click', modalSaveHandler);
  modalSaveHandler = onSave;
  modalSave.addEventListener('click', modalSaveHandler);

  const firstInput = modalBody.querySelector('input');
  if (firstInput) setTimeout(() => firstInput.focus(), 50);
}

function closeModal() {
  modal.classList.add('modal-close-anim');
  modalOverlay.classList.add('closing');
  setTimeout(() => {
    modalOverlay.classList.add('hidden');
    modal.classList.add('hidden');
    modalOverlay.classList.remove('closing');
    modal.classList.remove('modal-close-anim');
    if (modalSaveHandler) {
      modalSave.removeEventListener('click', modalSaveHandler);
      modalSaveHandler = null;
    }
  }, 150);
}

function addModalKeydown(inputId) {
  const input = $(inputId);
  if (!input) return;
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') modalSave.click();
    if (e.key === 'Escape') closeModal();
  });
}

modalClose.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (e) => {
  if (e.target === modalOverlay) closeModal();
});

// ── Group CRUD ──
addGroupBtn.addEventListener('click', () => {
  openModal('Create Group',
    '<input type="text" id="modal-group-name" class="modal-input" placeholder="Group name...">',
    'Create', () => {
      const name = $('modal-group-name').value.trim();
      if (!name) return;
      const id = generateId();
      groups.push({ id, name, links: [] });
      expandedGroups.add(id);
      saveGroups().then(render);
      closeModal();
    }, addGroupBtn);
  addModalKeydown('modal-group-name');
});

function openRenameModal(group, triggerEl) {
  openModal('Rename Group',
    `<input type="text" id="modal-group-name" class="modal-input" placeholder="Group name..." value="${escapeHtml(group.name)}">`,
    'Rename', () => {
      const name = $('modal-group-name').value.trim();
      if (!name) return;
      group.name = name;
      saveGroups().then(render);
      closeModal();
    }, triggerEl);
  const input = $('modal-group-name');
  input.select();
  addModalKeydown('modal-group-name');
}

// ── Link CRUD ──
function openLinkModal(group, link, triggerEl) {
  const isEdit = !!link;
  openModal(isEdit ? 'Edit Link' : 'Add Link',
    `<input type="text" id="modal-link-label" class="modal-input" placeholder="Label" value="${isEdit ? escapeHtml(link.label) : ''}">
     <input type="url" id="modal-link-url" class="modal-input" placeholder="https://..." value="${isEdit ? escapeHtml(link.url) : ''}">`,
    isEdit ? 'Update' : 'Add', () => {
      const label = $('modal-link-label').value.trim();
      const url = $('modal-link-url').value.trim();
      if (!label || !url) return;
      if (isEdit) { link.label = label; link.url = url; }
      else group.links.push({ id: generateId(), label, url });
      saveGroups().then(render);
      closeModal();
    }, triggerEl);
  addModalKeydown('modal-link-url');
}

// ── Render ──
function render() {
  groupsContainer.innerHTML = '';

  if (groups.length === 0) {
    groupsContainer.innerHTML = `
      <div class="empty-state">
        <div class="empty-state-icon">${ICONS.folder}</div>
        <p>No groups yet</p>
        <small>Click + Create Group to get started</small>
      </div>`;
    return;
  }

  groups.forEach((group) => {
    const isExpanded = expandedGroups.has(group.id);
    const el = document.createElement('div');
    el.className = 'group card';

    // Header
    const header = document.createElement('div');
    header.className = 'group-header';
    header.innerHTML = `
      <span class="group-arrow ${isExpanded ? 'expanded' : ''}">${ICONS.chevron}</span>
      <span class="group-name">${escapeHtml(group.name)}</span>
      <span class="group-count">${group.links.length}</span>
      <div class="group-actions">
        <button class="icon-btn add-link-btn" title="Add link">${ICONS.plus}</button>
        <button class="icon-btn edit-group-btn" title="Rename">${ICONS.edit}</button>
        <button class="icon-btn delete-group-btn" title="Delete">${ICONS.trash}</button>
      </div>`;

    header.addEventListener('click', (e) => {
      if (e.target.closest('.group-actions')) return;
      expandedGroups.has(group.id) ? expandedGroups.delete(group.id) : expandedGroups.add(group.id);
      render();
    });

    header.querySelector('.delete-group-btn').addEventListener('click', () => {
      if (confirm(`Delete "${group.name}" and all its links?`)) {
        groups = groups.filter(g => g.id !== group.id);
        expandedGroups.delete(group.id);
        saveGroups().then(render);
      }
    });
    header.querySelector('.edit-group-btn').addEventListener('click', (e) => openRenameModal(group, e.currentTarget));
    header.querySelector('.add-link-btn').addEventListener('click', (e) => openLinkModal(group, null, e.currentTarget));

    el.appendChild(header);

    // Links
    if (isExpanded) {
      const linksEl = document.createElement('div');
      linksEl.className = 'group-links';

      if (group.links.length === 0) {
        linksEl.innerHTML = '<div class="empty-links">No links added</div>';
      }

      group.links.forEach((link) => {
        const row = document.createElement('div');
        row.className = 'link-item card';
        row.innerHTML = `
          <div class="link-text">
            <span class="link-label">${escapeHtml(link.label)}</span>
            <span class="link-url">${escapeHtml(link.url)}</span>
          </div>
          <div class="link-actions">
            <button class="icon-btn open-link-btn" title="Open">${ICONS.externalLink}</button>
            <button class="icon-btn edit-link-btn" title="Edit">${ICONS.edit}</button>
            <button class="icon-btn delete-link-btn" title="Delete">${ICONS.trash}</button>
          </div>`;

        row.addEventListener('click', (e) => {
          if (e.target.closest('.link-actions')) return;
          chrome.tabs.create({ url: link.url });
        });
        row.querySelector('.open-link-btn').addEventListener('click', () => chrome.tabs.create({ url: link.url }));
        row.querySelector('.delete-link-btn').addEventListener('click', () => {
          group.links = group.links.filter(l => l.id !== link.id);
          saveGroups().then(render);
        });
        row.querySelector('.edit-link-btn').addEventListener('click', (e) => openLinkModal(group, link, e.currentTarget));

        linksEl.appendChild(row);
      });

      el.appendChild(linksEl);
    }

    groupsContainer.appendChild(el);
  });
}

// ── Settings ──
settingsBtn.innerHTML = ICONS.settings;
document.querySelector('.create-group-icon').innerHTML = ICONS.plus;

settingsBtn.addEventListener('click', () => {
  groupsContainer.classList.add('hidden');
  settingsView.classList.remove('hidden');
  bottomActions.classList.add('hidden');
  renderExportList();
});

settingsBack.addEventListener('click', () => {
  settingsView.classList.add('hidden');
  groupsContainer.classList.remove('hidden');
  bottomActions.classList.remove('hidden');
});

// ── Export ──
function renderExportList() {
  const container = $('export-groups');
  if (groups.length === 0) {
    container.innerHTML = '<div class="empty-links">No groups to export</div>';
    return;
  }

  let html = `<label class="export-item select-all">
    <input type="checkbox" id="export-select-all" checked> <strong>Select All</strong>
  </label>`;

  groups.forEach(g => {
    html += `<label class="export-item export-group">
      <input type="checkbox" data-gid="${g.id}" checked>
      <strong>${escapeHtml(g.name)}</strong> <span class="export-count">(${g.links.length})</span>
    </label>`;
    g.links.forEach(l => {
      html += `<label class="export-item export-link">
        <input type="checkbox" data-gid="${g.id}" data-lid="${l.id}" checked>
        ${escapeHtml(l.label)}
      </label>`;
    });
  });

  container.innerHTML = html;

  $('export-select-all').addEventListener('change', (e) => {
    $$('input[type="checkbox"]', container).forEach(cb => cb.checked = e.target.checked);
  });

  $$('.export-group input', container).forEach(cb => {
    cb.addEventListener('change', () => {
      $$(`input[data-gid="${cb.dataset.gid}"][data-lid]`, container).forEach(lcb => lcb.checked = cb.checked);
    });
  });
}

$('export-btn').addEventListener('click', () => {
  const container = $('export-groups');
  const result = [];

  groups.forEach(g => {
    const gcb = container.querySelector(`input[data-gid="${g.id}"]:not([data-lid])`);
    if (!gcb?.checked) return;
    const links = g.links.filter(l => container.querySelector(`input[data-lid="${l.id}"]`)?.checked);
    result.push({ ...g, links });
  });

  if (!result.length) return;
  const blob = new Blob([JSON.stringify({ groups: result }, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  Object.assign(document.createElement('a'), { href: url, download: 'quicklinks-export.json' }).click();
  URL.revokeObjectURL(url);
});

// ── Import ──
$('import-file').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const statusEl = $('import-status');

  try {
    const data = JSON.parse(await file.text());
    if (!Array.isArray(data.groups)) throw new Error('Invalid format');

    const nameMap = new Map(groups.map(g => [g.name, g]));
    let added = 0;

    data.groups.forEach(ig => {
      const existing = nameMap.get(ig.name);
      if (existing) {
        const urls = new Set(existing.links.map(l => l.url));
        ig.links.forEach(l => {
          if (!urls.has(l.url)) { existing.links.push({ ...l, id: generateId() }); added++; }
        });
      } else {
        groups.push({ ...ig, id: generateId(), links: ig.links.map(l => ({ ...l, id: generateId() })) });
        added++;
      }
    });

    await saveGroups();
    render();
    renderExportList();
    statusEl.textContent = `Imported! (${added} items added)`;
    statusEl.className = 'import-status success';
  } catch {
    statusEl.textContent = 'Failed to parse JSON file';
    statusEl.className = 'import-status error';
  }

  statusEl.classList.remove('hidden');
  e.target.value = '';
});

// ── Init ──
loadGroups();