feat(Rating): show provider ratings

[wadiebs]

Description

Ratings are an important part of a game's information because they help users quickly gauge its overall quality and community reception. Making ratings more visible allows users to assess a game at a glance, compare titles more easily, and make more informed decisions about what to play.

Changes:

• Add new "Ratings" section in metadata tab (between Verification and Provider links)
• Display ratings with provider logos (16×16px) and formatted values (e.g., "8.5", "75%")
• Add "ratings-label" translation key to all 18 locale files

Formatting Maintained:

• IGDB: 0-10 scale (normalized if needed)
• ScreenScraper, MobyGames, LaunchBox, HLTB: percentage format
• Ratings only show when available for that provider

Testing

• Test on various screen sizes (mobile/desktop)
• Verify ratings appear in metadata tab
• Test with games having some, or no provider ratings
• Checked few translations (e.g. En, Fr, ES)

Screenshots

[Copilot]

Pull request overview

This PR enhances the v2 Game Details header by adding inline, provider-branded rating chips (logos + formatted values) derived from the current ROM’s metadata, so users can see key ratings at a glance without switching tabs.

Changes:

• Adds computed rating-chip data (ordered by provider) and renders it in the header meta area.
• Formats provider rating values (percent-based providers with %, IGDB normalized to a 10-point scale).
• Adds styling for the new rating chip layout and introduces a filtered visibleRegions list.

Suppressed comments (3)

frontend/src/v2/components/GameDetails/GameHeader.vue:186

• The rating chip container already has an aria-label, but the provider logo also has alt text. This can cause screen readers to announce the provider twice (image + labeled chip). Mark the logo as decorative (empty alt + aria-hidden) and keep the label on the chip container.

          <img
            class="r-v2-det-header__rating-logo"
            :src="chip.logo"
            :alt="`${chip.name} logo`"
          />

frontend/src/v2/components/GameDetails/GameHeader.vue:75

• IGDB rating is normalized to a 10-point scale, but the rendered value currently omits the "/10" suffix described in the PR (example: "5.4/10"). This makes IGDB look like an unlabelled number compared to the percent-based providers.

  const values: Array<{ key: RatingChip["key"]; value: string | null }> = [
    {
      key: "igdb_id",
      value: formatRating(
        normalizeToTen(parseFloat(rom.igdb_metadata?.total_rating ?? "")),
      ),
    },

frontend/src/v2/components/GameDetails/GameHeader.vue:180

• The PR description says rating chips should appear on a separate line below the system/platform/regions/languages/tags, but the current flex layout does not enforce a dedicated line and also renders ratings before the tags block. Depending on available width, tags may wrap after ratings (or ratings may stay on the same line as other meta), which does not match the stated layout.

      <span
        v-if="ratingChips.length || visibleRegions.length || languages.length || tags.length"
        class="r-v2-det-header__sep"
      >
        ·
      </span>

      <span v-if="ratingChips.length" class="r-v2-det-header__ratings">
        <span
          v-for="chip in ratingChips"
          :key="chip.key"
          class="r-v2-det-header__rating-inline"
          :aria-label="`${chip.name} rating ${chip.value}`"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gantoine]

good idea but could you instead insert them in these cards in the Metadata tab?

[wadiebs]

Yes, the ratings could be added to the cards in the Metadata tab, or possibly to the Overview tab.

However, I think ratings should remain immediately visible in the game header. They give users a quick sense of whether a game is considered excellent, good, average, or poorly received without requiring them to open another tab.

I also looked at several platforms (e.g. gaming, medias), and ratings are commonly displayed prominently near the title or in the main header.

This is only a suggestion, of course, and you can decide whether to accept or decline it.

[gantoine]

let's start with just having them in the Metadata pane and i can look into this later!

[wadiebs]

@gantoine is it ok for you if I move it to game "Overview" tab instead of "Metadata" ? 🙏

[gantoine]

@wadiebs metadata tab first, then i'll discuss with the team about updating the location

[wadiebs]

Done. You can check please. Thank you!

[gantoine]

@greptileai

[greptile-apps]

Greptile Summary

The PR adds a localized Ratings section to the v2 game metadata tab, displaying available provider scores alongside provider logos.

• Adds provider-specific score extraction and formatting for IGDB, ScreenScraper, MobyGames, LaunchBox, and HLTB.
• Adds responsive rating-chip styling between verification details and provider links.
• Adds the new section label to all 18 locale files.

Confidence Score: 4/5

The MobyGames scaling error should be fixed before merging because ordinary provider scores are displayed at ten times their correct percentage.

The backend can supply a MobyGames score such as "90" unchanged, while the new frontend path multiplies it by 10 and renders 900%.

Files Needing Attention: frontend/src/v2/components/GameDetails/MetadataTab.vue

Important Files Changed

Filename	Overview
frontend/src/v2/components/GameDetails/MetadataTab.vue	Adds provider rating chips and formatting, but incorrectly scales existing MobyGames scores by another factor of ten.
frontend/src/locales/en_US/rom.json	Adds the English “Ratings” label used by the new metadata section.
frontend/src/locales/bg_BG/rom.json	Representative of the coordinated locale updates adding the new ratings label across all supported languages.

Prompt To Fix All With AI

### Issue 1
frontend/src/v2/components/GameDetails/MetadataTab.vue:112-117
**MobyGames score is overscaled**

When MobyGames metadata contains a score such as `"90"`, this code multiplies the already 0–100 value by 10, causing the rating to display as `900%` instead of `90%`.

```suggestion
    {
      key: "moby_id",
      value: formatRating(parseFloat(rom.moby_metadata?.moby_score ?? ""), {
        percent: true,
      }),
    },
```

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "refactor(v2): move provider ratings from..." | Re-trigger Greptile}

[wadiebs]

fixed what greptile found.