Skip to content

fix(library): move delete button into UserBookDetailPage action row #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrviduus merged 1 commit into from
May 23, 2026
Merged

fix(library): move delete button into UserBookDetailPage action row #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 18 additions & 19 deletions apps/web/src/pages/UserBookDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,24 @@ export function UserBookDetailPage() {
linkOnly
/>
)}

{isReady && (
<button
type="button"
onClick={handleDelete}
disabled={deleting}
className="user-book-detail__delete-icon"
aria-label={deleting ? 'Deleting…' : 'Delete this book'}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
<path d="M10 11v6" />
<path d="M14 11v6" />
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
</svg>
</button>
)}
</div>
</div>
</div>
Expand Down Expand Up @@ -308,25 +326,6 @@ export function UserBookDetailPage() {
</div>
)}

{isReady && (
<div className="user-book-detail__danger-zone">
<button
type="button"
onClick={handleDelete}
disabled={deleting}
className="user-book-detail__delete-icon"
aria-label={deleting ? 'Deleting…' : 'Delete this book'}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<polyline points="3 6 5 6 21 6" />
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
<path d="M10 11v6" />
<path d="M14 11v6" />
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
</svg>
</button>
</div>
)}
</div>
<Footer />
</>
Expand Down
12 changes: 2 additions & 10 deletions apps/web/src/styles/books.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4662,16 +4662,8 @@ html.dark .add-to-collection-button--icon[aria-label]::after {
background: rgba(0, 0, 0, 0.04);
}

/* Danger zone — destructive actions live below the chapters list, not
in the primary action row. Apple HIG: distance + understatement
reduce accidental clicks. Trash icon + custom hover tooltip. */
.user-book-detail__danger-zone {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--color-border, #E8E2D9);
display: flex;
justify-content: center;
}
/* Trash icon now lives in the primary action row next to Share/Add-to-collection.
Custom hover tooltip via aria-label ::after. */
.user-book-detail__delete-icon {
display: inline-flex;
align-items: center;
Expand Down
Loading