ctrl+click will select the book cover (#1133)

booklore-ui/src/app/book/components/book-browser/book-card/book-card.component.html

@@ -1,7 +1,8 @@
 <div class="book-card"
      [class.selected]="isSelected"
      (mouseover)="isHovered = true"
-     (mouseout)="isHovered = false">
+     (mouseout)="isHovered = false"
+     (click)="onCardClick($event)">
 
   <div class="cover-container" [ngClass]="{ 'shimmer': !isImageLoaded, 'center-info-btn': readButtonHidden }">
     <div

booklore-ui/src/app/book/components/book-browser/book-card/book-card.component.ts

@@ -698,21 +698,38 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
     this.lastMouseEvent = event;
   }
 
-  toggleSelection(event: CheckboxChangeEvent): void {
-    if (this.isCheckboxEnabled) {
-      this.isSelected = event.checked;
+  onCardClick(event: MouseEvent): void {
+    if (!event.ctrlKey) {
+      return;
+    }
+
+    this.toggleCardSelection(!this.isSelected)
+  }
+
+  toggleCardSelection(selected: boolean):void {
+      if (!this.isCheckboxEnabled) {
+        return;
+      }
+
+      this.isSelected = selected;
       const shiftKey = this.lastMouseEvent?.shiftKey ?? false;
+
       this.checkboxClick.emit({
         index: this.index,
         bookId: this.book.id,
-        selected: event.checked,
+        selected: selected,
         shiftKey: shiftKey,
       });
+
       if (this.onBookSelect) {
-        this.onBookSelect(this.book.id, event.checked);
+        this.onBookSelect(this.book.id, selected);
       }
+
       this.lastMouseEvent = null;
-    }
+  }
+
+  toggleSelection(event: CheckboxChangeEvent): void {
+    this.toggleCardSelection(event.checked);
   }
 
   ngOnDestroy(): void {