From 1de4a0316cf9636bc1498d313f07bf875ad83b2b Mon Sep 17 00:00:00 2001
From: Vasyl Vdovychenko <mrviduus@gmail.com>
Date: Fri, 22 May 2026 20:50:15 -0400
Subject: [PATCH] fix(library): move delete button into UserBookDetailPage
 action row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The trash icon lived in a standalone "danger zone" block below the chapter
list, far from every other book action. Moves it into the primary action
row next to Share / Add-to-collection. Same destructive styling (red round
icon button, hover tooltip) — just colocated with related actions, less
visual orphaning.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/pages/UserBookDetailPage.tsx | 37 +++++++++++------------
 apps/web/src/styles/books.css             | 12 ++------
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/pages/UserBookDetailPage.tsx b/apps/web/src/pages/UserBookDetailPage.tsx
index c4b62edd..e615a1c3 100644
--- a/apps/web/src/pages/UserBookDetailPage.tsx
+++ b/apps/web/src/pages/UserBookDetailPage.tsx
@@ -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>
@@ -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 />
     </>
diff --git a/apps/web/src/styles/books.css b/apps/web/src/styles/books.css
index 27fc2641..8cd9e87c 100644
--- a/apps/web/src/styles/books.css
+++ b/apps/web/src/styles/books.css
@@ -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;