Proposal: Add Recently Viewed Products Strip to the Product Catalog Page

Why

Users browsing the product catalog lose track of items they have already viewed, forcing them to scroll or search again to return to a product of interest. A "Recently Viewed" strip gives users one-click access to their browsing history without leaving the catalog page.

What

Add a horizontal strip below the product grid on the catalog page (products/overview) that displays the last 10 products the user visited, ordered newest-first. Each item shows the product image, name, and an "×" button to remove it individually.

The strip is hidden when the list is empty.

Scope

In scope:

• New RecentlyViewedComponent rendered below the product grid in ProductCatalogPageComponent.
• On every ProductDetailPageComponent init, append { id, name, imageUrl } to a recently-viewed key in localStorage; keep newest-first; cap at 10 entries.
• "×" button per item removes that entry from the strip and from localStorage without a page reload.
• Strip hidden (*ngIf) when the array is empty.
• Clicking an item navigates to /products/:id.

Out of scope:

• Backend changes of any kind.
• Login or user-account scoping (storage is per-browser).
• Clearing the list on logout.
• Syncing across browser tabs.

Risks & decisions

Decision	Chosen approach	Rationale
Storage mechanism	localStorage	No backend dependency; survives page refresh; available in all target browsers
Cap strategy	Slice to 10 after prepend; oldest entry dropped	Simple; no UX for "load more" needed
Duplicate handling	If product already in list, move to front	Avoid repeated entries cluttering the strip
Component location	Traditional component declared in ProductsModule	Keeps feature self-contained; no shared-module changes