fix(web): show ratings as stars with a short count and drop the extra words

Requested by JOY on 2026-10-31 (product page scoreboard screenshot).

Problem

The rating blocks carry too much text: 4.5 / 5.0 (6 bài kiểm chứng), Chưa có · chuẩn 10 nhóm, Điểm người mua thực chất (có trọng số). JOY's reference is the compact Trustpilot form: stars, the number, the count in parentheses (★★★★½ 4.6 (11,204)).

Expected

Every rating the site shows (product page scoreboard and title line, cards, compare, versus, leaderboards) renders as stars (fractional fill) + the number at one decimal + the count in parentheses, with the locale's thousands separator (vi: 11.204, en: 11,204).
Star colour by value: green at good scores, orange below a middle mark, red below a low mark. Proposed marks: >= 4.0 green, 3.0 to 3.9 orange, < 3.0 red. One shared helper so every block uses the same marks.
Drop the verbose words: bài kiểm chứng, chuẩn 10 nhóm, / 5.0, (có trọng số) and similar. Keep the meaning in a tooltip or an info icon if it matters.
Empty states stay short (Chưa có đánh giá), no explanation paragraphs in the score cards.
One component, reused, no per-page copies. Light and dark theme both readable.

Not in scope

The per-criterion star model and pros/cons (separate design issue). Score values themselves do not change.

Size: M

Live check after promote PR #1538 (rate.vn on main `df19614`)

Read-only check, run in headless Chromium: light and dark, phone (390 px) and desktop (1366 px).
Pages: /smartphones/apple-iphone-15-128gb, /smartphones/samsung-galaxy-s24-ultra-256gb and /leaderboard.

#1528 Star ratings: OK

Stars, value and count render together, for example the buyer score "4.8 (15)" and "4.4 (5)".
The aria-labels read "4.8 trên 5 sao, 15 đánh giá".
Fill colour is #15803d in light mode and #4ade80 in dark mode.
No star block overflows its box, and no page scrolls sideways.
None of the removed text is on screen: no "/5.0", "bài kiểm chứng" or "chuẩn 10 nhóm".
Not seen live: the orange and red bands. Every rating on these pages is 4.0 or higher. Unit tests cover those bands.

#1530 Product page order: OK

Both product pages run specs, reviews, #pdv-price-history, then #offers-table.
The jump row reads Thông số, Đánh giá, Lịch sử giá, Nơi bán.
On a phone, "Nơi bán" starts at x=362 and ends at 470, past the 390 px edge. It takes a swipe to reach, as noted in PR fix(web): the product page shows specs and reviews before prices and sellers #1535.

#1529 Spec headings: OK

The spec groups show Vietnamese only, for example "Màn hình", "Phần cứng & Hiệu năng" and "Pháp lý, Chứng nhận & SAR".
No heading pairs two languages.

No issue to file.

Navigation Menu

Repository navigation

fix(web): show ratings as stars with a short count and drop the extra words #1528

Problem

Expected

Not in scope

Live check after promote PR #1538 (rate.vn on main `df19614`)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

fix(web): show ratings as stars with a short count and drop the extra words #1528

Description

Problem

Expected

Not in scope

Activity

JOY commented on Oct 31, 2026

Live check after promote PR #1538 (rate.vn on main df19614)

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Live check after promote PR #1538 (rate.vn on main `df19614`)