From 9ba06eae7be61d4b1dbf5ceda7ee1c7da956ecbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?=
 <127139797+balazs-szucs@users.noreply.github.com>
Date: Wed, 10 Dec 2025 20:49:01 +0100
Subject: [PATCH] fix(book-card): add menu toggle events and update styles for
 open state (#1813)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
---
 .../book-browser/book-card/book-card.component.html      | 2 +-
 .../book-browser/book-card/book-card.component.ts        | 9 +++++++++
 .../dashboard-scroller/dashboard-scroller.component.html | 4 ++--
 .../dashboard-scroller/dashboard-scroller.component.scss | 2 +-
 .../dashboard-scroller/dashboard-scroller.component.ts   | 5 +++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
index f8414191c..b101a0525 100644
--- a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
+++ b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
@@ -85,7 +85,7 @@
           [pTooltip]="'Title: ' + displayTitle">
         {{ displayTitle }}
       </h4>
-      <p-tieredmenu #menu [model]="items" [popup]="true" appendTo="body"></p-tieredmenu>
+      <p-tieredmenu #menu [model]="items" [popup]="true" appendTo="body" (onShow)="onMenuShow()" (onHide)="onMenuHide()"></p-tieredmenu>
       <p-button
         class="custom-button-padding"
         size="small"
diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.ts b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.ts
index 41a742556..da79c112f 100644
--- a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.ts
+++ b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.ts
@@ -38,6 +38,7 @@ import {TaskHelperService} from '../../../../settings/task-management/task-helpe
 export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
 
   @Output() checkboxClick = new EventEmitter<{ index: number; bookId: number; selected: boolean; shiftKey: boolean }>();
+  @Output() menuToggled = new EventEmitter<boolean>();
 
   @Input() index!: number;
   @Input() book!: Book;
@@ -126,6 +127,14 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
     this.bookService.readBook(book.id);
   }
 
+  onMenuShow(): void {
+    this.menuToggled.emit(true);
+  }
+
+  onMenuHide(): void {
+    this.menuToggled.emit(false);
+  }
+
   onMenuToggle(event: Event, menu: TieredMenu): void {
     menu.toggle(event);
 
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html
index 1c6c5774a..a98860a4c 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html
@@ -23,8 +23,8 @@
       #scrollContainer
       [horizontal]="true">
       @for (book of books; track book.id) {
-        <div class="dashboard-scroller-card">
-          <app-book-card [book]="book" [isCheckboxEnabled]="false"></app-book-card>
+        <div class="dashboard-scroller-card" [class.menu-open]="openMenuBookId === book.id">
+          <app-book-card [book]="book" [isCheckboxEnabled]="false" (menuToggled)="handleMenuToggle(book.id, $event)"></app-book-card>
         </div>
       }
     </div>
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss
index ee046706c..90dd2c1d3 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss
@@ -96,7 +96,7 @@
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
 
-  &:hover {
+  &:hover, &.menu-open {
     transform: translateY(-4px) scale(1.04);
     filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
 
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts
index 25c5aae88..8a31aee2f 100644
--- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts
+++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts
@@ -25,4 +25,9 @@ export class DashboardScrollerComponent {
   @Input() isMagicShelf: boolean = false;
 
   @ViewChild('scrollContainer') scrollContainer!: ElementRef;
+  openMenuBookId: number | null = null;
+
+  handleMenuToggle(bookId: number, isOpen: boolean) {
+    this.openMenuBookId = isOpen ? bookId : null;
+  }
 }