From a5e96ddb0b428f45317ef38a6c2b04cdc9238e2a Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Fri, 23 Jan 2026 09:44:47 -0500
Subject: [PATCH] feat: restructure admin dashboard into separate pages

- Convert admin dashboard from single 2-column page to multi-page interface
- Create main admin dashboard (/admin) as overview with navigation sidebar
- Add separate profile settings page (/admin/profile) for user account management
- Add separate library management page (/admin/library) combining folder and scan settings
- Implement sidebar navigation pattern similar to Gitea, Jellyfin, Audiobookshelf
- Add dedicated templates: admin.html, admin_profile.html, admin_library.html
- Include quick actions and statistics on main dashboard
- Improve UI with better organization and visual hierarchy
- Maintain consistent navigation and theme across all admin pages
- Add folder management, scan settings, and library statistics to library page
---
 templates/admin.html         | 382 +++++++++--------------------------
 templates/admin_library.html | 303 +++++++++++++++++++++++++++
 templates/admin_profile.html | 198 ++++++++++++++++++
 3 files changed, 591 insertions(+), 292 deletions(-)
 create mode 100644 templates/admin_library.html
 create mode 100644 templates/admin_profile.html

diff --git a/templates/admin.html b/templates/admin.html
index 6ea7df3..1dae2ff 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -11,7 +11,7 @@
                 <h1 class="text-xl font-bold" style="color: var(--text-primary)">📚 Bookmann</h1>
             </div>
             <div class="flex items-center space-x-4">
-                <a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Dashboard</a>
+                <a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Library</a>
                 <span style="color: var(--text-secondary)">Welcome, {{.User.Username}}!</span>
                 <button onclick="logout()" class="btn-primary px-4 py-2 rounded text-sm">
                     Logout
@@ -21,280 +21,96 @@
     </div>
 </nav>
 
-<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <!-- Header Section -->
-    <div class="mb-8">
-        <div class="flex items-center space-x-4">
-            <a href="/" class="btn-secondary px-4 py-2 rounded-lg font-medium">
-                ← Back to Library
-            </a>
-            <div>
-                <h2 class="text-3xl font-bold" style="color: var(--text-primary)">Admin Dashboard</h2>
-                <p style="color: var(--text-secondary)">Manage your account settings and library preferences</p>
-            </div>
+<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
+    <!-- Sidebar -->
+    <aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
+        <div class="p-6">
+            <h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
+            <nav class="space-y-2">
+                <a href="/admin" class="block px-4 py-2 rounded-lg {{if eq .CurrentPage "dashboard"}}bg-accent text-bg-primary{{else}}hover:opacity-80{{end}}" style="color: var(--text-primary)">
+                    🏠 Dashboard
+                </a>
+                <a href="/admin/profile" class="block px-4 py-2 rounded-lg {{if eq .CurrentPage "profile"}}bg-accent text-bg-primary{{else}}hover:opacity-80{{end}}" style="color: var(--text-primary)">
+                    👤 Profile Settings
+                </a>
+                <a href="/admin/library" class="block px-4 py-2 rounded-lg {{if eq .CurrentPage "library"}}bg-accent text-bg-primary{{else}}hover:opacity-80{{end}}" style="color: var(--text-primary)">
+                    📚 Library Management
+                </a>
+                <a href="/admin/scanner" class="block px-4 py-2 rounded-lg {{if eq .CurrentPage "scanner"}}bg-accent text-bg-primary{{else}}hover:opacity-80{{end}}" style="color: var(--text-primary)">
+                    🔍 Scanner Settings
+                </a>
+            </nav>
         </div>
-    </div>
+    </aside>
 
-    <!-- Admin Sections -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <!-- User Preferences -->
-        <div class="space-y-6">
-            <h3 class="text-2xl font-semibold" style="color: var(--text-primary)">User Preferences</h3>
+    <!-- Main Content -->
+    <main class="flex-1 p-8">
+        <div class="max-w-4xl">
+            {{if eq .CurrentPage "dashboard"}}
+                <!-- Dashboard Overview -->
+                <div class="mb-8">
+                    <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Dashboard</h1>
+                    <p style="color: var(--text-secondary)">Overview of your Bookmann library and settings</p>
+                </div>
 
