changes

src/app/pages/category/category.component.html

@@ -9,7 +9,7 @@
   @if (!error()) {
     <div class="items-grid">
       @for (item of items(); track trackByItemId($index, item)) {
-        <div class="item-card">
+        <div class="item-card" (mouseenter)="onItemHover(item.itemID)">
           <a [routerLink]="['/item', item.itemID] | langRoute" class="item-link">
             <div class="item-image">
               <img [src]="getMainImage(item)" [alt]="item.name" loading="lazy" decoding="async" />
@@ -45,7 +45,7 @@
             </div>
           </a>
           
-          <button class="add-to-cart-btn" (click)="addToCart(item.itemID, $event)">
+          <button class="add-to-cart-btn" (click)="addToCart(item.itemID, $event)" [attr.aria-label]="('category.addToCart' | translate) + ': ' + item.name">
             {{ 'category.addToCart' | translate }}
           </button>
         </div>

src/app/pages/category/category.component.ts

@@ -2,11 +2,13 @@ import { Component, OnInit, OnDestroy, signal, HostListener, ChangeDetectionStra
 import { DecimalPipe } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ApiService, CartService } from '../../services';
+import { PrefetchService } from '../../services/prefetch.service';
 import { Item } from '../../models';
 import { Subscription } from 'rxjs';
 import { getDiscountedPrice, getMainImage, trackByItemId } from '../../utils/item.utils';
 import { LangRoutePipe } from '../../pipes/lang-route.pipe';
 import { TranslatePipe } from '../../i18n/translate.pipe';
+import { SCROLL_THRESHOLD_PX, SCROLL_DEBOUNCE_MS, ITEMS_PER_PAGE } from '../../config/constants';
 
 @Component({
   selector: 'app-category',
@@ -23,7 +25,7 @@ export class CategoryComponent implements OnInit, OnDestroy {
   hasMore = signal(true);
   
   private skip = 0;
-  private readonly count = 20;
+  private readonly count = ITEMS_PER_PAGE;
   private isLoadingMore = false;
   private routeSubscription?: Subscription;
   private scrollTimeout?: ReturnType<typeof setTimeout>;
@@ -31,7 +33,8 @@ export class CategoryComponent implements OnInit, OnDestroy {
   constructor(
     private route: ActivatedRoute,
     private apiService: ApiService,
-    private cartService: CartService
+    private cartService: CartService,
+    private prefetchService: PrefetchService
   ) {}
 
   ngOnInit(): void {
@@ -90,12 +93,12 @@ export class CategoryComponent implements OnInit, OnDestroy {
     
     this.scrollTimeout = setTimeout(() => {
       const scrollPosition = window.innerHeight + window.scrollY;
-      const bottomPosition = document.documentElement.scrollHeight - 1200;
+      const bottomPosition = document.documentElement.scrollHeight - SCROLL_THRESHOLD_PX;
 
       if (scrollPosition >= bottomPosition && !this.loading() && this.hasMore() && !this.isLoadingMore) {
         this.loadItems();
       }
-    }, 100);
+    }, SCROLL_DEBOUNCE_MS);
   }
 
   addToCart(itemID: number, event: Event): void {
@@ -104,6 +107,10 @@ export class CategoryComponent implements OnInit, OnDestroy {
     this.cartService.addItem(itemID);
   }
 
+  onItemHover(itemID: number): void {
+    this.prefetchService.prefetchItem(itemID);
+  }
+
   readonly skeletonSlots = Array.from({ length: 8 });
   readonly getDiscountedPrice = getDiscountedPrice;
   readonly getMainImage = getMainImage;