popup.js

// Lapsed - popup script

(() => {
  const ui = mapElements(['domainInput', 'checkBtn', 'recentList', 'clearBtn']);
  const STATUS_UNKNOWN_LABEL = 'Status unknown';
  const LEGACY_STATUS_MAP = {
    available: 'status-available',
    registered: 'status-taken',
    expired: 'status-dropping',
    error: 'status-error',
    pending: 'status-checking'
  };

  init();

  function init() {
    bindEvents();
    loadHistory();
    ui.domainInput.focus();
  }

  function bindEvents() {
    ui.checkBtn.addEventListener('click', handleManualCheck);
    ui.domainInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') handleManualCheck();
    });
    ui.clearBtn.addEventListener('click', handleClearHistory);
  }

  function handleManualCheck() {
    const parsed = parseDomainInput(ui.domainInput.value);
    if (!parsed) return;
    addToHistory(parsed);
    openLapsed(parsed);
  }

  function addToHistory(domain) {
    const entry = {
      domain,
      url: 'https://' + domain,
      ts: Date.now(),
      status: 'status-checking',
      statusLabel: 'Checking'
    };
    chrome.storage.local.get(['failureHistory'], (data) => {
      const history = data.failureHistory || [];
      const filtered = history.filter(item => item.domain !== domain);
      filtered.unshift(entry);
      chrome.storage.local.set({ failureHistory: filtered.slice(0, 10) });
    });
  }

  function handleClearHistory() {
    chrome.storage.local.remove('failureHistory', () => {
      ui.recentList.innerHTML = '<div class="recent-empty">No recent lookups yet</div>';
    });
  }

  function parseDomainInput(value) {
    const trimmed = (value || '').trim();
    if (!trimmed) return null;
    const normalized = trimmed
      .replace(/^https?:\/\//i, '')
      .replace(/\/.*$/, '')
      .toLowerCase();
    return normalized || null;
  }

  function openLapsed(domain, originalUrl) {
    const url = chrome.runtime.getURL(
      `lapsed.html?domain=${encodeURIComponent(domain)}&originalUrl=${encodeURIComponent(originalUrl || 'https://' + domain)}`
    );
    chrome.tabs.create({ url });
    window.close();
  }

  function loadHistory() {
    chrome.storage.local.get(['failureHistory'], (data) => {
      const history = (data.failureHistory || []).slice(0, 10);
      if (!history.length) {
        ui.recentList.innerHTML = '<div class="recent-empty">No recent lookups yet</div>';
        ui.clearBtn.style.display = 'none';
        return;
      }
      ui.clearBtn.style.display = '';
      ui.recentList.innerHTML = history.map(renderHistoryItem).join('');
      ui.recentList.querySelectorAll('.recent-item').forEach((el) => {
        el.addEventListener('click', () => openLapsed(el.dataset.domain, el.dataset.url));
      });
    });
  }

  function renderHistoryItem(item) {
    const ago = timeAgo(item.ts);
    const statusKey = normalizeStatusKey(item.status);
    const statusClass = statusKey || 'status-error';
    const statusLabel = item.statusLabel
      || (statusKey ? humanizeStatus(statusKey) : STATUS_UNKNOWN_LABEL);
    const safeUrl = item.url || '';
    const tooltip = statusLabel ? `title="${escapeAttr(statusLabel)}" aria-label="${escapeAttr(statusLabel)}"` : '';
    return `
      <div class="recent-item" data-domain="${item.domain}" data-url="${safeUrl}" ${tooltip}>
        <span class="recent-domain">${item.domain}</span>
        <span class="recent-meta">
          <span class="recent-time">${ago}</span>
          <span class="recent-status ${statusClass}"></span>
        </span>
      </div>
    `;
  }

  function timeAgo(ts) {
    const diff = Date.now() - ts;
    const minutes = Math.floor(diff / 60000);
    if (minutes < 1) return 'just now';
    if (minutes < 60) return `${minutes}m ago`;
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours}h ago`;
    return `${Math.floor(hours / 24)}d ago`;
  }

  function mapElements(ids) {
    return ids.reduce((acc, id) => {
      acc[id] = document.getElementById(id);
      return acc;
    }, {});
  }
  function normalizeStatusKey(raw) {
    const key = typeof raw === 'string' ? raw.trim().toLowerCase() : '';
    if (!key) return '';
    if (key.startsWith('status-')) return key;
    return LEGACY_STATUS_MAP[key] || '';
  }

  function humanizeStatus(key) {
    if (!key) return '';
    return key.replace(/^status-/, '')
      .split('-')
      .map(part => part ? part[0].toUpperCase() + part.slice(1) : part)
      .join(' ');
  }

  function escapeAttr(text) {
    if (!text) return '';
    return text.replace(/["&<>]/g, ch =>
      ({ '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[ch])
    );
  }
})();