-            <!-- Update Username -->
-            <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-                <h4 class="text-lg font-medium mb-4" style="color: var(--text-primary)">Username</h4>
-                <form hx-put="/api/user/username" hx-target="#username-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3">
-                    <input type="text" name="username" value="{{.User.Username}}" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                    <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
-                </form>
-                <div id="username-result" class="mt-2"></div>
-            </div>
-
-            <!-- Update Email -->
-            <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-                <h4 class="text-lg font-medium mb-4" style="color: var(--text-primary)">Email Address</h4>
-                <form hx-put="/api/user/email" hx-target="#email-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3">
-                    <input type="email" name="email" value="{{.User.Email}}" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                    <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
-                </form>
-                <div id="email-result" class="mt-2"></div>
-            </div>
-
-            <!-- Update Password -->
-            <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-                <h4 class="text-lg font-medium mb-4" style="color: var(--text-primary)">Change Password</h4>
-                <form hx-put="/api/user/password" hx-target="#password-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="space-y-3">
-                    <div>
-                        <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Current Password</label>
-                        <input type="password" name="current_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                <!-- Stats Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                        <div class="flex items-center space-x-3">
+                            <div class="text-3xl">📖</div>
+                            <div>
+                                <h3 class="font-semibold" style="color: var(--text-primary)">Library</h3>
+                                <p style="color: var(--text-secondary)" class="text-sm">Manage your ebook collection</p>
+                            </div>
+                        </div>
+                        <a href="/" class="mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded">View Library</a>
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">New Password</label>
-                        <input type="password" name="new_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required minlength="6">
-                    </div>
-                    <div>
-                        <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm New Password</label>
-                        <input type="password" name="confirm_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required minlength="6">
-                    </div>
-                    <button type="submit" class="btn-primary px-4 py-2 rounded">Update Password</button>
-                </form>
-                <div id="password-result" class="mt-2"></div>
-            </div>
 
-            <!-- Theme Settings -->
-            <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-                <h4 class="text-lg font-medium mb-4" style="color: var(--text-primary)">Theme</h4>
-                <form hx-put="/api/auth/theme" hx-target="#theme-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3">
-                    <select name="theme" id="theme-select" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
-                        <option value="tokyo-night">Tokyo Night</option>
-                        <option value="dracula">Dracula</option>
-                        <option value="nord">Nord</option>
-                        <option value="solarized-dark">Solarized Dark</option>
-                        <option value="monokai">Monokai</option>
-                        <option value="one-dark-pro">One Dark Pro</option>
-                        <option value="material-dark">Material Dark</option>
-                        <option value="catppuccin-mocha">Catppuccin Mocha</option>
-                        <option value="catppuccin-macchiato">Catppuccin Macchiato</option>
-                        <option value="catppuccin-frappe">Catppuccin Frappé</option>
-                        <option value="catppuccin-latte">Catppuccin Latte</option>
-                    </select>
-                    <button type="submit" class="btn-primary px-4 py-2 rounded">Update Theme</button>
-                </form>
-                <div id="theme-result" class="mt-2"></div>
-            </div>
+                    <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                        <div class="flex items-center space-x-3">
+                            <div class="text-3xl">⚙️</div>
+                            <div>
+                                <h3 class="font-semibold" style="color: var(--text-primary)">Settings</h3>
+                                <p style="color: var(--text-secondary)" class="text-sm">Configure your preferences</p>
+                            </div>
+                        </div>
+                        <a href="/admin/profile" class="mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded">Manage Settings</a>
+                    </div>
+
+                    <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                        <div class="flex items-center space-x-3">
+                            <div class="text-3xl">🔍</div>
+                            <div>
+                                <h3 class="font-semibold" style="color: var(--text-primary)">Scanner</h3>
+                                <p style="color: var(--text-secondary)" class="text-sm">Library scanning options</p>
+                            </div>
+                        </div>
+                        <a href="/admin/scanner" class="mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded">Configure Scanner</a>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                    <h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Quick Actions</h3>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <button onclick="quickScan()" class="btn-primary p-4 rounded-lg text-left">
+                            <div class="font-medium">Scan Library</div>
+                            <div style="color: var(--text-secondary)" class="text-sm">Find new ebooks in your folders</div>
+                        </button>
+                        <a href="/admin/library" class="btn-secondary p-4 rounded-lg text-left block">
+                            <div class="font-medium">Manage Folders</div>
+                            <div style="color: var(--text-secondary)" class="text-sm">Add or remove scan directories</div>
+                        </a>
+                    </div>
+                </div>
+            {{end}}
         </div>
