New main page way of browsing the courses

templates/settings.html

@@ -312,6 +312,21 @@
             </div>
         </div>
 
+        <div class="card">
+            <h2>Library</h2>
+            <div class="setting-row" style="flex-direction: column; align-items: stretch; gap: 8px;">
+                <label for="library_path">Default courses directory
+                    <span class="setting-desc">Where the Library browser starts. Leave blank to use the server default ({{ default_library_path }}).</span>
+                </label>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="library_path" class="hex-input" style="flex: 1; width: auto; font-family: var(--font-family);"
+                           placeholder="{{ default_library_path }}" value="{{ settings.library_path }}">
+                    <button class="btn" onclick="saveLibraryPath()">Save</button>
+                </div>
+                <span id="library-path-status" style="font-size: 0.85em; min-height: 1.2em;"></span>
+            </div>
+        </div>
+
         <div class="actions">
             <button class="btn btn-secondary" onclick="resetSettings()">Reset to Defaults</button>
             <span id="save-status">✓ Saved</span>
@@ -380,6 +395,31 @@
             }
         });
 
+        function saveLibraryPath() {
+            const input = document.getElementById('library_path');
+            const status = document.getElementById('library-path-status');
+            fetch('/api/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ library_path: input.value.trim() })
+            })
+            .then(r => r.json())
+            .then(data => {
+                if (data.success) {
+                    status.style.color = '#28a745';
+                    status.textContent = '✓ Saved — reload the main page to see it take effect';
+                    showSaved();
+                } else {
+                    status.style.color = '#ff6b6b';
+                    status.textContent = data.error || 'Could not save';
+                }
+            })
+            .catch(err => {
+                status.style.color = '#ff6b6b';
+                status.textContent = 'Could not reach the server';
+            });
+        }
+
         function resetSettings() {
             fetch('/api/settings/reset', { method: 'POST' })
                 .then(r => r.json())