alert and confirm, Claude's favorite

[DimitriGilbert]

CodeRabbit
Replace native confirm() with a non-blocking dialog.

Using the native confirm() function blocks the UI thread and provides a poor user experience. Consider using a modal dialog component instead.

Example implementation:

// Instead of:
if (confirm(Delete ${page.title}? Fields on this page will be moved to Page 1.)) {
// deletion logic
}

// Use a confirmation modal:
const [deleteConfirmation, setDeleteConfirmation] = useState<{
show: boolean;
pageId?: number;
title?: string;
}>({ show: false });

// In the button onClick:
onClick={(e) => {
e.stopPropagation();
setDeleteConfirmation({
show: true,
pageId: page.page,
title: page.title
});
}}

// Add a confirmation dialog component
{deleteConfirmation.show && (
<ConfirmationDialog
title="Delete Page"
message={Delete ${deleteConfirmation.title}? Fields on this page will be moved to Page 1.}
onConfirm={() => {
// deletion logic
setDeleteConfirmation({ show: false });
}}
onCancel={() => setDeleteConfirmation({ show: false })}
/>
)}
Also applies to: 577-581