9ea8c98faf
- 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>
Marketplace Frontend
Angular marketplace frontend for the client demonstration. The app uses standalone components, signals, runtime branding/configuration, and a production build optimized for the current marketplace experience.
Features
- Responsive marketplace storefront
- Category browsing and product detail pages
- Search and shopping cart flows
- Telegram login integration
- Payment handoff through the existing backend contract
- Runtime branding and configuration loading
- PWA manifest and service worker configuration
Development
Install dependencies:
npm install
Start the local development server:
npm start
Build for production:
npm run build
The production build is written to dist/dexarmarket/.
Project Structure
src/
├── app/
│ ├── components/ # Shared storefront components
│ ├── core/ # Runtime, config, guards, providers, interceptors
│ ├── dynamic-renderer/ # Page, section, and widget rendering pipeline
│ ├── facades/ # Runtime, website, builder, and backoffice facades
│ ├── pages/ # Storefront, info, legal, cart, search, and item pages
│ ├── services/ # API, cart, auth, SEO, Telegram, and language services
│ └── widgets/ # Dynamic renderer widgets
├── assets/mock/ # Local mock configuration and catalog data
├── environments/ # Development and production environment settings
└── styles/ # Shared global styles and themes
Useful Checks
npm run build
npm run arch:check
Notes
- Authentication and payment integrations are intentionally left on their existing contracts.
- Renderer and runtime architecture should remain stable during demo preparation.
- Client-facing content should avoid placeholder names, mock labels, and temporary routes.