From 6d3db17cf5ee9e9d8e6b550d869553681d464770 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Wed, 28 Jan 2026 11:03:17 -0500
Subject: [PATCH] feat: update frontend for library system

- Redesign dashboard to show library selection first
- Add media browsing within selected library
- Implement library management interface
- Add user visibility controls for libraries
- Support library type icons and metadata
- Add create library modal with type selection
- Include folder management for each library
- Implement user-specific library access controls

Replaces single ebook library with flexible multi-library system
---
 templates/admin_library.templ | 319 ++++++++++++++++++++++++++++------
 templates/dashboard.templ     | 230 ++++++++++++++++++------
 2 files changed, 440 insertions(+), 109 deletions(-)

diff --git a/templates/admin_library.templ b/templates/admin_library.templ
index 064d46b..e633da1 100644
--- a/templates/admin_library.templ
+++ b/templates/admin_library.templ
@@ -79,93 +79,295 @@ templ AdminLibrary(user User) {
             </aside>
 
             <main class="flex-1 p-8">
-                <div class="max-w-4xl">
+                <div class="max-w-6xl">
                     <div class="mb-8">
-                        <div class="flex items-center space-x-4 mb-4">
+                        <div class="flex items-center justify-between mb-4">
                             <a href="/admin" class="btn-secondary px-4 py-2 rounded-lg font-medium">
                                 ← Back to Dashboard
                             </a>
+                            <button onclick="showCreateLibraryModal()" class="btn-primary px-4 py-2 rounded-lg font-medium">
+                                + Create Library
+                            </button>
                         </div>
                         <h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Library Management</h1>
-                        <p style="color: var(--text-secondary)">Configure library scanning settings and manage ebook folders</p>
+                        <p style="color: var(--text-secondary)">Manage libraries and configure media scanning</p>
                     </div>
 
-                    <div class="space-y-8">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                        <!-- Libraries Section -->
                         <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)">Ebook Folders</h3>
-                            <p style="color: var(--text-secondary)" class="mb-4">Manage folders that Bookmann scans for ebooks</p>
+                            <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Libraries</h3>
+                            <p style="color: var(--text-secondary)" class="mb-4">Manage media libraries and their folders</p>
 
-                            <div id="folders-list" class="space-y-3 mb-6">
-                                <!-- Folders will be loaded here -->
+                            <div id="libraries-list" class="space-y-3 mb-6">
+                                <!-- Libraries will be loaded here -->
                             </div>
-
-                            <form hx-post="/api/auth/ebook-folders" hx-target="#add-folder-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3">
-                                <input type="text" name="folder_path" placeholder="/path/to/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-4 py-2 rounded">Add Folder</button>
-                            </form>
-                            <div id="add-folder-result" class="mt-2"></div>
                         </div>
 
+                        <!-- User Library Visibility Section -->
                         <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)">Scan Settings</h3>
+                            <h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Library Visibility</h3>
+                            <p style="color: var(--text-secondary)" class="mb-4">Control which libraries are visible to users</p>
 
-                            <div class="mb-6">
-                                <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Scan Frequency</h4>
-                                <form hx-put="/api/library/scan-settings" hx-target="#scan-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex space-x-3 max-w-md">
-                                    <select name="scan_frequency_minutes" 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="15">Every 15 minutes</option>
-                                        <option value="30">Every 30 minutes</option>
-                                        <option value="60">Every hour</option>
-                                        <option value="120">Every 2 hours</option>
-                                        <option value="240">Every 4 hours</option>
-                                    </select>
-                                    <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
-                                </form>
-                                <div id="scan-result" class="mt-2"></div>
+                            <div id="visibility-controls" class="space-y-4">
+                                <!-- Visibility controls will be loaded here -->
                             </div>
+                        </div>
+                    </div>
 
