feat(web): note-attached badge on banner highlight rows — corner stroke glyph

Highlights with an attached note get a small edit-note stroke SVG
(same note-pencil path as the selection popover's Note affordance) in
the card's upper-right corner — themed via var(--text-secondary),
pointer-events: none so taps pass through, header gains pr-8 on those
rows so wrapped text never runs under it. Placement matches the
Android banner's corner badge (user preference: never left of text).
Regenerated annotations_banner_templ.go from the repo root.
This commit is contained in:
John O'Keefe committed 2026-10-07 15:30:26 -04:00
1 parent bbecd1e5ec
commit b8db1d109c
2 files changed
+12 -2

No files matched your search

+11 -1
View File
@@ -60,10 +60,20 @@ templ AnnotationsBanner(book handlers.MediaDetail) {
<!-- 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">
<div class="card p-0 overflow-hidden relative">
<!-- Note-attached indicator: quiet stroke glyph in the
card's upper-right corner (never left of text) —
highlights with an attached note only. -->
<svg
x-show="row.kind === 'highlight' && row.hasNote"
class="absolute top-2 right-2 pointer-events-none reader-icon"
style="color: var(--text-secondary);"
width="13" height="13" viewBox="0 0 20 20" aria-hidden="true"
><path d="M 4 13 L 4 16 L 7 16 L 14.5 8.5 L 11.5 5.5 L 4 13 M 12.5 4.5 L 15.5 7.5"></path></svg>
<button
type="button"
class="w-full text-left px-4 py-3 flex items-start gap-3 hover:bg-surface-hover"
:class="row.kind === 'highlight' && row.hasNote ? 'pr-8' : ''"
@click="row.expanded = !row.expanded"
>
<span