Add file upload option to learn view for importing LearningMap JSON files

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

platforms/web/src/Learn.css

@@ -182,6 +182,56 @@
   margin-bottom: 0;
 }
 
+.add-map-divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 1.5rem 0;
+  color: var(--learningmap-color-quicksilver, #a4a4a4);
+}
+
+.add-map-divider::before,
+.add-map-divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.add-map-divider span {
+  padding: 0 1rem;
+  font-size: 0.9rem;
+}
+
+.add-map-upload {
+  display: flex;
+  justify-content: center;
+}
+
+.upload-button {
+  padding: 0.75rem 1.5rem;
+  background: white;
+  color: var(--learningmap-color-openpatch, #007864);
+  border: 2px solid var(--learningmap-color-openpatch, #007864);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 400;
+  transition: all 0.2s;
+  font-family: "Concert One", sans-serif;
+  display: inline-block;
+}
+
+.upload-button:hover {
+  background: var(--learningmap-color-freshmint, #b5e3d8);
+  border-color: var(--learningmap-color-dark-forest, #004c45);
+  color: var(--learningmap-color-dark-forest, #004c45);
+}
+
+.upload-button:focus {
+  outline: 2px solid var(--learningmap-color-openpatch, #007864);
+  outline-offset: 2px;
+}
+
 .empty-state {
   text-align: center;
   padding: 3rem;

platforms/web/src/Learn.tsx

@@ -150,6 +150,55 @@ function Learn() {
       setError('Invalid learning map URL. Please paste a valid URL with #json=...');
     }
   };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    setError(null);
+    const reader = new FileReader();
+    
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const json = JSON.parse(content);
+        
+        // Generate a unique ID for this uploaded map
+        const uploadId = `upload-${Date.now()}`;
+        const storageId = json.settings?.id || uploadId;
+        
+        // Check if a map with this storage ID already exists
+        const existingMap = getLearningMap(storageId);
+        if (existingMap) {
+          const shouldReplace = window.confirm(
+            `A learning map with this ID already exists. Would you like to replace it? Your progress will not be removed.`
+          );
+          if (shouldReplace) {
+            const existingState = existingMap.state;
+            addLearningMap(storageId, json);
+            if (existingState) {
+              updateState(storageId, existingState);
+            }
+            navigate(`/learn#json=${storageId}`);
+          }
+        } else {
+          addLearningMap(storageId, json);
+          navigate(`/learn#json=${storageId}`);
+        }
+      } catch (err) {
+        setError('Invalid file format. Please upload a valid LearningMap JSON file.');
+      }
+    };
+    
+    reader.onerror = () => {
+      setError('Failed to read the file. Please try again.');
+    };
+    
+    reader.readAsText(file);
+    
+    // Reset the input so the same file can be uploaded again if needed
+    event.target.value = '';
+  };
 
   const handleRemoveMap = (id: string) => {
     if (window.confirm('Are you sure you want to remove this learning map?')) {
@@ -258,6 +307,21 @@ function Learn() {
             />
             <button onClick={handleAddMap}>Add Map</button>
           </div>
+          <div className="add-map-divider">
+            <span>or</span>
+          </div>
+          <div className="add-map-upload">
+            <label htmlFor="file-upload" className="upload-button">
+              Upload Map File
+            </label>
+            <input
+              id="file-upload"
+              type="file"
+              accept=".json,application/json"
+              onChange={handleFileUpload}
+              style={{ display: 'none' }}
+            />
+          </div>
           {error && <p className="error-message">{error}</p>}
         </div>