refactor: extract shared app-breadcrumb component (Z14)

Only breadcrumb logic anywhere in the storefront was a local signal +
inline markup inside catalog-container. Extracted a generic
shared/ui/breadcrumb component (rootLabel/items/ariaLabel inputs,
rootClick/itemClick outputs) and repointed catalog-container onto it,
removing the now-dead inline SCSS block. Future breadcrumb usages
(product detail, admin) have something to reuse instead of duplicating.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/website/catalog/containers/catalog-container.component.html

@@ -3,13 +3,12 @@
     <button type="button" class="catalog-root-link catalog-root-link-btn" (click)="browseCategories()">{{ 'catalog.title' | translate }}</button>
 
     @if (catalogConfig().showBreadcrumbs && breadcrumb().length > 0) {
-      <nav class="catalog-breadcrumb" [attr.aria-label]="'catalog.breadcrumb' | translate">
-        <button type="button" (click)="browseCategories()">{{ 'catalog.allCategories' | translate }}</button>
-        @for (category of breadcrumb(); track category.id) {
-          <span aria-hidden="true">/</span>
-          <button type="button" (click)="selectCategory(category)">{{ category.title }}</button>
-        }
-      </nav>
+      <app-breadcrumb
+        [rootLabel]="'catalog.allCategories' | translate"
+        [ariaLabel]="'catalog.breadcrumb' | translate"
+        [items]="breadcrumbItems()"
+        (rootClick)="browseCategories()"
+        (itemClick)="onBreadcrumbItemClick($event)" />
     }
 
     <app-catalog-search-box

src/app/features/website/catalog/containers/catalog-container.component.scss

@@ -57,27 +57,6 @@
   cursor: pointer;
 }
 
-.catalog-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  color: var(--text-secondary);
-  font-size: var(--font-size-md, 0.9375rem);
-
-  a,
-  button {
-    border: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--primary-color);
-    font: inherit;
-    font-weight: var(--font-weight-bold, 700);
-    text-decoration: none;
-    cursor: pointer;
-  }
-}
-
 .catalog-section {
   display: flex;
   flex-direction: column;

src/app/features/website/catalog/containers/catalog-container.component.ts

@@ -34,6 +34,7 @@ import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.compo
 import { ButtonComponent } from '../../../../shared/ui/button/button.component';
 import { IconComponent } from '../../../../shared/ui/icon/icon.component';
 import { QuickViewDialogComponent } from '../../product/components/quick-view-dialog/quick-view-dialog.component';
+import { BreadcrumbComponent, BreadcrumbItem } from '../../../../shared/ui/breadcrumb/breadcrumb.component';
 import { CatalogState, createInitialCatalogState } from '../models/catalog-state.model';
 import { ProductShareService } from '../../user-experience/services/product-share.service';
 import { UserNotificationService } from '../../user-experience/services/user-notification.service';
@@ -59,7 +60,8 @@ type CatalogLoadingStrategy = 'pagination' | 'loadMore' | 'infiniteScroll';
     SkeletonComponent,
     ButtonComponent,
     IconComponent,
-    QuickViewDialogComponent
+    QuickViewDialogComponent,
+    BreadcrumbComponent
   ],
   templateUrl: './catalog-container.component.html',
   styleUrls: ['./catalog-container.component.scss'],
@@ -273,6 +275,17 @@ export class CatalogContainerComponent {
       });
   }
 
+  readonly breadcrumbItems = computed<BreadcrumbItem[]>(() =>
+    this.breadcrumb().map(category => ({ id: category.id, label: category.title }))
+  );
+
+  onBreadcrumbItemClick(item: BreadcrumbItem): void {
+    const category = this.breadcrumb().find(c => c.id === item.id);
+    if (category) {
+      this.selectCategory(category);
+    }
+  }
+
   selectCategory(category: Category): void {
     this.router.navigate([`/${this.languageService.currentLanguage()}/catalog`, category.id]);
   }