bookhoard/templates/annotations_banner.templ

package templates

import "bookhoard/internal/handlers"

// AnnotationsBanner is the book-detail slide-out listing every note and
// highlight on the book (objective 7). Rows show a friendly human location
// label (never a raw cfi:epubcfi(…) string), expand to the full rich markup
// (markdown pipeline identical to the reader's), and offer a per-row jump
// that opens the reader at the annotation's location via ?loc=. Web-only
// export lives at the top: single .md file, or one file per item zipped.
// Formatting is IDENTICAL in both modes:
//   location note: "# <friendly label>" header + note source as body
//   highlight:     "# <highlight text>" header + note source as body
//   (no note → header only)
templ AnnotationsBanner(book handlers.MediaDetail) {
	<div
		id="annotations-banner"
		x-cloak
		x-show="annotationsBannerOpen"
		x-transition:enter="transition-transform duration-200 ease-out"
		x-transition:enter-start="translate-x-full"
		x-transition:enter-end="translate-x-0"
		x-transition:leave="transition-transform duration-150 ease-in"
		x-transition:leave-start="translate-x-0"
		x-transition:leave-end="translate-x-full"
		class="fixed right-0 top-0 bottom-0 w-full max-w-md z-50 shadow-2xl overflow-y-auto"
		style="background: var(--bg-primary); border-left: 1px solid var(--border);"
		role="dialog"
		aria-label="Annotations"
	>
		<div class="sticky top-0 px-4 py-3 flex items-center justify-between" style="background: var(--bg-primary); border-bottom: 1px solid var(--border);">
			<h3 class="text-lg font-semibold" style="color: var(--text-primary);">Notes &amp; Highlights</h3>
			<button
				type="button"
				@click="hideAnnotationsBanner()"
				class="p-2 rounded-lg hover:bg-surface-hover"
				style="color: var(--text-secondary);"
				aria-label="Close annotations"
			>
				@Icon("close", "w-5 h-5")
			</button>
		</div>
		<div class="px-4 py-3">
			<button
				type="button"
				id="export-annotations-btn"
				:disabled="annotationsBannerLoading || bannerRows.length === 0"
				@click="showExportDialog()"
				class="w-full py-2 mb-3 text-sm font-medium rounded-lg border transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
				style="border-color: var(--border); color: var(--text-primary);"
			>
				Export all notes and highlights
			</button>
			<p x-show="annotationsBannerLoading" class="text-sm py-4" style="color: var(--text-secondary);">Loading…</p>
			<template x-if="!annotationsBannerLoading && bannerRows.length === 0">
				<p class="text-sm py-4" style="color: var(--text-secondary);">
					No notes or highlights on this book yet.
				</p>
			</template>
			<!-- Notes first, then highlights — stable ledger order -->
			<div class="space-y-2">
				<template x-for="row in bannerRows" :key="row.key">
					<div class="card p-0 overflow-hidden">
						<button
							type="button"
							class="w-full text-left px-4 py-3 flex items-start gap-3 hover:bg-surface-hover"
							@click="row.expanded = !row.expanded"
						>
							<span
								class="w-1.5 self-stretch rounded-full shrink-0"
								:style="{ backgroundColor: row.color }"
							></span>
							<span class="flex-1 min-w-0">
								<span
									class="block text-sm"
									x-text="row.preview"
								></span>
								<span class="block text-xs mt-0.5" style="color: var(--text-secondary);" x-text="row.label"></span>
							</span>
						</button>
						<!-- Jump opens the reader at the annotation's location -->
						<div class="flex items-center justify-between px-4 pb-3 pt-1">
							<a
								:href="'/readers/' + bannerMediaId + '?loc=' + encodeURIComponent(row.loc)"
								class="text-xs px-2 py-1 rounded-lg border hover:bg-surface-hover transition-colors"
								style="border-color: var(--border); color: var(--accent);"
							>
								Open reader here ↗
							</a>
						</div>
						<!-- Expanded rich body (markdown pipeline) -->
						<div x-show="row.expanded" class="px-4 pb-4" x-html="row.rich"></div>
					</div>
				</template>
			</div>
		</div>
	</div>

	<!-- Export format dialog -->
	<div
		id="annotations-export-dialog"
		x-cloak
		x-show="annotationsExportOpen"
		class="fixed inset-0 z-[60] flex items-center justify-center p-4"
		style="background: rgba(0,0,0,.6);"
	>
		<div class="max-w-sm w-full card p-6">
			<h4 class="text-lg font-semibold mb-1" style="color: var(--text-primary);">Export annotations</h4>
			<p class="text-sm mb-4" style="color: var(--text-secondary);">Notes and highlights, as markdown files.</p>
			<div class="space-y-2">
				<button
					type="button"
					@click="exportAnnotations('single')"
					class="w-full py-2 px-4 text-sm text-left rounded-lg border hover:bg-surface-hover transition-colors"
					style="border-color: var(--border); color: var(--text-primary);"
				>
					Single file — everything in one .md
				</button>
				<button
					type="button"
					@click="exportAnnotations('multi')"
					class="w-full py-2 px-4 text-sm text-left rounded-lg border hover:bg-surface-hover transition-colors"
					style="border-color: var(--border); color: var(--text-primary);"
				>
					One file per item — zipped
				</button>
			</div>
			<button
				type="button"
				@click="hideExportDialog()"
				class="w-full py-2 mt-3 text-sm rounded-lg hover:bg-surface-hover"
				style="color: var(--text-secondary);"
			>
				Cancel
			</button>
		</div>
	</div>
}