Home page: replace browser confirm/alert in board delete with a themed modal #81
Labels
No labels
prio_critical
prio_low
type_bug
type_contact
type_issue
type_lead
type_question
type_story
type_task
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
lhumina_code/hero_whiteboard#81
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Bug
Deleting a board from the home page uses
window.confirm(...)for the destructive-action confirmation andwindow.alert(...)for error reporting (crates/hero_whiteboard_ui/templates/web/home.html:412-421). Both:For a destructive action like delete, a proper themed confirmation modal is the right UX -- with the board's name visible, a clear destructive button styling, and inline error reporting if the RPC fails.
Reproduction
/web/home).Observed: a native browser
confirmdialog opens. If the user clicks the icon by mistake and the RPC fails, a nativealertfollows.Expected: an in-page themed modal opens with the board name and a destructive Delete button.
Root cause
crates/hero_whiteboard_ui/templates/web/home.html:412-421:The inline
confirmandalertcalls are the only browser dialogs in the delete-board flow. The button that triggers it is athome.html:248inside the per-card action row.Affected file
crates/hero_whiteboard_ui/templates/web/home.html-- thedeleteBoardfunction and the modal markup.No server / SDK / openrpc / DB changes -- pure UI refactor.
Expected behavior
Clicking the trash icon opens an in-page modal that:
Delete "Sprint planning"? This cannot be undone.).alert).var(--wb-...)CSS variables for consistency with dark/light mode.Reference modals to match
The same file (
templates/web/home.html) already has three modals to model after:rename-modal(lines 56-75)new-board-modal(lines 30-55)new-workspace-modal(lines 11-29)The new delete-confirm modal should follow the same conventions: full-screen overlay with
rgba(0,0,0,0.5)backdrop, centered400pxcard onvar(--wb-surface),padding:24px,border-radius:12px, inline error region usingvar(--wb-error), and Cancel + action buttons in the samedisplay:flex;gap:8px;justify-content:flex-endrow.Acceptance criteria
window.confirm).var(--wb-error)) styling so it's visually distinct from Cancel.rpcCall('board.delete', { id }); on success closes the modal and refreshes the board list.window.alert); the modal stays open so the user can retry or cancel.window.confirm/window.alertcalls remain in the board-delete flow.crates/hero_whiteboard_ui/templates/web/home.html.Notes
deleteBoard(id, name)entry point so the per-card button athome.html:248doesn't need to change -- have it open the modal instead of running the inline confirm.alertcalls remain insaveRename(line 178),duplicateBoard(line 205), andsubmitNewBoard(multiple). They are out of scope for this issue but worth a follow-up cleanup so the page is fully native-dialog-free.Implementation Spec for Issue #81
Objective
Replace the
window.confirmconfirmation andwindow.alerterror in the home page's board-delete flow with a themed in-page modal styled like the existing rename / new-board / new-workspace modals in the same file.Requirements
window.confirm).rpcCall('board.delete', { id }); on success closes the modal and refreshes the board list.window.alert); the modal stays open so the user can retry or cancel.var(--wb-...)CSS variables.crates/hero_whiteboard_ui/templates/web/home.html.Files to Modify
crates/hero_whiteboard_ui/templates/web/home.html— add modal markup, rewritedeleteBoardto drive the modal, extend the existing keydown handler.No server / SDK / openrpc / DB changes — pure UI refactor.
Implementation Plan
Step 1: Add the delete-confirm modal markup, update
deleteBoard, hook keyboard handlerFiles:
crates/hero_whiteboard_ui/templates/web/home.htmlModal markup. In the
{% block content %}section (next to the existingnew-board-modal,new-workspace-modal, andrename-modalblocks), add:The destructive styling on the Delete button uses
var(--wb-error)as its background so it's visually distinct from Cancel and aligns with the existing trash-icon color.Replace
deleteBoard(lines 412-421) with three functions:deleteBoard(id, name)keeps the same call signature so the per-card button athome.html:248doesn't need to change.Extend the existing keydown handler (currently routes Enter/Escape to the rename, new-board, and new-workspace modals) to also route to the delete-board modal:
Insert this branch alongside the existing
nbModal/nwModalchecks.Dependencies: none.
Acceptance Criteria
var(--wb-error)) styling.rpcCall('board.delete', { id }); on success closes the modal and reloads the board list.var(--wb-...)(looks correct in dark + light mode).window.confirm/window.alertin the board-delete flow.crates/hero_whiteboard_ui/templates/web/home.html.Notes
var deletingBoardId = null;pattern used byrenamingBoardId(declared near the top of the script block) so the design matches what's already there.#fffis hardcoded becausevar(--wb-error)is a saturated red where any--wb-textvalue (light or dark) would be hard to read; the rest of the modal uses theme variables.alertcalls in the same file (saveRename,duplicateBoard,submitNewBoard) are out of scope per the issue body — leave them for a follow-up.Test Results
cargo test --workspace --lib: 4 lib targets, 0 tests / 0 passed / 0 failed each.cargo clippy --workspace -- -D warnings: clean.cargo check --workspace: clean (Askama template compiled successfully).Template-only change. Manual verification recommended:
alert).Implementation Summary
Changes
crates/hero_whiteboard_ui/templates/web/home.html(+50 / -6)delete-board-modalblock in the content section, themed viavar(--wb-...)with a red Delete button styled withvar(--wb-error)background and white text for contrast.var deletingBoardId = null;alongside the existingrenamingBoardId.deleteBoard(id, name)(which usedwindow.confirm+window.alert) with three functions:deleteBoard(id, name): opens the modal, fills in the prompt with the board name, clears any previous error.closeDeleteBoardModal(): hides the modal and clearsdeletingBoardId.submitDeleteBoard(): callsrpcCall('board.delete', { id }). On success, closes the modal and reloads. On failure, shows the error inline inside the modal — nowindow.alert, modal stays open so the user can retry.home.html:248was not changed —deleteBoard(id, name)keeps the same call signature.Verification
cargo test --workspace --libpasses (4 lib targets, 0 tests).cargo clippy --workspace -- -D warnings: clean.cargo check --workspace: clean.Notes / caveats
#fffbecausevar(--wb-error)is a saturated red where the theme's--wb-textvariants would be hard to read.alertcalls in the same file (saveRename,duplicateBoard,submitNewBoard) were intentionally left out of scope per the issue body, for a follow-up cleanup.