Moved the add manually box from the main page to the settings page

templates/course_dashboard.html

@@ -38,18 +38,15 @@
         [data-density="compact"] .container { padding: 10px; }
         [data-density="compact"] .card,
         [data-density="compact"] .lesson-item,
-        [data-density="compact"] .tree-header,
+        [data-density="compact"] .tree-header { padding: 10px; margin-bottom: 8px; }
-        [data-density="compact"] .course-selector { padding: 10px; margin-bottom: 8px; }
         [data-card-style="elevated"] .card,
         [data-card-style="elevated"] .lesson-item,
-        [data-card-style="elevated"] .tree-header,
+        [data-card-style="elevated"] .tree-header {
-        [data-card-style="elevated"] .course-selector {
             box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
         }
         [data-card-style="bordered"] .card,
         [data-card-style="bordered"] .lesson-item,
-        [data-card-style="bordered"] .tree-header,
+        [data-card-style="bordered"] .tree-header {
-        [data-card-style="bordered"] .course-selector {
             border: 1px solid var(--border-color);
         }
 
@@ -415,36 +412,6 @@
             color: #666;
         }
 
-        .course-selector {
-            border: 2px dashed #666;
-            padding: 40px;
-            text-align: center;
-            margin: 40px 0;
-            border-radius: 10px;
-            background: var(--bg-secondary);
-        }
-
-        .course-selector input {
-            background: var(--bg-tertiary);
-            border: 1px solid #666;
-            color: var(--text-primary);
-            padding: 12px;
-            font-size: 14px;
-            border-radius: var(--radius);
-            width: 80%;
-            margin-right: 10px;
-        }
-
-        .course-selector input::placeholder {
-            color: var(--text-muted);
-        }
-
-        .course-selector input:focus {
-            outline: none;
-            border-color: var(--accent);
-            box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
-        }
-
         .last-accessed {
             background: #2d5a2d;
             border-left-color: #28a745;
@@ -468,12 +435,6 @@
                 align-items: flex-start;
             }
 
-            .course-selector input {
-                width: 100%;
-                margin-right: 0;
-                margin-bottom: 10px;
-            }
-
             .tree-content {
                 margin-left: 15px;
             }
@@ -613,23 +574,6 @@
                 <p id="library-path-bar" style="color: #999; font-size: 13px; margin-top: 6px;"></p>
                 <div id="library-groups" style="margin-top: 15px;"></div>
             </div>
-
-            <div class="course-selector card">
-                <p>
-                    <a href="#" onclick="toggleManualPath(event)" style="color: #007acc;">
-                        Don't see it? Enter a path manually
-                    </a>
-                </p>
-                <div id="manual-path-box" style="display:none; margin-top: 15px;">
-                    <p>Enter the full path to your course directory:</p>
-                    <div style="margin: 20px 0;">
-                        <input type="text" id="course-path" placeholder="e.g., /app/courses/My Course">
-                        <button onclick="loadCourseFromPath()" class="btn">Load Course</button>
-                    </div>
-
-                    <div id="course-status" style="margin-top: 10px;"></div>
-                </div>
-            </div>
         </div>
     {% endif %}
     </div>
@@ -671,12 +615,6 @@
             }
         }
 
-        function toggleManualPath(e) {
-            e.preventDefault();
-            const box = document.getElementById('manual-path-box');
-            box.style.display = box.style.display === 'none' ? 'block' : 'none';
-        }
-
         function loadLibrary() {
             const libraryCard = document.getElementById('library-card');
             if (!libraryCard) return;
@@ -776,50 +714,6 @@
 
         document.addEventListener('DOMContentLoaded', loadLibrary);
 
-        function loadCourseFromPath() {
-            const pathInput = document.getElementById('course-path');
-            const statusDiv = document.getElementById('course-status');
-            const coursePath = pathInput.value.trim();
-            
-            if (!coursePath) {
-                statusDiv.innerHTML = '<p style="color: #ff6b6b;">Please enter a course path.</p>';
-                return;
-            }
-            
-            // Show loading status
-            statusDiv.innerHTML = '<p style="color: #007acc;">Loading course...</p>';
-            
-            fetch('/load_course', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({course_path: coursePath})
-            })
-            .then(r => r.json())
-            .then(data => {
-                if (data.success) {
-                    statusDiv.innerHTML = '<p style="color: #28a745;">Course loaded successfully! Redirecting...</p>';
-                    setTimeout(() => location.reload(), 1000);
-                } else {
-                    statusDiv.innerHTML = `<p style="color: #ff6b6b;">Error: ${data.error}</p>`;
-                }
-            })
-            .catch(error => {
-                console.error('Error loading course:', error);
-                statusDiv.innerHTML = '<p style="color: #ff6b6b;">Error loading course. Please check the path and try again.</p>';
-            });
-        }
-        
-        // Allow Enter key to submit
-        document.addEventListener('DOMContentLoaded', function() {
-            const pathInput = document.getElementById('course-path');
-            if (pathInput) {
-                pathInput.addEventListener('keypress', function(e) {
-                    if (e.key === 'Enter') {
-                        loadCourseFromPath();
-                    }
-                });
-            }
-        });
     </script>
     <script src="/static/theme.js"></script>
 </body>

templates/settings.html

@@ -331,6 +331,21 @@
             </div>
         </div>
 
+        <div class="card">
+            <h2>Load a Course Manually</h2>
+            <div class="setting-row" style="flex-direction: column; align-items: stretch; gap: 8px;">
+                <label for="manual-course-path">Course directory path
+                    <span class="setting-desc">For a course outside your library folder, or if it isn't showing up in the browser for some reason.</span>
+                </label>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="manual-course-path" class="hex-input" style="flex: 1; width: auto; font-family: var(--font-family);"
+                           placeholder="e.g., /app/courses/My Course">
+                    <button class="btn" onclick="loadCourseFromPath()">Load Course</button>
+                </div>
+                <span id="manual-course-status" style="font-size: 0.85em; min-height: 1.2em;"></span>
+            </div>
+        </div>
+
         <div class="card">
             <h2>Video Player</h2>
             <div class="setting-row">
@@ -441,6 +456,46 @@
             });
         }
 
+        function loadCourseFromPath() {
+            const input = document.getElementById('manual-course-path');
+            const status = document.getElementById('manual-course-status');
+            const coursePath = input.value.trim();
+
+            if (!coursePath) {
+                status.style.color = '#ff6b6b';
+                status.textContent = 'Please enter a course path.';
+                return;
+            }
+
+            status.style.color = 'var(--text-muted)';
+            status.textContent = 'Loading course...';
+
+            fetch('/load_course', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ course_path: coursePath })
+            })
+            .then(r => r.json())
+            .then(data => {
+                if (data.success) {
+                    status.style.color = '#28a745';
+                    status.textContent = `✓ Loaded "${data.course_name}" — redirecting...`;
+                    setTimeout(() => { window.location.href = '/'; }, 1000);
+                } else {
+                    status.style.color = '#ff6b6b';
+                    status.textContent = data.error || 'Could not load course';
+                }
+            })
+            .catch(() => {
+                status.style.color = '#ff6b6b';
+                status.textContent = 'Could not reach the server';
+            });
+        }
+
+        document.getElementById('manual-course-path').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') loadCourseFromPath();
+        });
+
         function resetVideoSize() {
             fetch('/api/settings', {
                 method: 'POST',