From 8fda203d28e7f76aafa05960fde96bca90050977 Mon Sep 17 00:00:00 2001 From: pewdiepie-archdaemon Date: Tue, 13 Oct 2026 13:42:33 +0000 Subject: [PATCH] feat(ui): chat frontend, model picker, streaming, admin, a11y Preview/UI work: chat renderer, streaming/think-trace, model picker (instant-open/refresh-backoff), admin panel, a11y, gallery landing. Source: vendor/photocraft (ad1cff44) static files, 3-way merged onto upstream/dev (a8c147b2). Resolution policy in pr_work/D_conflicts.md. Co-Authored-By: Claude Opus 5.5 --- static/css/00-tokens.css | 19 +++ static/css/04-memory.css | 1 + static/css/12-gallery.css | 6 + static/js/a11y.js | 62 +++++++- static/js/calendar.js | 18 +-- static/js/chat.js | 70 ++++++++- static/js/codeRunner.js | 6 +- static/js/colorPicker.js | 15 ++ static/js/cookbook-hwfit.js | 6 +- static/js/cookbook.js | 4 +- static/js/cookbookServe.js | 13 +- static/js/document.js | 228 +++++++++++++++++------------- static/js/documentOutline.js | 1 + static/js/emailLibrary/index.js | 41 +++++- static/js/gallery.js | 104 +++++++++++++- static/js/models.js | 8 +- static/js/notes.js | 8 +- static/js/research/jobs.js | 5 +- static/js/sidebar-layout.js | 3 + static/js/signature.js | 2 +- static/js/slashCommands.js | 27 +++- static/js/streamingRenderer.js | 23 ++- static/js/tasks.js | 2 +- static/js/ui.js | 32 +++++ static/lib/html2pdf.bundle.min.js | 3 + static/lib/qrcode.min.js | 8 ++ 26 files changed, 571 insertions(+), 144 deletions(-) create mode 100644 static/lib/html2pdf.bundle.min.js create mode 100644 static/lib/qrcode.min.js diff --git a/static/css/00-tokens.css b/static/css/00-tokens.css index e502f7670..734303b2f 100644 --- a/static/css/00-tokens.css +++ b/static/css/00-tokens.css @@ -130,11 +130,30 @@ body { @font-face { font-family: 'Fira Code'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2'); } @font-face { font-family: 'Fira Code'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-SemiBold.woff2') format('woff2'); } +/* GohuFont is the default UI face across themes; keep the shipped font local + so the default is available before custom-font discovery completes. */ +@font-face { font-family: 'GohuFont'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/custom/GohuFont.ttf') format('truetype'); } /* Self-hosted OpenDyslexic — dyslexia-friendly accessibility font option (SIL OFL 1.1) */ @font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2'); } +/* Self-hosted editor text fonts (SIL OFL 1.1). These are bundled so the text + tool renders distinct, expected faces on every device — phones (Android/iOS) + do not ship Arial/Verdana/Georgia/Times/Courier/Impact, which previously + collapsed every font choice onto the same system fallback. */ +@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Regular.woff2') format('woff2'); } +@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Medium.woff2') format('woff2'); } +@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2'); } +@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/Roboto-Regular.woff2') format('woff2'); } +@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/Roboto-Bold.woff2') format('woff2'); } +@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); } +@font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/PlayfairDisplay-Bold.woff2') format('woff2'); } +@font-face { font-family: 'Lobster'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/Lobster-Regular.woff2') format('woff2'); } +@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/BebasNeue-Regular.woff2') format('woff2'); } +@font-face { font-family: 'Roboto Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/RobotoMono-Regular.woff2') format('woff2'); } +@font-face { font-family: 'Roboto Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('/static/fonts/RobotoMono-Bold.woff2') format('woff2'); } + /* Code block baseline */ pre, code, .hljs { font-size: 11px; diff --git a/static/css/04-memory.css b/static/css/04-memory.css index 71b2537bd..67cb7ca16 100644 --- a/static/css/04-memory.css +++ b/static/css/04-memory.css @@ -704,6 +704,7 @@ textarea.memory-add-input { #serve-bulk-bar, #gallery-bulk-bar, #gallery-editor-drafts-bulk, +#notes-bulk-bar, #memory-modal .memory-bulk-bar { padding-right: 18px; } diff --git a/static/css/12-gallery.css b/static/css/12-gallery.css index 16f47e863..dad05ec52 100644 --- a/static/css/12-gallery.css +++ b/static/css/12-gallery.css @@ -90,6 +90,12 @@ .lib-tabs, .gallery-tabs, .preset-tabs { + /* A flex-item tab strip defaults to min-width:auto, so it grows to its + content width inside a narrow modal and the end tabs get clipped by the + modal's overflow instead of scrolling. min-width:0 lets the strip shrink + to the container so the overflow-x:auto below actually engages. */ + min-width: 0; + max-width: 100%; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; diff --git a/static/js/a11y.js b/static/js/a11y.js index 814472d94..f44ada39d 100644 --- a/static/js/a11y.js +++ b/static/js/a11y.js @@ -18,7 +18,13 @@ 'use strict'; // Click-as-button rows we want reachable by keyboard. - var ROW_SELECTOR = ['#sidebar .list-item', '#user-bar-profile'].join(','); + var ROW_SELECTOR = [ + '#sidebar .list-item', + '#user-bar-profile', + '.sidebar-brand', + '.export-dropdown-item', + '.dropdown-item' + ].join(','); // Native interactive descendants. If a row contains one of these we must // NOT give the row role="button" — a button inside a button is invalid @@ -55,6 +61,31 @@ (root || document).querySelectorAll(ROW_SELECTOR).forEach(enhanceRow); } + // Settings form labels are written as + // with the control as a sibling/descendant, but are not associated via for/id, + // so screen readers cannot name the inputs. Associate each label with its + // control when the mapping is unambiguous (a single form control per row). + var settingsLabelSeq = 0; + function associateSettingsLabels(root) { + (root || document).querySelectorAll('.settings-label').forEach(function (label) { + if (label.hasAttribute('for')) return; + var control = null; + var sib = label.nextElementSibling; + if (sib && /^(INPUT|SELECT|TEXTAREA)$/.test(sib.tagName)) { + control = sib; + } else { + var row = label.closest('.settings-row') || label.parentElement; + if (row) { + var controls = row.querySelectorAll('input,select,textarea'); + if (controls.length === 1) control = controls[0]; + } + } + if (!control || control.closest('label')) return; + if (!control.id) control.id = 'a11y-settings-' + (++settingsLabelSeq); + if (!control.getAttribute('aria-label')) label.setAttribute('for', control.id); + }); + } + // ---- Modal dialogs ----------------------------------------------------- // Odysseus modals are plain
boxes. Marking // them as ARIA dialogs lets screen readers announce them as dialogs and @@ -118,9 +149,38 @@ el.click(); }); + // Disclosure buttons: keep aria-expanded in sync with their controlled + // menu/dropdown, regardless of which module toggles its visibility. + var DISCLOSURE_MAP = [ + { button: 'session-sort-btn', menu: 'session-sort-dropdown' }, + { button: 'export-dl-btn', menu: 'export-dropdown-menu' }, + { button: 'overflow-plus-btn', menu: 'overflow-menu' } + ]; + + function syncDisclosures() { + DISCLOSURE_MAP.forEach(function (d) { + var btn = document.getElementById(d.button); + if (!btn) return; + var menu = document.getElementById(d.menu); + var open = false; + if (menu) { + var cs = window.getComputedStyle(menu); + open = cs.display !== 'none' && menu.offsetWidth > 0; + } + btn.setAttribute('aria-expanded', open ? 'true' : 'false'); + }); + } + function init() { enhanceAll(document); enhanceModals(document); + associateSettingsLabels(document); + + // Any click (the dropdown toggles, outside-click closes, etc.) may change + // a disclosure's open state; re-sync on the next tick. + document.addEventListener('click', function () { + if (window.setTimeout) setTimeout(syncDisclosures, 0); + }); // Sidebar content is re-rendered as the user navigates (session lists, // tool sub-rows, etc.). Watch for new rows and enhance them too. diff --git a/static/js/calendar.js b/static/js/calendar.js index ab25c3a9b..006a4e1e1 100644 --- a/static/js/calendar.js +++ b/static/js/calendar.js @@ -499,7 +499,7 @@ function _eventSourceHtml(ev) { // calendar name). The calendar-initial badge alone is multi-calendar UI. if (ev.source_email_uid && ev.source_email_folder) { const href = `#email=${encodeURIComponent(ev.source_email_folder)}:${encodeURIComponent(ev.source_email_uid)}`; - return ``; + return ``; } if (_calendars.length <= 1) return ''; const cal = _calendars.find(c => c.href === ev.calendar_href); @@ -764,7 +764,7 @@ function _getModal() {

Calendar

- +
@@ -897,7 +897,7 @@ function _updateDaySearchResults() { // Re-wire click handlers on the newly-inserted event rows. dayDetail.querySelectorAll('.cal-event-item').forEach(it => { it.addEventListener('click', (e) => { - if (e.target.closest('.cal-event-more, .cal-event-source')) return; + if (e.target.closest('.cal-event-more, .cal-event-source, .cal-event-link')) return; const ev = _events.find(x => x.uid === it.dataset.uid); if (ev) _showEventForm(ev); }); @@ -2230,7 +2230,7 @@ async function _renderAgenda() { _wireAll(body); _wireQuickDelete(body); body.querySelectorAll('.cal-agenda-event').forEach(el => el.addEventListener('click', (e) => { - if (e.target.closest('.cal-event-more, .cal-event-source')) return; + if (e.target.closest('.cal-event-more, .cal-event-source, .cal-event-link')) return; const ev = _events.find(e => e.uid === el.dataset.uid); if (ev) _showEventForm(ev); })); @@ -2295,7 +2295,7 @@ async function _renderSearch() { _wireAll(body); _wireQuickDelete(body); body.querySelectorAll('.cal-agenda-event').forEach(el => el.addEventListener('click', (e) => { - if (e.target.closest('.cal-event-more, .cal-event-source')) return; + if (e.target.closest('.cal-event-more, .cal-event-source, .cal-event-link')) return; const ev = _allEvents[el.dataset.uid]; if (ev) _showEventForm(ev); })); @@ -2984,7 +2984,7 @@ function _wireAll(body) { _render(); })); body.querySelectorAll('.cal-event-item').forEach(it => it.addEventListener('click', (e) => { - if (e.target.closest('.cal-event-more, .cal-event-source')) return; + if (e.target.closest('.cal-event-more, .cal-event-source, .cal-event-link')) return; const ev = _events.find(e => e.uid === it.dataset.uid); if (ev) _showEventForm(ev); })); @@ -4170,7 +4170,7 @@ function _locHTML(loc, description = '') { if (meetingMatch && !/https?:\/\/(?:teams\.microsoft\.com|(?:[a-z0-9-]+\.)?zoom\.us|meet\.google\.com|(?:[a-z0-9-]+\.)?webex\.com|meet\.jit\.si)\//i.test(String(loc))) { const meetingUrl = meetingMatch[0].replace(/[.,);\]]+$/, ''); const safeMeetingUrl = _e(meetingUrl); - return `${safeMeetingUrl}`; + return `${safeMeetingUrl}`; } const urlRe = /(https?:\/\/[^\s<>"']+)/gi; if (urlRe.test(loc)) { @@ -4182,14 +4182,14 @@ function _locHTML(loc, description = '') { const url = match[0]; html += _e(String(loc).slice(offset, match.index)); const safe = _e(url); - html += `${safe}`; + html += `${safe}`; offset = match.index + url.length; } return (html + _e(String(loc).slice(offset))).replace(/\n/g, '
'); } // No URL — link the whole thing to OpenStreetMap. const mapUrl = 'https://www.openstreetmap.org/search?query=' + encodeURIComponent(loc); - return `${_e(loc)}`; + return `${_e(loc)}`; } // ── Open / Close ── diff --git a/static/js/chat.js b/static/js/chat.js index bf779fa00..018c18ea1 100644 --- a/static/js/chat.js +++ b/static/js/chat.js @@ -44,6 +44,66 @@ import { invalidateSettings } from './appConfig.js'; const RUN_ID_ABORT_GRACE_MS = 2000; // timeout waits this long for a run-id header before hard-aborting const RESEARCH_SVG = ''; + // URL of the photo attached to the current turn (chat uploads are served at + // /api/upload/). Used by the "Open in editor & apply" action. + function _currentAttachedImageUrl() { + try { + const box = document.getElementById('chat-history'); + if (!box) return null; + // Use the newest user bubble that carries an image preview. Note + // ':last-of-type' is wrong here (it selects the last sibling of the + // element type, and the assistant reply follows the user bubble), so + // walk the user bubbles from the end instead. + const users = box.querySelectorAll('.msg-user'); + for (let i = users.length - 1; i >= 0; i--) { + const img = users[i].querySelector('.attach-image-preview[data-file-id] img'); + if (img && img.getAttribute('src')) return img.getAttribute('src'); + } + // Fall back to any attachment preview/card in the history (newest). + const previews = box.querySelectorAll( + '.attach-image-preview[data-file-id], .attach-card[data-file-id]' + ); + if (previews.length) { + const last = previews[previews.length - 1]; + const id = last.dataset ? last.dataset.fileId : null; + if (id) return API_BASE + '/api/upload/' + id; + } + return null; + } catch (_) { + return null; + } + } + + // Render the one-click "Open in editor & apply" button on a photo-edit reply + // that had no open editor (photo_editor_action kind 'open_and_apply'). + function renderPhotoEditorApplyButton(container, action) { + if (!container || !action || action.kind !== 'open_and_apply') return; + if (container.querySelector('.chat-open-in-editor-btn')) return; + const btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'chat-open-in-editor-btn'; + btn.textContent = 'Open in editor & apply'; + btn.style.cssText = 'margin-top:8px;padding:6px 12px;border-radius:6px;border:1px solid rgba(120,120,120,0.4);background:transparent;color:inherit;cursor:pointer;font:inherit;'; + btn.addEventListener('click', async () => { + btn.disabled = true; + try { + if (typeof window.gePhotoEditorApply !== 'function') { + await import('/static/js/galleryEditor.js'); + } + await window.gePhotoEditorApply({ + imageId: null, + imageUrl: _currentAttachedImageUrl(), + prompt: action.prompt || '', + displayName: 'Chat edit', + }); + } catch (err) { + console.error('[chat] open_and_apply failed', err); + btn.disabled = false; + } + }); + container.appendChild(btn); + } + let API_BASE = ''; let currentAbort = null; let isStreaming = false; @@ -4027,6 +4087,7 @@ import { invalidateSettings } from './appConfig.js'; threadAbove.classList.add('has-bottom'); } terminalFinalResponseRendered = _renderTerminalAnswer(finalText, '', json.render_owner, json.replacement_scope); + if (json.photo_editor_action) renderPhotoEditorApplyButton(roundHolder, json.photo_editor_action); lastContentRoundHolder = roundHolder || lastContentRoundHolder; uiModule.scrollHistory(); continue; @@ -6081,7 +6142,13 @@ import { invalidateSettings } from './appConfig.js'; cache: 'no-store', }); if (!_getForegroundStreamState() || _backgroundStreams.has(sid)) return; - if (res.status !== 404) return; + // The server now reports "no active stream" as 200 {status:"idle"} (an + // older server used 404); a body with status "streaming" means it is NOT + // stale. Accept both so the watchdog keeps working across deploys. + let _probe = null; + try { _probe = await res.json(); } catch (_) { _probe = null; } + const _noActiveStream = res.status === 404 || !_probe || _probe.status !== 'streaming'; + if (!_noActiveStream) return; console.warn('[stream-watchdog] Local stream was stale and server has no active stream. Unlocking composer.'); if (active.abortCtrl && !active.abortCtrl.signal.aborted) { @@ -6443,6 +6510,7 @@ import { invalidateSettings } from './appConfig.js'; gotDelta = true; try { spinner.destroy(); } catch (_) {} renderDelta(json); + if (json.photo_editor_action) renderPhotoEditorApplyButton(roundHolder, json.photo_editor_action); replayRendering.settle(); } else if (json.delta) { if (!replayRendering.accepts(json)) continue; diff --git a/static/js/codeRunner.js b/static/js/codeRunner.js index fd896883d..c9ea1ac9d 100644 --- a/static/js/codeRunner.js +++ b/static/js/codeRunner.js @@ -390,11 +390,11 @@ export function runHTML(code, panel) { * Main entry point — called when a Run button is clicked */ export function run(btn) { - const code = btn.getAttribute('data-code'); - const lang = (btn.getAttribute('data-lang') || '').toLowerCase(); - const pre = btn.closest('pre'); if (!pre) return; + const codeEl = pre.querySelector('code'); + const code = codeEl ? codeEl.textContent : btn.getAttribute('data-code'); + const lang = (btn.getAttribute('data-lang') || '').toLowerCase(); const panel = getOrCreatePanel(pre); if (!code || !code.trim()) { diff --git a/static/js/colorPicker.js b/static/js/colorPicker.js index e28424a3b..e90e85b44 100644 --- a/static/js/colorPicker.js +++ b/static/js/colorPicker.js @@ -96,6 +96,21 @@ function computeSuggestions() { ]; } +// ── Reusable helpers for hosts that surface swatches inline ────────── +// (e.g. the editor's SWATCHES panel showing suggestions + recents). +export function getRecentColors() { return getRecents(); } +export function recordRecentColor(hex) { addRecent(hex); } +export function suggestColorsFor(hex) { + const { h, s, v } = hexToHsv(hex || '#000000'); + return [ + { hex: hsvToHex(h + 180, s, v), label: 'Complement' }, + { hex: hsvToHex(h + 30, s, v), label: 'Analogous +30°' }, + { hex: hsvToHex(h - 30, s, v), label: 'Analogous -30°' }, + { hex: hsvToHex(h + 150, s, v), label: 'Split-complement' }, + { hex: hsvToHex(h, s, clamp(v > 50 ? v - 30 : v + 30, 10, 95)), label: 'Tone shift' }, + ]; +} + // ── Popover build ───────────────────────────────────────────────────── function buildPopover() { const p = document.createElement('div'); diff --git a/static/js/cookbook-hwfit.js b/static/js/cookbook-hwfit.js index 6943330c9..57853ccb3 100644 --- a/static/js/cookbook-hwfit.js +++ b/static/js/cookbook-hwfit.js @@ -2083,15 +2083,15 @@ export function _expandModelRow(row, modelData) { const _HWFIT_ENGINE_GLYPHS = { '': '', vllm: '', - sglang: '', + sglang: '', mlx: '', llamacpp: '', - ollama: '', + ollama: '', diffusers: '', }; function _hwfitEngineGlyph(value) { - return _HWFIT_ENGINE_GLYPHS[value] ?? _HWFIT_ENGINE_GLYPHS['']; + return _HWFIT_ENGINE_GLYPHS[value] || _HWFIT_ENGINE_GLYPHS['']; } const _HWFIT_USECASE_GLYPHS = { diff --git a/static/js/cookbook.js b/static/js/cookbook.js index 0788832f6..a89de68c5 100644 --- a/static/js/cookbook.js +++ b/static/js/cookbook.js @@ -1167,12 +1167,12 @@ async function _fetchDependencies() { // icon (the name alone is fine for librosa, hf_transfer, etc.). const _DEP_GLYPHS = { vllm: '', - sglang: '', + sglang: '', mlx_lm: '', mflux: '', boogu_image_mlx: '', llama_cpp: '', - ollama: '', + ollama: '', diffusers: '', krea_diffusers: '', sam_mask: '', diff --git a/static/js/cookbookServe.js b/static/js/cookbookServe.js index f9511ed60..b72b7e647 100644 --- a/static/js/cookbookServe.js +++ b/static/js/cookbookServe.js @@ -1498,9 +1498,10 @@ function _rerenderCachedModels() { const _ggufOptions = _ggufChoices.map(f => `` ).join(''); - const _defaultServeModel = (m.is_local_dir && m.path ? `${m.path}/${repo}` : repo); + const _minimaxM3Snapshot = '/home/pewds/.cache/huggingface/hub/models--cyankiwi--MiniMax-M3-AWQ-INT4/snapshots/4082acbbec1236d21828d55b6bb0fe02ade4ab5b'; + const _defaultServeModel = _isMiniMaxM3 ? _minimaxM3Snapshot : (m.is_local_dir && m.path ? `${m.path}/${repo}` : repo); const _savedModelPath = String(svm('model_path', _defaultServeModel) || '').trim(); - const _modelPathValue = _savedModelPath || _defaultServeModel; + const _modelPathValue = _isMiniMaxM3 && (!_savedModelPath || _savedModelPath === repo) ? _minimaxM3Snapshot : _savedModelPath; const _defaultServedModelName = _isMiniMaxM3 ? repo : ''; // Build save slots const _allPresets = _loadPresets(); @@ -2210,11 +2211,11 @@ function _rerenderCachedModels() { // custom picker so the dropdown lists "[V] vLLM", "[⚡] SGLang", etc. const _BACKEND_GLYPHS = { vllm: '', - sglang: '', + sglang: '', mlx: '', mlx_image: '', llamacpp: '', - ollama: '', + ollama: '', diffusers: '', }; @@ -2234,7 +2235,7 @@ function _rerenderCachedModels() { const opt = _backendSource?.querySelector(`option[value="${CSS.escape(v)}"]`); const label = opt ? opt.textContent : v; if (_backendBtnLabel) _backendBtnLabel.textContent = label; - if (_backendBtnIconSlot) _backendBtnIconSlot.innerHTML = _BACKEND_GLYPHS[v] ?? _BACKEND_GLYPHS.vllm; + if (_backendBtnIconSlot) _backendBtnIconSlot.innerHTML = _BACKEND_GLYPHS[v] || _BACKEND_GLYPHS.vllm; } function _renderBackendMenu() { @@ -2242,7 +2243,7 @@ function _rerenderCachedModels() { const items = Array.from(_backendSource.options).map(o => ({ value: o.value, label: o.textContent })); _backendMenu.innerHTML = items.map(it => ` `).join(''); diff --git a/static/js/document.js b/static/js/document.js index a3e01dc45..704d1499e 100644 --- a/static/js/document.js +++ b/static/js/document.js @@ -1996,6 +1996,17 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; // Active drop mode for the PDF toolbar — toolbar buttons set this; the // next click on a page consumes it. null means clicks do nothing. let _pdfDropMode = null; + let _pdfAnnotationDragging = false; + function _setPdfAnnotationDragging(dragging) { + _pdfAnnotationDragging = dragging; + for (const ref of _pdfPaneAnnotationsByDoc.get(activeDocId) || []) { + ref._refreshHandles?.(); + if (dragging) { + const menu = ref.wrap?.querySelector('.pdf-annotation-text-menu'); + if (menu) menu.style.display = 'none'; + } + } + } // Per-doc last-used line spacing for text annotations. Once the user picks // 1.6 for one box, every text box dropped after that defaults to 1.6. const _pdfLastLineHeight = new Map(); // docId -> number @@ -2290,8 +2301,16 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; // active (toolbar buttons set the mode). Without a mode, clicking does // nothing — keeps page interactions predictable so users don't get // surprise boxes from stray clicks. + const isBlankPageTarget = target => target === pageWrap + || (target?.tagName === 'IMG' && target.parentElement === pageWrap); + let placementStartedOnPage = false; + pageWrap.addEventListener('pointerdown', ev => { + placementStartedOnPage = isBlankPageTarget(ev.target); + }, true); pageWrap.addEventListener('click', (ev) => { - if (ev.target !== pageWrap && ev.target.tagName !== 'IMG') return; + const canPlace = placementStartedOnPage; + placementStartedOnPage = false; + if (!canPlace || !isBlankPageTarget(ev.target) || _pdfAnnotationDragging) return; if (!_pdfDropMode) return; const rect = pageWrap.getBoundingClientRect(); const xPct = ((ev.clientX - rect.left) / rect.width) * 100; @@ -2423,9 +2442,11 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; // Set handle visibility together; clicking/tapping the annotation itself // brings hidden controls back. + let handlesRequested = _isTouch; const _setHandlesVisible = (show) => { + if (!_pdfAnnotationDragging) handlesRequested = show; const dismissed = wrap.dataset.controlsDismissed === '1'; - const v = (show && !dismissed) ? '' : 'none'; + const v = (show && !dismissed && !_pdfAnnotationDragging) ? '' : 'none'; del.style.display = v; grip.style.display = v; resize.style.display = v; @@ -2446,7 +2467,8 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; _setHandlesVisible(true); }); - const ref = { id: ann.id, page: ann.page, x: ann.x, y: ann.y, w: ann.w, h: ann.h, el: input, wrap, kind, _setHandlesVisible }; + const ref = { id: ann.id, page: ann.page, x: ann.x, y: ann.y, w: ann.w, h: ann.h, el: input, wrap, kind, _setHandlesVisible, + _refreshHandles: () => _setHandlesVisible(handlesRequested) }; if (kind === 'check') { // Stamp checkmark — value is fixed, nothing to listen for. @@ -2568,7 +2590,12 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; ref._autoGrow = _autoGrow; } + del.addEventListener('pointerdown', ev => { + ev.preventDefault(); + ev.stopPropagation(); + }); del.addEventListener('click', (ev) => { + ev.preventDefault(); ev.stopPropagation(); _pushPdfUndoSnapshot(); _removeAnnotation(ref); @@ -2580,6 +2607,7 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; ev.stopPropagation(); _pushPdfUndoSnapshot(); try { grip.setPointerCapture(ev.pointerId); } catch (_) {} + _setPdfAnnotationDragging(true); // Hide the × and resize handles while moving so they don't obscure the // box — easier to see exactly where it lands. Restored on release. del.style.display = 'none'; @@ -2598,11 +2626,14 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; const onUp = () => { document.removeEventListener('pointermove', onMove); document.removeEventListener('pointerup', onUp); + document.removeEventListener('pointercancel', onUp); + _setPdfAnnotationDragging(false); _setHandlesVisible(true); _schedulePdfPaneSave(); }; document.addEventListener('pointermove', onMove); document.addEventListener('pointerup', onUp); + document.addEventListener('pointercancel', onUp); }); // Drag bottom-right corner to resize. Width/height stored as percentages. @@ -2611,6 +2642,7 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; ev.stopPropagation(); _pushPdfUndoSnapshot(); try { resize.setPointerCapture(ev.pointerId); } catch (_) {} + _setPdfAnnotationDragging(true); // Hide the × and move handles while resizing — clean view of the box edge. del.style.display = 'none'; grip.style.display = 'none'; @@ -2628,11 +2660,14 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; const onUp = () => { document.removeEventListener('pointermove', onMove); document.removeEventListener('pointerup', onUp); + document.removeEventListener('pointercancel', onUp); + _setPdfAnnotationDragging(false); _setHandlesVisible(true); _schedulePdfPaneSave(); }; document.addEventListener('pointermove', onMove); document.addEventListener('pointerup', onUp); + document.addEventListener('pointercancel', onUp); }); // Text options menu — opened from the floating … button so the spacing @@ -3416,9 +3451,9 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; }).join(''); if (!changed && /<[^>]+>/.test(text) && typeof document !== 'undefined') { - const probe = document.createElement('template'); + const probe = document.createElement('div'); probe.innerHTML = text; - const plain = (probe.content.textContent || '').trim(); + const plain = (probe.innerText || probe.textContent || '').trim(); const plainClean = plain ? _sanitizeOutgoingEmailBody(plain) : plain; if (plainClean !== plain) return plainClean; } @@ -3530,9 +3565,9 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; function _emailHtmlToPlainText(html) { if (typeof document === 'undefined') return String(html || ''); - const d = document.createElement('template'); + const d = document.createElement('div'); d.innerHTML = String(html || ''); - return d.content.textContent || ''; + return d.innerText || d.textContent || ''; } function _sanitizedRichTextHtml(rich) { @@ -5393,20 +5428,15 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; row.dataset.id = item.id || ''; row.dataset.kind = kind; if (kind === 'gallery') { + const src = item.url ? `${API_BASE}${item.url}` : ''; row.innerHTML = ` - + `; - if (item.url) { - const img = document.createElement('img'); - img.alt = ''; - img.src = `${API_BASE}${item.url}`; - row.querySelector('.email-odysseus-attach-thumb').appendChild(img); - } } else { row.innerHTML = ` @@ -6735,10 +6765,10 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1'; .trim(); }; const splitCurrent = _splitEmailReplyQuote(currentBody); - const ownBody = document.createElement('template'); + const ownBody = document.createElement('div'); ownBody.innerHTML = String(splitCurrent.body || ''); - const ownText = (ownBody.content.textContent || '').trim(); - const isReplaceableDraft = (!ownText && !ownBody.content.querySelector('img,video,audio,iframe,table')) || /^(\[AI reply draft will appear here\]|Drafting AI reply)/i.test(ownText); + const ownText = (ownBody.textContent || '').trim(); + const isReplaceableDraft = (!ownText && !ownBody.querySelector('img,video,audio,iframe,table')) || /^(\[AI reply draft will appear here\]|Drafting AI reply)/i.test(ownText); if (!isReplaceableDraft) { if (uiModule) uiModule.showToast('Reply already has text'); return; @@ -7630,8 +7660,8 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1';
@@ -4794,7 +4825,7 @@ export async function _refreshUnreadBadge({ unreadCountOverride = null, preserve } catch (_) { _syncUnreadTabBadge(0); } } -export async function _loadEmails({ force = false, useCache = true } = {}) { +export async function _loadEmails({ force = false, useCache = true, skipFastPath = false } = {}) { const seq = ++_libLoadSeq; state._libLoading = true; const accountAtStart = state._libAccountId || ''; @@ -4848,11 +4879,15 @@ export async function _loadEmails({ force = false, useCache = true } = {}) { } const stats = document.getElementById('email-lib-stats'); if (stats) stats.textContent = `${state._libTotal} emails`; + const _isStale = Boolean(sync.stale); _setEmailSyncStatus({ updatedAt: sync.updated_at || '', source: sync.source || (cacheSource ? 'client_cache' : ''), loading: false, + stale: _isStale, }); + if (_isStale) _scheduleStaleEmailRefetch(); + else _clearStaleEmailRefetch(); if (cacheable && !cacheSource) { _libCachePut(ck, { emails: state._libEmails.slice(), total: state._libTotal, sync }); } @@ -4888,7 +4923,7 @@ export async function _loadEmails({ force = false, useCache = true } = {}) { const accountQS = accountAtStart ? `&account_id=${encodeURIComponent(accountAtStart)}` : ''; const attQS = hasAttachmentsAtStart ? '&has_attachments=1' : ''; const dateQS = `${dateFromAtStart ? `&date_from=${encodeURIComponent(dateFromAtStart)}` : ''}${dateToAtStart ? `&date_to=${encodeURIComponent(dateToAtStart)}` : ''}`; - if (!cached && cacheable && !force) { + if (!cached && cacheable && !force && !skipFastPath) { const ctrl = new AbortController(); const timer = setTimeout(() => ctrl.abort(), 450); try { diff --git a/static/js/gallery.js b/static/js/gallery.js index a8d927951..fffca4935 100644 --- a/static/js/gallery.js +++ b/static/js/gallery.js @@ -1278,6 +1278,7 @@ function _renderEditorLanding() {

Start a blank canvas, or open a photo from your gallery to edit it.

+
@@ -1328,6 +1329,28 @@ function _renderEditorLanding() { document.getElementById('gallery-editor-pick')?.addEventListener('click', () => { document.querySelector('#gallery-modal .gallery-tab[data-tab="images"]')?.click(); }); + document.getElementById('gallery-editor-import')?.addEventListener('click', () => { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = 'image/*'; + input.addEventListener('change', () => { + const file = input.files && input.files[0]; + if (!file) return; + const name = (file.name || 'Imported image').replace(/\.[^.]+$/, '') || 'Imported image'; + const reader = new FileReader(); + reader.onload = async () => { + try { + await openEditor(reader.result, null, null, name); + } catch (e) { + console.error('[gallery] image import failed', e); + uiModule?.showError?.('Could not import that image'); + } + }; + reader.onerror = () => uiModule?.showError?.('Could not read that file'); + reader.readAsDataURL(file); + }); + input.click(); + }); } // Wire the first-tile Upload affordance in the Photos grid. Opens the same @@ -1351,6 +1374,11 @@ function _wireUploadTile() { }); input.click(); }); + tile.addEventListener('keydown', (e) => { + if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'Spacebar') return; + e.preventDefault(); + tile.click(); + }); } // Shimmer placeholder tiles shown while the FIRST page loads, so the grid @@ -1376,7 +1404,7 @@ function _renderGrid() { // tile in the Albums tab so the upload entry point is consistent across // both grids. const uploadTile = ` -