status-poster/script.js

// ── State ────────────────────────────────────────────────────────────────────
let emoji    = '📝';
let settings = { username: '', apiKey: '' };

// ── DOM ──────────────────────────────────────────────────────────────────────
const $ = id => document.getElementById(id);
const emojiDisplay  = $('emoji-display');
const emojiShow     = $('emoji-show');
const emojiInput    = $('emoji-input');
const emojiSection  = emojiDisplay.closest('.emoji-section');
const emojiHint     = $('emoji-hint');
const statusText    = $('status-text');
const statusUrl     = $('status-url');
const charCount     = $('char-count');
const postBtn       = $('post-btn');
const toast         = $('toast');
const settingsBtn   = $('settings-btn');
const overlay       = $('overlay');
const modalClose    = $('modal-close');
const sUsername     = $('s-username');
const sApikey       = $('s-apikey');
const eyeBtn        = $('eye-btn');
const saveBtn       = $('save-btn');

// ── Settings ─────────────────────────────────────────────────────────────────
function loadSettings() {
  try {
    const raw = localStorage.getItem('spo-settings');
    if (raw) settings = { ...settings, ...JSON.parse(raw) };
  } catch {}
  updateBadge();
}

function saveSettings() {
  settings.username = sUsername.value.trim().replace(/^@/, '');
  settings.apiKey   = sApikey.value.trim();
  try {
    localStorage.setItem('spo-settings', JSON.stringify(settings));
  } catch {
    showToast('Could not save — storage unavailable', 'error');
    return;
  }
  updateBadge();
  closeModal();
  showToast('Settings saved', 'success');
}

function updateBadge() {
  settingsBtn.classList.toggle('needs-setup', !settings.username || !settings.apiKey);
}

// ── Modal ────────────────────────────────────────────────────────────────────
function openModal() {
  sUsername.value = settings.username;
  sApikey.value   = settings.apiKey;
  overlay.classList.add('open');
  document.body.style.overflow = 'hidden';
  // Focus first empty field
  if (!settings.username) sUsername.focus();
  else if (!settings.apiKey) sApikey.focus();
}

function closeModal() {
  overlay.classList.remove('open');
  document.body.style.overflow = '';
}

settingsBtn.addEventListener('click', openModal);
modalClose.addEventListener('click', closeModal);
overlay.addEventListener('click', e => { if (e.target === overlay) closeModal(); });
saveBtn.addEventListener('click', saveSettings);

// Eye toggle for API key
eyeBtn.addEventListener('click', () => {
  const show = sApikey.type === 'password';
  sApikey.type = show ? 'text' : 'password';
  eyeBtn.textContent = show ? '🙈' : '👁';
  eyeBtn.setAttribute('aria-label', show ? 'Hide API key' : 'Show API key');
});

// ── Emoji picker ─────────────────────────────────────────────────────────────
function extractFirstEmoji(str) {
  if (!str) return null;
  if (typeof Intl?.Segmenter === 'function') {
    const seg = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
    for (const { segment } of seg.segment(str)) {
      if (/\p{Emoji}/u.test(segment) && segment.trim() !== '') return segment;
    }
    return null;
  }
  const m = str.match(/\p{Emoji_Presentation}[\p{Emoji}\u{FE0F}\u{20E3}]*/u);
  return m ? m[0] : null;
}

// Detect platform for hint text
const isMac  = /Mac/.test(navigator.userAgent) && !/iPhone|iPad/.test(navigator.userAgent);
const osHint = isMac ? ' · or ⌃⌘Space' : (navigator.userAgent.includes('Win') ? ' · or Win+.' : '');

function openEmojiPicker() {
  emojiSection.classList.add('picking');
  emojiInput.value = '';
  emojiInput.focus();
  emojiHint.textContent = `Type, paste, or use your emoji keyboard${osHint}`;
}

function closeEmojiPicker() {
  emojiSection.classList.remove('picking');
  emojiHint.textContent = 'Click to change emoji';
}

emojiDisplay.addEventListener('click', openEmojiPicker);

emojiDisplay.addEventListener('keydown', e => {
  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openEmojiPicker(); }
});

