getMainImage() referenced /assets/images/placeholder.svg as the no-image
fallback, but src/assets/images/ never existed - any item with zero
photos rendered a browser broken-image icon instead of a placeholder.
Added the asset.
Also added an (error) handler (onImageError) on every dynamic <img> that
renders a user/admin-supplied URL (product card, cart line item, cart
payment QR code, product gallery main + thumbnails) so a 404'd/broken
image URL swaps to the shared placeholder instead of shipping broken.
- Route aria-label/alt/title strings (rating, discount, carousel arrows,
hero slides, dialog close, toast dismiss, QR code, bank payment iframe,
guest checkout fallback) through the translate pipe/service instead of
literal English.
- Drop the "Oops!"/"Упс!" apology framing from category/subcategory empty
states (en/ru/hy) - zero results is not an error.
- product-card: normalize hardcoded hex colors to design tokens
(--text-primary, --border-color, --primary-color, --bg-tertiary,
--bg-secondary); stock bar and stock badge now use semantic
--success-color/--warning-color/--error-color instead of
near-duplicate literal hex; add-to-cart hover uses --primary-hover
and --transition-* tokens; card hover shadow uses --shadow-lg
- product-card: add aria-pressed to favorite/compare toggle buttons
so their selected state isn't color-only
- filters-panel: add aria-pressed to color/size/rating filter chips;
add a visible checkmark glyph on selected color swatches plus a
focus-style selection ring, so selection isn't conveyed by border
color alone
- layout-switcher: add aria-pressed to the active layout button
- catalog-container: add aria-current to the mobile sort-sheet and
grid-sheet option buttons; active sort option gets a checkmark
and bold weight instead of color-only highlighting
- category-grid: normalize hardcoded border/background/text colors
to tokens; align focus ring with the color-mix pattern used
elsewhere in catalog
- search-results, sorting-control: normalize skeleton/select colors
to tokens; sort <select> gets a hover border state
- home: convert loading-grid/empty-state spacing to --space-* tokens
Build verified green via `npm run build`.
Out of scope / skipped:
- pages/category and pages/search retain their existing hand-rolled
skeleton markup (not app-skeleton) - replacing it is a composition
change, not covered by this visual-polish pass
- product-card rating-stars color and legacy pages/category,
pages/search hex literals left as-is where no exact token match
exists, to avoid an unintended visual shift
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
P0-5: some catalog listings (live backend data, proxied third-party
marketplace via novo.market) carry HTML-entity-encoded markup in
their description field, e.g. '<attention>...</attention>'
and '"AppStops"' — rendered verbatim as visible text on
search-result cards and the PDP description tab.
Added a pure cleanDescription() util (item.utils.ts) that decodes
the common HTML entities and strips any resulting tag-like markup,
then wired it into ProductCardComponent (covers Home/Catalog/Search/
Wishlist/Compare/PDP-similar) and ProductDescriptionComponent (PDP
description tab). Output stays a plain string rendered via text
interpolation (never innerHTML), so this only cleans up display —
it introduces no HTML-rendering/XSS surface.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
P0-1: stock badge rendered the raw item.remainings value ('High',
etc) untranslated on every product card sitewide. Now maps to
catalog.stockHigh/Medium/Low/Out via the translate pipe; the 'out'
class check is now case-insensitive to match.
P0-2: favorite/share/quick-view action-button aria-labels rendered
literal 'catalog.favorite'/'catalog.share'/'catalog.quickView' keys
because they never existed in translations.ts/en.ts/ru.ts/hy.ts
(only catalog.compare existed, and it was likewise unused). Added
all 4 keys to the Translations interface and all 3 locales.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
