feat(templates): add unlinked books management UI

- Display paginated list of unresolved unlinked books
- Show match suggestions with confidence scores
- Bulk linking interface
- Auto-link with configurable threshold
- Device and file metadata display

templates/unlinked_books.templ

@@ -21,6 +21,27 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
                 <p style="color: var(--text-secondary)">Resolve books that couldn't be automatically matched between devices</p>
             </div>
 
+            if len(unlinkedBooks) > 0 {
+                <div class="flex justify-between items-center mb-6 p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                    <div class="flex items-center gap-4">
+                        <input type="checkbox" id="select-all-unlinked" onchange="toggleAllUnlinked()" class="w-5 h-5">
+                        <label for="select-all-unlinked" class="cursor-pointer" style="color: var(--text-primary)">Select All</label>
+                        <span id="selected-count" class="text-sm" style="color: var(--text-secondary)">0 selected</span>
+                    </div>
+                    <div class="flex gap-2">
+                        <button onclick="bulkAutoLink()" class="btn-secondary px-4 py-2 rounded-lg text-sm">
+                            🤖 Auto-Link Selected (High Confidence)
+                        </button>
+                        <button onclick="bulkGetSuggestions()" class="btn-secondary px-4 py-2 rounded-lg text-sm">
+                            💡 Get Suggestions for Selected
+                        </button>
+                        <button onclick="showBulkManualLink()" class="btn-primary px-4 py-2 rounded-lg text-sm">
+                            🔗 Bulk Manual Link
+                        </button>
+                    </div>
+                </div>
+            }
+
             <div id="unlinked-container" class="space-y-6">
                 if len(unlinkedBooks) == 0 {
                     <div class="text-center py-16" style="color: var(--text-secondary)">
@@ -33,6 +54,9 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
                 for _, book := range unlinkedBooks {
                     <div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
                         <div class="flex gap-6">
+                            <div class="flex items-start pt-2">
+                                <input type="checkbox" class="unlinked-checkbox w-5 h-5" data-progress-id="{ book.ProgressID }" data-title="{ book.TitleFromDevice }" onchange="updateSelectedCount()">
+                            </div>
                             <div class="flex-1">
                                 <div class="flex items-center gap-3 mb-4">
                                     <div class="text-4xl">
@@ -346,6 +370,132 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
                 localStorage.removeItem('token');
                 window.location.href = '/login';
             }
+
+            // Bulk Operations Functions
+
+            function toggleAllUnlinked() {
+                const selectAll = document.getElementById('select-all-unlinked');
+                document.querySelectorAll('.unlinked-checkbox').forEach(cb => {
+                    cb.checked = selectAll.checked;
+                });
+                updateSelectedCount();
+            }
+
+            function getSelectedUnlinked() {
+                return Array.from(document.querySelectorAll('.unlinked-checkbox:checked'))
+                    .map(cb => ({
+                        progressId: cb.getAttribute('data-progress-id'),
+                        title: cb.getAttribute('data-title')
+                    }));
+            }
+
+            function updateSelectedCount() {
+                const count = document.querySelectorAll('.unlinked-checkbox:checked').length;
+                document.getElementById('selected-count').textContent = `${count} selected`;
+            }
+
+            async function bulkAutoLink() {
+                const selected = getSelectedUnlinked();
+                if (selected.length === 0) {
+                    showToast('Please select at least one book', 'error');
+                    return;
+                }
+
+                if (!confirm(`Auto-link ${selected.length} books with high confidence matches (≥80%)?`)) {
+                    return;
+                }
+
+                try {
+                    const response = await fetch('/sync/auto-link-books', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': 'Bearer ' + localStorage.getItem('token')
+                        },
+                        body: JSON.stringify({
+                            confidence_threshold: 0.8,
+                            limit: selected.length
+                        })
+                    });
+
+                    const result = await response.json();
+                    showToast(`Auto-linked ${result.auto_linked} books successfully`, 'success');
+                    setTimeout(() => location.reload(), 1500);
+                } catch (error) {
+                    showToast('Auto-link failed: ' + error.message, 'error');
+                }
+            }
+
+            async function bulkGetSuggestions() {
+                const selected = getSelectedUnlinked();
+                if (selected.length === 0) {
+                    showToast('Please select at least one book', 'error');
+                    return;
+                }
+
+                for (const book of selected) {
+                    try {
+                        const response = await fetch(`/sync/unlinked-books/${book.progressId}/suggestions`, {
+                            headers: {
+                                'Authorization': 'Bearer ' + localStorage.getItem('token')
+                            }
+                        });
+
+                        const result = await response.json();
+                        displaySuggestions(book.progressId, result.suggestions, result.action);
+                    } catch (error) {
+                        console.error('Failed to get suggestions:', error);
+                    }
+                }
+            }
+
+            function displaySuggestions(progressId, suggestions, action) {
+                const container = document.getElementById(`matches-${progressId}`);
+                if (!container) return;
+
+                container.classList.remove('hidden');
+                const listContainer = container.querySelector('.matches-list');
+                listContainer.innerHTML = '';
+
+                if (suggestions.length === 0) {
+                    listContainer.innerHTML = '<p style="color: var(--text-secondary)">No matches found</p>';
+                    return;
+                }
+
+                suggestions.forEach(match => {
+                    const div = document.createElement('div');
+                    div.className = 'p-3 border rounded cursor-pointer hover:bg-opacity-80 transition-colors';
+                    div.style.cssText = `background-color: var(--bg-primary); border-color: var(--border);`;
+                    div.innerHTML = `
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <h4 class="font-semibold" style="color: var(--text-primary)">${match.title}</h4>
+                                <p class="text-sm" style="color: var(--text-secondary)">Author: ${match.author || 'Unknown'}</p>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-sm font-semibold" style="color: var(--text-primary)">
+                                    ${(match.confidence * 100).toFixed(0)}% confidence
+                                </div>
+                                <div class="text-xs" style="color: var(--text-secondary)">${match.match_method}</div>
+                            </div>
+                        </div>
+                    `;
+                    div.onclick = () => selectMatchForLink(progressId, match);
+                    listContainer.appendChild(div);
+                });
+            }
+
+            function showBulkManualLink() {
+                const selected = getSelectedUnlinked();
+                if (selected.length === 0) {
+                    showToast('Please select at least one book', 'error');
+                    return;
+                }
+
+                showToast(`Bulk manual link for ${selected.length} books - select target book in library`, 'info');
+                // For now, redirect to manual linking. In the future, this could open a modal
+                window.location.href = '/library?mode=link&unlinked=' + selected.map(s => s.progressId).join(',');
+            }
         </script>
     </body>
     </html>