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

feat(ui): refresh auth, entry, admin, and secondary pages

Browse Source 
Apply the new design-system primitives across the remaining pages so the
whole app shares one visual language:

- Auth/entry: redesigned index, login, register (centered card layout,
  SVG icons, semantic tokens)
- Admin: sidebar nav with icons, cohesive admin dashboard/users/library/
  processing-issues/settings (tables use border-line + hover states;
  scan/websocket attributes preserved)
- Secondary: analytics (stat cards), devices, progress, conflicts, queue,
  profile + form/modal all migrated to .card/.btn/.input primitives and
  SVG action icons
- Docs + API explorer + setup wizard + collection/rules/modals +
  unlinked books + book-detail modals: consistent chrome, modal scrims
  use --surface-overlay, close buttons use icon-btn
- reader.templ and error.templ intentionally left unchanged
This commit is contained in:
john-okeefe
2026-08-05 16:01:22 -04:00
parent 28e40e302c
commit a075a5061f
54 changed files with 2740 additions and 2128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/book_detail_modals.templ
+140 -192
View File
@@ -9,65 +9,61 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
<div
id="progress-sync-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);"
style="background-color: var(--surface-overlay);"
>
<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);"
class="card p-6 w-full max-w-4xl mx-4 my-8"
>
<div class="flex justify-between items-center mb-6">
<div>
<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Sync Progress</h2>
<p class="text-sm" style="color: var(--text-secondary);">{ book.Title }</p>
<h2 class="text-2xl font-bold tracking-tight text-content">Sync Progress</h2>
<p class="text-sm text-content-muted">{ book.Title }</p>
</div>
<button
@click="hideProgressSyncModal()"
class="p-2 hover:opacity-80 rounded-lg"
style="color: var(--text-primary); background-color: var(--bg-primary);"
class="icon-btn"
>
✕
@Icon("close", "h-5 w-5")
</button>
</div>
if book.ActiveConflict != nil {
<div
class="mb-6 p-4 rounded-lg border"
style="background-color: #f59e0b20; border-color: #f59e0b;"
class="mb-6 p-4 rounded-lg border border-warning bg-warning/10"
>
<p class="font-semibold mb-2" style="color: var(--text-primary);">
⚠️ Conflict Detected
<p class="font-semibold mb-2 flex items-center gap-2 text-content">
@Icon("alert", "h-4 w-4 text-warning")
Conflict Detected
</p>
<p class="text-sm" style="color: var(--text-secondary);">
<p class="text-sm text-content-muted">
Progress differs between devices. Choose which version to keep.
</p>
</div>
<div class="space-y-4">
for source, data := range book.ActiveConflict.ConflictData {
<div
class="card p-4 rounded-lg border"
style="background-color: var(--bg-primary); border-color: var(--border);"
class="card p-4"
>
<div class="flex justify-between items-start mb-3">
<div>
<span
class="inline-block px-2 py-1 rounded text-xs font-semibold capitalize mb-2"
style="background-color: var(--accent); color: white;"
class="inline-block px-2 py-1 rounded text-xs font-semibold capitalize mb-2 bg-brand text-white"
>
{ data.Source }
</span>
<p class="text-xs" style="color: var(--text-secondary);">
<p class="text-xs text-content-muted">
{ FormatInTimezone(data.Timestamp, user.Timezone) }
</p>
</div>
<div class="text-right">
if data.Data["percentage"] != nil {
<div class="text-3xl font-bold" style="color: var(--accent);">
<div class="text-3xl font-bold text-brand">
{ fmt.Sprintf("%.1f", data.Data["percentage"].(float64) * 100) }%
</div>
}
</div>
</div>
if data.Data["page"] != nil {
<div class="text-sm" style="color: var(--text-secondary);">
<div class="text-sm text-content-muted">
if data.Data["total_pages"] != nil {
Page: { fmt.Sprintf("%.0f", data.Data["page"].(float64)) } / { fmt.Sprintf("%.0f", data.Data["total_pages"].(float64)) }
} else {
@@ -76,15 +72,14 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
</div>
}
if data.Data["epubcfi"] != nil {
<div class="text-xs mt-1" style="color: var(--text-secondary);">
<div class="text-xs mt-1 text-content-muted">
CFI: { data.Data["epubcfi"].(string) }
</div>
}
<div class="mt-3">
<button
@click={"resolveConflict('" + book.ActiveConflict.ID + "', '" + source + "')"}
class="px-3 py-1.5 rounded-lg text-sm font-semibold"
style="background-color: var(--accent); color: white;"
class="btn btn-primary text-sm"
>
Keep This
</button>
@@ -93,26 +88,25 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
}
</div>
} else if book.ReadingProgress != nil {
<div class="mb-4" style="color: var(--text-secondary);">
<div class="mb-4 text-content-muted">
<p>No conflicts detected. Current progress from <strong>{ book.ReadingProgress.LastSyncSource.String }</strong>:</p>
</div>
<div
class="card p-6 rounded-lg border text-center"
style="background-color: var(--bg-primary); border-color: var(--border);"
class="card p-6 text-center"
>
<div class="text-5xl font-bold mb-4" style="color: var(--accent);">
<div class="text-5xl font-bold mb-4 text-brand">
{ fmt.Sprintf("%.1f", book.ReadingProgress.Percentage.Float64 * 100) }%
</div>
<p class="capitalize text-lg mb-2" style="color: var(--text-primary);">
<p class="capitalize text-lg mb-2 text-content">
{ book.ReadingProgress.LastSyncSource.String }
</p>
if book.ReadingProgress.CurrentPage.Valid && book.ReadingProgress.TotalPages.Valid {
<p style="color: var(--text-secondary);">
<p class="text-content-muted">
Page { book.ReadingProgress.CurrentPage.Int32 } of { book.ReadingProgress.TotalPages.Int32 }
</p>
}
if book.ReadingProgress.LastReadAt.Valid {
<p class="text-sm mt-2" style="color: var(--text-secondary);">
<p class="text-sm mt-2 text-content-muted">
Last read: { FormatTimestamptzInTimezone(book.ReadingProgress.LastReadAt, user.Timezone) }
</p>
}
@@ -121,8 +115,7 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
<div class="flex justify-end space-x-3 mt-6">
<button
@click="hideProgressSyncModal()"
class="px-4 py-2 rounded-lg"
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
class="btn btn-secondary"
>
Close
</button>
@@ -135,23 +128,23 @@ templ NotesHighlightsModal(book handlers.MediaDetail) {
<div
id="notes-modal"
class="hidden fixed inset-0 z-50 flex items-center justify-center"
style="background-color: rgba(0, 0, 0, 0.7);"
style="background-color: var(--surface-overlay);"
>
<div
class="card rounded-lg p-8 w-full max-w-2xl mx-4 text-center"
style="background-color: var(--bg-secondary); border-color: var(--border);"
class="card p-8 w-full max-w-2xl mx-4 text-center"
>
<div class="text-6xl mb-4">📝</div>
<h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary)">Notes & Highlights</h2>
<p class="mb-2" style="color: var(--text-secondary);">
<div class="mb-4 flex justify-center">
@Icon("edit", "h-12 w-12 text-content-muted")
</div>
<h2 class="text-2xl font-bold tracking-tight text-content mb-2">Notes & Highlights</h2>
<p class="mb-2 text-content-muted">
This book has <strong>{ book.NotesCount }</strong> notes and <strong>{ book.HighlightsCount }</strong> highlights.
</p>
<p class="mb-6" style="color: var(--text-secondary);">Feature coming soon!</p>
<p class="mb-6 text-content-muted">Feature coming soon!</p>
<div>
<button
@click="hideNotesModal()"
class="px-6 py-2 rounded-lg font-semibold"
style="background-color: var(--accent); color: white;"
class="btn btn-primary"
>
Close
</button>
@@ -164,27 +157,24 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
<div
id="metadata-editor-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);"
style="background-color: var(--surface-overlay);"
>
<div
class="rounded-lg w-full max-w-5xl mx-4 my-8 flex flex-col max-h-[90vh]"
style="background-color: var(--bg-secondary); border: 1px solid var(--border);"
class="card w-full max-w-5xl mx-4 my-8 flex flex-col max-h-[90vh]"
>
<div class="flex justify-between items-center p-6 border-b flex-shrink-0" style="border-color: var(--border);">
<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Edit Metadata</h2>
<div class="flex justify-between items-center p-6 border-b border-line flex-shrink-0">
<h2 class="text-2xl font-bold tracking-tight text-content">Edit Metadata</h2>
<button
@click="hideMetadataEditor()"
class="p-2 hover:opacity-80 rounded-lg"
style="color: var(--text-primary); background-color: var(--bg-primary);"
class="icon-btn"
>
✕
@Icon("close", "h-5 w-5")
</button>
</div>
<div class="flex flex-col md:flex-row gap-8 p-6 flex-1 min-h-0 overflow-y-auto">
<!-- Cover Section (Left) -->
<div class="flex-shrink-0">
<div class="w-64 h-96 rounded-lg overflow-hidden shadow-lg mb-3 cursor-pointer relative group"
style="background-color: var(--bg-primary);"
<div class="w-64 h-96 rounded-lg overflow-hidden shadow-lg mb-3 cursor-pointer relative group bg-surface"
@click="document.getElementById('cover-upload-input').click()"
>
if book.CoverImagePath.Valid && book.CoverImagePath.String != "" {
@@ -209,29 +199,29 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
<div class="w-64 space-y-2">
<button
type="button"
class="w-full px-3 py-2 text-sm rounded-lg font-semibold"
style="background-color: var(--accent); color: white;"
class="btn btn-primary w-full text-sm"
@click="generateCover()"
x-show="coverGenerating"
x-cloak
disabled
>
Generating...
</button>
<button
type="button"
class="w-full px-3 py-2 text-sm rounded-lg font-semibold"
style="background-color: var(--accent); color: white;"
class="btn btn-primary w-full text-sm"
@click="generateCover()"
x-show="!coverGenerating"
x-cloak
>
Generate Cover
</button>
<button
type="button"
class="w-full px-3 py-2 text-sm rounded-lg"
style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
class="btn btn-secondary w-full text-sm"
@click="removeCover()"
x-show="hasExistingCover || newCoverPreview"
x-cloak
>
Remove Cover
</button>
@@ -240,50 +230,44 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
<!-- Accordion Fields (Right) -->
<div class="flex-1 min-w-0 space-y-2">
<!-- Basic Info -->
<div class="border rounded-lg" style="border-color: var(--border);">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
style="color: var(--text-primary); background-color: var(--bg-primary);"
<div class="border rounded-lg border-line">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
@click="toggleSection('basic')">
<span class="font-semibold">Basic Info</span>
<span x-text="openSections.basic ? '▾' : '▸'">▸</span>
</button>
<div x-show="openSections.basic" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
<div x-show="openSections.basic" x-cloak x-transition class="p-4 space-y-3 bg-surface">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Title</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Title</label>
<input type="text" name="title" value={ book.Title }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Author</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Author</label>
<input type="text" name="author" value={ textToString(book.Author) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Description</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Description</label>
<textarea name="description" rows="3"
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);"
class="input text-sm"
>{ textToString(book.Description) }</textarea>
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Summary</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Summary</label>
<textarea name="summary" rows="2"
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);"
class="input text-sm"
>{ textToString(book.Summary) }</textarea>
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Tags</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Tags</label>
<div class="flex flex-wrap gap-1.5 mb-2">
<template x-for="(tag, idx) in editorTags" :key="idx">
<span
class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
style="background-color: var(--accent); color: white;"
class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-brand text-white"
>
<span x-text="tag"></span>
<button type="button" class="hover:opacity-70 leading-none" @click="removeEditorTag(idx)">✕</button>
<button type="button" class="hover:opacity-70 leading-none" @click="removeEditorTag(idx)">@Icon("close", "h-3 w-3")</button>
</span>
</template>
</div>
@@ -297,13 +281,12 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
@keydown="onTagKeydown($event)"
@blur="hideEditorTagDropdown()"
placeholder="Add tag..."
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
<div
x-show="showTagDropdown"
x-cloak
x-transition
class="mt-1 w-full rounded-lg shadow-lg border max-h-48 overflow-y-auto"
style="background-color: var(--bg-primary); border-color: var(--border);"
class="mt-1 w-full rounded-lg shadow-lg border border-line bg-surface max-h-48 overflow-y-auto"
>
<template x-for="sug in tagSuggestions" :key="sug.value">
<button
@@ -314,171 +297,149 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
@click="selectEditorTagSuggestion(sug.value)"
>
<span x-text="sug.value"></span>
<span class="text-xs" style="color: var(--text-secondary);" x-text="sug.count + ' books'"></span>
<span class="text-xs text-content-muted" x-text="sug.count + ' books'"></span>
</button>
</template>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Community Rating (0-10)</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Community Rating (0-10)</label>
<input type="number" name="community_rating" min="0" max="10" step="0.1"
value={ fmt.Sprintf("%.1f", book.CommunityRating.Float64) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
</div>
</div>
<!-- Publication -->
<div class="border rounded-lg" style="border-color: var(--border);">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
style="color: var(--text-primary); background-color: var(--bg-primary);"
<div class="border rounded-lg border-line">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
@click="toggleSection('publication')">
<span class="font-semibold">Publication</span>
<span x-text="openSections.publication ? '▾' : '▸'">▸</span>
</button>
<div x-show="openSections.publication" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
<div x-show="openSections.publication" x-cloak x-transition class="p-4 space-y-3 bg-surface">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Publisher</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Publisher</label>
<input type="text" name="publisher" value={ textToString(book.Publisher) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Date Published</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Date Published</label>
<input type="date" name="date_published"
value={ formatDateForInput(book.DatePublished) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Edition</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Edition</label>
<input type="text" name="edition" value={ textToString(book.Edition) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Language</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Language</label>
<input type="text" name="language" value={ textToString(book.Language) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Genre</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Genre</label>
<input type="text" name="genre" value={ textToString(book.Genre) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Copyright Year</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Copyright Year</label>
<input type="number" name="copyright_year"
value={ fmt.Sprintf("%d", book.CopyrightYear.Int32) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
</div>
</div>
<!-- Series -->
<div class="border rounded-lg" style="border-color: var(--border);">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
style="color: var(--text-primary); background-color: var(--bg-primary);"
<div class="border rounded-lg border-line">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
@click="toggleSection('series')">
<span class="font-semibold">Series</span>
<span x-text="openSections.series ? '▾' : '▸'">▸</span>
</button>
<div x-show="openSections.series" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
<div x-show="openSections.series" x-cloak x-transition class="p-4 space-y-3 bg-surface">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Series</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Series</label>
<input type="text" name="series" value={ textToString(book.Series) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div class="grid grid-cols-3 gap-3">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Number</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Number</label>
<input type="number" name="series_number"
value={ fmt.Sprintf("%d", book.SeriesNumber.Int32) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Count</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Count</label>
<input type="number" name="series_count"
value={ fmt.Sprintf("%d", book.SeriesCount.Int32) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Volume</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Volume</label>
<input type="number" name="volume"
value={ fmt.Sprintf("%d", book.Volume.Int32) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
</div>
</div>
</div>
<!-- Identifiers -->
<div class="border rounded-lg" style="border-color: var(--border);">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
style="color: var(--text-primary); background-color: var(--bg-primary);"
<div class="border rounded-lg border-line">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
@click="toggleSection('identifiers')">
<span class="font-semibold">Identifiers</span>
<span x-text="openSections.identifiers ? '▾' : '▸'">▸</span>
</button>
<div x-show="openSections.identifiers" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
<div x-show="openSections.identifiers" x-cloak x-transition class="p-4 space-y-3 bg-surface">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">ISBN</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">ISBN</label>
<input type="text" name="isbn" value={ textToString(book.Isbn) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">ASIN</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">ASIN</label>
<input type="text" name="asin" value={ textToString(book.Asin) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Goodreads ID</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Goodreads ID</label>
<input type="text" name="goodreads_id" value={ textToString(book.GoodreadsID) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">OpenLibrary ID</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">OpenLibrary ID</label>
<input type="text" name="openlibrary_id" value={ textToString(book.OpenlibraryID) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Google Books ID</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Google Books ID</label>
<input type="text" name="google_books_id" value={ textToString(book.GoogleBooksID) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Web URL</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Web URL</label>
<input type="url" name="web_url" value={ textToString(book.WebUrl) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
</div>
</div>
<!-- Comic/Manga -->
<div class="border rounded-lg" style="border-color: var(--border);">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
style="color: var(--text-primary); background-color: var(--bg-primary);"
<div class="border rounded-lg border-line">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
@click="toggleSection('comic')">
<span class="font-semibold">Comic/Manga</span>
<span x-text="openSections.comic ? '▾' : '▸'">▸</span>
</button>
<div x-show="openSections.comic" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
<div x-show="openSections.comic" x-cloak x-transition class="p-4 space-y-3 bg-surface">
<div>
<label for="manga_type" class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Manga Type</label>
<label for="manga_type" class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Manga Type</label>
<select id="manga_type" name="manga_type"
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);">
class="input text-sm">
<option value="unknown" selected={ textToString(book.MangaType) == "unknown" }>Unknown</option>
<option value="no" selected={ textToString(book.MangaType) == "no" }>No</option>
<option value="yes" selected={ textToString(book.MangaType) == "yes" }>Yes</option>
@@ -486,10 +447,9 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
</select>
</div>
<div>
<label for="reading_direction" class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Reading Direction</label>
<label for="reading_direction" class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Reading Direction</label>
<select id="reading_direction" name="reading_direction"
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);">
class="input text-sm">
<option value="auto" selected={ textToString(book.ReadingDirection) == "auto" }>Auto</option>
<option value="ltr" selected={ textToString(book.ReadingDirection) == "ltr" }>Left to Right</option>
<option value="rtl" selected={ textToString(book.ReadingDirection) == "rtl" }>Right to Left</option>
@@ -497,96 +457,84 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Age Rating</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Age Rating</label>
<input type="text" name="age_rating" value={ textToString(book.AgeRating) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Story Arc</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Story Arc</label>
<input type="text" name="story_arc" value={ textToString(book.StoryArc) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Imprint</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Imprint</label>
<input type="text" name="imprint" value={ textToString(book.Imprint) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Scan Information</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Scan Information</label>
<input type="text" name="scan_information" value={ textToString(book.ScanInformation) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Metadata Notes</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Metadata Notes</label>
<textarea name="metadata_notes" rows="2"
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);"
class="input text-sm"
>{ textToString(book.MetadataNotes) }</textarea>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" name="is_black_and_white" id="is_black_and_white"
if book.IsBlackAndWhite.Bool { checked }
class="rounded" />
<label for="is_black_and_white" class="text-sm" style="color: var(--text-secondary);">Black & White</label>
<label for="is_black_and_white" class="text-sm text-content-muted">Black & White</label>
</div>
</div>
</div>
<!-- Technical -->
<div class="border rounded-lg" style="border-color: var(--border);">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
style="color: var(--text-primary); background-color: var(--bg-primary);"
<div class="border rounded-lg border-line">
<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
@click="toggleSection('technical')">
<span class="font-semibold">Technical</span>
<span x-text="openSections.technical ? '▾' : '▸'">▸</span>
</button>
<div x-show="openSections.technical" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
<div x-show="openSections.technical" x-cloak x-transition class="p-4 space-y-3 bg-surface">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Page Count</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Page Count</label>
<input type="number" name="page_count"
value={ fmt.Sprintf("%d", book.PageCount.Int32) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Contributors (comma-separated)</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Contributors (comma-separated)</label>
<input type="text" name="contributors" value={ stringSliceToString(book.Contributors) }
class="w-full px-3 py-2 rounded-lg border text-sm"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm" />
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Format</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Format</label>
<input type="text" value={ textToString(book.MimeType) } readonly
class="w-full px-3 py-2 rounded-lg border text-sm opacity-60"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm opacity-60" />
</div>
<div>
<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">File Size</label>
<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">File Size</label>
<input type="text" value={ fmt.Sprintf("%.1f MB", float64(book.FileSize.Int64)/1024/1024) } readonly
class="w-full px-3 py-2 rounded-lg border text-sm opacity-60"
style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
class="input text-sm opacity-60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end space-x-3 p-6 border-t flex-shrink-0" style="border-color: var(--border);">
<div class="flex justify-end space-x-3 p-6 border-t border-line flex-shrink-0">
<button
@click="hideMetadataEditor()"
class="px-4 py-2 rounded-lg"
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
class="btn btn-secondary"
>
Cancel
</button>
<button
@click="saveMetadata()"
class="px-6 py-2 rounded-lg font-semibold"
style="background-color: var(--accent); color: white;"
class="btn btn-primary"
>
Save
</button>