From 14a83366953ad995aaeac4cb753771557b6d2628 Mon Sep 17 00:00:00 2001 From: Victor Sales <36749678+v1ctorsales@users.noreply.github.com> Date: Sat, 31 May 2025 01:01:46 -0300 Subject: [PATCH 1/7] quick add to library button --- .../src/pages/catalogue/game-item.scss | 23 ++++++++ .../src/pages/catalogue/game-item.tsx | 53 +++++++++++++++++-- 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/src/renderer/src/pages/catalogue/game-item.scss b/src/renderer/src/pages/catalogue/game-item.scss index f49bcbf8..b1e66178 100644 --- a/src/renderer/src/pages/catalogue/game-item.scss +++ b/src/renderer/src/pages/catalogue/game-item.scss @@ -18,6 +18,29 @@ background-color: rgba(255, 255, 255, 0.05); } + &__plus-wrapper { + position: absolute; + top: 8px; + right: 8px; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease-in-out; + cursor: pointer; + } + + &:hover .game-item__plus-wrapper { + opacity: 1; + pointer-events: auto; + } + + &__plus-wrapper.added { + opacity: 0.5; + } + + &:hover .game-item__plus-wrapper.added { + opacity: 0.5; + } + &__cover { width: 200px; height: 100%; diff --git a/src/renderer/src/pages/catalogue/game-item.tsx b/src/renderer/src/pages/catalogue/game-item.tsx index 69915f20..28d9dc9f 100644 --- a/src/renderer/src/pages/catalogue/game-item.tsx +++ b/src/renderer/src/pages/catalogue/game-item.tsx @@ -1,13 +1,13 @@ import { Badge } from "@renderer/components"; import { buildGameDetailsPath } from "@renderer/helpers"; -import { useAppSelector, useRepacks } from "@renderer/hooks"; -import { useMemo } from "react"; +import { useAppSelector, useRepacks, useLibrary } from "@renderer/hooks"; +import { useMemo, useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import "./game-item.scss"; import { useTranslation } from "react-i18next"; import { CatalogueSearchResult } from "@types"; -import { QuestionIcon } from "@primer/octicons-react"; +import { QuestionIcon, PlusIcon, CheckIcon } from "@primer/octicons-react"; export interface GameItemProps { game: CatalogueSearchResult; @@ -16,7 +16,9 @@ export interface GameItemProps { export function GameItem({ game }: GameItemProps) { const navigate = useNavigate(); - const { i18n } = useTranslation(); + const { i18n, t } = useTranslation("game_details"); + + const language = i18n.language.split("-")[0]; const { steamGenres } = useAppSelector((state) => state.catalogueSearch); @@ -24,7 +26,41 @@ export function GameItem({ game }: GameItemProps) { const repacks = getRepacksForObjectId(game.objectId); - const language = i18n.language.split("-")[0]; + const [plusDisabled, setPlusDisabled] = useState(false); + + const [added, setAdded] = useState(false); + + const { library, updateLibrary } = useLibrary(); + + useEffect(() => { + const exists = library.some( + (libItem) => + libItem.shop === game.shop && libItem.objectId === game.objectId + ); + if (exists) { + setAdded(true); + } + }, [library, game.shop, game.objectId]); + + const addGameToLibrary = async (event: React.MouseEvent) => { + event.stopPropagation(); + if (added) return; + setPlusDisabled(true); + + try { + await window.electron.addGameToLibrary( + game.shop, + game.objectId, + game.title + ); + updateLibrary(); + setAdded(true); + } catch (error) { + console.error(error); + } finally { + setPlusDisabled(false); + } + }; const uniqueRepackers = useMemo(() => { return Array.from(new Set(repacks.map((repack) => repack.repacker))); @@ -81,6 +117,13 @@ export function GameItem({ game }: GameItemProps) { ))} +
+ {added ? : } +
); } From 81654d7688ffd4ee9f255a5e71f4df90c2e04526 Mon Sep 17 00:00:00 2001 From: Victor Sales <36749678+v1ctorsales@users.noreply.github.com> Date: Sat, 31 May 2025 01:16:11 -0300 Subject: [PATCH 2/7] translations pt-br and english --- src/locales/en/translation.json | 1 + src/locales/pt-BR/translation.json | 1 + 2 files changed, 2 insertions(+) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index b01268a3..34754a62 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -89,6 +89,7 @@ "amount_minutes": "{{amount}} minutes", "accuracy": "{{accuracy}}% accuracy", "add_to_library": "Add to library", + "already_in_library": "Already in library", "remove_from_library": "Remove from library", "no_downloads": "No downloads available", "play_time": "Played for {{amount}}", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index a45af998..eb5fac13 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -76,6 +76,7 @@ "amount_minutes": "{{amount}} minutos", "accuracy": "{{accuracy}}% de precisão", "add_to_library": "Adicionar à biblioteca", + "already_in_library": "Já está na biblioteca", "remove_from_library": "Remover da biblioteca", "no_downloads": "Nenhum download disponível", "play_time": "Jogou por {{amount}}", From de605ecd02937347d8a122de4724febf9e3c97f1 Mon Sep 17 00:00:00 2001 From: Victor Sales <36749678+v1ctorsales@users.noreply.github.com> Date: Sat, 31 May 2025 01:45:32 -0300 Subject: [PATCH 3/7] rename plusDisabled and add ARIA attributes for accessible plus-button --- src/renderer/src/pages/catalogue/game-item.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/renderer/src/pages/catalogue/game-item.tsx b/src/renderer/src/pages/catalogue/game-item.tsx index 28d9dc9f..0a89eaa5 100644 --- a/src/renderer/src/pages/catalogue/game-item.tsx +++ b/src/renderer/src/pages/catalogue/game-item.tsx @@ -26,7 +26,7 @@ export function GameItem({ game }: GameItemProps) { const repacks = getRepacksForObjectId(game.objectId); - const [plusDisabled, setPlusDisabled] = useState(false); + const [_plusDisabled, setPlusDisabled] = useState(false); const [added, setAdded] = useState(false); @@ -42,9 +42,9 @@ export function GameItem({ game }: GameItemProps) { } }, [library, game.shop, game.objectId]); - const addGameToLibrary = async (event: React.MouseEvent) => { + const addGameToLibrary = async (event: React.MouseEvent | React.KeyboardEvent) => { event.stopPropagation(); - if (added) return; + if (added || _plusDisabled) return; setPlusDisabled(true); try { @@ -72,7 +72,7 @@ export function GameItem({ game }: GameItemProps) { (steamGenre) => steamGenre === genre ); - if (index && steamGenres[language] && steamGenres[language][index]) { + if (index !== undefined && steamGenres[language] && steamGenres[language][index]) { return steamGenres[language][index]; } @@ -119,7 +119,15 @@ export function GameItem({ game }: GameItemProps) {
{ + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + addGameToLibrary(e); + } + }} title={added ? t("already_in_library") : t("add_to_library")} > {added ? : } From 07ac13f4cc5434aec33045a7d8eb576166505634 Mon Sep 17 00:00:00 2001 From: Victor Sales <36749678+v1ctorsales@users.noreply.github.com> Date: Sat, 31 May 2025 02:24:35 -0300 Subject: [PATCH 4/7] prettier changes on game-item.scss --- src/renderer/src/pages/catalogue/game-item.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/pages/catalogue/game-item.scss b/src/renderer/src/pages/catalogue/game-item.scss index b1e66178..6d511944 100644 --- a/src/renderer/src/pages/catalogue/game-item.scss +++ b/src/renderer/src/pages/catalogue/game-item.scss @@ -20,8 +20,8 @@ &__plus-wrapper { position: absolute; - top: 8px; - right: 8px; + top: 8px; + right: 8px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; From 2dc700188dbfa84853882668650d926782f819f2 Mon Sep 17 00:00:00 2001 From: Victor Sales <36749678+v1ctorsales@users.noreply.github.com> Date: Sat, 31 May 2025 02:34:23 -0300 Subject: [PATCH 5/7] remove condition from useffect and rename AddingToLibrary states --- src/renderer/src/pages/catalogue/game-item.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/renderer/src/pages/catalogue/game-item.tsx b/src/renderer/src/pages/catalogue/game-item.tsx index 0a89eaa5..40dbafc5 100644 --- a/src/renderer/src/pages/catalogue/game-item.tsx +++ b/src/renderer/src/pages/catalogue/game-item.tsx @@ -26,7 +26,7 @@ export function GameItem({ game }: GameItemProps) { const repacks = getRepacksForObjectId(game.objectId); - const [_plusDisabled, setPlusDisabled] = useState(false); + const [isAddingToLibrary, setIsAddingToLibrary] = useState(false); const [added, setAdded] = useState(false); @@ -37,15 +37,14 @@ export function GameItem({ game }: GameItemProps) { (libItem) => libItem.shop === game.shop && libItem.objectId === game.objectId ); - if (exists) { - setAdded(true); - } + setAdded(exists); }, [library, game.shop, game.objectId]); const addGameToLibrary = async (event: React.MouseEvent | React.KeyboardEvent) => { event.stopPropagation(); - if (added || _plusDisabled) return; - setPlusDisabled(true); + if (added || isAddingToLibrary) return; + + setIsAddingToLibrary(true); try { await window.electron.addGameToLibrary( @@ -54,11 +53,10 @@ export function GameItem({ game }: GameItemProps) { game.title ); updateLibrary(); - setAdded(true); } catch (error) { console.error(error); } finally { - setPlusDisabled(false); + setIsAddingToLibrary(false); } }; From 6a94c3c812f47e19b3b8f60cc7a6b8f4cbcb02d2 Mon Sep 17 00:00:00 2001 From: Victor Sales <36749678+v1ctorsales@users.noreply.github.com> Date: Sat, 21 Jun 2025 14:38:01 -0300 Subject: [PATCH 6/7] fix: create game-item__plus-wrapper--added classname --- src/renderer/src/pages/catalogue/game-item.scss | 16 ++++++---------- src/renderer/src/pages/catalogue/game-item.tsx | 5 ++++- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/renderer/src/pages/catalogue/game-item.scss b/src/renderer/src/pages/catalogue/game-item.scss index 6d511944..ec20b4a5 100644 --- a/src/renderer/src/pages/catalogue/game-item.scss +++ b/src/renderer/src/pages/catalogue/game-item.scss @@ -16,6 +16,11 @@ &:hover { background-color: rgba(255, 255, 255, 0.05); + + .game-item__plus-wrapper { + opacity: 1; + pointer-events: auto; + } } &__plus-wrapper { @@ -28,16 +33,7 @@ cursor: pointer; } - &:hover .game-item__plus-wrapper { - opacity: 1; - pointer-events: auto; - } - - &__plus-wrapper.added { - opacity: 0.5; - } - - &:hover .game-item__plus-wrapper.added { + &__plus-wrapper--added { opacity: 0.5; } diff --git a/src/renderer/src/pages/catalogue/game-item.tsx b/src/renderer/src/pages/catalogue/game-item.tsx index 40dbafc5..25813d5b 100644 --- a/src/renderer/src/pages/catalogue/game-item.tsx +++ b/src/renderer/src/pages/catalogue/game-item.tsx @@ -8,6 +8,7 @@ import "./game-item.scss"; import { useTranslation } from "react-i18next"; import { CatalogueSearchResult } from "@types"; import { QuestionIcon, PlusIcon, CheckIcon } from "@primer/octicons-react"; +import cn from "classnames"; export interface GameItemProps { game: CatalogueSearchResult; @@ -116,7 +117,9 @@ export function GameItem({ game }: GameItemProps) {
Date: Mon, 1 Sep 2025 14:18:01 -0300 Subject: [PATCH 7/7] Fix condition check for genre index --- src/renderer/src/pages/catalogue/game-item.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderer/src/pages/catalogue/game-item.tsx b/src/renderer/src/pages/catalogue/game-item.tsx index 542a7f96..63748710 100644 --- a/src/renderer/src/pages/catalogue/game-item.tsx +++ b/src/renderer/src/pages/catalogue/game-item.tsx @@ -71,7 +71,6 @@ export function GameItem({ game }: GameItemProps) { (steamGenre) => steamGenre === genre ); - if (index !== undefined && steamGenres[language] && steamGenres[language][index]) { if ( index !== undefined && steamGenres[language] &&