Separating css and js - getting way too long to manage

script.js

@@ -0,0 +1,254 @@
+// ── 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);
+}