product grid creating

2026-07-05 01:36:21 +04:00
parent d2f0f0de54
commit 0efcfb5225
20 changed files with 951 additions and 9 deletions
--- a/angular.json
+++ b/angular.json
@@ -96,8 +96,7 @@
              "dexarmarket.ru",
              "dexar.market",
              "localhost"
-            ],
-            "proxyConfig": "proxy.conf.json"
+            ]
          },
          "builder": "@angular/build:dev-server",
          "configurations": {
--- a/docs/Catalog-Module-Report.md
+++ b/docs/Catalog-Module-Report.md
@@ -0,0 +1,148 @@
+# Catalog Module Report
+
+## Scope
+
+Sprint 5 added a Catalog Module on the frozen platform architecture. No backend APIs, authentication, payment, or bootstrap contracts were changed.
+
+The catalog uses existing domain boundaries:
+
+- Category data: `CategoryFacade` -> `CategoryService` -> Category Repository -> existing `GET /category`
+- Product data: `ProductFacade` -> `ProductDataService` -> Product Provider -> existing product/category item endpoints
+
+## Implemented Module
+
+### Catalog Container
+
+- `src/app/features/website/catalog/containers/catalog-container.component.ts`
+- `src/app/features/website/catalog/containers/catalog-container.component.html`
+- `src/app/features/website/catalog/containers/catalog-container.component.scss`
+
+Responsibilities implemented:
+
+- Reads the route category id.
+- Requests category data through `CategoryFacade` only.
+- Requests product data through `ProductFacade` only.
+- Determines whether the current category has child categories.
+- Renders category grid when child categories exist.
+- Renders product grid when no child categories exist.
+- Supports root catalog entry with root categories.
+- Handles loading, empty, and error states.
+- Cancels prior category/product data subscriptions when the route changes.
+
+No `HttpClient`, backend DTO, auth, payment, bootstrap, or tenant-specific logic is used in the container.
+
+### Category Grid
+
+- `src/app/features/website/catalog/components/category-grid/category-grid.component.ts`
+- `src/app/features/website/catalog/components/category-grid/category-grid.component.html`
+- `src/app/features/website/catalog/components/category-grid/category-grid.component.scss`
+
+Reusable category grid implemented with:
+
+- Input: `Category[]`
+- Output: selected `Category`
+- Responsive grid layout
+- Domain model only
+- No data fetching
+- No backend DTOs
+
+### Product Grid
+
+- `src/app/features/website/catalog/components/product-grid/product-grid.component.ts`
+- `src/app/features/website/catalog/components/product-grid/product-grid.component.html`
+- `src/app/features/website/catalog/components/product-grid/product-grid.component.scss`
+
+Reusable product grid implemented with:
+
+- Input: `Product[]`
+- Output: selected `Product`
+- Output: add-to-cart payload
+- Output: product preview id
+- Responsive grid layout
+- Uses existing reusable product card
+- No `HttpClient`
+- No backend DTOs
+
+### Product Card Compatibility
+
+- `src/app/components/product-card/product-card.component.ts`
+- `src/app/components/product-card/product-card.component.html`
+
+Updated the reusable product card to depend on the Product Domain type and added an explicit selected output.
+
+The product card remains input/output-only and does not use services, storage, `HttpClient`, or environment configuration. It displays image, title, price, discount, badges, and stock.
+
+### Catalog State
+
+- `src/app/features/website/catalog/models/catalog-state.model.ts`
+
+Prepared future state architecture for:
+
+- Category
+- Search
+- Sort
+- Price range
+- Attributes
+- Pagination
+- Filters
+
+Backend filtering was intentionally not implemented in this sprint.
+
+## Navigation
+
+Updated routes in `src/app/app.routes.ts`:
+
+- `/catalog`
+- `/catalog/:id`
+
+Both routes load the same catalog container. Legacy category URLs redirect to the catalog route:
+
+- `/category/:id` -> `/catalog/:id`
+- `/category/:id/items` -> `/catalog/:id`
+
+Home category links now point to `/catalog/:id`.
+
+## Unlimited Category Depth
+
+Unlimited nesting is supported by the Category Domain tree utilities from Sprint 4. The catalog container does not assume a fixed depth. For any category id, it asks `CategoryFacade.getChildren(categoryId)`:
+
+- if children exist, it renders the category grid
+- if no children exist, it loads the product grid
+
+This same decision repeats for every category route depth.
+
+## Localization
+
+Added catalog translations in:
+
+- `src/app/i18n/en.ts`
+- `src/app/i18n/ru.ts`
+- `src/app/i18n/hy.ts`
+- `src/app/i18n/translations.ts`
+
+## Validation
+
+Completed checks:
+
+- Unlimited category depth is supported through facade child lookup and recursive category domain tree utilities.
+- Product grid is reusable and consumes `Product[]`.
+- Category grid is reusable and consumes `Category[]`.
+- Catalog components use domain models only.
+- Catalog data requests go through facades only.
+- DTOs remain isolated outside the catalog module.
+- Catalog module has no `HttpClient` usage.
+- Product card has no services, storage, `HttpClient`, or environment usage.
+- Authentication was not modified.
+- Payment was not modified.
+- Bootstrap contracts were not modified.
+- Backend APIs were not modified.
+
+Build validation passed:
+
+```bash
+npm run build
+```
+
+## Stop Point
+
+Catalog Module implementation is complete for Sprint 5. Stop here for approval before starting the next module or any Builder/Backoffice work.
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -7,13 +7,23 @@ const coreRoutes: Routes = [
    path: '',
    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)
  },
