Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity
Files
7ddcdd0756f3337fc48cdd1405679af1f50d7cf0
bookhoard/templates/unlinked_books.templ
T
john-okeefe 9a62c10803
Release / build-and-push (push) Successful in 2m44s
Details
Merge branch 'new-ui' 
# Conflicts:
#	templates/admin_library.templ
#	templates/admin_library_templ.go
#	templates/conflicts_templ.go
#	templates/unlinked_books_templ.go
2026-08-10 13:48:06 -04:00

207 lines
8.9 KiB
Templ
Raw Blame History

package templates
templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Unlinked Books - Bookhoard</title>
<script src="/static/htmx.min.js"></script>
<link href="/static/style.css" rel="stylesheet"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
</head>
<body class="theme-{ user.Theme }" x-data="unlinkedBooks" x-init="setupEventDelegation()">
@Header(user, "/unlinked")
<main class="mx-auto container px-4 sm:px-6 lg:px-8 py-8">
<div class="mb-8">
<div class="flex items-center gap-3 mb-1">
<span class="grid place-items-center h-10 w-10 rounded-xl" style="background-color: var(--accent-muted); color: var(--accent);">
@Icon("sync", "h-5 w-5")
</span>
<h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary)">Unlinked Books</h1>
</div>
<p class="text-sm" style="color: var(--text-secondary)">Resolve books that couldn't be automatically matched between devices</p>
</div>
if len(unlinkedBooks) > 0 {
<div class="card p-4 mb-6 flex flex-wrap justify-between items-center gap-3">
<div class="flex items-center gap-4">
<input type="checkbox" id="select-all-unlinked" @change="toggleAllUnlinked()" class="w-5 h-5"/>
<label for="select-all-unlinked" class="cursor-pointer text-sm font-medium" 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 flex-wrap">
<button @click="bulkAutoLink()" class="btn btn-secondary text-sm">
@Icon("sync", "h-4 w-4")
Auto-Link Selected (High Confidence)
</button>
<button @click="bulkGetSuggestions()" class="btn btn-secondary text-sm">
@Icon("search", "h-4 w-4")
Get Suggestions for Selected
</button>
<button @click="showBulkManualLink()" class="btn btn-primary text-sm">
@Icon("edit", "h-4 w-4")
Bulk Manual Link
</button>
</div>
</div>
}
<div id="unlinked-container" class="space-y-6">
if len(unlinkedBooks) == 0 {
<div class="card text-center py-16">
<span class="grid place-items-center h-14 w-14 mx-auto mb-4 rounded-2xl" style="background-color: color-mix(in srgb, var(--status-success) 16%, transparent); color: var(--status-success);">
@Icon("check-circle", "h-7 w-7")
</span>
<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">All Books Linked!</h3>
<p style="color: var(--text-secondary)">There are no unlinked books that need manual resolution.</p>
</div>
}
for _, book := range unlinkedBooks {
<div class="card p-6">
<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 min-w-0">
<div class="flex items-center gap-3 mb-4">
<span class="grid place-items-center h-11 w-11 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
if book.DeviceType == "koreader" {
@Icon("book-open", "h-5 w-5")
} else if book.DeviceType == "kobo" {
@Icon("library", "h-5 w-5")
} else {
@Icon("device", "h-5 w-5")
}
</span>
<div class="min-w-0">
<h3 class="font-semibold text-lg truncate" style="color: var(--text-primary)">{ book.TitleFromDevice }</h3>
<p class="text-sm" style="color: var(--text-secondary)">
Device: { book.DeviceName } ({ book.DeviceType })
</p>
</div>
</div>
<div class="space-y-2 text-sm mb-4">
<div class="flex items-center gap-2 flex-wrap">
<span class="text-xs uppercase tracking-wide font-medium" style="color: var(--text-secondary)">File Path:</span>
<code class="chip font-mono">
@Icon("folder", "h-3.5 w-3.5")
{ book.FilePath }
</code>
</div>
if book.SHA256 != "" {
<div class="flex items-center gap-2 flex-wrap">
<span class="text-xs uppercase tracking-wide font-medium" style="color: var(--text-secondary)">SHA-256:</span>
<code class="chip font-mono text-xs" title={ book.SHA256 }>{ book.SHA256 }</code>
</div>
}
<div class="flex items-center gap-2">
<span class="text-xs uppercase tracking-wide font-medium" style="color: var(--text-secondary)">Last Synced:</span>
<span style="color: var(--text-primary)">{ book.LastSyncTime }</span>
</div>
if book.ConfidenceScore > 0 {
<div class="flex items-center gap-2">
<span class="text-xs uppercase tracking-wide font-medium" style="color: var(--text-secondary)">Auto-Link Confidence:</span>
<span class="badge" style="background-color: var(--accent-muted); color: var(--accent);">
{ book.ConfidenceScore }% confidence
</span>
</div>
}
</div>
<div class="mb-4 flex gap-2 flex-wrap">
<button
@click="searchMatches('{ book.ProgressID }', '{ book.SHA256 }', '{ book.TitleFromDevice }')"
class="btn btn-secondary text-sm"
>
@Icon("search", "h-4 w-4")
Find Potential Matches
</button>
<button
@click="showManualLinkModal('{ book.ProgressID }', '{ book.TitleFromDevice }')"
class="btn btn-primary text-sm"
>
@Icon("edit", "h-4 w-4")
Manually Link
</button>
</div>
<div id="matches-{ book.ProgressID }" class="hidden">
<div class="border-t pt-4 mt-2" style="border-color: var(--border);">
<h4 class="font-semibold mb-3" style="color: var(--text-primary)">Potential Matches</h4>
<div id="matches-list-{ book.ProgressID }" class="space-y-3">
<p style="color: var(--text-secondary)">Click "Find Potential Matches" to search</p>
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
</main>
<div id="manual-link-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4" style="background-color: var(--surface-overlay);">
<div class="card p-6 w-full max-w-md mx-4">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Manually Link Book</h2>
<button @click="hideManualLinkModal()" class="icon-btn" aria-label="Close">@Icon("close", "h-5 w-5")</button>
</div>
<input type="hidden" id="link-progress-id"/>
<input type="hidden" id="link-book-sha256"/>
<div class="mb-4">
<label for="link-book-title" class="block text-xs uppercase tracking-wide font-medium mb-2" style="color: var(--text-secondary)">Book Title from Device</label>
<input
type="text"
id="link-book-title"
readonly
class="input"
style="color: var(--text-secondary);"
/>
</div>
<div class="mb-4">
<label for="link-search-input" class="block text-xs uppercase tracking-wide font-medium mb-2" style="color: var(--text-secondary)">Search for Book to Link</label>
<div class="flex gap-2">
<input
type="text"
id="link-search-input"
placeholder="Search by title, author…"
class="input flex-1"
/>
<button
type="button"
@click="searchBooksForLink()"
class="btn btn-primary"
>
@Icon("search", "h-4 w-4")
Search
</button>
</div>
</div>
<div id="link-search-results" class="mb-4 max-h-48 overflow-y-auto space-y-2">
<p class="text-sm" style="color: var(--text-secondary)">Search for books to link</p>
</div>
<div class="mb-4">
<label for="link-confidence" class="block text-xs uppercase tracking-wide font-medium mb-2" style="color: var(--text-secondary)">Confidence Score</label>
<input
type="number"
id="link-confidence"
min="0"
max="1"
step="0.1"
value="1.0"
class="input"
/>
<p class="text-xs mt-1" style="color: var(--text-secondary)">1.0 = manual override (highest confidence)</p>
</div>
<div class="flex justify-end gap-3">
<button type="button" @click="hideManualLinkModal()" class="btn btn-secondary">
Cancel
</button>
<button type="button" @click="confirmManualLink()" class="btn btn-primary">
@Icon("check", "h-4 w-4")
Link Book
</button>
</div>
</div>
</div>
</body>
</html>
}
Reference in New Issue View Git Blame Copy Permalink