backdraw 0.0.0-stage → 2.1.0

package/extension/menus.js

@@ -0,0 +1,50 @@
+// The right-click menu on images: its items for a collection list, what a clicked item id means, and
+// where the "New collection…" window goes. No chrome.* calls here, so the tests can load it too.
+(() => {
+  const ROOT = 'backdraw';
+  const ADD = 'backdraw:add:'; // + the collection name, as the host lists it
+  const NEW = 'backdraw:new';
+  const SEP = 'backdraw:sep';
+  const OFF = 'backdraw:off';
+  const GALLERY_ID = 'backdraw:gallery'; // on the toolbar icon; parseMenuId leaves it to background.js
+  // Images on web pages and local files only: the extension's own pages show thumbnails of images
+  // that are already in a collection.
+  const where = { contexts: ['image'], documentUrlPatterns: ['http://*/*', 'https://*/*', 'file:///*'] };
+
+  // collections: [{ name, count }] from the host, or null while it is not connected. msg(key) gives
+  // the localized title.
+  function menuItems(collections, msg) {
+    const items = [{ id: ROOT, title: msg('menuAdd'), ...where }];
+    if (!collections) return [...items, { id: OFF, parentId: ROOT, title: msg('menuOffline'), ...where, enabled: false }];
+    for (const c of collections) items.push({ id: ADD + c.name, parentId: ROOT, title: `${c.name} (${c.count})`, ...where });
+    if (collections.length) items.push({ id: SEP, parentId: ROOT, type: 'separator', ...where });
+    items.push({ id: NEW, parentId: ROOT, title: msg('menuNew'), ...where });
+    return items;
+  }
+
+  // { kind: 'add', name } | { kind: 'new' } | null for anything else.
+  function parseMenuId(id) {
+    const s = String(id ?? '');
+    if (s === NEW) return { kind: 'new' };
+    if (s.startsWith(ADD) && s.length > ADD.length) return { kind: 'add', name: s.slice(ADD.length) };
+    return null;
+  }
+
+  // left/top that put a width x height window in the middle of win (a chrome.windows.Window); nothing
+  // when win is unknown, so Chrome picks the place. Not clamped: a screen left of the main one has
+  // negative coordinates.
+  function centreOver(win, width, height) {
+    if (!win || ![win.left, win.top, win.width, win.height].every(Number.isFinite)) return {};
+    return { left: Math.round(win.left + (win.width - width) / 2), top: Math.round(win.top + (win.height - height) / 2) };
+  }
+
+
+  // The toolbar icon's own right-click menu (the icon itself keeps opening the popup).
+  function actionItems(msg) {
+    return [{ id: GALLERY_ID, title: msg('menuGallery'), contexts: ['action'] }];
+  }
+
+  const api = { menuItems, parseMenuId, centreOver, actionItems, GALLERY_ID };
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  else globalThis.backdrawMenus = api;
+})();

package/extension/popup.css

