add conflict dialogs

Author: mikebarkmin

platforms/web/src/Teach.css

@@ -149,6 +149,83 @@
   padding: 2rem;
 }
 
+.conflict-dialog {
+  max-width: 700px;
+}
+
+.conflict-info {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background: var(--learningmap-color-whitesmoke, #f5f5f5);
+  border-radius: 4px;
+}
+
+.conflict-map-info h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--learningmap-color-quicksilver, #a4a4a4);
+  text-transform: uppercase;
+}
+
+.conflict-map-info p {
+  margin: 0.25rem 0;
+  font-size: 1rem;
+}
+
+.conflict-map-info .text-small {
+  font-size: 0.85rem;
+  color: var(--learningmap-color-quicksilver, #a4a4a4);
+}
+
+.conflict-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.conflict-button {
+  padding: 0.875rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.conflict-button-danger {
+  background: #dc3545;
+  color: white;
+}
+
+.conflict-button-danger:hover {
+  background: #c82333;
+}
+
+.conflict-button-primary {
+  background: var(--learningmap-color-openpatch, #007864);
+  color: white;
+}
+
+.conflict-button-primary:hover {
+  background: var(--learningmap-color-dark-forest, #004c45);
+}
+
+.conflict-button-secondary {
+  background: white;
+  color: #333;
+  border: 2px solid #dee2e6;
+}
+
+.conflict-button-secondary:hover {
+  background: var(--learningmap-color-whitesmoke, #f5f5f5);
+}
+
 .add-map-section {
   background: var(--learningmap-color-whitesmoke, #f5f5f5);
   padding: 2rem;

platforms/web/src/Teach.tsx

@@ -14,6 +14,13 @@ function Teach() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showConflictDialog, setShowConflictDialog] = useState(false);
+  const [conflictData, setConflictData] = useState<{
+    storageId: string;
+    roadmapData: any;
+    jsonId?: string;
+    existingMap: TeacherMapEntry;
+  } | null>(null);
 
   useEffect(() => {
     db.getAllTeacherMaps().then(setAllMaps);
@@ -83,6 +90,16 @@ function Teach() {
         const roadmapData = await response.json();
         const storageId = roadmapData.settings?.id || jsonId;
 
+        // Check if map already exists
+        const existingMap = await db.getTeacherMap(storageId);
+        if (existingMap) {
+          // Show conflict dialog
+          setConflictData({ storageId, roadmapData, jsonId, existingMap });
+          setShowConflictDialog(true);
+          setLoading(false);
+          return;
+        }
+        
         await db.addTeacherMap(storageId, roadmapData, jsonId);
         const maps = await db.getAllTeacherMaps();
         setAllMaps(maps);
@@ -114,6 +131,15 @@ function Teach() {
         const uploadId = `upload-${Date.now()}`;
         const storageId = json.settings?.id || uploadId;
 
+        // Check if map already exists
+        const existingMap = await db.getTeacherMap(storageId);
+        if (existingMap) {
+          // Show conflict dialog
+          setConflictData({ storageId, roadmapData: json, existingMap });
+          setShowConflictDialog(true);
+          return;
+        }
+        
         await db.addTeacherMap(storageId, json, undefined);
         const maps = await db.getAllTeacherMaps();
         setAllMaps(maps);
@@ -133,6 +159,37 @@ function Teach() {
     event.target.value = '';
   };
 
+  const handleConflictOverwrite = async () => {
+    if (!conflictData) return;
+    
+    await db.addTeacherMap(conflictData.storageId, conflictData.roadmapData, conflictData.jsonId);
+    const maps = await db.getAllTeacherMaps();
+    setAllMaps(maps);
+    setNewMapUrl('');
+    setShowAddDialog(false);
+    setShowConflictDialog(false);
+    setConflictData(null);
+  };
+
+  const handleConflictNewId = async () => {
+    if (!conflictData) return;
+    
+    // Generate a new unique ID
+    const newId = `${conflictData.storageId}-${Date.now()}`;
+    await db.addTeacherMap(newId, conflictData.roadmapData, conflictData.jsonId);
+    const maps = await db.getAllTeacherMaps();
+    setAllMaps(maps);
+    setNewMapUrl('');
+    setShowAddDialog(false);
+    setShowConflictDialog(false);
+    setConflictData(null);
+  };
+
+  const handleConflictCancel = () => {
+    setShowConflictDialog(false);
+    setConflictData(null);
+  };
+
   return (
     <div className="teach-container">
       <Header>
@@ -195,6 +252,60 @@ function Teach() {
         </div>
       )}
 
+      {showConflictDialog && conflictData && (
+        <div className="dialog-overlay" onClick={handleConflictCancel}>
+          <div className="dialog-content conflict-dialog" onClick={(e) => e.stopPropagation()}>
+            <div className="dialog-header">
+              <h2>⚠️ Map Already Exists</h2>
+              <button 
+                className="dialog-close" 
+                onClick={handleConflictCancel}
+                aria-label="Close dialog"
+              >
+                ×
+              </button>
+            </div>
+            <div className="dialog-body">
+              <p>
+                A learning map with ID <strong>{conflictData.storageId}</strong> already exists in your collection.
+              </p>
+              <div className="conflict-info">
+                <div className="conflict-map-info">
+                  <h4>Existing Map:</h4>
+                  <p><strong>{conflictData.existingMap.roadmapData.settings?.title || 'Untitled'}</strong></p>
+                  <p className="text-small">Last modified: {new Date(conflictData.existingMap.lastModified).toLocaleString()}</p>
+                </div>
+                <div className="conflict-map-info">
+                  <h4>New Map:</h4>
+                  <p><strong>{conflictData.roadmapData.settings?.title || 'Untitled'}</strong></p>
+                </div>
+              </div>
+              <p>What would you like to do?</p>
+              <div className="conflict-actions">
+                <button 
+                  onClick={handleConflictOverwrite} 
+                  className="conflict-button conflict-button-danger"
+                >
+                  Overwrite Existing
+                </button>
+                <button 
+                  onClick={handleConflictNewId} 
+                  className="conflict-button conflict-button-primary"
+                >
+                  Keep Both (New ID)
+                </button>
+                <button 
+                  onClick={handleConflictCancel} 
+                  className="conflict-button conflict-button-secondary"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      
       <div className="teach-content">
         <div className="teach-header">
           <h2>My Created Maps</h2>