Refactor: Remove translation keys (keeping pt-br and en) and clean up repacks modal styles and logic

src/renderer/src/pages/game-details/modals/repacks-modal.scss

@@ -2,43 +2,7 @@
 
 .repacks-modal {
   &__filter-container {
-    margin-bottom: 1rem;
-  }
-
-  &__filter-top {
-    margin-bottom: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  &__filter-toggle {
-    align-self: flex-start;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: globals.$small-font-size;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    padding: 0.5rem 0.75rem;
-    border-radius: 6px;
-    transition: background-color 0.2s ease;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  &__filter-toggle {
-    align-self: flex-start;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: globals.$small-font-size;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    padding: 0.5rem 0.75rem;
-    border-radius: 6px;
-    transition: background-color 0.2s ease;
+    margin-bottom: calc(globals.$spacing-unit * 2);
   }
 
   &__repacks {
@@ -65,104 +29,4 @@
   &__repack-info {
     font-size: globals.$small-font-size;
   }
-
-  &__no-results {
-    width: 100%;
-    padding: calc(globals.$spacing-unit * 4) 0;
-    text-align: center;
-    color: globals.$muted-color;
-    font-size: globals.$small-font-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__no-results-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: calc(globals.$spacing-unit * 1.5);
-    max-width: 480px;
-    width: 100%;
-  }
-
-  &__no-results-text {
-    color: globals.$muted-color;
-    font-size: globals.$small-font-size;
-    text-align: center;
-  }
-
-  &__no-results-button {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-
-  &__download-sources {
-    padding: 0;
-    background-color: var(--color-background-light);
-    border-radius: 8px;
-    margin-bottom: 1rem;
-    margin-top: calc(globals.$spacing-unit * 0.5);
-    max-height: 0;
-    overflow: hidden;
-    transition:
-      max-height 0.3s ease,
-      padding 0.3s ease;
-
-    &--open {
-      padding: 0.75rem;
-      max-height: 250px;
-    }
-  }
-
-  &__filter-label {
-    display: none;
-    font-size: globals.$small-font-size;
-    font-weight: 600;
-    margin-bottom: 0.75rem;
-    color: var(--color-text-secondary);
-    width: 100%;
-  }
-
-  &__source-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 0.5rem;
-    max-height: 200px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    overflow-x: hidden;
-    align-items: start;
-    padding-right: 0.25rem; /* Espaço para a barra de rolagem */
-  }
-
-  &__source-item {
-    padding: 0.35rem 0.5rem;
-    padding: 0.35rem 0.5rem;
-    background: var(--color-surface, rgba(0, 0, 0, 0.03));
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    min-height: 38px;
-    box-sizing: border-box;
-    width: 100%;
-    width: 100%;
-  }
-
-  &__source-item :global(.checkbox-field) {
-    width: 100%;
-    min-width: 0;
-  }
-
-  &__source-item :global(.checkbox-field__label) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    font-size: 0.85rem;
-    width: 100%;
-  }
-}
+}

src/renderer/src/pages/game-details/modals/repacks-modal.tsx

@@ -1,7 +1,5 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { PlusCircleIcon, ChevronDownIcon, ChevronUpIcon } from "@primer/octicons-react";
 
 import {
   Badge,
@@ -9,10 +7,7 @@ import {
   DebridBadge,
   Modal,
   TextField,
-  CheckboxField,
 } from "@renderer/components";
-import { downloadSourcesTable } from "@renderer/dexie";
-import type { DownloadSource } from "@types";
 import type { GameRepack } from "@types";
 
 import { DownloadSettingsModal } from "./download-settings-modal";
@@ -41,13 +36,6 @@ export function RepacksModal({
   const [filteredRepacks, setFilteredRepacks] = useState<GameRepack[]>([]);
   const [repack, setRepack] = useState<GameRepack | null>(null);
   const [showSelectFolderModal, setShowSelectFolderModal] = useState(false);
-  const [downloadSources, setDownloadSources] = useState<DownloadSource[]>(
-    []
-  );
-  const [selectedFingerprints, setSelectedFingerprints] = useState<string[]>(
-    []
-  );
-  const [filterTerm, setFilterTerm] = useState("");
 
   const [hashesInDebrid, setHashesInDebrid] = useState<Record<string, boolean>>(
     {}
@@ -58,7 +46,6 @@ export function RepacksModal({
   const { t } = useTranslation("game_details");
 
   const { formatDate } = useDate();
-  const navigate = useNavigate();
 
   const getHashFromMagnet = (magnet: string) => {
     if (!magnet || typeof magnet !== "string") {
@@ -103,39 +90,8 @@ export function RepacksModal({
   }, [repacks, hashesInDebrid]);
 
   useEffect(() => {
-    downloadSourcesTable.toArray().then((sources) => {
-      const uniqueRepackers = new Set(sortedRepacks.map((r) => r.repacker));
-      const filteredSources = sources.filter(
-        (s) => s.name && uniqueRepackers.has(s.name) && !!s.fingerprint
-      );
-      setDownloadSources(filteredSources);
-    });
-  }, [sortedRepacks]);
-
-  useEffect(() => {
-    const term = filterTerm.trim().toLowerCase();
-
-    const byTerm = sortedRepacks.filter((repack) => {
-      if (!term) return true;
-      const lowerTitle = repack.title.toLowerCase();
-      const lowerRepacker = repack.repacker.toLowerCase();
-      return (
-        lowerTitle.includes(term) || lowerRepacker.includes(term)
-      );
-    });
-
-    const bySource = byTerm.filter((repack) => {
-      if (selectedFingerprints.length === 0) return true;
-
-      return downloadSources.some(
-        (src) =>
-          selectedFingerprints.includes(src.fingerprint) &&
-          src.name === repack.repacker
-      );
-    });
-
-    setFilteredRepacks(bySource);
-  }, [sortedRepacks, filterTerm, selectedFingerprints, downloadSources]);
+    setFilteredRepacks(sortedRepacks);
+  }, [sortedRepacks, visible, game]);
 
   const handleRepackClick = (repack: GameRepack) => {
     setRepack(repack);
@@ -143,14 +99,17 @@ export function RepacksModal({
   };
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    setFilterTerm(event.target.value);
-  };
+    const term = event.target.value.toLocaleLowerCase();
 
-  const toggleFingerprint = (fingerprint: string) => {
-    setSelectedFingerprints((prev) =>
-      prev.includes(fingerprint)
-        ? prev.filter((f) => f !== fingerprint)
-        : [...prev, fingerprint]
+    setFilteredRepacks(
+      sortedRepacks.filter((repack) => {
+        const lowerCaseTitle = repack.title.toLowerCase();
+        const lowerCaseRepacker = repack.repacker.toLowerCase();
+
+        return [lowerCaseTitle, lowerCaseRepacker].some((value) =>
+          value.includes(term)
+        );
+      })
     );
   };
 
@@ -159,8 +118,6 @@ export function RepacksModal({
     return repack.uris.some((uri) => uri.includes(game.download!.uri));
   };
 
-  const [isFilterDrawerOpen, setIsFilterDrawerOpen] = useState(false);
-
   return (
     <>
       <DownloadSettingsModal
@@ -177,88 +134,39 @@ export function RepacksModal({
         onClose={onClose}
       >
         <div className="repacks-modal__filter-container">
-          <div className="repacks-modal__filter-top">
-            <TextField placeholder={t("filter")} onChange={handleFilter} />
-            <Button
-              type="button"
-              theme="outline"
-              onClick={() => setIsFilterDrawerOpen(!isFilterDrawerOpen)}
-              className="repacks-modal__filter-toggle"
-            >
-              {t("filter_by_source")}
-              {isFilterDrawerOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-            </Button>
-          </div>
-
-          <div className={`repacks-modal__download-sources ${isFilterDrawerOpen ? 'repacks-modal__download-sources--open' : ''}`}>
-            <div className="repacks-modal__source-grid">
-              {downloadSources.map((source) => (
-                <div 
-                  key={source.fingerprint} 
-                  className="repacks-modal__source-item"
-                >
-                  <CheckboxField
-                    label={source.name || source.url}
-                    checked={selectedFingerprints.includes(source.fingerprint)}
-                    onChange={() => toggleFingerprint(source.fingerprint)}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
+          <TextField placeholder={t("filter")} onChange={handleFilter} />
         </div>
 
         <div className="repacks-modal__repacks">
-          {filteredRepacks.length === 0 ? (
-            <div className="repacks-modal__no-results">
-              <div className="repacks-modal__no-results-content">
-                <div className="repacks-modal__no-results-text">{t("no_repacks_found")}</div>
-                <div className="repacks-modal__no-results-button">
-                  <Button
-                    type="button"
-                    theme="primary"
-                    onClick={() => {
-                      onClose();
-                      navigate("/settings?tab=2");
-                    }}
-                  >
-                    <PlusCircleIcon />
-                    {t("add_download_source", { ns: "settings" })}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          ) : (
-            filteredRepacks.map((repack) => {
-              const isLastDownloadedOption = checkIfLastDownloadedOption(repack);
+          {filteredRepacks.map((repack) => {
+            const isLastDownloadedOption = checkIfLastDownloadedOption(repack);
 
-              return (
-                <Button
-                  key={repack.id}
-                  theme="dark"
-                  onClick={() => handleRepackClick(repack)}
-                  className="repacks-modal__repack-button"
-                >
-                  <p className="repacks-modal__repack-title">{repack.title}</p>
+            return (
+              <Button
+                key={repack.id}
+                theme="dark"
+                onClick={() => handleRepackClick(repack)}
+                className="repacks-modal__repack-button"
+              >
+                <p className="repacks-modal__repack-title">{repack.title}</p>
 
-                  {isLastDownloadedOption && (
-                    <Badge>{t("last_downloaded_option")}</Badge>
-                  )}
+                {isLastDownloadedOption && (
+                  <Badge>{t("last_downloaded_option")}</Badge>
+                )}
 
-                  <p className="repacks-modal__repack-info">
-                    {repack.fileSize} - {repack.repacker} - {" "}
-                    {repack.uploadDate ? formatDate(repack.uploadDate) : ""}
-                  </p>
+                <p className="repacks-modal__repack-info">
+                  {repack.fileSize} - {repack.repacker} -{" "}
+                  {repack.uploadDate ? formatDate(repack.uploadDate) : ""}
+                </p>
 
-                  {hashesInDebrid[getHashFromMagnet(repack.uris[0]) ?? ""] && (
-                    <DebridBadge />
-                  )}
-                </Button>
-              );
-            })
-          )}
+                {hashesInDebrid[getHashFromMagnet(repack.uris[0]) ?? ""] && (
+                  <DebridBadge />
+                )}
+              </Button>
+            );
+          })}
         </div>
       </Modal>
     </>
   );
-}
+}