Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: Add SSR for conflicts and queue pages

Browse Source 
- Update conflicts.templ to accept pre-rendered data
- Update queue.templ to accept pre-rendered data
- Update /conflicts and /queue routes in main.go for SSR
- Update stats rendering to use server-side values
- Add server-side conflict list rendering
- Add server-side queue list rendering
- Update conflicts.js to use location.reload() after operations
- Update queue.js to use location.reload() after operations
- Remove initial load calls from JavaScript files

Preserves all API endpoints and backward compatibility
This commit is contained in:
john-okeefe
2026-01-31 23:14:08 -05:00
parent b3c0c0c225
commit 6266a06abb
9 changed files with 766 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/conflicts.templ
+44 -14
View File
@@ -1,6 +1,8 @@
package templates
templ Conflicts(user User) {
import "bookmann/internal/handlers"
templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int, unresolved int) {
<!DOCTYPE html>
<html lang="en">
<head>
@@ -69,24 +71,52 @@ templ Conflicts(user User) {
</div>
<div id="stats-bar" class="mt-4 flex space-x-6 text-sm">
<span style="color: var(--text-secondary)">Total: <strong id="total-count" style="color: var(--text-primary)">0</strong></span>
<span style="color: var(--text-secondary)">Unresolved: <strong id="unresolved-count" style="color: #f59e0b;">0</strong></span>
<span style="color: var(--text-secondary)">Resolved: <strong id="resolved-count" style="color: #10b981;">0</strong></span>
<span style="color: var(--text-secondary)">Total: <strong style="color: var(--text-primary)">{ total }</strong></span>
<span style="color: var(--text-secondary)">Unresolved: <strong style="color: #f59e0b;">{ unresolved }</strong></span>
<span style="color: var(--text-secondary)">Resolved: <strong style="color: #10b981;">{ total - unresolved }</strong></span>
</div>
</div>
<div id="loading" class="text-center py-16" style="color: var(--text-secondary)">
<div class="loading-spinner mx-auto mb-4"></div>
<p>Loading conflicts...</p>
</div>
<div id="loading" class="hidden text-center py-16" style="color: var(--text-secondary)">
<div class="loading-spinner mx-auto mb-4"></div>
<p>Loading conflicts...</p>
</div>
<div id="empty-state" class="hidden text-center py-16" style="color: var(--text-secondary)">
<div class="text-6xl mb-4">✅</div>
<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Conflicts</h3>
<p>Your devices are in sync! No conflicts to resolve.</p>
</div>
<div id="empty-state" class="hidden text-center py-16" style="color: var(--text-secondary)">
<div class="text-6xl mb-4">✅</div>
<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Conflicts</h3>
<p>Your devices are in sync! No conflicts to resolve.</p>
</div>
<div id="conflicts-list" class="space-y-6 hidden"></div>
<div id="conflicts-list" class="space-y-6">
if len(conflicts) == 0 {
<div class="text-center py-16" style="color: var(--text-secondary)">
<div class="text-6xl mb-4">✅</div>
<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Conflicts</h3>
<p>Your devices are in sync! No conflicts to resolve.</p>
</div>
}
for _, conflict := range conflicts {
<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border); border-left: 4px solid #f59e0b;">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-semibold" style="color: var(--text-primary)">{ conflict.MediaItemTitle }</h3>
<p class="text-sm" style="color: var(--text-secondary)">Type: { conflict.ConflictType }</p>
</div>
<button onclick="showConflictModal('{ conflict.ID }')" class="btn-primary px-4 py-2 rounded-lg">
Resolve
</button>
</div>
<div class="text-sm" style="color: var(--text-secondary)">
Created: { conflict.CreatedAt.Format("2006-01-02 15:04:05") }
if conflict.ResolvedBy != "" {
| Resolved by: { conflict.ResolvedBy }
}
</div>
</div>
}
</div>
<div id="conflict-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: rgba(0, 0, 0, 0.7);">
<div class="card rounded-lg p-6 w-full max-w-4xl mx-4 my-8" style="background-color: var(--bg-secondary); border-color: var(--border);">