refactor: replace redundant window.confirm with custom dialog

Removes duplicate confirmation dialogs when deleting documents.
Previously, users were asked twice: once by the UI component's custom
dialog and again by window.confirm in the store.

Changes:
- Remove window.confirm from workspaceStore deleteDocument function
- Add useConfirm hook to DocumentTabs component for delete action
- Consistent confirmation UX across DocumentManager and DocumentTabs

Both components now show the same styled confirmation dialog with
proper handling of unsaved changes warnings.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-11 22:08:00 +02:00
parent 28f8224284
commit 94c7845ca7
2 changed files with 27 additions and 8 deletions

View file

@ -1,6 +1,7 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { useWorkspaceStore } from '../../stores/workspaceStore'; import { useWorkspaceStore } from '../../stores/workspaceStore';
import { useCreateDocument } from '../../hooks/useCreateDocument'; import { useCreateDocument } from '../../hooks/useCreateDocument';
import { useConfirm } from '../../hooks/useConfirm';
import Tab from './Tab'; import Tab from './Tab';
import AddIcon from '@mui/icons-material/Add'; import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
@ -37,6 +38,7 @@ const DocumentTabs = () => {
} = useWorkspaceStore(); } = useWorkspaceStore();
const { handleNewDocument, NewDocumentDialog } = useCreateDocument(); const { handleNewDocument, NewDocumentDialog } = useCreateDocument();
const { confirm, ConfirmDialogComponent } = useConfirm();
const [draggedIndex, setDraggedIndex] = useState<number | null>(null); const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
const [contextMenu, setContextMenu] = useState<{ const [contextMenu, setContextMenu] = useState<{
@ -124,11 +126,30 @@ const DocumentTabs = () => {
setContextMenu(null); setContextMenu(null);
}, [contextMenu, closeDocument]); }, [contextMenu, closeDocument]);
const handleDeleteFromMenu = useCallback(() => { const handleDeleteFromMenu = useCallback(async () => {
if (!contextMenu) return; if (!contextMenu) return;
deleteDocument(contextMenu.documentId);
const meta = documentMetadata.get(contextMenu.documentId);
if (!meta) return;
const confirmTitle = 'Delete Document';
const confirmMessage = meta.isDirty
? `"${meta.title}" has unsaved changes. Delete anyway?`
: `Are you sure you want to delete "${meta.title}"?`;
const confirmed = await confirm({
title: confirmTitle,
message: confirmMessage,
confirmLabel: 'Delete',
severity: 'danger',
});
if (confirmed) {
deleteDocument(contextMenu.documentId);
}
setContextMenu(null); setContextMenu(null);
}, [contextMenu, deleteDocument]); }, [contextMenu, documentMetadata, deleteDocument, confirm]);
return ( return (
<div className="flex items-center bg-gray-100 border-b border-gray-300 overflow-x-auto"> <div className="flex items-center bg-gray-100 border-b border-gray-300 overflow-x-auto">
@ -219,6 +240,9 @@ const DocumentTabs = () => {
/> />
)} )}
{/* Confirmation Dialog */}
{ConfirmDialogComponent}
{/* New Document Dialog */} {/* New Document Dialog */}
{NewDocumentDialog} {NewDocumentDialog}
</div> </div>

View file

@ -367,11 +367,6 @@ export const useWorkspaceStore = create<Workspace & WorkspaceActions>((set, get)
const state = get(); const state = get();
const metadata = state.documentMetadata.get(documentId); const metadata = state.documentMetadata.get(documentId);
const confirmed = window.confirm(
`Are you sure you want to delete "${metadata?.title}"? This cannot be undone.`
);
if (!confirmed) return false;
const docTitle = metadata?.title || 'Untitled'; const docTitle = metadata?.title || 'Untitled';
// Delete from storage // Delete from storage