From 3156baf78e118ad86c017cd5e3590197434f8315 Mon Sep 17 00:00:00 2001
From: Shisuys <gnarnd4531@gmail.com>
Date: Sat, 11 Jan 2025 11:40:48 -0300
Subject: [PATCH] Limit visible sources

---
 src/locales/pt-BR/translation.json            |  1 +
 .../src/components/game-card/game-card.tsx    | 29 ++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
index 9c51e68e..563d9f27 100644
--- a/src/locales/pt-BR/translation.json
+++ b/src/locales/pt-BR/translation.json
@@ -280,6 +280,7 @@
     "quit": "Fechar"
   },
   "game_card": {
+    "available": "Disponível",
     "no_downloads": "Sem downloads disponíveis"
   },
   "binary_not_found_modal": {
diff --git a/src/renderer/src/components/game-card/game-card.tsx b/src/renderer/src/components/game-card/game-card.tsx
index d51a322b..95f15a8e 100644
--- a/src/renderer/src/components/game-card/game-card.tsx
+++ b/src/renderer/src/components/game-card/game-card.tsx
@@ -44,6 +44,9 @@ export function GameCard({ game, ...props }: GameCardProps) {
 
   const { numberFormatter } = useFormat();
 
+  const firstThreeRepackers = uniqueRepackers.slice(0, 3);
+  const remainingCount = uniqueRepackers.length - 3;
+
   return (
     <button
       {...props}
@@ -65,17 +68,21 @@ 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("available")}</Badge>
+                )}
+              </>
+            ) : (
+              <p className={styles.noDownloadsLabel}>{t("no_downloads")}</p>
+            )}
+          </div>
+
           <div className={styles.specifics}>
             <div className={styles.specificsItem}>
               <DownloadIcon />