1412 lines
51 KiB
JavaScript
1412 lines
51 KiB
JavaScript
// === License & mode (stub) ===
|
||
// Flip this to true for local testing of Pro features if you want:
|
||
let licenseValid = false; // <- default: Free
|
||
|
||
// Persistent settings
|
||
let actionMode = 'copy'; // 'copy' | 'insert' | 'auto'
|
||
let licenseKeyCurrent = '';
|
||
|
||
// Tone settings (persisted in sync storage)
|
||
let toneLock = false; // if true, always use preferred tone
|
||
let preferredToneSlug = null; // 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark'
|
||
|
||
// Elements
|
||
const settingsBtn = document.getElementById('settings');
|
||
const sheet = document.getElementById('settings-sheet');
|
||
const sheetClose = document.getElementById('sheet-close');
|
||
const backdrop = document.getElementById('sheet-backdrop');
|
||
const modeGroup = document.getElementById('mode-group');
|
||
const licenseKeyEl = document.getElementById('license-key');
|
||
const licenseActivateBtn = document.getElementById('license-activate');
|
||
const licenseStatusEl = document.getElementById('license-status');
|
||
const licenseDeactivateBtn = document.getElementById('license-deactivate');
|
||
const licenseEditBtn = document.getElementById('license-edit');
|
||
const licenseCancelEditBtn = document.getElementById('license-cancel-edit');
|
||
|
||
// --- License busy helpers (UI feedback for activate/deactivate) ---
|
||
let __licensePrev = { text: '', disabled: false };
|
||
function setLicenseBusy(on, label){
|
||
const btn = licenseActivateBtn;
|
||
if (!btn) return;
|
||
if (on) {
|
||
__licensePrev.text = btn.textContent;
|
||
__licensePrev.disabled = btn.disabled;
|
||
btn.textContent = label || 'Verifying…';
|
||
btn.disabled = true;
|
||
licenseKeyEl && (licenseKeyEl.disabled = true);
|
||
licenseDeactivateBtn && (licenseDeactivateBtn.disabled = true);
|
||
licenseEditBtn && (licenseEditBtn.disabled = true);
|
||
licenseCancelEditBtn && (licenseCancelEditBtn.disabled = true);
|
||
licenseStatusEl && (licenseStatusEl.textContent = 'Checking license…');
|
||
} else {
|
||
btn.textContent = __licensePrev.text || 'Activate';
|
||
btn.disabled = __licensePrev.disabled || false;
|
||
// Restore enabled state based on current license view
|
||
applyLicenseUI();
|
||
}
|
||
}
|
||
|
||
const diagRunBtn = document.getElementById('diag-run');
|
||
const diagSpin = document.getElementById('diag-spin');
|
||
const diagOut = document.getElementById('diag-out');
|
||
|
||
const API = {
|
||
base: "https://api.dewemoji.com/v1",
|
||
list: "/emojis"
|
||
};
|
||
API.cats = "/categories";
|
||
let PAGE_LIMIT = 20; // Free default
|
||
function refreshPageLimit(){
|
||
PAGE_LIMIT = licenseValid ? 50 : 20; // Pro gets bigger pages
|
||
}
|
||
refreshPageLimit();
|
||
const FRONTEND_ID = 'ext-v1';
|
||
|
||
let CAT_MAP = null; // { "Category": ["sub1","sub2", ...], ... }
|
||
|
||
// Preferred, human-first category order (fallback: alphabetical)
|
||
const PREFERRED_CATEGORY_ORDER = [
|
||
"Smileys & Emotion",
|
||
"People & Body",
|
||
"Animals & Nature",
|
||
"Food & Drink",
|
||
"Travel & Places",
|
||
"Activities",
|
||
"Objects",
|
||
"Symbols",
|
||
"Flags"
|
||
];
|
||
const CAT_INDEX = Object.fromEntries(PREFERRED_CATEGORY_ORDER.map((c, i) => [c, i]));
|
||
// Minimal local subcategories to enable the sub-select even without API
|
||
const LOCAL_SUBS = {
|
||
'Travel & Places': ['place-religious','place-geographic','transport-water'],
|
||
'People & Body': ['hand-fingers-open','hand-fingers-partial','person-gesture'],
|
||
'Animals & Nature': ['animal-mammal','animal-bird','animal-bug'],
|
||
'Activities': ['sport','game','event'],
|
||
};
|
||
function categoryComparator(a, b) {
|
||
const ia = CAT_INDEX[a];
|
||
const ib = CAT_INDEX[b];
|
||
if (ia !== undefined && ib !== undefined) return ia - ib; // both in preferred list
|
||
if (ia !== undefined) return -1; // a preferred, b not
|
||
if (ib !== undefined) return 1; // b preferred, a not
|
||
return a.localeCompare(b, undefined, { sensitivity: "base" }); // both not preferred → A–Z
|
||
}
|
||
|
||
async function loadCategories() {
|
||
// Try live endpoint; fall back silently to local list (no subs)
|
||
let ok = false;
|
||
try {
|
||
const res = await fetch(`${API.base}${API.cats}`);
|
||
if (res && res.ok) {
|
||
CAT_MAP = await res.json();
|
||
ok = true;
|
||
}
|
||
} catch (_) {}
|
||
|
||
if (!ok) {
|
||
// Silent fallback with a minimal subcategory seed
|
||
CAT_MAP = Object.fromEntries(PREFERRED_CATEGORY_ORDER.map(c => [c, LOCAL_SUBS[c] || []]));
|
||
}
|
||
populateCategorySelect();
|
||
}
|
||
|
||
function populateCategorySelect() {
|
||
const catSel = document.getElementById('cat');
|
||
const subSel = document.getElementById('sub');
|
||
if (!catSel || !CAT_MAP) return;
|
||
|
||
// reset
|
||
catSel.innerHTML = `<option value="">All categories</option>`;
|
||
Object.keys(CAT_MAP).sort(categoryComparator).forEach(cat => {
|
||
const opt = document.createElement('option');
|
||
opt.value = cat;
|
||
opt.textContent = cat;
|
||
catSel.appendChild(opt);
|
||
});
|
||
|
||
// clear subs initially
|
||
subSel.innerHTML = `<option value="">All subcategories</option>`;
|
||
subSel.disabled = true;
|
||
}
|
||
|
||
function populateSubcategorySelect(category) {
|
||
const subSel = document.getElementById('sub');
|
||
if (!subSel) return;
|
||
subSel.innerHTML = `<option value="">All subcategories</option>`;
|
||
const subs = (CAT_MAP?.[category] || []).slice().sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }));
|
||
subs.forEach(sc => {
|
||
const opt = document.createElement('option');
|
||
opt.value = sc;
|
||
opt.textContent = sc;
|
||
subSel.appendChild(opt);
|
||
});
|
||
subSel.disabled = subs.length === 0;
|
||
subSel.classList.toggle('opacity-50', subs.length === 0);
|
||
subSel.classList.toggle('pointer-events-none', subs.length === 0);
|
||
}
|
||
|
||
let page = 1, total = 0, items = [];
|
||
let lastServerTier = null; // 'pro' | null (free) | undefined (no response yet)
|
||
const q = document.getElementById('q');
|
||
const cat = document.getElementById('cat');
|
||
const sub = document.getElementById('sub');
|
||
const clearBtn = document.getElementById('clear');
|
||
const list = document.getElementById('list');
|
||
const more = document.getElementById('more');
|
||
const count = document.getElementById('count');
|
||
|
||
const verEl = document.getElementById('ver');
|
||
function setVersionBadge() {
|
||
try {
|
||
const { name, version } = chrome.runtime.getManifest();
|
||
if (verEl) {
|
||
verEl.textContent = `v${version}`;
|
||
verEl.title = `${name} v${version}`;
|
||
}
|
||
} catch (e) {
|
||
// ignore if unavailable
|
||
}
|
||
}
|
||
setVersionBadge();
|
||
|
||
// --- Alert helper for messages (warn/error, light/dark theme) ---
|
||
function buildAlert(kind, title, desc){
|
||
const isDark = document.documentElement.classList.contains('theme-dark');
|
||
const tone = (kind === 'error')
|
||
? (isDark
|
||
? { bg:'#3b0f0f', border:'#7f1d1d', text:'#fecaca', icon:'‼' }
|
||
: { bg:'#fee2e2', border:'#fecaca', text:'#7f1d1d', icon:'‼' })
|
||
: (isDark
|
||
? { bg:'#3b2f0f', border:'#a16207', text:'#fde68a', icon:'⚠️' }
|
||
: { bg:'#fef3c7', border:'#fde68a', text:'#92400e', icon:'⚠️' });
|
||
|
||
const wrap = document.createElement('div');
|
||
wrap.style.gridColumn = '1 / -1';
|
||
wrap.style.background = tone.bg;
|
||
wrap.style.border = `1px solid ${tone.border}`;
|
||
wrap.style.color = tone.text;
|
||
wrap.style.borderRadius = '10px';
|
||
wrap.style.padding = '10px 12px';
|
||
wrap.style.display = 'flex';
|
||
wrap.style.alignItems = 'flex-start';
|
||
wrap.style.gap = '10px';
|
||
wrap.className = 'dewemoji-alert';
|
||
|
||
const ico = document.createElement('span');
|
||
ico.textContent = tone.icon;
|
||
ico.style.fontSize = '18px';
|
||
ico.style.lineHeight = '20px';
|
||
|
||
const body = document.createElement('div');
|
||
const h = document.createElement('div');
|
||
h.textContent = title || '';
|
||
h.style.fontWeight = '600';
|
||
h.style.marginBottom = desc ? '2px' : '0';
|
||
const p = document.createElement('div');
|
||
p.textContent = desc || '';
|
||
p.style.opacity = '0.9';
|
||
p.style.fontSize = '12.5px';
|
||
|
||
body.appendChild(h);
|
||
if (desc) body.appendChild(p);
|
||
wrap.append(ico, body);
|
||
return wrap;
|
||
}
|
||
|
||
// --- Loading spinner (flip-flop with Load More) ---
|
||
let spinnerEl = null;
|
||
function showSpinner() {
|
||
if (spinnerEl) return;
|
||
// Hide Load More while loading
|
||
if (more) more.classList.add('hidden');
|
||
spinnerEl = document.createElement('div');
|
||
spinnerEl.id = 'grid-spinner';
|
||
spinnerEl.className = 'w-full flex justify-center py-6';
|
||
spinnerEl.innerHTML = '<div class="animate-spin inline-block w-8 h-8 border-4 border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading"></div>';
|
||
// place under the grid
|
||
(list?.parentElement || document.body).appendChild(spinnerEl);
|
||
}
|
||
function hideSpinner() {
|
||
if (spinnerEl) { spinnerEl.remove(); spinnerEl = null; }
|
||
// Recompute Load More visibility after loading completes
|
||
if (typeof updateFooter === 'function') {
|
||
try { updateFooter(); } catch(_) {}
|
||
} else if (more) {
|
||
more.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
// THEME — two states only: 'light' | 'dark'
|
||
const themeBtn = document.getElementById('theme');
|
||
const toastEl = document.getElementById('toast');
|
||
|
||
async function initTheme() {
|
||
const stored = (await chrome.storage.local.get('theme')).theme;
|
||
const prefersDark = window.matchMedia &&
|
||
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
const initial = stored || (prefersDark ? 'dark' : 'light');
|
||
await chrome.storage.local.set({ theme: initial });
|
||
applyTheme(initial);
|
||
}
|
||
function applyTheme(theme) {
|
||
const clsLight = 'theme-light';
|
||
const clsDark = 'theme-dark';
|
||
document.body.classList.remove(clsLight, clsDark);
|
||
document.documentElement.classList.remove(clsLight, clsDark); // <-- add
|
||
|
||
const cls = (theme === 'dark') ? clsDark : clsLight;
|
||
document.body.classList.add(cls);
|
||
document.documentElement.classList.add(cls); // <-- add
|
||
|
||
// Button shows the opposite icon so it's clear what tapping will do
|
||
themeBtn.textContent = theme === 'dark' ? '🌞' : '🌙';
|
||
themeBtn.dataset.theme = theme;
|
||
}
|
||
async function toggleTheme() {
|
||
const curr = themeBtn.dataset.theme === 'dark' ? 'dark' : 'light';
|
||
const next = curr === 'dark' ? 'light' : 'dark';
|
||
await chrome.storage.local.set({ theme: next });
|
||
applyTheme(next);
|
||
}
|
||
themeBtn?.addEventListener('click', toggleTheme);
|
||
initTheme();
|
||
updateClearButtonIcon();
|
||
|
||
// --- Skin tone (Pro) -------------------------------------------------------
|
||
const SKIN_TONES = [
|
||
{ key: '1f3fb', ch: '\u{1F3FB}', slug: 'light', label: 'Light' },
|
||
{ key: '1f3fc', ch: '\u{1F3FC}', slug: 'medium-light', label: 'Medium-Light' },
|
||
{ key: '1f3fd', ch: '\u{1F3FD}', slug: 'medium', label: 'Medium' },
|
||
{ key: '1f3fe', ch: '\u{1F3FE}', slug: 'medium-dark', label: 'Medium-Dark' },
|
||
{ key: '1f3ff', ch: '\u{1F3FF}', slug: 'dark', label: 'Dark' },
|
||
];
|
||
const TONE_SLUGS = SKIN_TONES.map(t => t.slug);
|
||
const STRIP_TONE_RE = /[\u{1F3FB}-\u{1F3FF}]/gu;
|
||
function stripSkinTone(s){ return (s||'').replace(STRIP_TONE_RE,''); }
|
||
function withSkinTone(base, ch){ return `${base||''}${ch||''}`; }
|
||
|
||
// Tone helpers: keep globals in sync and expose helpers for slug
|
||
async function getPreferredToneIndex(){
|
||
return new Promise(res => {
|
||
chrome.storage.sync.get(['preferredSkinTone'], v => {
|
||
preferredToneSlug = v?.preferredSkinTone || null;
|
||
const idx = TONE_SLUGS.indexOf(preferredToneSlug);
|
||
res(idx >= 0 ? idx : -1);
|
||
});
|
||
});
|
||
}
|
||
async function setPreferredToneIndex(i){
|
||
preferredToneSlug = TONE_SLUGS[i] || null;
|
||
return new Promise(res => chrome.storage.sync.set({ preferredSkinTone: preferredToneSlug }, () => res()));
|
||
}
|
||
async function getToneLock(){
|
||
return new Promise(res => chrome.storage.sync.get(['toneLock'], v => { toneLock = !!v.toneLock; res(toneLock); }));
|
||
}
|
||
async function setToneLock(val){
|
||
toneLock = !!val;
|
||
return new Promise(res => chrome.storage.sync.set({ toneLock }, () => res()));
|
||
}
|
||
|
||
// debounce
|
||
let timer;
|
||
function debounced(fn, delay=250){ clearTimeout(timer); timer = setTimeout(fn, delay); }
|
||
|
||
// === P0: Usage & Cache ===
|
||
const CLIENT_FREE_DAILY_LIMIT = 30; // can be tuned; Pro => unlimited
|
||
const CACHE_TTL_MS = 6 * 60 * 60 * 1000; // 6 hours
|
||
const QUERY_CACHE = new Map(); // in-memory cache: key => {ts, data}
|
||
const PREFETCHING = new Set(); // tracks in-flight prefetch keys (sig|page)
|
||
|
||
function todayKeyUTC(){
|
||
const d = new Date();
|
||
const y = d.getUTCFullYear();
|
||
const m = String(d.getUTCMonth()+1).padStart(2,'0');
|
||
const day = String(d.getUTCDate()).padStart(2,'0');
|
||
return `usage_${y}${m}${day}`;
|
||
}
|
||
|
||
async function getDailyUsage(){
|
||
const key = todayKeyUTC();
|
||
const got = await chrome.storage.local.get([key]);
|
||
return got[key] || { used: 0, limit: CLIENT_FREE_DAILY_LIMIT };
|
||
}
|
||
async function setDailyUsage(obj){
|
||
const key = todayKeyUTC();
|
||
await chrome.storage.local.set({ [key]: obj });
|
||
}
|
||
|
||
function normalize(str){ return String(str||'').trim().toLowerCase(); }
|
||
function slugifyLabel(s){
|
||
const x = normalize(s).replace(/&/g,'and').replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'');
|
||
return x || 'all';
|
||
}
|
||
function signatureFor(qVal, catVal, subVal){
|
||
const qn = normalize(qVal);
|
||
const cats = slugifyLabel(catVal || 'all');
|
||
const subs = subVal ? slugifyLabel(subVal) : '';
|
||
return `${qn}|${cats}|${subs}`;
|
||
}
|
||
|
||
async function getPersistedCache(){
|
||
const got = await chrome.storage.local.get(['searchCache']);
|
||
return got.searchCache || {}; // { key: { ts, data } }
|
||
}
|
||
async function savePersistedCache(cacheObj){
|
||
await chrome.storage.local.set({ searchCache: cacheObj });
|
||
}
|
||
function isFresh(ts){ return (Date.now() - ts) < CACHE_TTL_MS; }
|
||
|
||
function buildHeaders(){
|
||
const base = { 'X-Dewemoji-Frontend': FRONTEND_ID };
|
||
if (licenseValid && licenseKeyCurrent) {
|
||
try {
|
||
const acctPromise = accountId();
|
||
return acctPromise.then(acct => ({
|
||
...base,
|
||
// New preferred auth
|
||
'Authorization': `Bearer ${licenseKeyCurrent}`,
|
||
// Legacy headers kept for backward compatibility
|
||
'X-License-Key': licenseKeyCurrent,
|
||
'X-Account-Id': acct.id
|
||
})).catch(()=>base);
|
||
} catch {
|
||
return Promise.resolve({ ...base, 'Authorization': `Bearer ${licenseKeyCurrent}`, 'X-License-Key': licenseKeyCurrent });
|
||
}
|
||
}
|
||
return Promise.resolve(base);
|
||
}
|
||
|
||
async function prefetchNextIfNeeded(currentSig){
|
||
try {
|
||
// only prefetch when there are more results and we know the next page index
|
||
const nextPage = page + 1;
|
||
if (!(items.length < total && total > 0)) return;
|
||
const key = `${currentSig}|${nextPage}`;
|
||
if (QUERY_CACHE.has(key) || PREFETCHING.has(key)) return;
|
||
|
||
// check persisted cache
|
||
const persisted = await getPersistedCache();
|
||
const ent = persisted[key];
|
||
if (ent && isFresh(ent.ts)) {
|
||
QUERY_CACHE.set(key, ent); // lift to memory
|
||
return;
|
||
}
|
||
|
||
PREFETCHING.add(key);
|
||
|
||
// Build URL for next page
|
||
const params = new URLSearchParams({ page: String(nextPage), limit: String(PAGE_LIMIT) });
|
||
if (q.value.trim()) params.set('q', q.value.trim());
|
||
if (cat.value.trim()) params.set('category', cat.value.trim());
|
||
if (sub.value.trim()) params.set('subcategory', sub.value.trim());
|
||
const url = `${API.base}${API.list}?${params.toString()}`;
|
||
|
||
// headers (with optional license/account)
|
||
const headers = await buildHeaders();
|
||
|
||
// fetch quietly; avoid throwing UI errors — prefetch is best-effort
|
||
const res = await fetch(url, { cache: 'no-store', headers });
|
||
if (!res.ok) { PREFETCHING.delete(key); return; }
|
||
const data = await res.json().catch(()=>null);
|
||
if (!data || !Array.isArray(data.items)) { PREFETCHING.delete(key); return; }
|
||
|
||
const record = { ts: Date.now(), data };
|
||
QUERY_CACHE.set(key, record);
|
||
const persisted2 = await getPersistedCache();
|
||
persisted2[key] = record;
|
||
// prune stale
|
||
for (const k of Object.keys(persisted2)) { if (!persisted2[k] || !isFresh(persisted2[k].ts)) delete persisted2[k]; }
|
||
await savePersistedCache(persisted2);
|
||
} catch { /* silent */ }
|
||
finally { PREFETCHING.delete(`${currentSig}|${page+1}`); }
|
||
}
|
||
|
||
async function fetchPage(reset=false) {
|
||
more.disabled = true;
|
||
refreshPageLimit();
|
||
if (reset) { page = 1; items = []; list.innerHTML = ""; }
|
||
if (reset) { PREFETCHING.clear(); }
|
||
if (reset) { autoLoadBusy = false; }
|
||
|
||
// Build signature and check limits only for page 1
|
||
const sig = signatureFor(q.value, cat.value, sub.value);
|
||
|
||
// Gate on soft cap for Free (Pro unlimited)
|
||
if (!licenseValid && page === 1) {
|
||
const usage = await getDailyUsage();
|
||
const limit = usage.limit ?? CLIENT_FREE_DAILY_LIMIT;
|
||
// Check persisted cache first; a cached result does not consume usage
|
||
const persisted = await getPersistedCache();
|
||
const entry = persisted[sig];
|
||
const hasFreshPersist = entry && isFresh(entry.ts);
|
||
const hasFreshMem = QUERY_CACHE.has(`${sig}|1`) && isFresh(QUERY_CACHE.get(`${sig}|1`).ts);
|
||
|
||
if (usage.used >= limit && !hasFreshPersist && !hasFreshMem) {
|
||
// At cap and no cache — block network to be fair to server & UX
|
||
showToast('Daily limit reached — Upgrade to Pro');
|
||
updateFooter();
|
||
return;
|
||
}
|
||
}
|
||
|
||
try {
|
||
showSpinner();
|
||
|
||
// Cache key per page
|
||
const key = `${sig}|${page}`;
|
||
|
||
// 1) Try memory cache
|
||
const mem = QUERY_CACHE.get(key);
|
||
if (mem && isFresh(mem.ts)) {
|
||
const data = mem.data;
|
||
total = data.total || 0;
|
||
for (const e of (data.items || [])) { items.push(e); renderCard(e); }
|
||
// Kick off background prefetch for the next page (cached only)
|
||
const currentSig = signatureFor(q.value, cat.value, sub.value);
|
||
prefetchNextIfNeeded(currentSig).catch(()=>{});
|
||
try { ensureSentinel(); setupAutoLoadObserver(); } catch(_) {}
|
||
updateFooter();
|
||
return;
|
||
}
|
||
|
||
// 2) Try persisted cache
|
||
const persisted = await getPersistedCache();
|
||
const ent = persisted[key];
|
||
if (ent && isFresh(ent.ts)) {
|
||
total = ent.data.total || 0;
|
||
for (const e of (ent.data.items || [])) { items.push(e); renderCard(e); }
|
||
QUERY_CACHE.set(key, { ts: ent.ts, data: ent.data }); // promote to mem
|
||
// Kick off background prefetch for the next page (cached only)
|
||
const currentSig = signatureFor(q.value, cat.value, sub.value);
|
||
prefetchNextIfNeeded(currentSig).catch(()=>{});
|
||
try { ensureSentinel(); setupAutoLoadObserver(); } catch(_) {}
|
||
updateFooter();
|
||
return;
|
||
}
|
||
|
||
// 3) Network fetch
|
||
const params = new URLSearchParams({ page: String(page), limit: String(PAGE_LIMIT) });
|
||
if (q.value.trim()) params.set('q', q.value.trim());
|
||
if (cat.value.trim()) params.set('category', cat.value.trim());
|
||
if (sub.value.trim()) params.set('subcategory', sub.value.trim());
|
||
const url = `${API.base}${API.list}?${params.toString()}`;
|
||
|
||
// (usage increment moved to after successful fetch)
|
||
|
||
const headers = await buildHeaders();
|
||
|
||
// Optional nicety: offline guard (early exit if no network AND no fresh cache)
|
||
if (!navigator.onLine) {
|
||
const hasFreshMem = mem && isFresh(mem.ts);
|
||
const hasFreshPersist = ent && isFresh(ent.ts);
|
||
if (!hasFreshMem && !hasFreshPersist) {
|
||
throw new Error('offline');
|
||
}
|
||
}
|
||
|
||
const res = await fetch(url, { cache: 'no-store', headers });
|
||
|
||
if (!res.ok) throw new Error(`API ${res.status}`);
|
||
lastServerTier = res.headers.get('X-Dewemoji-Tier'); // 'pro' for Pro; null for Free/whitelist
|
||
const data = await res.json();
|
||
total = data.total || 0;
|
||
|
||
if (page === 1 && (!Array.isArray(data.items) || data.items.length === 0)) {
|
||
list.innerHTML = '';
|
||
items = [];
|
||
list.appendChild(buildAlert('warn', 'No results', 'Try another keyword, category, or tone.'));
|
||
setLoadMore('Load more', { hidden: true, disabled: true });
|
||
updateFooter();
|
||
return;
|
||
}
|
||
|
||
// Count usage only on successful network responses for Free, page 1, and when not cached
|
||
if (!licenseValid && page === 1) {
|
||
const cacheHas = !!(mem && isFresh(mem.ts)) || !!(ent && isFresh(ent.ts));
|
||
if (!cacheHas) {
|
||
const usage = await getDailyUsage();
|
||
const limit = usage.limit ?? CLIENT_FREE_DAILY_LIMIT;
|
||
usage.used = Math.min(limit, (usage.used || 0) + 1);
|
||
await setDailyUsage(usage);
|
||
}
|
||
}
|
||
|
||
// Save to caches
|
||
const record = { ts: Date.now(), data };
|
||
QUERY_CACHE.set(key, record);
|
||
const persisted2 = await getPersistedCache();
|
||
persisted2[key] = record;
|
||
// prune old entries occasionally (simple heuristic)
|
||
const now = Date.now();
|
||
for (const k of Object.keys(persisted2)) {
|
||
if (!persisted2[k] || !isFresh(persisted2[k].ts)) delete persisted2[k];
|
||
}
|
||
await savePersistedCache(persisted2);
|
||
|
||
// Render
|
||
for (const e of (data.items || [])) { items.push(e); renderCard(e); }
|
||
// Kick off background prefetch for the next page (cached only)
|
||
const currentSig = signatureFor(q.value, cat.value, sub.value);
|
||
prefetchNextIfNeeded(currentSig).catch(()=>{});
|
||
try { ensureSentinel(); setupAutoLoadObserver(); } catch(_) {}
|
||
updateFooter();
|
||
} catch (err) {
|
||
console.error('Fetch failed', err);
|
||
if (reset || page === 1) {
|
||
list.innerHTML = '';
|
||
items = []; total = 0;
|
||
}
|
||
list?.appendChild(buildAlert('error', 'Failed to load', 'Check your internet connection and try again.'));
|
||
if (page > 1) {
|
||
expectRetry = true;
|
||
setLoadMore('Retry', { hidden: false, disabled: false });
|
||
} else {
|
||
setLoadMore('Load more', { hidden: true, disabled: true });
|
||
}
|
||
} finally {
|
||
hideSpinner();
|
||
}
|
||
}
|
||
|
||
let autoObserver = null;
|
||
let autoLoadBusy = false;
|
||
let autoSentinel = null; // thin element placed right after the grid list
|
||
|
||
function ensureSentinel(){
|
||
if (autoSentinel && autoSentinel.isConnected) return autoSentinel;
|
||
autoSentinel = document.getElementById('autoload-sentinel');
|
||
if (!autoSentinel) {
|
||
autoSentinel = document.createElement('div');
|
||
autoSentinel.id = 'autoload-sentinel';
|
||
autoSentinel.style.cssText = 'width:100%;height:1px;';
|
||
}
|
||
try {
|
||
// Place immediately AFTER the grid list so intersecting means we reached the end
|
||
if (list && autoSentinel.parentElement !== list.parentElement) {
|
||
list.insertAdjacentElement('afterend', autoSentinel);
|
||
}
|
||
} catch(_) {}
|
||
return autoSentinel;
|
||
}
|
||
|
||
function setupAutoLoadObserver(){
|
||
const sentinel = ensureSentinel();
|
||
if (!sentinel) return;
|
||
|
||
if (autoObserver) {
|
||
try { autoObserver.unobserve(sentinel); } catch(_) {}
|
||
} else {
|
||
autoObserver = new IntersectionObserver((entries)=>{
|
||
const hit = entries.some(e => e.isIntersecting);
|
||
if (!hit) return;
|
||
if (autoLoadBusy) return;
|
||
|
||
const loading = !!spinnerEl;
|
||
const canLoad = items.length < total && total > 0;
|
||
if (loading || !canLoad) return;
|
||
|
||
autoLoadBusy = true;
|
||
setLoadMore('Loading…', { disabled: true });
|
||
page += 1;
|
||
fetchPage(false).finally(()=>{ autoLoadBusy = false; });
|
||
}, { root: null, rootMargin: '300px', threshold: 0 });
|
||
}
|
||
|
||
try { autoObserver.observe(sentinel); } catch(_) {}
|
||
}
|
||
|
||
// --- Load More helpers ---
|
||
let expectRetry = false;
|
||
function setLoadMore(label, opts = {}) {
|
||
if (!more) return;
|
||
if (label != null) more.textContent = label;
|
||
if (opts.hidden === true) more.classList.add('hidden');
|
||
if (opts.hidden === false) more.classList.remove('hidden');
|
||
if (typeof opts.disabled === 'boolean') more.disabled = opts.disabled;
|
||
}
|
||
|
||
async function updateFooter() {
|
||
// results text stays
|
||
count.textContent = `${items.length} / ${total}`;
|
||
|
||
// usage text append (right-aligned feel handled by CSS; here we append visually)
|
||
try {
|
||
const { used, limit } = await getDailyUsage();
|
||
const isServerPro = lastServerTier === 'pro';
|
||
const suffix = (licenseValid || isServerPro) ? '' : (limit != null ? ` · ${used} / ${limit} today` : '');
|
||
count.textContent = `${items.length} / ${total}${suffix}`;
|
||
} catch {}
|
||
|
||
const loading = !!spinnerEl;
|
||
const canLoadMore = items.length < total && total > 0;
|
||
if (canLoadMore) {
|
||
expectRetry = false;
|
||
setLoadMore('Load more', { hidden: loading, disabled: loading });
|
||
} else {
|
||
setLoadMore('Load more', { hidden: true, disabled: true });
|
||
}
|
||
// ensure auto-load observer is active when more is visible
|
||
try { setupAutoLoadObserver(); } catch(_) {}
|
||
}
|
||
|
||
async function ensureContentScript(tabId) {
|
||
// try ping
|
||
try {
|
||
const pong = await chrome.tabs.sendMessage(tabId, { type: 'dewemoji_ping' });
|
||
if (pong?.ok) return true;
|
||
} catch {}
|
||
// inject then ping again
|
||
try {
|
||
await chrome.scripting.executeScript({ target: { tabId }, files: ['content.js'] });
|
||
const pong2 = await chrome.tabs.sendMessage(tabId, { type: 'dewemoji_ping' });
|
||
return !!pong2?.ok;
|
||
} catch {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function insert(text, opts = {}) {
|
||
const strict = !!opts.strict; // if true, do NOT fallback to copy
|
||
if (!text) return false;
|
||
|
||
try {
|
||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||
if (!tab?.id) { if (!strict) { await navigator.clipboard.writeText(text); } return false; }
|
||
|
||
// A) Try inline injection (fast path)
|
||
const [{ result }] = await chrome.scripting.executeScript({
|
||
target: { tabId: tab.id },
|
||
func: (txt) => {
|
||
const el = document.activeElement;
|
||
const isEditable = el && (
|
||
el.tagName === 'TEXTAREA' ||
|
||
(el.tagName === 'INPUT' && /^(text|search|email|url|tel|number|password)?$/i.test(el.type)) ||
|
||
el.isContentEditable
|
||
);
|
||
if (!isEditable) return false;
|
||
|
||
if (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') {
|
||
const start = el.selectionStart ?? el.value.length;
|
||
const end = el.selectionEnd ?? start;
|
||
const val = el.value ?? '';
|
||
el.value = val.slice(0, start) + txt + val.slice(end);
|
||
const pos = start + txt.length;
|
||
try { el.setSelectionRange(pos, pos); } catch {}
|
||
el.dispatchEvent(new Event('input', { bubbles: true }));
|
||
return true;
|
||
}
|
||
try { document.execCommand('insertText', false, txt); return true; } catch { return false; }
|
||
},
|
||
args: [text]
|
||
});
|
||
|
||
if (result) return true; // inserted via inline
|
||
|
||
// B) Ensure content.js present, then ask it (robust path)
|
||
if (await ensureContentScript(tab.id)) {
|
||
const res = await chrome.tabs.sendMessage(tab.id, { type: 'dewemoji_insert', text });
|
||
if (res?.ok) return true; // inserted via content script
|
||
}
|
||
|
||
// C) Fallback
|
||
if (!strict) { await navigator.clipboard.writeText(text); }
|
||
return false;
|
||
} catch {
|
||
if (!strict) { await navigator.clipboard.writeText(text); }
|
||
return false;
|
||
}
|
||
}
|
||
|
||
async function migrateDailyLimit(){
|
||
try{
|
||
const usage = await getDailyUsage();
|
||
const target = CLIENT_FREE_DAILY_LIMIT; // 30
|
||
if (!licenseValid) {
|
||
if (typeof usage.limit !== 'number' || usage.limit > target) {
|
||
usage.limit = target;
|
||
await setDailyUsage(usage);
|
||
}
|
||
}
|
||
}catch{}
|
||
}
|
||
|
||
function updateClearButtonIcon() {
|
||
if (!clearBtn) return;
|
||
const hasText = q.value.trim().length > 0;
|
||
if (hasText) {
|
||
clearBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18 6L6 18M6 6l12 12"/></svg>`;
|
||
clearBtn.title = 'Clear';
|
||
clearBtn.setAttribute('aria-label', 'Clear');
|
||
clearBtn.classList.add('nm');
|
||
clearBtn.dataset.mode = 'clear';
|
||
} else {
|
||
clearBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M21.074 12.154a.75.75 0 0 1 .672.82c-.49 4.93-4.658 8.776-9.724 8.776c-2.724 0-5.364-.933-7.238-2.68L3 20.85a.75.75 0 0 1-.75-.75v-3.96c0-.714.58-1.29 1.291-1.29h3.97a.75.75 0 0 1 .75.75l-2.413 2.407c1.558 1.433 3.78 2.243 6.174 2.243c4.29 0 7.817-3.258 8.232-7.424a.75.75 0 0 1 .82-.672m-18.82-1.128c.49-4.93 4.658-8.776 9.724-8.776c2.724 0 5.364.933 7.238 2.68L21 3.15a.75.75 0 0 1 .75.75v3.96c0 .714-.58 1.29-1.291 1.29h-3.97a.75.75 0 0 1-.75-.75l2.413-2.408c-1.558-1.432-3.78-2.242-6.174-2.242c-4.29 0-7.817 3.258-8.232 7.424a.75.75 0 1 1-1.492-.148"/></svg>`; // refresh icon
|
||
clearBtn.title = 'Refresh';
|
||
clearBtn.setAttribute('aria-label', 'Refresh');
|
||
clearBtn.classList.add('nm');
|
||
clearBtn.dataset.mode = 'refresh';
|
||
}
|
||
}
|
||
|
||
// events
|
||
q.addEventListener('input', () => {
|
||
updateClearButtonIcon();
|
||
debounced(() => fetchPage(true));
|
||
});
|
||
|
||
cat.addEventListener('change', () => {
|
||
populateSubcategorySelect(cat.value);
|
||
sub.value = '';
|
||
fetchPage(true).catch(console.error);
|
||
});
|
||
sub.addEventListener('change', () => {
|
||
fetchPage(true).catch(console.error);
|
||
});
|
||
clearBtn.addEventListener('click', () => {
|
||
const mode = clearBtn.dataset.mode;
|
||
if (mode === 'clear') {
|
||
q.value = '';
|
||
updateClearButtonIcon();
|
||
fetchPage(true);
|
||
} else {
|
||
// refresh when empty
|
||
fetchPage(true);
|
||
}
|
||
});
|
||
more.addEventListener('click', () => {
|
||
if (expectRetry) {
|
||
// retry same page without incrementing
|
||
expectRetry = false;
|
||
setLoadMore('Loading…', { disabled: true });
|
||
fetchPage(false);
|
||
return;
|
||
}
|
||
more.disabled = true;
|
||
page += 1;
|
||
fetchPage(false);
|
||
});
|
||
|
||
function showToast(text='Done') {
|
||
if (!toastEl) return;
|
||
toastEl.textContent = text;
|
||
toastEl.classList.add('show');
|
||
clearTimeout(showToast._t);
|
||
showToast._t = setTimeout(() => toastEl.classList.remove('show'), 1400);
|
||
}
|
||
|
||
// (obsolete) placeholder; real renderCard defined later with Windows support + Pro tone UI
|
||
function renderCard(e) {}
|
||
// --- Popover helpers for skin tone picker ---
|
||
function showPopoverNear(anchorEl, popEl){
|
||
const r = anchorEl.getBoundingClientRect();
|
||
Object.assign(popEl.style, {
|
||
position: 'fixed',
|
||
left: `${Math.min(window.innerWidth - 8, Math.max(8, r.left))}px`,
|
||
top: `${Math.min(window.innerHeight - 8, r.bottom + 6)}px`,
|
||
zIndex: 9999,
|
||
});
|
||
document.body.appendChild(popEl);
|
||
}
|
||
function removePopover(){
|
||
const p = document.getElementById('dewemoji-tone-popover');
|
||
if (p && p.parentNode) p.parentNode.removeChild(p);
|
||
document.removeEventListener('click', handleOutsideClose, true);
|
||
}
|
||
function handleOutsideClose(e){
|
||
const p = document.getElementById('dewemoji-tone-popover');
|
||
if (p && !p.contains(e.target)) removePopover();
|
||
}
|
||
function buildTonePopover(base, activeIdx, onPick){
|
||
const el = document.createElement('div');
|
||
el.id = 'dewemoji-tone-popover';
|
||
el.setAttribute('role','dialog');
|
||
el.style.cssText = 'background: var(--c-bg, #fff); border: 1px solid var(--c-border, rgba(0,0,0,.12)); padding:6px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.15); display:flex; gap:6px;';
|
||
SKIN_TONES.forEach((t,i) => {
|
||
const b = document.createElement('button');
|
||
b.className = 'tone-btn';
|
||
b.textContent = withSkinTone(base, t.ch);
|
||
b.title = t.label;
|
||
b.style.cssText = 'min-width:32px;height:32px;border-radius:6px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;background:var(--c-chip,#f3f4f6)';
|
||
if (i === activeIdx) b.classList.add('selected');
|
||
b.addEventListener('click', () => onPick(i, t));
|
||
el.appendChild(b);
|
||
});
|
||
setTimeout(() => document.addEventListener('click', handleOutsideClose, true), 0);
|
||
return el;
|
||
}
|
||
|
||
// initial
|
||
loadCategories().catch(console.error);
|
||
(async () => {
|
||
try {
|
||
await loadSettings();
|
||
await migrateDailyLimit();
|
||
} catch(_) {}
|
||
await fetchPage(true).catch(console.error);
|
||
try { setupAutoLoadObserver(); } catch(_) {}
|
||
})();
|
||
|
||
async function loadSettings() {
|
||
const data = await chrome.storage.local.get(['licenseValid', 'licenseKey', 'actionMode']);
|
||
licenseValid = !!data.licenseValid;
|
||
refreshPageLimit();
|
||
actionMode = data.actionMode || 'copy';
|
||
if (data.licenseKey) licenseKeyEl && (licenseKeyEl.value = data.licenseKey);
|
||
licenseKeyCurrent = data.licenseKey || '';
|
||
applyLicenseUI();
|
||
applyModeUI();
|
||
setStatusTag();
|
||
// tone settings from sync storage
|
||
await getPreferredToneIndex();
|
||
await getToneLock();
|
||
renderToneSettingsSection();
|
||
// ensure license field starts in non-edit mode
|
||
setLicenseEditMode(false);
|
||
}
|
||
|
||
async function saveSettings() {
|
||
await chrome.storage.local.set({ licenseValid, actionMode, licenseKey: licenseKeyEl?.value || '' });
|
||
}
|
||
|
||
function setLicenseEditMode(on) {
|
||
if (!licenseKeyEl) return;
|
||
const isOn = !!on;
|
||
|
||
// Input enabled only when editing OR not licensed
|
||
licenseKeyEl.disabled = licenseValid ? !isOn : false;
|
||
|
||
if (licenseValid) {
|
||
// Licensed: default view hides Activate; editing shows Save/Cancel
|
||
if (licenseActivateBtn) {
|
||
licenseActivateBtn.style.display = isOn ? '' : 'none';
|
||
licenseActivateBtn.textContent = isOn ? 'Save' : 'Activate';
|
||
}
|
||
if (licenseDeactivateBtn) licenseDeactivateBtn.style.display = licenseActivateBtn.textContent == 'Save' ? 'none' : '';
|
||
if (licenseEditBtn) licenseEditBtn.style.display = isOn ? 'none' : '';
|
||
if (licenseCancelEditBtn) licenseCancelEditBtn.style.display = isOn ? '' : 'none';
|
||
} else {
|
||
// Free: show Activate only
|
||
if (licenseActivateBtn) { licenseActivateBtn.style.display = ''; licenseActivateBtn.textContent = 'Activate'; }
|
||
if (licenseDeactivateBtn) licenseDeactivateBtn.style.display = 'none';
|
||
if (licenseEditBtn) licenseEditBtn.style.display = 'none';
|
||
if (licenseCancelEditBtn) licenseCancelEditBtn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function applyLicenseUI() {
|
||
// enable/disable Pro radios
|
||
const radios = modeGroup.querySelectorAll('input[type="radio"][name="actionMode"]');
|
||
radios.forEach(r => {
|
||
const isPro = (r.value === 'insert' || r.value === 'auto');
|
||
if (isPro) {
|
||
r.disabled = !licenseValid;
|
||
r.closest('.radio').setAttribute('aria-disabled', !licenseValid ? 'true' : 'false');
|
||
}
|
||
});
|
||
|
||
if (!licenseValid) {
|
||
// Force visible selection to 'copy' for clarity
|
||
const copy = modeGroup.querySelector('input[type="radio"][value="copy"]');
|
||
if (copy) copy.checked = true;
|
||
licenseStatusEl && (licenseStatusEl.textContent = 'Free mode — Pro features locked.');
|
||
} else {
|
||
// Restore selected mode if Pro; if current actionMode is pro, check it
|
||
const target = modeGroup.querySelector(`input[type="radio"][value="${actionMode}"]`) ||
|
||
modeGroup.querySelector('input[type="radio"][value="auto"]');
|
||
if (target) target.checked = true;
|
||
licenseStatusEl && (licenseStatusEl.textContent = 'Pro active');
|
||
}
|
||
// Reset to non-edit view per license state
|
||
if (licenseValid) {
|
||
if (licenseKeyEl) licenseKeyEl.disabled = true;
|
||
if (licenseActivateBtn) { licenseActivateBtn.style.display = 'none'; licenseActivateBtn.textContent = 'Activate'; }
|
||
if (licenseDeactivateBtn) licenseDeactivateBtn.style.display = '';
|
||
if (licenseEditBtn) licenseEditBtn.style.display = '';
|
||
if (licenseCancelEditBtn) licenseCancelEditBtn.style.display = 'none';
|
||
} else {
|
||
if (licenseKeyEl) licenseKeyEl.disabled = false;
|
||
if (licenseActivateBtn) { licenseActivateBtn.style.display = ''; licenseActivateBtn.textContent = 'Activate'; }
|
||
if (licenseDeactivateBtn) licenseDeactivateBtn.style.display = 'none';
|
||
if (licenseEditBtn) licenseEditBtn.style.display = 'none';
|
||
if (licenseCancelEditBtn) licenseCancelEditBtn.style.display = 'none';
|
||
}
|
||
setStatusTag();
|
||
}
|
||
|
||
function applyModeUI() {
|
||
// Ensure the selected radio matches actionMode (if not locked)
|
||
const input = modeGroup.querySelector(`input[type="radio"][value="${actionMode}"]`);
|
||
if (input && !input.disabled) input.checked = true;
|
||
}
|
||
|
||
// --- License account id helper (best practice: hash + label) ---
|
||
async function accountId() {
|
||
// Return a stable, privacy-preserving identifier and a masked label for UI
|
||
// { id: <hashed id>, label: <masked email or short id> }
|
||
|
||
// Try cache first
|
||
const cached = await chrome.storage.local.get(['accountId','accountLabel']);
|
||
if (cached.accountId && cached.accountLabel) {
|
||
return { id: cached.accountId, label: cached.accountLabel };
|
||
}
|
||
|
||
let raw = '';
|
||
let label = '';
|
||
|
||
try {
|
||
if (chrome.identity && chrome.identity.getProfileUserInfo) {
|
||
const info = await new Promise(res => chrome.identity.getProfileUserInfo(res));
|
||
// info: { email, id }
|
||
if (info?.email) {
|
||
raw = (info.email || '').trim().toLowerCase();
|
||
label = maskEmail(info.email);
|
||
} else if (info?.id) {
|
||
raw = String(info.id);
|
||
label = shortId(info.id);
|
||
}
|
||
}
|
||
} catch {}
|
||
|
||
if (!raw) {
|
||
// Fallback to a per-profile UUID
|
||
const got = await chrome.storage.local.get(['profileUUID']);
|
||
if (got?.profileUUID) {
|
||
raw = got.profileUUID; label = shortId(raw);
|
||
} else {
|
||
raw = crypto.randomUUID(); label = shortId(raw);
|
||
await chrome.storage.local.set({ profileUUID: raw });
|
||
}
|
||
}
|
||
|
||
const hashed = await sha256Base64Url(raw);
|
||
await chrome.storage.local.set({ accountId: hashed, accountLabel: label });
|
||
return { id: hashed, label };
|
||
}
|
||
|
||
function maskEmail(email){
|
||
const [u, d] = String(email).split('@');
|
||
if (!d) return shortId(email);
|
||
const head = u.slice(0,1);
|
||
const tail = u.slice(-1);
|
||
return `${head}${u.length>2?'***':''}${tail}@${d}`;
|
||
}
|
||
function shortId(s){
|
||
const x = String(s);
|
||
return x.length <= 8 ? x : `${x.slice(0,4)}…${x.slice(-2)}`;
|
||
}
|
||
async function sha256Base64Url(input){
|
||
const enc = new TextEncoder();
|
||
const buf = await crypto.subtle.digest('SHA-256', enc.encode(input));
|
||
const bytes = new Uint8Array(buf);
|
||
let bin = '';
|
||
for (let i=0;i<bytes.length;i++) bin += String.fromCharCode(bytes[i]);
|
||
return btoa(bin).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'');
|
||
}
|
||
|
||
// --- Tone Settings UI (in Settings modal) ---
|
||
function renderToneSettingsSection(){
|
||
if (!sheet) return;
|
||
let sec = document.getElementById('tone-settings');
|
||
if (!sec) {
|
||
sec = document.createElement('section');
|
||
sec.id = 'tone-settings';
|
||
sec.innerHTML = `
|
||
<h3 class="h">Preferred skin tone</h3>
|
||
<label class="toggle"><input type="checkbox" id="tone-lock"> <span>Lock preferred tone (use automatically)</span></label>
|
||
<div id="tone-palette" class="tone-palette" style="display:flex;gap:8px;margin:8px 0 4px 0;"></div>
|
||
<div id="tone-note" class="note"></div>
|
||
`;
|
||
sheet.querySelector('#tab-pro')?.appendChild(sec) || sheet.appendChild(sec);
|
||
}
|
||
const pal = sec.querySelector('#tone-palette');
|
||
pal.innerHTML = '';
|
||
const lockEl = sec.querySelector('#tone-lock');
|
||
lockEl.checked = !!toneLock;
|
||
lockEl.onchange = async (e)=>{ await setToneLock(!!e.target.checked); showToast(toneLock ? 'Tone lock enabled' : 'Tone lock disabled'); };
|
||
const idx = TONE_SLUGS.indexOf(preferredToneSlug);
|
||
const basePreview = '✋';
|
||
SKIN_TONES.forEach((t,i)=>{
|
||
const b = document.createElement('button');
|
||
b.className = 'tone-chip';
|
||
b.title = t.label;
|
||
b.textContent = basePreview + t.ch; // small preview
|
||
b.style.cssText = 'height:32px;border-radius:8px;padding:0 8px;border:1px solid var(--c-border, rgba(0,0,0,.12));background:var(--c-chip,#f3f4f6)';
|
||
if (i === idx) b.classList.add('selected');
|
||
b.addEventListener('click', async ()=>{
|
||
await setPreferredToneIndex(i);
|
||
showToast('Preferred tone set');
|
||
renderToneSettingsSection();
|
||
});
|
||
pal.appendChild(b);
|
||
});
|
||
const note = sec.querySelector('#tone-note');
|
||
if (!preferredToneSlug) {
|
||
note.textContent = 'Tip: choosing a tone will lock it for next picks if the toggle is on.';
|
||
} else {
|
||
note.textContent = toneLock ? `Using ${preferredToneSlug.replace('-', ' ')} tone by default.` : 'Lock is off — we will ask via the palette.';
|
||
}
|
||
}
|
||
|
||
function openSheet() {
|
||
sheet.removeAttribute('hidden'); backdrop.removeAttribute('hidden');
|
||
requestAnimationFrame(() => { sheet.classList.add('show'); backdrop.classList.add('show'); });
|
||
}
|
||
function closeSheet() {
|
||
sheet.classList.remove('show'); backdrop.classList.remove('show');
|
||
setTimeout(() => { sheet.setAttribute('hidden',''); backdrop.setAttribute('hidden',''); }, 180);
|
||
}
|
||
|
||
settingsBtn?.addEventListener('click', openSheet);
|
||
sheetClose?.addEventListener('click', closeSheet);
|
||
backdrop?.addEventListener('click', closeSheet);
|
||
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSheet(); });
|
||
|
||
// Tabs logic for settings sheet
|
||
const tabsWrap = document.querySelector('#settings-sheet .tabs');
|
||
if (tabsWrap) {
|
||
tabsWrap.addEventListener('click', (e) => {
|
||
const btn = e.target.closest('.tab');
|
||
if (!btn) return;
|
||
const target = btn.dataset.tab;
|
||
document.querySelectorAll('#settings-sheet .tab').forEach(b => b.classList.toggle('active', b === btn));
|
||
document.querySelectorAll('#settings-sheet .tabpane').forEach(p => p.classList.toggle('active', p.id === `tab-${target}`));
|
||
});
|
||
}
|
||
|
||
modeGroup?.addEventListener('change', async (e) => {
|
||
if (e.target && e.target.name === 'actionMode') {
|
||
const val = e.target.value;
|
||
// If not licensed and user clicked a Pro option, bounce back to copy
|
||
if (!licenseValid && (val === 'insert' || val === 'auto')) {
|
||
showToast('Pro required for Insert/Automatic');
|
||
const copy = modeGroup.querySelector('input[value="copy"]');
|
||
if (copy) copy.checked = true;
|
||
actionMode = 'copy';
|
||
} else {
|
||
actionMode = val;
|
||
}
|
||
await saveSettings();
|
||
}
|
||
});
|
||
|
||
licenseActivateBtn?.addEventListener('click', async () => {
|
||
const key = (licenseKeyEl?.value || '').trim();
|
||
if (!key) { showToast('Enter a license key'); return; }
|
||
try {
|
||
setLicenseBusy(true, 'Verifying…');
|
||
// Call your API /license/verify (works for Gumroad and Mayar)
|
||
const acct = await accountId();
|
||
const res = await fetch('https://api.dewemoji.com/v1/license/verify', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ key, account_id: acct.id, version: chrome.runtime.getManifest().version })
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok || !data.ok) throw new Error(data?.error || `Verify ${res.status}`);
|
||
|
||
licenseValid = true;
|
||
refreshPageLimit();
|
||
licenseKeyCurrent = key;
|
||
await chrome.storage.local.set({ licenseValid: true, licenseKey: key, lastLicenseCheck: Date.now() });
|
||
|
||
applyLicenseUI();
|
||
setLicenseEditMode(false);
|
||
setStatusTag();
|
||
showToast('License activated ✓');
|
||
|
||
// Refresh results so Pro headers/tier take effect immediately
|
||
fetchPage(true).catch(console.error);
|
||
setLicenseBusy(false);
|
||
} catch (e) {
|
||
setLicenseBusy(false);
|
||
licenseValid = false;
|
||
await chrome.storage.local.set({ licenseValid: false });
|
||
applyLicenseUI();
|
||
setStatusTag();
|
||
showToast(`Activation failed${e?.message ? ': ' + e.message : ''}`);
|
||
}
|
||
});
|
||
|
||
licenseEditBtn?.addEventListener('click', () => {
|
||
setLicenseEditMode(true);
|
||
});
|
||
|
||
licenseCancelEditBtn?.addEventListener('click', async () => {
|
||
const data = await chrome.storage.local.get(['licenseKey']);
|
||
if (licenseKeyEl) licenseKeyEl.value = data.licenseKey || '';
|
||
setLicenseEditMode(false);
|
||
});
|
||
|
||
licenseDeactivateBtn?.addEventListener('click', async () => {
|
||
if (!licenseValid) return;
|
||
const ok = confirm('Deactivate Pro on this device?');
|
||
if (!ok) return;
|
||
setLicenseBusy(true, 'Deactivating…');
|
||
try {
|
||
// (Optional) TODO: call your API /license/deactivate here, e.g.:
|
||
// const acct = await accountId();
|
||
// await fetch('https://YOUR-API/license/deactivate', {
|
||
// method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
// body: JSON.stringify({ key: (licenseKeyEl?.value || '').trim(), account_id: acct.id })
|
||
// });
|
||
licenseValid = false;
|
||
refreshPageLimit();
|
||
await chrome.storage.local.set({ licenseValid: false, licenseKey: '' });
|
||
if (licenseKeyEl) licenseKeyEl.value = '';
|
||
applyLicenseUI();
|
||
licenseKeyCurrent = '';
|
||
setLicenseEditMode(false);
|
||
showToast('License deactivated');
|
||
fetchPage(true).catch(console.error);
|
||
setLicenseBusy(false);
|
||
} catch (e) {
|
||
setLicenseBusy(false);
|
||
showToast('Could not deactivate');
|
||
}
|
||
});
|
||
|
||
function renderDiag(obj) {
|
||
const lines = [];
|
||
lines.push(`Content script loaded: ${obj ? 'yes' : 'no'}`);
|
||
if (!obj) return lines.join('\n');
|
||
|
||
lines.push(`Active editable type: ${obj.activeType ?? 'none'}`);
|
||
lines.push(`Has caret/selection: ${obj.hasRange ? 'yes' : 'no'}`);
|
||
lines.push(`Last insert result: ${obj.lastInsertOK === null ? 'n/a' : obj.lastInsertOK ? 'success' : 'failed'}`);
|
||
if (obj.lastInsertMessage) lines.push(`Note: ${obj.lastInsertMessage}`);
|
||
return lines.join('\n');
|
||
}
|
||
|
||
diagRunBtn?.addEventListener('click', async () => {
|
||
diagOut.textContent = '';
|
||
diagSpin.style.display = 'inline';
|
||
|
||
try {
|
||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||
if (!tab?.id) { diagOut.textContent = 'No active tab.'; return; }
|
||
|
||
const ready = await ensureContentScript(tab.id);
|
||
if (!ready) { diagOut.textContent = renderDiag(null); return; }
|
||
|
||
const info = await chrome.tabs.sendMessage(tab.id, { type: 'dewemoji_diag' });
|
||
diagOut.textContent = renderDiag(info || null);
|
||
} catch (e) {
|
||
diagOut.textContent = `Error: ${e?.message || e}`;
|
||
} finally {
|
||
diagSpin.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
async function performEmojiAction(glyph) {
|
||
// Free users always copy
|
||
const mode = licenseValid ? actionMode : 'copy';
|
||
|
||
if (mode === 'copy') {
|
||
await navigator.clipboard.writeText(glyph);
|
||
showToast('Copied ✅');
|
||
return;
|
||
}
|
||
|
||
if (mode === 'insert') {
|
||
const ok = await insert(glyph, { strict: true }); // no copy fallback
|
||
showToast(ok ? 'Inserted ✅' : '❗ No editable field');
|
||
return;
|
||
}
|
||
|
||
// mode === 'auto' (insert else copy)
|
||
{
|
||
const ok = await insert(glyph, { strict: false });
|
||
showToast(ok ? 'Inserted ✅' : 'Copied ✅');
|
||
return;
|
||
}
|
||
}
|
||
|
||
async function setStatusTag(){
|
||
const dewemojiStatusTag = document.getElementById('dewemoji-status');
|
||
if(licenseValid){
|
||
dewemojiStatusTag.innerText = 'Pro';
|
||
dewemojiStatusTag.classList.add('pro');
|
||
dewemojiStatusTag.classList.remove('free');
|
||
}else{
|
||
dewemojiStatusTag.innerText = 'Free';
|
||
dewemojiStatusTag.classList.add('free');
|
||
dewemojiStatusTag.classList.remove('pro');
|
||
}
|
||
}
|
||
setStatusTag().catch(() => {});
|
||
|
||
const IS_WINDOWS = navigator.userAgent.includes('Windows');
|
||
|
||
// Build Twemoji SVG url from codepoints
|
||
function twemojiSrcFromCodepoints(cp) {
|
||
return `https://twemoji.maxcdn.com/v/latest/svg/${cp}.svg`;
|
||
}
|
||
|
||
// OPTIONAL: as a secondary image fallback if Twemoji doesn't have it
|
||
function notoSrcFromCodepoints(cp) {
|
||
// Twemoji uses "1f469-200d-1f4bb.svg"
|
||
// Noto repo names use underscores: "emoji_u1f469_200d_1f4bb.svg"
|
||
const underscored = cp.split('-').join('_');
|
||
return `https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji@main/svg/emoji_u${underscored}.svg`;
|
||
}
|
||
|
||
/**
|
||
* Ensure an emoji is renderable inside `container` on Windows,
|
||
* and return a canonical glyph string for copy/insert.
|
||
* - Tries twemoji.parse first
|
||
* - If nothing replaced, forces an <img> using toCodePoint()
|
||
* - Returns { glyph, usedImg }
|
||
*/
|
||
function ensureRenderableAndGlyph(emojiStr, container) {
|
||
let glyph = emojiStr;
|
||
|
||
if (!(IS_WINDOWS && window.twemoji)) {
|
||
container.textContent = glyph;
|
||
return { glyph, usedImg: false };
|
||
}
|
||
|
||
// Try normal twemoji.parse on a temp node
|
||
const temp = document.createElement('span');
|
||
temp.textContent = emojiStr;
|
||
window.twemoji.parse(temp, {
|
||
folder: 'svg',
|
||
ext: '.svg',
|
||
base: 'https://twemoji.maxcdn.com/v/latest/',
|
||
attributes: () => ({ draggable: 'false', alt: '' })
|
||
});
|
||
|
||
const img = temp.querySelector('img');
|
||
if (img) {
|
||
// Parsed OK — adopt result
|
||
container.replaceChildren(img);
|
||
return { glyph, usedImg: true };
|
||
}
|
||
|
||
// Force build from codepoints (handles cases parse() didn't catch)
|
||
try {
|
||
const cp = window.twemoji.convert.toCodePoint(emojiStr);
|
||
const img2 = new Image();
|
||
img2.alt = emojiStr;
|
||
img2.draggable = false;
|
||
|
||
img2.src = notoSrcFromCodepoints(cp);
|
||
img2.onerror = () => {
|
||
img2.onerror = null; // prevent loops
|
||
img2.src = twemojiSrcFromCodepoints(cp);
|
||
};
|
||
container.replaceChildren(img2);
|
||
|
||
// Normalize the glyph for copying from the same codepoints
|
||
// (twemoji provides the inverse)
|
||
glyph = window.twemoji.convert.fromCodePoint(cp);
|
||
return { glyph, usedImg: true };
|
||
} catch {
|
||
// Last resort: show text (may be tofu) but keep original glyph
|
||
container.textContent = emojiStr;
|
||
return { glyph: emojiStr, usedImg: false };
|
||
}
|
||
}
|
||
|
||
function renderCard(e) {
|
||
const card = document.createElement('div');
|
||
card.className = 'card';
|
||
card.title = e.name || '';
|
||
|
||
const emo = document.createElement('div');
|
||
emo.className = 'emo';
|
||
|
||
let baseGlyph = e.emoji || e.symbol || e.text || '';
|
||
|
||
const prefIdxPromise = getPreferredToneIndex();
|
||
|
||
(async () => {
|
||
let renderGlyph = baseGlyph;
|
||
if (licenseValid && toneLock && e.supports_skin_tone) {
|
||
const idx = await prefIdxPromise;
|
||
if (idx >= 0) {
|
||
const base = e.emoji_base || stripSkinTone(baseGlyph);
|
||
renderGlyph = withSkinTone(base, SKIN_TONES[idx].ch);
|
||
}
|
||
}
|
||
const res = ensureRenderableAndGlyph(renderGlyph, emo);
|
||
baseGlyph = res.glyph;
|
||
})();
|
||
|
||
const name = document.createElement('div');
|
||
name.className = 'nm';
|
||
name.textContent = e.name || '';
|
||
|
||
card.addEventListener('click', async () => {
|
||
if (!licenseValid || !e.supports_skin_tone) {
|
||
performEmojiAction(baseGlyph).catch(console.error);
|
||
return;
|
||
}
|
||
|
||
const idx = await prefIdxPromise;
|
||
const base = e.emoji_base || stripSkinTone(baseGlyph);
|
||
|
||
if (toneLock && idx >= 0) {
|
||
const variant = withSkinTone(base, SKIN_TONES[idx].ch);
|
||
performEmojiAction(variant).catch(console.error);
|
||
return;
|
||
}
|
||
|
||
removePopover();
|
||
const pop = buildTonePopover(base, idx, async (newIdx, tone) => {
|
||
const variant = withSkinTone(base, tone.ch);
|
||
if (toneLock && idx < 0) {
|
||
await setPreferredToneIndex(newIdx);
|
||
showToast('Preferred tone set');
|
||
}
|
||
performEmojiAction(variant).catch(console.error);
|
||
removePopover();
|
||
});
|
||
showPopoverNear(card, pop);
|
||
});
|
||
|
||
card.append(emo, name);
|
||
list.appendChild(card);
|
||
}
|
||
|
||
// pick a tofu cell
|
||
const el = document.querySelector('.card .emo');
|
||
const raw = el?.textContent || '';
|
||
console.log('RAW points:', [...raw].map(c=>c.codePointAt(0).toString(16)));
|
||
|
||
if (window.twemoji) {
|
||
const cp = window.twemoji.convert.toCodePoint(raw);
|
||
console.log('Twemoji codepoints:', cp);
|
||
console.log('Canonical from codepoints:', window.twemoji.convert.fromCodePoint(cp));
|
||
}
|
||
|
||
(async function verifyLicenseOnBoot(){
|
||
try {
|
||
const { licenseKey, lastLicenseCheck } = await chrome.storage.local.get(['licenseKey','lastLicenseCheck']);
|
||
if (!licenseKey) return;
|
||
licenseStatusEl && (licenseStatusEl.textContent = 'Checking license…');
|
||
const day = 24*60*60*1000; if (Date.now() - (lastLicenseCheck||0) < day) return;
|
||
const acct = await accountId();
|
||
const res = await fetch('https://api.dewemoji.com/v1/license/verify', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ key: licenseKey, account_id: acct.id, version: chrome.runtime.getManifest().version })
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
const ok = !!data.ok;
|
||
await chrome.storage.local.set({ licenseValid: ok, lastLicenseCheck: Date.now() });
|
||
licenseValid = ok; refreshPageLimit(); applyLicenseUI(); setStatusTag();
|
||
licenseStatusEl && (licenseStatusEl.textContent = licenseValid ? 'Pro active' : 'Free mode — Pro features locked.');
|
||
} catch {}
|
||
})();
|
||
|
||
// Re-render tone section when opening settings (in case lock/pref changed during session)
|
||
const __openSheet = openSheet;
|
||
openSheet = function(){
|
||
__openSheet();
|
||
const genBtn = document.querySelector('#settings-sheet .tab[data-tab="general"]');
|
||
const proBtn = document.querySelector('#settings-sheet .tab[data-tab="pro"]');
|
||
genBtn?.classList.add('active'); proBtn?.classList.remove('active');
|
||
document.getElementById('tab-general')?.classList.add('active');
|
||
document.getElementById('tab-pro')?.classList.remove('active');
|
||
renderToneSettingsSection();
|
||
}; |