Feature/streamline repacker list in game cards

src/locales/pt-BR/translation.json

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

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

@@ -6,7 +6,7 @@ import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import * as styles from "./game-card.css";
 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";
 
@@ -44,6 +44,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}
@@ -65,17 +74,23 @@ export function GameCard({ game, ...props }: GameCardProps) {
             <p className={styles.title}>{game.title}</p>
           </div>
 
-          {uniqueRepackers.length > 0 ? (
-            <ul className={styles.downloadOptions}>
-              {uniqueRepackers.map((repacker) => (
-                <li key={repacker}>
-                  <Badge>{repacker}</Badge>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <p className={styles.noDownloadsLabel}>{t("no_downloads")}</p>
-          )}
+          <div className={styles.downloadOptions}>
+            {uniqueRepackers.length > 0 ? (
+              <>
+                {firstThreeRepackers.map((repacker) => (
+                  <Badge key={repacker}>{repacker}</Badge>
+                ))}
+                {remainingCount > 0 && (
+                  <Badge>
+                    +{remainingCount} {t("game_card:available", { count: remainingCount })}
+                  </Badge>
+                )}
+              </>
+            ) : (
+              <p className={styles.noDownloadsLabel}>{t("no_downloads")}</p>
+            )}
+          </div>
+
           <div className={styles.specifics}>
             <div className={styles.specificsItem}>
               <DownloadIcon />