Initial commit: LinkedIn Analyzer with Gemini 2.5 Flash and PHP Backend

popup.js

@@ -0,0 +1,168 @@
+// popup.js — Settings popup logic
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function showToast(msg, type = '') {
+  const toast = document.getElementById('toast');
+  toast.textContent = msg;
+  toast.className = 'toast show ' + type;
+  setTimeout(() => { toast.className = 'toast'; }, 2500);
+}
+
+function setKeyStatus(state) {
+  const badge = document.getElementById('key-status');
+  badge.style.display = 'inline-flex';
+  if (state === 'ok') {
+    badge.className = 'status-badge success';
+    badge.innerHTML = '<span class="status-dot"></span> Valid';
+  } else if (state === 'error') {
+    badge.className = 'status-badge error';
+    badge.innerHTML = '<span class="status-dot"></span> Invalid';
+  } else if (state === 'checking') {
+    badge.className = 'status-badge checking';
+    badge.innerHTML = '<span class="status-dot"></span> Testing...';
+  }
+}
+
+function updateUsageUI(count) {
+  const max = 1000;
+  const pct = Math.min((count / max) * 100, 100).toFixed(1);
+  document.getElementById('usage-count').textContent = `${count} / 1,000 requests`;
+  document.getElementById('usage-fill').style.width = pct + '%';
+}
+
+// ─── Load saved settings ────────────────────────────────────────────────────
+
+function loadSettings() {
+  chrome.storage.sync.get(['apiKey', 'userProfile', 'language'], (data) => {
+    if (data.apiKey) {
+      document.getElementById('api-key-input').value = data.apiKey;
+      setKeyStatus('ok');
+    }
+    document.getElementById('profile-textarea').value =
+      data.userProfile || DEFAULT_PROFILE;
+    document.getElementById('lang-select').value =
+      data.language || 'auto';
+  });
+
+  // Usage counter from local storage
+  const today = new Date().toDateString();
+  chrome.storage.local.get(['usageDate', 'usageCount'], (data) => {
+    if (data.usageDate === today) {
+      updateUsageUI(data.usageCount || 0);
+    } else {
+      updateUsageUI(0);
+    }
+  });
+}
+
+// ─── Save settings ──────────────────────────────────────────────────────────
+
+document.getElementById('save-btn').addEventListener('click', () => {
+  const apiKey = document.getElementById('api-key-input').value.trim();
+  const userProfile = document.getElementById('profile-textarea').value.trim();
+  const language = document.getElementById('lang-select').value;
+
+  if (!apiKey) {
+    showToast('⚠️ Please enter your API Key', 'error');
+    return;
+  }
+  if (!userProfile) {
+    showToast('⚠️ Profile cannot be empty', 'error');
+    return;
+  }
+
+  chrome.storage.sync.set({ apiKey, userProfile, language }, () => {
+    showToast('✅ Settings saved!', 'success');
+  });
+});
+
+// ─── Toggle API key visibility ───────────────────────────────────────────────
+
+document.getElementById('toggle-key').addEventListener('click', () => {
+  const input = document.getElementById('api-key-input');
+  const btn = document.getElementById('toggle-key');
+  if (input.type === 'password') {
+    input.type = 'text';
+    btn.textContent = '🙈';
+  } else {
+    input.type = 'password';
+    btn.textContent = '👁';
+  }
+});
+
+// ─── Test API Key ───────────────────────────────────────────────────────────
+
+document.getElementById('test-key-btn').addEventListener('click', async () => {
+  const apiKey = document.getElementById('api-key-input').value.trim();
+  if (!apiKey) {
+    showToast('⚠️ Enter your API key first', 'error');
+    return;
+  }
+
+  setKeyStatus('checking');
+
+  try {
+    const response = await fetch(
+      `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${apiKey}`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          contents: [{ parts: [{ text: 'Say "OK" in one word.' }] }],
+          generationConfig: { maxOutputTokens: 5 }
+        })
+      }
+    );
+
+    if (response.ok) {
+      setKeyStatus('ok');
+      showToast('✅ API Key is valid!', 'success');
+    } else {
+      const err = await response.json();
+      setKeyStatus('error');
+      showToast('❌ Invalid key: ' + (err.error?.message || response.status), 'error');
+    }
+  } catch (e) {
+    setKeyStatus('error');
+    showToast('❌ Network error: ' + e.message, 'error');
+  }
+});
+
+// ─── Reset profile ──────────────────────────────────────────────────────────
+
+document.getElementById('reset-profile-btn').addEventListener('click', () => {
+  if (confirm('Reset profile to default?')) {
+    document.getElementById('profile-textarea').value = DEFAULT_PROFILE;
+    showToast('🔄 Profile reset to default');
+  }
+});
+
+// ─── Clear cache ─────────────────────────────────────────────────────────────
+
+document.getElementById('clear-cache-btn').addEventListener('click', () => {
+  chrome.storage.local.remove(['analysisCache'], () => {
+    showToast('🗑️ Analysis cache cleared');
+  });
+});
+
+// ─── Clear all data ──────────────────────────────────────────────────────────
+
+document.getElementById('clear-all-btn').addEventListener('click', () => {
+  if (confirm('Clear ALL data including API key and profile?')) {
+    chrome.storage.sync.clear(() => {
+      chrome.storage.local.clear(() => {
+        document.getElementById('api-key-input').value = '';
+        document.getElementById('profile-textarea').value = DEFAULT_PROFILE;
+        document.getElementById('lang-select').value = 'auto';
+        document.getElementById('key-status').style.display = 'none';
+        updateUsageUI(0);
+        showToast('🗑️ All data cleared');
+      });
+    });
+  }
+});
+
+// ─── Init ────────────────────────────────────────────────────────────────────
+
+loadSettings();