Merge branch 'main' into feat/auto-install-on-linux-and-friend-request-notification

src/locales/en/translation.json

@@ -362,6 +362,8 @@
     "quit": "Quit"
   },
   "game_card": {
+    "available_one": "Available",
+    "available_other": "Available",
     "no_downloads": "No downloads available"
   },
   "binary_not_found_modal": {

src/locales/es/translation.json

@@ -362,6 +362,8 @@
     "quit": "Salir"
   },
   "game_card": {
+    "available_one": "Disponible",
+    "available_other": "Disponibles",
     "no_downloads": "No hay descargas disponibles"
   },
   "binary_not_found_modal": {

src/locales/pt-BR/translation.json

@@ -347,6 +347,8 @@
     "quit": "Fechar"
   },
   "game_card": {
+    "available_one": "Disponível",
+    "available_other": "Disponíveis",
     "no_downloads": "Sem downloads disponíveis"
   },
   "binary_not_found_modal": {

src/locales/ru/translation.json

@@ -360,6 +360,8 @@
     "quit": "Выйти"
   },
   "game_card": {
+    "available_one": "Доступный",
+    "available_other": "Доступный",
     "no_downloads": "Нет доступных источников"
   },
   "binary_not_found_modal": {

src/renderer/src/components/game-card/game-card.tsx

@@ -7,7 +7,7 @@ import "./game-card.scss";
 
 import { useTranslation } from "react-i18next";
 import { Badge } from "../badge/badge";
-import { useCallback, useState } from "react";
+import { useCallback, useState, useMemo } from "react";
 import { useFormat, useRepacks } from "@renderer/hooks";
 import { steamUrlBuilder } from "@shared";
 
@@ -45,6 +45,15 @@ export function GameCard({ game, ...props }: GameCardProps) {
 
   const { numberFormatter } = useFormat();
 
+  const firstThreeRepackers = useMemo(
+    () => uniqueRepackers.slice(0, 3),
+    [uniqueRepackers]
+  );
+  const remainingCount = useMemo(
+    () => uniqueRepackers.length - 3,
+    [uniqueRepackers]
+  );
+
   return (
     <button
       {...props}
@@ -68,15 +77,24 @@ export function GameCard({ game, ...props }: GameCardProps) {
 
           {uniqueRepackers.length > 0 ? (
             <ul className="game-card__download-options">
-              {uniqueRepackers.map((repacker) => (
+              {firstThreeRepackers.map((repacker) => (
                 <li key={repacker}>
                   <Badge>{repacker}</Badge>
                 </li>
               ))}
+              {remainingCount > 0 && (
+                <li>
+                  <Badge>
+                    +{remainingCount}{" "}
+                    {t("game_card:available", { count: remainingCount })}
+                  </Badge>
+                </li>
+              )}
             </ul>
           ) : (
             <p className="game-card__no-download-label">{t("no_downloads")}</p>
           )}
+
           <div className="game-card__specifics">
             <div className="game-card__specifics-item">
               <DownloadIcon />
@@ -84,11 +102,10 @@ export function GameCard({ game, ...props }: GameCardProps) {
                 {stats ? numberFormatter.format(stats.downloadCount) : "…"}
               </span>
             </div>
-
             <div className="game-card__specifics-item">
               <PeopleIcon />
               <span>
-                {stats ? numberFormatter.format(stats?.playerCount) : "…"}
+                {stats ? numberFormatter.format(stats.playerCount) : "…"}
               </span>
             </div>
           </div>