mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-06 06:52:20 +02:00
merge: reconcile PR 40 with current lab
Integrate lab fff55a78 into PR #40 (cc25d5ba). Lab's modular email backend/frontend, modular settings, split stylesheets (static/style.css stays deleted), procfs compatibility, and request-scoped TurnContract authority win; PR #40's routing classifiers, editor/email/task features, and style.css changes are ported into lab's module and stylesheet homes. Integration fixes: - settings/api.js imports ui.js under its canonical versioned URL - browser observations keep legacy CAPTCHA/access-block evidence - artifact turns do not re-trigger broad-web research recovery - env reference documents PR test-tool variables; page regenerated PR #40 defects surfaced by lab gates and fixed here: - web_fetch generic schema drops top-level anyOf (OpenAI contract); the compact preview contract still requires url or urls - get_weather registered as a brokered network read - new lazy editor modules precached for offline use - SearXNG pin mirrored into GPU standalone compose files - image model picker again skips offline endpoints Tests updated where PR #40 changed behaviour on purpose, and PR tests moved onto lab's document_source helpers.
This commit is contained in:
Alexandre Teixeira
+1
-1
@@ -37,7 +37,7 @@ import { UI_VIS_DEFAULT_OFF, resolveVisibility } from './js/ui_visibility.js?v=2
|
||||
import tasksModule from './js/tasks.js?v=20260914taskmodel1';
|
||||
import calendarModule from './js/calendar.js?v=20260914emailsource11';
|
||||
import notesModule from './js/notes.js?v=20260911notesselectioncancel1';
|
||||
import adminModule from './js/admin.js?v=20260921chatgptusage2';
|
||||
import adminModule from './js/admin.js?v=20260929csssplit';
|
||||
import settingsModule from './js/settings.js?v=20260912writingstyle3';
|
||||
// Eagerly bind unified minimize/restore behavior across all tool modals.
|
||||
import './js/modalManager.js';
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
/* 00-tokens - part of the former static/style.css.
|
||||
*
|
||||
* The stylesheet is split by area, but the split is mechanical: rules were
|
||||
* moved verbatim and NOT regrouped. The numeric prefix is the load order, and
|
||||
* that order is what preserves the cascade. A rule sits in the file its
|
||||
* original position fell into, so an area's rules are not all in its file and
|
||||
* a file is not only that area's rules.
|
||||
*
|
||||
* Do not reorder the <link> tags in static/index.html, and do not move a rule
|
||||
* between files: with 1,151 redeclarations and 1,886 !important in this
|
||||
* cascade, either can change which declaration wins.
|
||||
*
|
||||
* static/index.html and the PRECACHE list in static/sw.js must agree on this
|
||||
* order. tests/test_static_stylesheet_manifest.py and
|
||||
* tests/test_css_computed_style_snapshot.py fail if that drifts.
|
||||
*/
|
||||
/* ============================================ */
|
||||
/* Odysseus UI — Consolidated Stylesheet */
|
||||
/* ============================================ */
|
||||
|
||||
|
||||
/* ── Variables ──
|
||||
*
|
||||
* Theme-public variables (override via theme.js or custom themes):
|
||||
* Core: --bg, --fg, --panel, --border, --red
|
||||
* Syntax: --hl-keyword, --hl-string, --hl-comment, --hl-function,
|
||||
* --hl-number, --hl-builtin, --hl-variable, --hl-params,
|
||||
* --hl-bg, --hl-fg
|
||||
* Accents: --accent-primary, --accent-error (set by theme.js)
|
||||
* Semantic: --color-error, --color-success, --color-warning, --color-danger,
|
||||
* --color-accent, --color-muted, --color-muted-alt
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Core palette */
|
||||
--bg: #282c34;
|
||||
--fg: #9cdef2;
|
||||
--panel: #111;
|
||||
--border: #355a66;
|
||||
--red: #e06c75;
|
||||
/* Were `var(--green)` / `var(--warn)` — self-referential, so they
|
||||
resolved to invalid and every site fell back to its own literal
|
||||
(or, for sites with no fallback, painted as transparent/inherit).
|
||||
Anchor them to real hex so the token layer actually works. */
|
||||
--green: #50fa7b;
|
||||
--warn: #f0ad4e;
|
||||
|
||||
/* Syntax highlighting */
|
||||
--hl-bg: #1e2228;
|
||||
--hl-fg: #9cdef2;
|
||||
--hl-keyword: #c678dd;
|
||||
--hl-string: #e5c07b;
|
||||
--hl-comment: #828997;
|
||||
--hl-function: #61afef;
|
||||
--hl-number: #d19a66;
|
||||
--hl-builtin: #56b6c2;
|
||||
--hl-variable: #abb2bf;
|
||||
--hl-params: #a8c0d4;
|
||||
|
||||
/* Semantic colors */
|
||||
--color-error: #ff4444;
|
||||
--color-error-light: #ff6666;
|
||||
--color-success: #4caf50;
|
||||
--color-warning: #f0ad4e;
|
||||
--color-danger: #c0392b;
|
||||
--color-recording: #ff3b30;
|
||||
--color-recording-hover: #d63031;
|
||||
--color-muted: #888;
|
||||
--color-muted-alt: #6b7280;
|
||||
--color-accent: #00aaff;
|
||||
--color-agent-active: #00ff00;
|
||||
--color-brand-blue: #3b82f6;
|
||||
--color-blind-orange: #ff9800;
|
||||
--color-save-green: var(--color-success);
|
||||
--color-link-hover: #66c7ff;
|
||||
--color-subheader: #6b8a94;
|
||||
--select-bg: var(--bg);
|
||||
--select-fg: var(--fg);
|
||||
--select-option-bg: color-mix(in srgb, var(--panel) 74%, var(--bg));
|
||||
--select-option-fg: var(--fg);
|
||||
--select-option-active-bg: color-mix(in srgb, var(--accent, var(--red)) 24%, var(--panel));
|
||||
/* Warm accent — used by the Goals/Today UI in Notes. Lives as a token so
|
||||
themes can override without touching the goal CSS. */
|
||||
--accent-warm: #d19a66;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
--bg: #f5f5f5;
|
||||
--fg: #2b2b2b;
|
||||
--panel: #fff;
|
||||
--border: #bbb;
|
||||
--hl-bg: #f9f9f9;
|
||||
--hl-fg: #2b2b2b;
|
||||
--hl-keyword: #7928a1;
|
||||
--hl-string: #986801;
|
||||
--hl-comment: #6a737d;
|
||||
--hl-function: #005cc5;
|
||||
--hl-number: #986801;
|
||||
--hl-builtin: #0070a0;
|
||||
--hl-variable: #383a42;
|
||||
--hl-params: #4a4f5c;
|
||||
--select-bg: #eaeaea;
|
||||
--select-fg: var(--fg);
|
||||
--select-option-bg: var(--panel);
|
||||
--select-option-fg: var(--fg);
|
||||
--select-option-active-bg: color-mix(in srgb, var(--red) 16%, var(--panel));
|
||||
}
|
||||
|
||||
/* ── Reset & Base ── */
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { overflow-x: hidden; height: 100%; margin: 0; overscroll-behavior: none; }
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
/* Keep the base padding transition for older layout paths that still adjust
|
||||
the body directly. Edge docks reserve workspace room on the flex panes
|
||||
below so left + right docks can coexist without skewing the whole body. */
|
||||
transition: padding-left 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
|
||||
padding-right 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
font-family: var(--font-family, 'Fira Code', monospace);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
height: 100dvh; /* dynamic viewport height — adapts when mobile keyboard opens */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Self-hosted Fira Code font */
|
||||
@font-face { font-family: 'Fira Code'; font-weight: 300; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'); }
|
||||
@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'); }
|
||||
|
||||
/* Code block baseline */
|
||||
pre, code, .hljs {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
@supports selector(::-webkit-scrollbar) {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--panel);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--red);
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--panel);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: color-mix(in srgb, var(--red) 80%, white);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: var(--red) var(--panel);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
.red-text { color: var(--red); }
|
||||
|
||||
/* ── Density Overrides ── */
|
||||
|
||||
:root.density-compact { font-size: 13px; }
|
||||
:root.density-compact .msg { padding: 6px 10px; margin-bottom: 4px; }
|
||||
:root.density-compact .list-item { padding: 4px 8px; }
|
||||
:root.density-compact .sidebar .section { padding: 0; }
|
||||
:root.density-spacious { font-size: 16px; }
|
||||
:root.density-spacious .msg { padding: 14px 18px; margin-bottom: 12px; }
|
||||
:root.density-spacious .list-item { padding: 8px 12px; }
|
||||
:root.density-spacious .sidebar .section { padding: 0; }
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,839 @@
|
||||
/* 12-gallery - part of the former static/style.css.
|
||||
*
|
||||
* The stylesheet is split by area, but the split is mechanical: rules were
|
||||
* moved verbatim and NOT regrouped. The numeric prefix is the load order, and
|
||||
* that order is what preserves the cascade. A rule sits in the file its
|
||||
* original position fell into, so an area's rules are not all in its file and
|
||||
* a file is not only that area's rules.
|
||||
*
|
||||
* Do not reorder the <link> tags in static/index.html, and do not move a rule
|
||||
* between files: with 1,151 redeclarations and 1,886 !important in this
|
||||
* cascade, either can change which declaration wins.
|
||||
*
|
||||
* static/index.html and the PRECACHE list in static/sw.js must agree on this
|
||||
* order. tests/test_static_stylesheet_manifest.py and
|
||||
* tests/test_css_computed_style_snapshot.py fail if that drifts.
|
||||
*/
|
||||
.research-synapse.rs-phase-reading .rs-phase-chip,
|
||||
.research-synapse.rs-phase-analyzing .rs-phase-chip { color: var(--gold, #d4a72c); }
|
||||
.research-synapse.rs-phase-writing .rs-phase-chip { color: var(--color-success, #4caf50); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.research-synapse .rs-live-dot,
|
||||
.research-synapse .rs-pulse,
|
||||
.research-synapse .rs-node-new,
|
||||
.research-synapse .rs-node-expanded,
|
||||
.research-synapse .rs-edge-firing { animation: none !important; }
|
||||
}
|
||||
|
||||
/* ── Raw findings items (inside sources-style box) ── */
|
||||
.finding-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.finding-item .source-link {
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.finding-summary {
|
||||
padding: 6px 8px 8px;
|
||||
font-size: 0.82em;
|
||||
line-height: 1.5;
|
||||
color: var(--fg-dim, var(--fg));
|
||||
opacity: 0.85;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
|
||||
margin-bottom: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.finding-item:last-child .finding-summary {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
Gallery Editor
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Tab bar */
|
||||
.gallery-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 16px;
|
||||
background: var(--panel);
|
||||
}
|
||||
.gallery-tab {
|
||||
padding: 8px 18px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--fg);
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.15s, border-color 0.15s;
|
||||
}
|
||||
.gallery-tab:hover { opacity: 0.85; }
|
||||
.gallery-tab.active {
|
||||
opacity: 1;
|
||||
border-bottom-color: var(--red);
|
||||
}
|
||||
|
||||
/* Narrow modal tab strips should stay on one row. Resized docked windows can
|
||||
be much narrower than the viewport, so this cannot live only in mobile media
|
||||
queries. */
|
||||
.cookbook-tabs,
|
||||
.memory-tabs,
|
||||
.admin-tabs,
|
||||
.lib-tabs,
|
||||
.gallery-tabs,
|
||||
.preset-tabs {
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.cookbook-tabs::-webkit-scrollbar,
|
||||
.memory-tabs::-webkit-scrollbar,
|
||||
.admin-tabs::-webkit-scrollbar,
|
||||
.lib-tabs::-webkit-scrollbar,
|
||||
.gallery-tabs::-webkit-scrollbar,
|
||||
.preset-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.cookbook-tabs > *,
|
||||
.memory-tabs > *,
|
||||
.admin-tabs > *,
|
||||
.lib-tabs > *,
|
||||
.gallery-tabs > *,
|
||||
.preset-tabs > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.cookbook-tab,
|
||||
.memory-tab,
|
||||
.admin-tab,
|
||||
.lib-tab,
|
||||
.gallery-tab,
|
||||
.preset-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
.gallery-tab {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@container (max-width: 360px) {
|
||||
.cookbook-tab:has(svg),
|
||||
.memory-tab:has(svg),
|
||||
.admin-tab:has(svg),
|
||||
.lib-tab:has(svg),
|
||||
.gallery-tab:has(svg),
|
||||
.preset-tab:has(svg) {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.cookbook-tab:has(svg) svg,
|
||||
.memory-tab:has(svg) svg,
|
||||
.admin-tab:has(svg) svg,
|
||||
.lib-tab:has(svg) svg,
|
||||
.gallery-tab:has(svg) svg,
|
||||
.preset-tab:has(svg) svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 0 !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.memory-tab:has(svg) .memory-count,
|
||||
.gallery-tab:has(svg) .gallery-tab-label,
|
||||
.gallery-tab:has(svg) .gallery-tab-close,
|
||||
.cookbook-tab:has(svg) .cookbook-tab-count,
|
||||
.preset-tab:has(svg) .preset-count {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/* Icon + label layout inside each tab. */
|
||||
.gallery-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.gallery-tab-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.gallery-tab.active .gallery-tab-icon { opacity: 1; }
|
||||
/* Close × on the Edit tab — appears on hover. */
|
||||
.gallery-tab-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 2px;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s, background 0.12s;
|
||||
/* Use a slightly larger glyph at a larger line-height so the × sits
|
||||
visually centered — the U+00D7 character has uneven em-box metrics. */
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding-bottom: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.gallery-tab:hover .gallery-tab-close,
|
||||
.gallery-tab.active .gallery-tab-close { opacity: 0.65; }
|
||||
/* Hide the close × entirely on the Edit tab when there's no edit open. */
|
||||
.gallery-tab[data-tab="editor"]:not(.has-edit) .gallery-tab-close { display: none !important; }
|
||||
.gallery-tab-close:hover { opacity: 1 !important; background: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red); }
|
||||
/* Inline rename input shown when the Edit tab is double-clicked. */
|
||||
.gallery-tab-rename-input {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--red);
|
||||
border-radius: 3px;
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
padding: 1px 4px;
|
||||
width: 140px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Albums tab — grid of album cards with cover thumbnails. */
|
||||
.gallery-albums-container {
|
||||
padding: 12px 4px;
|
||||
max-height: calc(92vh - 120px);
|
||||
overflow-y: auto;
|
||||
border: 2px dashed transparent;
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.gallery-settings-container {
|
||||
padding: 8px 4px;
|
||||
max-height: calc(92vh - 120px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.gallery-albums-container.gallery-dragover {
|
||||
border-color: var(--red);
|
||||
background: color-mix(in srgb, var(--red) 5%, transparent);
|
||||
}
|
||||
.gallery-albums-empty {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 12px;
|
||||
padding: 48px 16px;
|
||||
opacity: 0.7;
|
||||
font-size: 13px;
|
||||
}
|
||||
.gallery-albums-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.gallery-album-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
.gallery-album-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--red);
|
||||
box-shadow: 0 4px 14px color-mix(in srgb, var(--fg) 12%, transparent);
|
||||
}
|
||||
.gallery-album-menu-btn {
|
||||
position: absolute;
|
||||
top: 6px; right: 6px;
|
||||
width: 24px; height: 24px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: color-mix(in srgb, var(--bg) 70%, transparent);
|
||||
color: var(--fg);
|
||||
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s, background 0.12s;
|
||||
z-index: 2;
|
||||
backdrop-filter: blur(4px);
|
||||
/* Plain "…" text — the previous SVG was rendering as a flat black
|
||||
block on some themes when its currentColor didn't contrast. */
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
padding: 0 0 4px;
|
||||
}
|
||||
.gallery-album-card:hover .gallery-album-menu-btn,
|
||||
.gallery-album-menu-btn:focus-visible { opacity: 1; }
|
||||
.gallery-album-menu-btn:hover { background: var(--bg); }
|
||||
.gallery-album-menu-pop {
|
||||
position: absolute;
|
||||
top: 34px; right: 6px;
|
||||
min-width: 140px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 14px color-mix(in srgb, var(--fg) 18%, transparent);
|
||||
display: flex; flex-direction: column;
|
||||
padding: 4px;
|
||||
z-index: 3;
|
||||
}
|
||||
.gallery-album-menu-pop[hidden] { display: none; }
|
||||
.gallery-album-cover {
|
||||
aspect-ratio: 4 / 3;
|
||||
background: color-mix(in srgb, var(--fg) 5%, var(--bg));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery-album-placeholder {
|
||||
opacity: 0.4;
|
||||
font-size: 40px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
.gallery-album-info {
|
||||
padding: 8px 10px;
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
}
|
||||
.gallery-album-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.gallery-album-count {
|
||||
font-size: 11px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.gallery-album-card-add {
|
||||
border-style: dashed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.gallery-album-card-add:hover { opacity: 1; }
|
||||
.gallery-album-action-tile {
|
||||
background: color-mix(in srgb, var(--fg) 3%, var(--bg));
|
||||
}
|
||||
|
||||
/* Edit-tab empty state — shown before any image is loaded. */
|
||||
.gallery-editor-landing {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 28px 16px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: var(--fg);
|
||||
}
|
||||
.gallery-editor-landing h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.gallery-editor-heading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.gallery-editor-heading > svg { opacity: 0.6; flex: 0 0 auto; }
|
||||
/* "vision model" link in the AI-tagging description → opens Settings. */
|
||||
.ge-vision-link {
|
||||
color: var(--accent, var(--red));
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ge-vision-link:hover { opacity: 0.8; }
|
||||
.ge-alpha-tag {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
color: var(--accent, var(--red));
|
||||
background: color-mix(in srgb, var(--accent, var(--red)) 15%, transparent);
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.gallery-editor-landing-actions {
|
||||
display: flex; gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
/* Bigger primary action buttons specifically inside the editor landing —
|
||||
the gallery-wide .gallery-select-btn is a compact toolbar style which is
|
||||
too small for the empty-state hero. */
|
||||
.gallery-editor-landing-actions .gallery-select-btn {
|
||||
padding: 7px 22px 17px;
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
/* Visible template picker: every canvas ratio is inspectable without opening
|
||||
a native menu, and its SVG outline previews the resulting canvas shape. */
|
||||
.gallery-editor-template-picker {
|
||||
width: min(760px, 96%);
|
||||
margin-top: 10px;
|
||||
}
|
||||
.gallery-editor-template-picker h4 {
|
||||
margin: 0 0 7px;
|
||||
font-size: 11px;
|
||||
opacity: 0.55;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.gallery-editor-template-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(105px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.gallery-editor-template-option {
|
||||
height: 72px;
|
||||
min-width: 0;
|
||||
padding: 6px 7px;
|
||||
display: grid;
|
||||
grid-template-rows: 28px auto auto;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
font: inherit;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery-editor-template-option svg { color: var(--accent, var(--red)); }
|
||||
.gallery-editor-template-option:hover,
|
||||
.gallery-editor-template-option:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--accent, var(--red));
|
||||
color: var(--accent, var(--red));
|
||||
background: color-mix(in srgb, var(--accent, var(--red)) 7%, var(--panel));
|
||||
}
|
||||
.gallery-editor-template-option span {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
.gallery-editor-template-option small {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 9px;
|
||||
opacity: 0.52;
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.gallery-editor-landing {
|
||||
justify-content: flex-start;
|
||||
gap: 7px;
|
||||
padding: 18px 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.gallery-editor-landing-actions {
|
||||
width: 100%;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
.gallery-editor-landing-actions .gallery-select-btn {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
max-width: 180px;
|
||||
padding: 6px 8px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.gallery-editor-template-picker {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.gallery-editor-template-options {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
/* The common square, widescreen, portrait, and Instagram presets are
|
||||
enough to start on a phone. Keep the print and 4K presets on desktop. */
|
||||
.gallery-editor-template-option:nth-child(n + 5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* Saved-drafts grid on the editor landing. Surfaces every persisted
|
||||
in-progress project so the user can resume without re-opening the
|
||||
original photo. Each card: thumbnail + name + last-saved hint + ×. */
|
||||
.gallery-editor-drafts {
|
||||
width: min(720px, 92%);
|
||||
margin: 28px auto 0; /* centered */
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.gallery-editor-drafts {
|
||||
position: relative;
|
||||
}
|
||||
.gallery-editor-drafts-loading {
|
||||
position: absolute;
|
||||
inset: 30px 0 0 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--panel);
|
||||
border-radius: 6px;
|
||||
min-height: 80px;
|
||||
}
|
||||
.gallery-editor-drafts-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; /* center the title / search / select */
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.gallery-editor-drafts-title {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
opacity: 0.55;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gallery-editor-drafts-search {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: 26px; /* same thickness as the Select button */
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.gallery-editor-drafts-search:focus { outline: none; border-color: var(--red); }
|
||||
/* The shared .gallery-select-btn has a -4px top margin + tall asymmetric padding
|
||||
meant for the main gallery toolbar; in this header it makes the button a
|
||||
different height / offset from the search box. Normalize so it lines up. */
|
||||
.gallery-editor-drafts-header .gallery-select-btn {
|
||||
margin-top: 0 !important;
|
||||
height: 26px; /* match the search bar */
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cookbook-official-filter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
color: var(--fg);
|
||||
font-size: 10px;
|
||||
opacity: 0.72;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.cookbook-official-filter > span:first-child {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 9px;
|
||||
}
|
||||
.cookbook-official-filter .toggle {
|
||||
width: 26px;
|
||||
height: 14px;
|
||||
}
|
||||
.cookbook-official-filter .toggle .slider:before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
.cookbook-official-filter .toggle input:checked + .slider:before {
|
||||
transform: translateX(12px);
|
||||
}
|
||||
#gallery-editor-drafts-select { margin-left: auto; flex-shrink: 0; }
|
||||
#gallery-editor-drafts-select.active {
|
||||
background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
|
||||
border-color: var(--accent, var(--red));
|
||||
color: var(--accent, var(--red));
|
||||
}
|
||||
/* Graceful exit when a project card is deleted — fade + shrink before re-render. */
|
||||
.gallery-editor-draft-card.gallery-draft-removing {
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
transition: opacity 0.24s ease, transform 0.24s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Draft select dot uses the standard small .gallery-select-dot look (same as the
|
||||
photo grid) — no oversized white-ring checkbox. */
|
||||
.gallery-editor-drafts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.gallery-drafts-just-opened > .gallery-editor-draft-card {
|
||||
animation: section-domino-in 0.36s cubic-bezier(0.22, 1.61, 0.36, 1) backwards;
|
||||
}
|
||||
.gallery-drafts-just-opened > :nth-child(1) { animation-delay: 0.02s; }
|
||||
.gallery-drafts-just-opened > :nth-child(2) { animation-delay: 0.04s; }
|
||||
.gallery-drafts-just-opened > :nth-child(3) { animation-delay: 0.06s; }
|
||||
.gallery-drafts-just-opened > :nth-child(4) { animation-delay: 0.08s; }
|
||||
.gallery-drafts-just-opened > :nth-child(5) { animation-delay: 0.10s; }
|
||||
.gallery-drafts-just-opened > :nth-child(6) { animation-delay: 0.12s; }
|
||||
.gallery-drafts-just-opened > :nth-child(7) { animation-delay: 0.14s; }
|
||||
.gallery-drafts-just-opened > :nth-child(8) { animation-delay: 0.16s; }
|
||||
.gallery-drafts-just-opened > :nth-child(9) { animation-delay: 0.18s; }
|
||||
.gallery-drafts-just-opened > :nth-child(10) { animation-delay: 0.20s; }
|
||||
.gallery-drafts-just-opened > :nth-child(11) { animation-delay: 0.22s; }
|
||||
.gallery-drafts-just-opened > :nth-child(12) { animation-delay: 0.24s; }
|
||||
.gallery-drafts-just-opened > :nth-child(13) { animation-delay: 0.26s; }
|
||||
.gallery-drafts-just-opened > :nth-child(14) { animation-delay: 0.28s; }
|
||||
.gallery-drafts-just-opened > :nth-child(15) { animation-delay: 0.30s; }
|
||||
.gallery-drafts-just-opened > :nth-child(16) { animation-delay: 0.32s; }
|
||||
.gallery-drafts-just-opened > :nth-child(17) { animation-delay: 0.34s; }
|
||||
.gallery-drafts-just-opened > :nth-child(18) { animation-delay: 0.36s; }
|
||||
.gallery-drafts-just-opened > :nth-child(19) { animation-delay: 0.38s; }
|
||||
.gallery-drafts-just-opened > :nth-child(20) { animation-delay: 0.40s; }
|
||||
.gallery-drafts-just-opened > :nth-child(n+21) { animation-delay: 0.42s; }
|
||||
.gallery-drafts-view-toggle {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 24px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--bg);
|
||||
}
|
||||
.gallery-drafts-view-toggle button {
|
||||
width: 25px;
|
||||
height: 22px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, var(--fg) 55%, transparent);
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
}
|
||||
.gallery-drafts-view-toggle button:last-child { border-right: 0; }
|
||||
.gallery-drafts-view-toggle button:hover { color: var(--fg); }
|
||||
.gallery-drafts-view-toggle button.active {
|
||||
height: 22px;
|
||||
color: var(--accent, var(--red));
|
||||
background: color-mix(in srgb, var(--accent, var(--red)) 12%, transparent);
|
||||
}
|
||||
.gallery-editor-drafts-grid.list-view .gallery-editor-draft-thumb {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
.gallery-editor-drafts-grid.list-view .gallery-editor-draft-delete {
|
||||
position: static;
|
||||
opacity: 0.55;
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
}
|
||||
.gallery-editor-draft-delete-trash { display: none; }
|
||||
.gallery-editor-drafts-grid.list-view .gallery-editor-draft-delete-trash {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.gallery-editor-drafts-grid.list-view .gallery-editor-draft-delete:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-error, #f44);
|
||||
background: color-mix(in srgb, var(--color-error, #f44) 10%, transparent);
|
||||
}
|
||||
.gallery-editor-draft-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--panel) 70%, transparent);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s, transform 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
.gallery-editor-draft-card:hover {
|
||||
border-color: var(--accent, var(--red));
|
||||
background: color-mix(in srgb, var(--panel) 90%, transparent);
|
||||
}
|
||||
.gallery-editor-draft-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
display: block;
|
||||
}
|
||||
.gallery-editor-draft-thumb-empty {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
color-mix(in srgb, var(--fg) 4%, transparent),
|
||||
color-mix(in srgb, var(--fg) 4%, transparent) 6px,
|
||||
transparent 6px,
|
||||
transparent 12px
|
||||
);
|
||||
}
|
||||
.gallery-editor-draft-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
.gallery-editor-draft-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.gallery-editor-draft-meta {
|
||||
font-size: 10px;
|
||||
opacity: 0.55;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.gallery-editor-draft-delete {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s, background 0.12s;
|
||||
}
|
||||
.gallery-editor-draft-delete {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.gallery-editor-draft-delete:hover { background: var(--red); }
|
||||
/* On very narrow phones, give project search its own row instead of
|
||||
compressing the title and view controls into an overflowing header. */
|
||||
@media (max-width: 360px) {
|
||||
.gallery-editor-drafts-header {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
.gallery-editor-drafts-title {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.gallery-editor-drafts-search {
|
||||
order: 10;
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
#gallery-editor-drafts-select {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* Editor layout */
|
||||
.gallery-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent the editor's own scroll/touch from chaining out to the
|
||||
gallery modal or the page body — critical on mobile so touching
|
||||
the canvas doesn't slide the whole page. */
|
||||
overscroll-behavior: contain;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
/* Pin the topbar to the top of the editor so its action buttons remain
|
||||
visible if the gallery modal body itself ends up scrolling. */
|
||||
.ge-topbar { position: sticky; top: 0; z-index: 5; }
|
||||
|
||||
/* Top bar */
|
||||
.ge-topbar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: thin;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
.ge-topbar-left, .ge-topbar-right {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ge-topbar-right > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ge-topbar .dropdown[popover] {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
bottom: auto;
|
||||
max-height: calc(100vh - 80px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ge-draft-status {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 92px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: color-mix(in srgb, var(--fg) 52%, transparent);
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s, opacity 0.15s;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,980 @@
|
||||
/* Document library and editor, image gallery, image editor.
|
||||
*
|
||||
* This is an eagerly loaded tail segment of the app stylesheet cascade. The
|
||||
* former static/style.css now lives in the numbered 00-17 fragments; these
|
||||
* three pre-existing panel files follow those fragments without changing
|
||||
* their relative order. Nothing here is lazy-loaded.
|
||||
*
|
||||
* LOAD ORDER IS PART OF THE CONTRACT. static/index.html and the PRECACHE list
|
||||
* in static/sw.js must agree:
|
||||
* 1. static/css/00-tokens.css through static/css/17-research.css,
|
||||
* in numeric order
|
||||
* 2. static/css/documents-gallery-editor.css
|
||||
* 3. static/css/email-calendar-notes-tasks.css
|
||||
* 4. static/css/cookbook-research-memory-settings.css
|
||||
*
|
||||
* Rules in this file retain their existing cascade position. Shared rules
|
||||
* formerly kept in static/style.css now live in the numbered fragments.
|
||||
*/
|
||||
|
||||
/* Document library search-term highlight — clear, high-contrast. */
|
||||
mark.doclib-search-hl {
|
||||
background: var(--accent, #e8a830);
|
||||
color: var(--bg, #1a1a1a);
|
||||
border-radius: 2px;
|
||||
padding: 0 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Research bulk bar — right-align the action buttons (keep All + count on
|
||||
the left). Cancel now lives on the Select toggle, so Archive anchors. */
|
||||
#doclib-research-bulk #doclib-research-bulk-archive {
|
||||
margin-left: auto;
|
||||
}
|
||||
/* Drafts bulk bar defaults to justify-content:flex-end (whole row hugs the
|
||||
right). Reset it so All + count sit on the left and only the action button
|
||||
is pushed right — matching every other bulk bar. */
|
||||
#gallery-editor-drafts-bulk {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.doc-divider.doc-divider-handle-idle .doc-divider-collapse {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.doc-divider:hover .doc-divider-collapse { opacity: 0.92; }
|
||||
/* Smooth entrance — slide in from the left + fade up so it doesn't snap into
|
||||
place when fullscreen activates. The chevron's vertical centering uses
|
||||
translateY(-50%), so the animation has to keep that part. */
|
||||
@keyframes doc-fs-chevron-in {
|
||||
from { opacity: 0; transform: translateY(-50%) translateX(-18px); }
|
||||
to { opacity: 0.85; transform: translateY(-50%) translateX(0); }
|
||||
}
|
||||
.doc-editor-pane.doc-pane-leaving {
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes doc-pane-leave {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(24px); opacity: 0; }
|
||||
}
|
||||
.doc-tab-scroll.is-at-left {
|
||||
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
|
||||
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
|
||||
}
|
||||
.doc-tab-scroll.is-at-right {
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
|
||||
mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
|
||||
}
|
||||
.doc-tab-scroll.is-at-left.is-at-right {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
}
|
||||
.doc-tab-scroll::-webkit-scrollbar { display: none; }
|
||||
#doc-tab-right,
|
||||
#doc-tab-left {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
/* Ghost tab shown in the empty state (new, not-yet-saved document). Muted +
|
||||
italic so it reads as a placeholder, and non-interactive so clicking it
|
||||
can't hit the tab handlers (it has no data-doc-id). */
|
||||
.doc-tab.doc-tab-ghost {
|
||||
/* New, not-yet-saved doc tab. It already carries .active, so it shows the
|
||||
accent underline like any active tab — that's all we want. The old dashed
|
||||
border + italic/dim "pending" styling looked weird, so they're gone. */
|
||||
pointer-events: none;
|
||||
}
|
||||
.doc-tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--red);
|
||||
}
|
||||
@keyframes doc-stream-pulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
.doc-updated-flash {
|
||||
animation: doc-update-flash 0.6s ease-out;
|
||||
}
|
||||
@keyframes doc-update-flash {
|
||||
0% { box-shadow: inset 0 0 0 2px var(--accent); }
|
||||
100% { box-shadow: inset 0 0 0 2px transparent; }
|
||||
}
|
||||
.doc-langpicker-trigger.doc-langpicker-email-compact {
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
padding: 0 0 0 6px;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
/* The "T" icon stays centered in the fixed-size button so it grows
|
||||
symmetrically (from the center) instead of jumping around as the size
|
||||
changes. The S/M/L letter is pinned to the bottom-right corner, absolutely
|
||||
positioned so it never shifts the icon either. */
|
||||
#doc-fontsize-btn { transform: translateY(-1px); }
|
||||
#doc-fontsize-btn svg { flex: 0 0 auto; }
|
||||
.doc-overflow-wrapper { order: -1; }
|
||||
.doc-overflow-toggle { opacity: 0.5; }
|
||||
.doc-md-toolbar.md-preview-active,
|
||||
.doc-md-toolbar.md-write-active {
|
||||
overflow: visible;
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
z-index: 3;
|
||||
}
|
||||
.doc-md-toolbar #doc-render-view-toggle .md-view-opt {
|
||||
height: 28px;
|
||||
}
|
||||
/* Some toolbar buttons baked in svg{opacity:0.7} via inline styles, which
|
||||
compounded with the button's own opacity to look almost invisible.
|
||||
Force the inline svg opacity back to 1 inside the toolbar — the button
|
||||
wrapper's 0.85 is the only fade we need. */
|
||||
.doc-md-toolbar button svg[style*="opacity"] { opacity: 1 !important; }
|
||||
/* No black tap-flash / focus background on the doc toolbar + tab controls —
|
||||
they're icon buttons, the opacity change is the only feedback we want. */
|
||||
.doc-md-toolbar button,
|
||||
.doc-tab-new,
|
||||
.doc-tab-arrow,
|
||||
.doc-tab-play {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
/* Pull the icon down toward the "sign" label so they read as one unit. */
|
||||
#doc-pdf-add-sign-btn svg { transform: translateY(2px); }
|
||||
.doc-outline-count {
|
||||
opacity: 0.48;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.doc-outline-target {
|
||||
animation: doc-outline-target-flash 1.05s ease-out;
|
||||
}
|
||||
@keyframes doc-outline-target-flash {
|
||||
0%, 28% { background-color: color-mix(in srgb, var(--accent, var(--red)) 24%, transparent); }
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
.doc-rich-slash-count {
|
||||
opacity: 0.48;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.doc-rich-slash-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Find marks live in the syntax-highlight overlay, which sits at
|
||||
z-index:0 under a transparent textarea — so they're always visible
|
||||
through the text layer. The previous color-mix variant could
|
||||
compute to near-invisible on themes with dark/desaturated accents;
|
||||
forced solid colors + !important so it ALWAYS pops. */
|
||||
mark.doc-find-mark {
|
||||
background: var(--accent) !important;
|
||||
color: var(--bg) !important;
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
}
|
||||
.doc-editor-highlight::-webkit-scrollbar { display: none; }
|
||||
/* Arrow pointing toward the editor */
|
||||
.doc-suggestion-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: -10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--panel);
|
||||
border-left: 2px solid var(--accent);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
transform: rotate(45deg);
|
||||
z-index: 1;
|
||||
}
|
||||
.doc-suggestion-close::before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
background: currentColor;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L8 8M8 2L2 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
.doc-suggestion-accept:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
.doc-editor-wrap.animating::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px; right: 8px;
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--red);
|
||||
animation: doc-pulse 0.8s ease-in-out infinite;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes doc-pulse {
|
||||
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
.doc-diff-content { }
|
||||
@media (hover: none) {
|
||||
.doc-preview-hover-edit {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
#doclib-research-search { position: relative; top: -1.5px; }
|
||||
/* Restore sits on the right of the Delete in archive previews. */
|
||||
.doclib-chat-restore-btn { margin-left: auto; }
|
||||
/* Delete + Archive pin to the left of the actions row; the
|
||||
`margin-right: auto` on the last left-side button (Archive) pushes
|
||||
Copy + Open to the right. Delete sits furthest left. */
|
||||
.doclib-chat-archive-btn { margin-right: auto; }
|
||||
@keyframes doclib-expand {
|
||||
from { opacity: 0.5; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
/* Hide the section headers while a card is expanded (full-screen reader). */
|
||||
.doclib-grid:has(.doclib-card-expanded) > .skills-section-header { display: none; }
|
||||
.skill-card:not(.doclib-card-expanded) .skill-card-tags { display: none; }
|
||||
.doclib-chip-scroll-frame > .chip-scroll-strip:empty {
|
||||
display: none;
|
||||
}
|
||||
.skill-card.doclib-card-expanded .skill-kebab-btn { display: none; }
|
||||
.skill-card.doclib-card-expanded .skill-chevron-up { display: inline-flex; }
|
||||
/* Size the expanded skill card to its content (footer sits right under the
|
||||
preview) but cap at the modal height so a long SKILL.md scrolls instead
|
||||
of overflowing. The inherited `.doclib-card-expanded { flex: 1 }` forced
|
||||
the card to fill the whole modal, which left a big empty void between a
|
||||
short skill's text and the footer. */
|
||||
.skill-card.doclib-card-expanded {
|
||||
flex: 0 1 auto !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
.doclib-inline-load-more::before {
|
||||
display: none;
|
||||
}
|
||||
#doclib-selected-count {
|
||||
color: color-mix(in srgb, var(--fg) 50%, transparent);
|
||||
font-size: 10px;
|
||||
}
|
||||
.gallery-modal-content:has(#gallery-editor-container[style*="flex"]) .gallery-editor-landing {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#gallery-bulk-count,
|
||||
#gallery-editor-drafts-bulk-count {
|
||||
top: -1px !important;
|
||||
}
|
||||
#gallery-select-btn { position: relative; top: 4px !important; font-size: 12px; padding: 10px 11px 12px; min-width: 76px; justify-content: center; }
|
||||
#gallery-albums-search { top: -4px; }
|
||||
#gallery-albums-select-btn { top: -4px !important; }
|
||||
#gallery-bulk-delete,
|
||||
#gallery-albums-bulk-delete,
|
||||
#gallery-editor-drafts-bulk-delete {
|
||||
color: var(--color-error, #f44) !important;
|
||||
}
|
||||
.gallery-detail-image video {
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
display: block;
|
||||
}
|
||||
.gallery-card:hover .gallery-fav-btn { opacity: 1; }
|
||||
.gallery-card:hover .gallery-dl-btn { opacity: 1; }
|
||||
@media (hover: none) {
|
||||
.gallery-dl-btn { opacity: 0.55; }
|
||||
}
|
||||
/* Space the user's tag chips off the "add tag" input below them. */
|
||||
#gallery-user-tag-chips { margin-bottom: 4px; }
|
||||
.gallery-user-chip:hover .gallery-tag-x { opacity: 0.85; }
|
||||
@keyframes gallery-skeleton-shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
.gallery-card:hover .gallery-card-overlay,
|
||||
.gallery-card.gallery-card-focus .gallery-card-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
/* Strong accent ring on the whole photo when selected. Paint it as a
|
||||
foreground pseudo-element so the thumbnail cannot cover the feedback. */
|
||||
.gallery-card:has(.gallery-select-dot.selected) {
|
||||
border-color: var(--accent-primary, var(--red));
|
||||
}
|
||||
.gallery-card:has(.gallery-select-dot.selected)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
border: 3px solid var(--accent-primary, var(--red));
|
||||
border-radius: inherit;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
.gallery-card:has(.gallery-select-dot.selected) .gallery-select-dot {
|
||||
z-index: 4;
|
||||
}
|
||||
.gallery-detail-action.danger:hover {
|
||||
border-color: var(--color-error, #e55);
|
||||
}
|
||||
.gallery-detail-image img,
|
||||
.gallery-detail-image video,
|
||||
.gallery-detail-img-frame img,
|
||||
.gallery-detail-img-frame video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 6px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.gallery-detail-image:hover .gallery-detail-nav { opacity: 0.85; }
|
||||
@media (min-width: 769px) {
|
||||
.gallery-modal-content:has(#gallery-detail[style*="flex"]) {
|
||||
height: 92vh;
|
||||
}
|
||||
.gallery-modal-content:has(#gallery-detail[style*="flex"]) > .modal-body,
|
||||
.gallery-images-container:has(> #gallery-detail[style*="flex"]),
|
||||
#gallery-images-container:has(> #gallery-detail[style*="flex"]) > #gallery-detail {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
.gallery-detail-image:hover .gallery-detail-rotate { opacity: 0.85; }
|
||||
.gallery-detail-nav-disabled {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (hover: none) {
|
||||
.gallery-detail-nav { opacity: 0.7; }
|
||||
}
|
||||
.gallery-detail-inline-link:hover { text-decoration: underline; }
|
||||
.gallery-detail-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.gallery-tag-input-wrap .gallery-tag-input { padding-right: 24px; }
|
||||
.gallery-name-wrap:focus-within .gallery-name-enter { display: inline-flex; }
|
||||
.gallery-name-wrap:focus-within .gallery-detail-name-input { padding-right: 28px; }
|
||||
.gallery-album-cover img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.gallery-editor-landing p {
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
font-size: 13px;
|
||||
max-width: 320px;
|
||||
}
|
||||
.gallery-editor-landing-actions .gallery-select-btn:hover { opacity: 1; }
|
||||
/* Saved-project selection uses the same bulk-bar rhythm as Photos. */
|
||||
#gallery-editor-drafts-bulk {
|
||||
margin-top: 0;
|
||||
}
|
||||
.gallery-editor-draft-card.selected {
|
||||
outline: 2px solid var(--accent, var(--red));
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.gallery-editor-draft-card.select-mode { cursor: pointer; }
|
||||
.gallery-drafts-view-toggle button svg {
|
||||
display: block;
|
||||
position: static;
|
||||
transform: none;
|
||||
}
|
||||
.gallery-editor-drafts-grid.list-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.gallery-editor-drafts-grid.list-view .gallery-editor-draft-card {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr) 24px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
min-height: 48px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.gallery-editor-drafts-grid.list-view .gallery-editor-draft-delete-x { display: none; }
|
||||
.gallery-editor-draft-card:focus-visible {
|
||||
outline: 2px solid var(--accent, var(--red));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.gallery-editor-draft-card:hover .gallery-editor-draft-delete { opacity: 1; }
|
||||
.ge-topbar.ge-topbar-menu-open { z-index: 10006; }
|
||||
/* Toolbar (left) */
|
||||
@keyframes ge-layer-action-flash {
|
||||
from { box-shadow: inset 0 0 0 2px var(--red); background-color: color-mix(in srgb, var(--red) 24%, transparent); }
|
||||
to { box-shadow: inset 0 0 0 2px transparent; }
|
||||
}
|
||||
.ge-layer-action-flash { animation: ge-layer-action-flash 650ms ease-out; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ge-layer-action-flash { animation-duration: 1ms; }
|
||||
}
|
||||
.ge-tool-btn .ge-tool-label {
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ge-tool-btn:hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 2px 0 -2px;
|
||||
background: color-mix(in srgb, var(--fg) 8%, transparent);
|
||||
border-radius: 6px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ge-tool-btn.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* Highlight pill shifted 2 px left of the button bounds so it sits
|
||||
under the icon + label (which are also nudged left). Same total
|
||||
width as before — just slid. */
|
||||
inset: 0 2px 0 -2px;
|
||||
background: color-mix(in srgb, var(--red) 18%, transparent);
|
||||
border-radius: 6px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ge-btn-ai:hover .ge-btn-ai-mark { opacity: 1; }
|
||||
.ge-tool-btn.has-selection .ge-tool-clear { display: inline-flex; }
|
||||
.ge-canvas-area.ge-rulers-visible {
|
||||
padding: 18px 0 0 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ge-main-canvas {
|
||||
touch-action: none;
|
||||
}
|
||||
.ge-canvas-area.ge-pan-ready,
|
||||
.ge-canvas-area.ge-pan-ready .ge-main-canvas {
|
||||
cursor: grab !important;
|
||||
}
|
||||
.ge-canvas-area.ge-panning,
|
||||
.ge-canvas-area.ge-panning .ge-main-canvas {
|
||||
cursor: grabbing !important;
|
||||
user-select: none;
|
||||
}
|
||||
.ge-ai-command-collapsed .ge-ai-command-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
.ge-ai-command-collapsed .ge-ai-command-head,
|
||||
.ge-ai-command-collapsed .ge-ai-command-form,
|
||||
.ge-ai-command-collapsed .ge-ai-command-suggestions,
|
||||
.ge-ai-command-collapsed .ge-ai-command-status {
|
||||
display: none;
|
||||
}
|
||||
@media (hover: none) {
|
||||
.ge-ai-command-collapsed {
|
||||
bottom: 8px;
|
||||
opacity: 0.72;
|
||||
}
|
||||
}
|
||||
.ge-ai-command-clear[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.ge-ai-command-busy .ge-ai-command-run::after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid color-mix(in srgb, #fff 42%, transparent);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: ge-ai-command-spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes ge-ai-command-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.ge-ai-command-suggestions[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.ge-ai-command-status:empty {
|
||||
display: none;
|
||||
}
|
||||
/* Each shortcut row: key chips + description. The key chips are usually
|
||||
chained with "+" so we use a small horizontal gap between siblings,
|
||||
plus a larger left margin on the trailing text via the kbd:last-of-type
|
||||
sibling rule — keeps "Ctrl+Shift+D Deselect" readable instead of glued. */
|
||||
.ge-shortcuts-col > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
opacity: 0.85;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Push the description text away from the last kbd by adding margin
|
||||
to any text node that follows a kbd. Flex+wrap handles wrap on narrow. */
|
||||
.ge-shortcuts-col > div kbd + kbd { margin-left: 0; }
|
||||
.ge-shortcuts-col > div kbd:last-of-type { margin-right: 6px; }
|
||||
.ge-shortcuts-card kbd,
|
||||
#ge-shortcuts-popover kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent, #cc6a3a) 55%, transparent);
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--accent, #cc6a3a) 14%, transparent);
|
||||
color: var(--accent, #cc6a3a);
|
||||
min-width: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.ge-quick-mask-bar[hidden] { display: none; }
|
||||
.ge-marquee-dimensions[hidden] { display: none; }
|
||||
.ge-layer-geometry-section .ge-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.ge-layer-geometry-grid input::-webkit-inner-spin-button,
|
||||
.ge-layer-geometry-grid input::-webkit-outer-spin-button { appearance: none; }
|
||||
#ge-brush-controls select,
|
||||
#ge-eyedropper-section select {
|
||||
height: 26px;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
}
|
||||
.ge-gradient-extra-stop .ge-text-field { min-width: 0; }
|
||||
.ge-shape-gradient-add-stop { align-self: flex-start; }
|
||||
.ge-text-font-field { grid-column: span 1; }
|
||||
#ge-text-rasterize { align-self: flex-end; }
|
||||
.ge-shape-types .ge-text-toggle { flex: 1 1 25%; }
|
||||
#ge-shape-rasterize { align-self: flex-end; }
|
||||
.ge-direct-text-editor:focus { outline: 1px solid color-mix(in srgb, var(--red) 55%, transparent); }
|
||||
.ge-transform-popup.ge-transform-popup-dragging .ge-transform-popup-head { cursor: grabbing; }
|
||||
/* Force the title to take all middle space so the [_][×] cluster
|
||||
stays pinned to the right edge. */
|
||||
.ge-transform-popup-head .ge-adj-title { flex: 1 1 auto !important; }
|
||||
.ge-transform-popup-minimised .ge-transform-popup-body,
|
||||
.ge-transform-popup-minimised .ge-transform-popup-hint {
|
||||
display: none;
|
||||
}
|
||||
.ge-transform-popup-input::-webkit-outer-spin-button,
|
||||
.ge-transform-popup-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
.ge-transform-position-field .ge-transform-popup-input { width: 68px; }
|
||||
.ge-transform-input-locked {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ge-transform-input-locked + .ge-transform-spin { display: none; }
|
||||
.ge-transform-preserve-field[hidden] { display: none; }
|
||||
/* Hide the controls wrapper entirely when every tool section inside is
|
||||
hidden — otherwise the padding + border draws an empty band above the
|
||||
layers panel even when no tool needs sliders/buttons. */
|
||||
.ge-controls:not(:has(> *:not([style*="display: none"]):not([style*="display:none"]))) {
|
||||
display: none;
|
||||
}
|
||||
/* Strip the native <input type="color"> chrome (border + padding around
|
||||
the swatch in each engine) so the visible color fills the circle. */
|
||||
.ge-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
|
||||
.ge-color-picker::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ge-color-picker::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ge-color-picker.cp-swatch-input::selection { background: transparent; }
|
||||
.ge-size-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 9px; height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--red);
|
||||
border: none; cursor: pointer;
|
||||
}
|
||||
.ge-size-slider:hover::-webkit-slider-thumb,
|
||||
.ge-size-slider.is-using::-webkit-slider-thumb,
|
||||
.ge-size-slider:active::-webkit-slider-thumb {
|
||||
width: 16px; height: 16px;
|
||||
}
|
||||
.ge-size-slider::-moz-range-thumb {
|
||||
width: 9px; height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--red);
|
||||
border: none; cursor: pointer;
|
||||
}
|
||||
.ge-size-slider:hover::-moz-range-thumb,
|
||||
.ge-size-slider.is-using::-moz-range-thumb,
|
||||
.ge-size-slider:active::-moz-range-thumb {
|
||||
width: 16px; height: 16px;
|
||||
}
|
||||
.ge-eraser-row label > span[id$="-label"]:hover {
|
||||
background: color-mix(in srgb, var(--fg) 10%, transparent);
|
||||
}
|
||||
.ge-eraser-row > span[id$="-label"].ge-slider-value:hover {
|
||||
background: color-mix(in srgb, var(--fg) 10%, transparent);
|
||||
opacity: 1;
|
||||
}
|
||||
.ge-merge-menu[hidden] { display: none; }
|
||||
/* Inpaint Brush size slider — slightly larger thumb than the rest of
|
||||
the panel since it's the primary interactive control. */
|
||||
#ge-inpaint-brush-slider::-webkit-slider-thumb { width: 12px; height: 12px; }
|
||||
#ge-inpaint-brush-slider:hover::-webkit-slider-thumb,
|
||||
#ge-inpaint-brush-slider.is-using::-webkit-slider-thumb,
|
||||
#ge-inpaint-brush-slider:active::-webkit-slider-thumb { width: 18px; height: 18px; }
|
||||
#ge-inpaint-brush-slider::-moz-range-thumb { width: 12px; height: 12px; }
|
||||
#ge-inpaint-brush-slider:hover::-moz-range-thumb,
|
||||
#ge-inpaint-brush-slider.is-using::-moz-range-thumb,
|
||||
#ge-inpaint-brush-slider:active::-moz-range-thumb { width: 18px; height: 18px; }
|
||||
.ge-adj-popup .ge-adj-title { flex: 1 1 auto; }
|
||||
.ge-adj-popup .ge-adj-head:active { cursor: grabbing; }
|
||||
.ge-fx-dock-label { overflow: hidden; text-overflow: ellipsis; }
|
||||
.ge-history-head:active { cursor: grabbing; }
|
||||
@keyframes ge-canvas-spin { to { transform: rotate(360deg); } }
|
||||
.ge-inline-swatch::-webkit-color-swatch-wrapper { padding: 0; }
|
||||
.ge-inline-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }
|
||||
.ge-inline-swatch::-moz-color-swatch { border: none; border-radius: 2px; }
|
||||
.ge-adj-cb-row .ge-adj-cb-dot {
|
||||
width: 10px; height: 10px; border-radius: 50%;
|
||||
display: inline-block; flex-shrink: 0;
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent);
|
||||
}
|
||||
.ge-adj-cb-tone-picker {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.ge-adj-hist-details {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ge-adj-hist-details > summary {
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
.ge-adj-hist-details > summary::-webkit-details-marker { display: none; }
|
||||
.ge-adj-hist-details > summary::before {
|
||||
content: '▸ ';
|
||||
display: inline-block;
|
||||
transition: transform 0.12s;
|
||||
}
|
||||
.ge-mask-sub-item.active .ge-layer-name { opacity: 1; font-style: normal; font-weight: 600; }
|
||||
.ge-mask-sub-item.active .ge-mask-inline-thumb { opacity: 1; }
|
||||
/* Opacity preview — translucent disk */
|
||||
#ge-eraser-preview-opacity { opacity: 0.5; }
|
||||
/* Flow preview — dotted ring to suggest discrete stamping */
|
||||
#ge-eraser-preview-flow {
|
||||
background: none;
|
||||
border: 2px dotted var(--fg);
|
||||
opacity: 0.7;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
/* Softness preview — blurred edge */
|
||||
#ge-eraser-preview-softness {
|
||||
background: radial-gradient(circle, var(--fg) 0%, var(--fg) 30%, transparent 75%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
/* Wand feather preview — solid disk that visibly softens at its edge
|
||||
as the user drags the Feather slider. JS sets --feather-blur. */
|
||||
#ge-wand-feather-preview {
|
||||
filter: blur(var(--feather-blur, 0px));
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ge-mask-vis-btn.visible:hover { opacity: 1; }
|
||||
.ge-topbar .ge-btn,
|
||||
.ge-topbar .ge-btn-sm { text-transform: uppercase; }
|
||||
.ge-stacked-btn .ge-stacked-glyph {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 14px;
|
||||
}
|
||||
.ge-layer-selection-bar[hidden] { display: none; }
|
||||
.ge-layer-selection-bar .ge-icon-btn:hover { opacity: 1; }
|
||||
.ge-save-menu[hidden] { display: none; }
|
||||
.ge-stacked-btn .ge-stacked-glyph .ge-save-state-icon[hidden] { display: none !important; }
|
||||
.ge-stacked-btn .ge-stacked-glyph .ge-save-state-icon:not([hidden]) { display: block; }
|
||||
.ge-resize-menu[hidden],
|
||||
.ge-edge-menu[hidden],
|
||||
.ge-view-menu[hidden],
|
||||
.ge-image-menu[hidden],
|
||||
.ge-selection-menu[hidden],
|
||||
.ge-filter-menu[hidden] { display: none; }
|
||||
.ge-selection-save-row .ge-icon-btn { width: 28px; height: 27px; }
|
||||
.ge-export-matte .ge-color-picker { width: 28px; height: 28px; }
|
||||
.ge-export-footer > div { display: flex; gap: 6px; }
|
||||
.ge-export-estimate { opacity: 0.6; font-variant-numeric: tabular-nums; }
|
||||
.ge-canvas-prompt-custom-label { margin-top: 14px; }
|
||||
.ge-canvas-anchor::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border-radius: 1px;
|
||||
background: color-mix(in srgb, var(--fg) 38%, transparent);
|
||||
}
|
||||
.ge-canvas-anchor.active::after { background: var(--red); }
|
||||
.ge-canvas-lock-option input { accent-color: var(--red); }
|
||||
.ge-canvas-preset-icon { margin-bottom: 1px; }
|
||||
/* Center grip dots so the handle reads as draggable. */
|
||||
.ge-panel-resize::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
background: color-mix(in srgb, var(--fg) 35%, transparent);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ge-slider-bubble[hidden] { display: none; }
|
||||
/* Tail pointing DOWN at the slider (bubble sits above). */
|
||||
.ge-slider-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -4px;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--red);
|
||||
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
||||
}
|
||||
.ge-layer-thumb canvas {
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ge-layers-merge-menu[hidden] { display: none; }
|
||||
.ge-layer-item:not(.active) .ge-layer-inline-thumb { opacity: 0.86; }
|
||||
.ge-layer-opacity-row .ge-layer-lock-btn { flex: 0 0 24px; width: 24px; }
|
||||
.ge-layers-list > .ge-layer-item:not(.ge-adj-sub-item):not(.ge-mask-sub-item) > .ge-layer-controls {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
}
|
||||
.ge-layer-item.grouped { padding-left: calc(20px + (var(--layer-group-depth, 1) - 1) * 14px); }
|
||||
.ge-layer-vis.visible:hover { opacity: 1; }
|
||||
.ge-layer-item.clipped .ge-layer-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
/* Shrink the slider thumb — the native default is ~16-20 px which looks
|
||||
massive next to a 3 px track in the compact layer row. */
|
||||
.ge-layer-opacity::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--red);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
/* Match the track: shrink only after a 0.5s grace period. */
|
||||
transition: width 0.12s ease 0.5s, height 0.12s ease 0.5s;
|
||||
}
|
||||
.ge-layer-opacity::-moz-range-thumb {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--red);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: width 0.12s ease 0.5s, height 0.12s ease 0.5s;
|
||||
}
|
||||
.ge-layer-opacity:hover::-webkit-slider-thumb,
|
||||
.ge-layer-opacity:active::-webkit-slider-thumb,
|
||||
.ge-layer-opacity.dragging::-webkit-slider-thumb,
|
||||
.ge-layer-opacity:hover::-moz-range-thumb,
|
||||
.ge-layer-opacity:active::-moz-range-thumb,
|
||||
.ge-layer-opacity.dragging::-moz-range-thumb {
|
||||
transition: width 0.12s ease 0s, height 0.12s ease 0s;
|
||||
}
|
||||
.ge-layer-controls .ge-mask-density {
|
||||
width: 26px;
|
||||
min-width: 24px;
|
||||
height: 4px;
|
||||
flex: 0 0 26px;
|
||||
align-self: center;
|
||||
}
|
||||
.ge-mask-properties > summary {
|
||||
box-sizing: border-box;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
color: var(--fg);
|
||||
opacity: 0.4;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
.ge-mask-properties > summary::-webkit-details-marker { display: none; }
|
||||
.ge-mask-properties > summary > svg { width: 12px; height: 12px; flex: none; }
|
||||
.ge-mask-sub-item:has(.ge-mask-properties[open]) {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
}
|
||||
.ge-mask-property-row output { text-align: right; opacity: .7; }
|
||||
.ge-layers-list > .ge-layer-item:not(.ge-adj-sub-item):not(.ge-mask-sub-item) > .ge-layer-controls,
|
||||
.ge-layers-list > .ge-layer-group-row > .ge-layer-controls {
|
||||
display: none;
|
||||
}
|
||||
.ge-layers-list > .ge-layer-item:not(.ge-adj-sub-item):not(.ge-mask-sub-item).active > .ge-layer-controls,
|
||||
.ge-layers-list > .ge-layer-item:not(.ge-adj-sub-item):not(.ge-mask-sub-item).active-parent > .ge-layer-controls,
|
||||
.ge-layers-list > .ge-layer-group-row.active > .ge-layer-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
|
||||
}
|
||||
.ge-layer-tools[hidden] { display: none; }
|
||||
.ge-layer-tools .ge-layer-btn { min-width: 26px; }
|
||||
@media (max-width: 700px) {
|
||||
/* Preserve the compact grip while giving long-press reorder a usable
|
||||
touch target. */
|
||||
.ge-layer-drag {
|
||||
width: 28px;
|
||||
min-height: 30px;
|
||||
margin-left: -6px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
}
|
||||
.ge-layer-align-menu .ge-layer-lock-option { grid-template-columns: minmax(0, 1fr); }
|
||||
.ge-crop-apply input[type="number"]::-webkit-outer-spin-button,
|
||||
.ge-crop-apply input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.ge-brush-cursor::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
width: 3px; height: 3px;
|
||||
margin: -1.5px 0 0 -1.5px;
|
||||
background: rgba(255,255,255,0.8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* Marks remain solid so they pop through the otherwise-invisible
|
||||
overlay; outlined extra-bright for the currently-focused one. */
|
||||
body.doc-find-active mark.doc-find-mark {
|
||||
background: var(--accent) !important;
|
||||
color: var(--bg) !important;
|
||||
}
|
||||
body.doc-find-active mark.doc-find-mark.current {
|
||||
background: var(--accent) !important;
|
||||
box-shadow: 0 0 0 2px var(--fg) !important;
|
||||
outline: 1px solid var(--fg) !important;
|
||||
}
|
||||
.doc-email-header:not(.doc-email-header-collapsed) .doc-email-collapse-summary {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.doc-email-header.doc-email-header-collapsed {
|
||||
gap: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.doc-email-header.doc-email-header-collapsed .doc-email-fields {
|
||||
display: none;
|
||||
}
|
||||
/* Documents footer — X + Undo stay on the LEFT, Copy/Export group pushed
|
||||
to the RIGHT. Email composer keeps its original flex-end layout. */
|
||||
#doc-actions-footer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.doc-save-button[data-save-state="dirty"] .doc-save-state-dirty,
|
||||
.doc-save-button[data-save-state="saving"] .doc-save-state-saving,
|
||||
.doc-save-button[data-save-state="saved"] .doc-save-state-saved,
|
||||
.doc-save-button[data-save-state="error"] .doc-save-state-error { display: block; }
|
||||
.doc-save-button[data-save-state="saving"] .doc-save-state-saving {
|
||||
animation: doc-save-spin 800ms linear infinite;
|
||||
}
|
||||
@keyframes doc-save-spin { to { transform: rotate(360deg); } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.doc-save-button[data-save-state="saving"] .doc-save-state-saving { animation: none; }
|
||||
}
|
||||
.doc-stats-popover[hidden] { display: none; }
|
||||
.doc-stats-row strong {
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.doc-email-richbody:empty::before {
|
||||
content: "Write your email\2026";
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.doc-rich-empty-import {
|
||||
top: 106px;
|
||||
}
|
||||
}
|
||||
.doc-email-richbody.richtext-mode:empty::before {
|
||||
content: "Start writing\2026";
|
||||
}
|
||||
.doc-email-richbody.richtext-mode ul,
|
||||
.doc-email-richbody.richtext-mode ol {
|
||||
padding-left: 1.75em;
|
||||
}
|
||||
.doc-email-richbody.richtext-mode ul:not(.rich-checklist) > li,
|
||||
.doc-email-richbody.richtext-mode ol > li {
|
||||
padding-inline-start: 0.2em;
|
||||
}
|
||||
.doc-email-richbody.richtext-mode pre code {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
}
|
||||
.doc-email-richbody figure.richtext-image .richtext-image-caption {
|
||||
margin-top: 6px;
|
||||
max-width: 100%;
|
||||
color: color-mix(in srgb, var(--fg) 68%, transparent);
|
||||
font-size: 0.84em;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.doc-email-richbody a { color: var(--accent, #4af); }
|
||||
.doc-email-richbody blockquote {
|
||||
margin: 6px 0; padding-left: 10px;
|
||||
border-left: 3px solid var(--border); opacity: 0.8;
|
||||
}
|
||||
.doc-email-richbody p { margin: 0.5em 0; }
|
||||
#doc-email-more-btn svg { opacity: 0.8; }
|
||||
@media (min-width: 769px) {
|
||||
#doc-email-header #doc-email-collapse-btn.doc-email-collapse-btn {
|
||||
display: none !important;
|
||||
}
|
||||
#doc-email-header.doc-email-header-collapsed .doc-email-fields {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
.doclib-section-title-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
color: var(--accent, var(--red));
|
||||
vertical-align: -2px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
+36
-3
@@ -246,8 +246,32 @@
|
||||
real request is discarded and the font fetched a second time. -->
|
||||
<link rel="preload" as="font" type="font/woff2" crossorigin href="/static/fonts/FiraCode-Regular.woff2">
|
||||
<link rel="preload" as="font" type="font/woff2" crossorigin href="/static/fonts/FiraCode-SemiBold.woff2">
|
||||
<link rel="stylesheet" href="/static/style.css?v=20260921chatgptusage2">
|
||||
<link rel="modulepreload" href="/static/app.js?v=20260921chatgptusage2">
|
||||
<link rel="stylesheet" href="/static/css/00-tokens.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/01-agent-chat.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/02-compare.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/03-agent-chat.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/04-memory.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/05-documents.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/06-admin-settings.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/07-documents.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/08-skills.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/09-gallery.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/10-cookbook.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/11-tasks.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/12-gallery.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/13-image-editor.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/14-email.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/15-notes.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/16-calendar.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/17-research.css?v=20260929csssplit">
|
||||
<!-- Panel stylesheets split out of style.css for maintainability. They are
|
||||
eager and their order is load-bearing: the cascade is the concatenation of
|
||||
these files in this order, so they must stay in this order here and in the
|
||||
PRECACHE list in sw.js. None of them is lazy-loaded. -->
|
||||
<link rel="stylesheet" href="/static/css/documents-gallery-editor.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/email-calendar-notes-tasks.css?v=20260929csssplit">
|
||||
<link rel="stylesheet" href="/static/css/cookbook-research-memory-settings.css?v=20260929csssplit">
|
||||
<link rel="modulepreload" href="/static/app.js?v=20260929csssplit">
|
||||
<link rel="modulepreload" href="/static/js/chat.js?v=20260917toolttft1">
|
||||
<link rel="modulepreload" href="/static/js/ui.js?v=20260916largetoolscroll1">
|
||||
<link rel="modulepreload" href="/static/js/sessions.js">
|
||||
@@ -1527,6 +1551,15 @@
|
||||
<span>System</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Build provenance, pinned below the scrolling nav so it stays at
|
||||
the bottom-left of the panel: the version this build registers
|
||||
and the commit the running process actually loaded. Populated
|
||||
from /api/version; stays hidden until that answers. -->
|
||||
<div class="settings-sidebar-build admin-only" id="settings-sidebar-build" hidden>
|
||||
<span class="settings-sidebar-build-version" id="settings-sidebar-build-version"></span>
|
||||
<span class="settings-sidebar-build-commit" id="settings-sidebar-build-commit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-panels">
|
||||
|
||||
@@ -2634,7 +2667,7 @@
|
||||
<script type="module" src="/static/js/censor.js"></script>
|
||||
<script type="module" src="/static/js/settings.js?v=20260912writingstyle3"></script>
|
||||
<script type="module" src="/static/js/assistant.js?v=20260912firefoxjscleanup1"></script>
|
||||
<script type="module" src="/static/app.js?v=20260921chatgptusage2"></script> <!-- app.js must be LAST -->
|
||||
<script type="module" src="/static/app.js?v=20260929csssplit"></script> <!-- app.js must be LAST -->
|
||||
<script type="module" src="/static/js/init.js?v=20260829chatstyle12"></script>
|
||||
<script type="module" src="/static/js/a11y.js"></script>
|
||||
<script nonce="{{CSP_NONCE}}">if('serviceWorker' in navigator){navigator.serviceWorker.register('/static/sw.js?v=20260916autoscroll1').catch(()=>{});}</script>
|
||||
|
||||
@@ -137,7 +137,7 @@ The largest and most central subsystem. Chat submission → backend SSE → prog
|
||||
| Module | Responsibility |
|
||||
|---|---|
|
||||
| **`gallery.js`** / **`galleryEditor.js`** | Gallery/image library and canvas editor entry points. |
|
||||
| **`emailInbox.js`** / **`emailLibrary.js`** | Email inbox reader and library modal. Sub-modules handle signatures, reply recipients, state, and signature folding. |
|
||||
| **`emailInbox.js`** / **`emailLibrary/`** | Email inbox reader and library modal. `emailLibrary.js` is a re-export wrapper; `emailLibrary/index.js` owns the panel, list and cards, with `settingsPage.js`, `unsubscribe.js`, `reader.js`, `menus.js`, `bodyRender.js`, `attachments.js` and `aiReply.js` alongside it plus the `utils.js` / `signatureFold.js` / `replyRecipients.js` / `state.js` leaves. |
|
||||
| **`calendar.js`** / **`calendar/utils.js`** / **`calendar/reminders.js`** | Calendar views, event forms, reminders. |
|
||||
| **`tasks.js`** | Scheduled task/recurring LLM job UI. |
|
||||
| **`notes.js`** | Notes and todo panel, reminders, pinboard. |
|
||||
|
||||
@@ -3166,6 +3166,7 @@ function initMcpForm() {
|
||||
if (transport === 'stdio' && !command) { msg.textContent = 'Command is required for stdio'; msg.className = 'admin-error'; return; }
|
||||
if (transport === 'sse' && !url) { msg.textContent = 'URL is required for SSE'; msg.className = 'admin-error'; return; }
|
||||
try { JSON.parse(env); } catch { msg.textContent = 'Env must be valid JSON'; msg.className = 'admin-error'; return; }
|
||||
try { JSON.parse(args); } catch { msg.textContent = 'Args must be valid JSON, e.g. ["-y", "pkg"]'; msg.className = 'admin-error'; return; }
|
||||
const fd = new FormData();
|
||||
fd.append('name', name); fd.append('transport', transport); fd.append('command', command); fd.append('args', args); fd.append('env', env); fd.append('url', url);
|
||||
// If preset has oauthFile config, send credentials for file generation
|
||||
@@ -3186,6 +3187,10 @@ function initMcpForm() {
|
||||
try {
|
||||
const res = await fetch('/api/mcp/servers', { method: 'POST', body: fd, credentials: 'same-origin' });
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
msg.textContent = data.detail || `Failed (${res.status})`; msg.className = 'admin-error';
|
||||
return;
|
||||
}
|
||||
if (data.needs_oauth) {
|
||||
msg.innerHTML = `Added ${esc(name)} — <a href="/api/mcp/oauth/authorize/${data.id}" target="_blank" style="color:var(--red);font-weight:600;">Authorize with Google</a> to connect`;
|
||||
msg.className = 'admin-success';
|
||||
|
||||
@@ -7549,6 +7549,7 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1';
|
||||
<button type="button" class="md-toolbar-rich-only" data-md="subscript" title="Subscript" style="display:none"><span class="rich-script-icon">x<sub>2</sub></span></button>
|
||||
<span class="md-toolbar-sep md-toolbar-edit-only"></span>
|
||||
<button type="button" class="md-dd-toggle md-toolbar-edit-only" data-dd="heading" title="Heading (Ctrl+Alt+1-6)"><b>H</b><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
||||
<button type="button" class="md-dd-toggle md-toolbar-rich-only" data-dd="font" title="Font family" aria-label="Font family" style="display:none"><span>Aa</span><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
||||
<span id="md-toolbar-sep-after-heading" class="md-toolbar-sep md-toolbar-manual-sep md-toolbar-edit-only" aria-hidden="true"></span>
|
||||
<button type="button" class="md-dd-toggle md-toolbar-edit-only" data-dd="list" title="Bulleted list"><svg class="rich-list-bullet-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="4" cy="6" r="1.5"/><circle cx="4" cy="12" r="1.5"/><circle cx="4" cy="18" r="1.5"/><path d="M9 5h12v2H9zM9 11h12v2H9zM9 17h12v2H9z"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
|
||||
<span class="md-toolbar-sep md-toolbar-edit-only"></span>
|
||||
@@ -7745,6 +7746,7 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1';
|
||||
}
|
||||
_renderDocumentStats();
|
||||
statsPopover.hidden = false;
|
||||
statsPopover.style.zIndex = String(topPortalZ());
|
||||
// The editor pane clips overflow, so a footer-anchored absolute
|
||||
// popover can disappear underneath the document. Float it against
|
||||
// the viewport and place it above the stats button.
|
||||
@@ -10721,6 +10723,13 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1';
|
||||
['h5', 'Heading 5', 'H5'],
|
||||
['h6', 'Heading 6', 'H6'],
|
||||
],
|
||||
font: [
|
||||
['fontname:Arial', 'Arial', 'Aa'],
|
||||
['fontname:Georgia', 'Georgia', 'Gg'],
|
||||
['fontname:Times New Roman', 'Times New Roman', 'Tt'],
|
||||
['fontname:Verdana', 'Verdana', 'Vv'],
|
||||
['fontname:Courier New', 'Courier New', 'Cc'],
|
||||
],
|
||||
code: [['code', 'Inline code', '`'], ['codeblock', 'Code block', '```']],
|
||||
list: [
|
||||
['ul', 'Bullet list', '•'],
|
||||
@@ -11140,6 +11149,7 @@ import { attachColorPicker } from './colorPicker.js?v=20260910eyedropper1';
|
||||
'#md-toolbar-sep-after-ai-reply',
|
||||
'#doc-ai-writing-btn',
|
||||
'[data-dd="heading"]',
|
||||
'[data-dd="font"]',
|
||||
'#md-toolbar-sep-after-heading',
|
||||
'[data-dd="textsize"]',
|
||||
],
|
||||
|
||||
+25
-11387
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,450 @@
|
||||
// static/js/emailLibrary/aiReply.js
|
||||
//
|
||||
// The AI-reply entry points and the reader submenus that sit next to them:
|
||||
// reply-mode choice, the per-message context note (drafted into localStorage so
|
||||
// a half-typed instruction survives a reload), the translate submenu, and the
|
||||
// remind-me submenu that writes a todo note.
|
||||
//
|
||||
// The context-draft key is versioned (`…:v2:`) and scoped by account, folder
|
||||
// and uid, so a draft cannot leak from one message to another.
|
||||
|
||||
import spinnerModule from '../spinner.js';
|
||||
import { topPortalZ } from '../toolWindowZOrder.js';
|
||||
import { showToast } from '../ui.js?v=20260916largetoolscroll1';
|
||||
import { state } from './state.js';
|
||||
import { _esc, _extractName } from './utils.js';
|
||||
import { _snapEmailModalToLeftSidebar, _translateEmail } from './index.js';
|
||||
|
||||
const API_BASE = window.location.origin;
|
||||
|
||||
export function _aiReplyIcon(data) {
|
||||
return '<svg class="email-ai-reply-icon" width="14" height="14" viewBox="0 0 24 24" fill="var(--accent-primary, var(--red))" aria-hidden="true"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>';
|
||||
}
|
||||
|
||||
function _summaryIcon(data) {
|
||||
const fill = data?.cached_summary ? 'var(--accent-primary, var(--red))' : 'currentColor';
|
||||
return `<svg width="14" height="14" viewBox="0 0 24 24" fill="${fill}"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>`;
|
||||
}
|
||||
|
||||
async function _emailTranslateLanguage() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/email/config`);
|
||||
const cfg = await res.json();
|
||||
return cfg?.email_translate_language || 'English';
|
||||
} catch (_) {
|
||||
return 'English';
|
||||
}
|
||||
}
|
||||
|
||||
async function _runAiReplyFromButton(btn, em, data, mode, noteHint = '') {
|
||||
_snapEmailModalToLeftSidebar(btn.closest('.modal'));
|
||||
btn.disabled = true;
|
||||
const orig = btn.innerHTML;
|
||||
let wp = null;
|
||||
try {
|
||||
wp = spinnerModule.createWhirlpool(14);
|
||||
wp.element.style.cssText = 'width:14px;height:14px;display:inline-block;vertical-align:middle;position:relative;top:-2px;';
|
||||
btn.innerHTML = '';
|
||||
btn.appendChild(wp.element);
|
||||
} catch (_) {}
|
||||
try {
|
||||
if (state._onEmailClick) {
|
||||
return await state._onEmailClick({ email: em, emailData: data, mode, noteHint });
|
||||
}
|
||||
return false;
|
||||
} finally {
|
||||
try { wp && wp.stop(); } catch (_) {}
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = orig;
|
||||
}
|
||||
}
|
||||
|
||||
const _AI_REPLY_CONTEXT_DRAFT_PREFIX = 'odysseus:email-ai-reply-context:v2:';
|
||||
let _aiReplyChoiceOutsideClose = null;
|
||||
|
||||
function _aiReplyContextDraftKey(em, data) {
|
||||
const accountId = data?.account_id || em?.account_id || state._libAccountId || '';
|
||||
const folder = data?.folder || em?.folder || state._libFolder || 'INBOX';
|
||||
const uid = data?.uid || em?.uid || data?.message_id || em?.message_id || '';
|
||||
if (!uid) return '';
|
||||
return _AI_REPLY_CONTEXT_DRAFT_PREFIX
|
||||
+ [accountId, folder, uid].map(value => encodeURIComponent(String(value || ''))).join(':');
|
||||
}
|
||||
|
||||
function _loadAiReplyContextDraft(key) {
|
||||
if (!key) return '';
|
||||
try { return localStorage.getItem(key) || ''; } catch (_) { return ''; }
|
||||
}
|
||||
|
||||
function _saveAiReplyContextDraft(key, value) {
|
||||
if (!key) return;
|
||||
try {
|
||||
const text = String(value || '');
|
||||
if (text.trim()) localStorage.setItem(key, text);
|
||||
else localStorage.removeItem(key);
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function _clearAiReplyContextDraft(key) {
|
||||
if (!key) return;
|
||||
try { localStorage.removeItem(key); } catch (_) {}
|
||||
}
|
||||
|
||||
function _closeAiReplyChoice() {
|
||||
if (_aiReplyChoiceOutsideClose) {
|
||||
document.removeEventListener('click', _aiReplyChoiceOutsideClose, true);
|
||||
_aiReplyChoiceOutsideClose = null;
|
||||
}
|
||||
document.querySelectorAll('.email-ai-reply-choice').forEach(el => {
|
||||
const input = el.querySelector('[data-note-input]');
|
||||
_saveAiReplyContextDraft(el.dataset.contextDraftKey || '', input?.value || '');
|
||||
el.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function _showAiReplyChoice(btn, em, data, positionAnchor = btn) {
|
||||
_closeAiReplyChoice();
|
||||
const rect = positionAnchor.getBoundingClientRect();
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'email-ai-reply-choice';
|
||||
/* Clamp width to viewport minus 16px margin so the menu never spills off
|
||||
the right edge on narrow mobile screens. */
|
||||
const menuMaxW = Math.min(220, window.innerWidth - 16);
|
||||
const left = Math.max(8, Math.min(rect.left, window.innerWidth - menuMaxW - 8));
|
||||
/* Vertical placement: prefer below the button, but flip above if
|
||||
there's not enough room (e.g. button near bottom of viewport).
|
||||
Estimated menu height is ~150px (textarea + buttons + padding). */
|
||||
const estHeight = 150;
|
||||
const spaceBelow = window.innerHeight - rect.bottom - 8;
|
||||
const spaceAbove = rect.top - 8;
|
||||
let top;
|
||||
if (spaceBelow >= estHeight || spaceBelow >= spaceAbove) {
|
||||
top = Math.max(8, Math.min(rect.bottom + 6, window.innerHeight - estHeight - 8));
|
||||
} else {
|
||||
top = Math.max(8, rect.top - estHeight - 6);
|
||||
}
|
||||
menu.style.cssText = [
|
||||
'position:fixed',
|
||||
`left:${left}px`,
|
||||
`top:${top}px`,
|
||||
`max-width:${menuMaxW}px`,
|
||||
`max-height:${window.innerHeight - 16}px`,
|
||||
'overflow:auto',
|
||||
'box-sizing:border-box',
|
||||
`z-index:${topPortalZ()}`,
|
||||
'display:flex',
|
||||
'gap:6px',
|
||||
'padding:6px',
|
||||
'background:var(--bg,#111)',
|
||||
'border:1px solid var(--border,#333)',
|
||||
'border-radius:7px',
|
||||
'box-shadow:0 8px 24px rgba(0,0,0,.28)',
|
||||
].join(';');
|
||||
menu.innerHTML = `
|
||||
<div class="email-ai-reply-row" style="display:flex;flex-direction:column;gap:6px;min-width:180px;">
|
||||
<textarea data-note-input rows="2" placeholder="Context (optional)" style="width:100%;box-sizing:border-box;resize:vertical;min-height:42px;font-family:inherit;font-size:11px;padding:5px 6px;border-radius:5px;border:1px solid var(--border,#333);background:var(--bg-elev,#1a1a1a);color:var(--fg);"></textarea>
|
||||
<div style="display:flex;align-items:center;gap:4px;">
|
||||
<button class="memory-toolbar-btn" data-mode="ai-reply-fast" title="Draft reply" style="display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1;">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="color:var(--accent, var(--red));"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const noteInput = menu.querySelector('[data-note-input]');
|
||||
const contextDraftKey = _aiReplyContextDraftKey(em, data);
|
||||
menu.dataset.contextDraftKey = contextDraftKey;
|
||||
noteInput.value = _loadAiReplyContextDraft(contextDraftKey);
|
||||
noteInput.addEventListener('input', () => {
|
||||
_saveAiReplyContextDraft(contextDraftKey, noteInput.value || '');
|
||||
});
|
||||
setTimeout(() => noteInput.focus(), 0);
|
||||
menu.addEventListener('click', async (ev) => {
|
||||
const choice = ev.target.closest('[data-mode]');
|
||||
if (!choice) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const mode = choice.getAttribute('data-mode') || 'ai-reply-fast';
|
||||
const noteHint = (noteInput.value || '').trim();
|
||||
_saveAiReplyContextDraft(contextDraftKey, noteInput.value || '');
|
||||
_closeAiReplyChoice();
|
||||
const draftOpened = await _runAiReplyFromButton(btn, em, data, mode, noteHint);
|
||||
if (draftOpened === true) _clearAiReplyContextDraft(contextDraftKey);
|
||||
});
|
||||
// Esc closes the popover; ignore plain clicks inside the menu so the
|
||||
// textarea stays focused.
|
||||
menu.addEventListener('mousedown', (ev) => ev.stopPropagation());
|
||||
document.body.appendChild(menu);
|
||||
// Outside-click closer: only fires when the click target is OUTSIDE
|
||||
// the menu. The original handler closed on any click which made
|
||||
// focusing the textarea immediately dismiss the popover.
|
||||
const outsideClose = (ev) => {
|
||||
if (menu.contains(ev.target)) return;
|
||||
document.removeEventListener('click', outsideClose, true);
|
||||
if (_aiReplyChoiceOutsideClose === outsideClose) _aiReplyChoiceOutsideClose = null;
|
||||
_closeAiReplyChoice();
|
||||
};
|
||||
_aiReplyChoiceOutsideClose = outsideClose;
|
||||
setTimeout(() => {
|
||||
if (_aiReplyChoiceOutsideClose === outsideClose) {
|
||||
document.addEventListener('click', outsideClose, true);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
export function _handleAiReplyButton(ev, em, data, positionAnchor = ev.currentTarget) {
|
||||
ev.stopPropagation();
|
||||
const btn = ev.currentTarget;
|
||||
// First click on a cached email surfaces the cached draft. Second
|
||||
// click clears the cache and opens the Fast/Full + context menu so
|
||||
// the user can ask for a fresh draft (with new steering).
|
||||
if (data?.cached_ai_reply && !btn.dataset.shownOnce) {
|
||||
btn.dataset.shownOnce = '1';
|
||||
_runAiReplyFromButton(btn, em, data, 'ai-reply');
|
||||
return;
|
||||
}
|
||||
if (data?.cached_ai_reply) {
|
||||
data.cached_ai_reply = null;
|
||||
btn.dataset.shownOnce = '';
|
||||
}
|
||||
_showAiReplyChoice(btn, em, data, positionAnchor);
|
||||
}
|
||||
|
||||
export function _hasMultipleRecipients(data) {
|
||||
// Count distinct addresses in To + Cc (minus the current user). Empty
|
||||
// fallback when the user's address isn't yet known — no exclusion.
|
||||
const myAddress = (window._myEmailAddress || '').toLowerCase();
|
||||
const extractEmails = (str) => {
|
||||
if (!str) return [];
|
||||
return str.split(',')
|
||||
.map(s => {
|
||||
const m = s.match(/<([^>]+)>/);
|
||||
return (m ? m[1] : s).trim().toLowerCase();
|
||||
})
|
||||
.filter(e => e && e !== myAddress);
|
||||
};
|
||||
const recipients = new Set([
|
||||
...extractEmails(data.to),
|
||||
...extractEmails(data.cc),
|
||||
]);
|
||||
// Sender counts as one other person too
|
||||
if (data.from_address && data.from_address.toLowerCase() !== myAddress) {
|
||||
recipients.add(data.from_address.toLowerCase());
|
||||
}
|
||||
return recipients.size > 1;
|
||||
}
|
||||
|
||||
// _esc lives in ./emailLibrary/utils.js
|
||||
|
||||
export function _showEmailTranslateSubmenu(reader, parentDropdown) {
|
||||
parentDropdown.innerHTML = '';
|
||||
const header = document.createElement('div');
|
||||
header.className = 'dropdown-item-compact';
|
||||
header.style.cssText = 'opacity:0.5;font-size:10px;pointer-events:none;text-transform:uppercase;letter-spacing:0.5px;padding-top:6px;';
|
||||
header.innerHTML = '<span>Translate to</span>';
|
||||
parentDropdown.appendChild(header);
|
||||
|
||||
const customRow = document.createElement('div');
|
||||
customRow.className = 'dropdown-item-compact email-translate-custom-row';
|
||||
customRow.style.cssText = 'display:flex;gap:5px;align-items:center;padding:5px 7px;cursor:default;';
|
||||
customRow.innerHTML = `
|
||||
<input type="text" class="email-translate-custom-input" placeholder="Write language..." style="min-width:0;width:136px;height:26px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);font:inherit;font-size:11px;padding:0 7px;">
|
||||
<button type="button" class="email-translate-custom-go" style="height:26px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:color-mix(in srgb, var(--fg) 5%, transparent);color:inherit;font:inherit;font-size:11px;cursor:pointer;">Go</button>
|
||||
`;
|
||||
parentDropdown.appendChild(customRow);
|
||||
const input = customRow.querySelector('.email-translate-custom-input');
|
||||
const go = customRow.querySelector('.email-translate-custom-go');
|
||||
const runCustom = async () => {
|
||||
const language = (input?.value || '').trim();
|
||||
if (!language) {
|
||||
input?.focus();
|
||||
return;
|
||||
}
|
||||
parentDropdown.remove();
|
||||
await _translateEmail(reader, language);
|
||||
};
|
||||
customRow.addEventListener('click', e => e.stopPropagation());
|
||||
go?.addEventListener('click', async e => {
|
||||
e.stopPropagation();
|
||||
await runCustom();
|
||||
});
|
||||
input?.addEventListener('keydown', async e => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
await runCustom();
|
||||
}
|
||||
});
|
||||
_emailTranslateLanguage().then(language => {
|
||||
if (input && !input.value) input.value = language || 'English';
|
||||
}).catch(() => {});
|
||||
|
||||
const languages = ['English', 'Swedish', 'Japanese', 'Spanish', 'French', 'German'];
|
||||
for (const language of languages) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'dropdown-item-compact';
|
||||
item.innerHTML = `<span>${language}</span>`;
|
||||
item.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
parentDropdown.remove();
|
||||
await _translateEmail(reader, language);
|
||||
});
|
||||
parentDropdown.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Reminder submenu (used by both email menus) ----
|
||||
export function _showLibRemindSubmenu(em, parentDropdown) {
|
||||
parentDropdown.innerHTML = '';
|
||||
const header = document.createElement('div');
|
||||
header.className = 'dropdown-item-compact';
|
||||
header.style.cssText = 'opacity:0.5;font-size:10px;pointer-events:none;text-transform:uppercase;letter-spacing:0.5px;padding-top:6px;';
|
||||
header.innerHTML = '<span>Remind me</span>';
|
||||
parentDropdown.appendChild(header);
|
||||
|
||||
const now = new Date();
|
||||
const laterToday = new Date(now);
|
||||
const sixPm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0);
|
||||
if (sixPm - now < 60*60*1000) laterToday.setTime(now.getTime() + 3*60*60*1000);
|
||||
else laterToday.setTime(sixPm.getTime());
|
||||
const tomorrow = new Date(now); tomorrow.setDate(tomorrow.getDate()+1); tomorrow.setHours(8,0,0,0);
|
||||
const daysUntilMon = (8 - now.getDay()) % 7 || 7;
|
||||
const nextWeek = new Date(now); nextWeek.setDate(now.getDate()+daysUntilMon); nextWeek.setHours(8,0,0,0);
|
||||
|
||||
const presets = [
|
||||
{ label: 'Later today', sub: laterToday.toLocaleTimeString([], { hour:'numeric', minute:'2-digit' }), date: laterToday },
|
||||
{ label: 'Tomorrow', sub: tomorrow.toLocaleTimeString([], { hour:'numeric', minute:'2-digit' }), date: tomorrow },
|
||||
{ label: 'Next week', sub: nextWeek.toLocaleDateString([], { weekday:'short' }) + ' ' + nextWeek.toLocaleTimeString([], { hour:'numeric', minute:'2-digit' }), date: nextWeek },
|
||||
];
|
||||
for (const p of presets) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'dropdown-item-compact';
|
||||
item.innerHTML = `<span>${p.label}</span><span style="margin-left:auto;opacity:0.5;font-size:10px;">${p.sub}</span>`;
|
||||
item.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
parentDropdown.remove();
|
||||
await _createEmailReplyReminder(em, p.date);
|
||||
});
|
||||
parentDropdown.appendChild(item);
|
||||
}
|
||||
const customItem = document.createElement('div');
|
||||
customItem.className = 'dropdown-item-compact';
|
||||
customItem.innerHTML = '<span>Pick date and time…</span>';
|
||||
customItem.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
parentDropdown.remove();
|
||||
const tmp = document.createElement('input');
|
||||
tmp.type = 'datetime-local';
|
||||
const def = new Date(tomorrow);
|
||||
const pad = n => String(n).padStart(2,'0');
|
||||
tmp.value = `${def.getFullYear()}-${pad(def.getMonth()+1)}-${pad(def.getDate())}T${pad(def.getHours())}:${pad(def.getMinutes())}`;
|
||||
tmp.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:13px;';
|
||||
document.body.appendChild(tmp);
|
||||
tmp.focus();
|
||||
if (typeof tmp.showPicker === 'function') { try { tmp.showPicker(); } catch {} }
|
||||
tmp.addEventListener('change', async () => {
|
||||
if (tmp.value) await _createEmailReplyReminder(em, new Date(tmp.value));
|
||||
tmp.remove();
|
||||
});
|
||||
tmp.addEventListener('blur', () => setTimeout(() => tmp.remove(), 200));
|
||||
});
|
||||
parentDropdown.appendChild(customItem);
|
||||
// "Note" — prompts for free-text and saves it as a note without a
|
||||
// due_date, so no timer/reminder fires.
|
||||
const noteItem = document.createElement('div');
|
||||
noteItem.className = 'dropdown-item-compact';
|
||||
noteItem.innerHTML = '<span>Note</span>';
|
||||
noteItem.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
parentDropdown.remove();
|
||||
_promptEmailNote(em);
|
||||
});
|
||||
parentDropdown.appendChild(noteItem);
|
||||
}
|
||||
|
||||
function _promptEmailNote(em) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.style.cssText = 'position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;padding:16px;';
|
||||
const card = document.createElement('div');
|
||||
card.style.cssText = 'background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px;min-width:280px;max-width:min(420px, 92vw);display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 32px rgba(0,0,0,0.4);';
|
||||
const subject = em.subject || '(no subject)';
|
||||
card.innerHTML = `
|
||||
<div style="font-size:11px;opacity:0.6;">Note about ${_esc(subject)}</div>
|
||||
<textarea data-note placeholder="Write your note…" rows="4" style="resize:vertical;min-height:80px;font-family:inherit;font-size:12px;padding:7px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-elev,#1a1a1a);color:var(--fg);box-sizing:border-box;width:100%;"></textarea>
|
||||
<div class="email-note-actions" style="display:flex;gap:6px;justify-content:flex-end;position:relative;top:4px;">
|
||||
<button class="memory-toolbar-btn" data-act="cancel"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true" style="vertical-align:-1px;margin-right:4px;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>Cancel</button>
|
||||
<button class="memory-toolbar-btn active" data-act="save"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:-1px;margin-right:4px;"><path d="M4 4h16v16H4z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>Save</button>
|
||||
</div>
|
||||
`;
|
||||
overlay.appendChild(card);
|
||||
document.body.appendChild(overlay);
|
||||
const ta = card.querySelector('[data-note]');
|
||||
setTimeout(() => ta.focus(), 0);
|
||||
const close = () => overlay.remove();
|
||||
overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
|
||||
card.querySelector('[data-act="cancel"]').addEventListener('click', close);
|
||||
card.querySelector('[data-act="save"]').addEventListener('click', async () => {
|
||||
const text = (ta.value || '').trim();
|
||||
if (!text) { ta.focus(); return; }
|
||||
close();
|
||||
await _createEmailReplyReminder(em, null, text);
|
||||
});
|
||||
ta.addEventListener('keydown', (ev) => {
|
||||
if (ev.key === 'Escape') close();
|
||||
else if ((ev.ctrlKey || ev.metaKey) && ev.key === 'Enter') card.querySelector('[data-act="save"]').click();
|
||||
});
|
||||
}
|
||||
|
||||
async function _createEmailReplyReminder(em, dueDate, customText = '') {
|
||||
const pad = n => String(n).padStart(2,'0');
|
||||
const iso = dueDate
|
||||
? `${dueDate.getFullYear()}-${pad(dueDate.getMonth()+1)}-${pad(dueDate.getDate())}T${pad(dueDate.getHours())}:${pad(dueDate.getMinutes())}`
|
||||
: null;
|
||||
const fullFrom = em.from || em.sender || '';
|
||||
// Extract just the first name from "First Last <email@x>" or fall back to email local part
|
||||
let from = 'someone';
|
||||
if (fullFrom) {
|
||||
const fullName = _extractName(fullFrom);
|
||||
if (fullName) {
|
||||
// Strip quotes, take the first whitespace-separated word, capitalize
|
||||
const first = fullName.replace(/^["']|["']$/g, '').trim().split(/[\s,]+/)[0] || '';
|
||||
if (first) from = first.charAt(0).toUpperCase() + first.slice(1);
|
||||
}
|
||||
}
|
||||
const subject = em.subject || '(no subject)';
|
||||
const folder = state._libFolder || 'INBOX';
|
||||
const deepLink = `${window.location.origin}/#email=${encodeURIComponent(folder)}:${em.uid}`;
|
||||
const itemText = customText || `Reply to ${from}: ${subject}`;
|
||||
const payload = {
|
||||
title: `Reply: ${subject}`,
|
||||
note_type: 'todo',
|
||||
items: [
|
||||
{ text: itemText, checked: false },
|
||||
],
|
||||
content: `Open email: ${deepLink}`,
|
||||
label: 'email reminder',
|
||||
source: 'email',
|
||||
};
|
||||
if (iso) payload.due_date = iso;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/notes`, {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed');
|
||||
const { showToast } = await import('../ui.js?v=20260916largetoolscroll1');
|
||||
if (dueDate) {
|
||||
const fmt = dueDate.toLocaleString([], { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' });
|
||||
showToast(`Todo reminder set for ${fmt}`);
|
||||
} else {
|
||||
showToast('Reply note saved');
|
||||
}
|
||||
if ('Notification' in window && Notification.permission === 'default') {
|
||||
try { Notification.requestPermission(); } catch {}
|
||||
}
|
||||
} catch (e) {
|
||||
const { showError } = await import('../ui.js?v=20260916largetoolscroll1');
|
||||
showError('Failed to create reminder');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,492 @@
|
||||
// static/js/emailLibrary/attachments.js
|
||||
//
|
||||
// Attachment chips in a reader: building the markup, wiring open/download/
|
||||
// "open in editor" per type, and the deferred load for messages whose
|
||||
// attachment list was not in the list response.
|
||||
//
|
||||
// The deferred path exists because `/api/email/list` does not carry attachment
|
||||
// metadata: a card can know it *has* attachments without knowing what they
|
||||
// are, so the chips are rendered late and the card icon repaired afterwards.
|
||||
|
||||
import spinnerModule from '../spinner.js';
|
||||
import * as Modals from '../modalManager.js';
|
||||
import { state } from './state.js';
|
||||
import { _esc } from './utils.js';
|
||||
import { _acct, _openCalendarEventFromEmail, _prepareEmailWindowForDocument } from './index.js';
|
||||
import { _openEmailAsTab, _openEmailWindow } from './reader.js';
|
||||
|
||||
const API_BASE = window.location.origin;
|
||||
|
||||
// Wire click handlers for attachment chips + "open in editor" sub-buttons
|
||||
// inside a reader. Safe to call multiple times — uses dataset.wired flag to
|
||||
// skip nodes that already have listeners.
|
||||
function _wireAttachmentHandlers(reader, folder) {
|
||||
const useFolder = folder || state._libFolder;
|
||||
// Detect mobile here so the attachment-chip handler doesn't blow up with
|
||||
// a ReferenceError when this fn is called from contexts that don't have
|
||||
// _isMobileUA in scope (e.g. _openEmailAsTab, _openEmailWindow).
|
||||
const _isMobileUA = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
||||
reader.querySelectorAll('.email-attachments-download-all').forEach(btn => {
|
||||
if (btn.dataset.wired === '1') return;
|
||||
btn.dataset.wired = '1';
|
||||
btn.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
if (btn.dataset.downloading === '1') return;
|
||||
const uid = btn.dataset.attUid;
|
||||
const sourceFolder = btn.dataset.attFolder || useFolder;
|
||||
const count = Number(btn.dataset.attCount || 0);
|
||||
if (!uid) return;
|
||||
const originalHtml = btn.innerHTML;
|
||||
const originalTitle = btn.title;
|
||||
btn.dataset.downloading = '1';
|
||||
btn.classList.add('is-loading');
|
||||
try {
|
||||
const sp = window.spinnerModule || (await import('../spinner.js')).default;
|
||||
const wp = sp.createWhirlpool(12);
|
||||
wp.element.style.margin = '0';
|
||||
btn.textContent = '';
|
||||
btn.appendChild(wp.element);
|
||||
const label = document.createElement('span');
|
||||
label.textContent = 'All';
|
||||
btn.appendChild(label);
|
||||
} catch (_) {
|
||||
btn.textContent = 'All...';
|
||||
}
|
||||
try {
|
||||
const url = `${API_BASE}/api/email/attachments-download/${encodeURIComponent(uid)}?folder=${encodeURIComponent(sourceFolder)}${_acct()}`;
|
||||
const res = await fetch(url, { credentials: 'same-origin' });
|
||||
if (!res.ok) {
|
||||
const msg = await res.text().catch(() => '');
|
||||
console.error('attachments zip download failed', res.status, msg);
|
||||
location.href = url;
|
||||
return;
|
||||
}
|
||||
const blob = await res.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = blobUrl;
|
||||
a.download = `email-${uid}-attachments.zip`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
|
||||
try { uiModule.showToast && uiModule.showToast(`Downloading ${count || 'all'} attachments`); } catch (_) {}
|
||||
} catch (e) {
|
||||
console.error('attachments zip download error', e);
|
||||
try { const { showError } = await import('../ui.js?v=20260916largetoolscroll1'); showError('Could not download attachments'); } catch (_) {}
|
||||
} finally {
|
||||
delete btn.dataset.downloading;
|
||||
btn.classList.remove('is-loading');
|
||||
btn.title = originalTitle;
|
||||
btn.innerHTML = originalHtml;
|
||||
}
|
||||
});
|
||||
});
|
||||
reader.querySelectorAll('.email-attachment-calendar-open').forEach(openBtn => {
|
||||
if (openBtn.dataset.wired === '1') return;
|
||||
openBtn.dataset.wired = '1';
|
||||
openBtn.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
if (openBtn.dataset.opening === '1') return;
|
||||
const uid = openBtn.dataset.openUid;
|
||||
const index = openBtn.dataset.openIndex;
|
||||
const name = openBtn.dataset.openName || `calendar-${index}`;
|
||||
const sourceFolder = openBtn.dataset.openFolder || useFolder;
|
||||
if (!uid || index == null) return;
|
||||
openBtn.dataset.opening = '1';
|
||||
openBtn.classList.add('is-loading');
|
||||
const originalHtml = openBtn.innerHTML;
|
||||
try {
|
||||
const wp = spinnerModule.createWhirlpool(12);
|
||||
wp.element.style.margin = '0';
|
||||
openBtn.textContent = '';
|
||||
openBtn.appendChild(wp.element);
|
||||
const folderQs = encodeURIComponent(sourceFolder);
|
||||
const attachmentUrl = `${API_BASE}/api/email/attachment/${encodeURIComponent(uid)}/${encodeURIComponent(index)}?folder=${folderQs}${_acct()}`;
|
||||
const attachmentRes = await fetch(attachmentUrl, { credentials: 'same-origin' });
|
||||
if (!attachmentRes.ok) throw new Error(`HTTP ${attachmentRes.status}`);
|
||||
const blob = await attachmentRes.blob();
|
||||
const fd = new FormData();
|
||||
fd.append('file', blob, name);
|
||||
const importRes = await fetch(`${API_BASE}/api/calendar/import`, {
|
||||
method: 'POST', body: fd, credentials: 'same-origin',
|
||||
});
|
||||
const result = await importRes.json().catch(() => ({}));
|
||||
if (!importRes.ok || !result.ok) {
|
||||
throw new Error(result.detail || result.error || `HTTP ${importRes.status}`);
|
||||
}
|
||||
const existingEventUid = Array.isArray(result.event_uids) ? String(result.event_uids[0] || '').trim() : '';
|
||||
if (existingEventUid && Number(result.imported || 0) === 0 && Number(result.skipped || 0) > 0) {
|
||||
_openCalendarEventFromEmail(existingEventUid);
|
||||
}
|
||||
try { uiModule.showToast && uiModule.showToast(`${result.imported || 0} event${result.imported === 1 ? '' : 's'} added to ${result.calendar || 'calendar'}`); } catch (_) {}
|
||||
window.dispatchEvent(new CustomEvent('calendar-refresh'));
|
||||
} catch (e) {
|
||||
console.error('calendar attachment import failed', e);
|
||||
try {
|
||||
const { showError } = await import('../ui.js?v=20260916largetoolscroll1');
|
||||
showError(`Couldn't add ${name} to calendar: ${e?.message || 'Import failed'}`);
|
||||
} catch (_) {}
|
||||
} finally {
|
||||
delete openBtn.dataset.opening;
|
||||
openBtn.classList.remove('is-loading');
|
||||
openBtn.innerHTML = originalHtml;
|
||||
}
|
||||
});
|
||||
});
|
||||
reader.querySelectorAll('.email-attachment-open').forEach(openBtn => {
|
||||
if (openBtn.dataset.wired === '1') return;
|
||||
openBtn.dataset.wired = '1';
|
||||
openBtn.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
if (openBtn.dataset.opening === '1') return;
|
||||
const uid = openBtn.dataset.openUid;
|
||||
const index = openBtn.dataset.openIndex;
|
||||
const name = openBtn.dataset.openName || `attachment-${index}`;
|
||||
const sourceFolder = openBtn.dataset.openFolder || useFolder;
|
||||
if (!uid || index == null) return;
|
||||
openBtn.dataset.opening = '1';
|
||||
openBtn.classList.add('is-loading');
|
||||
const origHtml = openBtn.innerHTML;
|
||||
const wp = spinnerModule.createWhirlpool(12);
|
||||
wp.element.style.margin = '0';
|
||||
openBtn.textContent = '';
|
||||
openBtn.appendChild(wp.element);
|
||||
try {
|
||||
const folderQs = encodeURIComponent(sourceFolder);
|
||||
const controller = new AbortController();
|
||||
const timeout = setTimeout(() => controller.abort(), 55000);
|
||||
let res;
|
||||
try {
|
||||
res = await fetch(
|
||||
`${API_BASE}/api/email/attachment-as-doc/${encodeURIComponent(uid)}/${encodeURIComponent(index)}?folder=${folderQs}${_acct()}`,
|
||||
{ method: 'POST', credentials: 'same-origin', signal: controller.signal }
|
||||
);
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
const json = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !json.doc_id) {
|
||||
const msg = (json && json.error) || `HTTP ${res.status}`;
|
||||
try { const { showError } = await import('../ui.js?v=20260916largetoolscroll1'); showError(`Couldn't open ${name}: ${msg}`); } catch (_) { alert(`Couldn't open ${name}: ${msg}`); }
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// Tab the email modal down only when the viewport cannot fit both
|
||||
// Email and the document pane. Desktop keeps a side-by-side layout
|
||||
// when there is room; mobile still gives the document the screen.
|
||||
const ownerModal = openBtn.closest('.modal');
|
||||
if (ownerModal && ownerModal.id && _prepareEmailWindowForDocument(ownerModal)) {
|
||||
try {
|
||||
const ok = Modals.minimize(ownerModal.id);
|
||||
if (!ok) ownerModal.classList.add('hidden');
|
||||
} catch (_) {
|
||||
ownerModal.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
const docMod = await import('../document.js?v=20260916docctx2');
|
||||
const load = (docMod && docMod.loadDocument) || (docMod && docMod.default && docMod.default.loadDocument);
|
||||
if (typeof load === 'function') {
|
||||
await load(json.doc_id);
|
||||
} else {
|
||||
location.href = `/?doc=${encodeURIComponent(json.doc_id)}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Open document failed:', e);
|
||||
try { const { showError } = await import('../ui.js?v=20260916largetoolscroll1'); showError('Document opened but panel could not mount'); } catch (_) {}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('attachment-as-doc error', e);
|
||||
const msg = e && e.name === 'AbortError'
|
||||
? `Opening ${name} timed out. Try downloading it instead.`
|
||||
: `Couldn't open ${name}`;
|
||||
try { const { showError } = await import('../ui.js?v=20260916largetoolscroll1'); showError(msg); } catch (_) {}
|
||||
} finally {
|
||||
delete openBtn.dataset.opening;
|
||||
openBtn.classList.remove('is-loading');
|
||||
openBtn.innerHTML = origHtml;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
reader.querySelectorAll('.email-attachment-download').forEach(downloadBtn => {
|
||||
if (downloadBtn.dataset.wired === '1') return;
|
||||
downloadBtn.dataset.wired = '1';
|
||||
downloadBtn.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
const chip = downloadBtn.closest('.email-attachment-chip');
|
||||
if (!chip) return;
|
||||
// Reuse the established attachment download handler below. Marking the
|
||||
// chip expanded bypasses its old first-click reveal behavior.
|
||||
chip.classList.add('is-expanded');
|
||||
chip.dataset.downloadTrigger = 'button';
|
||||
chip.click();
|
||||
});
|
||||
downloadBtn.addEventListener('keydown', (ev) => {
|
||||
if (ev.key !== 'Enter' && ev.key !== ' ') return;
|
||||
ev.preventDefault();
|
||||
downloadBtn.click();
|
||||
});
|
||||
});
|
||||
|
||||
reader.querySelectorAll('.email-attachment-chip').forEach(chip => {
|
||||
if (chip.dataset.wired === '1') return;
|
||||
chip.dataset.wired = '1';
|
||||
chip.addEventListener('click', async (ev) => {
|
||||
if (ev.target.closest('.email-attachment-open, .email-attachment-calendar-open, .email-attachment-download')) return;
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
const uid = chip.dataset.attUid;
|
||||
const index = chip.dataset.attIndex;
|
||||
const name = chip.dataset.attName || `attachment-${index}`;
|
||||
const sourceFolder = chip.dataset.attFolder || useFolder;
|
||||
if (!uid || index == null) return;
|
||||
if (!chip.classList.contains('is-expanded')) {
|
||||
reader.querySelectorAll('.email-attachment-chip.is-expanded').forEach(other => {
|
||||
if (other !== chip) other.classList.remove('is-expanded');
|
||||
});
|
||||
chip.classList.add('is-expanded');
|
||||
return;
|
||||
}
|
||||
const url = `${API_BASE}/api/email/attachment/${encodeURIComponent(uid)}/${encodeURIComponent(index)}?folder=${encodeURIComponent(sourceFolder)}${_acct()}`;
|
||||
if (_isMobileUA) {
|
||||
delete chip.dataset.downloadTrigger;
|
||||
window.open(url, '_blank');
|
||||
return;
|
||||
}
|
||||
// Swap the paperclip icon for a whirlpool spinner while the
|
||||
// download is in flight, so large attachments give a clear cue
|
||||
// they're loading. Restore on completion.
|
||||
const buttonTriggered = chip.dataset.downloadTrigger === 'button';
|
||||
const iconSvg = buttonTriggered
|
||||
? chip.querySelector('.email-attachment-download > svg')
|
||||
: chip.querySelector(':scope > svg');
|
||||
const origIconHtml = iconSvg ? iconSvg.outerHTML : '';
|
||||
let _wp = null;
|
||||
let _spinnerHost = null;
|
||||
try {
|
||||
const sp = window.spinnerModule || (await import('../spinner.js')).default;
|
||||
_wp = sp.createWhirlpool(12);
|
||||
_spinnerHost = document.createElement('span');
|
||||
_spinnerHost.className = 'email-attachment-spinner';
|
||||
_spinnerHost.style.cssText = 'display:inline-flex;width:12px;height:12px;align-items:center;justify-content:center;flex-shrink:0;position:relative;top:-2px;';
|
||||
_spinnerHost.appendChild(_wp.element);
|
||||
if (iconSvg) iconSvg.replaceWith(_spinnerHost);
|
||||
} catch (_) {}
|
||||
const origOpacity = chip.style.opacity;
|
||||
chip.style.opacity = '0.85';
|
||||
try {
|
||||
const res = await fetch(url, { credentials: 'same-origin' });
|
||||
if (!res.ok) {
|
||||
console.error('attachment download failed', res.status, await res.text().catch(() => ''));
|
||||
location.href = url;
|
||||
return;
|
||||
}
|
||||
const blob = await res.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = blobUrl;
|
||||
a.download = name;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
|
||||
} catch (e) {
|
||||
console.error('attachment download error', e);
|
||||
location.href = url;
|
||||
} finally {
|
||||
delete chip.dataset.downloadTrigger;
|
||||
chip.style.opacity = origOpacity;
|
||||
if (_spinnerHost && _spinnerHost.parentNode && origIconHtml) {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = origIconHtml;
|
||||
const restored = tmp.firstChild;
|
||||
if (restored) _spinnerHost.replaceWith(restored);
|
||||
}
|
||||
if (_wp) { try { _wp.destroy(); } catch (_) {} }
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Heuristic: skip "attachments" that are clearly inline images used by
|
||||
// signatures / quoted-reply headers (small image files, Outlook-style
|
||||
// image001.png placeholders, logo*.png, etc.). They aren't real user-
|
||||
// shared attachments and adding them to the chips makes every email look
|
||||
// like it has content the user needs to act on.
|
||||
function _isLikelySignatureImage(a) {
|
||||
if (!a || !a.filename) return false;
|
||||
const name = String(a.filename).toLowerCase();
|
||||
const isImage = /\.(png|jpe?g|gif|bmp|svg|webp)$/i.test(name);
|
||||
if (!isImage) return false;
|
||||
const size = Number(a.size) || 0;
|
||||
// Outlook / Gmail inline image placeholders always look like this.
|
||||
if (/^image\d{3,}\.(png|jpe?g|gif)$/i.test(name)) return true;
|
||||
if (/^(signature|logo|sig|footer|banner)[-_\d]*\.(png|jpe?g|gif|svg)$/i.test(name)) return true;
|
||||
// Most signature logos / inline thumbnails are < 30 KB. Real user-
|
||||
// shared images (screenshots, photos) are typically 50 KB+.
|
||||
if (size > 0 && size < 30 * 1024) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Build the attachments header+chips HTML for an email read response. Pulled
|
||||
// out so both the initial-open and the swap-reader paths can render it.
|
||||
export function _buildAttsHtmlFor(uid, data) {
|
||||
if (!data) return '';
|
||||
const _OPENABLE_RE = /\.(pdf|docx|txt|md|markdown|eml)$/i;
|
||||
const _CALENDAR_RE = /\.(calendar|ics|ical)$/i;
|
||||
const currentAttachments = Array.isArray(data.attachments) ? data.attachments : [];
|
||||
const relatedAttachments = Array.isArray(data.related_attachments) ? data.related_attachments : [];
|
||||
if (!currentAttachments.length && !relatedAttachments.length) return '';
|
||||
const visible = currentAttachments.filter(a => !_isLikelySignatureImage(a));
|
||||
const hidden = currentAttachments.filter(a => _isLikelySignatureImage(a));
|
||||
const related = relatedAttachments.filter(a => !_isLikelySignatureImage(a));
|
||||
if (!visible.length && !related.length && state._libViewInlineImages === false) return '';
|
||||
const renderChip = (a, extraClass = '') => {
|
||||
const calendarAttachment = _CALENDAR_RE.test(a.filename || '');
|
||||
const openable = _OPENABLE_RE.test(a.filename || '');
|
||||
const chipUid = a.source_uid || a.uid || uid;
|
||||
const chipFolder = a.source_folder || data.folder || state._libFolder || 'INBOX';
|
||||
const openBtn = calendarAttachment
|
||||
? `<span class="email-attachment-calendar-open" role="button" tabindex="0" aria-label="Add to calendar" title="Add to calendar" data-open-uid="${_esc(chipUid)}" data-open-index="${a.index}" data-open-name="${_esc(a.filename)}" data-open-folder="${_esc(chipFolder)}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="m8 15 2 2 5-5"/></svg></span>`
|
||||
: openable
|
||||
? `<span class="email-attachment-open" role="button" tabindex="0" aria-label="Open in document editor" title="Open in document editor" data-open-uid="${_esc(chipUid)}" data-open-index="${a.index}" data-open-name="${_esc(a.filename)}" data-open-folder="${_esc(chipFolder)}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><line x1="8" y1="9" x2="10" y2="9"/></svg></span>`
|
||||
: '';
|
||||
const downloadBtn = `<span class="email-attachment-download" role="button" tabindex="0" aria-label="Download attachment" title="Download attachment"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span>`;
|
||||
return `<button type="button" class="email-attachment-chip${extraClass}" data-att-uid="${_esc(chipUid)}" data-att-index="${a.index}" data-att-name="${_esc(a.filename)}" data-att-folder="${_esc(chipFolder)}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.8l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg><span>${_esc(a.filename)}</span><span class="att-size">${Math.round((a.size||0)/1024)} KB</span>${openBtn}${downloadBtn}</button>`;
|
||||
};
|
||||
const chips = visible.map(a => renderChip(a)).join('');
|
||||
const hiddenChips = hidden.map(a => renderChip(a, ' email-attachment-chip-muted')).join('');
|
||||
const relatedChips = related.map(a => renderChip(a, ' email-attachment-chip-related')).join('');
|
||||
const visibleSection = visible.length
|
||||
? '<div class="email-reader-atts">' + chips + '</div>'
|
||||
: '';
|
||||
const relatedSection = related.length
|
||||
? '<div class="email-reader-atts-hidden-note">From earlier in this thread</div><div class="email-reader-atts email-reader-atts-related">' + relatedChips + '</div>'
|
||||
: '';
|
||||
const hiddenSection = hidden.length && state._libViewInlineImages !== false
|
||||
? '<div class="email-reader-atts-hidden-note">Filtered inline images / signature files</div><div class="email-reader-atts email-reader-atts-hidden">' + hiddenChips + '</div>'
|
||||
: '';
|
||||
const label = visible.length
|
||||
? `Attachments (${visible.length + related.length})`
|
||||
: related.length
|
||||
? `Thread attachments (${related.length})`
|
||||
: state._libViewInlineImages === false
|
||||
? 'Attachments'
|
||||
: `Hidden inline attachments (${hidden.length})`;
|
||||
const startCollapsed = !visible.length && !related.length;
|
||||
const downloadAllBtn = visible.length > 4
|
||||
? `<button type="button" class="email-attachments-download-all" title="Download all attachments" data-att-uid="${_esc(uid)}" data-att-folder="${_esc(data.folder || state._libFolder || 'INBOX')}" data-att-count="${visible.length}"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><span>All</span></button>`
|
||||
: '';
|
||||
return (
|
||||
`<div class="email-reader-atts-wrap${startCollapsed ? ' collapsed' : ''}">`
|
||||
+ '<div class="email-reader-atts-header email-summary-toggle" role="button" tabindex="0">'
|
||||
+ '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.8l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>'
|
||||
+ `<span>${label}</span>`
|
||||
+ downloadAllBtn
|
||||
+ '<svg class="email-summary-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-left:auto;transition:transform .15s ease;"><polyline points="6 9 12 15 18 9"/></svg>'
|
||||
+ '</div>'
|
||||
+ visibleSection
|
||||
+ relatedSection
|
||||
+ hiddenSection
|
||||
+ '</div>'
|
||||
);
|
||||
}
|
||||
|
||||
async function _ensureEmailAttachmentData(uid, folder, data, knownHasAttachments = false) {
|
||||
if (!data) return data;
|
||||
const current = Array.isArray(data.attachments) ? data.attachments : [];
|
||||
const related = Array.isArray(data.related_attachments) ? data.related_attachments : [];
|
||||
const shouldFetch = data.attachments_deferred || (knownHasAttachments && !current.length && !related.length);
|
||||
if (!shouldFetch) return data;
|
||||
try {
|
||||
const metaRes = await fetch(`${API_BASE}/api/email/attachments/${encodeURIComponent(uid)}?folder=${encodeURIComponent(folder || 'INBOX')}${_acct()}`);
|
||||
const meta = await metaRes.json().catch(() => ({}));
|
||||
if (metaRes.ok && Array.isArray(meta.attachments)) {
|
||||
return {
|
||||
...data,
|
||||
attachments: meta.attachments,
|
||||
related_attachments: related,
|
||||
attachments_deferred: false,
|
||||
};
|
||||
}
|
||||
} catch (_) {}
|
||||
// Do not full-fetch the message during ordinary open. That can download and
|
||||
// parse large MIME bodies immediately after the reader renders, keeping IMAP
|
||||
// busy and making the UI feel stuck. Full attachment lookup is still available
|
||||
// from explicit attachment/download/forward actions.
|
||||
return data;
|
||||
}
|
||||
|
||||
export function _wireEmailAttachmentWrap(reader, folder) {
|
||||
if (!reader) return;
|
||||
const attsWrap = reader.querySelector('.email-reader-atts-wrap');
|
||||
if (attsWrap && !attsWrap.dataset.wired) {
|
||||
attsWrap.dataset.wired = '1';
|
||||
const attsToggle = attsWrap.querySelector('.email-reader-atts-header');
|
||||
if (attsToggle) {
|
||||
attsToggle.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
attsWrap.classList.toggle('collapsed');
|
||||
});
|
||||
attsToggle.addEventListener('keydown', (ev) => {
|
||||
if (ev.key === 'Enter' || ev.key === ' ') {
|
||||
ev.preventDefault();
|
||||
attsWrap.classList.toggle('collapsed');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
try { _wireAttachmentHandlers(reader, folder); } catch {}
|
||||
}
|
||||
|
||||
export function _loadDeferredAttachmentsIntoReader(reader, uid, folder, data, knownHasAttachments = false) {
|
||||
if (!reader || !uid || !data) return;
|
||||
const current = Array.isArray(data.attachments) ? data.attachments : [];
|
||||
const related = Array.isArray(data.related_attachments) ? data.related_attachments : [];
|
||||
if (!data.attachments_deferred && !(knownHasAttachments && !current.length && !related.length)) return;
|
||||
const body = reader.querySelector('.email-reader-body');
|
||||
if (!body) return;
|
||||
const loading = document.createElement('div');
|
||||
loading.className = 'email-reader-atts-wrap email-reader-atts-loading';
|
||||
loading.style.cssText = 'min-height:34px;display:flex;flex-direction:row;align-items:center;gap:7px;padding:6px 14px;color:var(--fg);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;opacity:.7;';
|
||||
const loadingSpinner = spinnerModule.createWhirlpool(12);
|
||||
loadingSpinner.element.style.margin = '0';
|
||||
loading.appendChild(loadingSpinner.element);
|
||||
loading.appendChild(document.createTextNode('Loading attachments…'));
|
||||
const existingWrap = reader.querySelector('.email-reader-atts-wrap');
|
||||
if (existingWrap) existingWrap.replaceWith(loading);
|
||||
else body.insertAdjacentElement('beforebegin', loading);
|
||||
_ensureEmailAttachmentData(uid, folder, data, knownHasAttachments).then(fullData => {
|
||||
if (!reader.isConnected || !fullData) return;
|
||||
loading.remove();
|
||||
try { loadingSpinner.destroy(); } catch (_) {}
|
||||
const visibleCurrent = (fullData.attachments || []).filter(a => !_isLikelySignatureImage(a));
|
||||
const matchingEmail = (state._libEmails || []).find(em => (
|
||||
String(em.uid) === String(uid)
|
||||
&& String(em.account_id || state._libAccountId || '') === String(reader.closest('[data-email-account]')?.dataset.emailAccount || state._libAccountId || '')
|
||||
));
|
||||
if (matchingEmail) matchingEmail.has_attachments = visibleCurrent.length > 0;
|
||||
if (!visibleCurrent.length) {
|
||||
reader.closest('.doclib-card')?.querySelector('.email-card-attachment')?.remove();
|
||||
}
|
||||
const attsHtml = _buildAttsHtmlFor(uid, fullData);
|
||||
if (!attsHtml) return;
|
||||
const oldWrap = reader.querySelector('.email-reader-atts-wrap');
|
||||
if (oldWrap) {
|
||||
const tmp = document.createElement('div');
|
||||
tmp.innerHTML = attsHtml;
|
||||
oldWrap.replaceWith(tmp.firstElementChild);
|
||||
} else {
|
||||
body.insertAdjacentHTML('beforebegin', attsHtml);
|
||||
}
|
||||
_wireEmailAttachmentWrap(reader, folder);
|
||||
}).catch(() => {
|
||||
loading.remove();
|
||||
try { loadingSpinner.destroy(); } catch (_) {}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,871 @@
|
||||
// static/js/emailLibrary/bodyRender.js
|
||||
//
|
||||
// Turning a fetched message into reader HTML: the plain and threaded body
|
||||
// paths, inline MIME image handling, and the quote/thread folding that sits on
|
||||
// top of the detectors in ./signatureFold.js.
|
||||
//
|
||||
// Everything here writes into a reader element via innerHTML, so every branch
|
||||
// that touches server-supplied HTML goes through `_sanitizeHtml` from
|
||||
// ./utils.js first. `tests/test_security_regressions.py` counts those call
|
||||
// sites against the raw per-turn HTML reads, package-wide — so do not name that
|
||||
// property in a comment, or the count stops matching.
|
||||
|
||||
import {
|
||||
_QUOTE_ICON,
|
||||
_SIG_ICON,
|
||||
_extractQuoteMeta,
|
||||
_extractTurnMetaFromBlockquote,
|
||||
_foldSignature,
|
||||
_foldSummary,
|
||||
_harvestAttribution,
|
||||
_isBloatedSig,
|
||||
_looksLikeSignature,
|
||||
} from './signatureFold.js';
|
||||
import { state } from './state.js';
|
||||
import {
|
||||
_SIG_BLOAT_MIN_CHARS,
|
||||
_TALON_ORIG_RE,
|
||||
_TALON_WROTE,
|
||||
_esc,
|
||||
_escLinkify,
|
||||
_formatBubbleDate,
|
||||
_formatRecipients,
|
||||
_initials,
|
||||
_parseTurnMeta,
|
||||
_sanitizeHtml,
|
||||
_senderColor,
|
||||
} from './utils.js';
|
||||
import { _disableInlineImages } from './settingsPage.js';
|
||||
|
||||
const API_BASE = window.location.origin;
|
||||
|
||||
/**
|
||||
* Wrap a probable signature block in a collapsed <details> so it stops
|
||||
* eating the whole reader. We try, in priority order:
|
||||
* 1. Mail-client signature wrappers — Gmail's `gmail_signature` div is
|
||||
* explicit, no guessing required. Same for Apple Mail's data-smartmail.
|
||||
* 2. The standard "-- " RFC 3676 sig delimiter.
|
||||
* 3. A common closing phrase ("Best regards", "Cheers", etc.) on its own
|
||||
* line — fuzzier, but catches sigs without the dash marker.
|
||||
* 4. "Sent from my iPhone/Android" / "Get Outlook for ..." mobile-client
|
||||
* boilerplate.
|
||||
* Anything matched gets wrapped from the marker through end-of-body.
|
||||
*/
|
||||
/**
|
||||
* Render the email body with sig/quote folds. If the backend has cached
|
||||
* LLM-detected boundary offsets (data.boundaries), use those for an exact
|
||||
* fold based on plain-text positions. Otherwise fall back to the regex
|
||||
* detectors. The plain-body branch is always preferred when boundaries
|
||||
* exist because the offsets are computed against plain text.
|
||||
*/
|
||||
// Global escape hatch — when the server's thread parser misfires (it
|
||||
// occasionally splits a single reply into two bogus "turns" by treating a
|
||||
// signature/disclaimer as its own message), the user can flip this off to
|
||||
// fall back to plain rendering. Survives reloads.
|
||||
const _BUBBLES_DISABLED_KEY = 'odysseus.email.bubblesDisabled';
|
||||
// Threaded chat-bubble email view is DISABLED for now — too buggy to
|
||||
// ship. Force plain-text rendering everywhere by always returning true.
|
||||
// Re-enable by restoring the localStorage-backed body + the toggle
|
||||
// menu item in the reader's More menu.
|
||||
function _bubblesDisabled() {
|
||||
return true;
|
||||
}
|
||||
function _setBubblesDisabled(v) {
|
||||
try { localStorage.setItem(_BUBBLES_DISABLED_KEY, v ? '1' : '0'); } catch {}
|
||||
}
|
||||
|
||||
export function _renderEmailBody(data) {
|
||||
const plain = (typeof data?.body === 'string' && data.body.length) ? data.body : '';
|
||||
const folder = String(data?.folder || '').toLowerCase();
|
||||
const isSentFolder = folder.includes('sent');
|
||||
const fromAddr = String(data?.from_address || '').toLowerCase().trim();
|
||||
const isMine = !!fromAddr && _meEmailAddrs().has(fromAddr);
|
||||
|
||||
// Messages authored by the user (Sent folder or self-sent copies in INBOX)
|
||||
// are current authored text. Do not let cached boundaries or HTML
|
||||
// blockquote parsing hide the whole thing behind "Earlier reply".
|
||||
if ((isSentFolder || isMine) && plain) {
|
||||
const plainTurns = _renderPlaintextThread(plain);
|
||||
if (plainTurns && !/^\s*<details\b/i.test(plainTurns.trim())) {
|
||||
return _foldSignature(plainTurns, null);
|
||||
}
|
||||
return _foldSignature(_escLinkify(plain).replace(/\n/g, '<br>'), null);
|
||||
}
|
||||
|
||||
// Prefer the normalized plain-text thread when the message contains
|
||||
// explicit reply markers. HTML mail from Outlook/Gmail commonly wraps the
|
||||
// same quoted message in several nested blockquotes; feeding that markup
|
||||
// to the HTML walker creates phantom chains such as "Earlier reply >
|
||||
// Earlier reply > sender". The plain representation has the actual quote
|
||||
// levels and gives us one stable fold per real quoted message.
|
||||
const hasPlainThreadMarkers = plain && (
|
||||
/^\s*>/m.test(plain)
|
||||
|| /^\s*-{5,}\s*(?:Previous message|Original message)\s*-{5,}\s*$/im.test(plain)
|
||||
|| /^\s*On\s.+?\s(?:wrote|skrev|schrieb|écrit|escribió)\s*:\s*$/im.test(plain)
|
||||
);
|
||||
if (hasPlainThreadMarkers) {
|
||||
const plainThread = _renderPlaintextThread(plain);
|
||||
if (plainThread) return _foldSignature(plainThread, data && data.sender_signature || null);
|
||||
}
|
||||
|
||||
// Prefer the server-cached thread parse — that's the richest structure
|
||||
// and the one the chat-bubble layout is built around. Skip when the user
|
||||
// has manually disabled bubble rendering.
|
||||
if (!_bubblesDisabled() && Array.isArray(data && data.thread_turns) && data.thread_turns.length) {
|
||||
return _foldSignature(
|
||||
_renderTurnsAsBubbles(data.thread_turns, data),
|
||||
data && data.sender_signature || null,
|
||||
);
|
||||
}
|
||||
const b = data && data.boundaries;
|
||||
// Use cached boundaries when present AND we have plain-text body to slice
|
||||
if (b && plain && (b.sig_start >= 0 || b.quote_start >= 0)) {
|
||||
// Pick the EARLIER of the two as the cut for "everything below this is
|
||||
// foldable", but render sig and quote with their own labels.
|
||||
let sig = (typeof b.sig_start === 'number' && b.sig_start >= 0) ? b.sig_start : -1;
|
||||
let quote = (typeof b.quote_start === 'number' && b.quote_start >= 0) ? b.quote_start : -1;
|
||||
// Clamp
|
||||
if (sig >= plain.length) sig = -1;
|
||||
if (quote >= plain.length) quote = -1;
|
||||
let head = plain;
|
||||
let sigSection = '';
|
||||
let quoteSection = '';
|
||||
if (sig >= 0 && quote >= 0) {
|
||||
const earlier = Math.min(sig, quote);
|
||||
head = plain.slice(0, earlier);
|
||||
if (sig < quote) {
|
||||
sigSection = plain.slice(sig, quote);
|
||||
quoteSection = plain.slice(quote);
|
||||
} else {
|
||||
quoteSection = plain.slice(quote, sig);
|
||||
sigSection = plain.slice(sig);
|
||||
}
|
||||
} else if (sig >= 0) {
|
||||
head = plain.slice(0, sig);
|
||||
sigSection = plain.slice(sig);
|
||||
} else {
|
||||
head = plain.slice(0, quote);
|
||||
quoteSection = plain.slice(quote);
|
||||
}
|
||||
const fmt = (s) => _escLinkify(s).replace(/\n/g, '<br>');
|
||||
let out = fmt(head);
|
||||
if (quoteSection) {
|
||||
out += '<details class="email-quote-fold">'
|
||||
+ _foldSummary('Earlier thread', _QUOTE_ICON, _extractQuoteMeta(quoteSection))
|
||||
+ fmt(quoteSection) + '</details>';
|
||||
}
|
||||
if (sigSection) {
|
||||
const sigHtml = fmt(sigSection);
|
||||
if (_isBloatedSig(sigHtml)) {
|
||||
out += '<details class="email-sig-fold">' + _foldSummary('Signature', _SIG_ICON)
|
||||
+ sigHtml + '</details>';
|
||||
} else {
|
||||
// Short closing — leave inline; folding would just add chrome.
|
||||
out += sigHtml;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
// Fallback: client-side parse (HTML or plaintext).
|
||||
const hintSig = (data && data.sender_signature) || null;
|
||||
const isHtml = !!data.body_html;
|
||||
let rendered;
|
||||
if (isHtml) {
|
||||
rendered = _sanitizeHtml(data.body_html);
|
||||
} else {
|
||||
const plainTurns = _renderPlaintextThread(data.body || '');
|
||||
if (plainTurns) return _foldSignature(plainTurns, hintSig);
|
||||
rendered = _escLinkify(data.body || '').replace(/\n/g, '<br>');
|
||||
}
|
||||
const threaded = _renderThreadStructure(rendered);
|
||||
if (threaded) return _prepareEmailInlineImages(_foldSignature(threaded, hintSig));
|
||||
return _prepareEmailInlineImages(_foldSignature(_foldQuotedReplies(rendered), hintSig));
|
||||
}
|
||||
|
||||
export function _safeRenderEmailBody(data) {
|
||||
try {
|
||||
return _prepareEmailInlineImages(_renderEmailBody(data));
|
||||
} catch (e) {
|
||||
console.error('email body render failed:', e);
|
||||
const plain = (typeof data?.body === 'string') ? data.body : '';
|
||||
if (plain) return _escLinkify(plain).replace(/\n/g, '<br>');
|
||||
if (data?.body_html) return _prepareEmailInlineImages(_sanitizeHtml(data.body_html));
|
||||
return '<span style="opacity:.65">No body</span>';
|
||||
}
|
||||
}
|
||||
|
||||
function _prepareEmailInlineImages(html) {
|
||||
const raw = String(html || '');
|
||||
if (!/<img[\s>]/i.test(raw)) return raw;
|
||||
const doc = new DOMParser().parseFromString(`<div>${raw}</div>`, 'text/html');
|
||||
const root = doc.body.firstElementChild;
|
||||
if (!root) return raw;
|
||||
root.querySelectorAll('img').forEach((img, idx) => {
|
||||
const src = (img.getAttribute('src') || '').trim();
|
||||
const alt = (img.getAttribute('alt') || img.getAttribute('title') || '').trim();
|
||||
const isHttp = /^https?:\/\//i.test(src);
|
||||
const isCid = /^cid:/i.test(src);
|
||||
const cid = isCid ? src.replace(/^cid:/i, '').replace(/^<|>$/g, '').trim() : '';
|
||||
const label = alt || (isCid ? 'Inline image' : 'Remote image');
|
||||
const ph = doc.createElement('span');
|
||||
ph.className = 'email-inline-image-placeholder';
|
||||
ph.setAttribute('role', 'group');
|
||||
ph.setAttribute('aria-label', label);
|
||||
if (src) ph.dataset.emailImgSrc = src;
|
||||
if (cid) ph.dataset.emailImgCid = cid;
|
||||
ph.innerHTML = `
|
||||
<span class="email-inline-image-skeleton">
|
||||
<span class="email-inline-image-icon">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="email-inline-image-info">
|
||||
<span class="email-inline-image-title">${_esc(label)}</span>
|
||||
<span class="email-inline-image-sub">${isHttp ? 'Remote image blocked' : isCid ? 'Inline image hidden' : 'Image unavailable'}</span>
|
||||
</span>
|
||||
<span class="email-inline-image-actions">
|
||||
${isHttp ? `<a class="email-inline-image-btn email-inline-image-download-btn" href="${_esc(src)}" target="_blank" rel="noopener noreferrer" download title="Download" aria-label="Download"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></a>` : ''}
|
||||
${isCid ? `<button type="button" class="email-inline-image-btn email-inline-image-download-btn" data-email-img-download="${idx}" title="Download" aria-label="Download"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>` : ''}
|
||||
</span>
|
||||
`;
|
||||
img.replaceWith(ph);
|
||||
});
|
||||
return root.innerHTML;
|
||||
}
|
||||
|
||||
export function _wireEmailInlineImages(reader) {
|
||||
if (!reader) return;
|
||||
const placeholders = Array.from(reader.querySelectorAll('.email-inline-image-placeholder'));
|
||||
const visiblePlaceholders = placeholders.filter(ph => (
|
||||
ph.isConnected &&
|
||||
(ph.dataset.emailImgSrc || ph.dataset.emailImgCid) &&
|
||||
getComputedStyle(ph).display !== 'none'
|
||||
));
|
||||
const autoLoadInlineImages = state._libViewInlineImages !== false;
|
||||
const manualPlaceholders = autoLoadInlineImages
|
||||
? visiblePlaceholders.filter(ph => !ph.dataset.emailImgCid)
|
||||
: visiblePlaceholders;
|
||||
const existingBulkBar = reader.querySelector('.email-inline-image-load-all');
|
||||
if (!manualPlaceholders.length) existingBulkBar?.remove();
|
||||
const loadPlaceholder = (ph) => {
|
||||
if (!ph || !ph.isConnected) return;
|
||||
const src = (ph.dataset.emailImgSrc || '').trim();
|
||||
const cid = (ph.dataset.emailImgCid || '').trim();
|
||||
const ctxRoot = reader.dataset?.emailUid
|
||||
? reader
|
||||
: ph.closest('[data-email-uid]') || reader.closest?.('[data-email-uid]');
|
||||
const folder = ctxRoot?.dataset?.emailFolder || reader.dataset?.emailFolder || state._libFolder || 'INBOX';
|
||||
const account = ctxRoot?.dataset?.emailAccount || reader.dataset?.emailAccount || state._libAccountId || '';
|
||||
const uid = ctxRoot?.dataset?.emailUid || reader.dataset?.emailUid || '';
|
||||
const inlineUrl = () => {
|
||||
if (!uid || !cid) return '';
|
||||
const params = new URLSearchParams({ cid, folder });
|
||||
if (account) params.set('account_id', account);
|
||||
return `${API_BASE}/api/email/inline-image/${encodeURIComponent(uid)}?${params.toString()}`;
|
||||
};
|
||||
const isRemoteImage = /^https?:\/\//i.test(src);
|
||||
const isCidImage = !!cid && !isRemoteImage;
|
||||
const loadSrc = isRemoteImage ? src : inlineUrl();
|
||||
if (!loadSrc || ph.classList.contains('is-loading')) return;
|
||||
ph.classList.remove('is-error');
|
||||
ph.classList.add('is-loading');
|
||||
const sub = ph.querySelector('.email-inline-image-sub');
|
||||
if (sub) sub.textContent = 'Loading image...';
|
||||
const actions = ph.querySelector('.email-inline-image-actions');
|
||||
if (actions) actions.style.display = 'none';
|
||||
const img = document.createElement('img');
|
||||
img.className = 'email-inline-image-loaded';
|
||||
img.alt = ph.querySelector('.email-inline-image-title')?.textContent || 'Loaded email image';
|
||||
img.loading = 'eager';
|
||||
img.referrerPolicy = 'no-referrer';
|
||||
let settled = false;
|
||||
let objectUrl = '';
|
||||
let frame = null;
|
||||
let directFallbackUsed = false;
|
||||
const ensureFrame = () => {
|
||||
if (frame) return frame;
|
||||
frame = document.createElement('span');
|
||||
frame.className = 'email-inline-image-frame is-loading';
|
||||
frame.appendChild(img);
|
||||
if (ph.isConnected) ph.replaceWith(frame);
|
||||
return frame;
|
||||
};
|
||||
const showLoaded = () => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
if (frame) frame.classList.remove('is-loading');
|
||||
img.classList.add('is-visible');
|
||||
};
|
||||
const showError = (err) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
if (frame?.isConnected) frame.replaceWith(ph);
|
||||
ph.classList.remove('is-loading');
|
||||
ph.classList.add('is-error');
|
||||
if (sub) sub.textContent = err?.message ? `Image failed: ${err.message}` : 'Image failed to load';
|
||||
if (actions) actions.style.display = '';
|
||||
if (objectUrl) {
|
||||
try { URL.revokeObjectURL(objectUrl); } catch {}
|
||||
}
|
||||
};
|
||||
const loadDirect = () => {
|
||||
directFallbackUsed = true;
|
||||
ensureFrame();
|
||||
img.src = loadSrc;
|
||||
if (img.complete && img.naturalWidth > 0) showLoaded();
|
||||
};
|
||||
img.addEventListener('load', showLoaded, { once: true });
|
||||
img.addEventListener('error', () => {
|
||||
if (!directFallbackUsed && objectUrl && isCidImage) {
|
||||
try { URL.revokeObjectURL(objectUrl); } catch {}
|
||||
objectUrl = '';
|
||||
loadDirect();
|
||||
return;
|
||||
}
|
||||
showError();
|
||||
}, { once: true });
|
||||
if (isCidImage || isRemoteImage) {
|
||||
loadDirect();
|
||||
setTimeout(() => {
|
||||
if (!settled && frame) {
|
||||
frame.classList.add('is-loading');
|
||||
}
|
||||
}, 12000);
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 20000);
|
||||
fetch(loadSrc, { credentials: 'same-origin', signal: controller.signal })
|
||||
.then(async res => {
|
||||
clearTimeout(timeoutId);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const blob = await res.blob();
|
||||
if (!blob || !blob.size) throw new Error('Empty image');
|
||||
const type = blob.type && blob.type.startsWith('image/') ? blob.type : 'image/png';
|
||||
objectUrl = URL.createObjectURL(blob.type === type ? blob : new Blob([blob], { type }));
|
||||
ensureFrame();
|
||||
img.src = objectUrl;
|
||||
if (img.complete && img.naturalWidth > 0) showLoaded();
|
||||
if (!settled && typeof img.decode === 'function') {
|
||||
img.decode().then(showLoaded).catch(() => {
|
||||
if (img.complete && img.naturalWidth === 0) showError();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
clearTimeout(timeoutId);
|
||||
showError(err?.name === 'AbortError' ? new Error('request timed out') : err);
|
||||
});
|
||||
setTimeout(() => {
|
||||
if (!settled && !frame) {
|
||||
ph.classList.remove('is-loading');
|
||||
if (sub) sub.textContent = 'Still loading...';
|
||||
if (actions) actions.style.display = '';
|
||||
}
|
||||
}, 12000);
|
||||
};
|
||||
if (manualPlaceholders.length && !reader.querySelector('.email-inline-image-load-all')) {
|
||||
const first = manualPlaceholders[0];
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'email-inline-image-load-all';
|
||||
const label = autoLoadInlineImages
|
||||
? `${manualPlaceholders.length} external image${manualPlaceholders.length === 1 ? '' : 's'} blocked`
|
||||
: `${manualPlaceholders.length} hidden inline image${manualPlaceholders.length === 1 ? '' : 's'}`;
|
||||
bar.innerHTML = `
|
||||
<span>${label}</span>
|
||||
<button type="button" data-email-img-dismiss-all>Dismiss</button>
|
||||
<button type="button" data-email-img-load-all>Load all</button>
|
||||
`;
|
||||
bar.querySelector('[data-email-img-load-all]')?.addEventListener('click', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
bar.remove();
|
||||
manualPlaceholders.forEach(loadPlaceholder);
|
||||
});
|
||||
bar.querySelector('[data-email-img-dismiss-all]')?.addEventListener('click', ev => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
bar.remove();
|
||||
manualPlaceholders.forEach(ph => ph.remove());
|
||||
_disableInlineImages().catch(() => {});
|
||||
});
|
||||
first.parentNode?.insertBefore(bar, first);
|
||||
}
|
||||
placeholders.forEach(ph => {
|
||||
if (ph.dataset.wired !== '1') {
|
||||
ph.dataset.wired = '1';
|
||||
const src = (ph.dataset.emailImgSrc || '').trim();
|
||||
const cid = (ph.dataset.emailImgCid || '').trim();
|
||||
const ctxRoot = reader.dataset?.emailUid
|
||||
? reader
|
||||
: ph.closest('[data-email-uid]') || reader.closest?.('[data-email-uid]');
|
||||
const folder = ctxRoot?.dataset?.emailFolder || reader.dataset?.emailFolder || state._libFolder || 'INBOX';
|
||||
const account = ctxRoot?.dataset?.emailAccount || reader.dataset?.emailAccount || state._libAccountId || '';
|
||||
const uid = ctxRoot?.dataset?.emailUid || reader.dataset?.emailUid || '';
|
||||
const inlineUrl = () => {
|
||||
if (!uid || !cid) return '';
|
||||
const params = new URLSearchParams({ cid, folder });
|
||||
if (account) params.set('account_id', account);
|
||||
return `${API_BASE}/api/email/inline-image/${encodeURIComponent(uid)}?${params.toString()}`;
|
||||
};
|
||||
ph.querySelector('[data-email-img-download]')?.addEventListener('click', (ev) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const url = inlineUrl();
|
||||
if (!url) return;
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'inline-image';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
});
|
||||
}
|
||||
const cid = (ph.dataset.emailImgCid || '').trim();
|
||||
if (autoLoadInlineImages && cid && ph.isConnected && ph.dataset.emailImgAutoRequested !== '1') {
|
||||
ph.dataset.emailImgAutoRequested = '1';
|
||||
loadPlaceholder(ph);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Chat-bubble rendering for email threads ──
|
||||
// Each parsed turn renders as a chat bubble. Bubbles for the active
|
||||
// account's outgoing replies align right; everyone else aligns left.
|
||||
// Order is reversed so the oldest message sits at the top of the
|
||||
// conversation and the newest (the message currently being read) sits
|
||||
// at the bottom — matches the mental model people have from chat.
|
||||
|
||||
function _meEmailAddrs() {
|
||||
const set = new Set();
|
||||
for (const a of (state._libAccounts || [])) {
|
||||
if (a && a.from_address) set.add(String(a.from_address).toLowerCase().trim());
|
||||
if (a && a.imap_user) set.add(String(a.imap_user).toLowerCase().trim());
|
||||
}
|
||||
return set;
|
||||
}
|
||||
|
||||
// _parseTurnMeta / _formatBubbleDate / _formatRecipients / _senderColor /
|
||||
// _initials live in ./emailLibrary/utils.js
|
||||
|
||||
function _renderTurnsAsBubbles(turns, data) {
|
||||
if (!Array.isArray(turns) || !turns.length) return '';
|
||||
const mineSet = _meEmailAddrs();
|
||||
const lvl0Email = String(data && data.from_address || '').toLowerCase().trim();
|
||||
const lvl0Mine = !!lvl0Email && mineSet.has(lvl0Email);
|
||||
const lvl0Author = (data && (data.from_name || data.from_address)) || '';
|
||||
const lvl0Date = _formatBubbleDate(data && data.date);
|
||||
|
||||
// Newest reply on top, older history below. Turns come ordered shallow→deep
|
||||
// (level 0 = current reply, deeper levels = older quoted material) so we
|
||||
// render in source order without reversing.
|
||||
const ordered = turns.slice();
|
||||
|
||||
// Gather per-turn sender identity + frequency for the no-self case below.
|
||||
const turnIdentity = ordered.map((t) => {
|
||||
if (t.level === 0) {
|
||||
return { email: lvl0Email, author: lvl0Author };
|
||||
}
|
||||
const p = _parseTurnMeta(t.meta || '');
|
||||
return { email: p.email, author: p.author };
|
||||
});
|
||||
const anyMine = turnIdentity.some(x => x.email && mineSet.has(x.email));
|
||||
// When the user isn't a participant in this thread (forwarded chains,
|
||||
// historical archives, etc.), assign the two most frequent senders to
|
||||
// opposite sides so the conversation still reads side-to-side. Third+
|
||||
// parties fall back to hash mod 2.
|
||||
const sideForKey = (() => {
|
||||
if (anyMine) return null;
|
||||
const freq = new Map();
|
||||
const firstSeen = new Map();
|
||||
turnIdentity.forEach((x, i) => {
|
||||
const key = (x.email || x.author || '').toLowerCase();
|
||||
if (!key) return;
|
||||
freq.set(key, (freq.get(key) || 0) + 1);
|
||||
if (!firstSeen.has(key)) firstSeen.set(key, i);
|
||||
});
|
||||
const sorted = [...freq.entries()]
|
||||
.sort((a, b) => (b[1] - a[1]) || (firstSeen.get(a[0]) - firstSeen.get(b[0])));
|
||||
const leftKey = sorted[0] && sorted[0][0];
|
||||
const rightKey = sorted[1] && sorted[1][0];
|
||||
return (key) => {
|
||||
if (!key) return 'theirs';
|
||||
if (key === leftKey) return 'theirs';
|
||||
if (key === rightKey) return 'mine';
|
||||
// Stable hash for 3rd+ parties.
|
||||
let h = 0;
|
||||
for (let i = 0; i < key.length; i++) h = ((h << 5) - h + key.charCodeAt(i)) | 0;
|
||||
return (h & 1) ? 'mine' : 'theirs';
|
||||
};
|
||||
})();
|
||||
|
||||
const rows = ordered.map((t, i) => {
|
||||
let isMine, author, date;
|
||||
if (t.level === 0) {
|
||||
isMine = lvl0Mine;
|
||||
author = lvl0Author || 'Me';
|
||||
date = lvl0Date;
|
||||
} else {
|
||||
const p = _parseTurnMeta(t.meta || '');
|
||||
isMine = !!p.email && mineSet.has(p.email);
|
||||
author = p.author || (t.meta || 'Earlier reply');
|
||||
date = p.date;
|
||||
}
|
||||
// No-self fallback: route by per-sender side mapping.
|
||||
if (sideForKey) {
|
||||
const id = turnIdentity[i];
|
||||
const key = (id.email || id.author || '').toLowerCase();
|
||||
isMine = sideForKey(key) === 'mine';
|
||||
}
|
||||
const side = isMine ? 'mine' : 'theirs';
|
||||
const initials = _initials(author);
|
||||
const color = _senderColor(author || (t.level === 0 ? lvl0Email : ''));
|
||||
const head =
|
||||
`<div class="email-bubble-head">`
|
||||
+ `<span class="email-bubble-author" style="color:${color}">${_esc(author)}</span>`
|
||||
+ (date ? `<span class="email-bubble-date">${_esc(date)}</span>` : '')
|
||||
+ `</div>`;
|
||||
const avatar = `<div class="email-bubble-avatar" aria-hidden="true" style="background:${color}">${_esc(initials)}</div>`;
|
||||
return (
|
||||
`<div class="email-bubble-row email-bubble-${side}" style="--bubble-accent:${color}">`
|
||||
+ (isMine ? '' : avatar)
|
||||
+ `<div class="email-bubble">`
|
||||
+ head
|
||||
+ `<div class="email-bubble-body">${_sanitizeHtml(t.body_html || '')}</div>`
|
||||
+ `</div>`
|
||||
+ (isMine ? avatar : '')
|
||||
+ `</div>`
|
||||
);
|
||||
});
|
||||
return `<div class="email-bubbles">${rows.join('')}</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render server-cached thread turns (list of {level, body_html, meta})
|
||||
* into the same nested-card structure the client-side parser produces.
|
||||
*/
|
||||
function _renderTurnsFromServer(turns) {
|
||||
if (!Array.isArray(turns) || !turns.length) return '';
|
||||
let out = '';
|
||||
const stack = []; // [{ level, html }]
|
||||
const wrap = (t) =>
|
||||
`<details class="email-thread-turn email-quote-fold">`
|
||||
+ _foldSummary('Earlier reply', _QUOTE_ICON, t.meta || '')
|
||||
+ `<div class="email-thread-turn-body">${t.html}</div>`
|
||||
+ '</details>';
|
||||
|
||||
for (const t of turns) {
|
||||
if (t.level === 0) {
|
||||
while (stack.length) {
|
||||
const top = stack.pop();
|
||||
const w = wrap(top);
|
||||
if (stack.length) stack[stack.length - 1].html += w; else out += w;
|
||||
}
|
||||
out += _sanitizeHtml(t.body_html || '');
|
||||
} else {
|
||||
while (stack.length && stack[stack.length - 1].level > t.level) {
|
||||
const top = stack.pop();
|
||||
const w = wrap(top);
|
||||
if (stack.length) stack[stack.length - 1].html += w; else out += w;
|
||||
}
|
||||
if (!stack.length || stack[stack.length - 1].level < t.level) {
|
||||
stack.push({ level: t.level, meta: t.meta, html: _sanitizeHtml(t.body_html || '') });
|
||||
} else {
|
||||
stack[stack.length - 1].html += _sanitizeHtml(t.body_html || '');
|
||||
if (t.meta && !stack[stack.length - 1].meta) {
|
||||
stack[stack.length - 1].meta = t.meta;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
while (stack.length) {
|
||||
const top = stack.pop();
|
||||
const w = wrap(top);
|
||||
if (stack.length) stack[stack.length - 1].html += w; else out += w;
|
||||
}
|
||||
// Mark the bottom-most fold for rounded corners.
|
||||
const lastIdx = out.lastIndexOf('<details class="email-thread-turn email-quote-fold"');
|
||||
if (lastIdx >= 0) {
|
||||
out = out.slice(0, lastIdx)
|
||||
+ out.slice(lastIdx).replace(
|
||||
'email-thread-turn email-quote-fold"',
|
||||
'email-thread-turn email-quote-fold last-fold"'
|
||||
);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse an email body's reply chain into a stack of turn-cards.
|
||||
* Each turn = { author, date, bodyHtml, nested[] } where the body is
|
||||
* everything UP TO the next quote boundary, and `nested` is the sub-thread
|
||||
* inside (recursively parsed). Returns null if the email has no quoted
|
||||
* thread to parse (single message, no folds needed).
|
||||
*/
|
||||
// ── Talon-inspired multilingual quote-detection patterns ──
|
||||
// Sources:
|
||||
// github.com/mailgun/talon (HTML/text quote detection)
|
||||
// github.com/crisp-oss/email-reply-parser (locale list)
|
||||
//
|
||||
// _TALON_* / _SIG_BLOAT_MIN_CHARS live in ./emailLibrary/utils.js
|
||||
// _SIG_ICON / _QUOTE_ICON live in ./emailLibrary/signatureFold.js
|
||||
|
||||
function _renderThreadStructure(html) {
|
||||
if (!html || typeof html !== 'string' || html.length > 200000) return null;
|
||||
let doc;
|
||||
try { doc = new DOMParser().parseFromString(`<div id="__t">${html}</div>`, 'text/html'); }
|
||||
catch { return null; }
|
||||
const root = doc.getElementById('__t');
|
||||
if (!root) return null;
|
||||
|
||||
// Find top-level blockquotes (not nested inside another blockquote).
|
||||
const tops = Array.from(root.querySelectorAll('blockquote')).filter(b =>
|
||||
!b.parentElement.closest('blockquote')
|
||||
);
|
||||
if (!tops.length) return null;
|
||||
|
||||
// Build the current-message body: everything in root up to the first
|
||||
// top-level blockquote, minus the "On <date>, <author> wrote:" attribution
|
||||
// line that introduces it.
|
||||
const head = doc.createElement('div');
|
||||
let cursor = root.firstChild;
|
||||
while (cursor && cursor !== tops[0]) {
|
||||
const next = cursor.nextSibling;
|
||||
head.appendChild(cursor);
|
||||
cursor = next;
|
||||
}
|
||||
// Strip trailing "On <date>, <name> wrote:" / Outlook-style attribution
|
||||
// from `head` since the same info will appear in the turn header.
|
||||
let attribution = _harvestAttribution(head);
|
||||
|
||||
// Recursively parse each top-level blockquote into a turn (and its nested chain).
|
||||
const turnsHtml = [];
|
||||
for (let i = 0; i < tops.length; i++) {
|
||||
const bq = tops[i];
|
||||
// The blockquote may have an Outlook-style "From: / Sent: / Subject:"
|
||||
// header inside as the first text. Extract that as the turn meta.
|
||||
const meta = _extractTurnMetaFromBlockquote(bq) || attribution || _extractQuoteMeta(bq.innerHTML);
|
||||
const innerHtml = bq.innerHTML;
|
||||
|
||||
// Heuristic: if a blockquote has no detectable attribution (no "From:",
|
||||
// no "On <date>... wrote:") AND its content matches signature-style
|
||||
// patterns (corporate disclaimer, "registered in", legal notices, just
|
||||
// a name + title), treat it as a Signature fold instead of an Earlier
|
||||
// Reply. This stops mail clients that wrap signatures in <blockquote>
|
||||
// from making the signature appear as a phantom prior email.
|
||||
if (!meta && _looksLikeSignature(innerHtml)) {
|
||||
turnsHtml.push(
|
||||
'<details class="email-sig-fold">'
|
||||
+ _foldSummary('Signature', _SIG_ICON)
|
||||
+ `<div class="email-sig-body">${innerHtml}</div>`
|
||||
+ '</details>'
|
||||
);
|
||||
attribution = null;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Recursively render the inside of this blockquote (which may contain
|
||||
// its own nested blockquotes representing earlier replies).
|
||||
const nested = _renderThreadStructure(innerHtml);
|
||||
const bodyHtml = nested || innerHtml;
|
||||
const isLast = i === tops.length - 1;
|
||||
turnsHtml.push(
|
||||
`<details class="email-thread-turn email-quote-fold${isLast ? ' last-fold' : ''}">`
|
||||
+ _foldSummary('Earlier reply', _QUOTE_ICON, meta || '')
|
||||
+ `<div class="email-thread-turn-body">${bodyHtml}</div>`
|
||||
+ '</details>'
|
||||
);
|
||||
// Only the first turn uses the harvested attribution; deeper turns
|
||||
// get their own from inside the blockquote.
|
||||
attribution = null;
|
||||
}
|
||||
|
||||
return head.innerHTML + turnsHtml.join('');
|
||||
}
|
||||
|
||||
// Looks like a signature / corporate disclaimer rather than a quoted email.
|
||||
// Used to demote attribution-less blockquotes that some senders wrap their
|
||||
// sig+disclaimer in (Outlook, EY, big firms) from "Earlier reply" to a
|
||||
// proper Signature fold. Conservative — only fires when there's no quoted
|
||||
// reply markers AND it matches strong corporate-noise phrases.
|
||||
// _looksLikeSignature / _harvestAttribution / _extractTurnMetaFromBlockquote
|
||||
// live in ./emailLibrary/signatureFold.js
|
||||
|
||||
/**
|
||||
* Wrap any quoted reply chain in a collapsed <details> so deep email threads
|
||||
* don't dominate the reader. Detects:
|
||||
* - <blockquote> tags (Gmail / native quoted replies)
|
||||
* - Outlook-style "From: ... Sent: ... To: ... Subject: ..." headers
|
||||
* Each gets its own "Earlier thread" toggle.
|
||||
*/
|
||||
/**
|
||||
* Parse a plaintext email body into stacked turn-cards by walking
|
||||
* `> ` quote-prefix levels and Outlook-style "On X wrote:" / Original-Message
|
||||
* boundaries. Returns rendered HTML, or null when there's no quoted content
|
||||
* (caller falls back to flat rendering).
|
||||
*
|
||||
* Mirrors talon's `extract_from_plain` and email-reply-parser fragments:
|
||||
* 1. Lines starting with one or more `>` chars are quoted (level = count of >).
|
||||
* 2. Increasing the level opens a deeper turn (nested reply).
|
||||
* 3. `-----Original Message-----` and `On <date>, <name> wrote:` start a
|
||||
* new turn even without `>`.
|
||||
* 4. The leading non-quoted segment is the current message.
|
||||
*/
|
||||
function _renderPlaintextThread(text) {
|
||||
if (!text || typeof text !== 'string' || text.length > 200000) return null;
|
||||
const lines = text.split(/\r?\n/);
|
||||
const levels = lines.map(l => {
|
||||
const m = l.match(/^((?:>\s?)+)/);
|
||||
return m ? (m[1].match(/>/g) || []).length : 0;
|
||||
});
|
||||
const hasQuotes = levels.some(l => l > 0);
|
||||
const attribLineRe = new RegExp(`(?:^|\\n)\\s*On\\s.+?\\s${_TALON_WROTE}\\s*:\\s*$`, 'im');
|
||||
const hasAttrib = attribLineRe.test(text) || _TALON_ORIG_RE.test(text);
|
||||
if (!hasQuotes && !hasAttrib) return null;
|
||||
|
||||
const turns = [];
|
||||
let buf = [];
|
||||
let curLevel = 0;
|
||||
let pendingMeta = null;
|
||||
const flush = () => {
|
||||
if (!buf.length) return;
|
||||
const t = buf.join('\n').trimEnd();
|
||||
if (t || curLevel > 0) turns.push({ level: curLevel, text: t, meta: pendingMeta });
|
||||
buf = [];
|
||||
pendingMeta = null;
|
||||
};
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const lvl = levels[i];
|
||||
const raw = lines[i];
|
||||
const stripped = lvl > 0 ? raw.replace(/^(?:>\s?)+/, '') : raw;
|
||||
const isSeparatorLine = lvl === 0 && /^-{5,}\s*Previous message\s*-{5,}$/i.test(raw.trim());
|
||||
const isAttribLine = lvl === 0
|
||||
&& (new RegExp(`^\\s*On\\s.+?\\s${_TALON_WROTE}\\s*:\\s*$`, 'i').test(raw)
|
||||
|| _TALON_ORIG_RE.test('\n' + raw));
|
||||
if (isSeparatorLine || isAttribLine) {
|
||||
flush();
|
||||
pendingMeta = isSeparatorLine ? null : (_extractQuoteMeta(raw) || raw.trim());
|
||||
curLevel = 1;
|
||||
continue;
|
||||
}
|
||||
if (lvl !== curLevel) {
|
||||
flush();
|
||||
curLevel = lvl;
|
||||
}
|
||||
buf.push(stripped);
|
||||
}
|
||||
flush();
|
||||
|
||||
if (!turns.length || (turns.length === 1 && turns[0].level === 0)) return null;
|
||||
|
||||
const fmt = s => _escLinkify(s).replace(/\n/g, '<br>');
|
||||
let out = '';
|
||||
const stack = [];
|
||||
const wrapTurn = (t) =>
|
||||
`<details class="email-thread-turn email-quote-fold">`
|
||||
+ _foldSummary('Earlier reply', _QUOTE_ICON, t.meta || '')
|
||||
+ `<div class="email-thread-turn-body">${t.html}</div>`
|
||||
+ '</details>';
|
||||
|
||||
for (const t of turns) {
|
||||
if (t.level === 0) {
|
||||
while (stack.length) {
|
||||
const top = stack.pop();
|
||||
const wrapped = wrapTurn(top);
|
||||
if (stack.length) stack[stack.length - 1].html += wrapped; else out += wrapped;
|
||||
}
|
||||
out += fmt(t.text);
|
||||
} else {
|
||||
while (stack.length && stack[stack.length - 1].level > t.level) {
|
||||
const top = stack.pop();
|
||||
const wrapped = wrapTurn(top);
|
||||
if (stack.length) stack[stack.length - 1].html += wrapped; else out += wrapped;
|
||||
}
|
||||
if (!stack.length || stack[stack.length - 1].level < t.level) {
|
||||
stack.push({ level: t.level, meta: t.meta, html: fmt(t.text) });
|
||||
} else {
|
||||
stack[stack.length - 1].html += '<br>' + fmt(t.text);
|
||||
if (t.meta && !stack[stack.length - 1].meta) stack[stack.length - 1].meta = t.meta;
|
||||
}
|
||||
}
|
||||
}
|
||||
while (stack.length) {
|
||||
const top = stack.pop();
|
||||
const wrapped = wrapTurn(top);
|
||||
if (stack.length) stack[stack.length - 1].html += wrapped; else out += wrapped;
|
||||
}
|
||||
const lastIdx = out.lastIndexOf('<details class="email-thread-turn email-quote-fold"');
|
||||
if (lastIdx >= 0) {
|
||||
out = out.slice(0, lastIdx)
|
||||
+ out.slice(lastIdx).replace(
|
||||
'email-thread-turn email-quote-fold"',
|
||||
'email-thread-turn email-quote-fold last-fold"'
|
||||
);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// _foldSummary / _extractQuoteMeta / _SIG_ICON / _QUOTE_ICON
|
||||
// live in ./emailLibrary/signatureFold.js
|
||||
|
||||
function _foldQuotedReplies(html) {
|
||||
if (!html || typeof html !== 'string') return html;
|
||||
if (html.length > 200000) return html;
|
||||
const before = html;
|
||||
// Use DOMParser for proper nested-blockquote handling. Regex against HTML
|
||||
// mishandles nesting and leaves orphan close tags that the browser
|
||||
// re-balances, producing two visually inconsistent fold styles.
|
||||
try {
|
||||
const doc = new DOMParser().parseFromString(`<div id="__r">${html}</div>`, 'text/html');
|
||||
const root = doc.getElementById('__r');
|
||||
if (root) {
|
||||
// Only fold TOP-LEVEL blockquotes (children of the root that are not
|
||||
// already inside another blockquote). The inner blockquote chain stays
|
||||
// intact inside the fold and renders with the existing
|
||||
// .email-quote-fold blockquote styles, so everything matches.
|
||||
const tops = Array.from(root.querySelectorAll('blockquote')).filter(b =>
|
||||
!b.parentElement.closest('blockquote')
|
||||
);
|
||||
if (tops.length) {
|
||||
for (const bq of tops) {
|
||||
const det = doc.createElement('details');
|
||||
det.className = 'email-quote-fold';
|
||||
// Build the summary as raw HTML — easier than building DOM by hand.
|
||||
const summary = _foldSummary('Earlier thread', _QUOTE_ICON, _extractQuoteMeta(bq.innerHTML));
|
||||
det.innerHTML = summary;
|
||||
bq.parentNode.insertBefore(det, bq);
|
||||
det.appendChild(bq); // move the original blockquote (and any nested ones) into the details
|
||||
}
|
||||
// Tag only the last fold so CSS can give it rounded bottom corners.
|
||||
const allFolds = root.querySelectorAll('.email-quote-fold');
|
||||
if (allFolds.length) allFolds[allFolds.length - 1].classList.add('last-fold');
|
||||
return root.innerHTML;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Fall through to the legacy regex path below if DOMParser fails
|
||||
}
|
||||
// If DOM-pass already wrapped something, we returned above. Otherwise no
|
||||
// blockquotes were found — try the Outlook-header heuristic.
|
||||
if (html !== before) return html;
|
||||
// Outlook-style quoted-reply header — multilingual. Fold from the first
|
||||
// "From: ... Sent: ... Subject: ..." block through end-of-body so all
|
||||
// prior thread levels collapse together.
|
||||
const FROM = '(?:From|Från|Von|De|De\\s|Da|От|Od|Van)';
|
||||
const SENT = '(?:Sent|Skickat|Gesendet|Envoyé|Inviato|Enviado|Verzonden|Отправлено|Wysłane)';
|
||||
const SUBJ = '(?:Subject|Ämne|Betreff|Objet|Oggetto|Asunto|Onderwerp|Тема|Temat)';
|
||||
const outlookRe = new RegExp(
|
||||
`(<br\\s*/?>|</p>|</div>|<p[^>]*>|<div[^>]*>|\\n)\\s*((?:<[^>]+>\\s*)*${FROM}\\s*:\\s*[^<\\n]+(?:<[^>]+>\\s*|\\s)*${SENT}\\s*:[\\s\\S]+?${SUBJ}\\s*:[\\s\\S]+)$`,
|
||||
'i'
|
||||
);
|
||||
const m = html.match(outlookRe);
|
||||
if (m) {
|
||||
const idx = html.lastIndexOf(m[0]);
|
||||
// Outlook fallback only ever produces ONE fold, so tag it as last.
|
||||
html = html.slice(0, idx) + m[1]
|
||||
+ '<details class="email-quote-fold last-fold">'
|
||||
+ _foldSummary('Earlier thread', _QUOTE_ICON, _extractQuoteMeta(m[2]))
|
||||
+ m[2] + '</details>';
|
||||
}
|
||||
return html;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,856 @@
|
||||
// static/js/emailLibrary/menus.js
|
||||
//
|
||||
// Every action menu the email library opens: the reader's More menu, a card's
|
||||
// kebab menu, the bulk-selection Actions menu, and `_bulkAction`, which runs
|
||||
// the chosen bulk mutation.
|
||||
//
|
||||
// Item order is not local — it comes from `orderActionMenuItems` in
|
||||
// ../actionMenuOrder.js, so an action keeps the same position here as in the
|
||||
// document, task, session and memory menus. `tests/test_action_menu_order.py`
|
||||
// pins that.
|
||||
|
||||
import spinnerModule from '../spinner.js';
|
||||
import { SELECT_MENU_ICON, actionMenuRank, orderActionMenuItems } from '../actionMenuOrder.js';
|
||||
import { bindMenuDismiss, dismissOrRemove } from '../escMenuStack.js';
|
||||
import { topPortalZ } from '../toolWindowZOrder.js';
|
||||
import { showToast, styledConfirm } from '../ui.js?v=20260916largetoolscroll1';
|
||||
import { state } from './state.js';
|
||||
import {
|
||||
_handleAiReplyButton,
|
||||
_showEmailTranslateSubmenu,
|
||||
_showLibRemindSubmenu,
|
||||
} from './aiReply.js';
|
||||
import {
|
||||
_acct,
|
||||
_animateEmailCardRemoval,
|
||||
_clearDoneResponseTagsLocal,
|
||||
_emailMutationQuery,
|
||||
_exportSelectedAttachments,
|
||||
_findSiblingEmailCard,
|
||||
_fitEmailDropdown,
|
||||
_libCacheWriteBack,
|
||||
_loadEmailsFresh,
|
||||
_renderGrid,
|
||||
_requireSuccessfulEmailMutation,
|
||||
_showEmailDeleteOverlay,
|
||||
_syncEmailReadState,
|
||||
_toggleCardPreview,
|
||||
} from './index.js';
|
||||
import { _openEmailAsTab } from './reader.js';
|
||||
|
||||
const API_BASE = window.location.origin;
|
||||
|
||||
export function _showReaderMoreMenu(em, card, reader, anchor, data) {
|
||||
// Toggle: if a dropdown for THIS anchor is already open, close it.
|
||||
const existing = document.querySelector('.email-card-dropdown');
|
||||
if (existing && existing._anchor === anchor) {
|
||||
dismissOrRemove(existing);
|
||||
return;
|
||||
}
|
||||
// Otherwise close any other open dropdown (its own teardown clears its
|
||||
// anchor's active state) before opening a fresh one.
|
||||
document.querySelectorAll('.email-card-dropdown').forEach(dismissOrRemove);
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.className = 'email-card-dropdown';
|
||||
dropdown._anchor = anchor;
|
||||
anchor.classList.add('reader-more-active');
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
dropdown.style.cssText = `position:fixed;z-index:${topPortalZ()};min-width:180px;background:var(--panel,var(--bg));border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);padding:4px;font-size:12px;top:${rect.bottom + 4}px;right:${window.innerWidth - rect.right}px;`;
|
||||
|
||||
const _icon = (svg) => `<span class="dropdown-icon">${svg}</span>`;
|
||||
const _unreadIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>';
|
||||
const _archIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>';
|
||||
const _spamIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
|
||||
const _trashIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>';
|
||||
const _deleteForeverIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="14" y2="15"/><line x1="14" y1="11" x2="10" y2="15"/></svg>';
|
||||
const _bellIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>';
|
||||
const _newTabIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
|
||||
const _checkIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
||||
const _translateIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary, var(--red))" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>';
|
||||
|
||||
const closeAndRemove = async () => {
|
||||
// Pick the next neighbour BEFORE we re-render so we know which email to
|
||||
// jump to. Prefer the next card; fall back to the previous one if this
|
||||
// was the last card.
|
||||
const sibling = _findSiblingEmailCard(card, +1) || _findSiblingEmailCard(card, -1);
|
||||
const nextUid = sibling ? sibling.dataset.uid : null;
|
||||
await _animateEmailCardRemoval([em.uid]);
|
||||
state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid));
|
||||
_renderGrid();
|
||||
_libCacheWriteBack();
|
||||
if (!nextUid) return;
|
||||
// After _renderGrid, the card nodes are fresh — re-resolve and expand.
|
||||
const grid = document.getElementById('email-lib-grid');
|
||||
const nextCard = grid?.querySelector(`.doclib-card[data-uid="${CSS.escape(String(nextUid))}"]`);
|
||||
const nextEm = state._libEmails.find(e => String(e.uid) === String(nextUid));
|
||||
if (nextCard && nextEm) {
|
||||
_toggleCardPreview(nextCard, nextEm);
|
||||
nextCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
};
|
||||
|
||||
const _bubblesIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
|
||||
const _contactIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>';
|
||||
// Three groups separated by dividers:
|
||||
// 1. Open / Mark Unread / Remind — the per-email view actions
|
||||
// 2. Save sender / Not Done / Archive — non-destructive state changes
|
||||
// 3. Move to Spam / Move to Trash / Delete — destructive
|
||||
const overflowActions = Array.from(reader.querySelectorAll('.reader-action-overflowed')).map(button => ({
|
||||
label: button.querySelector('.reader-btn-label')?.textContent?.trim() || button.title || 'Action',
|
||||
icon: button.querySelector('svg')?.outerHTML || '',
|
||||
button,
|
||||
action: (positionAnchor) => {
|
||||
if (button.dataset.act === 'ai-reply') {
|
||||
_handleAiReplyButton({
|
||||
currentTarget: button,
|
||||
stopPropagation() {},
|
||||
}, em, data, positionAnchor || button);
|
||||
} else {
|
||||
button.click();
|
||||
}
|
||||
},
|
||||
}));
|
||||
const actions = [
|
||||
...overflowActions,
|
||||
...(overflowActions.length ? [{ separator: true }] : []),
|
||||
{
|
||||
label: 'Open in new tab',
|
||||
icon: _newTabIcon,
|
||||
action: async () => {
|
||||
const folder = state._libFolder || 'INBOX';
|
||||
await _openEmailAsTab(em, folder);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Remind to reply',
|
||||
icon: _bellIcon,
|
||||
submenu: 'remind',
|
||||
},
|
||||
{
|
||||
label: 'Translate',
|
||||
icon: _translateIcon,
|
||||
submenu: 'translate',
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: em.is_read ? 'Mark as Unread' : 'Mark as Read',
|
||||
icon: _unreadIcon,
|
||||
action: async () => {
|
||||
const newRead = !em.is_read;
|
||||
_syncEmailReadState(em.uid, newRead);
|
||||
try {
|
||||
if (newRead) {
|
||||
await fetch(`${API_BASE}/api/email/mark-read/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
} else {
|
||||
await fetch(`${API_BASE}/api/email/mark-unread/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
}
|
||||
} catch (e) { console.error(e); }
|
||||
_renderGrid();
|
||||
},
|
||||
},
|
||||
{
|
||||
// Favorite (pin to top). Same bookmark glyph we use for the
|
||||
// sidebar-pin / favorites filter so the visual language stays
|
||||
// consistent. Toggling updates em.is_flagged and re-sorts via
|
||||
// _renderGrid (favorited rows are always pinned at the top).
|
||||
label: em.is_flagged ? 'Unfavorite' : 'Favorite (pin to top)',
|
||||
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="' + (em.is_flagged ? 'currentColor' : 'none') + '" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>',
|
||||
action: async () => {
|
||||
const next = !em.is_flagged;
|
||||
em.is_flagged = next;
|
||||
_renderGrid();
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/email/flag/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}&on=${next ? 'true' : 'false'}`, { method: 'POST' });
|
||||
} catch (e) {
|
||||
// Roll back the optimistic flip if the server didn't take it.
|
||||
em.is_flagged = !next;
|
||||
_renderGrid();
|
||||
console.error('Failed to toggle favorite:', e);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: em.is_answered ? 'Mark as Not Done' : 'Mark as Done',
|
||||
icon: _checkIcon,
|
||||
action: async () => {
|
||||
const newState = !em.is_answered;
|
||||
em.is_answered = newState;
|
||||
if (newState) {
|
||||
_clearDoneResponseTagsLocal(em);
|
||||
_syncEmailReadState(em.uid, true);
|
||||
}
|
||||
try {
|
||||
if (newState) {
|
||||
await fetch(`${API_BASE}/api/email/mark-answered/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
await fetch(`${API_BASE}/api/email/mark-read/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
} else {
|
||||
await fetch(`${API_BASE}/api/email/clear-answered/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
}
|
||||
} catch (e) { console.error('Failed to toggle done:', e); }
|
||||
_renderGrid();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Move to Archive',
|
||||
icon: _archIcon,
|
||||
action: async () => {
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/email/archive/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
} catch (e) { console.error(e); }
|
||||
await closeAndRemove();
|
||||
},
|
||||
},
|
||||
{
|
||||
// Save the sender to CardDAV contacts. Pulls name + address off the
|
||||
// list-item (em); falls back to splitting the local-part for a name.
|
||||
label: 'Save sender to contacts',
|
||||
icon: _contactIcon,
|
||||
action: async () => {
|
||||
const email = (em.from_address || em.from || '').trim();
|
||||
if (!email) {
|
||||
import('../ui.js?v=20260916largetoolscroll1').then(m => m.showError && m.showError('No sender address')).catch(() => {});
|
||||
return;
|
||||
}
|
||||
const name = (em.from_name || '').trim() || email.split('@')[0];
|
||||
try {
|
||||
const r = await fetch(`${API_BASE}/api/contacts/add`, {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, email }),
|
||||
});
|
||||
const d = await r.json();
|
||||
import('../ui.js?v=20260916largetoolscroll1').then(m => {
|
||||
if (!m.showToast) return;
|
||||
if (d.success && d.message === 'Already exists') m.showToast('Already in contacts');
|
||||
else if (d.success) m.showToast('Saved to contacts');
|
||||
else m.showError && m.showError('Failed to save contact');
|
||||
}).catch(() => {});
|
||||
} catch (_) {
|
||||
import('../ui.js?v=20260916largetoolscroll1').then(m => m.showError && m.showError('Failed to save contact')).catch(() => {});
|
||||
}
|
||||
},
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: 'Move to Spam',
|
||||
icon: _spamIcon,
|
||||
action: async () => {
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/email/move/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}&dest=Junk`, { method: 'POST' });
|
||||
} catch (e) { console.error(e); }
|
||||
await closeAndRemove();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Move to Trash',
|
||||
icon: _trashIcon,
|
||||
action: async () => {
|
||||
const busy = _showEmailDeleteOverlay(card);
|
||||
await busy?.ready;
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/email/delete/${encodeURIComponent(em.uid)}?${_emailMutationQuery(em)}`, { method: 'DELETE' });
|
||||
await _requireSuccessfulEmailMutation(response, 'Failed to delete email');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
busy?.remove?.();
|
||||
showToast('Failed to delete email');
|
||||
return;
|
||||
}
|
||||
busy?.remove?.();
|
||||
await closeAndRemove();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Delete Permanently',
|
||||
icon: _deleteForeverIcon,
|
||||
danger: true,
|
||||
action: async () => {
|
||||
const subject = em.subject || '(no subject)';
|
||||
const ok = await styledConfirm(
|
||||
`Permanently delete "${subject}"? This cannot be undone.`,
|
||||
{ confirmText: 'Delete', cancelText: 'Cancel', danger: true }
|
||||
);
|
||||
if (!ok) return;
|
||||
const busy = _showEmailDeleteOverlay(card);
|
||||
await busy?.ready;
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/email/delete-permanent/${encodeURIComponent(em.uid)}?${_emailMutationQuery(em)}`, { method: 'DELETE' });
|
||||
await _requireSuccessfulEmailMutation(response, 'Failed to delete email');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
busy?.remove?.();
|
||||
showToast('Failed to delete email');
|
||||
return;
|
||||
}
|
||||
busy?.remove?.();
|
||||
await closeAndRemove();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
for (const a of actions) {
|
||||
if (a.separator) {
|
||||
const sep = document.createElement('div');
|
||||
sep.className = 'dropdown-divider';
|
||||
dropdown.appendChild(sep);
|
||||
continue;
|
||||
}
|
||||
const item = document.createElement('div');
|
||||
item.className = 'dropdown-item-compact' + (a.danger ? ' dropdown-item-danger' : '');
|
||||
const arrow = a.submenu ? '<span style="margin-left:auto;opacity:0.5;">›</span>' : '';
|
||||
item.innerHTML = _icon(a.icon) + `<span>${a.label}</span>${arrow}`;
|
||||
item.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (a.submenu === 'remind') {
|
||||
_showLibRemindSubmenu(em, dropdown);
|
||||
return;
|
||||
}
|
||||
if (a.submenu === 'translate') {
|
||||
_showEmailTranslateSubmenu(reader, dropdown);
|
||||
return;
|
||||
}
|
||||
// A hidden overflowed button has a zero-sized client rect. Invoke the
|
||||
// AI chooser while the visible More item is still mounted, then close
|
||||
// the action menu after the chooser has captured its position.
|
||||
if (a.button?.dataset.act === 'ai-reply') {
|
||||
a.action(item);
|
||||
close();
|
||||
return;
|
||||
}
|
||||
close();
|
||||
a.action();
|
||||
});
|
||||
dropdown.appendChild(item);
|
||||
}
|
||||
// Mobile-only Cancel item — explicit close for touch users. CSS hides it
|
||||
// on desktop where outside-click already dismisses cleanly.
|
||||
const _cancelIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
|
||||
const cancelItem = document.createElement('div');
|
||||
cancelItem.className = 'dropdown-item-compact dropdown-cancel-mobile';
|
||||
cancelItem.innerHTML = _icon(_cancelIco) + '<span>Cancel</span>';
|
||||
cancelItem.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
close();
|
||||
});
|
||||
dropdown.appendChild(cancelItem);
|
||||
|
||||
document.body.appendChild(dropdown);
|
||||
_fitEmailDropdown(dropdown, rect);
|
||||
const close = bindMenuDismiss(dropdown, () => {
|
||||
dropdown.remove();
|
||||
anchor.classList.remove('reader-more-active');
|
||||
}, (ev) => !dropdown.contains(ev.target) && ev.target !== anchor);
|
||||
}
|
||||
|
||||
export function _showCardMenu(em, anchor) {
|
||||
const openMenu = document.querySelector('.email-card-dropdown:not(.email-bulk-menu)');
|
||||
if (openMenu && openMenu._emailMenuAnchor === anchor) {
|
||||
dismissOrRemove(openMenu);
|
||||
return;
|
||||
}
|
||||
document.querySelectorAll('.email-card-dropdown').forEach(dismissOrRemove);
|
||||
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.className = 'email-card-dropdown';
|
||||
dropdown._emailMenuAnchor = anchor;
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
dropdown.style.cssText = `position:fixed;z-index:${topPortalZ()};min-width:140px;background:var(--panel,var(--bg));border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);padding:4px;font-size:12px;top:${rect.bottom + 4}px;right:${window.innerWidth - rect.right}px;`;
|
||||
|
||||
const _icon = (svg) => `<span class="dropdown-icon">${svg}</span>`;
|
||||
const _replyIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>';
|
||||
const _archIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>';
|
||||
const _delIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>';
|
||||
const _unreadIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>';
|
||||
const _checkIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
||||
const _cardBellIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>';
|
||||
|
||||
const isSentFolder = /sent/i.test(state._libFolder);
|
||||
|
||||
const _newTabIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>';
|
||||
const actions = [
|
||||
{ label: 'Open', icon: _replyIcon, action: async () => {
|
||||
// Just expand inline (same as tapping the row).
|
||||
const card = anchor.closest('.doclib-card');
|
||||
if (card && !card.classList.contains('doclib-card-expanded')) {
|
||||
await _toggleCardPreview(card, em);
|
||||
}
|
||||
}},
|
||||
{ label: 'Open in new tab', icon: _newTabIcon, action: async () => {
|
||||
// Open this email as its own in-app modal that registers a dock
|
||||
// chip — multiple emails can be opened simultaneously, each gets
|
||||
// its own chip in the minimized dock.
|
||||
const folder = state._libFolder || 'INBOX';
|
||||
await _openEmailAsTab(em, folder);
|
||||
}},
|
||||
{ label: 'Remind to reply', icon: _cardBellIcon, submenu: 'remind' },
|
||||
];
|
||||
|
||||
if (!isSentFolder) {
|
||||
// Source of truth = the visible "active" class on the card's done
|
||||
// check, so the menu label and the actual toggle behaviour can't
|
||||
// disagree with what the user sees.
|
||||
const _cardForLabel = anchor.closest('.doclib-card');
|
||||
const _checkForLabel = _cardForLabel ? _cardForLabel.querySelector('.email-card-done') : null;
|
||||
const _currentlyDone = _checkForLabel ? _checkForLabel.classList.contains('active') : !!em.is_answered;
|
||||
actions.push({
|
||||
label: _currentlyDone ? 'Not Done' : 'Done',
|
||||
icon: _checkIcon,
|
||||
action: async () => {
|
||||
const card = anchor.closest('.doclib-card');
|
||||
const check = card ? card.querySelector('.email-card-done') : null;
|
||||
const wasActive = check ? check.classList.contains('active') : !!em.is_answered;
|
||||
const newState = !wasActive;
|
||||
em.is_answered = newState;
|
||||
if (newState) {
|
||||
_clearDoneResponseTagsLocal(em);
|
||||
_syncEmailReadState(em.uid, true); // mark-done implies mark-read
|
||||
}
|
||||
try {
|
||||
if (newState) {
|
||||
await fetch(`${API_BASE}/api/email/mark-answered/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
await fetch(`${API_BASE}/api/email/mark-read/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
} else {
|
||||
await fetch(`${API_BASE}/api/email/clear-answered/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
}
|
||||
} catch (e) { console.error('Failed to toggle done:', e); }
|
||||
if (card) {
|
||||
if (check) check.classList.toggle('active', newState);
|
||||
if (newState) {
|
||||
_syncEmailReadState(em.uid, true);
|
||||
card.querySelectorAll('.email-tag-urgent, .email-tag-reply-soon, .email-tag-action-needed').forEach(n => n.remove());
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
actions.push({
|
||||
label: em.is_flagged ? 'Unfavorite' : 'Favorite (pin to top)',
|
||||
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="' + (em.is_flagged ? 'currentColor' : 'none') + '" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>',
|
||||
action: async () => {
|
||||
const next = !em.is_flagged;
|
||||
em.is_flagged = next;
|
||||
_renderGrid();
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/email/flag/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}&on=${next ? 'true' : 'false'}`, { method: 'POST' });
|
||||
} catch (e) {
|
||||
em.is_flagged = !next;
|
||||
_renderGrid();
|
||||
console.error('Failed to toggle favorite:', e);
|
||||
}
|
||||
},
|
||||
});
|
||||
actions.push({
|
||||
label: 'Archive',
|
||||
icon: _archIcon,
|
||||
action: async () => {
|
||||
await fetch(`${API_BASE}/api/email/archive/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
await _animateEmailCardRemoval([em.uid]);
|
||||
state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid));
|
||||
_renderGrid();
|
||||
_libCacheWriteBack();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
actions.push({
|
||||
label: em.is_flagged ? 'Unfavorite' : 'Favorite (pin to top)',
|
||||
icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="' + (em.is_flagged ? 'currentColor' : 'none') + '" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>',
|
||||
action: async () => {
|
||||
const next = !em.is_flagged;
|
||||
em.is_flagged = next;
|
||||
_renderGrid();
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/email/flag/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}&on=${next ? 'true' : 'false'}`, { method: 'POST' });
|
||||
} catch (e) {
|
||||
em.is_flagged = !next;
|
||||
_renderGrid();
|
||||
console.error('Failed to toggle favorite:', e);
|
||||
}
|
||||
},
|
||||
});
|
||||
actions.push({
|
||||
label: 'Archive',
|
||||
icon: _archIcon,
|
||||
action: async () => {
|
||||
await fetch(`${API_BASE}/api/email/archive/${em.uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
await _animateEmailCardRemoval([em.uid]);
|
||||
state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid));
|
||||
_renderGrid();
|
||||
_libCacheWriteBack();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// "Select" — switch to multi-select mode with THIS email pre-selected so
|
||||
// the user can quickly fan-out to neighbours with the bulk bar.
|
||||
// Match the chat-sidebar Select icon — a thick bullet character reads
|
||||
// much heavier than a small SVG circle. Nudged up 2px so its visual
|
||||
// center lines up with the SVG icons above (which sit a bit higher).
|
||||
const _selectIcon = SELECT_MENU_ICON;
|
||||
actions.push({
|
||||
label: 'Select',
|
||||
icon: _selectIcon,
|
||||
action: () => {
|
||||
state._selectMode = true;
|
||||
state._selectedUids.add(em.uid);
|
||||
_updateBulkBar();
|
||||
_renderGrid();
|
||||
},
|
||||
});
|
||||
|
||||
actions.push(
|
||||
{ label: 'Delete', icon: _delIcon, danger: true, action: async () => {
|
||||
const subject = em.subject || '(no subject)';
|
||||
const ok = await styledConfirm(`Delete "${subject}"?`, { confirmText: 'Delete', cancelText: 'Cancel', danger: true });
|
||||
if (!ok) return;
|
||||
const card = document.querySelector(`#email-lib-grid .doclib-card[data-uid="${CSS.escape(String(em.uid))}"]`);
|
||||
const busy = _showEmailDeleteOverlay(card);
|
||||
await busy?.ready;
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/email/delete/${encodeURIComponent(em.uid)}?${_emailMutationQuery(em)}`, { method: 'DELETE' });
|
||||
await _requireSuccessfulEmailMutation(response, 'Failed to delete email');
|
||||
} catch (e) {
|
||||
busy?.remove?.();
|
||||
showToast(e?.message || 'Could not move email to Trash');
|
||||
return;
|
||||
}
|
||||
busy?.remove?.();
|
||||
await _animateEmailCardRemoval([em.uid]);
|
||||
state._libEmails = state._libEmails.filter(e => String(e.uid) !== String(em.uid));
|
||||
_renderGrid();
|
||||
_libCacheWriteBack();
|
||||
}},
|
||||
);
|
||||
|
||||
const orderedActions = orderActionMenuItems(actions);
|
||||
let addedActionDivider = false;
|
||||
for (const [index, a] of orderedActions.entries()) {
|
||||
if (!addedActionDivider && index > 0 && actionMenuRank(a) >= 700) {
|
||||
const divider = document.createElement('div');
|
||||
divider.className = 'dropdown-divider';
|
||||
dropdown.appendChild(divider);
|
||||
addedActionDivider = true;
|
||||
}
|
||||
const item = document.createElement('div');
|
||||
item.className = 'dropdown-item-compact' + (a.danger ? ' dropdown-item-danger' : '');
|
||||
const arrow = a.submenu ? '<span style="margin-left:auto;opacity:0.5;">›</span>' : '';
|
||||
item.innerHTML = _icon(a.icon) + `<span>${a.label}</span>${arrow}`;
|
||||
item.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (a.submenu === 'remind') {
|
||||
_showLibRemindSubmenu(em, dropdown);
|
||||
return;
|
||||
}
|
||||
close();
|
||||
a.action();
|
||||
});
|
||||
dropdown.appendChild(item);
|
||||
}
|
||||
// Mobile-only Cancel item — explicit close for touch users. CSS hides it
|
||||
// on desktop where outside-click already dismisses cleanly.
|
||||
const _cancelIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
|
||||
const cancelItem = document.createElement('div');
|
||||
cancelItem.className = 'dropdown-item-compact dropdown-cancel-mobile';
|
||||
cancelItem.innerHTML = _icon(_cancelIco) + '<span>Cancel</span>';
|
||||
cancelItem.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
close();
|
||||
});
|
||||
dropdown.appendChild(cancelItem);
|
||||
|
||||
document.body.appendChild(dropdown);
|
||||
_fitEmailDropdown(dropdown, rect);
|
||||
const close = bindMenuDismiss(dropdown, () => {
|
||||
dropdown.remove();
|
||||
anchor.classList.remove('reader-more-active');
|
||||
}, (ev) => !dropdown.contains(ev.target) && ev.target !== anchor);
|
||||
}
|
||||
|
||||
// Bulk "Actions" dropdown for select mode — Delete is a separate visible button.
|
||||
export function _showBulkActionsMenu(anchor) {
|
||||
document.querySelectorAll('.email-card-dropdown').forEach(dismissOrRemove);
|
||||
const dropdown = document.createElement('div');
|
||||
dropdown.className = 'email-card-dropdown email-bulk-menu';
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
dropdown.style.cssText = `position:fixed;z-index:${topPortalZ()};min-width:160px;background:var(--panel,var(--bg));border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.3);padding:4px;font-size:12px;top:${rect.bottom + 4}px;left:${rect.left}px;`;
|
||||
const _readIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13"/><path d="m22 2-7 20-4-9-9-4 20-7z"/></svg>';
|
||||
const _unreadIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>';
|
||||
const _doneIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
||||
const _exportIco = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
|
||||
const items = [
|
||||
{ label: 'Export Attachments', icon: _exportIco, action: () => _exportSelectedAttachments() },
|
||||
{ label: 'Done', icon: _doneIco, action: () => _bulkAction('done') },
|
||||
{ label: 'Mark Read', icon: _readIco, action: () => _bulkAction('read') },
|
||||
{ label: 'Mark Unread', icon: _unreadIco, action: () => _bulkAction('unread') },
|
||||
];
|
||||
for (const a of items) {
|
||||
const it = document.createElement('div');
|
||||
it.className = 'dropdown-item-compact' + (a.danger ? ' dropdown-item-danger' : '');
|
||||
it.innerHTML = `<span class="dropdown-icon">${a.icon}</span><span>${a.label}</span>`;
|
||||
it.addEventListener('click', (e) => { e.stopPropagation(); close(); a.action(); });
|
||||
dropdown.appendChild(it);
|
||||
}
|
||||
// Mobile-only Cancel — matches the per-card and sidebar dropdowns.
|
||||
const _cancelIco2 = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
|
||||
const cancelIt = document.createElement('div');
|
||||
cancelIt.className = 'dropdown-item-compact dropdown-cancel-mobile';
|
||||
cancelIt.innerHTML = `<span class="dropdown-icon">${_cancelIco2}</span><span>Cancel</span>`;
|
||||
cancelIt.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
close();
|
||||
// Cancel inside the bulk-Actions menu also exits select mode — matches the
|
||||
// documents bulk dropdown.
|
||||
state._selectMode = false;
|
||||
state._selectedUids.clear();
|
||||
_updateBulkBar();
|
||||
_renderGrid();
|
||||
});
|
||||
dropdown.appendChild(cancelIt);
|
||||
document.body.appendChild(dropdown);
|
||||
_fitEmailDropdown(dropdown, rect);
|
||||
const close = bindMenuDismiss(dropdown, () => {
|
||||
dropdown.remove();
|
||||
}, (ev) => !dropdown.contains(ev.target) && ev.target !== anchor);
|
||||
}
|
||||
|
||||
export function _updateBulkBar() {
|
||||
const bar = document.getElementById('email-lib-bulk');
|
||||
const grid = document.getElementById('email-lib-grid');
|
||||
if (grid) grid.classList.toggle('email-selecting', !!state._selectMode);
|
||||
const selectBtn = document.getElementById('email-lib-select-btn');
|
||||
if (bar) bar.classList.toggle('hidden', !state._selectMode);
|
||||
if (selectBtn) {
|
||||
selectBtn.textContent = state._selectMode ? 'Cancel' : 'Select';
|
||||
selectBtn.classList.toggle('active', state._selectMode);
|
||||
}
|
||||
const count = document.getElementById('email-lib-selected-count');
|
||||
if (count) count.textContent = `${state._selectedUids.size} Selected`;
|
||||
const all = document.getElementById('email-lib-select-all');
|
||||
if (all) all.checked = state._libEmails.length > 0 && state._libEmails.every(e => state._selectedUids.has(e.uid));
|
||||
// When something's selected, brighten Actions to the same full --fg color as
|
||||
// the "N Selected" count (the button is a dimmer 60% --fg by default).
|
||||
const actions = document.getElementById('email-lib-bulk-actions');
|
||||
if (actions) actions.style.color = state._selectedUids.size > 0 ? 'var(--fg)' : '';
|
||||
const deleteBtn = document.getElementById('email-lib-bulk-delete');
|
||||
if (deleteBtn) deleteBtn.style.color = state._selectedUids.size > 0 ? 'var(--red)' : '';
|
||||
}
|
||||
|
||||
export async function _bulkAction(action) {
|
||||
const uids = Array.from(state._selectedUids);
|
||||
if (uids.length === 0) return;
|
||||
let failedReadSync = 0;
|
||||
const failedUids = new Set();
|
||||
if (action === 'delete') {
|
||||
const ok = await styledConfirm(
|
||||
`Delete ${uids.length} selected email${uids.length === 1 ? '' : 's'}?`,
|
||||
{ confirmText: 'Delete', cancelText: 'Cancel', danger: true },
|
||||
);
|
||||
if (!ok) return;
|
||||
// Deletion is intentionally optimistic. The user should not have to keep
|
||||
// the mail window open while IMAP moves a batch; refresh and restore the
|
||||
// cards only if the provider rejects the background operation.
|
||||
const removed = new Set(uids.map(uid => String(uid)));
|
||||
state._libEmails = state._libEmails.filter(e => !removed.has(String(e.uid)));
|
||||
state._selectedUids.clear();
|
||||
state._selectMode = false;
|
||||
_updateBulkBar();
|
||||
_renderGrid();
|
||||
_libCacheWriteBack();
|
||||
showToast(`Moved ${uids.length} email${uids.length === 1 ? '' : 's'} to Trash`);
|
||||
fetch(`${API_BASE}/api/email/delete-bulk`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ uids, folder: state._libFolder, account_id: state._libAccountId || null }),
|
||||
}).then(async (res) => {
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok || data?.success === false || (data?.failed_uids || []).length) {
|
||||
throw new Error(data?.error || `${data?.failed_uids?.length || 0} emails could not be deleted`);
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('Background bulk email delete failed:', error);
|
||||
showToast('Delete failed; restoring mailbox');
|
||||
_loadEmailsFresh({ force: true, useCache: false, refreshAfterCache: false }).catch(() => {});
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const deleteBtn = action === 'delete' ? document.getElementById('email-lib-bulk-delete') : null;
|
||||
const actionsBtn = document.getElementById('email-lib-bulk-actions');
|
||||
const cancelBtn = document.getElementById('email-lib-bulk-cancel');
|
||||
const selectAll = document.getElementById('email-lib-select-all');
|
||||
const countEl = document.getElementById('email-lib-selected-count');
|
||||
const originalDeleteHtml = deleteBtn?.innerHTML || '';
|
||||
const originalCountText = countEl?.textContent || '';
|
||||
let busySpinner = null;
|
||||
// Loading state for every bulk action, not just delete — large
|
||||
// selections (e.g. 90+ Dones) used to silently hammer the server
|
||||
// with sequential requests and the user got zero feedback. Now the
|
||||
// Actions button (or Delete button) shows a whirlpool + verb-ing
|
||||
// label, and the count surfaces progress.
|
||||
const verbing = {
|
||||
delete: 'Deleting',
|
||||
archive: 'Archiving',
|
||||
done: 'Marking done',
|
||||
read: 'Marking read',
|
||||
unread: 'Marking unread',
|
||||
}[action] || 'Updating';
|
||||
const targetBtn = action === 'delete' ? deleteBtn : actionsBtn;
|
||||
let originalTargetHtml = '';
|
||||
if (targetBtn) {
|
||||
originalTargetHtml = targetBtn.innerHTML;
|
||||
targetBtn.disabled = true;
|
||||
targetBtn.classList.add('email-bulk-loading');
|
||||
targetBtn.innerHTML = `<span class="email-bulk-loading-label">${verbing}</span>`;
|
||||
busySpinner = spinnerModule.create('', 'clean', 'whirlpool');
|
||||
const spEl = busySpinner.createElement();
|
||||
spEl.classList.add('email-bulk-whirlpool');
|
||||
targetBtn.appendChild(spEl);
|
||||
busySpinner.start();
|
||||
}
|
||||
if (action !== 'delete' && deleteBtn) deleteBtn.disabled = true;
|
||||
if (action === 'delete' && actionsBtn) actionsBtn.disabled = true;
|
||||
if (cancelBtn) cancelBtn.disabled = true;
|
||||
if (selectAll) selectAll.disabled = true;
|
||||
if (countEl) countEl.textContent = `${verbing} ${uids.length}…`;
|
||||
const deleteOverlays = action === 'delete'
|
||||
? uids.map(uid => {
|
||||
const card = document.querySelector(`#email-lib-grid .doclib-card[data-uid="${CSS.escape(String(uid))}"]`);
|
||||
return _showEmailDeleteOverlay(card);
|
||||
}).filter(Boolean)
|
||||
: [];
|
||||
if (deleteOverlays.length) {
|
||||
await Promise.all(deleteOverlays.map(busy => busy.ready).filter(Boolean));
|
||||
}
|
||||
|
||||
// Single-uid worker.
|
||||
const handleOne = async (uid) => {
|
||||
try {
|
||||
if (action === 'archive') {
|
||||
const res = await fetch(`${API_BASE}/api/email/archive/${uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok || data?.success === false) throw new Error(data?.error || `HTTP ${res.status}`);
|
||||
} else if (action === 'delete') {
|
||||
// Bulk Delete matches the permanent-delete behavior used by the
|
||||
// library and albums. Moving a batch through provider Trash folders
|
||||
// is unreliable on several IMAP implementations.
|
||||
const res = await fetch(`${API_BASE}/api/email/delete-permanent/${uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'DELETE' });
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok || data?.success === false) throw new Error(data?.error || `HTTP ${res.status}`);
|
||||
} else if (action === 'done') {
|
||||
// uid may come back from the Set as a string while em.uid is
|
||||
// numeric (or vice versa) — coerce both sides so the in-memory
|
||||
// state actually flips and the post-loop re-render shows the
|
||||
// done checkmark.
|
||||
const em = state._libEmails.find(e => String(e.uid) === String(uid));
|
||||
if (em) {
|
||||
em.is_answered = true;
|
||||
em.is_read = true;
|
||||
_clearDoneResponseTagsLocal(em);
|
||||
}
|
||||
const ansRes = await fetch(`${API_BASE}/api/email/mark-answered/${uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
const readRes = await fetch(`${API_BASE}/api/email/mark-read/${uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
if (!ansRes.ok || !readRes.ok) throw new Error(`mark-done HTTP ${ansRes.status}/${readRes.status}`);
|
||||
} else if (action === 'read' || action === 'unread') {
|
||||
const endpoint = action === 'read' ? 'mark-read' : 'mark-unread';
|
||||
const res = await fetch(`${API_BASE}/api/email/${endpoint}/${uid}?folder=${encodeURIComponent(state._libFolder)}${_acct()}`, { method: 'POST' });
|
||||
let data = null;
|
||||
try { data = await res.json(); } catch (_) {}
|
||||
if (!res.ok || data?.success === false) {
|
||||
throw new Error(data?.error || `HTTP ${res.status}`);
|
||||
}
|
||||
_syncEmailReadState(uid, action === 'read');
|
||||
}
|
||||
} catch (e) {
|
||||
if (action === 'read' || action === 'unread') failedReadSync += 1;
|
||||
failedUids.add(String(uid));
|
||||
console.error(`Failed to ${action} ${uid}:`, e);
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
// Run in parallel with a concurrency cap so 92 emails don't take
|
||||
// 30 seconds sequentially but we also don't open 92 simultaneous
|
||||
// connections.
|
||||
const CONCURRENCY = 6;
|
||||
const queue = uids.slice();
|
||||
let inFlight = 0;
|
||||
let nextSlot = 0;
|
||||
let finishedCount = 0;
|
||||
let bulkDeletedUids = null;
|
||||
if (action === 'delete') {
|
||||
const res = await fetch(`${API_BASE}/api/email/delete-bulk`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ uids, folder: state._libFolder, account_id: state._libAccountId || null }),
|
||||
});
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok || data?.success === false) throw new Error(data?.error || `HTTP ${res.status}`);
|
||||
for (const uid of data?.failed_uids || []) failedUids.add(String(uid));
|
||||
bulkDeletedUids = (data?.deleted_uids || []).map(String);
|
||||
if (countEl) countEl.textContent = `${verbing} ${bulkDeletedUids.length}/${uids.length}…`;
|
||||
} else await new Promise((resolve) => {
|
||||
const launch = () => {
|
||||
while (inFlight < CONCURRENCY && nextSlot < queue.length) {
|
||||
const uid = queue[nextSlot++];
|
||||
inFlight++;
|
||||
handleOne(uid).finally(() => {
|
||||
inFlight--;
|
||||
finishedCount++;
|
||||
if (countEl) countEl.textContent = `${verbing} ${finishedCount}/${queue.length}…`;
|
||||
if (nextSlot >= queue.length && inFlight === 0) resolve();
|
||||
else launch();
|
||||
});
|
||||
}
|
||||
if (queue.length === 0) resolve();
|
||||
};
|
||||
launch();
|
||||
});
|
||||
|
||||
if (action === 'archive' || action === 'delete') {
|
||||
const successfulUids = bulkDeletedUids || uids.filter(uid => !failedUids.has(String(uid)));
|
||||
if (action === 'delete') {
|
||||
deleteOverlays.forEach(busy => busy.remove?.());
|
||||
}
|
||||
await _animateEmailCardRemoval(successfulUids);
|
||||
const removed = new Set(successfulUids.map(uid => String(uid)));
|
||||
state._libEmails = state._libEmails.filter(e => !removed.has(String(e.uid)));
|
||||
} else if (action === 'done' && state._libFilter === 'undone') {
|
||||
// The undone filter is a "show only not-done" view — after marking
|
||||
// selected emails done, they no longer match. Animate them out and
|
||||
// drop them from the local list so the view reflects the filter
|
||||
// instead of leaving freshly-done cards sitting there.
|
||||
await _animateEmailCardRemoval(uids);
|
||||
const removed = new Set(uids.map(uid => String(uid)));
|
||||
state._libEmails = state._libEmails.filter(e => !removed.has(String(e.uid)));
|
||||
}
|
||||
} finally {
|
||||
deleteOverlays.forEach(busy => busy.remove?.());
|
||||
if (busySpinner) busySpinner.destroy();
|
||||
// Restore whichever button we hijacked (delete vs actions).
|
||||
if (targetBtn) {
|
||||
targetBtn.disabled = false;
|
||||
targetBtn.classList.remove('email-bulk-loading');
|
||||
targetBtn.innerHTML = originalTargetHtml || targetBtn.innerHTML;
|
||||
}
|
||||
if (deleteBtn && deleteBtn !== targetBtn) {
|
||||
deleteBtn.disabled = false;
|
||||
deleteBtn.innerHTML = originalDeleteHtml || deleteBtn.innerHTML;
|
||||
}
|
||||
if (actionsBtn && actionsBtn !== targetBtn) actionsBtn.disabled = false;
|
||||
if (cancelBtn) cancelBtn.disabled = false;
|
||||
if (selectAll) selectAll.disabled = false;
|
||||
if (countEl) countEl.textContent = originalCountText;
|
||||
}
|
||||
state._selectedUids.clear();
|
||||
state._selectMode = false;
|
||||
_updateBulkBar();
|
||||
_renderGrid();
|
||||
if (failedReadSync > 0) {
|
||||
showToast(`Failed to update ${failedReadSync} email${failedReadSync === 1 ? '' : 's'}`);
|
||||
}
|
||||
if (failedUids.size > 0 && (action === 'delete' || action === 'archive')) {
|
||||
showToast(`${failedUids.size} email${failedUids.size === 1 ? '' : 's'} could not be ${action === 'delete' ? 'deleted' : 'archived'}`);
|
||||
}
|
||||
// Sync successful local mutations into the SWR cache so reopen doesn't
|
||||
// briefly show the pre-bulk state.
|
||||
_libCacheWriteBack();
|
||||
}
|
||||
@@ -0,0 +1,677 @@
|
||||
// static/js/emailLibrary/reader.js
|
||||
//
|
||||
// The two ways an email opens outside the list: as a docked tab (a numbered
|
||||
// slot in the dock, `_openEmailAsTab`) and as a floating window
|
||||
// (`_openEmailWindow`). Plus the AI summary panel, which both of them and the
|
||||
// inline expanded card share.
|
||||
//
|
||||
// Reader slot numbers are deliberately sticky: once a reader is tab 2 it stays
|
||||
// tab 2 until it closes, even if tab 1 closes first. The slot map here is what
|
||||
// holds that.
|
||||
|
||||
import spinnerModule from '../spinner.js';
|
||||
import * as Modals from '../modalManager.js';
|
||||
import { showToast } from '../ui.js?v=20260916largetoolscroll1';
|
||||
import { state } from './state.js';
|
||||
import { _esc, _extractName, _renderEmailSummaryError } from './utils.js';
|
||||
import { _aiReplyIcon, _handleAiReplyButton, _hasMultipleRecipients } from './aiReply.js';
|
||||
import {
|
||||
_buildAttsHtmlFor,
|
||||
_loadDeferredAttachmentsIntoReader,
|
||||
_wireEmailAttachmentWrap,
|
||||
} from './attachments.js';
|
||||
import {
|
||||
_renderEmailBody,
|
||||
_safeRenderEmailBody,
|
||||
_wireEmailInlineImages,
|
||||
} from './bodyRender.js';
|
||||
import {
|
||||
_acct,
|
||||
_emailReaderSkeletonHtml,
|
||||
_makeDraggable,
|
||||
_markEmailReaderActive,
|
||||
_maybeAutoTranslateEmail,
|
||||
_normalizeEmailStateFlags,
|
||||
_recipientChipHtml,
|
||||
_recipientMetaToggleHtml,
|
||||
_setSummaryCollapsedPref,
|
||||
_showEmailReaderLoadError,
|
||||
_snapEmailModalToLeftSidebar,
|
||||
_splitRecipientList,
|
||||
_stampReaderContext,
|
||||
_summaryCollapsedPref,
|
||||
_syncEmailDoneState,
|
||||
_syncEmailReadState,
|
||||
_toggleCardPreview,
|
||||
_wireMetaToggle,
|
||||
_wireReaderActionOverflow,
|
||||
_wireRecipientChips,
|
||||
} from './index.js';
|
||||
import { _showReaderMoreMenu } from './menus.js';
|
||||
|
||||
const API_BASE = window.location.origin;
|
||||
|
||||
// "Open in new tab" — the email opens in the library (expanded inline)
|
||||
// AND a separate floating "email viewer" overlay modal is created. The
|
||||
// overlay starts minimized as a chip in the dock; tapping the chip
|
||||
// brings the viewer up over the library. Multiple tabs = multiple
|
||||
// overlay modals + chips, each independent.
|
||||
const _EMAIL_ICON_PATH = 'M2 4h20v16H2zM22 7l-9.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7';
|
||||
let _emailTabSeq = 0;
|
||||
// Persistent slot numbers per reader modalId. Once a reader is "tab 2"
|
||||
// it stays "tab 2" until it's closed — even if tab 1 closes first, the
|
||||
// remaining reader doesn't renumber down to 1. New tabs claim the
|
||||
// lowest unused slot.
|
||||
const _emailReaderSlots = new Map(); // modalId -> slot (1, 2, 3, ...)
|
||||
function _allocReaderSlot(modalId) {
|
||||
if (_emailReaderSlots.has(modalId)) return _emailReaderSlots.get(modalId);
|
||||
const used = new Set(_emailReaderSlots.values());
|
||||
let n = 1;
|
||||
while (used.has(n)) n++;
|
||||
_emailReaderSlots.set(modalId, n);
|
||||
return n;
|
||||
}
|
||||
function _freeReaderSlot(modalId) {
|
||||
_emailReaderSlots.delete(modalId);
|
||||
}
|
||||
|
||||
// JS-driven gate: sets [data-email-tabs="N"] on <body> so CSS can show
|
||||
// the per-chip number badge only when 2+ tabs exist.
|
||||
function _syncEmailTabsCount() {
|
||||
const tabs = document.querySelectorAll('.minimized-dock-chip[data-modal-id^="email-view-"]');
|
||||
document.body.dataset.emailTabs = String(tabs.length);
|
||||
}
|
||||
|
||||
// Recompute the email menu chip's tab-count whenever the dock contents
|
||||
// change. Counts "email-view-*" chips both inside #minimized-dock and
|
||||
// at body level (free-positioned chips on mobile). Result is written to
|
||||
// the email-lib-modal chip's data-tab-count attribute; CSS reads it via
|
||||
// attr() to render the badge.
|
||||
function _syncEmailTabBadge() {
|
||||
const readers = document.querySelectorAll('.minimized-dock-chip[data-modal-id^="email-reader-"]');
|
||||
document.body.dataset.emailReaders = String(readers.length);
|
||||
// Stamp each chip with its persistent slot number. CSS reads
|
||||
// data-tab-num via attr() instead of using a counter so the number
|
||||
// stays stable when other tabs close.
|
||||
readers.forEach(chip => {
|
||||
const slot = _emailReaderSlots.get(chip.dataset.modalId);
|
||||
if (slot) chip.dataset.tabNum = String(slot);
|
||||
});
|
||||
}
|
||||
let _emailTabObserverWired = false;
|
||||
let _badgeSyncScheduled = false;
|
||||
function _ensureEmailTabObserver() {
|
||||
if (_emailTabObserverWired) return;
|
||||
_emailTabObserverWired = true;
|
||||
// Debounce so a burst of mutations (e.g. _renderDock rebuilding the
|
||||
// whole dock in one pass) collapses to a single sync per animation
|
||||
// frame. Without this the chip badge could flicker as the observer
|
||||
// fires repeatedly during dock rerenders.
|
||||
const handler = () => {
|
||||
if (_badgeSyncScheduled) return;
|
||||
_badgeSyncScheduled = true;
|
||||
requestAnimationFrame(() => {
|
||||
_badgeSyncScheduled = false;
|
||||
_syncEmailTabBadge();
|
||||
});
|
||||
};
|
||||
const tryWire = () => {
|
||||
const dock = document.getElementById('minimized-dock');
|
||||
if (!dock) { setTimeout(tryWire, 200); return; }
|
||||
// Only watch what we care about: chip add/remove in the dock.
|
||||
const obs = new MutationObserver(handler);
|
||||
obs.observe(dock, { childList: true });
|
||||
// Watch the library grid so toggling a card expanded/collapsed
|
||||
// updates the lib chip's "has-expanded" badge in real time.
|
||||
const wireGridObs = () => {
|
||||
const grid = document.getElementById('email-lib-grid');
|
||||
if (!grid) { setTimeout(wireGridObs, 500); return; }
|
||||
const gridObs = new MutationObserver(handler);
|
||||
gridObs.observe(grid, { subtree: true, attributes: true, attributeFilter: ['class'] });
|
||||
};
|
||||
wireGridObs();
|
||||
handler();
|
||||
};
|
||||
tryWire();
|
||||
}
|
||||
// Hybrid model:
|
||||
// - email-lib-modal (the inbox library) is unique. Its chip just
|
||||
// restores it.
|
||||
// - Each "Open in new tab" creates a separate per-email reader modal
|
||||
// (id "email-reader-{uid}-{seq}") with the SAME structure & classes
|
||||
// as the library's inline reader, so they look identical. Each
|
||||
// reader registers its own dock chip with a number badge.
|
||||
export async function _openEmailAsTab(em, folder) {
|
||||
const useFolder = folder || state._libFolder || 'INBOX';
|
||||
_emailTabSeq += 1;
|
||||
const modalId = `email-reader-${em.uid}-${_emailTabSeq}`;
|
||||
_allocReaderSlot(modalId);
|
||||
|
||||
// Build the modal shell. Uses the same doclib-modal-content sizing
|
||||
// as the email library so it feels like a sibling window. The reader
|
||||
// body inside uses the exact same email-card-reader / email-reader-*
|
||||
// classes the inline reader uses → identical styling.
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal email-reader-tab-modal';
|
||||
modal.id = modalId;
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content doclib-modal-content email-reader-tab-content" style="background:var(--bg);width:min(720px, 92vw);display:flex;flex-direction:column;">
|
||||
<div class="modal-header">
|
||||
<h4 style="display:flex;align-items:center;gap:6px;min-width:0;flex:1;">
|
||||
<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:8px;">${_esc(em.subject || '(no subject)')}</span>
|
||||
</h4>
|
||||
<button class="minimize-btn" type="button" title="Minimize">_</button>
|
||||
<button class="close-btn" type="button" title="Close">✖</button>
|
||||
</div>
|
||||
<div class="modal-body email-reader-tab-body" style="display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0;padding:0;">
|
||||
<div class="email-card-reader email-card-expanded" style="flex:1;min-height:0;display:flex;flex-direction:column;">
|
||||
<div class="email-reader-tab-loading" style="padding:24px;display:flex;justify-content:center;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
// Inherit display from .modal (flex-center). z-index above the library
|
||||
// (which uses default .modal z-index 250) so the new tab sits on top.
|
||||
modal.style.zIndex = '270';
|
||||
// Opened last → email windows in front of any open doc (alternation flag).
|
||||
document.body.classList.add('email-front');
|
||||
|
||||
Modals.register(modalId, {
|
||||
label: 'Email',
|
||||
icon: _EMAIL_ICON_PATH,
|
||||
closeFn: () => {
|
||||
modal.remove();
|
||||
_freeReaderSlot(modalId);
|
||||
Promise.resolve().then(_syncEmailTabBadge);
|
||||
},
|
||||
restoreFn: () => {
|
||||
// Reopened last → bring the email windows in front of any open doc.
|
||||
document.body.classList.add('email-front');
|
||||
// Mobile: only one email window visible at a time. Tapping this
|
||||
// chip chips down the library + any other reader, so the user
|
||||
// toggles between them via the dock instead of stacking.
|
||||
if (window.innerWidth <= 768) {
|
||||
try {
|
||||
if (Modals.isRegistered('email-lib-modal') && !Modals.isMinimized('email-lib-modal')) {
|
||||
Modals.minimize('email-lib-modal');
|
||||
}
|
||||
} catch {}
|
||||
document.querySelectorAll('.modal[id^="email-reader-"]').forEach(other => {
|
||||
if (other.id === modalId) return;
|
||||
try {
|
||||
if (Modals.isRegistered(other.id) && !Modals.isMinimized(other.id)) {
|
||||
Modals.minimize(other.id);
|
||||
}
|
||||
} catch {}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
// Wire the `_` minimize button via modalManager (it sees our .minimize-btn
|
||||
// already exists and just binds the click handler).
|
||||
try { Modals.injectMinimizeButton(modal, modalId); } catch {}
|
||||
// X button fully closes the tab (tears down and unregisters).
|
||||
modal.querySelector('.close-btn')?.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
Modals.close(modalId);
|
||||
});
|
||||
|
||||
// Wire dragging on the header (desktop only). Matches the global pattern
|
||||
// in app.js initUIVisibility, but that runs once at boot and doesn't see
|
||||
// dynamically-created modals — so we replicate it here.
|
||||
const content = modal.querySelector('.modal-content');
|
||||
const mh = modal.querySelector('.modal-header');
|
||||
if (mh && content) {
|
||||
let dragX = 0, dragY = 0, startLeft = 0, startTop = 0, dragging = false;
|
||||
const startDrag = (clientX, clientY) => {
|
||||
dragging = true;
|
||||
const rect = content.getBoundingClientRect();
|
||||
dragX = clientX; dragY = clientY;
|
||||
startLeft = rect.left; startTop = rect.top;
|
||||
content.style.position = 'fixed';
|
||||
content.style.left = startLeft + 'px';
|
||||
content.style.top = startTop + 'px';
|
||||
content.style.margin = '0';
|
||||
};
|
||||
const onDrag = (e) => {
|
||||
if (!dragging) return;
|
||||
content.style.left = (startLeft + e.clientX - dragX) + 'px';
|
||||
content.style.top = (startTop + e.clientY - dragY) + 'px';
|
||||
};
|
||||
const stopDrag = () => {
|
||||
dragging = false;
|
||||
document.removeEventListener('mousemove', onDrag);
|
||||
document.removeEventListener('mouseup', stopDrag);
|
||||
};
|
||||
mh.addEventListener('mousedown', (e) => {
|
||||
if (e.target.closest('.close-btn, .minimize-btn, .modal-minimize-btn')) return;
|
||||
e.preventDefault();
|
||||
startDrag(e.clientX, e.clientY);
|
||||
document.addEventListener('mousemove', onDrag);
|
||||
document.addEventListener('mouseup', stopDrag);
|
||||
});
|
||||
}
|
||||
|
||||
// Open the new tab in front, on top of the email library. The user
|
||||
// can tap `_` to tab it down to a chip when they're done reading.
|
||||
//
|
||||
// Mobile: bottom-sheet windows fill the viewport, so stacking multiple
|
||||
// readers on top of each other is confusing — only one window can be
|
||||
// meaningfully visible at a time. So when the new tab opens, chip down
|
||||
// the library AND any other email-reader-* tab that's currently up.
|
||||
// The user gets a stack of mini chips to toggle between them.
|
||||
if (window.innerWidth <= 768) {
|
||||
try {
|
||||
if (Modals.isRegistered('email-lib-modal') && !Modals.isMinimized('email-lib-modal')) {
|
||||
Modals.minimize('email-lib-modal');
|
||||
}
|
||||
} catch {}
|
||||
document.querySelectorAll('.modal[id^="email-reader-"]').forEach(other => {
|
||||
if (other.id === modalId) return;
|
||||
try {
|
||||
if (Modals.isRegistered(other.id) && !Modals.isMinimized(other.id)) {
|
||||
Modals.minimize(other.id);
|
||||
}
|
||||
} catch {}
|
||||
});
|
||||
}
|
||||
_ensureEmailTabObserver();
|
||||
_syncEmailTabBadge();
|
||||
|
||||
// Fetch + render the email body using the exact same template as
|
||||
// _toggleCardPreview so the visuals match perfectly.
|
||||
const reader = modal.querySelector('.email-card-reader');
|
||||
const showFailedTab = (message) => {
|
||||
try { showToast(message || 'Failed to load email'); } catch (_) {}
|
||||
_showEmailReaderLoadError(reader, message, () => {
|
||||
try { Modals.close(modalId); } catch (_) { try { modal.remove(); } catch (_) {} }
|
||||
setTimeout(() => { _openEmailAsTab(em, useFolder); }, 0);
|
||||
});
|
||||
};
|
||||
_markEmailReaderActive(reader);
|
||||
const loading = modal.querySelector('.email-reader-tab-loading');
|
||||
if (loading) loading.remove();
|
||||
if (reader) {
|
||||
reader.classList.add('email-card-reader-loading');
|
||||
reader.innerHTML = _emailReaderSkeletonHtml();
|
||||
}
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/email/read/${em.uid}?folder=${encodeURIComponent(useFolder)}${_acct()}`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
let data = await res.json();
|
||||
if (data.error) {
|
||||
showFailedTab(`Failed to load email: ${data.error}`);
|
||||
return;
|
||||
}
|
||||
data = _normalizeEmailStateFlags({ ...em, ...data });
|
||||
Object.assign(em, data);
|
||||
_syncEmailDoneState(em.uid, data.is_answered);
|
||||
_syncEmailReadState(em.uid, true);
|
||||
_stampReaderContext(reader, data, useFolder, state._libAccountId);
|
||||
const buildChips = (str) => {
|
||||
if (!str) return '';
|
||||
return _splitRecipientList(str).map(a => {
|
||||
const name = _extractName(a);
|
||||
return _recipientChipHtml(a, name);
|
||||
}).join('');
|
||||
};
|
||||
const fromChip = _recipientChipHtml(`${data.from_name || ''} <${data.from_address || ''}>`, data.from_name || data.from_address, 'from-chip');
|
||||
let attsHtml = '';
|
||||
try { attsHtml = _buildAttsHtmlFor(em.uid, data); } catch {}
|
||||
reader.innerHTML = `
|
||||
<div class="email-reader-header">
|
||||
<div class="email-reader-meta">
|
||||
<div class="email-reader-meta-row email-reader-meta-from">
|
||||
<strong>From:</strong>
|
||||
<span class="recipient-chips">${fromChip}${_recipientMetaToggleHtml(data)}</span>
|
||||
</div>
|
||||
${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden>
|
||||
${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${buildChips(data.to)}</span></div>` : ''}
|
||||
${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${buildChips(data.cc)}</span></div>` : ''}
|
||||
</div>` : ''}
|
||||
<div class="email-reader-actions-inline">
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="ai-reply" title="${data.cached_ai_reply ? 'AI Reply (cached draft ready)' : 'AI Reply'}">${_aiReplyIcon(data)}<span class="reader-btn-label">AI reply</span></button>
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="reply" title="Reply"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg><span class="reader-btn-label">Reply</span></button>
|
||||
${_hasMultipleRecipients(data) ? `<button class="memory-toolbar-btn reader-icon-btn" data-act="reply-all" title="Reply All"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg><span class="reader-btn-label">Reply all</span></button>` : ''}
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="forward" title="Forward"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg><span class="reader-btn-label">Forward</span></button>
|
||||
<div class="email-reader-more-wrap" style="position:relative">
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="more" title="More actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg><span class="reader-btn-label">More</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${attsHtml}
|
||||
<div class="email-reader-body${data.body_html ? ' html-body' : ''}">${_safeRenderEmailBody(data)}</div>
|
||||
`;
|
||||
_markEmailReaderActive(reader);
|
||||
reader.classList.remove('email-card-reader-loading');
|
||||
_wireRecipientChips(reader);
|
||||
_wireEmailAttachmentWrap(reader, useFolder);
|
||||
_wireEmailInlineImages(reader);
|
||||
_loadDeferredAttachmentsIntoReader(reader, em.uid, useFolder, data, !!em.has_attachments);
|
||||
_maybeAutoTranslateEmail(reader);
|
||||
reader.querySelector('[data-act="reply"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
_snapEmailModalToLeftSidebar(ev.currentTarget.closest('.modal'));
|
||||
if (state._onEmailClick) await state._onEmailClick({ email: em, emailData: data, mode: 'reply' });
|
||||
});
|
||||
reader.querySelector('[data-act="reply-all"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
_snapEmailModalToLeftSidebar(ev.currentTarget.closest('.modal'));
|
||||
if (state._onEmailClick) await state._onEmailClick({ email: em, emailData: data, mode: 'reply-all' });
|
||||
});
|
||||
reader.querySelector('[data-act="ai-reply"]')?.addEventListener('click', (ev) => _handleAiReplyButton(ev, em, data));
|
||||
reader.querySelector('[data-act="forward"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
if (state._onEmailClick) await state._onEmailClick({ email: em, emailData: data, mode: 'forward' });
|
||||
});
|
||||
reader.querySelector('[data-act="summarize"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
try { await _summarizeEmail(reader, data, ev.currentTarget); } catch {}
|
||||
});
|
||||
_wireMetaToggle(reader);
|
||||
_wireReaderActionOverflow(reader);
|
||||
reader.querySelector('[data-act="more"]')?.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
try { _showReaderMoreMenu(em, modal, reader, ev.currentTarget, data); } catch {}
|
||||
});
|
||||
} catch (err) {
|
||||
showFailedTab(err?.message ? `Failed to load email: ${err.message}` : 'Failed to load email');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// "Open in new window" — spawns a floating draggable modal that shows just
|
||||
// the email content. Multiple windows can stack; each has its own DOM id
|
||||
// and close button. Uses `_makeDraggable` so dragging the header pans the
|
||||
// window around. Renders the body via _renderEmailBody for parity with the
|
||||
// expanded reader.
|
||||
let _emailWindowSeq = 0;
|
||||
export async function _openEmailWindow(em, folder) {
|
||||
const useFolder = folder || state._libFolder || 'INBOX';
|
||||
_emailWindowSeq += 1;
|
||||
const winId = `email-window-${em.uid}-${_emailWindowSeq}`;
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal email-window-modal';
|
||||
modal.id = winId;
|
||||
modal.style.cssText = 'pointer-events:none;background:transparent;';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content email-window-content" style="width:min(640px, 92vw);display:flex;flex-direction:column;background:var(--bg);">
|
||||
<div class="modal-header">
|
||||
<h4 style="display:flex;align-items:center;gap:6px;min-width:0;flex:1;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
||||
<span class="email-window-subject" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${_esc(em.subject || '(no subject)')}</span>
|
||||
</h4>
|
||||
<button class="close-btn" type="button" title="Close">✖</button>
|
||||
</div>
|
||||
<div class="modal-body email-window-body" style="overflow:auto;padding:14px 16px;flex:1;min-height:0;">
|
||||
<div class="email-window-loading" style="display:flex;justify-content:center;padding:24px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
modal.style.display = 'block';
|
||||
const content = modal.querySelector('.modal-content');
|
||||
// Position offset from screen center so successive windows cascade.
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
if (isMobile) {
|
||||
content.style.position = 'fixed';
|
||||
content.style.pointerEvents = 'auto';
|
||||
content.style.left = '0';
|
||||
content.style.right = '0';
|
||||
content.style.bottom = '0';
|
||||
content.style.top = 'auto';
|
||||
} else {
|
||||
content.style.position = 'fixed';
|
||||
content.style.pointerEvents = 'auto';
|
||||
requestAnimationFrame(() => {
|
||||
const w = content.offsetWidth, h = content.offsetHeight;
|
||||
const off = (_emailWindowSeq % 6) * 28;
|
||||
content.style.left = Math.max(20, (window.innerWidth - w) / 2 + off) + 'px';
|
||||
content.style.top = Math.max(20, (window.innerHeight - h) / 3 + off) + 'px';
|
||||
});
|
||||
}
|
||||
modal.querySelector('.close-btn')?.addEventListener('click', () => modal.remove());
|
||||
try { _makeDraggable(content, modal, 'email-window-fullscreen'); } catch {}
|
||||
|
||||
// Load + render
|
||||
const bodyEl = modal.querySelector('.email-window-body');
|
||||
const loading = modal.querySelector('.email-window-loading');
|
||||
try {
|
||||
if (loading) loading.remove();
|
||||
if (bodyEl) {
|
||||
bodyEl.classList.add('email-card-reader', 'email-card-reader-loading');
|
||||
bodyEl.style.padding = '0';
|
||||
bodyEl.innerHTML = _emailReaderSkeletonHtml();
|
||||
}
|
||||
const res = await fetch(`${API_BASE}/api/email/read/${em.uid}?folder=${encodeURIComponent(useFolder)}${_acct()}`);
|
||||
let data = await res.json();
|
||||
if (data.error) {
|
||||
bodyEl.innerHTML = `<div style="color:var(--red,#e55);padding:16px;">${_esc(data.error)}</div>`;
|
||||
return;
|
||||
}
|
||||
data = _normalizeEmailStateFlags({ ...em, ...data });
|
||||
Object.assign(em, data);
|
||||
_syncEmailDoneState(em.uid, data.is_answered);
|
||||
_syncEmailReadState(em.uid, true);
|
||||
const subjEl = modal.querySelector('.email-window-subject');
|
||||
if (subjEl && data.subject) subjEl.textContent = data.subject;
|
||||
// Build recipient chips the same way the inline reader does so the
|
||||
// standalone viewer looks/feels exactly like a real email view.
|
||||
const _chipsFor = (addrs) => {
|
||||
if (!addrs) return '';
|
||||
const list = _splitRecipientList(addrs);
|
||||
return list.map(a => {
|
||||
const name = _extractName(a);
|
||||
return _recipientChipHtml(a, name);
|
||||
}).join('');
|
||||
};
|
||||
const fromChip = _recipientChipHtml(`${data.from_name || ''} <${data.from_address || ''}>`, data.from_name || data.from_address, 'from-chip');
|
||||
let attsHtml = '';
|
||||
try { attsHtml = _buildAttsHtmlFor(em.uid, data); } catch {}
|
||||
// Repurpose bodyEl as a full email-card-reader so the inline reader's
|
||||
// CSS applies (sized header, action buttons in two rows, etc.).
|
||||
bodyEl.classList.add('email-card-reader');
|
||||
bodyEl.classList.remove('email-card-reader-loading');
|
||||
_stampReaderContext(bodyEl, { ...em, ...data }, useFolder, state._libAccountId);
|
||||
_markEmailReaderActive(bodyEl);
|
||||
bodyEl.style.padding = '0';
|
||||
bodyEl.innerHTML = `
|
||||
<div class="email-reader-header">
|
||||
<div class="email-reader-meta">
|
||||
<div class="email-reader-meta-row email-reader-meta-from">
|
||||
<strong>From:</strong>
|
||||
<span class="recipient-chips">${fromChip}${_recipientMetaToggleHtml(data)}</span>
|
||||
</div>
|
||||
${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden>
|
||||
${data.to ? `<div class="email-reader-meta-row"><strong>To:</strong><span class="recipient-chips">${_chipsFor(data.to)}</span></div>` : ''}
|
||||
${data.cc ? `<div class="email-reader-meta-row"><strong>Cc:</strong><span class="recipient-chips">${_chipsFor(data.cc)}</span></div>` : ''}
|
||||
</div>` : ''}
|
||||
<div class="email-reader-actions-inline">
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="ai-reply" title="${data.cached_ai_reply ? 'AI Reply (cached draft ready)' : 'AI Reply (suggest a draft)'}">${_aiReplyIcon(data)}<span class="reader-btn-label">AI reply</span></button>
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="reply" title="Reply"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg><span class="reader-btn-label">Reply</span></button>
|
||||
${_hasMultipleRecipients(data) ? `<button class="memory-toolbar-btn reader-icon-btn" data-act="reply-all" title="Reply All"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg><span class="reader-btn-label">Reply all</span></button>` : ''}
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="forward" title="Forward"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg><span class="reader-btn-label">Forward</span></button>
|
||||
<div class="email-reader-more-wrap" style="position:relative">
|
||||
<button class="memory-toolbar-btn reader-icon-btn" data-act="more" title="More actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg><span class="reader-btn-label">More</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
${attsHtml}
|
||||
<div class="email-reader-body${data.body_html ? ' html-body' : ''}">${_safeRenderEmailBody(data)}</div>
|
||||
`;
|
||||
_markEmailReaderActive(bodyEl);
|
||||
_wireRecipientChips(bodyEl);
|
||||
// Wire all the same action handlers the inline reader has.
|
||||
_wireEmailAttachmentWrap(bodyEl, useFolder);
|
||||
_wireEmailInlineImages(bodyEl);
|
||||
_loadDeferredAttachmentsIntoReader(bodyEl, em.uid, useFolder, data, !!em.has_attachments);
|
||||
_maybeAutoTranslateEmail(bodyEl);
|
||||
bodyEl.querySelector('[data-act="reply"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
_snapEmailModalToLeftSidebar(ev.currentTarget.closest('.modal'));
|
||||
if (state._onEmailClick) await state._onEmailClick({ email: em, emailData: data, mode: 'reply' });
|
||||
});
|
||||
bodyEl.querySelector('[data-act="reply-all"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
_snapEmailModalToLeftSidebar(ev.currentTarget.closest('.modal'));
|
||||
if (state._onEmailClick) await state._onEmailClick({ email: em, emailData: data, mode: 'reply-all' });
|
||||
});
|
||||
bodyEl.querySelector('[data-act="ai-reply"]')?.addEventListener('click', (ev) => _handleAiReplyButton(ev, em, data));
|
||||
bodyEl.querySelector('[data-act="forward"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
if (state._onEmailClick) await state._onEmailClick({ email: em, emailData: data, mode: 'forward' });
|
||||
});
|
||||
bodyEl.querySelector('[data-act="summarize"]')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
try { await _summarizeEmail(bodyEl, data, ev.currentTarget); } catch {}
|
||||
});
|
||||
_wireMetaToggle(bodyEl);
|
||||
_wireReaderActionOverflow(bodyEl);
|
||||
bodyEl.querySelector('[data-act="more"]')?.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
// Use a synthetic "card" — the more-menu only needs the anchor
|
||||
// element and the email data. The card param is mostly used to find
|
||||
// the next sibling; the standalone window has none so we just pass
|
||||
// bodyEl as a stand-in.
|
||||
try { _showReaderMoreMenu(em, modal, bodyEl, ev.currentTarget, data); } catch {}
|
||||
});
|
||||
} catch (err) {
|
||||
bodyEl.innerHTML = `<div style="color:var(--red,#e55);padding:16px;">Failed to load: ${_esc(String(err))}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
export async function _summarizeEmail(reader, data, btn) {
|
||||
const body = reader.querySelector('.email-reader-body');
|
||||
if (!body) return;
|
||||
|
||||
// If a summary panel already exists, toggle: hide/show
|
||||
const existing = body.querySelector('.email-summary-panel');
|
||||
if (existing) {
|
||||
if (existing.style.display === 'none') {
|
||||
existing.style.display = '';
|
||||
if (btn) {
|
||||
btn.classList.add('active');
|
||||
btn.querySelector('.btn-label').textContent = 'Summary';
|
||||
}
|
||||
} else {
|
||||
existing.style.display = 'none';
|
||||
if (btn) {
|
||||
btn.classList.remove('active');
|
||||
btn.querySelector('.btn-label').textContent = 'Summary';
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// No panel yet. If the email has no cached AI summary, show a placeholder
|
||||
// "not generated — create now?" prompt instead of firing the LLM immediately.
|
||||
// This avoids accidental LLM spend and makes the state explicit to the user.
|
||||
if (!data.cached_summary) {
|
||||
const prompt = document.createElement('div');
|
||||
prompt.className = 'email-summary-panel';
|
||||
prompt.innerHTML = `
|
||||
<div class="email-summary-header">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>
|
||||
<span>Summary</span>
|
||||
</div>
|
||||
<div class="email-summary-content" style="white-space:normal;display:flex;align-items:center;flex-wrap:wrap;gap:6px;"><span style="opacity:0.65">No AI summary generated.</span><button class="memory-toolbar-btn" data-act="summary-generate" style="font-size:10px;margin-left:auto;">Generate now</button></div>`;
|
||||
body.insertBefore(prompt, body.firstChild);
|
||||
if (btn) {
|
||||
btn.classList.add('active');
|
||||
const label = btn.querySelector('.btn-label');
|
||||
if (label) label.textContent = 'Summary';
|
||||
}
|
||||
// No Cancel button — toggling the Summary button again hides this panel
|
||||
// (handled by the existing-panel branch above), so it'd be redundant.
|
||||
prompt.querySelector('[data-act="summary-generate"]').addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
prompt.remove();
|
||||
await _generateSummary(reader, data, btn);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Cached summary exists — show it immediately.
|
||||
await _generateSummary(reader, data, btn);
|
||||
}
|
||||
|
||||
async function _generateSummary(reader, data, btn) {
|
||||
const body = reader.querySelector('.email-reader-body');
|
||||
if (!body) return;
|
||||
|
||||
const panel = document.createElement('div');
|
||||
panel.className = 'email-summary-panel';
|
||||
panel.innerHTML =
|
||||
'<div class="email-summary-header email-summary-toggle" role="button" tabindex="0">'
|
||||
+ '<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>'
|
||||
+ '<span>Summary</span>'
|
||||
+ '<svg class="email-summary-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-left:auto;transition:transform .15s ease;"><polyline points="6 9 12 15 18 9"/></svg>'
|
||||
+ '</div>'
|
||||
+ '<div class="email-summary-content"></div>';
|
||||
if (_summaryCollapsedPref()) panel.classList.add('collapsed');
|
||||
body.insertBefore(panel, body.firstChild);
|
||||
const _genToggle = panel.querySelector('.email-summary-toggle');
|
||||
if (_genToggle) {
|
||||
const _genFlip = () => {
|
||||
panel.classList.toggle('collapsed');
|
||||
_setSummaryCollapsedPref(panel.classList.contains('collapsed'));
|
||||
};
|
||||
_genToggle.addEventListener('click', (ev) => { ev.stopPropagation(); _genFlip(); });
|
||||
_genToggle.addEventListener('keydown', (ev) => {
|
||||
if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); _genFlip(); }
|
||||
});
|
||||
}
|
||||
|
||||
const sp = spinnerModule.createWhirlpool(18);
|
||||
const content = panel.querySelector('.email-summary-content');
|
||||
content.appendChild(sp.element);
|
||||
|
||||
if (btn) btn.disabled = true;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/email/summarize`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
body: data.body,
|
||||
subject: data.subject,
|
||||
from: `${data.from_name} <${data.from_address}>`,
|
||||
// Send identifiers so the backend can fetch the raw message and
|
||||
// pull attachment text for the summary (PDFs, invoices, etc.).
|
||||
uid: data.uid || '',
|
||||
folder: state._libFolder || 'INBOX',
|
||||
message_id: data.message_id || '',
|
||||
account_id: data.account_id || '',
|
||||
}),
|
||||
});
|
||||
const result = await res.json();
|
||||
sp.destroy();
|
||||
content.innerHTML = '';
|
||||
if (result.success && result.summary) {
|
||||
content.textContent = result.summary;
|
||||
if (btn) {
|
||||
btn.classList.add('active');
|
||||
const label = btn.querySelector('.btn-label');
|
||||
if (label) label.textContent = 'Summary';
|
||||
}
|
||||
} else {
|
||||
_renderEmailSummaryError(content, result);
|
||||
}
|
||||
} catch (e) {
|
||||
sp.destroy();
|
||||
_renderEmailSummaryError(content, null);
|
||||
if (uiModule) uiModule.showError?.('Failed to summarize');
|
||||
} finally {
|
||||
if (btn) btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
export function _emailBodyTextForTranslate(reader) {
|
||||
const body = reader?.querySelector?.('.email-reader-body');
|
||||
if (!body) return '';
|
||||
const clone = body.cloneNode(true);
|
||||
clone.querySelectorAll('.email-summary-panel, details.email-quote-fold, details.email-sig-fold').forEach(n => n.remove());
|
||||
return (clone.innerText || clone.textContent || '').trim();
|
||||
}
|
||||
@@ -0,0 +1,880 @@
|
||||
// static/js/emailLibrary/settingsPage.js
|
||||
//
|
||||
// The Email Settings page: the in-panel settings view, its form markup and
|
||||
// controls, the away/auto-reply configuration, and the display preferences
|
||||
// (inline images, tag visibility, compact rows).
|
||||
//
|
||||
// Two things here reach outside settings, which is why they live together.
|
||||
// Turning away-replies on writes a matching calendar event, so this module owns
|
||||
// the `odysseus.email.autoReplyCalendarEvent.*` keys and the create/update/
|
||||
// delete sync against /api/calendar. And the inline-image preference is read by
|
||||
// ./bodyRender.js while rendering a message, not only by the settings form.
|
||||
|
||||
import spinnerModule from '../spinner.js';
|
||||
import { emailApiUrl } from '../emailShared.js';
|
||||
import { showToast } from '../ui.js?v=20260916largetoolscroll1';
|
||||
import { state } from './state.js';
|
||||
import { _esc } from './utils.js';
|
||||
import { _wireEmailInlineImages } from './bodyRender.js';
|
||||
import {
|
||||
_loadAccounts,
|
||||
_loadEmails,
|
||||
_loadFolders,
|
||||
_loadedEmailsHaveVisibleTags,
|
||||
_notifyNoLoadedEmailTags,
|
||||
_openTasksForEmailTags,
|
||||
_publishActiveAccount,
|
||||
_refreshUnreadBadge,
|
||||
_renderAccountsStrip,
|
||||
_renderGrid,
|
||||
_resetEmailListForFreshLoad,
|
||||
} from './index.js';
|
||||
import { _openUnsubscribeReviewModal } from './unsubscribe.js';
|
||||
|
||||
const API_BASE = window.location.origin;
|
||||
|
||||
function _emailInlineImagesStorageKey(accountId = state._libAccountId) {
|
||||
return `odysseus.email.viewInlineImages.${String(accountId || 'default')}`;
|
||||
}
|
||||
|
||||
export function _readEmailInlineImagesPreference(accountId = state._libAccountId) {
|
||||
try {
|
||||
const stored = localStorage.getItem(_emailInlineImagesStorageKey(accountId));
|
||||
return stored === null ? true : stored !== '0';
|
||||
} catch (_) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function _writeEmailInlineImagesPreference(enabled, accountId = state._libAccountId) {
|
||||
try {
|
||||
localStorage.setItem(_emailInlineImagesStorageKey(accountId), enabled ? '1' : '0');
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
export async function _disableInlineImages(accountId = state._libAccountId) {
|
||||
state._libViewInlineImages = false;
|
||||
_writeEmailInlineImagesPreference(false, accountId);
|
||||
document.querySelectorAll('#email-settings-view-inline-images').forEach(toggle => {
|
||||
toggle.checked = true;
|
||||
toggle.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
try {
|
||||
const res = await fetch(emailApiUrl('/api/email/config', {
|
||||
account_id: accountId || undefined,
|
||||
}), {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ email_view_inline_images: false }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
} catch (err) {
|
||||
console.error('Failed to disable inline images:', err);
|
||||
}
|
||||
}
|
||||
|
||||
export const _EMAIL_SETTINGS_ICON = `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.04 4.3l.06.06A1.65 1.65 0 0 0 8.92 4a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82 1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></svg>`;
|
||||
const _EMAIL_SAVE_ICON = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/></svg>';
|
||||
const _EMAIL_SAVED_ICON = '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>';
|
||||
|
||||
function _setEmailSaveIcon(button, saved) {
|
||||
if (!button) return;
|
||||
const icon = button.querySelector('svg');
|
||||
if (icon) icon.outerHTML = saved ? _EMAIL_SAVED_ICON : _EMAIL_SAVE_ICON;
|
||||
button.classList.toggle('is-saved', !!saved);
|
||||
}
|
||||
const _DEFAULT_AUTO_REPLY_SUBJECT = '(Away) {subject}';
|
||||
const _DEFAULT_AUTO_REPLY_MESSAGE = "Thanks for your email. I'm away and may be slower to reply.";
|
||||
|
||||
function _normalizeAutoReplyConfig(cfg = {}) {
|
||||
const normalized = Object.prototype.hasOwnProperty.call(cfg, 'enabled');
|
||||
return {
|
||||
enabled: normalized ? !!cfg.enabled : !!cfg.email_auto_reply,
|
||||
start: String(normalized ? (cfg.start || '') : (cfg.email_auto_reply_start || '')),
|
||||
end: String(normalized ? (cfg.end || '') : (cfg.email_auto_reply_end || '')),
|
||||
subject: String(normalized ? (cfg.subject || _DEFAULT_AUTO_REPLY_SUBJECT) : (cfg.email_auto_reply_subject || _DEFAULT_AUTO_REPLY_SUBJECT)),
|
||||
message: String(normalized ? (cfg.message || '') : (cfg.email_auto_reply_message || '')),
|
||||
cooldown: String(normalized ? (cfg.cooldown || 'period') : (cfg.email_auto_reply_cooldown || 'period')),
|
||||
scope: String(normalized ? (cfg.scope || 'all') : (cfg.email_auto_reply_scope || 'all')),
|
||||
accountId: String(normalized ? (cfg.accountId || '') : (cfg.email_auto_reply_account_id || '')),
|
||||
excludeAutomated: normalized ? cfg.excludeAutomated !== false : cfg.email_auto_reply_exclude_automated !== false,
|
||||
pauseNotifications: normalized ? !!cfg.pauseNotifications : !!cfg.email_auto_reply_pause_notifications,
|
||||
viewInlineImages: normalized ? cfg.viewInlineImages !== false : cfg.email_view_inline_images !== false,
|
||||
};
|
||||
}
|
||||
|
||||
function _autoReplyDateValue(value) {
|
||||
const s = String(value || '').trim();
|
||||
const m = s.match(/^(\d{4}-\d{2}-\d{2})/);
|
||||
return m ? m[1] : '';
|
||||
}
|
||||
|
||||
function _todayDateInputValue() {
|
||||
const now = new Date();
|
||||
const pad = value => String(value).padStart(2, '0');
|
||||
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
|
||||
}
|
||||
|
||||
const _AUTO_REPLY_CALENDAR_KEY_PREFIX = 'odysseus.email.autoReplyCalendarEvent.';
|
||||
const _autoReplyCalendarSyncs = new Map();
|
||||
|
||||
function _autoReplyCalendarKey(accountId) {
|
||||
return `${_AUTO_REPLY_CALENDAR_KEY_PREFIX}${String(accountId || '').trim()}`;
|
||||
}
|
||||
|
||||
function _readAutoReplyCalendarUid(accountId) {
|
||||
if (!accountId) return '';
|
||||
try { return String(localStorage.getItem(_autoReplyCalendarKey(accountId)) || ''); } catch (_) { return ''; }
|
||||
}
|
||||
|
||||
function _writeAutoReplyCalendarUid(accountId, uid) {
|
||||
if (!accountId) return;
|
||||
try {
|
||||
if (uid) localStorage.setItem(_autoReplyCalendarKey(accountId), uid);
|
||||
else localStorage.removeItem(_autoReplyCalendarKey(accountId));
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function _addLocalCalendarDays(value, days) {
|
||||
const match = String(value || '').match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
||||
if (!match) return '';
|
||||
const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]) + days);
|
||||
const pad = n => String(n).padStart(2, '0');
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
|
||||
}
|
||||
|
||||
function _autoReplyCalendarPayload(cfg, accountId = state._libAccountId) {
|
||||
const start = _autoReplyDateValue(cfg?.start) || _todayDateInputValue();
|
||||
let end = _autoReplyDateValue(cfg?.end) || start;
|
||||
if (end < start) end = start;
|
||||
return {
|
||||
summary: 'Email Auto Reply (away)',
|
||||
dtstart: start,
|
||||
dtend: _addLocalCalendarDays(end, 1),
|
||||
all_day: true,
|
||||
description: `Odysseus email auto reply - account:${String(accountId || '')}`,
|
||||
};
|
||||
}
|
||||
|
||||
async function _findAutoReplyCalendarEventUids(cfg, accountId) {
|
||||
const start = _autoReplyDateValue(cfg?.start) || _todayDateInputValue();
|
||||
const end = _autoReplyDateValue(cfg?.end) || start;
|
||||
const startYear = Number(start.slice(0, 4)) || new Date().getFullYear();
|
||||
const endYear = Math.max(startYear, Number(end.slice(0, 4)) || startYear);
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/calendar/events?start=${startYear - 1}-01-01&end=${endYear + 2}-01-01`, {
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
if (!response.ok) return [];
|
||||
const data = await response.json().catch(() => ({}));
|
||||
const marker = `Odysseus email auto reply - account:${String(accountId || '')}`;
|
||||
return (data.events || [])
|
||||
.filter(ev => String(ev?.description || '').startsWith(marker))
|
||||
.map(ev => String(ev?.uid || '').trim())
|
||||
.filter(Boolean);
|
||||
} catch (_) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function _syncAutoReplyCalendarEventNow(cfg, accountId) {
|
||||
accountId = String(accountId || '').trim();
|
||||
if (!accountId) return false;
|
||||
let uid = _readAutoReplyCalendarUid(accountId);
|
||||
const headers = { 'Content-Type': 'application/json' };
|
||||
const request = (url, options = {}) => fetch(url, {
|
||||
credentials: 'same-origin',
|
||||
...options,
|
||||
headers: { ...headers, ...(options.headers || {}) },
|
||||
});
|
||||
|
||||
if (!cfg?.enabled) {
|
||||
const knownUids = new Set(uid ? [uid] : []);
|
||||
(await _findAutoReplyCalendarEventUids(cfg, accountId)).forEach(foundUid => knownUids.add(foundUid));
|
||||
for (const eventUid of knownUids) {
|
||||
const response = await request(`${API_BASE}/api/calendar/events/${encodeURIComponent(eventUid)}`, { method: 'DELETE' });
|
||||
if (!response.ok && response.status !== 404) throw new Error(`Calendar HTTP ${response.status}`);
|
||||
}
|
||||
_writeAutoReplyCalendarUid(accountId, '');
|
||||
return true;
|
||||
}
|
||||
|
||||
const payload = _autoReplyCalendarPayload(cfg, accountId);
|
||||
if (!uid) {
|
||||
uid = (await _findAutoReplyCalendarEventUids(cfg, accountId))[0] || '';
|
||||
if (uid) _writeAutoReplyCalendarUid(accountId, uid);
|
||||
}
|
||||
if (uid) {
|
||||
const response = await request(`${API_BASE}/api/calendar/events/${encodeURIComponent(uid)}`, {
|
||||
method: 'PUT', body: JSON.stringify(payload),
|
||||
});
|
||||
if (response.ok) return true;
|
||||
if (response.status !== 404) throw new Error(`Calendar HTTP ${response.status}`);
|
||||
_writeAutoReplyCalendarUid(accountId, '');
|
||||
}
|
||||
|
||||
const response = await request(`${API_BASE}/api/calendar/events`, {
|
||||
method: 'POST', body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok || !data.uid) throw new Error(`Calendar HTTP ${response.status}`);
|
||||
_writeAutoReplyCalendarUid(accountId, data.uid);
|
||||
return true;
|
||||
}
|
||||
|
||||
export function _syncAutoReplyCalendarEvent(cfg) {
|
||||
const accountId = String(state._libAccountId || '').trim();
|
||||
if (!accountId) return Promise.resolve(false);
|
||||
const previous = _autoReplyCalendarSyncs.get(accountId) || Promise.resolve();
|
||||
const next = previous.catch(() => {}).then(() => _syncAutoReplyCalendarEventNow(cfg, accountId));
|
||||
_autoReplyCalendarSyncs.set(accountId, next);
|
||||
return next.finally(() => {
|
||||
if (_autoReplyCalendarSyncs.get(accountId) === next) _autoReplyCalendarSyncs.delete(accountId);
|
||||
});
|
||||
}
|
||||
|
||||
export function _isAutoReplyActiveForCurrentAccount(cfg) {
|
||||
cfg = _normalizeAutoReplyConfig(cfg || {});
|
||||
if (!cfg.enabled) return false;
|
||||
if (cfg.scope === 'account' && cfg.accountId && cfg.accountId !== String(state._libAccountId || '')) return false;
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
const start = _autoReplyDateValue(cfg.start);
|
||||
const end = _autoReplyDateValue(cfg.end);
|
||||
if (start && today < start) return false;
|
||||
if (end && today > end) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
export function _syncEmailAutoReplyTitle(active) {
|
||||
const titleText = document.getElementById('email-lib-title-text');
|
||||
const statusDot = document.getElementById('email-lib-auto-reply-status-dot');
|
||||
const badge = document.getElementById('email-lib-auto-reply-badge');
|
||||
if (titleText) titleText.textContent = active ? 'Auto Reply - Active' : 'Email';
|
||||
if (statusDot) statusDot.style.display = active ? 'inline-block' : 'none';
|
||||
if (badge) {
|
||||
badge.style.display = 'none';
|
||||
badge.textContent = 'Auto Reply';
|
||||
}
|
||||
}
|
||||
|
||||
export async function _fetchEmailSettingsConfig() {
|
||||
const res = await fetch(emailApiUrl('/api/email/config', {
|
||||
account_id: state._libAccountId || undefined,
|
||||
}), { credentials: 'include' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const normalized = _normalizeAutoReplyConfig(await res.json());
|
||||
state._libViewInlineImages = normalized.viewInlineImages;
|
||||
_writeEmailInlineImagesPreference(state._libViewInlineImages);
|
||||
return normalized;
|
||||
}
|
||||
|
||||
export async function _fetchEmailWritingStyle() {
|
||||
const res = await fetch(emailApiUrl('/api/email/style', {
|
||||
account_id: state._libAccountId || undefined,
|
||||
}), { credentials: 'include' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json().catch(() => ({}));
|
||||
return String(data.style || '');
|
||||
}
|
||||
|
||||
export function _emailSettingsLoadingHtml(label = 'Loading') {
|
||||
const wp = spinnerModule.createWhirlpool(16);
|
||||
const host = document.createElement('span');
|
||||
host.className = 'email-settings-loading-spinner';
|
||||
host.appendChild(wp.element);
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'email-settings-loading';
|
||||
wrap.appendChild(host);
|
||||
const text = document.createElement('span');
|
||||
text.textContent = label;
|
||||
wrap.appendChild(text);
|
||||
return wrap.outerHTML;
|
||||
}
|
||||
|
||||
export function _emailSettingsFormHtml(cfg) {
|
||||
const activeAccount = state._libAccounts?.find(a => a && a.id === state._libAccountId);
|
||||
const accountAddress = activeAccount
|
||||
? String(activeAccount.from_address || activeAccount.imap_user || activeAccount.email || '').trim()
|
||||
: '';
|
||||
const accountScope = accountAddress
|
||||
? ` <span class="email-settings-account-scope">(${_esc(accountAddress)})</span>`
|
||||
: '';
|
||||
return `
|
||||
<div class="admin-card email-settings-section email-settings-auto-reply-section">
|
||||
<div class="email-settings-section-head">
|
||||
<div>
|
||||
<div class="email-settings-auto-reply-title-row">
|
||||
<div class="email-settings-section-title"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg><span>Auto Reply${accountScope}</span></div>
|
||||
<div class="email-settings-enabled-control">
|
||||
<span class="email-settings-enabled-state"></span>
|
||||
<label class="email-settings-toggle admin-switch">
|
||||
<input type="checkbox" id="email-auto-reply-enabled" ${cfg.enabled ? 'checked' : ''}>
|
||||
<span class="admin-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-settings-section-desc">Holiday or away replies for incoming mail.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="email-settings-auto-reply-body" class="email-settings-section-body">
|
||||
<div class="email-settings-grid">
|
||||
<label><span>Start date</span><input type="date" id="email-auto-reply-start" value="${_esc(_autoReplyDateValue(cfg.start))}"></label>
|
||||
<label><span>End date</span><input type="date" id="email-auto-reply-end" value="${_esc(_autoReplyDateValue(cfg.end))}"></label>
|
||||
</div>
|
||||
<label class="email-settings-field">
|
||||
<span>Subject</span>
|
||||
<input type="text" id="email-auto-reply-subject" value="${_esc(cfg.subject || _DEFAULT_AUTO_REPLY_SUBJECT)}" placeholder="${_esc(_DEFAULT_AUTO_REPLY_SUBJECT)}">
|
||||
</label>
|
||||
<label class="email-settings-field">
|
||||
<span>Message</span>
|
||||
<textarea id="email-auto-reply-message" rows="4">${_esc(cfg.message || _DEFAULT_AUTO_REPLY_MESSAGE)}</textarea>
|
||||
</label>
|
||||
<label class="email-settings-field">
|
||||
<span>Send to same sender</span>
|
||||
<select id="email-auto-reply-cooldown">
|
||||
<option value="period" ${cfg.cooldown === 'period' ? 'selected' : ''}>Once while active</option>
|
||||
<option value="1d" ${cfg.cooldown === '1d' ? 'selected' : ''}>Every day</option>
|
||||
<option value="3d" ${cfg.cooldown === '3d' ? 'selected' : ''}>Every 3 days</option>
|
||||
<option value="7d" ${cfg.cooldown === '7d' ? 'selected' : ''}>Every 7 days</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="email-settings-check">
|
||||
<span>Pause email notifications while active</span>
|
||||
<span class="email-settings-check-spacer"></span>
|
||||
<span class="admin-switch"><input type="checkbox" id="email-auto-reply-pause" ${cfg.pauseNotifications ? 'checked' : ''}><span class="admin-slider"></span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function _emailCleanupSettingsHtml() {
|
||||
const activeAccount = state._libAccounts?.find(a => a && a.id === state._libAccountId);
|
||||
const accountAddress = activeAccount
|
||||
? String(activeAccount.from_address || activeAccount.imap_user || activeAccount.email || '').trim()
|
||||
: '';
|
||||
const accountScope = accountAddress
|
||||
? ` <span class="email-settings-account-scope">(${_esc(accountAddress)})</span>`
|
||||
: '';
|
||||
return `
|
||||
<div class="admin-card email-settings-section email-settings-cleanup-section">
|
||||
<div class="email-settings-section-head">
|
||||
<div>
|
||||
<span class="email-settings-section-title"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg><span>Newsletter Unsubscribe${accountScope}</span></span>
|
||||
<div class="email-settings-section-desc">Find newsletter and ad emails with unsubscribe options.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="email-settings-cleanup-body" class="email-settings-section-body">
|
||||
<div class="email-settings-clean-actions">
|
||||
<span class="email-unsub-status email-settings-clean-status" style="font-size:12px;color:color-mix(in srgb,var(--fg) 68%,transparent);"></span>
|
||||
<button type="button" class="memory-toolbar-btn email-settings-clean-btn">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="vertical-align:-1px;margin-right:2px;color:var(--accent,var(--red));"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>
|
||||
<span>Clean</span>
|
||||
</button>
|
||||
<button type="button" class="memory-toolbar-btn email-settings-save">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/></svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function _emailDisplaySettingsHtml(cfg = {}) {
|
||||
return `
|
||||
<div class="admin-card email-settings-section email-settings-display-section">
|
||||
<div class="email-settings-section-head">
|
||||
<div>
|
||||
<div class="email-settings-display-title-row">
|
||||
<div class="email-settings-section-title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.59 13.41 11 3.83A2 2 0 0 0 9.59 3H4a1 1 0 0 0-1 1v5.59A2 2 0 0 0 3.59 11l9.59 9.59a2 2 0 0 0 2.82 0l4.59-4.59a2 2 0 0 0 0-2.82Z"/><path d="M7 7h.01"/></svg><span>Show Email Tags</span></div>
|
||||
<span class="email-settings-enabled-control">
|
||||
<span class="email-settings-enabled-state email-settings-display-enabled-state"></span>
|
||||
<label class="email-settings-toggle admin-switch">
|
||||
<input type="checkbox" id="email-settings-show-tags" ${state._libShowTags ? 'checked' : ''}>
|
||||
<span class="admin-slider"></span>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="email-settings-section-desc email-settings-support-copy">Choose which labels appear on email cards. <span class="email-settings-display-task-note">Turn off tagging in <button type="button" class="email-settings-inline-link" data-open-email-tasks>Tasks</button></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-settings-display-spacer" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="admin-card email-settings-section email-settings-inline-images-section">
|
||||
<div class="email-settings-section-head">
|
||||
<div>
|
||||
<div class="email-settings-display-title-row">
|
||||
<div class="email-settings-section-title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg><span>Hide Inline Images</span></div>
|
||||
<span class="email-settings-enabled-control">
|
||||
<span class="email-settings-enabled-state email-settings-inline-images-enabled-state"></span>
|
||||
<label class="email-settings-toggle admin-switch">
|
||||
<input type="checkbox" id="email-settings-view-inline-images" ${cfg.viewInlineImages === false ? 'checked' : ''}>
|
||||
<span class="admin-slider"></span>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="email-settings-section-desc email-settings-support-copy">Keep images embedded in email bodies hidden until you load them.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-settings-inline-images-spacer" aria-hidden="true"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function _emailSettingsAccountSelectHtml() {
|
||||
const accounts = Array.isArray(state._libAccounts)
|
||||
? state._libAccounts
|
||||
.filter(a => a && a.enabled !== false)
|
||||
.slice()
|
||||
.sort((a, b) => Number(!!b.is_default) - Number(!!a.is_default))
|
||||
: [];
|
||||
if (!accounts.length) return '';
|
||||
const nameCounts = new Map();
|
||||
accounts.forEach(a => {
|
||||
const name = String(a.name || '').trim();
|
||||
if (name) nameCounts.set(name, (nameCounts.get(name) || 0) + 1);
|
||||
});
|
||||
const opts = accounts.map(a => {
|
||||
const name = String(a.name || '').trim();
|
||||
const address = String(a.from_address || a.imap_user || '').trim();
|
||||
const label = name && nameCounts.get(name) > 1 && address
|
||||
? `${name} · ${address}`
|
||||
: (name || address || 'account');
|
||||
const suffix = a.is_default ? ' · (default)' : '';
|
||||
return `<option value="${_esc(a.id || '')}" ${state._libAccountId === a.id ? 'selected' : ''}>${_esc(label + suffix)}</option>`;
|
||||
}).join('');
|
||||
const selected = accounts.find(a => a.id === state._libAccountId) || accounts[0];
|
||||
const active = !!selected?.is_default;
|
||||
const icon = active
|
||||
? '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="8 12 11 15 16 9"/></svg>'
|
||||
: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>';
|
||||
const defaultTitle = active ? 'Default account' : 'Make this the default account';
|
||||
return `<div class="email-settings-account-picker" style="margin-left:auto;display:inline-flex;align-items:center;gap:8px;">`
|
||||
+ `<span class="cookbook-srv-default email-settings-default${active ? ' active' : ''}" role="button" tabindex="0" aria-pressed="${active ? 'true' : 'false'}" data-email-default-id="${_esc(selected?.id || '')}" title="${defaultTitle}"><span class="cookbook-srv-default-icon" aria-hidden="true">${icon}</span><span class="cookbook-srv-default-label">default</span></span>`
|
||||
+ `<select id="email-settings-account-select" class="memory-toolbar-btn" title="Active email for all email settings" style="height:28px;max-width:240px;position:relative;top:-2px;">${opts}</select>`
|
||||
+ `</div>`;
|
||||
}
|
||||
|
||||
export function _syncEmailSettingsAccountPicker(page) {
|
||||
const select = page?.querySelector('#email-settings-account-select');
|
||||
const selected = (state._libAccounts || []).find(a => a && a.id === state._libAccountId);
|
||||
if (select && selected) {
|
||||
[...select.options]
|
||||
.sort((a, b) => {
|
||||
const aAccount = (state._libAccounts || []).find(account => account && account.id === a.value);
|
||||
const bAccount = (state._libAccounts || []).find(account => account && account.id === b.value);
|
||||
return Number(!!bAccount?.is_default) - Number(!!aAccount?.is_default);
|
||||
})
|
||||
.forEach(option => select.appendChild(option));
|
||||
select.value = selected.id;
|
||||
[...select.options].forEach(option => {
|
||||
const account = (state._libAccounts || []).find(a => a && a.id === option.value);
|
||||
if (!account) return;
|
||||
const label = account.name || account.from_address || account.imap_user || 'account';
|
||||
option.textContent = label + (account.is_default ? ' · (default)' : '');
|
||||
});
|
||||
}
|
||||
const toggle = page?.querySelector('.email-settings-default');
|
||||
if (!toggle || !selected) return;
|
||||
const active = !!selected.is_default;
|
||||
toggle.classList.toggle('active', active);
|
||||
toggle.setAttribute('aria-pressed', active ? 'true' : 'false');
|
||||
toggle.dataset.emailDefaultId = selected.id || '';
|
||||
toggle.title = active ? 'Default account' : 'Make this the default account';
|
||||
toggle.querySelector('.cookbook-srv-default-icon').innerHTML = active
|
||||
? '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="8 12 11 15 16 9"/></svg>'
|
||||
: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>';
|
||||
}
|
||||
|
||||
export function _emailWritingStyleHtml(style) {
|
||||
return `
|
||||
<div class="admin-card email-settings-section email-settings-style-section">
|
||||
<div class="email-settings-section-head">
|
||||
<div>
|
||||
<div class="email-settings-section-title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span>Email Reply Writing Style</span></div>
|
||||
<div class="email-settings-section-desc email-settings-support-copy">Used when Odysseus drafts replies for you.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="email-settings-style-body" class="email-settings-section-body">
|
||||
<label class="email-settings-field">
|
||||
<span>Writing style</span>
|
||||
<textarea id="email-writing-style-text" rows="6">${_esc(style)}</textarea>
|
||||
</label>
|
||||
<div class="email-settings-actions">
|
||||
<button type="button" class="memory-toolbar-btn email-style-settings-extract">
|
||||
<svg class="email-unsub-accent-icon" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>
|
||||
Extract
|
||||
</button>
|
||||
<button class="email-style-extract-help" aria-label="What does Extract do?" title="Extract analyzes sent emails from the selected account and saves a writing-style prompt for AI replies.">?</button>
|
||||
<button type="button" class="memory-toolbar-btn email-style-settings-save">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/></svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export async function _showEmailSettingsPage() {
|
||||
const modal = document.getElementById('email-lib-modal');
|
||||
const page = document.getElementById('email-lib-settings-page');
|
||||
const btn = document.getElementById('email-lib-settings-btn');
|
||||
if (!modal || !page) return;
|
||||
modal.classList.add('email-settings-mode');
|
||||
page.hidden = false;
|
||||
page.scrollTop = 0;
|
||||
page.querySelector('.email-settings-body')?.scrollTo(0, 0);
|
||||
const headerBackBtn = document.getElementById('email-settings-header-back');
|
||||
if (headerBackBtn) headerBackBtn.style.display = 'inline-flex';
|
||||
btn?.classList.add('active');
|
||||
btn?.setAttribute('aria-expanded', 'true');
|
||||
page.innerHTML = `
|
||||
<div class="email-settings-page-head">
|
||||
<h2 class="email-settings-title">${_EMAIL_SETTINGS_ICON}<span>Email Settings</span></h2>
|
||||
</div>
|
||||
<div class="email-settings-body">
|
||||
${_emailSettingsLoadingHtml()}
|
||||
</div>
|
||||
`;
|
||||
let cfg;
|
||||
let writingStyle = '';
|
||||
try {
|
||||
await _loadAccounts().catch(() => {});
|
||||
const head = page.querySelector('.email-settings-page-head');
|
||||
const accountSelectHtml = _emailSettingsAccountSelectHtml();
|
||||
const oldPicker = page.querySelector('.email-settings-account-picker');
|
||||
if (oldPicker) oldPicker.remove();
|
||||
const title = head?.querySelector('.email-settings-title');
|
||||
if (title && accountSelectHtml) title.insertAdjacentHTML('beforeend', accountSelectHtml);
|
||||
[cfg, writingStyle] = await Promise.all([
|
||||
_fetchEmailSettingsConfig(),
|
||||
_fetchEmailWritingStyle().catch(() => ''),
|
||||
]);
|
||||
} catch (err) {
|
||||
page.querySelector('.email-settings-body').innerHTML = `<div class="email-settings-error">Could not load settings.</div>`;
|
||||
return;
|
||||
}
|
||||
page.querySelector('.email-settings-body').innerHTML = _emailWritingStyleHtml(writingStyle) + _emailDisplaySettingsHtml(cfg) + _emailCleanupSettingsHtml() + _emailSettingsFormHtml(cfg);
|
||||
page.querySelector('.email-settings-body')?.scrollTo(0, 0);
|
||||
state._libAutoReplyActive = _isAutoReplyActiveForCurrentAccount(cfg);
|
||||
state._libAutoReplyDraftActive = null;
|
||||
_syncEmailAutoReplyTitle(state._libAutoReplyActive);
|
||||
_renderAccountsStrip();
|
||||
_syncAutoReplyCalendarEvent(cfg).catch((err) => console.warn('Failed to reconcile auto-reply calendar event:', err));
|
||||
page.querySelector('#email-settings-account-select')?.addEventListener('change', async (ev) => {
|
||||
state._libAccountId = ev.currentTarget.value || null;
|
||||
state._libAutoReplyDraftActive = null;
|
||||
_publishActiveAccount();
|
||||
_syncEmailSettingsAccountPicker(page);
|
||||
_renderAccountsStrip();
|
||||
_resetEmailListForFreshLoad();
|
||||
_loadEmails({ useCache: true });
|
||||
_loadFolders({ resetMissing: true }).catch(() => {});
|
||||
page.querySelector('.email-unsubscribe-inline-panel')?.remove();
|
||||
const body = page.querySelector('.email-settings-body');
|
||||
if (body) body.innerHTML = _emailSettingsLoadingHtml();
|
||||
try {
|
||||
const [nextCfg, nextStyle] = await Promise.all([
|
||||
_fetchEmailSettingsConfig(),
|
||||
_fetchEmailWritingStyle().catch(() => ''),
|
||||
]);
|
||||
if (body) body.innerHTML = _emailWritingStyleHtml(nextStyle) + _emailDisplaySettingsHtml(nextCfg) + _emailCleanupSettingsHtml() + _emailSettingsFormHtml(nextCfg);
|
||||
state._libAutoReplyActive = _isAutoReplyActiveForCurrentAccount(nextCfg);
|
||||
state._libAutoReplyDraftActive = null;
|
||||
_syncEmailAutoReplyTitle(state._libAutoReplyActive);
|
||||
_renderAccountsStrip();
|
||||
_syncAutoReplyCalendarEvent(nextCfg).catch((err) => console.warn('Failed to reconcile auto-reply calendar event:', err));
|
||||
_bindEmailSettingsPageControls(page);
|
||||
} catch (_) {
|
||||
if (body) body.innerHTML = `<div class="email-settings-error">Could not load settings.</div>`;
|
||||
}
|
||||
});
|
||||
page.querySelector('.email-settings-default')?.addEventListener('click', async (ev) => {
|
||||
ev.stopPropagation();
|
||||
const acctId = ev.currentTarget.dataset.emailDefaultId;
|
||||
const account = (state._libAccounts || []).find(a => a && a.id === acctId);
|
||||
if (!acctId || account?.is_default) return;
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/email/accounts/${encodeURIComponent(acctId)}/set-default`, {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
for (const a of state._libAccounts) a.is_default = a.id === acctId;
|
||||
_syncEmailSettingsAccountPicker(page);
|
||||
_renderAccountsStrip();
|
||||
} catch (err) {
|
||||
console.error('Set default account failed:', err);
|
||||
}
|
||||
});
|
||||
page.querySelector('.email-settings-default')?.addEventListener('keydown', (ev) => {
|
||||
if (ev.key !== 'Enter' && ev.key !== ' ') return;
|
||||
ev.preventDefault();
|
||||
ev.currentTarget.click();
|
||||
});
|
||||
_bindEmailSettingsPageControls(page);
|
||||
}
|
||||
|
||||
export function _bindEmailSettingsPageControls(page) {
|
||||
page.querySelector('.email-settings-clean-btn')?.addEventListener('click', (ev) => {
|
||||
// Clean is an explicit fresh scan action; do not reopen stale cached
|
||||
// candidates when the user asks to clean again.
|
||||
_openUnsubscribeReviewModal(ev.currentTarget, { forceRescan: true });
|
||||
});
|
||||
const showTagsToggle = page.querySelector('#email-settings-show-tags');
|
||||
const syncDisplayTagsState = () => {
|
||||
const section = page.querySelector('.email-settings-display-section');
|
||||
const stateLabel = page.querySelector('.email-settings-display-enabled-state');
|
||||
const enabled = !!showTagsToggle?.checked;
|
||||
section?.classList.toggle('is-disabled', !enabled);
|
||||
section?.classList.toggle('is-enabled', enabled);
|
||||
if (stateLabel) stateLabel.textContent = enabled ? 'Show' : 'Hide';
|
||||
};
|
||||
showTagsToggle?.addEventListener('change', (ev) => {
|
||||
state._libShowTags = !!ev.target.checked;
|
||||
localStorage.setItem('odysseus.email.showTags', state._libShowTags ? '1' : '0');
|
||||
_renderGrid();
|
||||
document.dispatchEvent(new CustomEvent('odysseus:email-tags-toggle', { detail: { show: state._libShowTags } }));
|
||||
if (state._libShowTags && !_loadedEmailsHaveVisibleTags()) _notifyNoLoadedEmailTags();
|
||||
syncDisplayTagsState();
|
||||
});
|
||||
syncDisplayTagsState();
|
||||
const inlineImagesToggle = page.querySelector('#email-settings-view-inline-images');
|
||||
const syncInlineImagesState = () => {
|
||||
const section = page.querySelector('.email-settings-inline-images-section');
|
||||
const stateLabel = page.querySelector('.email-settings-inline-images-enabled-state');
|
||||
const hidden = !!inlineImagesToggle?.checked;
|
||||
section?.classList.toggle('is-disabled', !hidden);
|
||||
section?.classList.toggle('is-enabled', hidden);
|
||||
if (stateLabel) stateLabel.textContent = hidden ? 'Hide' : 'Show';
|
||||
};
|
||||
inlineImagesToggle?.addEventListener('change', async (ev) => {
|
||||
const hidden = !!ev.target.checked;
|
||||
const enabled = !hidden;
|
||||
const previous = state._libViewInlineImages;
|
||||
state._libViewInlineImages = enabled;
|
||||
_writeEmailInlineImagesPreference(enabled);
|
||||
syncInlineImagesState();
|
||||
try {
|
||||
const res = await fetch(emailApiUrl('/api/email/config', {
|
||||
account_id: state._libAccountId || undefined,
|
||||
}), {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ email_view_inline_images: enabled }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
document.querySelectorAll('.email-card-reader').forEach(reader => _wireEmailInlineImages(reader));
|
||||
} catch (err) {
|
||||
state._libViewInlineImages = previous;
|
||||
_writeEmailInlineImagesPreference(previous);
|
||||
ev.target.checked = previous === false;
|
||||
syncInlineImagesState();
|
||||
showToast?.('Failed to save inline image setting');
|
||||
console.error('Failed to save inline image setting:', err);
|
||||
}
|
||||
});
|
||||
syncInlineImagesState();
|
||||
page.querySelector('[data-open-email-tasks]')?.addEventListener('click', _openTasksForEmailTags);
|
||||
const autoReplyStart = page.querySelector('#email-auto-reply-start');
|
||||
const seedAutoReplyStartDate = () => {
|
||||
if (autoReplyStart && !autoReplyStart.value) autoReplyStart.value = _todayDateInputValue();
|
||||
};
|
||||
// Empty native date inputs can open on an arbitrary browser baseline date.
|
||||
// Seed only the draft field when the picker is opened, leaving saved settings
|
||||
// unchanged until the user explicitly presses Save.
|
||||
autoReplyStart?.addEventListener('pointerdown', seedAutoReplyStartDate);
|
||||
autoReplyStart?.addEventListener('focus', seedAutoReplyStartDate);
|
||||
const enabledToggle = page.querySelector('#email-auto-reply-enabled');
|
||||
const syncEnabledState = () => {
|
||||
const section = page.querySelector('.email-settings-auto-reply-section');
|
||||
const stateLabel = section?.querySelector('.email-settings-enabled-state');
|
||||
const enabled = !!enabledToggle?.checked;
|
||||
section?.classList.toggle('is-disabled', !enabled);
|
||||
section?.classList.toggle('is-enabled', enabled);
|
||||
if (stateLabel) stateLabel.textContent = enabled ? 'Enabled' : 'Disabled';
|
||||
};
|
||||
const saveAutoReplySettings = async ({ quiet = false } = {}) => {
|
||||
const saveBtn = page.querySelector('.email-settings-save');
|
||||
const status = page.querySelector('.email-settings-status');
|
||||
if (saveBtn && !quiet) saveBtn.disabled = true;
|
||||
_setEmailSaveIcon(saveBtn, false);
|
||||
if (status) {
|
||||
status.classList.remove('is-success', 'is-error');
|
||||
status.textContent = 'Saving…';
|
||||
}
|
||||
const payload = {
|
||||
email_auto_reply: !!page.querySelector('#email-auto-reply-enabled')?.checked,
|
||||
email_auto_reply_start: page.querySelector('#email-auto-reply-start')?.value || '',
|
||||
email_auto_reply_end: page.querySelector('#email-auto-reply-end')?.value || '',
|
||||
email_auto_reply_subject: page.querySelector('#email-auto-reply-subject')?.value || '',
|
||||
email_auto_reply_message: page.querySelector('#email-auto-reply-message')?.value || '',
|
||||
email_auto_reply_cooldown: page.querySelector('#email-auto-reply-cooldown')?.value || 'period',
|
||||
email_auto_reply_scope: 'account',
|
||||
email_auto_reply_account_id: state._libAccountId || '',
|
||||
email_auto_reply_pause_notifications: !!page.querySelector('#email-auto-reply-pause')?.checked,
|
||||
};
|
||||
try {
|
||||
const res = await fetch(emailApiUrl('/api/email/config', {
|
||||
account_id: state._libAccountId || undefined,
|
||||
}), {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const savedCfg = {
|
||||
enabled: !!payload.email_auto_reply,
|
||||
start: payload.email_auto_reply_start,
|
||||
end: payload.email_auto_reply_end,
|
||||
};
|
||||
let calendarSynced = true;
|
||||
try {
|
||||
await _syncAutoReplyCalendarEvent(savedCfg);
|
||||
} catch (calendarErr) {
|
||||
calendarSynced = false;
|
||||
console.warn('Failed to sync auto-reply calendar event:', calendarErr);
|
||||
}
|
||||
if (status) {
|
||||
status.classList.add('is-success');
|
||||
status.textContent = 'Saved';
|
||||
}
|
||||
_setEmailSaveIcon(saveBtn, true);
|
||||
if (!quiet) showToast?.('Email settings saved');
|
||||
if (!calendarSynced) showToast?.('Saved, but the calendar event could not be updated');
|
||||
state._libAutoReplyActive = _isAutoReplyActiveForCurrentAccount(savedCfg);
|
||||
state._libAutoReplyDraftActive = null;
|
||||
_syncEmailAutoReplyTitle(state._libAutoReplyActive);
|
||||
_renderAccountsStrip();
|
||||
_refreshUnreadBadge({ preserveAutoReplyTitle: true }).catch(() => {});
|
||||
setTimeout(() => { _setEmailSaveIcon(saveBtn, false); if (status) status.textContent = ''; }, quiet ? 900 : 1400);
|
||||
return true;
|
||||
} catch (err) {
|
||||
if (status) {
|
||||
status.classList.add('is-error');
|
||||
status.textContent = 'Save failed';
|
||||
}
|
||||
showToast?.('Failed to save email settings');
|
||||
return false;
|
||||
} finally {
|
||||
if (saveBtn) saveBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
enabledToggle?.addEventListener('change', () => {
|
||||
syncEnabledState();
|
||||
// Invalidate any config read that started before this toggle. Its stale
|
||||
// result must not overwrite the title we are about to render.
|
||||
state._autoReplyRefreshSeq += 1;
|
||||
const active = _isAutoReplyActiveForCurrentAccount({
|
||||
email_auto_reply: !!enabledToggle.checked,
|
||||
email_auto_reply_start: autoReplyStart?.value || '',
|
||||
email_auto_reply_end: page.querySelector('#email-auto-reply-end')?.value || '',
|
||||
email_auto_reply_scope: 'account',
|
||||
email_auto_reply_account_id: state._libAccountId || '',
|
||||
});
|
||||
state._libAutoReplyActive = active;
|
||||
state._libAutoReplyDraftActive = active;
|
||||
_syncEmailAutoReplyTitle(active);
|
||||
_renderAccountsStrip();
|
||||
saveAutoReplySettings({ quiet: true });
|
||||
});
|
||||
syncEnabledState();
|
||||
page.querySelector('.email-settings-save')?.addEventListener('click', async () => {
|
||||
await saveAutoReplySettings();
|
||||
});
|
||||
page.querySelector('.email-style-settings-save')?.addEventListener('click', async () => {
|
||||
const saveBtn = page.querySelector('.email-style-settings-save');
|
||||
const status = page.querySelector('.email-style-settings-status');
|
||||
saveBtn.disabled = true;
|
||||
_setEmailSaveIcon(saveBtn, false);
|
||||
if (status) {
|
||||
status.classList.remove('is-success', 'is-error');
|
||||
status.textContent = 'Saving…';
|
||||
}
|
||||
try {
|
||||
const res = await fetch(emailApiUrl('/api/email/style', {
|
||||
account_id: state._libAccountId || undefined,
|
||||
}), {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ style: page.querySelector('#email-writing-style-text')?.value || '' }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
if (status) {
|
||||
status.classList.add('is-success');
|
||||
status.textContent = 'Saved';
|
||||
}
|
||||
_setEmailSaveIcon(saveBtn, true);
|
||||
showToast?.('Email writing style saved');
|
||||
setTimeout(() => { _setEmailSaveIcon(saveBtn, false); if (status) status.textContent = ''; }, 1400);
|
||||
} catch (err) {
|
||||
if (status) {
|
||||
status.classList.add('is-error');
|
||||
status.textContent = 'Save failed';
|
||||
}
|
||||
showToast?.('Failed to save email writing style');
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
page.querySelector('.email-style-settings-extract')?.addEventListener('click', async () => {
|
||||
const extractBtn = page.querySelector('.email-style-settings-extract');
|
||||
const saveBtn = page.querySelector('.email-style-settings-save');
|
||||
const status = page.querySelector('.email-style-settings-status');
|
||||
const styleEl = page.querySelector('#email-writing-style-text');
|
||||
extractBtn.disabled = true;
|
||||
if (saveBtn) saveBtn.disabled = true;
|
||||
let wp = null;
|
||||
if (status) {
|
||||
status.innerHTML = '';
|
||||
try {
|
||||
wp = spinnerModule.createWhirlpool(14);
|
||||
wp.element.style.cssText = 'display:inline-block;vertical-align:-3px;margin-right:6px;';
|
||||
status.appendChild(wp.element);
|
||||
status.appendChild(document.createTextNode('Analyzing sent emails…'));
|
||||
} catch (_) {
|
||||
status.textContent = 'Analyzing sent emails…';
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await fetch(emailApiUrl('/api/email/extract-style', {
|
||||
account_id: state._libAccountId || undefined,
|
||||
}), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ sample_count: 15 }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !data.success || !data.style) throw new Error(data.error || `HTTP ${res.status}`);
|
||||
if (styleEl) styleEl.value = data.style;
|
||||
if (status) status.textContent = 'Extracted';
|
||||
showToast?.('Email writing style extracted');
|
||||
setTimeout(() => { if (status) status.textContent = ''; }, 1800);
|
||||
} catch (err) {
|
||||
if (status) status.textContent = err?.message || 'Extract failed';
|
||||
showToast?.('Failed to extract email writing style');
|
||||
} finally {
|
||||
if (wp && wp.destroy) { try { wp.destroy(); } catch (_) {} }
|
||||
extractBtn.disabled = false;
|
||||
if (saveBtn) saveBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function _hideEmailSettingsPage() {
|
||||
const modal = document.getElementById('email-lib-modal');
|
||||
const page = document.getElementById('email-lib-settings-page');
|
||||
const btn = document.getElementById('email-lib-settings-btn');
|
||||
const headerBackBtn = document.getElementById('email-settings-header-back');
|
||||
modal?.classList.remove('email-settings-mode');
|
||||
if (page) page.hidden = true;
|
||||
if (headerBackBtn) headerBackBtn.style.display = 'none';
|
||||
btn?.classList.remove('active');
|
||||
btn?.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
@@ -36,4 +36,8 @@ export const state = {
|
||||
_libEscHandler: null,
|
||||
_selectMode: false,
|
||||
_selectedUids: new Set(),
|
||||
// Generation guard for the away/auto-reply refresh. Written by the
|
||||
// settings page and by the unread-badge refresh, which live in
|
||||
// different modules, so it cannot be a module-level `let`.
|
||||
_autoReplyRefreshSeq: 0,
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -38,7 +38,7 @@ export default function createResearchSynapse(container, opts = {}) {
|
||||
<span class="rs-sep">·</span>
|
||||
<span class="rs-timer">00:00</span>
|
||||
</div>
|
||||
<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet">
|
||||
<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Live research map">
|
||||
<g class="rs-guide" aria-hidden="true">
|
||||
<ellipse cx="${cx}" cy="${cy}" rx="116" ry="72"></ellipse>
|
||||
<ellipse cx="${cx}" cy="${cy}" rx="58" ry="36"></ellipse>
|
||||
|
||||
+40
-587
@@ -4,26 +4,24 @@
|
||||
import uiModule from './ui.js?v=20260916largetoolscroll1';
|
||||
import searchModule from './search.js';
|
||||
import { byId } from './settings/dom.js';
|
||||
import {
|
||||
getSettingsRegistryIssues,
|
||||
isAdminManagedSettingsTab,
|
||||
} from './settings/registry.js';
|
||||
import { postSettings as _postSettings } from './settings/api.js';
|
||||
import { initTtsSettings, initSttSettings } from './settings/speech.js';
|
||||
import { initDocumentWritingStyle } from './settings/writingStyle.js';
|
||||
import { initImageSettings } from './settings/imageModels.js';
|
||||
import { initAgentSettings } from './settings/agent.js';
|
||||
import { getSettingsRegistryIssues } from './settings/registry.js';
|
||||
import { bindSettingsSearch } from './settings/search.js';
|
||||
import { bindSettingsSidebar } from './settings/sidebar.js';
|
||||
import {
|
||||
activateSettingsPanel,
|
||||
getActiveSettingsTab,
|
||||
bindSettingsNavigation,
|
||||
} from './settings/navigation.js';
|
||||
import { bindSettingsNavigation } from './settings/navigation.js';
|
||||
import {
|
||||
bindSettingsDrag,
|
||||
bindSettingsClose,
|
||||
bindOpenPromptModalLink,
|
||||
showSettingsModal,
|
||||
hideSettingsModal,
|
||||
} from './settings/lifecycle.js';
|
||||
import { bindSettingsPeekToggle } from './settings/peek.js';
|
||||
import { createSettingsShell } from './settings/shell.js';
|
||||
import { handleSettingsOauthReturn } from './settings/oauthReturn.js';
|
||||
import { sortModelIds } from './modelSort.js';
|
||||
import { modelCaps } from './editor/ai-models.js';
|
||||
import { providerLogo } from './providers.js';
|
||||
import { isAltGrEvent } from './platform.js';
|
||||
import { bindMenuDismiss } from './escMenuStack.js';
|
||||
@@ -46,27 +44,6 @@ let _authPolicy = { password_min_length: 8 };
|
||||
* Reads in this file deliberately stay direct fetches: this panel is the writer
|
||||
* and edits what it reads, so it must see the authoritative state, not a cache.
|
||||
*/
|
||||
async function _postSettings(body) {
|
||||
try {
|
||||
const response = await fetch('/api/auth/settings', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = new Error(response.status === 403
|
||||
? 'Admin access is required to change these settings.'
|
||||
: 'Failed to save');
|
||||
error.status = response.status;
|
||||
if (response.status === 403) uiModule.showError(error.message);
|
||||
throw error;
|
||||
}
|
||||
return response;
|
||||
} finally {
|
||||
invalidateSettings();
|
||||
}
|
||||
}
|
||||
|
||||
const el = byId;
|
||||
function esc(s) { return uiModule.esc(s); }
|
||||
@@ -75,79 +52,18 @@ function safeRasterDataUrl(raw) {
|
||||
return /^data:image\/(?:png|jpe?g|gif|webp);base64,[a-z0-9+/=\s]+$/i.test(value) ? value : '';
|
||||
}
|
||||
|
||||
/* ── Settings shell coordination ── */
|
||||
function onSettingsPanelActivated(tab) {
|
||||
// Appearance keeps its existing transparent preview behavior.
|
||||
document.body.classList.toggle('settings-appearance-open', tab === 'appearance');
|
||||
syncAppearanceOpacity(tab === 'appearance');
|
||||
|
||||
// AI endpoints are intentionally refreshed only when entering the AI panel.
|
||||
if (tab === 'ai') refreshAiModelEndpoints();
|
||||
}
|
||||
|
||||
function openAdminSettingsTab(tab) {
|
||||
if (window.adminModule && typeof window.adminModule.open === 'function') {
|
||||
window.adminModule.open(tab);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/* ── Appearance-tab opacity slider ──
|
||||
Mirrors the Theme customizer's slider: fades the settings modal's
|
||||
background (and inner cards) via color-mix so the user can watch the
|
||||
rest of the UI react to toggles, while keeping text/controls crisp
|
||||
(no element opacity). Only shown/active on the Appearance tab. */
|
||||
const _SETTINGS_PEEK = 55; // % opacity when the Peek toggle is on
|
||||
function _applySettingsOpacity(on) {
|
||||
const content = modalEl && modalEl.querySelector('.settings-modal-content, .modal-content');
|
||||
if (!content) return;
|
||||
const cards = content.querySelectorAll('.admin-card');
|
||||
if (on) {
|
||||
const bgMix = `color-mix(in srgb, var(--bg) ${_SETTINGS_PEEK}%, transparent)`;
|
||||
const panelMix = `color-mix(in srgb, var(--panel) ${_SETTINGS_PEEK}%, transparent)`;
|
||||
content.style.setProperty('background', bgMix, 'important');
|
||||
content.style.setProperty('backdrop-filter', 'none', 'important');
|
||||
content.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
|
||||
cards.forEach(c => {
|
||||
c.style.setProperty('background', panelMix, 'important');
|
||||
c.style.setProperty('backdrop-filter', 'none', 'important');
|
||||
c.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
|
||||
});
|
||||
} else {
|
||||
content.style.removeProperty('background');
|
||||
content.style.removeProperty('backdrop-filter');
|
||||
content.style.removeProperty('-webkit-backdrop-filter');
|
||||
cards.forEach(c => {
|
||||
c.style.removeProperty('background');
|
||||
c.style.removeProperty('backdrop-filter');
|
||||
c.style.removeProperty('-webkit-backdrop-filter');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show/hide the Peek toggle for the Appearance tab and apply or clear the fade.
|
||||
function syncAppearanceOpacity(active) {
|
||||
const toggle = el('settings-opacity-wrap');
|
||||
if (toggle) toggle.classList.toggle('hidden', !active);
|
||||
if (active) {
|
||||
_applySettingsOpacity(toggle ? toggle.classList.contains('active') : false);
|
||||
} else {
|
||||
_applySettingsOpacity(false); // clear the fade off the Appearance tab
|
||||
}
|
||||
}
|
||||
|
||||
function initOpacityToggle() {
|
||||
const toggle = el('settings-opacity-wrap');
|
||||
if (!toggle || toggle.dataset.bound === '1') return;
|
||||
toggle.dataset.bound = '1';
|
||||
toggle.addEventListener('click', () => {
|
||||
const on = !toggle.classList.contains('active');
|
||||
toggle.classList.toggle('active', on);
|
||||
toggle.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
_applySettingsOpacity(on);
|
||||
});
|
||||
}
|
||||
/* ── Settings shell coordination ──
|
||||
Panel activation side effects, the admin handoff, admin-only visibility and
|
||||
the public open/close API live in ./settings/shell.js. This coordinator only
|
||||
supplies the panel-owned pieces the shell needs. */
|
||||
const _shell = createSettingsShell({
|
||||
getModal: () => modalEl,
|
||||
ensureInitialized: () => { if (!initialized) initAll(); },
|
||||
syncAppearanceCheckboxes: () => syncAppearanceCheckboxes(),
|
||||
refreshAiModelEndpoints: () => refreshAiModelEndpoints(),
|
||||
isAdmin: () => !!window._isAdmin,
|
||||
getAdminModule: () => window.adminModule,
|
||||
});
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
AI TAB
|
||||
@@ -612,56 +528,6 @@ async function initTeacherModel() {
|
||||
}
|
||||
|
||||
/* ── Image Generation ── */
|
||||
async function initImageSettings() {
|
||||
const modelSel = el('set-imgModelSelect');
|
||||
const qualSel = el('set-imgQualitySelect');
|
||||
const msg = el('set-imgSettingsMsg');
|
||||
const enabledToggle = el('set-imgEnabledToggle');
|
||||
const configWrap = modelSel ? modelSel.closest('div[style*="flex-direction"]') : null;
|
||||
try {
|
||||
const endpointsRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
|
||||
const endpoints = await endpointsRes.json();
|
||||
const imageModels = new Set();
|
||||
(Array.isArray(endpoints) ? endpoints : []).forEach(endpoint => {
|
||||
if (!endpoint.is_enabled) return;
|
||||
(Array.isArray(endpoint.models) ? endpoint.models : []).forEach(modelId => {
|
||||
if (modelId && modelCaps(modelId, '', endpoint.model_type).gen) imageModels.add(String(modelId));
|
||||
});
|
||||
});
|
||||
sortModelIds(Array.from(imageModels)).forEach(mid => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = mid;
|
||||
opt.textContent = mid;
|
||||
modelSel.appendChild(opt);
|
||||
});
|
||||
} catch (e) { console.warn('Failed to load models for image settings', e); }
|
||||
try {
|
||||
const settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
const settings = await settingsRes.json();
|
||||
if (settings.image_model) modelSel.value = settings.image_model;
|
||||
if (settings.image_quality) qualSel.value = settings.image_quality;
|
||||
if (enabledToggle) enabledToggle.checked = settings.image_gen_enabled === true;
|
||||
} catch (e) { console.warn('Failed to load settings', e); }
|
||||
|
||||
function syncImgDisabled() {
|
||||
var off = enabledToggle && !enabledToggle.checked;
|
||||
var card = enabledToggle ? enabledToggle.closest('.admin-card') : null;
|
||||
if (card) card.style.opacity = off ? '0.45' : '';
|
||||
if (configWrap) configWrap.style.pointerEvents = off ? 'none' : '';
|
||||
}
|
||||
syncImgDisabled();
|
||||
|
||||
async function saveSettings() {
|
||||
try {
|
||||
const res = await _postSettings({ image_gen_enabled: enabledToggle ? enabledToggle.checked : false, image_model: modelSel.value, image_quality: qualSel.value });
|
||||
if (!res.ok) throw new Error(await res.text().catch(() => `HTTP ${res.status}`));
|
||||
msg.textContent = 'Saved'; msg.style.color = 'var(--fg)'; setTimeout(() => { msg.textContent = ''; }, 2000);
|
||||
} catch (e) { msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; msg.style.color = 'var(--red)'; }
|
||||
}
|
||||
modelSel.addEventListener('change', saveSettings);
|
||||
qualSel.addEventListener('change', saveSettings);
|
||||
if (enabledToggle) enabledToggle.addEventListener('change', function() { syncImgDisabled(); saveSettings(); });
|
||||
}
|
||||
|
||||
/* ── Vision ── */
|
||||
async function initVisionSettings() {
|
||||
@@ -743,246 +609,8 @@ async function initVisionSettings() {
|
||||
/* ── Face Recognition ── */
|
||||
|
||||
/* ── Text to Speech ── */
|
||||
async function initTtsSettings() {
|
||||
var provSel = el('set-ttsProviderSelect');
|
||||
var modelSelect = el('set-ttsModelSelect');
|
||||
var modelInput = el('set-ttsModelInput');
|
||||
var voiceSelect = el('set-ttsVoiceSelect');
|
||||
var voiceInput = el('set-ttsVoiceInput');
|
||||
var modelRow = el('set-ttsModelRow');
|
||||
var voiceRow = el('set-ttsVoiceRow');
|
||||
var speedSelect = el('set-ttsSpeedSelect');
|
||||
var speedRow = el('set-ttsSpeedRow');
|
||||
var ttsMsg = el('set-ttsSettingsMsg');
|
||||
var ttsEnabledToggle = el('set-ttsEnabledToggle');
|
||||
var ttsConfigWrap = provSel ? provSel.closest('div[style*="flex-direction"]') : null;
|
||||
|
||||
function isEndpoint() { return provSel.value.startsWith('endpoint:'); }
|
||||
function getModel() { return isEndpoint() ? modelSelect.value : modelInput.value; }
|
||||
function getVoice() { return isEndpoint() ? voiceSelect.value : voiceInput.value; }
|
||||
|
||||
function updateVisibility() {
|
||||
var prov = provSel.value;
|
||||
modelRow.style.display = prov.startsWith('endpoint:') ? 'flex' : 'none';
|
||||
voiceRow.style.display = prov === 'disabled' ? 'none' : 'flex';
|
||||
speedRow.style.display = prov === 'disabled' ? 'none' : 'flex';
|
||||
if (isEndpoint()) {
|
||||
modelSelect.style.display = ''; modelInput.style.display = 'none';
|
||||
voiceSelect.style.display = ''; voiceInput.style.display = 'none';
|
||||
} else {
|
||||
modelSelect.style.display = 'none'; modelInput.style.display = '';
|
||||
voiceSelect.style.display = 'none'; voiceInput.style.display = prov === 'disabled' ? 'none' : '';
|
||||
}
|
||||
}
|
||||
|
||||
var ttsKeywords = ['tts', 'audio'];
|
||||
try {
|
||||
var epRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
|
||||
var endpoints = await epRes.json();
|
||||
endpoints.forEach(function(ep) {
|
||||
if (!ep.is_enabled) return;
|
||||
var hasTTS = (ep.models || []).some(m => ttsKeywords.some(kw => m.toLowerCase().includes(kw)));
|
||||
if (!hasTTS) return;
|
||||
var opt = document.createElement('option'); opt.value = 'endpoint:' + ep.id; opt.textContent = ep.name + ' (API)'; provSel.appendChild(opt);
|
||||
});
|
||||
} catch (e) { console.warn('Failed to load endpoints for TTS', e); }
|
||||
|
||||
try {
|
||||
var settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
var settings = await settingsRes.json();
|
||||
if (settings.tts_provider) provSel.value = settings.tts_provider;
|
||||
if (settings.tts_model) { modelSelect.value = settings.tts_model; modelInput.value = settings.tts_model; }
|
||||
if (settings.tts_voice) { voiceSelect.value = settings.tts_voice; voiceInput.value = settings.tts_voice; }
|
||||
if (settings.tts_speed) { speedSelect.value = settings.tts_speed; }
|
||||
if (ttsEnabledToggle) ttsEnabledToggle.checked = settings.tts_enabled !== false;
|
||||
} catch (e) { console.warn('Failed to load TTS settings', e); }
|
||||
|
||||
function syncTtsDisabled() {
|
||||
var off = ttsEnabledToggle && !ttsEnabledToggle.checked;
|
||||
var card = ttsEnabledToggle ? ttsEnabledToggle.closest('.admin-card') : null;
|
||||
if (card) card.style.opacity = off ? '0.45' : '';
|
||||
if (ttsConfigWrap) ttsConfigWrap.style.pointerEvents = off ? 'none' : '';
|
||||
}
|
||||
syncTtsDisabled();
|
||||
updateVisibility();
|
||||
|
||||
async function saveTTS() {
|
||||
try {
|
||||
await _postSettings({ tts_enabled: ttsEnabledToggle ? ttsEnabledToggle.checked : true, tts_provider: provSel.value, tts_model: getModel() || 'tts-1', tts_voice: getVoice() || 'alloy', tts_speed: speedSelect.value || '1' });
|
||||
ttsMsg.textContent = 'Saved'; ttsMsg.style.color = 'var(--fg)'; setTimeout(() => { ttsMsg.textContent = ''; }, 2000);
|
||||
if (window.aiTTSManager) window.aiTTSManager.checkAvailability();
|
||||
} catch (e) { ttsMsg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; ttsMsg.style.color = 'var(--red)'; }
|
||||
}
|
||||
|
||||
async function saveAndClearCache() {
|
||||
await saveTTS();
|
||||
fetch('/api/tts/clear-cache', { method: 'POST', credentials: 'same-origin' }).catch(function(){});
|
||||
}
|
||||
|
||||
provSel.addEventListener('change', function() {
|
||||
var prov = provSel.value;
|
||||
if (prov === 'local') voiceInput.value = 'af_heart';
|
||||
else if (isEndpoint()) { voiceSelect.value = 'alloy'; modelSelect.value = 'tts-1'; }
|
||||
else if (prov === 'browser') { voiceInput.value = ''; voiceInput.placeholder = 'OS default voice'; }
|
||||
updateVisibility();
|
||||
saveTTS();
|
||||
});
|
||||
modelSelect.addEventListener('change', saveAndClearCache);
|
||||
modelInput.addEventListener('change', saveTTS);
|
||||
voiceSelect.addEventListener('change', saveAndClearCache);
|
||||
voiceInput.addEventListener('change', saveTTS);
|
||||
speedSelect.addEventListener('change', saveAndClearCache);
|
||||
if (ttsEnabledToggle) ttsEnabledToggle.addEventListener('change', function() { syncTtsDisabled(); saveTTS(); });
|
||||
|
||||
// Preview / test button
|
||||
var previewBtn = el('set-ttsPreviewBtn');
|
||||
if (previewBtn) {
|
||||
var previewAudio = null;
|
||||
var previewPlaying = false;
|
||||
function resetPreview() { previewPlaying = false; previewBtn.textContent = 'Preview'; previewBtn.style.borderColor = ''; }
|
||||
|
||||
previewBtn.addEventListener('click', async function() {
|
||||
if (previewPlaying) {
|
||||
if (previewAudio) { previewAudio.pause(); previewAudio = null; }
|
||||
window.speechSynthesis.cancel();
|
||||
resetPreview(); return;
|
||||
}
|
||||
var prov = provSel.value;
|
||||
if (prov === 'disabled') {
|
||||
ttsMsg.textContent = 'Select a provider first'; ttsMsg.style.color = 'var(--red, #e55)';
|
||||
setTimeout(function() { ttsMsg.textContent = ''; }, 2000); return;
|
||||
}
|
||||
var testText = 'Hello, this is a test of text to speech.';
|
||||
previewPlaying = true; previewBtn.textContent = 'Loading...';
|
||||
try {
|
||||
if (prov === 'browser') {
|
||||
if (!('speechSynthesis' in window)) throw new Error('Browser TTS not supported');
|
||||
var utt = new SpeechSynthesisUtterance(testText);
|
||||
var voiceVal = getVoice();
|
||||
if (voiceVal) {
|
||||
var voices = window.speechSynthesis.getVoices();
|
||||
var target = voiceVal.toLowerCase();
|
||||
var match = voices.find(function(v) { return v.name.toLowerCase() === target; }) ||
|
||||
voices.find(function(v) { return v.name.toLowerCase().includes(target); });
|
||||
if (match) utt.voice = match;
|
||||
}
|
||||
utt.rate = parseFloat(speedSelect.value) || 1;
|
||||
previewBtn.textContent = 'Stop'; previewBtn.style.borderColor = 'var(--red, #e55)';
|
||||
await new Promise(function(resolve, reject) {
|
||||
utt.onend = resolve;
|
||||
utt.onerror = function(e) { reject(new Error('Browser TTS: ' + e.error)); };
|
||||
window.speechSynthesis.speak(utt);
|
||||
});
|
||||
} else {
|
||||
var res = await fetch('/api/tts/synthesize', {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: testText, format: 'audio' })
|
||||
});
|
||||
if (!res.ok) { var err = await res.json().catch(function() { return {}; }); throw new Error(err.detail?.message || 'Synthesis failed'); }
|
||||
var blob = await res.blob();
|
||||
var url = URL.createObjectURL(blob);
|
||||
previewAudio = new Audio(url);
|
||||
previewBtn.textContent = 'Stop'; previewBtn.style.borderColor = 'var(--red, #e55)';
|
||||
await new Promise(function(resolve, reject) {
|
||||
previewAudio.onended = function() { URL.revokeObjectURL(url); previewAudio = null; resolve(); };
|
||||
previewAudio.onerror = function() { URL.revokeObjectURL(url); previewAudio = null; reject(new Error('Playback failed')); };
|
||||
previewAudio.play().catch(reject);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
ttsMsg.textContent = 'Preview failed: ' + e.message; ttsMsg.style.color = 'var(--red, #e55)';
|
||||
setTimeout(function() { ttsMsg.textContent = ''; }, 3000);
|
||||
} finally {
|
||||
resetPreview();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Speech to Text ── */
|
||||
async function initSttSettings() {
|
||||
var provSel = el('set-sttProviderSelect');
|
||||
var modelSelect = el('set-sttModelSelect');
|
||||
var modelInput = el('set-sttModelInput');
|
||||
var modelRow = el('set-sttModelRow');
|
||||
var langRow = el('set-sttLangRow');
|
||||
var langInput = el('set-sttLangInput');
|
||||
var sttMsg = el('set-sttSettingsMsg');
|
||||
var sttEnabledToggle = el('set-sttEnabledToggle');
|
||||
var sttConfigWrap = el('set-sttConfigWrap');
|
||||
// STT was removed from AI Defaults — bail if the UI isn't present.
|
||||
if (!provSel) return;
|
||||
|
||||
function isEndpoint() { return provSel.value.startsWith('endpoint:'); }
|
||||
function getModel() { return isEndpoint() ? modelInput.value : modelSelect.value; }
|
||||
|
||||
function updateVisibility() {
|
||||
var prov = provSel.value;
|
||||
var showModel = prov === 'local' || prov.startsWith('endpoint:');
|
||||
var showLang = prov !== 'disabled';
|
||||
modelRow.style.display = showModel ? 'flex' : 'none';
|
||||
langRow.style.display = showLang ? 'flex' : 'none';
|
||||
if (isEndpoint()) {
|
||||
modelSelect.style.display = 'none'; modelInput.style.display = '';
|
||||
} else {
|
||||
modelSelect.style.display = ''; modelInput.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function syncSttDisabled() {
|
||||
var off = sttEnabledToggle && !sttEnabledToggle.checked;
|
||||
var card = sttEnabledToggle ? sttEnabledToggle.closest('.admin-card') : null;
|
||||
if (card) card.style.opacity = off ? '0.45' : '';
|
||||
if (sttConfigWrap) sttConfigWrap.style.pointerEvents = off ? 'none' : '';
|
||||
}
|
||||
|
||||
// Effective provider: if toggle is off, treat as disabled regardless of provider select
|
||||
function effectiveProvider() {
|
||||
if (sttEnabledToggle && !sttEnabledToggle.checked) return 'disabled';
|
||||
return provSel.value;
|
||||
}
|
||||
|
||||
// Add API endpoints that might support STT
|
||||
try {
|
||||
var epRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
|
||||
var endpoints = await epRes.json();
|
||||
endpoints.forEach(function(ep) {
|
||||
if (!ep.is_enabled) return;
|
||||
var opt = document.createElement('option'); opt.value = 'endpoint:' + ep.id; opt.textContent = ep.name + ' (API)'; provSel.appendChild(opt);
|
||||
});
|
||||
} catch (e) { console.warn('Failed to load endpoints for STT', e); }
|
||||
|
||||
// Load saved settings
|
||||
try {
|
||||
var settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
var settings = await settingsRes.json();
|
||||
if (settings.stt_provider) provSel.value = settings.stt_provider;
|
||||
if (settings.stt_model) { modelSelect.value = settings.stt_model; modelInput.value = settings.stt_model; }
|
||||
if (settings.stt_language) langInput.value = settings.stt_language;
|
||||
if (sttEnabledToggle) sttEnabledToggle.checked = settings.stt_enabled !== false;
|
||||
} catch (e) { console.warn('Failed to load STT settings', e); }
|
||||
|
||||
syncSttDisabled();
|
||||
updateVisibility();
|
||||
|
||||
async function saveSTT() {
|
||||
try {
|
||||
var enabled = sttEnabledToggle ? sttEnabledToggle.checked : false;
|
||||
await _postSettings({ stt_enabled: enabled, stt_provider: provSel.value, stt_model: getModel() || 'base', stt_language: langInput.value.trim() });
|
||||
sttMsg.textContent = 'Saved'; sttMsg.style.color = 'var(--fg)'; setTimeout(() => { sttMsg.textContent = ''; }, 2000);
|
||||
// Notify voiceRecorder of effective provider and update send button icon
|
||||
if (window.voiceRecorderModule) window.voiceRecorderModule._sttProvider = effectiveProvider();
|
||||
if (window._updateSendBtnIcon) window._updateSendBtnIcon();
|
||||
} catch (e) { sttMsg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; sttMsg.style.color = 'var(--red)'; }
|
||||
}
|
||||
|
||||
provSel.addEventListener('change', function() { updateVisibility(); saveSTT(); });
|
||||
modelSelect.addEventListener('change', saveSTT);
|
||||
modelInput.addEventListener('change', saveSTT);
|
||||
langInput.addEventListener('change', saveSTT);
|
||||
if (sttEnabledToggle) sttEnabledToggle.addEventListener('change', function() { syncSttDisabled(); saveSTT(); });
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
SEARCH TAB
|
||||
@@ -1504,56 +1132,6 @@ async function initResearchSearchSettings() {
|
||||
}
|
||||
|
||||
/* ── Agent Settings (AI tab) ── */
|
||||
async function initAgentSettings() {
|
||||
var toolsInput = el('set-agentMaxTools');
|
||||
var roundsInput = el('set-agentMaxRounds');
|
||||
var supInput = el('set-agentSupervisorLadder');
|
||||
var msg = el('set-agentMsg');
|
||||
if (!toolsInput) return;
|
||||
|
||||
try {
|
||||
var res = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
var settings = await res.json();
|
||||
if (settings.agent_max_tool_calls) toolsInput.value = settings.agent_max_tool_calls;
|
||||
if (roundsInput && settings.agent_max_rounds) roundsInput.value = settings.agent_max_rounds;
|
||||
if (supInput) supInput.checked = !!settings.agent_supervisor_ladder;
|
||||
} catch (e) {}
|
||||
|
||||
// Clamp + coerce a raw input to an int in [lo, hi]; falls back to `dflt`
|
||||
// when blank/non-numeric. Mirrors the server-side validation.
|
||||
function clampInt(raw, lo, hi, dflt) {
|
||||
var n = parseInt(raw, 10);
|
||||
if (isNaN(n)) return dflt;
|
||||
return Math.max(lo, Math.min(n, hi));
|
||||
}
|
||||
|
||||
async function save() {
|
||||
var tools = clampInt(toolsInput.value, 0, 1000, 0);
|
||||
var rounds = roundsInput ? clampInt(roundsInput.value, 1, 200, 20) : null;
|
||||
toolsInput.value = tools; // reflect the clamped value
|
||||
if (roundsInput) roundsInput.value = rounds;
|
||||
var payload = { agent_max_tool_calls: tools };
|
||||
if (rounds != null) payload.agent_max_rounds = rounds;
|
||||
if (supInput) payload.agent_supervisor_ladder = !!supInput.checked;
|
||||
try {
|
||||
await _postSettings(payload);
|
||||
msg.textContent = (tools > 0 ? 'Limit: ' + tools + ' tool calls' : 'Unlimited tool calls') +
|
||||
(rounds != null ? ' · ' + rounds + ' steps/message' : '') +
|
||||
(supInput && supInput.checked ? ' · supervisor on' : '');
|
||||
msg.style.color = 'var(--fg)';
|
||||
} catch (e) { msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; msg.style.color = 'var(--red)'; }
|
||||
}
|
||||
|
||||
toolsInput.addEventListener('change', save);
|
||||
if (roundsInput) roundsInput.addEventListener('change', save);
|
||||
if (supInput) supInput.addEventListener('change', save);
|
||||
var cur = parseInt(toolsInput.value, 10) || 0;
|
||||
var curR = roundsInput ? (parseInt(roundsInput.value, 10) || 20) : null;
|
||||
msg.textContent = (cur > 0 ? 'Limit: ' + cur + ' tool calls' : 'Unlimited tool calls') +
|
||||
(curR != null ? ' · ' + curR + ' steps/message' : '') +
|
||||
(supInput && supInput.checked ? ' · supervisor on' : '');
|
||||
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
APPEARANCE TAB
|
||||
@@ -2151,8 +1729,8 @@ function initAll() {
|
||||
modalEl = el('settings-modal');
|
||||
|
||||
bindSettingsNavigation(modalEl, {
|
||||
openAdminTab: openAdminSettingsTab,
|
||||
onPanelActivated: onSettingsPanelActivated,
|
||||
openAdminTab: _shell.openAdminTab,
|
||||
onPanelActivated: _shell.onPanelActivated,
|
||||
});
|
||||
|
||||
bindSettingsSearch(modalEl, {
|
||||
@@ -2182,7 +1760,7 @@ function initAll() {
|
||||
closeSettings: close,
|
||||
});
|
||||
|
||||
initOpacityToggle();
|
||||
bindSettingsPeekToggle(modalEl);
|
||||
initialized = true;
|
||||
initDefaultChat();
|
||||
initTeacherModel();
|
||||
@@ -2206,69 +1784,6 @@ function initAll() {
|
||||
initDocumentWritingStyle();
|
||||
}
|
||||
|
||||
async function initDocumentWritingStyle() {
|
||||
const styleEl = el('set-document-style');
|
||||
const saveBtn = el('set-document-style-save');
|
||||
const extractBtn = el('set-document-style-extract');
|
||||
const fileEl = el('set-document-style-file');
|
||||
const msg = el('set-document-style-msg');
|
||||
if (!styleEl || !saveBtn) return;
|
||||
try {
|
||||
const res = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
const data = await res.json();
|
||||
styleEl.value = String(data.document_writing_style || '');
|
||||
} catch (_) {
|
||||
if (msg) msg.textContent = 'Failed to load';
|
||||
}
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
if (msg) msg.textContent = 'Saving...';
|
||||
try {
|
||||
const res = await _postSettings({ document_writing_style: styleEl.value });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
if (msg) msg.textContent = '✓ Saved';
|
||||
} catch (_) {
|
||||
if (msg) msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save';
|
||||
}
|
||||
setTimeout(() => { if (msg) msg.textContent = ''; }, 3000);
|
||||
});
|
||||
extractBtn?.addEventListener('click', () => fileEl?.click());
|
||||
fileEl?.addEventListener('change', async () => {
|
||||
const file = fileEl.files?.[0];
|
||||
if (!file) return;
|
||||
extractBtn.disabled = true;
|
||||
let whirlpool = null;
|
||||
if (msg) {
|
||||
msg.replaceChildren();
|
||||
try {
|
||||
const spinner = window.spinnerModule || (await import('./spinner.js')).default;
|
||||
whirlpool = spinner.createWhirlpool(14);
|
||||
whirlpool.element.style.cssText = 'display:inline-flex;width:14px;height:14px;margin-right:7px;';
|
||||
const label = document.createElement('span');
|
||||
label.textContent = 'Analyzing...';
|
||||
msg.append(whirlpool.element, label);
|
||||
} catch (_) {
|
||||
msg.textContent = 'Analyzing...';
|
||||
}
|
||||
}
|
||||
try {
|
||||
const body = new FormData();
|
||||
body.append('file', file);
|
||||
const res = await fetch('/api/auth/settings/document-style/extract', {
|
||||
method: 'POST', credentials: 'same-origin', body,
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !data.style) throw new Error(data.detail || data.error || 'Extraction failed');
|
||||
styleEl.value = String(data.style);
|
||||
if (msg) msg.textContent = '✓ Extracted — review and save';
|
||||
} catch (error) {
|
||||
if (msg) msg.textContent = error.message || 'Extraction failed';
|
||||
} finally {
|
||||
whirlpool?.destroy?.();
|
||||
extractBtn.disabled = false;
|
||||
fileEl.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function notifyIntegrationsChanged() {
|
||||
try {
|
||||
@@ -5112,7 +4627,11 @@ async function initUnifiedIntegrations() {
|
||||
fd.append('transport', transport);
|
||||
if (transport === 'stdio') {
|
||||
fd.append('command', el('uf-mcp-cmd').value);
|
||||
let args = '[]'; try { args = JSON.stringify(JSON.parse(el('uf-mcp-args').value || '[]')); } catch (_) {}
|
||||
// Unlike env below, an unparseable args value is not silently
|
||||
// defaulted: it would spawn the subprocess with an empty argv.
|
||||
let args;
|
||||
try { args = JSON.stringify(JSON.parse(el('uf-mcp-args').value || '[]')); }
|
||||
catch (_) { el('uf-mcp-msg').textContent = 'Args must be valid JSON, e.g. ["-y", "pkg"]'; return; }
|
||||
let env = '{}'; try { env = JSON.stringify(JSON.parse(el('uf-mcp-env').value || '{}')); } catch (_) {}
|
||||
fd.append('args', args);
|
||||
fd.append('env', env);
|
||||
@@ -5134,7 +4653,12 @@ async function initUnifiedIntegrations() {
|
||||
} else if (r.ok) {
|
||||
el('uf-mcp-msg').textContent = 'Saved'; formEl.style.display = 'none'; await renderList();
|
||||
} else {
|
||||
el('uf-mcp-msg').textContent = `Failed (${r.status})`;
|
||||
// Surface the server's reason. The Args validation above rejects
|
||||
// unparseable JSON, but `"x"` and `{}` parse and are refused by
|
||||
// routes/mcp/mcp_routes.py with a message naming the expected
|
||||
// shape; a bare status code sends the user looking in the wrong
|
||||
// place. Matches what admin.js shows for the same endpoint.
|
||||
el('uf-mcp-msg').textContent = data.detail || `Failed (${r.status})`;
|
||||
}
|
||||
} catch (_) { el('uf-mcp-msg').textContent = 'Failed'; }
|
||||
finally { _setBtnLoading(saveBtn, false, _origLabel); if (cancelBtn) cancelBtn.disabled = false; }
|
||||
@@ -5645,85 +5169,14 @@ async function initUnifiedIntegrations() {
|
||||
await renderList();
|
||||
}
|
||||
|
||||
/* ── Admin visibility sync ── */
|
||||
function syncAdminVisibility() {
|
||||
if (!modalEl) return;
|
||||
const isAdmin = !!window._isAdmin;
|
||||
modalEl.querySelectorAll('.admin-only').forEach(el => {
|
||||
el.style.display = isAdmin ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
PUBLIC API
|
||||
═══════════════════════════════════════════ */
|
||||
export function open(tab) {
|
||||
if (!initialized) initAll();
|
||||
export function open(tab) { _shell.open(tab); }
|
||||
export function close() { _shell.close(); }
|
||||
function syncAdminVisibility() { _shell.syncAdminVisibility(); }
|
||||
|
||||
syncAppearanceCheckboxes();
|
||||
showSettingsModal(modalEl);
|
||||
syncAdminVisibility();
|
||||
|
||||
if (tab) {
|
||||
activateSettingsPanel(modalEl, tab);
|
||||
}
|
||||
|
||||
// Preserve existing panel-specific side effects when Settings is opened
|
||||
// directly to a tab as well as when the user navigates there.
|
||||
const activeTab = tab || getActiveSettingsTab(modalEl);
|
||||
onSettingsPanelActivated(activeTab);
|
||||
|
||||
// Auto-init admin data if showing an admin tab.
|
||||
if (isAdminManagedSettingsTab(activeTab) && window.adminModule && !window.adminModule._initialized) {
|
||||
window.adminModule._initData();
|
||||
}
|
||||
}
|
||||
|
||||
export function close() {
|
||||
if (!modalEl) return;
|
||||
|
||||
// Always clear the Appearance state so the rest of the app does not remain
|
||||
// dimmed if Settings is closed while that panel is active.
|
||||
document.body.classList.remove('settings-appearance-open');
|
||||
syncAppearanceOpacity(false);
|
||||
|
||||
hideSettingsModal(modalEl);
|
||||
}
|
||||
|
||||
// Handle redirect back from Google OAuth2 — open settings to integrations and show status.
|
||||
(function _handleOauthRedirect() {
|
||||
const sp = new URLSearchParams(window.location.search);
|
||||
if (!sp.has('email_oauth_success') && !sp.has('email_oauth_error')) return;
|
||||
// Strip params from URL without a page reload.
|
||||
const clean = window.location.pathname + window.location.hash;
|
||||
window.history.replaceState(null, '', clean);
|
||||
const success = sp.has('email_oauth_success');
|
||||
const errMsg = sp.get('email_oauth_error') || '';
|
||||
// Open settings → integrations once the document is ready. This module owns
|
||||
// the open() API, so it does not need to wait for a window-level alias.
|
||||
function _showResult() {
|
||||
open('integrations');
|
||||
// Brief toast-style banner.
|
||||
const banner = document.createElement('div');
|
||||
banner.textContent = success
|
||||
? 'Google account connected — email is ready'
|
||||
: `Google OAuth failed: ${errMsg || 'unknown error'}`;
|
||||
Object.assign(banner.style, {
|
||||
position: 'fixed', bottom: '24px', left: '50%', transform: 'translateX(-50%)',
|
||||
background: success ? 'var(--accent, #50fa7b)' : 'var(--red, #ff5555)',
|
||||
color: '#000', padding: '8px 18px', borderRadius: '6px', fontSize: '12px',
|
||||
fontWeight: '600', zIndex: '99999', pointerEvents: 'none',
|
||||
boxShadow: '0 2px 12px rgba(0,0,0,0.3)',
|
||||
});
|
||||
document.body.appendChild(banner);
|
||||
setTimeout(() => banner.remove(), 4000);
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', _showResult, { once: true });
|
||||
} else {
|
||||
_showResult();
|
||||
}
|
||||
})();
|
||||
handleSettingsOauthReturn({ openSettings: open });
|
||||
|
||||
const settingsModule = { open, close, initIntegrations, initUnifiedIntegrations, syncAdminVisibility, refreshAiModelEndpoints };
|
||||
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
// Agent settings panel.
|
||||
// Extracted verbatim from static/js/settings.js. Behaviour is unchanged: the
|
||||
// functions moved, their bodies did not. settings.js imports them and calls
|
||||
// them from the same places, so load order and init sequence are untouched.
|
||||
|
||||
import { byId as el } from './dom.js';
|
||||
import { postSettings as _postSettings } from './api.js';
|
||||
|
||||
export async function initAgentSettings() {
|
||||
var toolsInput = el('set-agentMaxTools');
|
||||
var roundsInput = el('set-agentMaxRounds');
|
||||
var supInput = el('set-agentSupervisorLadder');
|
||||
var msg = el('set-agentMsg');
|
||||
if (!toolsInput) return;
|
||||
|
||||
try {
|
||||
var res = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
var settings = await res.json();
|
||||
if (settings.agent_max_tool_calls) toolsInput.value = settings.agent_max_tool_calls;
|
||||
if (roundsInput && settings.agent_max_rounds) roundsInput.value = settings.agent_max_rounds;
|
||||
if (supInput) supInput.checked = !!settings.agent_supervisor_ladder;
|
||||
} catch (e) {}
|
||||
|
||||
// Clamp + coerce a raw input to an int in [lo, hi]; falls back to `dflt`
|
||||
// when blank/non-numeric. Mirrors the server-side validation.
|
||||
function clampInt(raw, lo, hi, dflt) {
|
||||
var n = parseInt(raw, 10);
|
||||
if (isNaN(n)) return dflt;
|
||||
return Math.max(lo, Math.min(n, hi));
|
||||
}
|
||||
|
||||
async function save() {
|
||||
var tools = clampInt(toolsInput.value, 0, 1000, 0);
|
||||
var rounds = roundsInput ? clampInt(roundsInput.value, 1, 200, 20) : null;
|
||||
toolsInput.value = tools; // reflect the clamped value
|
||||
if (roundsInput) roundsInput.value = rounds;
|
||||
var payload = { agent_max_tool_calls: tools };
|
||||
if (rounds != null) payload.agent_max_rounds = rounds;
|
||||
if (supInput) payload.agent_supervisor_ladder = !!supInput.checked;
|
||||
try {
|
||||
await _postSettings(payload);
|
||||
msg.textContent = (tools > 0 ? 'Limit: ' + tools + ' tool calls' : 'Unlimited tool calls') +
|
||||
(rounds != null ? ' · ' + rounds + ' steps/message' : '') +
|
||||
(supInput && supInput.checked ? ' · supervisor on' : '');
|
||||
msg.style.color = 'var(--fg)';
|
||||
} catch (e) { msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; msg.style.color = 'var(--red)'; }
|
||||
}
|
||||
|
||||
toolsInput.addEventListener('change', save);
|
||||
if (roundsInput) roundsInput.addEventListener('change', save);
|
||||
if (supInput) supInput.addEventListener('change', save);
|
||||
var cur = parseInt(toolsInput.value, 10) || 0;
|
||||
var curR = roundsInput ? (parseInt(roundsInput.value, 10) || 20) : null;
|
||||
msg.textContent = (cur > 0 ? 'Limit: ' + cur + ' tool calls' : 'Unlimited tool calls') +
|
||||
(curR != null ? ' · ' + curR + ' steps/message' : '') +
|
||||
(supInput && supInput.checked ? ' · supervisor on' : '');
|
||||
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// Lifted verbatim from static/js/settings.js so extracted panels can post
|
||||
// settings without importing the module they were extracted from.
|
||||
import uiModule from '../ui.js?v=20260916largetoolscroll1';
|
||||
import { invalidateSettings } from '../appConfig.js';
|
||||
|
||||
export async function postSettings(body) {
|
||||
try {
|
||||
const response = await fetch('/api/auth/settings', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = new Error(response.status === 403
|
||||
? 'Admin access is required to change these settings.'
|
||||
: 'Failed to save');
|
||||
error.status = response.status;
|
||||
if (response.status === 403) uiModule.showError(error.message);
|
||||
throw error;
|
||||
}
|
||||
return response;
|
||||
} finally {
|
||||
invalidateSettings();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
// Image-model settings panel.
|
||||
// Extracted verbatim from static/js/settings.js. Behaviour is unchanged: the
|
||||
// functions moved, their bodies did not. settings.js imports them and calls
|
||||
// them from the same places, so load order and init sequence are untouched.
|
||||
|
||||
import { byId as el } from './dom.js';
|
||||
import { postSettings as _postSettings } from './api.js';
|
||||
import { modelCaps } from '../editor/ai-models.js';
|
||||
import { sortModelIds } from '../modelSort.js';
|
||||
|
||||
export async function initImageSettings() {
|
||||
const modelSel = el('set-imgModelSelect');
|
||||
const qualSel = el('set-imgQualitySelect');
|
||||
const msg = el('set-imgSettingsMsg');
|
||||
const enabledToggle = el('set-imgEnabledToggle');
|
||||
const configWrap = modelSel ? modelSel.closest('div[style*="flex-direction"]') : null;
|
||||
try {
|
||||
const endpointsRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
|
||||
const endpoints = await endpointsRes.json();
|
||||
const imageModels = new Set();
|
||||
(Array.isArray(endpoints) ? endpoints : []).forEach(endpoint => {
|
||||
if (!endpoint.is_enabled || !endpoint.online) return;
|
||||
(Array.isArray(endpoint.models) ? endpoint.models : []).forEach(modelId => {
|
||||
if (modelId && modelCaps(modelId, '', endpoint.model_type).gen) imageModels.add(String(modelId));
|
||||
});
|
||||
});
|
||||
sortModelIds(Array.from(imageModels)).forEach(mid => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = mid;
|
||||
opt.textContent = mid;
|
||||
modelSel.appendChild(opt);
|
||||
});
|
||||
} catch (e) { console.warn('Failed to load models for image settings', e); }
|
||||
try {
|
||||
const settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
const settings = await settingsRes.json();
|
||||
if (settings.image_model) modelSel.value = settings.image_model;
|
||||
if (settings.image_quality) qualSel.value = settings.image_quality;
|
||||
if (enabledToggle) enabledToggle.checked = settings.image_gen_enabled === true;
|
||||
} catch (e) { console.warn('Failed to load settings', e); }
|
||||
|
||||
function syncImgDisabled() {
|
||||
var off = enabledToggle && !enabledToggle.checked;
|
||||
var card = enabledToggle ? enabledToggle.closest('.admin-card') : null;
|
||||
if (card) card.style.opacity = off ? '0.45' : '';
|
||||
if (configWrap) configWrap.style.pointerEvents = off ? 'none' : '';
|
||||
}
|
||||
syncImgDisabled();
|
||||
|
||||
async function saveSettings() {
|
||||
try {
|
||||
const res = await _postSettings({ image_gen_enabled: enabledToggle ? enabledToggle.checked : false, image_model: modelSel.value, image_quality: qualSel.value });
|
||||
if (!res.ok) throw new Error(await res.text().catch(() => `HTTP ${res.status}`));
|
||||
msg.textContent = 'Saved'; msg.style.color = 'var(--fg)'; setTimeout(() => { msg.textContent = ''; }, 2000);
|
||||
} catch (e) { msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; msg.style.color = 'var(--red)'; }
|
||||
}
|
||||
modelSel.addEventListener('change', saveSettings);
|
||||
qualSel.addEventListener('change', saveSettings);
|
||||
if (enabledToggle) enabledToggle.addEventListener('change', function() { syncImgDisabled(); saveSettings(); });
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
// Return path from the Google OAuth2 redirect.
|
||||
//
|
||||
// The provider sends the browser back to the app root with a result in the
|
||||
// query string, so something has to notice on load and put the user back where
|
||||
// they were — the Integrations panel — with the outcome visible. That is
|
||||
// navigation, not an Integrations concern, and it runs once per page load
|
||||
// rather than once per panel open.
|
||||
|
||||
/**
|
||||
* @param {object} options
|
||||
* @param {(tab: string) => void} options.openSettings the Settings open() entry point
|
||||
*/
|
||||
export function handleSettingsOauthReturn({ openSettings } = {}) {
|
||||
const sp = new URLSearchParams(window.location.search);
|
||||
if (!sp.has('email_oauth_success') && !sp.has('email_oauth_error')) return;
|
||||
// Strip params from URL without a page reload.
|
||||
const clean = window.location.pathname + window.location.hash;
|
||||
window.history.replaceState(null, '', clean);
|
||||
const success = sp.has('email_oauth_success');
|
||||
const errMsg = sp.get('email_oauth_error') || '';
|
||||
|
||||
// The caller passes its own open() in, so this never has to wait for a
|
||||
// window-level alias to exist.
|
||||
function _showResult() {
|
||||
openSettings('integrations');
|
||||
// Brief toast-style banner.
|
||||
const banner = document.createElement('div');
|
||||
banner.textContent = success
|
||||
? 'Google account connected — email is ready'
|
||||
: `Google OAuth failed: ${errMsg || 'unknown error'}`;
|
||||
Object.assign(banner.style, {
|
||||
position: 'fixed', bottom: '24px', left: '50%', transform: 'translateX(-50%)',
|
||||
background: success ? 'var(--accent, #50fa7b)' : 'var(--red, #ff5555)',
|
||||
color: '#000', padding: '8px 18px', borderRadius: '6px', fontSize: '12px',
|
||||
fontWeight: '600', zIndex: '99999', pointerEvents: 'none',
|
||||
boxShadow: '0 2px 12px rgba(0,0,0,0.3)',
|
||||
});
|
||||
document.body.appendChild(banner);
|
||||
setTimeout(() => banner.remove(), 4000);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', _showResult, { once: true });
|
||||
} else {
|
||||
_showResult();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// Settings window peek (transparency) chrome.
|
||||
//
|
||||
// The Appearance panel lets the user watch the rest of the UI react to a toggle
|
||||
// without closing Settings. That is window chrome, not panel data, so it lives
|
||||
// here rather than with the Appearance panel's checkbox handling: the fade is
|
||||
// applied to the Settings window's own background via color-mix — never element
|
||||
// opacity, so controls and text stay crisp — and it has to be cleared the
|
||||
// moment the user leaves Appearance or closes the window. Mirrors the Theme
|
||||
// customizer's slider.
|
||||
|
||||
import { byId } from './dom.js';
|
||||
|
||||
const PEEK_OPACITY = 55; // % opacity when the Peek toggle is on
|
||||
const TOGGLE_ID = 'settings-opacity-wrap';
|
||||
|
||||
function _toggleEl() {
|
||||
return byId(TOGGLE_ID);
|
||||
}
|
||||
|
||||
export function applySettingsPeek(modalEl, on) {
|
||||
const content = modalEl && modalEl.querySelector('.settings-modal-content, .modal-content');
|
||||
if (!content) return;
|
||||
const cards = content.querySelectorAll('.admin-card');
|
||||
if (on) {
|
||||
const bgMix = `color-mix(in srgb, var(--bg) ${PEEK_OPACITY}%, transparent)`;
|
||||
const panelMix = `color-mix(in srgb, var(--panel) ${PEEK_OPACITY}%, transparent)`;
|
||||
content.style.setProperty('background', bgMix, 'important');
|
||||
content.style.setProperty('backdrop-filter', 'none', 'important');
|
||||
content.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
|
||||
cards.forEach(c => {
|
||||
c.style.setProperty('background', panelMix, 'important');
|
||||
c.style.setProperty('backdrop-filter', 'none', 'important');
|
||||
c.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
|
||||
});
|
||||
} else {
|
||||
content.style.removeProperty('background');
|
||||
content.style.removeProperty('backdrop-filter');
|
||||
content.style.removeProperty('-webkit-backdrop-filter');
|
||||
cards.forEach(c => {
|
||||
c.style.removeProperty('background');
|
||||
c.style.removeProperty('backdrop-filter');
|
||||
c.style.removeProperty('-webkit-backdrop-filter');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show/hide the Peek toggle for the Appearance tab and apply or clear the fade.
|
||||
export function syncSettingsPeek(modalEl, active) {
|
||||
const toggle = _toggleEl();
|
||||
if (toggle) toggle.classList.toggle('hidden', !active);
|
||||
if (active) {
|
||||
applySettingsPeek(modalEl, toggle ? toggle.classList.contains('active') : false);
|
||||
} else {
|
||||
applySettingsPeek(modalEl, false); // clear the fade off the Appearance tab
|
||||
}
|
||||
}
|
||||
|
||||
export function bindSettingsPeekToggle(modalEl) {
|
||||
const toggle = _toggleEl();
|
||||
if (!toggle || toggle.dataset.bound === '1') return;
|
||||
toggle.dataset.bound = '1';
|
||||
toggle.addEventListener('click', () => {
|
||||
const on = !toggle.classList.contains('active');
|
||||
toggle.classList.toggle('active', on);
|
||||
toggle.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
applySettingsPeek(modalEl, on);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// Settings shell coordination.
|
||||
//
|
||||
// settings.js still owns every panel's data loading. This module owns the shell
|
||||
// around them: what happens when a panel becomes active, where an
|
||||
// admin-managed tab is handed off to admin.js, which elements are admin-only,
|
||||
// and the public open/close entry points.
|
||||
//
|
||||
// It keeps no panel state. Everything it needs from the panels arrives through
|
||||
// the options below, so panels can move out of settings.js one at a time
|
||||
// without this file changing — and so the shell's behavior is testable without
|
||||
// booting a panel.
|
||||
|
||||
import { activateSettingsPanel, getActiveSettingsTab } from './navigation.js';
|
||||
import { showSettingsModal, hideSettingsModal } from './lifecycle.js';
|
||||
import { isAdminManagedSettingsTab } from './registry.js';
|
||||
import { syncSettingsPeek } from './peek.js';
|
||||
|
||||
/**
|
||||
* @param {object} options
|
||||
* @param {() => Element|null} options.getModal the Settings modal, once initialized
|
||||
* @param {() => void} options.ensureInitialized first-open panel initialization
|
||||
* @param {() => void} options.syncAppearanceCheckboxes Appearance panel state refresh
|
||||
* @param {() => void} options.refreshAiModelEndpoints AI panel endpoint refresh
|
||||
* @param {() => boolean} options.isAdmin current admin status
|
||||
* @param {() => object|null} options.getAdminModule the lazily loaded admin module
|
||||
*/
|
||||
export function createSettingsShell(options = {}) {
|
||||
const getModal = options.getModal;
|
||||
const ensureInitialized = options.ensureInitialized;
|
||||
const syncAppearanceCheckboxes = options.syncAppearanceCheckboxes;
|
||||
const refreshAiModelEndpoints = options.refreshAiModelEndpoints;
|
||||
const isAdmin = options.isAdmin;
|
||||
const getAdminModule = options.getAdminModule;
|
||||
|
||||
const _modal = () => (typeof getModal === 'function' ? getModal() : null);
|
||||
const _admin = () => (typeof getAdminModule === 'function' ? getAdminModule() : null);
|
||||
|
||||
function onPanelActivated(tab) {
|
||||
// Appearance keeps its existing transparent preview behavior.
|
||||
document.body.classList.toggle('settings-appearance-open', tab === 'appearance');
|
||||
syncSettingsPeek(_modal(), tab === 'appearance');
|
||||
|
||||
// AI endpoints are intentionally refreshed only when entering the AI panel.
|
||||
if (tab === 'ai' && typeof refreshAiModelEndpoints === 'function') {
|
||||
refreshAiModelEndpoints();
|
||||
}
|
||||
}
|
||||
|
||||
function openAdminTab(tab) {
|
||||
const admin = _admin();
|
||||
if (admin && typeof admin.open === 'function') {
|
||||
admin.open(tab);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function syncAdminVisibility() {
|
||||
const modalEl = _modal();
|
||||
if (!modalEl) return;
|
||||
const admin = typeof isAdmin === 'function' ? !!isAdmin() : false;
|
||||
modalEl.querySelectorAll('.admin-only').forEach(el => {
|
||||
el.style.display = admin ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function open(tab) {
|
||||
if (typeof ensureInitialized === 'function') ensureInitialized();
|
||||
|
||||
if (typeof syncAppearanceCheckboxes === 'function') syncAppearanceCheckboxes();
|
||||
|
||||
const modalEl = _modal();
|
||||
showSettingsModal(modalEl);
|
||||
syncAdminVisibility();
|
||||
|
||||
if (tab) {
|
||||
activateSettingsPanel(modalEl, tab);
|
||||
}
|
||||
|
||||
// Preserve existing panel-specific side effects when Settings is opened
|
||||
// directly to a tab as well as when the user navigates there.
|
||||
const activeTab = tab || getActiveSettingsTab(modalEl);
|
||||
onPanelActivated(activeTab);
|
||||
|
||||
// Auto-init admin data if showing an admin tab.
|
||||
const admin = _admin();
|
||||
if (isAdminManagedSettingsTab(activeTab) && admin && !admin._initialized) {
|
||||
admin._initData();
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
const modalEl = _modal();
|
||||
if (!modalEl) return;
|
||||
|
||||
// Always clear the Appearance state so the rest of the app does not remain
|
||||
// dimmed if Settings is closed while that panel is active.
|
||||
document.body.classList.remove('settings-appearance-open');
|
||||
syncSettingsPeek(modalEl, false);
|
||||
|
||||
hideSettingsModal(modalEl);
|
||||
}
|
||||
|
||||
return { open, close, onPanelActivated, openAdminTab, syncAdminVisibility };
|
||||
}
|
||||
@@ -121,10 +121,88 @@ export function setSettingsSidebarWidth(modalEl, width, options = {}) {
|
||||
return next;
|
||||
}
|
||||
|
||||
/* ── Build provenance ──
|
||||
The bottom-left of the panel answers "which build am I actually looking
|
||||
at": the version this build registers and the commit its process loaded.
|
||||
Both come from /api/version, which resolves the commit once at import via
|
||||
`git rev-parse HEAD` and reports the string "unknown" when it cannot — a
|
||||
read-only Docker tree with no .git, for instance. */
|
||||
const BUILD_COMMIT_SHORT_LEN = 8;
|
||||
const BUILD_UNKNOWN = 'unknown';
|
||||
const BUILD_COMMIT_SHA = /^[0-9a-f]{7,64}$/i;
|
||||
|
||||
function buildField(value) {
|
||||
const text = String(value ?? '').trim();
|
||||
return text && text.toLowerCase() !== BUILD_UNKNOWN ? text : '';
|
||||
}
|
||||
|
||||
/** Turn an /api/version payload into the two sidebar lines, or null when it
|
||||
* carries nothing worth a footer. */
|
||||
export function formatSettingsBuildInfo(payload) {
|
||||
const version = buildField(payload?.version);
|
||||
const build = buildField(payload?.build);
|
||||
const commit = buildField(payload?.source_commit);
|
||||
|
||||
const parts = [];
|
||||
if (version) parts.push(`v${version}`);
|
||||
// The preview harness versions itself separately from the public semver, so
|
||||
// show both — but never the same number twice.
|
||||
if (build && build !== version) parts.push(`build ${build}`);
|
||||
|
||||
// An ODYSSEUS_SOURCE_COMMIT override need not be a sha; leave those intact
|
||||
// and let the CSS ellipsis deal with the width.
|
||||
const commitLabel = BUILD_COMMIT_SHA.test(commit)
|
||||
? commit.slice(0, BUILD_COMMIT_SHORT_LEN).toLowerCase()
|
||||
: commit;
|
||||
|
||||
if (!parts.length && !commitLabel) return null;
|
||||
|
||||
return {
|
||||
versionLabel: parts.join(' \u00b7 '),
|
||||
commitLabel,
|
||||
commitTitle: commit,
|
||||
};
|
||||
}
|
||||
|
||||
function paintSettingsBuildInfo(modalEl, info) {
|
||||
const host = modalEl?.querySelector('#settings-sidebar-build');
|
||||
if (!host) return;
|
||||
|
||||
const versionEl = host.querySelector('#settings-sidebar-build-version');
|
||||
const commitEl = host.querySelector('#settings-sidebar-build-commit');
|
||||
|
||||
if (!info) {
|
||||
host.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (versionEl) versionEl.textContent = info.versionLabel;
|
||||
if (commitEl) {
|
||||
commitEl.textContent = info.commitLabel;
|
||||
// The short hash is what fits; keep the full one reachable on hover.
|
||||
if (info.commitTitle) commitEl.title = info.commitTitle;
|
||||
}
|
||||
|
||||
host.hidden = false;
|
||||
}
|
||||
|
||||
async function loadSettingsBuildInfo(modalEl) {
|
||||
try {
|
||||
const res = await fetch('/api/version', { credentials: 'same-origin' });
|
||||
if (!res.ok) return;
|
||||
paintSettingsBuildInfo(modalEl, formatSettingsBuildInfo(await res.json()));
|
||||
} catch {
|
||||
// Provenance is informational: a failed probe leaves the footer hidden
|
||||
// rather than putting an error in the middle of the settings nav.
|
||||
}
|
||||
}
|
||||
|
||||
export function bindSettingsSidebar(modalEl) {
|
||||
if (!modalEl || _bound.has(modalEl)) return;
|
||||
_bound.add(modalEl);
|
||||
|
||||
loadSettingsBuildInfo(modalEl);
|
||||
|
||||
const sidebar = modalEl.querySelector('.settings-sidebar');
|
||||
const handle = modalEl.querySelector('#settings-sidebar-resize-handle');
|
||||
const toggle = modalEl.querySelector('#settings-sidebar-toggle');
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
// Text-to-speech and speech-to-text settings panels.
|
||||
// Extracted verbatim from static/js/settings.js. Behaviour is unchanged: the
|
||||
// functions moved, their bodies did not. settings.js imports them and calls
|
||||
// them from the same places, so load order and init sequence are untouched.
|
||||
|
||||
import { byId as el } from './dom.js';
|
||||
import { postSettings as _postSettings } from './api.js';
|
||||
|
||||
export async function initTtsSettings() {
|
||||
var provSel = el('set-ttsProviderSelect');
|
||||
var modelSelect = el('set-ttsModelSelect');
|
||||
var modelInput = el('set-ttsModelInput');
|
||||
var voiceSelect = el('set-ttsVoiceSelect');
|
||||
var voiceInput = el('set-ttsVoiceInput');
|
||||
var modelRow = el('set-ttsModelRow');
|
||||
var voiceRow = el('set-ttsVoiceRow');
|
||||
var speedSelect = el('set-ttsSpeedSelect');
|
||||
var speedRow = el('set-ttsSpeedRow');
|
||||
var ttsMsg = el('set-ttsSettingsMsg');
|
||||
var ttsEnabledToggle = el('set-ttsEnabledToggle');
|
||||
var ttsConfigWrap = provSel ? provSel.closest('div[style*="flex-direction"]') : null;
|
||||
|
||||
function isEndpoint() { return provSel.value.startsWith('endpoint:'); }
|
||||
function getModel() { return isEndpoint() ? modelSelect.value : modelInput.value; }
|
||||
function getVoice() { return isEndpoint() ? voiceSelect.value : voiceInput.value; }
|
||||
|
||||
function updateVisibility() {
|
||||
var prov = provSel.value;
|
||||
modelRow.style.display = prov.startsWith('endpoint:') ? 'flex' : 'none';
|
||||
voiceRow.style.display = prov === 'disabled' ? 'none' : 'flex';
|
||||
speedRow.style.display = prov === 'disabled' ? 'none' : 'flex';
|
||||
if (isEndpoint()) {
|
||||
modelSelect.style.display = ''; modelInput.style.display = 'none';
|
||||
voiceSelect.style.display = ''; voiceInput.style.display = 'none';
|
||||
} else {
|
||||
modelSelect.style.display = 'none'; modelInput.style.display = '';
|
||||
voiceSelect.style.display = 'none'; voiceInput.style.display = prov === 'disabled' ? 'none' : '';
|
||||
}
|
||||
}
|
||||
|
||||
var ttsKeywords = ['tts', 'audio'];
|
||||
try {
|
||||
var epRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
|
||||
var endpoints = await epRes.json();
|
||||
endpoints.forEach(function(ep) {
|
||||
if (!ep.is_enabled) return;
|
||||
var hasTTS = (ep.models || []).some(m => ttsKeywords.some(kw => m.toLowerCase().includes(kw)));
|
||||
if (!hasTTS) return;
|
||||
var opt = document.createElement('option'); opt.value = 'endpoint:' + ep.id; opt.textContent = ep.name + ' (API)'; provSel.appendChild(opt);
|
||||
});
|
||||
} catch (e) { console.warn('Failed to load endpoints for TTS', e); }
|
||||
|
||||
try {
|
||||
var settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
var settings = await settingsRes.json();
|
||||
if (settings.tts_provider) provSel.value = settings.tts_provider;
|
||||
if (settings.tts_model) { modelSelect.value = settings.tts_model; modelInput.value = settings.tts_model; }
|
||||
if (settings.tts_voice) { voiceSelect.value = settings.tts_voice; voiceInput.value = settings.tts_voice; }
|
||||
if (settings.tts_speed) { speedSelect.value = settings.tts_speed; }
|
||||
if (ttsEnabledToggle) ttsEnabledToggle.checked = settings.tts_enabled !== false;
|
||||
} catch (e) { console.warn('Failed to load TTS settings', e); }
|
||||
|
||||
function syncTtsDisabled() {
|
||||
var off = ttsEnabledToggle && !ttsEnabledToggle.checked;
|
||||
var card = ttsEnabledToggle ? ttsEnabledToggle.closest('.admin-card') : null;
|
||||
if (card) card.style.opacity = off ? '0.45' : '';
|
||||
if (ttsConfigWrap) ttsConfigWrap.style.pointerEvents = off ? 'none' : '';
|
||||
}
|
||||
syncTtsDisabled();
|
||||
updateVisibility();
|
||||
|
||||
async function saveTTS() {
|
||||
try {
|
||||
await _postSettings({ tts_enabled: ttsEnabledToggle ? ttsEnabledToggle.checked : true, tts_provider: provSel.value, tts_model: getModel() || 'tts-1', tts_voice: getVoice() || 'alloy', tts_speed: speedSelect.value || '1' });
|
||||
ttsMsg.textContent = 'Saved'; ttsMsg.style.color = 'var(--fg)'; setTimeout(() => { ttsMsg.textContent = ''; }, 2000);
|
||||
if (window.aiTTSManager) window.aiTTSManager.checkAvailability();
|
||||
} catch (e) { ttsMsg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; ttsMsg.style.color = 'var(--red)'; }
|
||||
}
|
||||
|
||||
async function saveAndClearCache() {
|
||||
await saveTTS();
|
||||
fetch('/api/tts/clear-cache', { method: 'POST', credentials: 'same-origin' }).catch(function(){});
|
||||
}
|
||||
|
||||
provSel.addEventListener('change', function() {
|
||||
var prov = provSel.value;
|
||||
if (prov === 'local') voiceInput.value = 'af_heart';
|
||||
else if (isEndpoint()) { voiceSelect.value = 'alloy'; modelSelect.value = 'tts-1'; }
|
||||
else if (prov === 'browser') { voiceInput.value = ''; voiceInput.placeholder = 'OS default voice'; }
|
||||
updateVisibility();
|
||||
saveTTS();
|
||||
});
|
||||
modelSelect.addEventListener('change', saveAndClearCache);
|
||||
modelInput.addEventListener('change', saveTTS);
|
||||
voiceSelect.addEventListener('change', saveAndClearCache);
|
||||
voiceInput.addEventListener('change', saveTTS);
|
||||
speedSelect.addEventListener('change', saveAndClearCache);
|
||||
if (ttsEnabledToggle) ttsEnabledToggle.addEventListener('change', function() { syncTtsDisabled(); saveTTS(); });
|
||||
|
||||
// Preview / test button
|
||||
var previewBtn = el('set-ttsPreviewBtn');
|
||||
if (previewBtn) {
|
||||
var previewAudio = null;
|
||||
var previewPlaying = false;
|
||||
function resetPreview() { previewPlaying = false; previewBtn.textContent = 'Preview'; previewBtn.style.borderColor = ''; }
|
||||
|
||||
previewBtn.addEventListener('click', async function() {
|
||||
if (previewPlaying) {
|
||||
if (previewAudio) { previewAudio.pause(); previewAudio = null; }
|
||||
window.speechSynthesis.cancel();
|
||||
resetPreview(); return;
|
||||
}
|
||||
var prov = provSel.value;
|
||||
if (prov === 'disabled') {
|
||||
ttsMsg.textContent = 'Select a provider first'; ttsMsg.style.color = 'var(--red, #e55)';
|
||||
setTimeout(function() { ttsMsg.textContent = ''; }, 2000); return;
|
||||
}
|
||||
var testText = 'Hello, this is a test of text to speech.';
|
||||
previewPlaying = true; previewBtn.textContent = 'Loading...';
|
||||
try {
|
||||
if (prov === 'browser') {
|
||||
if (!('speechSynthesis' in window)) throw new Error('Browser TTS not supported');
|
||||
var utt = new SpeechSynthesisUtterance(testText);
|
||||
var voiceVal = getVoice();
|
||||
if (voiceVal) {
|
||||
var voices = window.speechSynthesis.getVoices();
|
||||
var target = voiceVal.toLowerCase();
|
||||
var match = voices.find(function(v) { return v.name.toLowerCase() === target; }) ||
|
||||
voices.find(function(v) { return v.name.toLowerCase().includes(target); });
|
||||
if (match) utt.voice = match;
|
||||
}
|
||||
utt.rate = parseFloat(speedSelect.value) || 1;
|
||||
previewBtn.textContent = 'Stop'; previewBtn.style.borderColor = 'var(--red, #e55)';
|
||||
await new Promise(function(resolve, reject) {
|
||||
utt.onend = resolve;
|
||||
utt.onerror = function(e) { reject(new Error('Browser TTS: ' + e.error)); };
|
||||
window.speechSynthesis.speak(utt);
|
||||
});
|
||||
} else {
|
||||
var res = await fetch('/api/tts/synthesize', {
|
||||
method: 'POST', credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: testText, format: 'audio' })
|
||||
});
|
||||
if (!res.ok) { var err = await res.json().catch(function() { return {}; }); throw new Error(err.detail?.message || 'Synthesis failed'); }
|
||||
var blob = await res.blob();
|
||||
var url = URL.createObjectURL(blob);
|
||||
previewAudio = new Audio(url);
|
||||
previewBtn.textContent = 'Stop'; previewBtn.style.borderColor = 'var(--red, #e55)';
|
||||
await new Promise(function(resolve, reject) {
|
||||
previewAudio.onended = function() { URL.revokeObjectURL(url); previewAudio = null; resolve(); };
|
||||
previewAudio.onerror = function() { URL.revokeObjectURL(url); previewAudio = null; reject(new Error('Playback failed')); };
|
||||
previewAudio.play().catch(reject);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
ttsMsg.textContent = 'Preview failed: ' + e.message; ttsMsg.style.color = 'var(--red, #e55)';
|
||||
setTimeout(function() { ttsMsg.textContent = ''; }, 3000);
|
||||
} finally {
|
||||
resetPreview();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function initSttSettings() {
|
||||
var provSel = el('set-sttProviderSelect');
|
||||
var modelSelect = el('set-sttModelSelect');
|
||||
var modelInput = el('set-sttModelInput');
|
||||
var modelRow = el('set-sttModelRow');
|
||||
var langRow = el('set-sttLangRow');
|
||||
var langInput = el('set-sttLangInput');
|
||||
var sttMsg = el('set-sttSettingsMsg');
|
||||
var sttEnabledToggle = el('set-sttEnabledToggle');
|
||||
var sttConfigWrap = el('set-sttConfigWrap');
|
||||
// STT was removed from AI Defaults — bail if the UI isn't present.
|
||||
if (!provSel) return;
|
||||
|
||||
function isEndpoint() { return provSel.value.startsWith('endpoint:'); }
|
||||
function getModel() { return isEndpoint() ? modelInput.value : modelSelect.value; }
|
||||
|
||||
function updateVisibility() {
|
||||
var prov = provSel.value;
|
||||
var showModel = prov === 'local' || prov.startsWith('endpoint:');
|
||||
var showLang = prov !== 'disabled';
|
||||
modelRow.style.display = showModel ? 'flex' : 'none';
|
||||
langRow.style.display = showLang ? 'flex' : 'none';
|
||||
if (isEndpoint()) {
|
||||
modelSelect.style.display = 'none'; modelInput.style.display = '';
|
||||
} else {
|
||||
modelSelect.style.display = ''; modelInput.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function syncSttDisabled() {
|
||||
var off = sttEnabledToggle && !sttEnabledToggle.checked;
|
||||
var card = sttEnabledToggle ? sttEnabledToggle.closest('.admin-card') : null;
|
||||
if (card) card.style.opacity = off ? '0.45' : '';
|
||||
if (sttConfigWrap) sttConfigWrap.style.pointerEvents = off ? 'none' : '';
|
||||
}
|
||||
|
||||
// Effective provider: if toggle is off, treat as disabled regardless of provider select
|
||||
function effectiveProvider() {
|
||||
if (sttEnabledToggle && !sttEnabledToggle.checked) return 'disabled';
|
||||
return provSel.value;
|
||||
}
|
||||
|
||||
// Add API endpoints that might support STT
|
||||
try {
|
||||
var epRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
|
||||
var endpoints = await epRes.json();
|
||||
endpoints.forEach(function(ep) {
|
||||
if (!ep.is_enabled) return;
|
||||
var opt = document.createElement('option'); opt.value = 'endpoint:' + ep.id; opt.textContent = ep.name + ' (API)'; provSel.appendChild(opt);
|
||||
});
|
||||
} catch (e) { console.warn('Failed to load endpoints for STT', e); }
|
||||
|
||||
// Load saved settings
|
||||
try {
|
||||
var settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
var settings = await settingsRes.json();
|
||||
if (settings.stt_provider) provSel.value = settings.stt_provider;
|
||||
if (settings.stt_model) { modelSelect.value = settings.stt_model; modelInput.value = settings.stt_model; }
|
||||
if (settings.stt_language) langInput.value = settings.stt_language;
|
||||
if (sttEnabledToggle) sttEnabledToggle.checked = settings.stt_enabled !== false;
|
||||
} catch (e) { console.warn('Failed to load STT settings', e); }
|
||||
|
||||
syncSttDisabled();
|
||||
updateVisibility();
|
||||
|
||||
async function saveSTT() {
|
||||
try {
|
||||
var enabled = sttEnabledToggle ? sttEnabledToggle.checked : false;
|
||||
await _postSettings({ stt_enabled: enabled, stt_provider: provSel.value, stt_model: getModel() || 'base', stt_language: langInput.value.trim() });
|
||||
sttMsg.textContent = 'Saved'; sttMsg.style.color = 'var(--fg)'; setTimeout(() => { sttMsg.textContent = ''; }, 2000);
|
||||
// Notify voiceRecorder of effective provider and update send button icon
|
||||
if (window.voiceRecorderModule) window.voiceRecorderModule._sttProvider = effectiveProvider();
|
||||
if (window._updateSendBtnIcon) window._updateSendBtnIcon();
|
||||
} catch (e) { sttMsg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; sttMsg.style.color = 'var(--red)'; }
|
||||
}
|
||||
|
||||
provSel.addEventListener('change', function() { updateVisibility(); saveSTT(); });
|
||||
modelSelect.addEventListener('change', saveSTT);
|
||||
modelInput.addEventListener('change', saveSTT);
|
||||
langInput.addEventListener('change', saveSTT);
|
||||
if (sttEnabledToggle) sttEnabledToggle.addEventListener('change', function() { syncSttDisabled(); saveSTT(); });
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// Document writing-style settings panel.
|
||||
// Extracted verbatim from static/js/settings.js. Behaviour is unchanged: the
|
||||
// functions moved, their bodies did not. settings.js imports them and calls
|
||||
// them from the same places, so load order and init sequence are untouched.
|
||||
|
||||
import { byId as el } from './dom.js';
|
||||
import { postSettings as _postSettings } from './api.js';
|
||||
|
||||
export async function initDocumentWritingStyle() {
|
||||
const styleEl = el('set-document-style');
|
||||
const saveBtn = el('set-document-style-save');
|
||||
const extractBtn = el('set-document-style-extract');
|
||||
const fileEl = el('set-document-style-file');
|
||||
const msg = el('set-document-style-msg');
|
||||
if (!styleEl || !saveBtn) return;
|
||||
try {
|
||||
const res = await fetch('/api/auth/settings', { credentials: 'same-origin' });
|
||||
const data = await res.json();
|
||||
styleEl.value = String(data.document_writing_style || '');
|
||||
} catch (_) {
|
||||
if (msg) msg.textContent = 'Failed to load';
|
||||
}
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
if (msg) msg.textContent = 'Saving...';
|
||||
try {
|
||||
const res = await _postSettings({ document_writing_style: styleEl.value });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
if (msg) msg.textContent = '✓ Saved';
|
||||
} catch (e) {
|
||||
if (msg) msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save';
|
||||
}
|
||||
setTimeout(() => { if (msg) msg.textContent = ''; }, 3000);
|
||||
});
|
||||
extractBtn?.addEventListener('click', () => fileEl?.click());
|
||||
fileEl?.addEventListener('change', async () => {
|
||||
const file = fileEl.files?.[0];
|
||||
if (!file) return;
|
||||
extractBtn.disabled = true;
|
||||
let whirlpool = null;
|
||||
if (msg) {
|
||||
msg.replaceChildren();
|
||||
try {
|
||||
const spinner = window.spinnerModule || (await import('../spinner.js')).default;
|
||||
whirlpool = spinner.createWhirlpool(14);
|
||||
whirlpool.element.style.cssText = 'display:inline-flex;width:14px;height:14px;margin-right:7px;';
|
||||
const label = document.createElement('span');
|
||||
label.textContent = 'Analyzing...';
|
||||
msg.append(whirlpool.element, label);
|
||||
} catch (_) {
|
||||
msg.textContent = 'Analyzing...';
|
||||
}
|
||||
}
|
||||
try {
|
||||
const body = new FormData();
|
||||
body.append('file', file);
|
||||
const res = await fetch('/api/auth/settings/document-style/extract', {
|
||||
method: 'POST', credentials: 'same-origin', body,
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !data.style) throw new Error(data.detail || data.error || 'Extraction failed');
|
||||
styleEl.value = String(data.style);
|
||||
if (msg) msg.textContent = '✓ Extracted — review and save';
|
||||
} catch (error) {
|
||||
if (msg) msg.textContent = error.message || 'Extraction failed';
|
||||
} finally {
|
||||
whirlpool?.destroy?.();
|
||||
extractBtn.disabled = false;
|
||||
fileEl.value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -316,7 +316,7 @@ class SmoothPad {
|
||||
}
|
||||
|
||||
function _modal(innerHtml) {
|
||||
// Match the app's standard .modal pattern (defined in static/style.css).
|
||||
// Match the app's standard .modal pattern from the main stylesheet cascade.
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal sig-modal-overlay';
|
||||
overlay.style.cssText = 'pointer-events:auto;background:rgba(0,0,0,0.45);z-index:10100;';
|
||||
|
||||
+4
-4
@@ -106,7 +106,7 @@
|
||||
<style>
|
||||
@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'); }
|
||||
/* Mirror the main app's :root defaults (static/style.css ~line 18) so an
|
||||
/* Mirror the main app's :root defaults from the stylesheet cascade so an
|
||||
uncustomized theme — or a fresh browser with no `odysseus-theme` in
|
||||
localStorage — renders the login page in the same palette as the rest
|
||||
of the app instead of a different greys+offwhite scheme. */
|
||||
@@ -115,7 +115,7 @@
|
||||
--red: #e06c75; --green: #50fa7b;
|
||||
--bg-effect-intensity: 1;
|
||||
}
|
||||
/* Background patterns — mirrors static/style.css "Background Patterns"
|
||||
/* Background patterns — mirrors the main app "Background Patterns" styles
|
||||
block so the theme's chosen bgPattern renders on login too. The
|
||||
canvas-based effects (rain, constellations, perlin-flow, petals,
|
||||
sparkles, embers) are spawned by the deferred theme.js import below;
|
||||
@@ -157,7 +157,7 @@
|
||||
font-size: 2rem; font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
/* Same gradient as the main app's welcome-screen "Odysseus" title
|
||||
(static/style.css #welcome-screen .welcome-name) so the brand
|
||||
(the main cascade's #welcome-screen .welcome-name) so the brand
|
||||
wordmark is consistent across login + first-launch screens. */
|
||||
background: linear-gradient(135deg, var(--brand-color, var(--red)), color-mix(in srgb, var(--brand-color, var(--red)) 60%, var(--fg)));
|
||||
-webkit-background-clip: text;
|
||||
@@ -175,7 +175,7 @@
|
||||
/* On touch devices keep inputs at >=16px so iOS Safari doesn't zoom the whole
|
||||
page when a field is focused (it auto-zooms any focused input under 16px).
|
||||
This page has its own inline styles, so it doesn't inherit the main app's
|
||||
equivalent rule in static/style.css; mirror it here. !important also lifts
|
||||
equivalent rule in the main stylesheet cascade; mirror it here. !important also lifts
|
||||
the dynamically-inserted 2FA input, which pins font-size:14px inline. */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
input:not(.remember-check) { font-size: 16px !important; }
|
||||
|
||||
-51566
File diff suppressed because it is too large
Load Diff
+40
-4
@@ -7,7 +7,7 @@
|
||||
// - Other static assets (images/fonts/libs): cache-first with bg refresh.
|
||||
// - API / non-GET: never cached.
|
||||
// Bump CACHE_NAME whenever the precache list or SW logic changes.
|
||||
const CACHE_NAME = 'odysseus-v651-chatgpt-usage-collapse';
|
||||
const CACHE_NAME = 'odysseus-v656-pr40-editor-precache';
|
||||
|
||||
// KaTeX resolves these from its own stylesheet, so caching the CSS without them
|
||||
// gives offline math fallback glyphs instead of proper typesetting.
|
||||
@@ -39,8 +39,28 @@ const KATEX_FONTS = [
|
||||
// exact URL the browser requests, query string included.
|
||||
const PRECACHE = [
|
||||
'/',
|
||||
'/static/style.css?v=20260921chatgptusage2',
|
||||
'/static/app.js?v=20260921chatgptusage2',
|
||||
'/static/css/00-tokens.css?v=20260929csssplit',
|
||||
'/static/css/01-agent-chat.css?v=20260929csssplit',
|
||||
'/static/css/02-compare.css?v=20260929csssplit',
|
||||
'/static/css/03-agent-chat.css?v=20260929csssplit',
|
||||
'/static/css/04-memory.css?v=20260929csssplit',
|
||||
'/static/css/05-documents.css?v=20260929csssplit',
|
||||
'/static/css/06-admin-settings.css?v=20260929csssplit',
|
||||
'/static/css/07-documents.css?v=20260929csssplit',
|
||||
'/static/css/08-skills.css?v=20260929csssplit',
|
||||
'/static/css/09-gallery.css?v=20260929csssplit',
|
||||
'/static/css/10-cookbook.css?v=20260929csssplit',
|
||||
'/static/css/11-tasks.css?v=20260929csssplit',
|
||||
'/static/css/12-gallery.css?v=20260929csssplit',
|
||||
'/static/css/13-image-editor.css?v=20260929csssplit',
|
||||
'/static/css/14-email.css?v=20260929csssplit',
|
||||
'/static/css/15-notes.css?v=20260929csssplit',
|
||||
'/static/css/16-calendar.css?v=20260929csssplit',
|
||||
'/static/css/17-research.css?v=20260929csssplit',
|
||||
'/static/css/documents-gallery-editor.css?v=20260929csssplit',
|
||||
'/static/css/email-calendar-notes-tasks.css?v=20260929csssplit',
|
||||
'/static/css/cookbook-research-memory-settings.css?v=20260929csssplit',
|
||||
'/static/app.js?v=20260929csssplit',
|
||||
'/static/js/storage.js',
|
||||
'/static/js/appConfig.js',
|
||||
'/static/js/ui.js?v=20260916largetoolscroll1',
|
||||
@@ -75,15 +95,25 @@ const PRECACHE = [
|
||||
'/static/js/theme.js?v=20260911organsrain1',
|
||||
'/static/js/censor.js',
|
||||
'/static/js/settings.js?v=20260912writingstyle3',
|
||||
'/static/js/admin.js?v=20260921chatgptusage2',
|
||||
'/static/js/admin.js?v=20260929csssplit',
|
||||
'/static/js/chatgptSubscriptionUsage.js',
|
||||
'/static/js/init.js?v=20260829chatstyle12',
|
||||
'/static/js/slashCommands.js?v=20260921chatgptusage1',
|
||||
'/static/js/research/jobs.js?v=20260910researcherrorpersist1',
|
||||
'/static/js/emailInbox.js?v=20260914aireply4',
|
||||
'/static/js/emailLibrary/index.js',
|
||||
'/static/js/emailLibrary/aiReply.js',
|
||||
'/static/js/emailLibrary/attachments.js',
|
||||
'/static/js/emailLibrary/bodyRender.js',
|
||||
'/static/js/emailLibrary/menus.js',
|
||||
'/static/js/emailLibrary/reader.js',
|
||||
'/static/js/emailLibrary/settingsPage.js',
|
||||
'/static/js/emailLibrary/unsubscribe.js',
|
||||
'/static/js/emailLibrary/utils.js',
|
||||
'/static/js/emailLibrary/signatureFold.js',
|
||||
'/static/js/emailLibrary/state.js',
|
||||
// emailInbox.js has always imported this one; it was never precached.
|
||||
'/static/js/emailLibrary/replyRecipients.js',
|
||||
'/static/js/notes.js?v=20260911notesselectioncancel1',
|
||||
'/static/js/tasks.js?v=20260914taskmodel1',
|
||||
'/static/js/calendar.js?v=20260914emailsource11',
|
||||
@@ -113,6 +143,7 @@ const PANEL_PRECACHE = [
|
||||
'/static/js/galleryEditor.js?v=20260909movepicklayer1',
|
||||
'/static/js/editor/ai-inpaint.js?v=20260708match1',
|
||||
'/static/js/editor/ai-models.js',
|
||||
'/static/js/editor/ai-operation.js',
|
||||
'/static/js/editor/ai-rembg.js',
|
||||
'/static/js/editor/ai-tool-runner.js',
|
||||
'/static/js/editor/ai-tools-misc.js',
|
||||
@@ -143,6 +174,8 @@ const PANEL_PRECACHE = [
|
||||
'/static/js/editor/document-geometry.js',
|
||||
'/static/js/editor/export-dialog.js',
|
||||
'/static/js/editor/selection-mask.js',
|
||||
'/static/js/editor/selection-modifiers.js',
|
||||
'/static/js/editor/tool-shortcuts.js',
|
||||
'/static/js/editor/filters/blur.js',
|
||||
'/static/js/editor/filters/edge-feather.js',
|
||||
'/static/js/editor/fx/adj-popup.js',
|
||||
@@ -163,6 +196,8 @@ const PANEL_PRECACHE = [
|
||||
'/static/js/editor/layer-geometry.js',
|
||||
'/static/js/editor/precision-guides.js',
|
||||
'/static/js/editor/layer-panel.js',
|
||||
'/static/js/editor/layer-style-menu.js',
|
||||
'/static/js/editor/layer-styles.js',
|
||||
'/static/js/editor/mask-utils.js',
|
||||
'/static/js/editor/shortcuts-popover.js',
|
||||
'/static/js/editor/slider-ux.js',
|
||||
@@ -183,6 +218,7 @@ const PANEL_PRECACHE = [
|
||||
'/static/js/editor/tools/lasso.js',
|
||||
'/static/js/editor/tools/marquee.js',
|
||||
'/static/js/editor/tools/move.js',
|
||||
'/static/js/editor/tools/pen-selection.js',
|
||||
'/static/js/editor/tools/stroke.js',
|
||||
'/static/js/editor/tools/transform-drag.js',
|
||||
'/static/js/editor/tools/transform-handles.js',
|
||||
|
||||
Reference in New Issue
Block a user