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:
1 parent
bbecd1e5ec
commit
b8db1d109c
2 files changed
+12
-2
No files matched your search
@@ -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
|
||||
|
||||
Reference in new issue
Block a user