-
-        <!-- Library Preferences -->
-        <div class="space-y-6">
-            <h3 class="text-2xl font-semibold" style="color: var(--text-primary)">Library Preferences</h3>
-
-            <!-- Ebook Folders Management -->
-            <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-                <h4 class="text-lg font-medium mb-4" style="color: var(--text-primary)">Ebook Folders</h4>
-                <p style="color: var(--text-secondary)" class="mb-4 text-sm">Manage the folders where Bookmann scans for ebooks</p>
-
-                <!-- Add New Folder -->
-                <div class="mb-4">
-                    <form hx-post="/api/auth/ebook-folders" hx-target="#folders-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-2">
-                        <input type="text" name="folder_path" placeholder="/path/to/ebooks" class="flex-1 px-3 py-2 border rounded text-sm" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                        <button type="submit" class="btn-primary px-3 py-2 rounded text-sm">Add Folder</button>
-                    </form>
-                </div>
-
-                <!-- Current Folders List -->
-                <div id="folders-list" class="space-y-2">
-                    <!-- Folders will be loaded here -->
-                </div>
-
-                <div id="folders-result" class="mt-2"></div>
-            </div>
-
-            <!-- Scan Settings -->
-            <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-                <h4 class="text-lg font-medium mb-4" style="color: var(--text-primary)">Scan Settings</h4>
-
-                <!-- Auto Scan Toggle -->
-                <div class="mb-4">
-                    <label class="flex items-center space-x-3">
-                        <input type="checkbox" id="auto-scan-toggle" class="rounded" onchange="toggleAutoScan()">
-                        <span style="color: var(--text-primary)">Enable automatic scanning</span>
-                    </label>
-                    <p style="color: var(--text-secondary)" class="text-sm mt-1">Automatically scan folders for new ebooks</p>
-                </div>
-
-                <!-- Scan Frequency -->
-                <div class="mb-4">
-                    <label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Scan Frequency</label>
-                    <select id="scan-frequency" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" onchange="updateScanSettings()">
-                        <option value="15">Every 15 minutes</option>
-                        <option value="30">Every 30 minutes</option>
-                        <option value="60">Every hour</option>
-                        <option value="240">Every 4 hours</option>
-                        <option value="720">Every 12 hours</option>
-                        <option value="1440">Daily</option>
-                    </select>
-                </div>
-
-                <!-- Manual Scan Button -->
-                <div>
-                    <button onclick="manualScan()" class="btn-secondary px-4 py-2 rounded">Scan Now</button>
-                    <p style="color: var(--text-secondary)" class="text-sm mt-1">Manually scan all configured folders</p>
-                </div>
-
-                <div id="scan-result" class="mt-2"></div>
-            </div>
-
-            <!-- Danger Zone -->
-            <div class="card p-6 rounded-lg border border-red-500" style="background-color: var(--bg-secondary);">
-                <h3 class="text-xl font-semibold mb-4 text-red-500">Danger Zone</h3>
-                <div class="border-t border-red-500 pt-4">
-                    <h4 class="text-lg font-medium mb-2" style="color: var(--text-primary)">Delete Account</h4>
-                    <p style="color: var(--text-secondary)" class="mb-4 text-sm">
-                        Once you delete your account, there is no going back. Please be certain.
-                    </p>
-                    <button onclick="deleteAccount()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded font-medium">
-                        Delete Account
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
+    </main>
 </div>
 
 <script>