emojiInput.addEventListener('input', () => {
  const found = extractFirstEmoji(emojiInput.value);
  if (found) {
    emoji = found;
    emojiShow.textContent = found;
    closeEmojiPicker();
  }
});

emojiInput.addEventListener('blur', () => {
  // Small delay so a click on the emoji-display doesn't flicker
  setTimeout(() => { if (document.activeElement !== emojiInput) closeEmojiPicker(); }, 150);
});

// ── Keyboard shortcuts ────────────────────────────────────────────────────────
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    if (emojiSection.classList.contains('picking')) closeEmojiPicker();
    else if (overlay.classList.contains('open')) closeModal();
  }
});

// ── Character count ───────────────────────────────────────────────────────────
statusText.addEventListener('input', () => {
  const n = statusText.value.length;
  charCount.textContent = `${n} / 5000`;
  charCount.classList.toggle('warn', n > 4800);
});

// ── Post status ───────────────────────────────────────────────────────────────
async function postStatus() {
  if (!settings.username || !settings.apiKey) {
    showToast('Add your credentials in settings first', 'error');
    openModal();
    return;
  }

  const content = statusText.value.trim();
  if (!content) {
    showToast('Status text is required', 'error');
    statusText.focus();
    return;
  }

  postBtn.classList.add('loading');
  postBtn.disabled = true;

  const body = { emoji, content };
  const url  = statusUrl.value.trim();
  if (url) body.external_url = url;

  try {
    const res = await fetch(
      `https://api.omg.lol/address/${encodeURIComponent(settings.username)}/statuses/`,
      {
        method:  'POST',
        headers: {
          'Authorization': `Bearer ${settings.apiKey}`,
          'Content-Type':  'application/json',
        },
        body: JSON.stringify(body),
      }
    );

    const data = await res.json().catch(() => ({}));

    if (res.ok || data?.request?.status_code === 200) {
      const msg = data?.response?.message ?? 'Status posted!';
      showToast(msg, 'success');
      statusText.value      = '';
      statusUrl.value       = '';
      charCount.textContent = '0 / 5000';
      charCount.classList.remove('warn');
      emoji = '📝';
      emojiShow.textContent = '📝';
    } else {
      const msg = data?.response?.message ?? `Error ${res.status}`;
      showToast(msg, 'error');
    }
  } catch (err) {
    const msg = err?.message === 'Failed to fetch'
      ? 'Network error — check your connection'
      : (err?.message ?? 'Something went wrong');
    showToast(msg, 'error');
  } finally {
    postBtn.classList.remove('loading');
    postBtn.disabled = false;
  }
}

postBtn.addEventListener('click', postStatus);

// Ctrl/Cmd + Enter to post from textarea
statusText.addEventListener('keydown', e => {
  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) postStatus();
});

// ── Toast ────────────────────────────────────────────────────────────────────
let toastTimer;
function showToast(msg, type = '') {
  clearTimeout(toastTimer);
  toast.textContent = msg;
  toast.className   = `show ${type}`.trim();
  toastTimer = setTimeout(() => { toast.className = ''; }, 4000);
}

// ── Apple touch icon (generated at runtime — iOS doesn't support SVG icons) ──
try {
  const c = document.createElement('canvas');
  c.width  = c.height = 192;
  const ctx = c.getContext('2d');
  ctx.fillStyle = '#7c3aed';
  ctx.beginPath();
  ctx.roundRect(0, 0, 192, 192, 38);
  ctx.fill();
  ctx.fillStyle    = 'white';
  ctx.font         = '90px serif';
  ctx.textAlign    = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('✦', 96, 98);
  const link = document.createElement('link');
  link.rel   = 'apple-touch-icon';
  link.href  = c.toDataURL('image/png');
  document.head.appendChild(link);
} catch {}

// ── Service worker ────────────────────────────────────────────────────────────
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js').catch(() => {});
}

// ── Init ──────────────────────────────────────────────────────────────────────
loadSettings();

// Auto-open settings if no credentials saved yet
if (!settings.username || !settings.apiKey) {
  setTimeout(openModal, 500);
}