@@ -0,0 +1,90 @@
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; width: 348px; background: var(--bg); color: var(--fg); font: 13px/1.45 "Segoe UI", system-ui, sans-serif; }
+button, select, input { font: inherit; color: inherit; }
+button { cursor: pointer; }
+
+header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
+.mascot { flex: none; width: 36px; height: 36px; border-radius: 10px; }
+.brand { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
+.brand b { font-size: 15px; }
+.brand small { color: var(--muted); font-size: 11px; }
+.icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
+.icon:hover, .icon[aria-expanded="true"] { background: var(--surface); color: var(--fg); }
+
+section { padding: 12px 14px; border-bottom: 1px solid var(--line); }
+h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 13px; }
+h2 small { color: var(--muted); font-size: 11px; font-weight: 400; }
+
+.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--surface); }
+.settings label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 11px; }
+select { padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--fg); font-size: 12px; }
+
+.btn { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--fg); overflow-wrap: anywhere; }
+.btn:hover:not(:disabled) { border-color: var(--accent); }
+.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); font-weight: 600; }
+.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
+.btn.danger { border-color: var(--bad); color: var(--bad); }
+.btn:disabled { opacity: .55; cursor: default; }
+.link { padding: 0; border: 0; background: none; color: var(--link); font-weight: 600; }
+
+/* setup checklist */
+.steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
+.step { display: flex; gap: 10px; }
+.mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%;
+  background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; }
+.step.done .mark { border-color: var(--ok); background: var(--ok); color: #fff; }
+.step.todo .mark { border-color: var(--bad); background: var(--bad); color: #fff; }
+.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.step-title { font-weight: 600; line-height: 20px; }
+.step.wait .step-title { color: var(--muted); }
+.note { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
+.note.err { color: var(--bad); }
+.actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.copy { display: flex; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
+.copy code { flex: 1; min-width: 0; padding: 6px 8px; font: 12px/1.4 Consolas, "Cascadia Mono", monospace; overflow-wrap: anywhere; }
+.copy button { flex: none; padding: 0 10px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--link); font-size: 12px; font-weight: 600; }
+.projects { display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto; }
+.projects .btn { text-align: left; }
+.spinner { display: inline-block; flex: none; width: 11px; height: 11px; margin-right: 6px; border: 2px solid var(--accent-soft); border-top-color: var(--accent);
+  border-radius: 50%; vertical-align: -1px; animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* status */
+.rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
+.rows dt { color: var(--muted); }
+.rows dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
+.ok { color: var(--ok); font-weight: 600; }
+.bad { color: var(--bad); font-weight: 600; }
+.rows .link { margin-left: 6px; font-size: 12px; }
+#pick { width: 100%; margin-top: 10px; }
+details { margin-top: 10px; }
+summary { color: var(--muted); font-size: 12px; cursor: pointer; }
+details .steps { margin-top: 10px; }
+
+/* reference collections */
+#colList { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
+#colList .btn { display: flex; justify-content: space-between; gap: 8px; text-align: left; }
+#colList .btn span:first-child { min-width: 0; }
+#colList .count { flex: none; }
+#colList .count, #colPath { color: var(--muted); }
+#colHead { display: flex; align-items: center; gap: 8px; }
+#colName { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
+#colPath { margin: 4px 0 8px; font-size: 11px; overflow-wrap: anywhere; }
+#colDetail .actions, #colEdit { margin-bottom: 8px; }
+#colEdit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+#colEdit p { width: 100%; margin: 0; overflow-wrap: anywhere; }
+#colEdit input { flex: 1; min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); }
+select:focus-visible, #colEdit input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+#colGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 280px; overflow-y: auto; }
+.tile { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--surface); }
+.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.tile .noimg { padding: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
+.tile button { position: absolute; top: 3px; right: 3px; padding: 0 6px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; line-height: 18px; }
+.tile button.armed { background: var(--bad); }
+#colMsg { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
+#colMsg:empty { display: none; }
+#colMsg.bad { color: var(--bad); font-weight: 600; }
+
+footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; color: var(--muted); font-size: 11px; }
+footer .link { flex: none; font-size: 12px; }

package/extension/popup.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Backdraw</title>
+  <link rel="stylesheet" href="theme.css">
+  <link rel="stylesheet" href="popup.css">
+  <script src="i18n.js"></script>
+  <script src="settings.js"></script>
+</head>
+<body>
+  <header>
+    <img class="mascot" src="icons/mascot-96.png" srcset="icons/mascot-96.png 1x, icons/mascot-192.png 2x" width="36" height="36" alt="">
+    <div class="brand"><b>Backdraw</b><small><span data-i18n="version">Version</span> <span id="ver">?</span></small></div>
+    <button id="settingsBtn" class="icon" aria-expanded="false" aria-controls="settings" data-i18n-title="settings">
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        <path d="M4 6h9M19 6h1M4 12h3M13 12h7M4 18h11M21 18h-1"/><circle cx="16" cy="6" r="2.2"/><circle cx="10" cy="12" r="2.2"/><circle cx="18" cy="18" r="2.2"/>
+      </svg>
+    </button>
+  </header>
+  <section id="settings" class="settings" hidden>
+    <label><span data-i18n="language">Language</span>
+      <select id="language">
+        <option value="auto" data-i18n="optAuto">Auto</option><option value="en" data-i18n="langEnglish">English</option><option value="tr" data-i18n="langTurkish">Türkçe</option>
+      </select>
+    </label>
+    <label><span data-i18n="theme">Theme</span>
+      <select id="theme">
+        <option value="auto" data-i18n="optAuto">Auto</option><option value="light" data-i18n="themeLight">Light</option><option value="dark" data-i18n="themeDark">Dark</option>
+      </select>
+    </label>
+  </section>
+  <section id="wizard" hidden>
+    <h2><span data-i18n="setupTitle">Set up Backdraw</span><small id="setupCount"></small></h2>
+    <ol id="steps" class="steps"></ol>
+  </section>
+  <section id="overview" hidden>
+    <dl class="rows">
+      <dt data-i18n="bridge">Bridge</dt><dd id="conn">…</dd>
+      <dt data-i18n="chatgpt">ChatGPT</dt><dd id="chat">…</dd>
+      <dt data-i18n="project">Project</dt><dd id="project">…</dd>
+      <dt data-i18n="job">Job</dt><dd id="job">…</dd>
+    </dl>
+    <button id="pick" class="btn primary" hidden></button>
+    <details id="checklist"><summary data-i18n="setupChecklist">Setup</summary><ol id="doneSteps" class="steps"></ol></details>
+  </section>
+  <section id="collections" hidden>
+    <h2 data-i18n="collections">Collections</h2>
+    <div id="colList"></div>
+    <div id="colDetail" hidden>
+      <div id="colHead"><button id="colBack" class="btn" data-i18n="back">‹ Back</button><span id="colName"></span></div>
+      <div id="colPath"></div>
+      <div class="actions"><button id="colRename" class="btn" data-i18n="rename">Rename</button><button id="colDelete" class="btn danger" data-i18n="deleteCollection">Delete collection</button></div>
+      <div id="colEdit" hidden></div>
+      <div id="colGrid"></div>
+    </div>
+    <p id="colMsg"></p>
+  </section>
+  <footer><span data-i18n="footerNote">Images are made in a background tab; your active tab does not change.</span><button id="gallery" class="link" hidden data-i18n="openGallery">Open gallery</button></footer>
+  <script src="setup.js"></script>
+  <script src="popup.js"></script>
+</body>
+</html>

package/extension/popup.js

@@ -0,0 +1,376 @@
+const $ = id => document.getElementById(id);
+const { t } = i18n;
+const { STEP_TITLES, setupSteps, projectFromTab, sameProject, jobText, chatgptText } = backdrawSetup;
+const ACK_KEY = 'setupDone'; // chrome.storage.local: the user finished the checklist once
+const MARKS = { done: '✓', todo: '✗', wait: '…' };
+
+let status = null; // the worker's last popup:status answer
+let acknowledged = false;
+let tabProject = null; // a ChatGPT project open in the active tab
+let windowId = null;
+let shownSig = '';
+let shownJob = null;
+let collectionsLoaded = false;
+// What was started from this popup: the project list, a project being resolved, a failed check.
+const ui = { projects: null, projectsError: '', resolving: '', checkError: '' };
+
+function el(tag, props = {}, ...children) {
+  const e = Object.assign(document.createElement(tag), props);
+  e.append(...children.filter(c => c !== null && c !== undefined));
+  return e;
+}
+
+const hideHome = text => i18n.shortPath(text, status && status.home);
+const note = (text, cls = '') => el('p', { className: `note ${cls}` }, text);
+const busyNote = text => el('p', { className: 'note' }, el('span', { className: 'spinner' }), text);
+const button = (text, onclick, cls = 'btn') => el('button', { className: cls, textContent: text, onclick });
+const primary = (text, onclick) => button(text, onclick, 'btn primary');
+const actions = (...buttons) => el('div', { className: 'actions' }, ...buttons);
+
+async function ask(type, extra = {}) {
+  return chrome.runtime.sendMessage({ type, ...extra }).catch(e => ({ ok: false, error: e.message }));
+}
+
+function copyBox(text) {
+  const btn = el('button', { textContent: t('copy') });
+  btn.onclick = () => navigator.clipboard.writeText(text).then(() => {
+    btn.textContent = t('copied');
+    setTimeout(() => { btn.textContent = t('copy'); }, 1500);
+  }, () => {});
+  return el('div', { className: 'copy' }, el('code', { textContent: text }), btn);
+}
+
+// ---------------------------------------------------------------- setup steps
+
+function bridgeBody(state) {
+  if (state === 'done') return [note(t('bridgeOk'))];
+  return [
+    note(t('bridgeMissing')),
+    status && status.lastError ? note(t('chromeSays', { error: hideHome(status.lastError) }), 'err') : null,
+    note(t('bridgeFix')),
+    copyBox('node install.js'),
+    note(t('bridgeReload')),
+    actions(button(t('retry'), async () => { await ask('popup:reconnect'); refresh(); })),
+  ];
+}
+
+function chatgptBody(state) {
+  const c = (status && status.chatgpt) || {};
+  if (c.checking) return [busyNote(t('chatgptChecking'))];
+  const error = ui.checkError ? note(ui.checkError, 'err') : null;
+  const open = label => primary(label, () => chrome.tabs.create({ url: 'https://chatgpt.com/' }));
+  if (state === 'done') return [note(t('chatgptIn'))];
+  if (c.challenge) return [note(t('chatgptChallenge')), error, actions(open(t('openChatgpt')), button(t('checkAgain'), checkChatgpt))];
+  if (c.loggedIn === false) return [note(t('chatgptOut')), error, actions(open(t('openChatgptSignIn')), button(t('checkAgain'), checkChatgpt))];
+  return [note(t('chatgptUnknown')), error, actions(primary(t('checkNow'), checkChatgpt))];
+}
+
+function projectList() {
+  if (ui.resolving) return busyNote(ui.resolving);
+  if (ui.projects === 'loading') return busyNote(t('loadingProjects'));
+  if (!Array.isArray(ui.projects)) return null;
+  if (!ui.projects.length) return note(t('noProjects'));
+  return el('div', { className: 'projects' }, ...ui.projects.map(p => button(p.name, () => useProject(p))));
+}
+
+function projectBody(state) {
+  if (state === 'done') return [note(t('projectUsing', { name: status.project.name }))];
+  if (state === 'wait') return [note(t('projectNeedsBridge'))];
+  return [
+    note(t('projectGuide')),
+    actions(tabProject ? primary(t('useProject', { name: tabProject.name }), () => useProject(tabProject)) : null,
+      ui.projects ? null : button(t('chooseProject'), loadProjects)),
+    projectList(),
+    ui.projectsError ? note(ui.projectsError, 'err') : null,
+  ];
+}
+
+function readyBody(state) {
+  if (state === 'wait') return [note(t('readyWaiting'))];
+  return [
+    note(t('readyIntro')),
+    copyBox(t('examplePrompt')),
+    note(t('readyCollections')),
+    state === 'todo' ? actions(primary(t('gotIt'), acknowledge)) : null,
+  ];
+}
+
+const BODIES = { bridge: bridgeBody, chatgpt: chatgptBody, project: projectBody, ready: readyBody };
+
+function stepItem({ id, state }) {
+  return el('li', { className: `step ${state}` },
+    el('span', { className: 'mark', textContent: MARKS[state] }),
+    el('div', { className: 'step-body' }, el('div', { className: 'step-title', textContent: t(STEP_TITLES[id]) }), ...BODIES[id](state)));
+}
+
+// ---------------------------------------------------------------- what the buttons do
+
+// The worker opens chatgpt.com in a background tab, looks at the page (never at cookies) and closes it.
+async function checkChatgpt() {
+  ui.checkError = '';
+  status = { ...status, chatgpt: { ...(status && status.chatgpt), checking: true } };
+  render();
+  const r = await ask('popup:check-chatgpt');
+  if (!r || !r.ok) ui.checkError = hideHome((r && r.error) || t('errChatgptCheck'));
+  refresh();
+}
+
+async function loadProjects() {
+  Object.assign(ui, { projects: 'loading', projectsError: '' });
+  render();
+  const r = await ask('popup:projects');
+  Object.assign(ui, r && r.ok ? { projects: r.projects } : { projects: null, projectsError: hideHome((r && r.error) || t('selectFailed')) });
+  render();
+}
+
+// A project from the sidebar may come without its link: the worker opens it once to read it.
+async function useProject(p) {
+  let project = p.url ? { name: p.name, url: p.url } : null;
+  ui.projectsError = '';
+  if (!project) {
+    ui.resolving = `${p.name}…`;
+    render();
+    const r = await ask('popup:resolve-project', { name: p.name });
+    ui.resolving = '';
+    if (r && r.ok) project = { name: r.project.name, url: r.project.url };
+    else ui.projectsError = hideHome((r && r.error) || t('selectFailed'));
+  }
+  if (project) {
+    const r = await ask('popup:select', { project });
+    if (r && r.ok) ui.projects = null;
+    else ui.projectsError = hideHome((r && r.error) || t('selectFailed'));
+  }
+  setTimeout(refresh, 300);
+}
+
+async function acknowledge() {
+  acknowledged = true;
+  await chrome.storage.local.set({ [ACK_KEY]: true }).catch(() => {});
+  render();
+}
+
+// ---------------------------------------------------------------- the popup
+
+function renderStatus(s) {
+  const chat = s.chatgpt || {};
+  $('conn').textContent = s.connected ? t('connected') : t('notConnected');
+  $('conn').className = s.connected ? 'ok' : 'bad';
+  $('chat').className = chat.challenge || chat.loggedIn === false ? 'bad' : chat.loggedIn ? 'ok' : '';
+  $('chat').replaceChildren(...(chat.checking ? [el('span', { className: 'spinner' }), t('chatgptChecking')]
+    : [chatgptText(chat, t), chat.loggedIn === true && !chat.challenge ? null : el('button', { className: 'link', textContent: t('checkNow'), onclick: checkChatgpt })]
+      .filter(Boolean)));
+  $('project').textContent = s.project ? s.project.name : t('notSelected');
+  $('project').title = s.project ? s.project.url : '';
+  const pick = $('pick');
+  pick.hidden = !(s.connected && tabProject && !sameProject(s.project, tabProject));
+  pick.textContent = tabProject ? t('useProject', { name: tabProject.name }) : '';
+  pick.onclick = () => useProject(tabProject);
+}
+
+function render() {
+  const s = status || {};
+  const setup = setupSteps(status, acknowledged);
+  const chat = s.chatgpt || {};
+  $('ver').textContent = s.version || '?';
+  $('wizard').hidden = !setup.wizard;
+  $('overview').hidden = setup.wizard;
+  // Rebuilt only when something shown changed, so a list or a "Copied" note isn't reset by the polling.
+  const sig = JSON.stringify([s.connected, s.lastError, s.project, chat.loggedIn, chat.challenge, chat.checking, s.home,
+    tabProject, acknowledged, ui, i18n.lang()]);
+  if (sig !== shownSig) {
+    shownSig = sig;
+    $('setupCount').textContent = t('setupCount', { done: setup.done, total: setup.steps.length });
+    $(setup.wizard ? 'steps' : 'doneSteps').replaceChildren(...setup.steps.map(stepItem));
+    $(setup.wizard ? 'doneSteps' : 'steps').replaceChildren();
+    renderStatus(s);
+  }
+  // Rebuilt only when its text changes, so the spinner keeps turning between polls.
+  const jobLine = s.current ? jobText(s.current, t) : t('idle');
+  if (jobLine !== shownJob) {
+    shownJob = jobLine;
+    $('job').replaceChildren(...(s.current ? [el('span', { className: 'spinner' })] : []), jobLine);
+  }
+  $('collections').hidden = !s.connected;
+  if (s.connected && !collectionsLoaded) {
+    collectionsLoaded = true;
+    showCollections();
+  }
+}
+
+async function refresh() {
+  try { status = await chrome.runtime.sendMessage({ type: 'popup:status' }); } catch { status = null; }
+  render();
+}
+
+function setupSettings(prefs) {
+  $('language').value = i18n.PREFERENCES.includes(prefs[i18n.LANGUAGE_KEY]) ? prefs[i18n.LANGUAGE_KEY] : 'auto';
+  $('theme').value = backdrawSettings.theme();
+  $('settingsBtn').onclick = () => {
+    const open = $('settings').hidden;
+    $('settings').hidden = !open;
+    $('settingsBtn').setAttribute('aria-expanded', String(open));
+  };
+  $('language').onchange = () => backdrawSettings.set(i18n.LANGUAGE_KEY, $('language').value);
+  $('theme').onchange = () => {
+    backdrawSettings.applyTheme($('theme').value);
+    backdrawSettings.set(backdrawSettings.THEME_KEY, $('theme').value);
+  };
+  i18n.watch(() => {
+    document.documentElement.lang = i18n.lang();
+    i18n.apply();
+    render();
+    if (collectionsLoaded && !openCol) showCollections();
+  });
+}
+
+// The side panel (gallery) only exists when the manifest declares one.
+function setupGallery() {
+  if (!chrome.sidePanel || !chrome.runtime.getManifest().side_panel || windowId === null) return;
+  $('gallery').hidden = false;
+  // Opened straight from the click: Chrome opens a side panel only for a user gesture.
+  $('gallery').onclick = () => chrome.sidePanel.open({ windowId }).then(() => window.close(), () => {});
+}
+
+async function start() {
+  await backdrawSettings.ready;
+  const prefs = await chrome.storage.local.get([i18n.LANGUAGE_KEY, ACK_KEY]).catch(() => ({}));
+  acknowledged = !!prefs[ACK_KEY];
+  document.documentElement.lang = i18n.lang();
+  i18n.apply();
+  setupSettings(prefs);
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }).catch(() => []);
+  tabProject = projectFromTab(tab);
+  windowId = tab ? tab.windowId : null;
+  setupGallery();
+  await refresh();
+  setInterval(refresh, 1500);
+}
+
+start();
+
+// ---------------------------------------------------------------- reference collections
+
+let openCol = null; // the collection shown in detail, or null for the list
+
+async function hostCall(method, params = {}) {
+  const r = await chrome.runtime.sendMessage({ type: 'host:call', method, params }).catch(e => ({ ok: false, error: e.message }));
+  if (!r || !r.ok) throw new Error(hideHome((r && r.error) || t('errNotConnected')));
+  return r.result;
+}
+
+function colMessage(text, bad) {
+  $('colMsg').textContent = text || '';
+  $('colMsg').className = bad ? 'bad' : '';
+}
+
+async function showCollections(text, bad) {
+  openCol = null;
+  $('colDetail').hidden = true;
+  $('colList').hidden = false;
+  let list;
+  try {
+    list = await hostCall('list_collections', { summary: true });
+  } catch (e) {
+    $('colList').replaceChildren();
+    return colMessage(e.message, true);
+  }
+  $('colList').replaceChildren(...list.map(c => el('button', { className: 'btn', onclick: () => showCollection(c) },
+    el('span', { textContent: c.name }), el('span', { className: 'count', textContent: i18n.images(c.count) }))));
+  colMessage(text || (list.length ? '' : t('noCollections')), bad);
+}
+
+async function showCollection(c) {
+  openCol = c;
+  $('colList').hidden = true;
+  $('colDetail').hidden = false;
+  $('colEdit').hidden = true;
+  $('colName').textContent = c.name;
+  $('colPath').textContent = hideHome(c.path || '');
+  $('colGrid').replaceChildren();
+  colMessage(t('loading'));
+  try {
+    // Thumbnails come a page at a time (each answer from the host has to stay under 1 MB).
+    for (let offset = 0; offset !== null && openCol === c;) {
+      const page = await hostCall('collection_thumbs', { name: c.name, offset });
+      if (openCol !== c) return;
+      $('colGrid').append(...page.thumbs.map(th => thumbTile(c, th)));
+      offset = Number.isInteger(page.next) ? page.next : null;
+    }
+    colMessage('');
+  } catch (e) {
+    colMessage(e.message, true);
+  }
+}
+
+// The first click on × arms it; a second one within 3 s deletes the file.
+function thumbTile(c, th) {
+  const pic = th.data ? el('img', { src: `data:${th.mime};base64,${th.data}`, alt: th.file, title: th.file })
+    : el('div', { className: 'noimg', textContent: `${th.file} (${t('noThumb')})` });
+  const del = el('button', { textContent: '×', title: t('removeImage') });
+  const tile = el('div', { className: 'tile' }, pic, del);
+  let armed = null;
+  del.onclick = async () => {
+    if (!armed) {
+      del.classList.add('armed');
+      del.title = t('confirmRemoveImage');
+      armed = setTimeout(() => { armed = null; del.classList.remove('armed'); del.title = t('removeImage'); }, 3000);
+      return;
+    }
+    clearTimeout(armed);
+    del.disabled = true;
+    try {
+      const r = await hostCall('delete_collection_image', { name: c.name, file: th.file });
+      c.count = r.count;
+      tile.remove();
+      colMessage('');
+    } catch (e) {
+      del.disabled = false;
+      colMessage(e.message, true);
+    }
+  };
+  return tile;
+}
+
+$('colBack').onclick = () => showCollections();
+
+$('colRename').onclick = () => {
+  const c = openCol;
+  const input = el('input', { value: c.name });
+  const save = el('button', { className: 'btn primary', textContent: t('save') });
+  const cancel = el('button', { className: 'btn', textContent: t('cancel'), onclick: () => { $('colEdit').hidden = true; } });
+  save.onclick = async () => {
+    try {
+      const r = await hostCall('rename_collection', { name: c.name, newName: input.value });
+      Object.assign(c, { name: r.name, path: r.path });
+      $('colName').textContent = r.name;
+      $('colPath').textContent = hideHome(r.path);
+      $('colEdit').hidden = true;
+      colMessage('');
+    } catch (e) {
+      colMessage(e.message, true);
+    }
+  };
+  input.onkeydown = e => { if (e.key === 'Enter') save.click(); else if (e.key === 'Escape') cancel.click(); };
+  $('colEdit').replaceChildren(input, save, cancel);
+  $('colEdit').hidden = false;
+  input.select();
+};
+
+$('colDelete').onclick = () => {
+  const c = openCol;
+  const yes = el('button', { className: 'btn danger', textContent: t('delete') });
+  const no = el('button', { className: 'btn', textContent: t('cancel'), onclick: () => { $('colEdit').hidden = true; } });
+  yes.onclick = async () => {
+    yes.disabled = true;
+    try {
+      const r = await hostCall('delete_collection', { name: c.name });
+      const left = r.failed.length ? r.failed : r.left;
+      showCollections(left.length ? t('leftover', { files: left.join(', ') }) : '', left.length > 0);
+    } catch (e) {
+      yes.disabled = false;
+      colMessage(e.message, true);
+    }
+  };
+  $('colEdit').replaceChildren(el('p', { textContent: t('confirmDelete', { name: c.name, images: i18n.images(c.count) }) }), yes, no);
+  $('colEdit').hidden = false;
+};

package/extension/settings.js

@@ -0,0 +1,35 @@
+// The theme and language picked in the popup (chrome.storage.local "theme" and "language"), applied
+// to an extension page. Loaded in <head> after i18n.js, so the colours are set before the first paint.
+(() => {
+  const THEMES = ['auto', 'light', 'dark'];
+  const THEME_KEY = 'theme';
+  const COPY = 'backdraw.theme'; // chrome.storage answers after the first paint; localStorage doesn't
+  const root = document.documentElement;
+
+  function applyTheme(theme) {
+    root.dataset.theme = THEMES.includes(theme) ? theme : 'auto';
+    try { localStorage.setItem(COPY, root.dataset.theme); } catch {}
+    return root.dataset.theme;
+  }
+
+  let early = null;
+  try { early = localStorage.getItem(COPY); } catch {}
+  root.dataset.theme = THEMES.includes(early) ? early : 'auto';
+
+  const ready = Promise.all([
+    chrome.storage.local.get(THEME_KEY).then(r => r[THEME_KEY], () => undefined),
+    i18n.load(),
+  ]).then(([theme]) => {
+    applyTheme(theme);
+    root.lang = i18n.lang();
+  });
+
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === 'local' && changes[THEME_KEY]) applyTheme(changes[THEME_KEY].newValue);
+  });
+
+  const set = (key, value) => chrome.storage.local.set({ [key]: value });
+  const theme = () => root.dataset.theme;
+
+  globalThis.backdrawSettings = { THEMES, THEME_KEY, ready, set, theme, applyTheme };
+})();