fix(audio player + dashboard): markdown bookmark notes, horizontal volume, transport glyphs, client-side badges

Bookmarks: notes are markdown now — capture and drawer edit are
textareas (raw source), display renders through the reader's
markdown-it + DOMPurify pipeline (renderNoteHtml) as x-html; the
edit textarea drops the enter-to-save handler so newlines survive.

Volume: the panel dragger is horizontal (mute button beside it,
7.5rem slider) per user feedback — vertical orientation read as a
scrubber clone at a glance.

Play/pause: unicode glyphs replaced with SVG — the triangle is
optically centered (2px right-bias) and the pause bars are longer
and thicker rounded rects (4.2×15 at rx 1.7).

Dashboard: the client-side card renderer (dashboard.ts — the path the
JSON sections actually render through) now mirrors the templ BookCard:
cover-corner badges for audiobook/comic/manga (books unbadged) and the
hover action shows headphones with 'Listen to …' labels for audiobooks.
BookInfo type + Go struct carry format_group end to end.

Verified on-device: pause glyph centered/thicker, horizontal volume
panel, markdown note ('**bold**' + list) rendered in the bookmarks
drawer, badges on dashboard cards, sections JSON carrying
format_group.
This commit is contained in:
John O'Keefe committed 2026-10-15 18:49:42 -04:00
1 parent 5cf34102d6
commit 2c714dcb60
5 files changed
+65 -16

No files matched your search

+7
View File
@@ -13,6 +13,7 @@
// tracks) — the mobile-web native feel from handoff item 6.
import { Alpine } from "./alpine";
import { renderNoteHtml } from "./markdown";
import { showToast } from "./toast";
type AudioChapter = { index: number; title: string; start: number; end: number };
@@ -375,6 +376,12 @@ Alpine.data("audioReader", () => ({
}
},
// Markdown notes: the drawer renders sanitized HTML from the same
// pipeline the reader's annotations use; editing stays raw markdown.
bookmarkNoteHtml(b: Record<string, unknown>): string {
return renderNoteHtml(String(b.notes ?? ""));
},
bookmarkSeconds(position: string): number {
const n = parseInt(String(position).slice("audio:".length), 10);
return Number.isFinite(n) ? n : 0;