Merge pull request #84 from markrai/ui/dialog-confirmation-and-consistency

UI/dialog confirmation and consistency

Author: markrai

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 > **Upgrades:** No breaking changes in **3.7.x** / **3.8.x** / **3.9.x** / **3.10.x** / **3.11.x** / **3.12.x** / **3.13.x** / **3.14.x** / **3.15.x** / **3.16.x** unless noted below.
 
+## [3.16.2] - 2026-05-26
+
+### Improvements
+
+- **Shared confirm and prompt dialogs** - `showConfirmDialog` and new `showPromptDialog` use the app `dialog` styling (header, footer, danger confirm) with intent-based close handling so outside-click dismissal and programmatic `dialog.close()` resolve to the correct choice instead of false negatives.
+
+- **Todo dialog unsaved changes** - Closing the todo editor (X, Escape, outside click, or app-level close) prompts to discard when title, notes, tags, status, estimation, assignee, or sprint differ from the snapshot taken when the dialog opened.
+
+- **Settings workflow tab** - Switching away from Workflow with a dirty lane draft prompts to discard unsaved changes before re-rendering.
+
+- **Project rename** - Board and Projects rename flows use `showPromptDialog` instead of the browser `prompt()`.
+
+- **Member management** - Demote and remove-member actions on the board use `showConfirmDialog` instead of `window.confirm()`.
+
+### Frontend
+
+- **Modal outside click** - Backdrop/outside closes dispatch a cancellable `scrumboy:dialog-request-close` event so dialogs with dirty-state guards can intercept close attempts.
+
+### Tests
+
+- **Todo close guard** - Dirty detection, discard/cancel paths, and interaction with the close-request event.
+- **Utils dialogs** - Confirm/prompt intent resolution and `confirmDelete` wrapper.
+- **Projects** - Rename prompt and delete confirmation wiring.
+- **Modal outside click** - Close-request event behavior.
+
+### Tooling
+
+- **`check-delete-confirms`** - CI guard now rejects raw `alert()`, `confirm()`, and `prompt()` in maintained frontend sources (not only delete confirms).
+
 ## [3.16.1] - 2026-05-26
 
 ### Fixed

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <img width="372" src="internal/httpapi/web/githublogo.png" alt="scrumboy logo" />
   <br />
-  <img src="https://img.shields.io/badge/version-v3.16.1-blue" alt="version" />
+  <img src="https://img.shields.io/badge/version-v3.16.2-blue" alt="version" />
   <a href="LICENSE">
     <img src="https://img.shields.io/badge/license-AGPL--v3-orange" alt="license" />
   </a>

internal/httpapi/web/app.js

@@ -13,7 +13,7 @@ import { apiFetch } from './dist/api.js';
 import { navigate, router } from './dist/router.js';
 import { getRoute, getProjectId, getBoard, getAuthStatusAvailable, getMobileTab, getSlug, getTag, getSearch, getSprintIdFromUrl, getProjectView, getProjectsTab, getProjects, getSettingsProjectId, getEditingTodo, getAvailableTags, getAutocompleteSuggestion, getAvailableTagsMap, getTagColors, getUser, getSettingsActiveTab, getBackupImportBtn, getBackupData, getBackupPreview, getAuthStatusChecked } from './dist/state/selectors.js';
 import { setProjectId, setBoard, setSlug, setTag, setMobileTab, setProjects, setProjectsTab, setProjectView, setEditingTodo, setAvailableTags, setAvailableTagsMap, setAutocompleteSuggestion, setTagColors, setSettingsProjectId, setSettingsActiveTab, setBackupImportBtn, setBackupData, setBackupPreview } from './dist/state/mutations.js';
-import { openTodoDialog, renderTagsChips, setupTagAutocomplete, removeTag, renderTagAutocomplete, getTagsFromChips, resetAssigneeSelect, getTodoFormPermissions } from './dist/dialogs/todo.js';
+import { openTodoDialog, renderTagsChips, setupTagAutocomplete, removeTag, renderTagAutocomplete, getTagsFromChips, resetAssigneeSelect, getTodoFormPermissions, requestTodoDialogClose } from './dist/dialogs/todo.js';
 import { buildTodoCreatePayload, buildTodoPatchPayload } from './dist/dialogs/todo-submit.js';
 import { renderSettingsModal, invalidateTagsCache } from './dist/dialogs/settings.js';
 import { initDnD, columnsSpec, dragInProgress, dragJustEnded } from './dist/features/drag-drop.js';
