Step 1-2 (audit + plan): classified 35 project markdown files into Core/Architecture/ADR/Temporary-audit/Sprint-report/Generated-review/ Duplicate/Obsolete/Historical. Agent-tooling files (.agents/skills/**, .superpowers/**, docs/context/**, CLAUDE.md/GEMINI.md/AGENTS.md/ .github/copilot-instructions.md) explicitly out of scope — intentional per-tool duplication, not documentation debt. Step 3 (merge, no information lost): - docs/PROJECT.md -> docs/PROJECT_INDEX.md, rewritten as the single entry point: system overview, living-doc index, archive pointer, current status, and a critical-finding callout up top. - docs/backend/BACKEND-INTEGRATION.md -> docs/BACKEND_API.md, docs/backend/REMAINING-BACKEND-WORK.md -> docs/BACKEND_API_REMAINING_WORK.md (also folded in a legitimate uncommitted status update that had been sitting unstaged all session: categories marked DONE, order-creation endpoint noted done). - RELEASE-NOTES.md merged into CHANGELOG.md (was a near-duplicate of the same release content in friendlier prose), then deleted. - KNOWN-ISSUES.md: added item 13 (see below) and item 14 (missing canDeactivate on admin/products edit, from the archived PROJECT-STATE audit, re-verified still true); added a correction note to Fixed item 7. - All cross-references to renamed/moved files fixed across every kept doc (grep+sed pass, then verified with a link-existence check across all 58 in-scope markdown files -> 0 broken links). Step 4 (archive, nothing deleted without merging first): created docs/archive/, moved 19 files there (3 root sprint reports, 1 platform report, SPRINT-PLAN.md, and 14 one-off audit/review/report docs). Added correction headers to the 3 archived docs whose conclusions were affected by the finding below, rather than silently leaving them misleading. Step 5: docs/PROJECT_INDEX.md rewritten per the mission brief - someone opening the repo should understand the whole system from it. IMPORTANT FINDING (surfaced during this audit, not the mission's primary goal but too significant to bury): pages/category/*, pages/search/*, pages/item-detail/*, pages/info/**, pages/legal/** (40+ files) are entirely unrouted dead code - app.routes.ts's cmsContentRoutes is a literal empty array, and category/search/product routes redirect to CatalogContainerComponent/ ProductDetailsContainerComponent, not these files. Confirmed against app.routes.ts directly and cross-checked against FRONTEND.md's own routing description. This means several fixes from earlier this cycle (RC-Premium-01, RC STORE-01) and the dead-code cleanup sprint's conclusion that these files were live were all wrong - documented as KNOWN-ISSUES.md item 13, flagged at the top of PROJECT_INDEX.md, and noted on the 3 archived docs whose conclusions it affects. No application code was changed to fix this (out of scope per this session's 'documentation only' constraint) - it needs a wire-it-up-or- delete-it decision first. Verification: tsc --noEmit clean, npm run build green, all markdown links across 58 in-scope files resolve (checked programmatically). No application/Angular/backend code modified. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
7.2 KiB
Storefront Premium UX Review — RC-Premium-01
Archived, correction (2026-07-25): the FAQ/legal-page polish below was applied to
pages/info/**/pages/legal/**, which turned out to be unrouted dead code (the CMS static-page renderer serves these routes in production, not these components) — seedocs/KNOWN-ISSUES.mditem 13. Kept here for historical accuracy.
Follow-up to docs/UI-COMPOSITION-REVIEW.md (RC-Visual-02). That sprint fixed composition bugs — undefined theme variables, hand-rolled skeletons/empty-states replaced with shared components, missing scope="col". This sprint (RC-Premium-01) is a narrower, purely visual/interaction polish pass on top of that clean baseline: hierarchy, spacing, states, motion, accessibility signaling. No redesign, no business-logic changes, no route changes, no new components — reuses src/app/shared/ui/* and the existing token set in src/styles.scss exclusively.
Executed as four sequential commits on branch B2B (not pushed):
| Commit | Scope |
|---|---|
9ea8c98 |
Home, Catalog, Search |
ea1a5d9 |
Product Details, Compare, Wishlist |
9956020 |
Cart, Checkout |
d5603c2 |
Static / Legal / Info pages |
npm run build verified green after every commit. Baseline bundle-budget warning (pre-existing, unrelated) persists.
Pages audited
Home, Catalog (grid, filters, sorting, layout switcher), Search (bar, results, trending, empty state), Product Details (gallery, info, actions, description, specs, warranty, delivery, related products, variant selector, reviews/questions/ratings), Compare, Wishlist, Cart (line items, quantity, summary, payment modal, QR/bank-payment flow), Checkout (no separate route — the payment section within Cart), Static Pages (FAQ, About, Contacts, Delivery, Guarantee, legal pages, CMS-driven static-page renderer).
Not touched, with reason:
src/app/pages/item-detail/*— confirmed dead/unrouted code.- Wishlist page and
product-details-container— already fully composed with shared components from RC-Visual-02, nothing to add. - Contacts page — no form exists to polish.
- About/Delivery/Guarantee/Company-details/Payment-terms/Privacy-policy/Public-offer/Return-policy — already token-clean, no accordion/form elements in scope.
Recurring theme: color-only signaling
The single most common finding across every area: state was communicated by color alone (selected swatch = border color change only, active tab = background color only, active sort/layout = highlight color only). Fixed everywhere it appeared by pairing color with a second signal — aria-pressed, aria-current, aria-selected, aria-live, or a visible checkmark/icon — so the same state is legible to screen readers and to users with color-vision deficiency, not just sighted mouse users.
Fixes applied by area
Home, Catalog, Search (9ea8c98)
- Hardcoded hex across
product-card,category-grid, catalog filters/results normalized to design tokens; stock/discount indicators moved to semantic--success-color/--warning-color/--error-color. - Color/size/rating filter chips, layout-switcher buttons, mobile sort/grid sheet options get
aria-pressed/aria-current; selected color swatch gets a checkmark + ring instead of border-color-only. - Add-to-cart hover, card hover shadow, favorite/compare toggle buttons (
aria-pressed) polished with existing--transition-*/--shadow-lgtokens. - Home loading/empty spacing converted to
--space-*tokens.
Product, Compare, Wishlist (ea1a5d9)
- Hardcoded hex to tokens across gallery, actions, description, related-products, variant-selector, and engagement components (tabs, reviews, questions, star-selector).
aria-pressedon wishlist/compare toggles and variant buttons; checkmark on selected color swatch;aria-current+aria-labelon active gallery thumbnail;role="tab"/aria-selectedon product tabs; per-stararia-labelon star-selector (newstarsLabeli18n key added to en/hy/ru);aria-expandedon ask-question disclosure.- Hover/focus-visible/active/disabled states added across action buttons, gallery thumbnails/toolbar, pager/load-more, form inputs.
- Review-list and question-list empty text replaced with shared
app-empty-state. - Compare table:
scope="col"/scope="row", sticky header + sticky attribute column, polished remove-chip hover/focus.
Cart, Checkout (9956020)
- Hardcoded hex normalized to tokens across line items, quantity controls, summary, login gate, terms checkbox, payment modal, QR/payment-active screen, bank-payment iframe overlay; deduplicated a repeated
.close-modal-btnrule. focus-visiblerings added to every interactive control in the flow (clear-cart, remove-item, quantity stepper, checkout/QR/card buttons, close-modal, retry-payment, copy/open-link, telegram-login).- Delivery-required warning now pairs an icon +
role="alert"with the text; quantity value getsaria-live="polite"+aria-labelso screen readers announce changes. delivery-selector: tokens normalized, hover/focus-visible added to the<select>, dead:host-context(.cart-container.alt)rule removed (orphaned by RC-Visual-02's.alttheme deletion).
Static Pages (d5603c2)
- FAQ entries converted from always-expanded static blocks to native
<details>/<summary>disclosures, reusing the existing global chevron pattern instyles.scssrather than a new accordion component. shared-legal.scss(shared by every info/legal page):transition: all 0.3s easesites normalized to--transition-normal; prose capped atmax-width: 70chfor readable line length.- CMS-driven static-page renderer (
src/app/pages/static-page/): spacing moved to--space-*tokens, prose capped at 70ch, and real styling added for headings/lists/links/images/blockquote/table — previously onlyh2/h3margins were styled for arbitrary[innerHTML]CMS content.
Remaining recommendations (not applied — flagged for follow-up, not this pass's scope)
- Payment modal / bank-payment iframe could move to shared
app-dialog, but it carries custom multi-step state and its own focus-trap already — a composition change, not visual polish. clearCart()'s nativeconfirm()could become a custom confirm-remove dialog, but no existing storefront pattern exists to follow yet — first instance would be an architecture decision.- Cart's
.email-formblock (post-payment email/phone capture) is dead CSS behind commented-out markup — candidate for deletion in a cleanup pass. pages/categoryandpages/searchstill use hand-rolled skeleton markup instead ofapp-skeleton— replacing that is a composition fix (RC-Visual-02 territory), not covered here.stars.componentrating glyph color and a few legacy hex literals inpages/category/pages/searchhave no exact token match — left as-is to avoid an unintended visual shift; worth a deliberate token-extension decision later.- Responsive verification: all four passes worked from source/SCSS with build checks only; no browser was available in this session. Recommend a visual QA pass at mobile/tablet widths, particularly the FAQ accordion, compare table's sticky column, and cart's payment modal.
Not audited
- Same exclusions as RC-Visual-02: Settings (no route exists), Diagnostics (dev-only, excluded from production).