feat(web): note editing at the reader slider and book banner; Deleted rename

Objective 8a (web half). Reader notes-drawer rows gain an inline editor
(mirroring the bookmark-rename pattern) that PUTs the new content — the
stored position rides along because the server's note PUT hard-sets the
position column (a probe note proved an omitted position NULLs the
anchor). Book-detail banner rows gain Edit/Delete for location notes
and Edit-note/Add-note for the note ATTACHED to a highlight (full-replace
highlight PUT; empty content clears the note; the highlight itself is
never edited from the banner). The edit dialog is centered with the
markdown caption.

The book-detail 'Notes' button becomes 'Deleted' (badge =
deleted-annotation count) and the modal title becomes 'Deleted
annotations' — that modal only ever showed removed annotations.

Verified live in Brave: drawer inline edit round-trips content and
position; banner note edit, highlight-note edit, and delete (tombstone
appears in the Deleted modal); rename renders with the count badge.

templates/reader.templ

@@ -676,20 +676,52 @@ templ ReaderAnnotationsDrawer() {
 				+ Add Note
 			</button>
 			<div class="space-y-2">
-					<template x-for="note in noteItems" :key="note.id">
-						<div class="reader-hl-row group">
-							<a href="#" @click.prevent="closeDrawers()" class="flex-1 min-w-0 block py-2 px-2 rounded hover:bg-gray-700">
-								<span class="block text-sm truncate reader-note-rich" x-html="note.contentHtml"></span>
-								<span class="block text-xs mt-0.5 truncate" style="color: var(--text-secondary)" x-text="note.positionLabel"></span>
-							</a>
-						<button
-							@click="deleteNoteById(note.id)"
-							class="p-2 rounded hover:bg-red-900/60 opacity-0 group-hover:opacity-100 transition-opacity"
-							title="Delete note"
-							aria-label="Delete note"
-						>
-							✕
-						</button>
+				<template x-for="note in noteItems" :key="note.id">
+					<div class="reader-hl-row group">
+						<template x-if="!note.editOpen">
+							<div class="flex">
+								<a href="#" @click.prevent="closeDrawers()" class="flex-1 min-w-0 block py-2 px-2 rounded hover:bg-gray-700">
+									<span class="block text-sm truncate reader-note-rich" x-html="note.contentHtml"></span>
+									<span class="block text-xs mt-0.5 truncate" style="color: var(--text-secondary)" x-text="note.positionLabel"></span>
+								</a>
+								<button
+									@click="startNoteEdit(note)"
+									class="p-2 rounded hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity"
+									title="Edit note"
+									aria-label="Edit note"
+								>
+									✎
+								</button>
+								<button
+									@click="deleteNoteById(note.id)"
+									class="p-2 rounded hover:bg-red-900/60 opacity-0 group-hover:opacity-100 transition-opacity"
+									title="Delete note"
+									aria-label="Delete note"
+								>
+									✕
+								</button>
+							</div>
+						</template>
+						<!-- Inline edit: mirrors the bookmark-rename pattern -->
+						<div class="w-full py-2" x-show="note.editOpen" @click.stop>
+							<textarea
+								x-model="note.editText"
+								rows="3"
+								class="reader-note-input"
+							></textarea>
+							<div class="flex gap-2 mt-1">
+								<button
+									@click="saveNoteEdit(note)"
+									class="flex-1 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+									:disabled="!String(note.editText || '').trim()"
+								>Save</button>
+								<button
+									@click="cancelNoteEdit(note)"
+									class="flex-1 py-1 text-xs border rounded hover:opacity-80"
+									style="border-color: var(--border);"
+								>Cancel</button>
+							</div>
+						</div>
 					</div>
 				</template>
 				<template x-if="noteItems.length === 0">