@@ -77,10 +77,10 @@ app.addEventListener("click", async (e) => {
 // renderSettingsModal, updateTagColor, and deleteTag moved to modules/dialogs/settings.ts
 // getTagColor and handleProjectImageUpload moved to modules/views/board.ts
 
-closeTodoBtn.addEventListener("click", () => {
+closeTodoBtn.addEventListener("click", async () => {
   setAutocompleteSuggestion(null);
   renderTagAutocomplete();
-  todoDialog.close();
+  await requestTodoDialogClose({ reason: "button" });
 });
 closeSettingsBtn.addEventListener("click", () => settingsDialog.close());
 
@@ -113,7 +113,7 @@ deleteTodoBtn.addEventListener("click", async () => {
     await apiFetch(`/api/board/${getSlug()}/todos/${todo.localId}`, { method: "DELETE" });
     setEditingTodo(null);
     onTodoDialogClosed();
-    todoDialog.close();
+    await requestTodoDialogClose({ force: true, reason: "delete" });
     await loadBoardBySlug(getSlug(), getTag(), getSearch(), getSprintIdFromUrl());
   } catch (err) {
     showToast(err.message);
@@ -196,7 +196,7 @@ todoForm.addEventListener("submit", async (e) => {
       showToast("Todo created");
     }
 
-    todoDialog.close();
+    await requestTodoDialogClose({ force: true, reason: "save" });
     // Invalidate tags cache so Settings modal shows newly created tags
     invalidateTagsCache();
     await loadBoardBySlug(getSlug(), getTag(), getSearch(), getSprintIdFromUrl());

internal/httpapi/web/dist/core/modal-outside-click.js

@@ -25,6 +25,7 @@
 let pointerStartedInsideContent = false;
 let topAtPointerDown = null;
 let initialized = false;
+export const DIALOG_CLOSE_REQUEST_EVENT = "scrumboy:dialog-request-close";
 function getTopOpenDialog() {
     const openDialogs = Array.from(document.querySelectorAll("dialog[open]"));
     if (openDialogs.length === 0)
@@ -38,6 +39,13 @@ function getDialogContentBox(dialog) {
     return (dialog.querySelector("[data-dialog-content-root]") ||
         dialog.querySelector(".dialog__form, .dialog__content"));
 }
+function requestDialogClose(dialog, reason) {
+    const closeRequest = new CustomEvent(DIALOG_CLOSE_REQUEST_EVENT, {
+        cancelable: true,
+        detail: { reason },
+    });
+    return dialog.dispatchEvent(closeRequest);
+}
 function onPointerDown(ev) {
     const t = ev.target;
     topAtPointerDown = getTopOpenDialog();
@@ -76,13 +84,17 @@ function onDocumentClick(ev) {
     if (!content)
         return;
     if (t === top) {
-        top.close();
+        if (requestDialogClose(top, "outside")) {
+            top.close();
+        }
         return;
     }
     if (content.contains(t)) {
         return;
     }
-    top.close();
+    if (requestDialogClose(top, "outside")) {
+        top.close();
+    }
 }
 export function initModalOutsideClickClose() {
     if (initialized)

internal/httpapi/web/dist/dialogs/settings.js

@@ -1384,7 +1384,8 @@ export async function renderSettingsModal(options) {
                 const userId = e.currentTarget.getAttribute("data-user-id");
                 if (!userId)
                     return;
-                if (!confirm("Demote this user from admin to regular user?")) {
+                const confirmed = await showConfirmDialog("Demote this user from admin to regular user?", "Demote user?", "Demote");
+                if (!confirmed) {
                     return;
                 }
                 try {

internal/httpapi/web/dist/dialogs/todo.js

@@ -1,17 +1,21 @@
 import { addTagBtn, closeTodoBtn, deleteTodoBtn, shareTodoBtn, todoBody, todoBodyPreview, todoBodyPreviewTab, todoBodyToggle, todoBodyWriteTab, todoDialog, todoDialogTitle, todoEstimationField, todoEstimationPoints, todoStatus, todoTags, todoTitle, } from '../dom/elements.js';
 import { apiFetch } from '../api.js';
+import { DIALOG_CLOSE_REQUEST_EVENT } from '../core/modal-outside-click.js';
 import { renderMarkdownPreviewInto } from '../markdown-preview.js';
 import { getBoard, getBoardMembers, getMarkdownNotesEnabled, getSlug, getTagColors, getUser } from '../state/selectors.js';
 import { setAvailableTags, setAvailableTagsMap, setEditingTodo, setTagColors } from '../state/mutations.js';
-import { escapeHTML, isAnonymousBoard, showToast } from '../utils.js';
+import { escapeHTML, isAnonymousBoard, showConfirmDialog, showToast } from '../utils.js';
 import { normalizeSprints } from '../sprints.js';
 import { bindShareTodoButton, bindTodoDialogLinkLifecycle, initializeTodoDialogLinks, resetTodoDialogLinks, } from './todo-links.js';
 import { computeTodoDialogPermissions, setTodoFormPermissions, } from './todo-permissions.js';
-import { renderTagsChips, resetTodoTagAutocompleteBindings, setupTagAutocomplete, } from './todo-tags.js';
+import { getTagsFromChips, renderTagsChips, resetTodoTagAutocompleteBindings, setupTagAutocomplete, } from './todo-tags.js';
 export { getTodoFormPermissions, } from './todo-permissions.js';
 export { getTagsFromChips, normalizeTagName, removeTag, renderTagAutocomplete, renderTagsChips, setupTagAutocomplete, } from './todo-tags.js';
 let todoNotesMode = "markdown";
 let todoNotesPreviewBound = false;
+let todoDialogCloseGuardsBound = false;
+let todoDialogBaseline = null;
+let todoDialogClosePromptOpen = false;
 export function resolveColumnKey(raw) {
     const v = (raw || "").trim();
     if (!v)
@@ -147,9 +151,108 @@ function bindTodoNotesPreviewControls() {
         });
     }
 }
+function readTodoDialogSnapshot() {
+    const assignee = document.getElementById("todoAssignee");
+    const sprint = document.getElementById("todoSprint");
+    return {
+        title: todoTitle?.value ?? "",
+        body: todoBody?.value ?? "",
+        tags: getTagsFromChips(),
+        status: todoStatus?.value ?? "",
+        estimation: todoEstimationPoints?.value ?? "",
+        assignee: assignee?.value ?? "",
+        sprint: sprint?.value ?? "",
+    };
+}
+function captureTodoDialogBaseline() {
+    todoDialogBaseline = readTodoDialogSnapshot();
+}
+function isTodoDialogDirty() {
+    if (!todoDialogBaseline) {
+        return false;
+    }
+    const current = readTodoDialogSnapshot();
+    return (current.title !== todoDialogBaseline.title ||
+        current.body !== todoDialogBaseline.body ||
+        current.status !== todoDialogBaseline.status ||
+        current.estimation !== todoDialogBaseline.estimation ||
+        current.assignee !== todoDialogBaseline.assignee ||
+        current.sprint !== todoDialogBaseline.sprint ||
+        current.tags.length !== todoDialogBaseline.tags.length ||
+        current.tags.some((tag, idx) => tag !== todoDialogBaseline?.tags[idx]));
+}
+function resetTodoDialogCloseState() {
+    todoDialogBaseline = null;
+    todoDialogClosePromptOpen = false;
+}
+async function closeTodoDialogInternal(options = {}) {
+    const dialog = todoDialog;
+    if (!dialog || !dialog.open) {
+        return true;
+    }
+    if (options.force || !isTodoDialogDirty()) {
+        dialog.close();
+        return true;
+    }
+    if (todoDialogClosePromptOpen) {
+        return false;
+    }
+    todoDialogClosePromptOpen = true;
+    try {
+        const discard = await showConfirmDialog("You have unsaved changes. Discard them?", "Unsaved changes", "Discard");
+        if (!discard) {
+            return false;
+        }
+        dialog.close();
+        return true;
+    }
+    finally {
+        todoDialogClosePromptOpen = false;
+    }
+}
+function bindTodoDialogCloseGuards() {
+    if (todoDialogCloseGuardsBound || !todoDialog) {
+        return;
+    }
+    todoDialogCloseGuardsBound = true;
+    todoDialog.addEventListener("cancel", (event) => {
+        if (todoDialogClosePromptOpen) {
+            event.preventDefault();
+            return;
+        }
+        if (!isTodoDialogDirty()) {
+            return;
+        }
+        event.preventDefault();
+        void closeTodoDialogInternal({ reason: "cancel" });
+    });
+    todoDialog.addEventListener(DIALOG_CLOSE_REQUEST_EVENT, (event) => {
+        if (todoDialogClosePromptOpen) {
+            event.preventDefault();
+            return;
+        }
+        if (!isTodoDialogDirty()) {
+            return;
+        }
+        event.preventDefault();
+        const detail = event.detail;
+        void closeTodoDialogInternal({ reason: detail?.reason === "outside" ? "outside" : "button" });
+    });
+    todoDialog.addEventListener("close", () => {
+        resetTodoDialogCloseState();
+    });
+}
+export function requestTodoDialogClose(options = {}) {
+    bindTodoDialogCloseGuards();
+    return closeTodoDialogInternal(options);
+}
+export function __isTodoDialogDirtyForTest() {
+    return isTodoDialogDirty();
+}
 export async function openTodoDialog(opts) {
     const { mode, todo, status, onNavigateToLinkedTodo } = opts;
     setEditingTodo(mode === "edit" ? todo : null);
+    bindTodoDialogCloseGuards();
     bindTodoDialogLinkLifecycle();
     bindTodoNotesPreviewControls();
     const board = getBoard();
@@ -412,6 +515,7 @@ export async function openTodoDialog(opts) {
         setupTagAutocomplete();
     }
     bindShareTodoButton();
+    captureTodoDialogBaseline();
     todoDialog.showModal();
     let userChoseFocus = false;
     const ac = new AbortController();

internal/httpapi/web/dist/utils.js

@@ -227,7 +227,7 @@ export function showConfirmDialog(message, title = "Confirm", confirmLabel = "Co
         const dialog = document.createElement('dialog');
         dialog.className = 'dialog';
         dialog.innerHTML = `
-      <div class="dialog__form">
+      <div class="dialog__form" data-dialog-content-root>
         <div class="dialog__header">
           <div class="dialog__title">${escapeHTML(title)}</div>
           <button class="btn btn--ghost" type="button" id="confirmDialogClose" aria-label="Close">✕</button>
@@ -282,7 +282,95 @@ export function showConfirmDialog(message, title = "Confirm", confirmLabel = "Co
         catch (err) {
             // Extremely rare (detached from DOM / not an HTMLDialogElement); surface
             // the error instead of silently hanging the promise.
-            settle(false);
+            settled = true;
+            if (dialog.parentNode)
+                dialog.remove();
+            reject(err);
+        }
+    });
+}
+/**
+ * Shows a prompt dialog with a single text input and resolves to the entered
+ * value on submit, or null on any cancel/close path.
+ */
+export function showPromptDialog(options = {}) {
+    const { title = "Prompt", label = "Value", initialValue = "", confirmLabel = "Save", placeholder = "", maxLength, } = options;
+    return new Promise((resolve, reject) => {
+        const dialog = document.createElement("dialog");
+        dialog.className = "dialog";
+        const maxLengthAttr = typeof maxLength === "number" && Number.isFinite(maxLength) && maxLength > 0
+            ? ` maxlength="${Math.trunc(maxLength)}"`
+            : "";
+        dialog.innerHTML = `
+      <form method="dialog" class="dialog__form" data-dialog-content-root id="promptDialogForm">
+        <div class="dialog__header">
+          <div class="dialog__title">${escapeHTML(title)}</div>
+          <button class="btn btn--ghost" type="button" id="promptDialogClose" aria-label="Close">✕</button>
+        </div>
+        <div class="dialog__content">
+          <label class="field">
+            <div class="field__label">${escapeHTML(label)}</div>
+            <input
+              class="input"
+              type="text"
+              id="promptDialogInput"
+              value="${escapeHTML(initialValue)}"
+              placeholder="${escapeHTML(placeholder)}"${maxLengthAttr}
+              autocomplete="off"
+            />
+          </label>
+        </div>
+        <div class="dialog__footer">
+          <div class="spacer"></div>
+          <button class="btn btn--ghost" type="button" id="promptDialogCancel">Cancel</button>
+          <button class="btn" type="submit" id="promptDialogConfirm">${escapeHTML(confirmLabel)}</button>
+        </div>
+      </form>
+    `;
+        document.body.appendChild(dialog);
+        let intent = null;
+        let settled = false;
+        const settle = (value) => {
+            if (settled)
+                return;
+            settled = true;
+            if (dialog.parentNode)
+                dialog.remove();
+            resolve(value);
+        };
+        dialog.addEventListener("close", () => settle(intent), { once: true });
+        const input = dialog.querySelector("#promptDialogInput");
+        const form = dialog.querySelector("#promptDialogForm");
+        const onCancelClose = () => {
+            intent = null;
+            dialog.close();
+        };
+        form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            intent = input.value;
+            dialog.close();
+        });
+        const closeBtn = dialog.querySelector("#promptDialogClose");
+        closeBtn.addEventListener("click", onCancelClose);
+        const cancelBtn = dialog.querySelector("#promptDialogCancel");
+        cancelBtn.addEventListener("click", onCancelClose);
+        dialog.addEventListener("cancel", () => {
+            intent = null;
+        });
+        try {
+            dialog.showModal();
+            input.focus();
+            try {
+                input.setSelectionRange(0, input.value.length);
+            }
+            catch {
+                // Ignore selection issues in non-text input implementations.
+            }
+        }
+        catch (err) {
+            settled = true;
+            if (dialog.parentNode)
+                dialog.remove();
             reject(err);
         }
     });