-                            <div>
-                                <h4 class="text-lg font-medium mb-3" style="color: var(--text-primary)">Auto Scan</h4>
-                                <form hx-put="/api/library/scan-settings" hx-target="#auto-scan-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' class="flex items-center space-x-3">
-                                    <input type="checkbox" name="auto_scan_enabled" id="auto-scan" class="w-4 h-4" style="background-color: var(--bg-primary); border-color: var(--border)">
-                                    <label for="auto-scan" style="color: var(--text-secondary)">Enable automatic library scanning</label>
-                                    <button type="submit" class="btn-primary px-4 py-2 rounded">Update</button>
-                                </form>
-                                <div id="auto-scan-result" class="mt-2"></div>
-                            </div>
+                    <!-- User Visibility Management -->
+                    <div class="mt-8 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)">User Library Access</h3>
+                        <p style="color: var(--text-secondary)" class="mb-4">Manage individual user access to specific libraries</p>
+
+                        <div class="mb-4">
+                            <select id="user-select" onchange="loadUserVisibility()" class="px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
+                                <option value="">Select a user...</option>
+                            </select>
+                        </div>
+
+                        <div id="user-libraries" class="space-y-3">
+                            <!-- User library checkboxes will be loaded here -->
                         </div>
                     </div>
                 </div>
             </main>
         </div>
 
+        <!-- Create Library Modal -->
+        <div id="create-library-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
+            <div class="card p-6 rounded-lg border max-w-md w-full mx-4" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                <h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Create Library</h3>
+                <form hx-post="/api/libraries" hx-target="#create-result" hx-swap="innerHTML" hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}' onsubmit="this.reset();">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Library Name</label>
+                        <input type="text" name="name" placeholder="My Ebook Library" 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 class="mb-4">
+                        <label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Description</label>
+                        <textarea name="description" placeholder="Optional description" rows="3" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"></textarea>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Library Type</label>
+                        <select name="type" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                            <option value="ebooks">📚 Ebooks</option>
+                            <option value="comics">📖 Comics</option>
+                            <option value="manga">🗾 Manga</option>
+                        </select>
+                    </div>
+                    <div class="flex justify-end space-x-3">
+                        <button type="button" onclick="hideCreateLibraryModal()" class="btn-secondary px-4 py-2 rounded">Cancel</button>
+                        <button type="submit" class="btn-primary px-4 py-2 rounded">Create</button>
+                    </div>
+                </form>
+                <div id="create-result" class="mt-2"></div>
+            </div>
+        </div>
+
         <script>