-// Load user data on page load
-document.addEventListener('DOMContentLoaded', function() {
-    loadTheme();
-    loadUserTheme();
-    loadFolders();
-    loadScanSettings();
-});
-
-// Theme management
-function loadUserTheme() {
-    const token = localStorage.getItem('token');
-    if (token) {
-        fetch('/api/auth/profile', {
-            headers: { 'Authorization': 'Bearer ' + token }
-        }).then(res => res.json()).then(data => {
-            if (data.theme) {
-                document.getElementById('theme-select').value = data.theme;
-                applyTheme(data.theme);
-            }
-        }).catch(() => {});
-    }
-}
-
-// Folder management
-function loadFolders() {
-    fetch('/api/auth/ebook-folders', {
-        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
-    }).then(res => res.json()).then(data => {
-        renderFolders(data);
-    }).catch(err => console.error('Error loading folders:', err));
-}
-
-function renderFolders(folders) {
-    const container = document.getElementById('folders-list');
-    container.innerHTML = '';
-
-    if (folders.length === 0) {
-        container.innerHTML = '<p style="color: var(--text-secondary)" class="text-sm italic">No folders configured</p>';
-        return;
-    }
-
-    folders.forEach(folder => {
-        const folderDiv = document.createElement('div');
-        folderDiv.className = 'flex items-center justify-between p-2 border rounded' style="border-color: var(--border); background-color: var(--bg-primary)";
-        folderDiv.innerHTML = `
-            <span style="color: var(--text-primary)" class="text-sm font-mono">${folder.folder_path}</span>
-            <button onclick="removeFolder('${folder.folder_path}')" class="text-red-500 hover:text-red-700 text-sm">
-                Remove
-            </button>
-        `;
-        container.appendChild(folderDiv);
-    });
-}
-
-function removeFolder(folderPath) {
-    if (confirm(`Remove folder: ${folderPath}?`)) {
-        fetch(`/api/auth/ebook-folders/${encodeURIComponent(folderPath)}`, {
-            method: 'DELETE',
-            headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
-        }).then(() => {
-            loadFolders();
-        }).catch(err => console.error('Error removing folder:', err));
-    }
-}
-
-// Scan settings (placeholder for now)
-function loadScanSettings() {
-    fetch('/api/library/scan-settings', {
-        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
-    }).then(res => res.json()).then(data => {
-        document.getElementById('auto-scan-toggle').checked = data.auto_scan_enabled;
-        document.getElementById('scan-frequency').value = data.scan_frequency_minutes;
-    }).catch(err => {
-        console.error('Error loading scan settings:', err);
-        // Fall back to defaults
-        document.getElementById('auto-scan-toggle').checked = true;
-        document.getElementById('scan-frequency').value = '60';
-    });
-}
-
-function toggleAutoScan() {
-    // TODO: Implement auto scan toggle
-    console.log('Auto scan toggled');
-}
-
-function updateScanSettings() {
-    const scanFrequency = parseInt(document.getElementById('scan-frequency').value);
-    const autoScanEnabled = document.getElementById('auto-scan-toggle').checked;
-
-    fetch('/api/library/scan-settings', {
-        method: 'PUT',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + localStorage.getItem('token')
-        },
-        body: JSON.stringify({
-            scan_frequency_minutes: scanFrequency,
-            auto_scan_enabled: autoScanEnabled
-        })
-    }).then(res => res.json()).then(data => {
-        // Show success message briefly
-        console.log('Scan settings updated:', data.message);
-    }).catch(err => {
-        console.error('Error updating scan settings:', err);
-    });
-}
-
-function manualScan() {
-    // Get folder paths from the current folders list
-    const folderElements = document.querySelectorAll('#folders-list .font-mono');
-    const folderPaths = Array.from(folderElements).map(el => el.textContent.trim());
-
+// Quick scan from dashboard
+function quickScan() {
     fetch('/api/scanner/scan', {
         method: 'POST',
         headers: {
@@ -302,44 +118,26 @@ function manualScan() {
             'Authorization': 'Bearer ' + localStorage.getItem('token')
         },
         body: JSON.stringify({
-            folder_paths: folderPaths
+            folder_paths: [] // Will scan all configured folders
         })
     }).then(res => res.json()).then(data => {
-        document.getElementById('scan-result').innerHTML = `<div style="color: var(--accent)">${data.message || 'Scan completed'}</div>`;
+        alert(data.message || 'Scan completed successfully!');
     }).catch(err => {
-        document.getElementById('scan-result').innerHTML = `<div style="color: #ef4444">Scan failed</div>`;
         console.error('Scan error:', err);
+        alert('Scan failed. Please check your folder configuration.');
     });
 }
 
-// Account deletion
-function deleteAccount() {
-    if (confirm('Are you absolutely sure you want to delete your account? This action cannot be undone and will permanently delete all your ebooks and data.')) {
-        fetch('/api/user/account', {
-            method: 'DELETE',
-            headers: {
-                'Authorization': 'Bearer ' + localStorage.getItem('token')
-            }
-        }).then(response => {
-            if (response.ok) {
-                localStorage.removeItem('token');
-                localStorage.removeItem('user');
-                window.location.href = '/';
-            } else {
-                alert('Error deleting account. Please try again.');
-            }
-        }).catch(error => {
-            console.error('Error deleting account:', error);
-            alert('Error deleting account. Please try again.');
-        });
-    }
-}
-
 // Logout
 function logout() {
     localStorage.removeItem('token');
     localStorage.removeItem('user');
     window.location.href = '/';
 }
+
+// Load theme on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadTheme();
+});
 </script>
 {{end}}
