From b3a55d9facca69492c8c0076e8c59b8296fe80e6 Mon Sep 17 00:00:00 2001
From: Bas van Rossem <b.vanrossem@mendrix.nl>
Date: Thu, 19 Feb 2026 16:27:43 +0100
Subject: [PATCH] feat(web): add reusable ConfirmDialog and polish delete
 interactions

Extracts reusable ConfirmDialog component, refactors ship delete to show
the ship name in confirmation, and improves interaction consistency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/ui/ConfirmDialog.tsx | 35 ++++++++++++++++++++++
 web/src/pages/ShipListPage.tsx          | 39 +++++++++----------------
 2 files changed, 49 insertions(+), 25 deletions(-)
 create mode 100644 web/src/components/ui/ConfirmDialog.tsx

diff --git a/web/src/components/ui/ConfirmDialog.tsx b/web/src/components/ui/ConfirmDialog.tsx
new file mode 100644
index 0000000..7d935ef
--- /dev/null
+++ b/web/src/components/ui/ConfirmDialog.tsx
@@ -0,0 +1,35 @@
+import Modal from './Modal';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  danger?: boolean;
+}
+
+export default function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  danger = false,
+}: Props) {
+  return (
+    <Modal open={open} onClose={onClose} title={title}>
+      <p style={{ margin: 'var(--spacing-md) 0', lineHeight: 1.5 }}>{message}</p>
+      <div className="modal-actions">
+        <button className="btn-secondary" onClick={onClose}>
+          Cancel
+        </button>
+        <button className={danger ? 'btn-danger' : 'btn-primary'} onClick={onConfirm}>
+          {confirmLabel}
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/web/src/pages/ShipListPage.tsx b/web/src/pages/ShipListPage.tsx
index 0225276..091f743 100644
--- a/web/src/pages/ShipListPage.tsx
+++ b/web/src/pages/ShipListPage.tsx
@@ -3,6 +3,7 @@ import TopBar from '../components/layout/TopBar';
 import PageContainer from '../components/layout/PageContainer';
 import ShipCard from '../components/ships/ShipCard';
 import CreateShipModal from '../components/ships/CreateShipModal';
+import ConfirmDialog from '../components/ui/ConfirmDialog';
 import { useShipsList } from '../store/use-ships-list';
 
 export default function ShipListPage() {
@@ -14,9 +15,9 @@ export default function ShipListPage() {
     fetchShips();
   }, [fetchShips]);
 
-  const handleDelete = async (id: string) => {
-    setPendingDelete(id);
-  };
+  const pendingShipName = pendingDelete
+    ? ships.find((s) => s.id === pendingDelete)?.name ?? 'this ship'
+    : '';
 
   const confirmDelete = async () => {
     if (!pendingDelete) return;
@@ -42,33 +43,21 @@ export default function ShipListPage() {
 
         <div className="ship-list">
           {ships.map((ship) => (
-            <ShipCard key={ship.id} ship={ship} onDelete={handleDelete} />
+            <ShipCard key={ship.id} ship={ship} onDelete={(id) => setPendingDelete(id)} />
           ))}
         </div>
 
         <CreateShipModal open={showCreate} onClose={() => setShowCreate(false)} />
 
-        {/* Simple delete confirmation */}
-        {pendingDelete && (
-          <div className="modal-overlay" onClick={() => setPendingDelete(null)}>
-            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
-              <div className="modal-header">
-                <h2 className="modal-title">Delete Ship?</h2>
-              </div>
-              <p style={{ margin: 'var(--spacing-md) 0' }}>
-                This will permanently delete this ship and all its weapons.
-              </p>
-              <div className="modal-actions">
-                <button className="btn-secondary" onClick={() => setPendingDelete(null)}>
-                  Cancel
-                </button>
-                <button className="btn-danger" onClick={confirmDelete}>
-                  Delete
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
+        <ConfirmDialog
+          open={!!pendingDelete}
+          onClose={() => setPendingDelete(null)}
+          onConfirm={confirmDelete}
+          title="Delete Ship?"
+          message={`Permanently delete "${pendingShipName}" and all its weapons?`}
+          confirmLabel="Delete"
+          danger
+        />
       </PageContainer>
     </>
   );