From 94c7845ca708f3810aeb5d9bbd79783278fe3af3 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 11 Oct 2025 22:08:00 +0200
Subject: [PATCH] refactor: replace redundant window.confirm with custom dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/Workspace/DocumentTabs.tsx | 30 ++++++++++++++++++++---
 src/stores/workspaceStore.ts              |  5 ----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Workspace/DocumentTabs.tsx b/src/components/Workspace/DocumentTabs.tsx
index ce7aeca..2e06af7 100644
--- a/src/components/Workspace/DocumentTabs.tsx
+++ b/src/components/Workspace/DocumentTabs.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useWorkspaceStore } from '../../stores/workspaceStore';
 import { useCreateDocument } from '../../hooks/useCreateDocument';
+import { useConfirm } from '../../hooks/useConfirm';
 import Tab from './Tab';
 import AddIcon from '@mui/icons-material/Add';
 import EditIcon from '@mui/icons-material/Edit';
@@ -37,6 +38,7 @@ const DocumentTabs = () => {
   } = useWorkspaceStore();
 
   const { handleNewDocument, NewDocumentDialog } = useCreateDocument();
+  const { confirm, ConfirmDialogComponent } = useConfirm();
 
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const [contextMenu, setContextMenu] = useState<{
@@ -124,11 +126,30 @@ const DocumentTabs = () => {
     setContextMenu(null);
   }, [contextMenu, closeDocument]);
 
-  const handleDeleteFromMenu = useCallback(() => {
+  const handleDeleteFromMenu = useCallback(async () => {
     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);
-  }, [contextMenu, deleteDocument]);
+  }, [contextMenu, documentMetadata, deleteDocument, confirm]);
 
   return (
     <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 */}
       {NewDocumentDialog}
     </div>
diff --git a/src/stores/workspaceStore.ts b/src/stores/workspaceStore.ts
index af5aad3..c464968 100644
--- a/src/stores/workspaceStore.ts
+++ b/src/stores/workspaceStore.ts
@@ -367,11 +367,6 @@ export const useWorkspaceStore = create<Workspace & WorkspaceActions>((set, get)
     const state = get();
 
     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';
 
     // Delete from storage