dashboard: theme all remaining dialogs (replace native confirm/alert/prompt)

Follow-up to the themed-modal component: route every remaining native
browser dialog through modal.js so nothing falls back to the OS chrome.

- modal.js: add themedPrompt (input dialog) + themedToast (non-blocking
  transient notification, info/error/ok) alongside openDialog/themedConfirm.
- Migrate call sites: bindAsyncForms confirm/prompt/alerts (common.js),
  the answer-validation alert (call.js), the M0V3 reparent confirm + action
  toasts (tabs.js), and the schedule form/cancel/fire confirms + validation
  and error alerts (schedules.js).
- UX: blocking modal for confirms/prompts; non-blocking toast for transient
  errors + validation. Destructive confirms keep the danger styling.
- CSS for the toast stack + prompt input.

common.js <-> modal.js is a safe deferred import cycle (usage is call-time
only); esbuild bundles it clean.
This commit is contained in:
iris 2026-06-19 02:03:46 +02:00 committed by mara
commit 7c2de690ec
6 changed files with 141 additions and 32 deletions

View file

@ -467,6 +467,52 @@ body.dashboard-shell {
.tc-confirm { color: var(--green); }
.tc-confirm.tc-danger { color: var(--red); }
/* themedPrompt input field */
.tc-promptfield { display: flex; flex-direction: column; gap: 0.4em; }
.tc-promptlabel { color: var(--subtext0); font-size: 0.9em; }
.tc-input {
font-family: inherit;
font-size: 1em;
width: 100%;
box-sizing: border-box;
background: var(--crust);
color: var(--fg);
border: 1px solid var(--purple-dim);
padding: 0.4em 0.6em;
}
.tc-input:focus { outline: 1px solid var(--green); }
/* themedToast — non-blocking transient notifications (errors/info/ok) */
.tc-toasts {
position: fixed;
top: 1em;
right: 1em;
z-index: 1100;
display: flex;
flex-direction: column;
gap: 0.5em;
max-width: min(28em, 92vw);
pointer-events: none;
}
.tc-toast {
pointer-events: auto;
cursor: pointer;
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
border-left-width: 3px;
box-shadow: 0 4px 20px -6px var(--crust);
padding: 0.6em 0.9em;
font-size: 0.9em;
color: var(--fg);
white-space: pre-wrap;
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.tc-toast-out { opacity: 0; transform: translateX(0.5em); }
.tc-toast-error { border-left-color: var(--red); }
.tc-toast-info { border-left-color: var(--purple-dim); }
.tc-toast-ok { border-left-color: var(--green); }
.agent-status {
font-size: 0.82em;
color: var(--subtext0);