fix(book-card): add menu toggle events and update styles for open state (#1813)

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>

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"

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);
 

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>

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));
 

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;
+  }
 }