feat(web): redesign the book detail page#751
Merged
Merged
Conversation
Restructure BookDetailPage to the approved mockup: a cover + metadata header (linked author byline, labelled published date, full-word language from the ISO-639 code), a File section card, a History section with humanised event labels, and a rose-tinted Danger zone. Replace the unguarded window.confirm for full-book deletion with a new ConfirmDialog modal (built on the shared modal shell) whose confirm button stays disabled until an "I understand" checkbox is ticked. All existing behaviour is preserved: download, delete file, exclude, re-bind, delete book + files, indexer search, the audiobook ASIN/enrich controls, and the media-type selector. Dual-format books gain a segmented format switcher that drives the file path, actions, download link, and per-format delete. Every user-facing string now goes through t(); a bookDetail key block is added to all seven locales. Tests rewritten to cover the redesigned page, the confirm-modal gating, the format switcher, and the humanised history label. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The old dual-format layout showed each format's on-disk status in two always-visible rows. The redesign's segmented switcher only revealed the active format's path, losing the at-a-glance view. Each switcher segment now carries a ✓ when that format has a file, plus an On disk / Not downloaded title — restoring the per-format status within the new design. Adds the two i18n keys and a regression test. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The File card carried two format-ish controls side by side: the media-type <select> (what the book record wants — drives indexer search) and the format switcher (which on-disk file to view). They read as duplicates. The media-type select now sits in the header next to the "Search indexers" button — the action it actually scopes — leaving the File card purely about the file(s) on disk. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
vavallee
added a commit
that referenced
this pull request
May 20, 2026
Patch release — the book detail page redesign (#751). Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the Bindery book-detail page to the approved mockup. This is a restyle + restructure only — no feature changes.
Layout
<section>+<h3>+ card. Shows the media-type<select>(preserved), a Format row (aMediaBadgefor single-format books, a segmented switcher for dual-format), a labelled mono Path row truncated with atitletooltip and a copy-to-clipboard button, and a uniform neutral action row (Download / Re-bind / Exclude) with a right-aligned red Delete file.<section>+<h3>+ card; rows with a status dot, a humanised event label ("Book imported", notbookImported), the release name, and a right-aligned timestamp.<section>+<h3>+ rose-tinted card with an explanatory sentence and a red "Delete book + files…" button. That button opens a newConfirmDialogmodal (built on the sharedfixed inset-0modal shell) stating what will be deleted, with an "I understand this cannot be undone" checkbox; the confirm button staysdisableduntil it is ticked. Only on confirm does it call the existing delete-book handler.Behaviour preserved
Every existing action still works and calls the same API: download file, delete file, exclude/un-exclude, re-bind, delete book + files, indexer search + grab, the audiobook ASIN save / audnex enrich controls, and the media-type selector (
updateBook).Single- vs dual-format
A single-format book renders its format as a
MediaBadge. A dual-format book (mediaType: 'both') renders a segmented Ebook / Audiobook switcher; switching drives the path shown, the download link (?format=), and the per-format Delete file call. The book'smediaTypeselector that converts between ebook/audiobook/both is kept as a separate labelled control in the File card.i18n
Every user-facing string goes through
t(). A newbookDetailkey block is added to all seven locales. Each colour utility has adark:pair (slate ↔ zinc).Verification
npm run typecheck— clean (exit 0)npm run build— succeeds (exit 0)npm run lint— no new warnings (exit 0; 5 pre-existing warnings in unrelated files)npm test -- BookDetailPage— 29 passed (exit 0)🤖 Generated with Claude Code