-            function loadFolders() {
-                fetch('/api/auth/ebook-folders', {
+            let libraries = [];
+            let users = [];
+            let libraryTypes = [];
+
+            function loadLibraries() {
+                fetch('/api/libraries', {
                     headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                 })
                 .then(response => response.json())
-                .then(folders => {
-                    const container = document.getElementById('folders-list');
-                    container.innerHTML = folders.map(folder =>
-                        '<div class="flex items-center justify-between p-3 border rounded" style="background-color: var(--bg-primary); border-color: var(--border)">' +
-                        '<span style="color: var(--text-primary)">' + folder.folder_path + '</span>' +
-                        '<button onclick="removeFolder(\'' + folder.id + '\')" class="text-red-500 hover:text-red-700">Remove</button>' +
-                        '</div>'
-                    ).join('');
+                .then(data => {
+                    libraries = data;
+                    renderLibraries();
                 })
-                .catch(error => console.error('Error loading folders:', error));
+                .catch(error => console.error('Error loading libraries:', error));
             }
 
-            function removeFolder(folderId) {
-                if (confirm('Remove this folder from scanning?')) {
-                    fetch('/api/auth/ebook-folders/' + folderId, {
+            function renderLibraries() {
+                const container = document.getElementById('libraries-list');
+                container.innerHTML = libraries.map(library => 
+                    '<div class="p-4 border rounded-lg" style="background-color: var(--bg-primary); border-color: var(--border)">' +
+                        '<div class="flex justify-between items-start mb-2">' +
+                            '<div>' +
+                                '<h4 class="font-semibold" style="color: var(--text-primary)">' + library.name + '</h4>' +
+                                '<p class="text-sm" style="color: var(--text-secondary)">' + (library.description || '') + '</p>' +
+                                '<span class="inline-block px-2 py-1 text-xs rounded" style="background-color: var(--accent); color: var(--bg-primary)">' + 
+                                    (library.type_name || library.type) + '</span>' +
+                            '</div>' +
+                            '<div class="flex space-x-2">' +
+                                '<button onclick="showLibraryFolders(\'' + library.id + '\')" class="text-xs px-2 py-1 rounded" style="background-color: var(--bg-secondary); color: var(--text-primary)">Folders</button>' +
+                                '<button onclick="editLibrary(\'' + library.id + '\')" class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: var(--bg-primary)">Edit</button>' +
+                                '<button onclick="deleteLibrary(\'' + library.id + '\')" class="text-xs px-2 py-1 rounded text-red-500">Delete</button>' +
+                            '</div>' +
+                        '</div>' +
+                        '<div id="library-folders-' + library.id + '" class="hidden mt-3 space-y-2"></div>' +
+                    '</div>'
+                ).join('');
+            }
+
+            function loadUsers() {
+                fetch('/api/auth/users', {
+                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    users = data;
+                    renderUserSelect();
+                })
+                .catch(error => console.error('Error loading users:', error));
+            }
+
+            function renderUserSelect() {
+                const select = document.getElementById('user-select');
+                select.innerHTML = '<option value="">Select a user...</option>' + 
+                    users.map(user => '<option value="' + user.id + '">' + user.username + ' (' + user.email + ')</option>').join('');
+            }
+
+            function loadUserVisibility() {
+                const userId = document.getElementById('user-select').value;
+                if (!userId) {
+                    document.getElementById('user-libraries').innerHTML = '<p style="color: var(--text-secondary)">Please select a user</p>';
+                    return;
+                }
+
+                // Load user's visible libraries
+                fetch('/api/libraries/visible', {
+                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+                })
+                .then(response => response.json())
+                .then(visibleLibraries => {
+                    const container = document.getElementById('user-libraries');
+                    const visibleIds = visibleLibraries.map(lib => lib.id);
+                    
+                    container.innerHTML = libraries.map(library => {
+                        const isVisible = visibleIds.includes(library.id);
+                        return '<label class="flex items-center space-x-3 p-2 rounded" style="background-color: var(--bg-primary);">' +
+                            '<input type="checkbox" ' + (isVisible ? 'checked' : '') + 
+                                ' onchange="setLibraryVisibility(\'' + userId + '\', \'' + library.id + '\', this.checked)" ' +
+                                'class="w-4 h-4">' +
+                            '<span style="color: var(--text-primary)">' + library.name + ' (' + library.type_name + ')</span>' +
+                        '</label>';
+                    }).join('');
+                })
+                .catch(error => console.error('Error loading user libraries:', error));
+            }
+
+            function setLibraryVisibility(userId, libraryId, isVisible) {
+                fetch('/api/libraries/visibility', {
+                    method: 'POST',
+                    headers: { 
+                        'Authorization': 'Bearer ' + localStorage.getItem('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        library_id: libraryId,
+                        is_visible: isVisible
+                    })
+                })
+                .then(response => response.json())
+                .then(() => {
+                    // Refresh visibility controls
+                    loadUserVisibility();
+                })
+                .catch(error => console.error('Error setting library visibility:', error));
+            }
+
+            function showCreateLibraryModal() {
+                document.getElementById('create-library-modal').classList.remove('hidden');
+            }
+
+            function hideCreateLibraryModal() {
+                document.getElementById('create-library-modal').classList.add('hidden');
+            }
+
+            function deleteLibrary(libraryId) {
+                const library = libraries.find(l => l.id === libraryId);
+                if (!library) return;
+                
+                if (confirm('Delete library "' + library.name + '"? This will permanently remove all associated media and cannot be undone.')) {
+                    fetch('/api/libraries/' + libraryId, {
                         method: 'DELETE',
                         headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
                     })
                     .then(response => {
-                        if (response.ok) loadFolders();
-                        else alert('Error removing folder');
+                        if (response.ok) {
+                            loadLibraries(); // Refresh
+                        } else {
+                            alert('Error deleting library');
+                        }
+                    })
+                    .catch(error => console.error('Error deleting library:', error));
+                }
+            }
+
+            function showLibraryFolders(libraryId) {
+                const container = document.getElementById('library-folders-' + libraryId);
+                const library = libraries.find(l => l.id === libraryId);
+                
+                if (container.classList.contains('hidden')) {
+                    // Load folders for this library
+                    fetch('/api/libraries/' + libraryId + '/folders', {
+                        headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
+                    })
+                    .then(response => response.json())
+                    .then(folders => {
+                        container.innerHTML = folders.map(folder => 
+                            '<div class="flex justify-between items-center p-2 rounded" style="background-color: var(--bg-secondary); border-color: var(--border)">' +
+                                '<span class="text-sm" style="color: var(--text-primary)">' + folder.folder_path + '</span>' +
+                                '<button onclick="removeLibraryFolder(\'' + libraryId + '\', \'' + folder.folder_path + '\')" ' +
+                                    'class="text-xs text-red-500">Remove</button>' +
+                            '</div>'
+                        ).join('');
+                        
+                        // Add folder input
+                        container.innerHTML += '<div class="mt-2 flex space-x-2">' +
+                            '<input type="text" id="folder-path-' + libraryId + '" placeholder="Add folder path" ' +
+                                'class="flex-1 px-2 py-1 text-sm border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">' +
+                            '<button onclick="addLibraryFolder(\'' + libraryId + '\')" ' +
+                                'class="btn-primary px-2 py-1 text-xs rounded">Add</button>' +
+                        '</div>';
+                        
+                        container.classList.remove('hidden');
+                    })
+                    .catch(error => console.error('Error loading folders:', error));
+                } else {
+                    container.classList.add('hidden');
+                }
+            }
+
+            function addLibraryFolder(libraryId) {
+                const input = document.getElementById('folder-path-' + libraryId);
+                const folderPath = input.value.trim();
+                
+                if (!folderPath) return;
+                
+                fetch('/api/libraries/' + libraryId + '/folders', {
+                    method: 'POST',
+                    headers: { 
+                        'Authorization': 'Bearer ' + localStorage.getItem('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ folder_path: folderPath })
+                })
+                .then(response => response.json())
+                .then(() => {
+                    input.value = '';
+                    showLibraryFolders(libraryId); // Refresh
+                })
+                .catch(error => console.error('Error adding folder:', error));
+            }
+
+            function removeLibraryFolder(libraryId, folderPath) {
+                if (confirm('Remove this folder from the library?')) {
+                    fetch('/api/libraries/' + libraryId + '/folders', {
+                        method: 'DELETE',
+                        headers: { 
+                            'Authorization': 'Bearer ' + localStorage.getItem('token'),
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ folder_path: folderPath })
+                    })
+                    .then(response => response.json())
+                    .then(() => {
+                        showLibraryFolders(libraryId); // Refresh
                     })
                     .catch(error => console.error('Error removing folder:', error));
                 }
@@ -177,9 +379,18 @@ templ AdminLibrary(user User) {
                 window.location.href = '/';
             }
 
+            function loadTheme() {
+                // Load saved theme if exists
+                const savedTheme = localStorage.getItem('theme');
+                if (savedTheme) {
+                    document.body.className = 'theme-' + savedTheme;
+                }
+            }
+
             document.addEventListener('DOMContentLoaded', function() {
                 loadTheme();
-                loadFolders();
+                loadLibraries();
+                loadUsers();
             });
         </script>
     </body>
diff --git a/templates/dashboard.templ b/templates/dashboard.templ
index fc7c168..1e9d003 100644
--- a/templates/dashboard.templ
+++ b/templates/dashboard.templ
@@ -95,52 +95,60 @@ templ Dashboard(user User) {
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
             <!-- Header Section -->
             <div class="mb-8">
-                <div class="flex justify-between items-center">
-                    <div>
-                        <h2 class="text-3xl font-bold" style="color: var(--text-primary)">Your Ebook Library</h2>
-                        <p style="color: var(--text-secondary)">Manage your ebook collection and reading progress</p>
+                <div>
+                    <h2 class="text-3xl font-bold" style="color: var(--text-primary)">Your Media Library</h2>
+                    <p style="color: var(--text-secondary)">Browse and manage your media collections</p>
+                </div>
+            </div>
+
+            <!-- Libraries Section -->
+            <div id="libraries-container" class="mb-8">
+                <!-- Libraries will be loaded here -->
+            </div>
+
+            <!-- Media Items Section -->
+            <div id="media-section" class="hidden">
+                <!-- Search and Filter -->
+                <div class="mb-6">
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <button onclick="backToLibraries()" class="btn-secondary px-4 py-2 rounded-lg">
+                            ← Back to Libraries
+                        </button>
+                        <input type="text" id="search-input" placeholder="Search media..." class="flex-1 px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onkeyup="filterMedia()">
+                        <select id="sort-select" class="px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="loadMediaItems()">
+                            <option value="created_at DESC">Newest First</option>
+                            <option value="title ASC">Title A-Z</option>
+                            <option value="author ASC">Author A-Z</option>
+                            <option value="created_at ASC">Oldest First</option>
+                        </select>
                     </div>
-                    <button onclick="showCreateForm()" class="btn-primary px-6 py-3 rounded-lg font-medium">
-                        + Add New Ebook
-                    </button>
                 </div>
-            </div>
 
-            <!-- Search and Filter -->
-            <div class="mb-6">
-                <div class="flex flex-col sm:flex-row gap-4">
-                    <input type="text" id="search-input" placeholder="Search ebooks..." class="flex-1 px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onkeyup="filterEbooks()">
-                    <select id="sort-select" class="px-4 py-2 border rounded-lg" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="loadEbooks()">
-                        <option value="created_at DESC">Newest First</option>
-                        <option value="title ASC">Title A-Z</option>
-                        <option value="author ASC">Author A-Z</option>
-                        <option value="created_at ASC">Oldest First</option>
-                    </select>
+                <!-- Media Grid -->
+                <div id="media-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Media items will be loaded here -->
                 </div>
             </div>
 
-            <!-- Ebooks Grid -->
-            <div id="ebooks-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Ebooks will be loaded here -->
-            </div>
-
             <!-- Loading indicator -->
             <div id="loading" class="text-center py-8" style="color: var(--text-secondary)">
-                Loading your ebooks...
+                Loading your media libraries...
             </div>
         </div>
 
         <script>
-            function loadEbooks() {
+            let libraries = [];
+            let currentLibrary = null;
+            let mediaItems = [];
+
+            function loadLibraries() {
                 const loading = document.getElementById('loading');
-                const container = document.getElementById('ebooks-container');
-
+                const librariesContainer = document.getElementById('libraries-container');
+                
                 loading.style.display = 'block';
-                container.innerHTML = '';
+                librariesContainer.innerHTML = '';
 
-                const sort = document.getElementById('sort-select').value;
-
-                fetch(`/api/ebooks?limit=12&offset=0&sort=${sort}`, {
+                fetch('/api/libraries/visible', {
                     headers: {
                         'Authorization': 'Bearer ' + localStorage.getItem('token'),
                         'Content-Type': 'application/json'
@@ -149,39 +157,132 @@ templ Dashboard(user User) {
                 .then(response => response.json())
                 .then(data => {
                     loading.style.display = 'none';
-                    renderEbooks(data);
+                    libraries = data;
+                    renderLibraries();
                 })
                 .catch(error => {
                     loading.style.display = 'none';
-                    console.error('Error loading ebooks:', error);
-                    container.innerHTML = '<div class="col-span-full text-center py-8" style="color: var(--text-secondary)">Error loading ebooks. Please try again.</div>';
+                    console.error('Error loading libraries:', error);
+                    librariesContainer.innerHTML = '<div class="text-center py-8" style="color: var(--text-secondary)">Error loading libraries. Please try again.</div>';
                 });
             }
 
-            async function renderEbooks(ebooks) {
-                const container = document.getElementById('ebooks-container');
+            function renderLibraries() {
+                const container = document.getElementById('libraries-container');
+                
+                if (libraries.length === 0) {
+                    container.innerHTML = '<div class="text-center py-8" style="color: var(--text-secondary)">No libraries available. Please contact an administrator.</div>';
+                    return;
+                }
+
+                container.innerHTML = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">' +
+                    libraries.map(library => {
+                        const icon = getLibraryIcon(library.type_name);
+                        return `<div class="card p-6 rounded-lg border hover:shadow-lg transition-shadow cursor-pointer" onclick="selectLibrary('${library.id}')" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                            <div class="text-center">
+                                <div class="text-4xl mb-3">${icon}</div>
+                                <h3 class="font-semibold text-lg mb-2" style="color: var(--text-primary)">${library.name}</h3>
+                                <p class="text-sm mb-3" style="color: var(--text-secondary)">${library.description || ''}</p>
+                                <span class="inline-block px-3 py-1 text-sm rounded" style="background-color: var(--accent); color: var(--bg-primary)">${library.type_name}</span>
+                            </div>
+                        </div>`;
+                    }).join('') +
+                '</div>';
+            }
+
+            function getLibraryIcon(typeName) {
+                switch (typeName) {
+                    case 'ebooks': return '📚';
+                    case 'comics': return '📖';
+                    case 'manga': return '🗾';
+                    default: return '📁';
+                }
+            }
+
+            function selectLibrary(libraryId) {
+                currentLibrary = libraries.find(l => l.id === libraryId);
+                if (!currentLibrary) return;
+
+                const librariesContainer = document.getElementById('libraries-container');
+                const mediaSection = document.getElementById('media-section');
+                const loading = document.getElementById('loading');
+
+                // Hide libraries, show media section
+                librariesContainer.classList.add('hidden');
+                mediaSection.classList.remove('hidden');
+                loading.style.display = 'block';
+
+                loadMediaItems();
+            }
+
+            function backToLibraries() {
+                const librariesContainer = document.getElementById('libraries-container');
+                const mediaSection = document.getElementById('media-section');
+
+                librariesContainer.classList.remove('hidden');
+                mediaSection.classList.add('hidden');
+                currentLibrary = null;
+            }
+
+            function loadMediaItems() {
+                if (!currentLibrary) return;
+
+                const loading = document.getElementById('loading');
+                const container = document.getElementById('media-container');
+
+                loading.style.display = 'block';
                 container.innerHTML = '';
 
-                for (const ebook of ebooks) {
+                const sort = document.getElementById('sort-select').value;
+
+                fetch(`/api/media-items?library_id=${currentLibrary.id}&limit=12&offset=0&sort=${sort}`, {
+                    headers: {
+                        'Authorization': 'Bearer ' + localStorage.getItem('token'),
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    loading.style.display = 'none';
+                    mediaItems = data;
+                    renderMediaItems();
+                })
+                .catch(error => {
+                    loading.style.display = 'none';
+                    console.error('Error loading media items:', error);
+                    container.innerHTML = '<div class="col-span-full text-center py-8" style="color: var(--text-secondary)">Error loading media items. Please try again.</div>';
+                });
+            }
+
+            async function renderMediaItems() {
+                const container = document.getElementById('media-container');
+                container.innerHTML = '';
+
+                if (mediaItems.length === 0) {
+                    container.innerHTML = '<div class="col-span-full text-center py-8" style="color: var(--text-secondary)">No media items found in this library.</div>';
+                    return;
+                }
+
+                for (const item of mediaItems) {
                     const card = document.createElement('div');
                     card.className = 'card p-4 rounded-lg border hover:shadow-lg transition-shadow';
                     card.style.cssText = 'background-color: var(--bg-secondary); border-color: var(--border);';
 
-                    const coverUrl = ebook.cover_image_path ? ebook.cover_image_path : '/static/placeholder-book.svg';
+                    const coverUrl = item.cover_image_path ? item.cover_image_path : '/static/placeholder-book.svg';
                     
-                    // Get user's rating for this ebook
-                    const rating = await getEbookRating(ebook.id);
-                    const ratingStars = renderRatingStars(ebook.id, rating);
+                    // Get user's rating for this media item
+                    const rating = await getMediaRating(item.id);
+                    const ratingStars = renderRatingStars(item.id, rating);
 
-                    card.innerHTML = '<div class="flex flex-col h-full"><div class="flex-1"><div class="aspect-w-3 aspect-h-4 mb-3 overflow-hidden rounded"><img src="' + coverUrl + '" alt="Cover" class="w-full h-48 object-cover rounded" onerror="this.src=\'/static/placeholder-book.svg\'"></div><h3 class="font-semibold text-lg mb-1 line-clamp-2" style="color: var(--text-primary)">' + ebook.title + '</h3>' + (ebook.author ? '<p class="text-sm mb-2" style="color: var(--text-secondary)">by ' + ebook.author + '</p>' : '') + '<div class="mb-2" id="rating-' + ebook.id + '">' + ratingStars + '</div><div class="flex justify-between items-center mt-4"><div class="flex space-x-2"><button onclick="viewEbook(\'' + ebook.id + '\')" class="px-3 py-1 text-sm border rounded hover:opacity-80" style="border-color: var(--border); color: var(--text-secondary)">View</button></div></div></div>';
+                    card.innerHTML = '<div class="flex flex-col h-full"><div class="flex-1"><div class="aspect-w-3 aspect-h-4 mb-3 overflow-hidden rounded"><img src="' + coverUrl + '" alt="Cover" class="w-full h-48 object-cover rounded" onerror="this.src=\'/static/placeholder-book.svg\'"></div><h3 class="font-semibold text-lg mb-1 line-clamp-2" style="color: var(--text-primary)">' + item.title + '</h3>' + (item.author ? '<p class="text-sm mb-2" style="color: var(--text-secondary)">by ' + item.author + '</p>' : '') + '<div class="mb-2" id="rating-' + item.id + '">' + ratingStars + '</div><div class="flex justify-between items-center mt-4"><div class="flex space-x-2"><button onclick="viewMediaItem(\'' + item.id + '\')" class="px-3 py-1 text-sm border rounded hover:opacity-80" style="border-color: var(--border); color: var(--text-secondary)">View</button></div></div></div>';
 
                     container.appendChild(card);
                 }
             }
 
-            async function getEbookRating(ebookId) {
+            async function getMediaRating(mediaId) {
                 try {
-                    const response = await fetch(`/api/ebooks/${ebookId}/rating`, {
+                    const response = await fetch(`/api/media-items/${mediaId}/rating`, {
                         headers: {
                             'Authorization': 'Bearer ' + localStorage.getItem('token'),
                             'Content-Type': 'application/json'
@@ -209,7 +310,7 @@ templ Dashboard(user User) {
                 return Math.round(fivePointRating * 2);
             }
 
-            function renderRatingStars(ebookId, currentRating) {
+            function renderRatingStars(mediaId, currentRating) {
                 const fivePointRating = convertToFivePoint(currentRating);
                 let stars = '';
                 
@@ -229,7 +330,7 @@ templ Dashboard(user User) {
                     const starClass = filled ? 'text-yellow-400' : 
                                    halfFilled ? 'text-yellow-200' : 'text-gray-400';
                     
-                    stars += `<span onclick="openRatingDialog('${ebookId}', ${currentRating})" class="cursor-pointer text-xl ${starClass} hover:text-yellow-300 transition-colors" title="Click to rate (supports half-stars)">${starHtml}</span>`;
+                    stars += `<span onclick="openRatingDialog('${mediaId}', ${currentRating})" class="cursor-pointer text-xl ${starClass} hover:text-yellow-300 transition-colors" title="Click to rate (supports half-stars)">${starHtml}</span>`;
                 }
                 
                 // Add rating text
@@ -238,9 +339,9 @@ templ Dashboard(user User) {
                 return stars;
             }
 
-            function openRatingDialog(ebookId, currentRating) {
+            function openRatingDialog(mediaId, currentRating) {
                 const fivePointRating = convertToFivePoint(currentRating);
-                const newRating = prompt(`Rate this ebook (1-5, supports 0.5 increments):`, currentRating > 0 ? fivePointRating.toFixed(1) : '');
+                const newRating = prompt(`Rate this media (1-5, supports 0.5 increments):`, currentRating > 0 ? fivePointRating.toFixed(1) : '');
                 
                 if (newRating === null) return; // User cancelled
                 
@@ -252,12 +353,12 @@ templ Dashboard(user User) {
                 
                 // Round to nearest 0.5
                 const roundedRating = Math.round(rating * 2) / 2;
-                setRating(ebookId, convertToTenPoint(roundedRating));
+                setRating(mediaId, convertToTenPoint(roundedRating));
             }
 
-            async function setRating(ebookId, rating) {
+            async function setRating(mediaId, rating) {
                 try {
-                    const response = await fetch(`/api/ebooks/${ebookId}/rating`, {
+                    const response = await fetch(`/api/media-items/${mediaId}/rating`, {
                         method: 'POST',
                         headers: {
                             'Authorization': 'Bearer ' + localStorage.getItem('token'),
@@ -268,9 +369,9 @@ templ Dashboard(user User) {
                     
                     if (response.ok) {
                         const data = await response.json();
-                        const ratingContainer = document.getElementById(`rating-${ebookId}`);
+                        const ratingContainer = document.getElementById(`rating-${mediaId}`);
                         if (ratingContainer) {
-                            ratingContainer.innerHTML = renderRatingStars(ebookId, data.rating);
+                            ratingContainer.innerHTML = renderRatingStars(mediaId, data.rating);
                         }
                     } else {
                         const errorText = await response.text();
@@ -283,16 +384,35 @@ templ Dashboard(user User) {
                 }
             }
 
+            function filterMedia() {
+                const searchTerm = document.getElementById('search-input').value.toLowerCase();
+                const filteredItems = mediaItems.filter(item => 
+                    item.title.toLowerCase().includes(searchTerm) ||
+                    (item.author && item.author.toLowerCase().includes(searchTerm))
+                );
+                
+                // Temporarily replace mediaItems and re-render
+                const tempItems = mediaItems;
+                mediaItems = filteredItems;
+                renderMediaItems();
+                mediaItems = tempItems;
+            }
+
+            function viewMediaItem(mediaId) {
+                // TODO: Implement detailed media view
+                alert('Media viewer coming soon!');
+            }
+
             function logout() {
                 localStorage.removeItem('token');
                 localStorage.removeItem('user');
                 window.location.href = '/';
             }
 
-            // Load ebooks on page load
+            // Load libraries on page load
             document.addEventListener('DOMContentLoaded', function() {
                 loadTheme();
-                loadEbooks();
+                loadLibraries();
             });
         </script>
     </body>