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.
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.
Sprint 10.2 improves catalog UX and responsiveness without changing facades, business logic, bootstrap flow, runtime architecture, routing, authentication, or payment.
### Empty State Behavior
Two separate states are now rendered in the catalog container:
- Empty category state (`rawProducts.length === 0`):
- hides filter/sort/layout/result controls
- shows dedicated empty category component with icon, category context, friendly message, and "Browse Categories" action
This sprint applies visual and responsive UX polish only. No facade contracts, business logic, API contracts, runtime/bootstrap architecture, or widget contracts were changed.
### Desktop Layout
- Catalog products section uses a cleaner two-column structure with consistent spacing tokens (8/12/16/24/32).
- Filters panel remains sticky on desktop and uses collapsible sections with smooth expand/collapse animation.
- Product cards keep consistent image height/aspect ratio and improved vertical rhythm between image/title/rating/price/actions.
- Product action controls are vertical floating circles in the image top-right zone with fixed spacing and no overlap.
### Tablet Layout
- Sidebar filters transition into drawer interaction for better content width.
- Sort and layout controls retain consistent sizing and spacing.
- Grid/list results avoid horizontal overflow and preserve button/input containment.
### Mobile Layout
- Permanent sidebar is hidden.
- Sticky toolbar provides three entry points: Filters, Sort, Grid.
- Filters open in drawer form with scrollable content and fixed bottom actions.
- Sort and Grid open bottom-sheet style dialogs.
- Focus states and keyboard dismissal (`Esc`) are preserved for all overlays.
### Grid Types
-`grid`
-`large-grid`
-`compact-grid`
-`list`
All grid switch icons are normalized in size and selected state is visually highlighted.
### Filter Drawer and Sections
- Filter groups (Price, Availability, Rating, Brand, etc.) are collapsible.
- Range inputs are stacked vertically (`From`, `To`) with full-width controls and 12px+ spacing.
- Slider remains below price inputs for predictable scan order.