+  {
+    path: 'catalog',
+    loadComponent: () => import('./features/website/catalog/containers/catalog-container.component').then(m => m.CatalogContainerComponent)
+  },
+  {
+    path: 'catalog/:id',
+    loadComponent: () => import('./features/website/catalog/containers/catalog-container.component').then(m => m.CatalogContainerComponent)
+  },
  {
    path: 'category/:id',
-    loadComponent: () => import('./pages/category/subcategories.component').then(m => m.SubcategoriesComponent)
+    redirectTo: 'catalog/:id',
+    pathMatch: 'full'
  },
  {
    path: 'category/:id/items',
-    loadComponent: () => import('./pages/category/category.component').then(m => m.CategoryComponent)
+    redirectTo: 'catalog/:id',
+    pathMatch: 'full'
  },
  {
    path: 'item/:id',
--- a/src/app/components/product-card/product-card.component.html
+++ b/src/app/components/product-card/product-card.component.html
@@ -1,5 +1,5 @@
 <article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
-  <a [routerLink]="['/item', item.itemID] | langRoute" class="product-link">
+  <a [routerLink]="['/item', item.itemID] | langRoute" class="product-link" (click)="onSelected($event)">
    <div class="product-image">
      <img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" />
      @if (item.discount > 0) {
--- a/src/app/components/product-card/product-card.component.ts
+++ b/src/app/components/product-card/product-card.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
 import { RouterLink } from '@angular/router';
-import { Item } from '../../models';
+import { Product } from '../../core/products/models/product-domain.model';
 import { LangRoutePipe } from '../../pipes/lang-route.pipe';
 import { getBadgeClass, getDiscountedPrice, getMainImage } from '../../utils/item.utils';

@@ -16,7 +16,7 @@ export type ProductCardAppearance = 'standard' | 'compact';
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProductCardComponent {
-  @Input({ required: true }) item!: Item;
+  @Input({ required: true }) item!: Product;
  @Input() title = '';
  @Input() description = '';
  @Input() addToCartLabel = 'Add to cart';
@@ -27,6 +27,7 @@ export class ProductCardComponent {

  @Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
  @Output() preview = new EventEmitter<number>();
+  @Output() selected = new EventEmitter<{ itemID: number; event: Event }>();

  readonly getMainImage = getMainImage;
  readonly getDiscountedPrice = getDiscountedPrice;
@@ -35,4 +36,8 @@ export class ProductCardComponent {
  onAddToCart(event: Event): void {
    this.addToCart.emit({ itemID: this.item.itemID, event });
  }
+
+  onSelected(event: Event): void {
+    this.selected.emit({ itemID: this.item.itemID, event });
+  }
 }
--- a/src/app/features/website/catalog/components/category-grid/category-grid.component.html
+++ b/src/app/features/website/catalog/components/category-grid/category-grid.component.html
@@ -0,0 +1,24 @@
+<div class="catalog-category-grid">
+  @for (category of categories; track trackByCategoryId($index, category)) {
+    <button type="button" class="catalog-category-card" (click)="categorySelected.emit(category)">
+      <span class="catalog-category-image">
+        @if (category.icon) {
+          <img [src]="category.icon" [alt]="category.title" loading="lazy" decoding="async" />
+        } @else {
+          <span class="catalog-category-fallback">{{ category.title.charAt(0) }}</span>
+        }
+      </span>
+      <span class="catalog-category-content">
+        <span class="catalog-category-title">{{ category.title }}</span>
+        <span class="catalog-category-meta">
+          @if (category.children.length > 0) {
+            <span>{{ 'catalog.categoriesCount' | translate:{ count: category.children.length } }}</span>
+          }
+          @if (category.itemCount > 0) {
+            <span>{{ 'catalog.productsCount' | translate:{ count: category.itemCount } }}</span>
+          }
+        </span>
+      </span>
+    </button>
+  }
+</div>
--- a/src/app/features/website/catalog/components/category-grid/category-grid.component.scss
+++ b/src/app/features/website/catalog/components/category-grid/category-grid.component.scss
@@ -0,0 +1,112 @@
+.catalog-category-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 24px;
+}
+
+.catalog-category-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+  }
+
+  &:focus-visible {
+    outline: 3px solid rgba(73, 118, 113, 0.28);
+    outline-offset: 4px;
+    border-radius: 13px;
+  }
+}
+
+.catalog-category-image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border: 1px solid #d3dad9;
+  border-radius: 13px 13px 0 0;
+  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.catalog-category-fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  color: #497671;
+  font-size: 4rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #f7f8f8 0%, #e6eceb 100%);
+}
+
+.catalog-category-content {
+  min-height: 88px;
+  padding: 13px 16px;
+  border: 1px solid #d3dad9;
+  border-top: 0;
+  border-radius: 0 0 13px 13px;
+  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
+  background: #f5f3f9;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.catalog-category-title {
+  color: #1e3c38;
+  font-size: 1rem;
+  font-weight: 800;
+  line-height: 1.25;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.catalog-category-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  span {
+    padding: 2px 7px;
+    border-radius: 999px;
+    background: rgba(73, 118, 113, 0.1);
+    color: #3d635f;
+    font-size: 0.8rem;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 640px) {
+  .catalog-category-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  .catalog-category-content {
+    min-height: 84px;
+    padding: 10px 12px;
+  }
+}
--- a/src/app/features/website/catalog/components/category-grid/category-grid.component.ts
+++ b/src/app/features/website/catalog/components/category-grid/category-grid.component.ts
@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Category } from '../../../../../core/categories/models/category-domain.model';
+import { TranslatePipe } from '../../../../../i18n/translate.pipe';
+
+@Component({
+  selector: 'app-catalog-category-grid',
+  standalone: true,
+  imports: [TranslatePipe],
+  templateUrl: './category-grid.component.html',
+  styleUrls: ['./category-grid.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CatalogCategoryGridComponent {
+  @Input({ required: true }) categories: Category[] = [];
+
+  @Output() categorySelected = new EventEmitter<Category>();
+
+  trackByCategoryId(_index: number, category: Category): number {
+    return category.id;
+  }
+}
--- a/src/app/features/website/catalog/components/product-grid/product-grid.component.html
+++ b/src/app/features/website/catalog/components/product-grid/product-grid.component.html
@@ -0,0 +1,18 @@
+<div class="catalog-product-grid">
+  @for (product of products; track trackByItemId($index, product)) {
+    <div class="catalog-product-shell">
+      <app-product-card
+        [item]="product"
+        [title]="productTitle(product)"
+        [description]="productDescription(product)"
+        [showDescription]="true"
+        [showStock]="true"
+        [showRating]="true"
+        [addToCartLabel]="'catalog.addToCart' | translate"
+        (selected)="productSelected.emit(product)"
+        (addToCart)="onAddToCart(product, $event.event)"
+        (preview)="productPreview.emit($event)"
+      />
+    </div>
+  }
+</div>
--- a/src/app/features/website/catalog/components/product-grid/product-grid.component.scss
+++ b/src/app/features/website/catalog/components/product-grid/product-grid.component.scss
@@ -0,0 +1,17 @@
+.catalog-product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 24px;
+  align-items: stretch;
+}
+
+.catalog-product-shell {
+  min-width: 0;
+}
+
+@media (max-width: 640px) {
+  .catalog-product-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+}
--- a/src/app/features/website/catalog/components/product-grid/product-grid.component.ts
+++ b/src/app/features/website/catalog/components/product-grid/product-grid.component.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { Product } from '../../../../../core/products/models/product-domain.model';
+import { ProductCardComponent } from '../../../../../components/product-card/product-card.component';
+import { TranslatePipe } from '../../../../../i18n/translate.pipe';
+import { LanguageService } from '../../../../../services/language.service';
+import { getTranslatedField, trackByItemId } from '../../../../../utils/item.utils';
+
+@Component({
+  selector: 'app-catalog-product-grid',
+  standalone: true,
+  imports: [ProductCardComponent, TranslatePipe],
+  templateUrl: './product-grid.component.html',
+  styleUrls: ['./product-grid.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CatalogProductGridComponent {
+  @Input({ required: true }) products: Product[] = [];
+
+  @Output() productSelected = new EventEmitter<Product>();
+  @Output() addToCart = new EventEmitter<{ product: Product; event: Event }>();
+  @Output() productPreview = new EventEmitter<number>();
+
+  private readonly languageService = inject(LanguageService);
+
+  readonly trackByItemId = trackByItemId;
+
+  productTitle(product: Product): string {
+    return getTranslatedField(product, 'name', this.languageService.currentLanguage());
+  }
+
+  productDescription(product: Product): string {
+    return getTranslatedField(product, 'simpleDescription', this.languageService.currentLanguage());
+  }
+
+  onAddToCart(product: Product, event: Event): void {
+    this.addToCart.emit({ product, event });
+  }
+}
--- a/src/app/features/website/catalog/containers/catalog-container.component.html
+++ b/src/app/features/website/catalog/containers/catalog-container.component.html
@@ -0,0 +1,80 @@
+<main class="catalog-page">
+  <header class="catalog-header">
+    <a [routerLink]="'/catalog' | langRoute" class="catalog-root-link">{{ 'catalog.title' | translate }}</a>
+
+    @if (breadcrumb().length > 0) {
+      <nav class="catalog-breadcrumb" [attr.aria-label]="'catalog.breadcrumb' | translate">
+        <a [routerLink]="'/catalog' | langRoute">{{ 'catalog.allCategories' | translate }}</a>
+        @for (category of breadcrumb(); track category.id) {
+          <span aria-hidden="true">/</span>
+          <button type="button" (click)="selectCategory(category)">{{ category.title }}</button>
+        }
+      </nav>
+    }
+  </header>
+
+  @if (loading()) {
+    <section class="catalog-loading" [attr.aria-label]="'catalog.loading' | translate">
+      @for (slot of skeletonSlots; track slot) {
+        <div class="catalog-skeleton-card">
+          <div class="catalog-skeleton-image"></div>
+          <div class="catalog-skeleton-line catalog-skeleton-title"></div>
+          <div class="catalog-skeleton-line"></div>
+        </div>
+      }
+    </section>
+  }
+
+  @if (error()) {
+    <section class="catalog-message catalog-message-error">
+      <h1>{{ 'catalog.errorTitle' | translate }}</h1>
+      <p>{{ error()! | translate }}</p>
+      <button type="button" (click)="retry()">{{ 'catalog.retry' | translate }}</button>
+    </section>
+  }
+
+  @if (!loading() && !error() && viewMode() === 'categories') {
+    <section class="catalog-section">
+      <div class="catalog-section-heading">
+        <h1>{{ state().category?.title || ('catalog.allCategories' | translate) }}</h1>
+        <p>{{ 'catalog.categoryHint' | translate }}</p>
+      </div>
+
+      @if (categories().length > 0) {
+        <app-catalog-category-grid [categories]="categories()" (categorySelected)="selectCategory($event)" />
+      } @else {
+        <div class="catalog-message">
+          <h2>{{ 'catalog.emptyTitle' | translate }}</h2>
+          <p>{{ 'catalog.emptyCategories' | translate }}</p>
+        </div>
+      }
+    </section>
+  }
+
+  @if (!loading() && !error() && viewMode() === 'products') {
+    <section class="catalog-section">
+      <div class="catalog-section-heading">
+        <h1>{{ state().category?.title || ('catalog.products' | translate) }}</h1>
+        <p>{{ 'catalog.productHint' | translate }}</p>
+      </div>
+
+      @if (loadingProducts()) {
+        <div class="catalog-inline-loading">{{ 'catalog.loadingProducts' | translate }}</div>
+      }
+
+      @if (!loadingProducts() && products().length > 0) {
+        <app-catalog-product-grid
+          [products]="products()"
+          (productSelected)="selectProduct($event)"
+          (addToCart)="addToCart($event)"
+          (productPreview)="previewProduct($event)"
+        />
+      } @else if (!loadingProducts()) {
+        <div class="catalog-message">
+          <h2>{{ 'catalog.emptyTitle' | translate }}</h2>
+          <p>{{ 'catalog.emptyProducts' | translate }}</p>
+        </div>
+      }
+    </section>
+  }
+</main>
--- a/src/app/features/website/catalog/containers/catalog-container.component.scss
+++ b/src/app/features/website/catalog/containers/catalog-container.component.scss
@@ -0,0 +1,170 @@
+.catalog-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  color: #1e3c38;
+}
+
+.catalog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+
+.catalog-root-link {
+  width: fit-content;
+  color: #1e3c38;
+  font-size: 2rem;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.catalog-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  color: #697777;
+  font-size: 0.95rem;
+
+  a,
+  button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: #497671;
+    font: inherit;
+    font-weight: 700;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.catalog-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.catalog-section-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  h1 {
+    margin: 0;
+    color: #1e3c38;
+    font-size: 1.75rem;
+    font-weight: 900;
+  }
+
+  p {
+    margin: 0;
+    color: #697777;
+    font-size: 1rem;
+  }
+}
+
+.catalog-loading {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 24px;
+}
+
+.catalog-skeleton-card {
+  min-height: 260px;
+  border: 1px solid #d3dad9;
+  border-radius: 13px;
+  padding: 12px;
+  background: #f5f3f9;
+}
+
+.catalog-skeleton-image,
+.catalog-skeleton-line {
+  border-radius: 10px;
+  background: linear-gradient(90deg, #edf0ef 25%, #f8faf9 50%, #edf0ef 75%);
+  background-size: 200% 100%;
+  animation: catalog-shimmer 1.3s ease-in-out infinite;
+}
+
+.catalog-skeleton-image {
+  aspect-ratio: 4 / 3;
+  margin-bottom: 14px;
+}
+
+.catalog-skeleton-line {
+  height: 14px;
+  margin-top: 10px;
+}
+
+.catalog-skeleton-title {
+  width: 72%;
+  height: 18px;
+}
+
+.catalog-inline-loading,
+.catalog-message {
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  color: #697777;
+}
+
+.catalog-message {
+  h1,
+  h2 {
+    margin: 0;
+    color: #1e3c38;
+    font-size: 1.35rem;
+  }
+
+  p {
+    margin: 0;
+    max-width: 420px;
+    line-height: 1.5;
+  }
+
+  button {
+    min-height: 42px;
+    padding: 0 22px;
+    border: 0;
+    border-radius: 13px;
+    background: #497671;
+    color: #fff;
+    font-weight: 800;
+    cursor: pointer;
+  }
+}
+
+.catalog-message-error {
+  color: #991b1b;
+}
+
+@keyframes catalog-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (max-width: 640px) {
+  .catalog-page {
+    padding: 16px;
+  }
+
+  .catalog-root-link {
+    font-size: 1.5rem;
+  }
+
+  .catalog-section-heading h1 {
+    font-size: 1.35rem;
+  }
+
+  .catalog-loading {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+}
--- a/src/app/features/website/catalog/containers/catalog-container.component.ts
+++ b/src/app/features/website/catalog/containers/catalog-container.component.ts
@@ -0,0 +1,170 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { combineLatest } from 'rxjs';
+import { Subscription } from 'rxjs';
+import { Category } from '../../../../core/categories/models/category-domain.model';
+import { Product } from '../../../../core/products/models/product-domain.model';
+import { CategoryFacade } from '../../../../facades/platform/category.facade';
+import { ProductFacade } from '../../../../facades/platform/product.facade';
+import { CartService } from '../../../../services';
+import { LanguageService } from '../../../../services/language.service';
+import { PrefetchService } from '../../../../services/prefetch.service';
+import { LangRoutePipe } from '../../../../pipes/lang-route.pipe';
+import { TranslatePipe } from '../../../../i18n/translate.pipe';
+import { CatalogCategoryGridComponent } from '../components/category-grid/category-grid.component';
+import { CatalogProductGridComponent } from '../components/product-grid/product-grid.component';
+import { CatalogState, createInitialCatalogState } from '../models/catalog-state.model';
+
+type CatalogViewMode = 'categories' | 'products';
+
+@Component({
+  selector: 'app-catalog-container',
+  standalone: true,
+  imports: [RouterLink, LangRoutePipe, TranslatePipe, CatalogCategoryGridComponent, CatalogProductGridComponent],
+  templateUrl: './catalog-container.component.html',
+  styleUrls: ['./catalog-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CatalogContainerComponent {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly categoryFacade = inject(CategoryFacade);
+  private readonly productFacade = inject(ProductFacade);
+  private readonly cartService = inject(CartService);
+  private readonly prefetchService = inject(PrefetchService);
+  private readonly languageService = inject(LanguageService);
+
+  readonly state = signal<CatalogState>(createInitialCatalogState());
+  readonly categories = signal<Category[]>([]);
+  readonly products = signal<Product[]>([]);
+  readonly breadcrumb = signal<Category[]>([]);
+  readonly viewMode = signal<CatalogViewMode>('categories');
+  readonly loading = signal(true);
+  readonly loadingProducts = signal(false);
+  readonly error = signal<string | null>(null);
+
+  readonly skeletonSlots = Array.from({ length: 8 });
+
+  private dataSubscription?: Subscription;
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.dataSubscription?.unsubscribe());
+
+    this.route.paramMap
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(params => {
+        const categoryId = Number(params.get('id')) || null;
+        this.enterCategory(categoryId);
+      });
+  }
+
+  enterCategory(categoryId: number | null): void {
+    this.dataSubscription?.unsubscribe();
+    this.loading.set(true);
+    this.loadingProducts.set(false);
+    this.error.set(null);
+    this.categories.set([]);
+    this.products.set([]);
+    this.breadcrumb.set([]);
+    this.categoryFacade.selectCategory(categoryId);
+    this.state.set({
+      ...createInitialCatalogState(),
+      filters: {
+        ...createInitialCatalogState().filters,
+        categoryIds: categoryId == null ? [] : [categoryId],
+      },
+    });
+
+    if (categoryId == null) {
+      this.dataSubscription = this.categoryFacade.getRootCategories()
+        .subscribe({
+          next: categories => this.renderCategories(null, categories, []),
+          error: () => this.setError('catalog.error'),
+        });
+      return;
+    }
+
+    this.dataSubscription = combineLatest([
+      this.categoryFacade.getCategoryById(categoryId),
+      this.categoryFacade.getChildren(categoryId),
+      this.categoryFacade.getBreadcrumb(categoryId),
+    ]).subscribe({
+        next: ([category, children, breadcrumb]) => {
+          this.breadcrumb.set(breadcrumb);
+          this.state.update(current => ({ ...current, category: category ?? null }));
+
+          if (children.length > 0) {
+            this.renderCategories(category ?? null, children, breadcrumb);
+            return;
+          }
+
+          this.loadProducts(categoryId);
+        },
+        error: () => this.setError('catalog.error'),
+      });
+  }
+
+  selectCategory(category: Category): void {
+    this.router.navigate([`/${this.languageService.currentLanguage()}/catalog`, category.id]);
+  }
+
+  selectProduct(product: Product): void {
+    this.router.navigate([`/${this.languageService.currentLanguage()}/item`, product.itemID]);
+  }
+
+  addToCart(payload: { product: Product; event: Event }): void {
+    payload.event.preventDefault();
+    payload.event.stopPropagation();
+    this.cartService.addItem(payload.product.itemID);
+  }
+
+  previewProduct(productId: number): void {
+    this.prefetchService.prefetchItem(productId);
+  }
+
+  retry(): void {
+    this.enterCategory(this.state().category?.id ?? null);
+  }
+
+  private renderCategories(category: Category | null, categories: Category[], breadcrumb: Category[]): void {
+    const ordered = [...categories].sort((a, b) => a.priority - b.priority || a.id - b.id);
+    this.viewMode.set('categories');
+    this.state.update(current => ({ ...current, category }));
+    this.categories.set(ordered);
+    this.products.set([]);
+    this.breadcrumb.set(breadcrumb);
+    this.loading.set(false);
+  }
+
+  private loadProducts(categoryId: number): void {
+    const pagination = this.state().pagination;
+    this.viewMode.set('products');
+    this.loadingProducts.set(true);
+
+    this.dataSubscription = this.productFacade.getProductsByCategory(categoryId, { count: pagination.count, skip: pagination.skip })
+      .subscribe({
+      next: result => {
+        this.products.set(result.items);
+        this.state.update(current => ({
+          ...current,
+          pagination: {
+            ...current.pagination,
+            total: result.total,
+            hasMore: result.items.length >= current.pagination.count,
+          },
+        }));
+        this.loading.set(false);
+        this.loadingProducts.set(false);
+      },
+      error: () => this.setError('catalog.error'),
+      });
+  }
+
+  private setError(message: string): void {
+    this.error.set(message);
+    this.loading.set(false);
+    this.loadingProducts.set(false);
+  }
+}
--- a/src/app/features/website/catalog/models/catalog-state.model.ts
+++ b/src/app/features/website/catalog/models/catalog-state.model.ts
@@ -0,0 +1,54 @@
+import { Category } from '../../../../core/categories/models/category-domain.model';
+
+export type CatalogSort = 'relevance' | 'price_asc' | 'price_desc' | 'popular' | 'rating' | 'latest';
+
+export interface CatalogPriceRange {
+  min?: number;
+  max?: number;
+}
+
+export interface CatalogPaginationState {
+  count: number;
+  skip: number;
+  total: number;
+  hasMore: boolean;
+}
+
+export interface CatalogFilterState {
+  categoryIds: number[];
+  priceRange: CatalogPriceRange;
+  attributes: Record<string, string[]>;
+}
+
+export interface CatalogState {
+  category: Category | null;
+  search: string;
+  sort: CatalogSort;
+  priceRange: CatalogPriceRange;
+  attributes: Record<string, string[]>;
+  pagination: CatalogPaginationState;
+  filters: CatalogFilterState;
+}
+
+export const DEFAULT_CATALOG_PAGE_SIZE = 24;
+
+export function createInitialCatalogState(): CatalogState {
+  return {
+    category: null,
+    search: '',
+    sort: 'relevance',
+    priceRange: {},
+    attributes: {},
+    pagination: {
+      count: DEFAULT_CATALOG_PAGE_SIZE,
+      skip: 0,
+      total: 0,
+      hasMore: true,
+    },
+    filters: {
+      categoryIds: [],
+      priceRange: {},
+      attributes: {},
+    },
+  };
+}
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -144,6 +144,25 @@ export const en: Translations = {
    goHome: 'Go home',
    loading: 'Loading products...',
  },
+  catalog: {
+    title: 'Catalog',
+    breadcrumb: 'Catalog breadcrumb',
+    allCategories: 'All categories',
+    products: 'Products',
+    loading: 'Loading catalog...',
+    loadingProducts: 'Loading products...',
+    errorTitle: 'Catalog is unavailable',
+    error: 'Could not load catalog data. Try again later.',
+    retry: 'Try again',
+    categoryHint: 'Choose a category to continue',
+    productHint: 'Browse products in this category',
+    emptyTitle: 'Nothing here yet',
+    emptyCategories: 'There are no child categories in this section yet.',
+    emptyProducts: 'There are no products in this category yet.',
+    addToCart: 'Add to cart',
+    categoriesCount: '{{count}} categories',
+    productsCount: '{{count}} products',
+  },
  subcategories: {
    loading: 'Loading subcategories...',
    retry: 'Try again',
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -144,6 +144,25 @@ export const hy: Translations = {
    goHome: 'Գլխավոր',
    loading: 'Ապրանքների բեռնում...',
  },
+  catalog: {
+    title: 'Կատալոգ',
+    breadcrumb: 'Կատալոգի նավիգացիա',
+    allCategories: 'Բոլոր կատեգորիաները',
+    products: 'Ապրանքներ',
+    loading: 'Կատալոգի բեռնում...',
+    loadingProducts: 'Ապրանքների բեռնում...',
+    errorTitle: 'Կատալոգը հասանելի չէ',
+    error: 'Չհաջողվեց բեռնել կատալոգը։ Փորձեք ավելի ուշ։',
+    retry: 'Փորձել կրկին',
+    categoryHint: 'Ընտրեք կատեգորիա շարունակելու համար',
+    productHint: 'Ապրանքներ այս կատեգորիայում',
+    emptyTitle: 'Այստեղ դեռ դատարկ է',
+    emptyCategories: 'Այս բաժնում դեռ ենթակատեգորիաներ չկան։',
+    emptyProducts: 'Այս կատեգորիայում դեռ ապրանքներ չկան։',
+    addToCart: 'Ավելացնել զամբյուղ',
+    categoriesCount: '{{count}} կատեգորիա',
+    productsCount: '{{count}} ապրանք',
+  },
  subcategories: {
    loading: 'Ենթակատեգորիաների բեռնում...',
    retry: 'Փորձել կրկին',
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -144,6 +144,25 @@ export const ru: Translations = {
    goHome: 'На главную',
    loading: 'Загрузка товаров...',
  },
+  catalog: {
+    title: 'Каталог',
+    breadcrumb: 'Навигация по каталогу',
+    allCategories: 'Все категории',
+    products: 'Товары',
+    loading: 'Загрузка каталога...',
+    loadingProducts: 'Загрузка товаров...',
+    errorTitle: 'Каталог недоступен',
+    error: 'Не удалось загрузить каталог. Попробуйте позже.',
+    retry: 'Попробовать снова',
+    categoryHint: 'Выберите категорию, чтобы продолжить',
+    productHint: 'Товары в выбранной категории',
+    emptyTitle: 'Здесь пока пусто',
+    emptyCategories: 'В этом разделе пока нет дочерних категорий.',
+    emptyProducts: 'В этой категории пока нет товаров.',
+    addToCart: 'В корзину',
+    categoriesCount: '{{count}} категорий',
+    productsCount: '{{count}} товаров',
+  },
  subcategories: {
    loading: 'Загрузка подкатегорий...',
    retry: 'Попробовать снова',
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -142,6 +142,25 @@ export interface Translations {
    goHome: string;
    loading: string;
  };
+  catalog: {
+    title: string;
+    breadcrumb: string;
+    allCategories: string;
+    products: string;
+    loading: string;
+    loadingProducts: string;
+    errorTitle: string;
+    error: string;
+    retry: string;
+    categoryHint: string;
+    productHint: string;
+    emptyTitle: string;
+    emptyCategories: string;
+    emptyProducts: string;
+    addToCart: string;
+    categoriesCount: string;
+    productsCount: string;
+  };
  subcategories: {
    loading: string;
    retry: string;
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -63,7 +63,7 @@
        } @else {
          <div class="novo-categories-grid">
            @for (category of topLevelCategories(); track category.id) {
-              <a [routerLink]="['/category', category.id] | langRoute" class="novo-category-card">
+              <a [routerLink]="['/catalog', category.id] | langRoute" class="novo-category-card">
                <div class="novo-category-image">
                  @if (category.icon) {
                    <img [src]="category.icon" [alt]="categoryName(category)" loading="lazy" />
@@ -151,7 +151,7 @@
        } @else {
          <div class="dexar-categories-grid">
            @for (category of topLevelCategories(); track category.id) {
-              <a [routerLink]="['/category', category.id] | langRoute" 
+              <a [routerLink]="['/catalog', category.id] | langRoute" 
                 class="dexar-category-card">
                <div class="dexar-category-image">
                  @if (category.icon) {