\ No newline at end of file
diff --git a/templates/admin_library.html b/templates/admin_library.html
new file mode 100644
index 0000000..9b44be8
--- /dev/null
+++ b/templates/admin_library.html
@@ -0,0 +1,303 @@
+{{template "base.html" .}}
+
+{{define "title"}}Library Management - Bookmann{{end}}
+
+{{define "content"}}
+<!-- Navigation Header -->
+<nav class="border-b" style="border-color: var(--border); background-color: var(--bg-secondary)">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16">
+            <div class="flex items-center">
+                <h1 class="text-xl font-bold" style="color: var(--text-primary)">📚 Bookmann</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Library</a>
+                <span style="color: var(--text-secondary)">Welcome, {{.User.Username}}!</span>
+                <button onclick="logout()" class="btn-primary px-4 py-2 rounded text-sm">
+                    Logout
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
+    <!-- Sidebar -->
+    <aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
+        <div class="p-6">
+            <h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
+            <nav class="space-y-2">
+                <a href="/admin" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
+                    🏠 Dashboard
+                </a>
+                <a href="/admin/profile" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
+                    👤 Profile Settings
+                </a>
+                <a href="/admin/library" class="block px-4 py-2 rounded-lg bg-accent text-bg-primary" style="color: var(--text-primary)">
+                    📚 Library Management
+                </a>
+            </nav>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 p-8">
+        <div class="max-w-4xl">
+            <!-- Header -->
+            <div class="mb-8">
+                <div class="flex items-center space-x-4 mb-4">
+                    <a href="/admin" class="btn-secondary px-4 py-2 rounded-lg font-medium">
+                        ← Back to Dashboard
+                    </a>
+                </div>
+                <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Library Management</h1>
+                <p style="color: var(--text-secondary)">Configure your ebook folders and scanning preferences</p>
+            </div>
+
+            <!-- Library Management Sections -->
+            <div class="space-y-8">
+                <!-- Ebook Folders Management -->
+                <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                    <h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">📁 Ebook Folders</h3>
+                    <p style="color: var(--text-secondary)" class="mb-6">Manage the directories where Bookmann scans for ebooks. Supported formats: EPUB, PDF, MOBI, AZW3, FB2, TXT</p>
+
+                    <!-- Add New Folder -->
+                    <div class="mb-6">
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Add Folder</h4>
+                        <form hx-post="/api/auth/ebook-folders" hx-target="#folders-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3">
+                            <input type="text" name="folder_path" placeholder="/home/user/ebooks" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                            <button type="submit" class="btn-primary px-6 py-2 rounded">Add Folder</button>
+                        </form>
+                        <div id="folders-result" class="mt-2"></div>
+                    </div>
+
+                    <!-- Current Folders List -->
+                    <div>
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Configured Folders</h4>
+                        <div id="folders-list" class="space-y-3">
+                            <!-- Folders will be loaded here -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Scan Settings -->
+                <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                    <h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">🔍 Scan Settings</h3>
+                    <p style="color: var(--text-secondary)" class="mb-6">Configure how and when Bookmann scans your folders for new ebooks</p>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <!-- Auto Scan Toggle -->
+                        <div>
+                            <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Automatic Scanning</h4>
+                            <label class="flex items-center space-x-3 p-3 border rounded" style="border-color: var(--border); background-color: var(--bg-primary)">
+                                <input type="checkbox" id="auto-scan-toggle" class="rounded" onchange="toggleAutoScan()">
+                                <div>
+                                    <span style="color: var(--text-primary)">Enable automatic scanning</span>
+                                    <p style="color: var(--text-secondary)" class="text-sm">Automatically scan folders for new ebooks</p>
+                                </div>
+                            </label>
+                        </div>
+
+                        <!-- Scan Frequency -->
+                        <div>
+                            <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Scan Frequency</h4>
+                            <select id="scan-frequency" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" onchange="updateScanSettings()">
+                                <option value="15">Every 15 minutes</option>
+                                <option value="30">Every 30 minutes</option>
+                                <option value="60">Every hour</option>
+                                <option value="240">Every 4 hours</option>
+                                <option value="720">Every 12 hours</option>
+                                <option value="1440">Daily</option>
+                            </select>
+                            <p style="color: var(--text-secondary)" class="text-sm mt-1">How often to scan when automatic scanning is enabled</p>
+                        </div>
+                    </div>
+
+                    <!-- Manual Scan -->
+                    <div class="mt-6 pt-6 border-t" style="border-color: var(--border)">
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Manual Scan</h4>
+                        <div class="flex items-center space-x-4">
+                            <button onclick="manualScan()" class="btn-secondary px-6 py-2 rounded">Scan Now</button>
+                            <span style="color: var(--text-secondary)" class="text-sm">Manually scan all configured folders immediately</span>
+                        </div>
+                        <div id="scan-result" class="mt-2"></div>
+                    </div>
+                </div>
+
+                <!-- Library Statistics -->
+                <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                    <h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">📊 Library Statistics</h3>
+                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                        <div class="text-center p-4 border rounded" style="border-color: var(--border); background-color: var(--bg-primary)">
+                            <div class="text-2xl font-bold" style="color: var(--text-primary)" id="folders-count">-</div>
+                            <div style="color: var(--text-secondary)">Folders</div>
+                        </div>
+                        <div class="text-center p-4 border rounded" style="border-color: var(--border); background-color: var(--bg-primary)">
+                            <div class="text-2xl font-bold" style="color: var(--text-primary)" id="books-count">-</div>
+                            <div style="color: var(--text-secondary)">Books</div>
+                        </div>
+                        <div class="text-center p-4 border rounded" style="border-color: var(--border); background-color: var(--bg-primary)">
+                            <div class="text-2xl font-bold" style="color: var(--text-primary)" id="last-scan">-</div>
+                            <div style="color: var(--text-secondary)">Last Scan</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<script>
+// Load data on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadTheme();
+    loadFolders();
+    loadScanSettings();
+    loadStats();
+});
+
+// Folder management
+function loadFolders() {
+    fetch('/api/auth/ebook-folders', {
+        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+    }).then(res => res.json()).then(data => {
+        renderFolders(data);
+        updateFolderCount(data.length);
+    }).catch(err => console.error('Error loading folders:', err));
+}
+
+function renderFolders(folders) {
+    const container = document.getElementById('folders-list');
+    container.innerHTML = '';
+
+    if (folders.length === 0) {
+        container.innerHTML = `
+            <div class="text-center py-8" style="color: var(--text-secondary)">
+                <div class="text-4xl mb-3">📁</div>
+                <p>No folders configured yet</p>
+                <p class="text-sm">Add a folder above to start building your library</p>
+            </div>
+        `;
+        return;
+    }
+
+    folders.forEach(folder => {
+        const folderDiv = document.createElement('div');
+        folderDiv.className = 'flex items-center justify-between p-4 border rounded' style="border-color: var(--border); background-color: var(--bg-primary)";
+        folderDiv.innerHTML = `
+            <div class="flex-1">
+                <div style="color: var(--text-primary)" class="font-medium font-mono text-sm break-all">${folder.folder_path}</div>
+                <div style="color: var(--text-secondary)" class="text-xs mt-1">Added ${new Date(folder.created_at).toLocaleDateString()}</div>
+            </div>
+            <button onclick="removeFolder('${folder.folder_path}')" class="ml-4 text-red-500 hover:text-red-700 px-3 py-1 border border-red-500 rounded text-sm hover:bg-red-50">
+                Remove
+            </button>
+        `;
+        container.appendChild(folderDiv);
+    });
+}
+
+function removeFolder(folderPath) {
+    if (confirm(`Remove folder: ${folderPath}?\n\nThis will not delete any files, but ebooks in this folder will no longer be automatically discovered.`)) {
+        fetch(`/api/auth/ebook-folders/${encodeURIComponent(folderPath)}`, {
+            method: 'DELETE',
+            headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+        }).then(() => {
+            loadFolders();
+        }).catch(err => console.error('Error removing folder:', err));
+    }
+}
+
+function updateFolderCount(count) {
+    document.getElementById('folders-count').textContent = count;
+}
+
+// Scan settings
+function loadScanSettings() {
+    fetch('/api/library/scan-settings', {
+        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+    }).then(res => res.json()).then(data => {
+        document.getElementById('auto-scan-toggle').checked = data.auto_scan_enabled;
+        document.getElementById('scan-frequency').value = data.scan_frequency_minutes;
+    }).catch(err => {
+        console.error('Error loading scan settings:', err);
+        // Fall back to defaults
+        document.getElementById('auto-scan-toggle').checked = true;
+        document.getElementById('scan-frequency').value = '60';
+    });
+}
+
+function toggleAutoScan() {
+    updateScanSettings();
+}
+
+function updateScanSettings() {
+    const scanFrequency = parseInt(document.getElementById('scan-frequency').value);
+    const autoScanEnabled = document.getElementById('auto-scan-toggle').checked;
+
+    fetch('/api/library/scan-settings', {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + localStorage.getItem('token')
+        },
+        body: JSON.stringify({
+            scan_frequency_minutes: scanFrequency,
+            auto_scan_enabled: autoScanEnabled
+        })
+    }).catch(err => {
+        console.error('Error updating scan settings:', err);
+    });
+}
+
+function manualScan() {
+    // Get folder paths from the current folders list
+    fetch('/api/auth/ebook-folders', {
+        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+    }).then(res => res.json()).then(folders => {
+        const folderPaths = folders.map(f => f.folder_path);
+
+        return fetch('/api/scanner/scan', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            },
+            body: JSON.stringify({
+                folder_paths: folderPaths
+            })
+        });
+    }).then(res => res.json()).then(data => {
+        document.getElementById('scan-result').innerHTML = `<div style="color: var(--accent)">✓ ${data.message || 'Scan completed successfully'}</div>`;
+        loadStats(); // Refresh stats after scan
+    }).catch(err => {
+        document.getElementById('scan-result').innerHTML = `<div style="color: #ef4444">✗ Scan failed</div>`;
+        console.error('Scan error:', err);
+    });
+}
+
+// Statistics
+function loadStats() {
+    // TODO: Implement actual stats loading
+    // For now, just update book count when we have folder info
+    fetch('/api/ebooks?limit=1', {
+        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+    }).then(() => {
+        // We could get total count from a header or separate endpoint
+        // For now, just show placeholder
+        document.getElementById('books-count').textContent = '?';
+        document.getElementById('last-scan').textContent = 'Never';
+    }).catch(() => {
+        document.getElementById('books-count').textContent = '0';
+        document.getElementById('last-scan').textContent = 'Never';
+    });
+}
+
+// Logout
+function logout() {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+}
+</script>
+{{end}}
\ No newline at end of file
diff --git a/templates/admin_profile.html b/templates/admin_profile.html
new file mode 100644
index 0000000..fd7ed89
--- /dev/null
+++ b/templates/admin_profile.html
@@ -0,0 +1,198 @@
+{{template "base.html" .}}
+
+{{define "title"}}Profile Settings - Bookmann{{end}}
+
+{{define "content"}}
+<!-- Navigation Header -->
+<nav class="border-b" style="border-color: var(--border); background-color: var(--bg-secondary)">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16">
+            <div class="flex items-center">
+                <h1 class="text-xl font-bold" style="color: var(--text-primary)">📚 Bookmann</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <a href="/" class="px-3 py-2 text-sm hover:opacity-80" style="color: var(--text-secondary)">Library</a>
+                <span style="color: var(--text-secondary)">Welcome, {{.User.Username}}!</span>
+                <button onclick="logout()" class="btn-primary px-4 py-2 rounded text-sm">
+                    Logout
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
+    <!-- Sidebar -->
+    <aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
+        <div class="p-6">
+            <h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
+            <nav class="space-y-2">
+                <a href="/admin" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
+                    🏠 Dashboard
+                </a>
+                <a href="/admin/profile" class="block px-4 py-2 rounded-lg bg-accent text-bg-primary" style="color: var(--text-primary)">
+                    👤 Profile Settings
+                </a>
+                <a href="/admin/library" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
+                    📚 Library Management
+                </a>
+            </nav>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 p-8">
+        <div class="max-w-4xl">
+            <!-- Header -->
+            <div class="mb-8">
+                <div class="flex items-center space-x-4 mb-4">
+                    <a href="/admin" class="btn-secondary px-4 py-2 rounded-lg font-medium">
+                        ← Back to Dashboard
+                    </a>
+                </div>
+                <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Profile Settings</h1>
+                <p style="color: var(--text-secondary)">Manage your account information and preferences</p>
+            </div>
+
+            <!-- Profile Settings -->
+            <div class="space-y-8">
+                <!-- Account Information -->
+                <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                    <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Account Information</h3>
+
+                    <!-- Update Username -->
+                    <div class="mb-6">
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Username</h4>
+                        <form hx-put="/api/user/username" hx-target="#username-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3 max-w-md">
+                            <input type="text" name="username" value="{{.User.Username}}" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                            <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
+                        </form>
+                        <div id="username-result" class="mt-2"></div>
+                    </div>
+
+                    <!-- Update Email -->
+                    <div class="mb-6">
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Email Address</h4>
+                        <form hx-put="/api/user/email" hx-target="#email-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3 max-w-md">
+                            <input type="email" name="email" value="{{.User.Email}}" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                            <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
+                        </form>
+                        <div id="email-result" class="mt-2"></div>
+                    </div>
+
+                    <!-- Update Password -->
+                    <div>
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Change Password</h4>
+                        <form hx-put="/api/user/password" hx-target="#password-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="space-y-4 max-w-md">
+                            <div>
+                                <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Current Password</label>
+                                <input type="password" name="current_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">New Password</label>
+                                <input type="password" name="new_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required minlength="6">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm New Password</label>
+                                <input type="password" name="confirm_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required minlength="6">
+                            </div>
+                            <button type="submit" class="btn-primary px-4 py-2 rounded">Update Password</button>
+                        </form>
+                        <div id="password-result" class="mt-2"></div>
+                    </div>
+                </div>
+
+                <!-- Appearance Settings -->
+                <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                    <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Appearance</h3>
+
+                    <div>
+                        <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Theme</h4>
+                        <form hx-put="/api/auth/theme" hx-target="#theme-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3 max-w-md">
+                            <select name="theme" id="theme-select" class="flex-1 px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
+                                <option value="tokyo-night">Tokyo Night</option>
+                                <option value="dracula">Dracula</option>
+                                <option value="nord">Nord</option>
+                                <option value="solarized-dark">Solarized Dark</option>
+                                <option value="monokai">Monokai</option>
+                                <option value="one-dark-pro">One Dark Pro</option>
+                                <option value="material-dark">Material Dark</option>
+                                <option value="catppuccin-mocha">Catppuccin Mocha</option>
+                                <option value="catppuccin-macchiato">Catppuccin Macchiato</option>
+                                <option value="catppuccin-frappe">Catppuccin Frappé</option>
+                                <option value="catppuccin-latte">Catppuccin Latte</option>
+                            </select>
+                            <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
+                        </form>
+                        <div id="theme-result" class="mt-2"></div>
+                    </div>
+                </div>
+
+                <!-- Danger Zone -->
+                <div class="card p-6 rounded-lg border border-red-500" style="background-color: var(--bg-secondary);">
+                    <h3 class="text-xl font-semibold mb-4 text-red-500">Danger Zone</h3>
+                    <div class="border-t border-red-500 pt-4">
+                        <h4 class="text-lg font-medium mb-2" style="color: var(--text-primary)">Delete Account</h4>
+                        <p style="color: var(--text-secondary)" class="mb-4 text-sm">
+                            Once you delete your account, there is no going back. Please be certain.
+                        </p>
+                        <button onclick="deleteAccount()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded font-medium">
+                            Delete Account
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
+
+<script>
+// Load user theme on page load
+document.addEventListener('DOMContentLoaded', function() {
+    loadTheme();
+    loadUserTheme();
+});
+
+function loadUserTheme() {
+    const token = localStorage.getItem('token');
+    if (token) {
+        fetch('/api/auth/profile', {
+            headers: { 'Authorization': 'Bearer ' + token }
+        }).then(res => res.json()).then(data => {
+            if (data.theme) {
+                document.getElementById('theme-select').value = data.theme;
+                applyTheme(data.theme);
+            }
+        }).catch(() => {});
+    }
+}
+
+function deleteAccount() {
+    if (confirm('Are you absolutely sure you want to delete your account? This action cannot be undone and will permanently delete all your ebooks and data.')) {
+        fetch('/api/user/account', {
+            method: 'DELETE',
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            }
+        }).then(response => {
+            if (response.ok) {
+                localStorage.removeItem('token');
+                localStorage.removeItem('user');
+                window.location.href = '/';
+            } else {
+                alert('Error deleting account. Please try again.');
+            }
+        }).catch(error => {
+            console.error('Error deleting account:', error);
+            alert('Error deleting account. Please try again.');
+        });
+    }
+}
+
+function logout() {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+}
+</script>
+{{end}}
\ No newline at end of file