From 0b4c3a6cd2feea5912fc141ebec031040d8237eb Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 17 Feb 2025 18:59:57 -0300 Subject: [PATCH 1/5] fix: make title bar overlay fully transparent --- src/main/services/window-manager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/services/window-manager.ts b/src/main/services/window-manager.ts index f51d0e39..dde51b5f 100644 --- a/src/main/services/window-manager.ts +++ b/src/main/services/window-manager.ts @@ -57,7 +57,7 @@ export class WindowManager { trafficLightPosition: { x: 16, y: 16 }, titleBarOverlay: { symbolColor: "#DADBE1", - color: "#151515", + color: "#00000000", height: 34, }, webPreferences: { From c5206c68eeb16b764978a1cbd915835b94e548d5 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 17 Feb 2025 20:06:39 -0300 Subject: [PATCH 2/5] refactor: simplify game details hero section layout and scrolling --- .../game-details/game-details-content.tsx | 51 ++++--------------- .../pages/game-details/hero/hero-panel.tsx | 8 +-- 2 files changed, 12 insertions(+), 47 deletions(-) diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx index b2d1334a..e0cd168e 100644 --- a/src/renderer/src/pages/game-details/game-details-content.tsx +++ b/src/renderer/src/pages/game-details/game-details-content.tsx @@ -16,13 +16,8 @@ import { useUserDetails } from "@renderer/hooks"; import { useSubscription } from "@renderer/hooks/use-subscription"; import "./game-details.scss"; -const HERO_HEIGHT = 300; -const HERO_ANIMATION_THRESHOLD = 25; - export function GameDetailsContent() { const heroRef = useRef(null); - const containerRef = useRef(null); - const [isHeaderStuck, setIsHeaderStuck] = useState(false); const { t } = useTranslation("game_details"); @@ -61,7 +56,7 @@ export function GameDetailsContent() { return t("no_shop_details"); }, [shopDetails, t]); - const [backdropOpactiy, setBackdropOpacity] = useState(1); + const [backdropOpacity, setBackdropOpacity] = useState(1); const handleHeroLoad = async () => { const output = await average(steamUrlBuilder.libraryHero(objectId!), { @@ -80,26 +75,6 @@ export function GameDetailsContent() { setBackdropOpacity(1); }, [objectId]); - const onScroll: React.UIEventHandler = (event) => { - const heroHeight = heroRef.current?.clientHeight ?? HERO_HEIGHT; - - const scrollY = (event.target as HTMLDivElement).scrollTop; - const opacity = Math.max( - 0, - 1 - scrollY / (heroHeight - HERO_ANIMATION_THRESHOLD) - ); - - if (scrollY >= heroHeight && !isHeaderStuck) { - setIsHeaderStuck(true); - } - - if (scrollY <= heroHeight && isHeaderStuck) { - setIsHeaderStuck(false); - } - - setBackdropOpacity(opacity); - }; - const handleCloudSaveButtonClick = () => { if (!userDetails) { window.electron.openAuthWindow(AuthPage.SignIn); @@ -122,31 +97,25 @@ export function GameDetailsContent() {
- {game?.title} - -
+
+ {game?.title}
- +
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx index e9d110f0..8bf8f4b1 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx @@ -9,11 +9,7 @@ import { HeroPanelPlaytime } from "./hero-panel-playtime"; import { gameDetailsContext } from "@renderer/context"; import "./hero-panel.scss"; -export interface HeroPanelProps { - isHeaderStuck: boolean; -} - -export function HeroPanel({ isHeaderStuck }: HeroPanelProps) { +export function HeroPanel() { const { t } = useTranslation("game_details"); const { formatDate } = useDate(); @@ -56,7 +52,7 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) { return (
{getInfo()}
From 75a44bed3fb0c84e6dfac0f1f4cca0f385f60829 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 17 Feb 2025 20:07:16 -0300 Subject: [PATCH 3/5] refactor: minor hero panel formatting cleanup --- src/renderer/src/pages/game-details/hero/hero-panel.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx index 8bf8f4b1..3a07daa1 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx @@ -50,10 +50,7 @@ export function HeroPanel() { game?.download?.status === "paused"; return ( -
+
{getInfo()}
From 0724a40cb70404789c9ca0cc69a13ddefdf3cc20 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 17 Feb 2025 22:29:42 -0300 Subject: [PATCH 4/5] fix: improve theme import modal flow and navigation --- .../settings/aparence/settings-appearance.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx index 625f1a90..047cf299 100644 --- a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx +++ b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx @@ -4,6 +4,7 @@ import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index"; import type { Theme } from "@types"; import { ImportThemeModal } from "./modals/import-theme-modal"; import { settingsContext } from "@renderer/context"; +import { useNavigate } from "react-router-dom"; interface SettingsAppearanceProps { appearance: { @@ -24,8 +25,10 @@ export function SettingsAppearance({ authorId: string; authorName: string; } | null>(null); + const [hasShownModal, setHasShownModal] = useState(false); const { clearTheme } = useContext(settingsContext); + const navigate = useNavigate(); const loadThemes = useCallback(async () => { const themesList = await window.electron.getAllCustomThemes(); @@ -45,20 +48,32 @@ export function SettingsAppearance({ }, [loadThemes]); useEffect(() => { - if (appearance.theme && appearance.authorId && appearance.authorName) { + if (appearance.theme && appearance.authorId && appearance.authorName && !hasShownModal) { setIsImportThemeModalVisible(true); setImportTheme({ theme: appearance.theme, authorId: appearance.authorId, authorName: appearance.authorName, }); + setHasShownModal(true); + + navigate("/settings", { replace: true }); + clearTheme(); } - }, [appearance.theme, appearance.authorId, appearance.authorName]); + }, [ + appearance.theme, + appearance.authorId, + appearance.authorName, + navigate, + hasShownModal, + clearTheme, + ]); const onThemeImported = useCallback(() => { setIsImportThemeModalVisible(false); + setImportTheme(null); loadThemes(); - }, [clearTheme, loadThemes]); + }, [loadThemes]); return (
From 21cec50e2e358e1bc8c8df51ed23343318ee156c Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 17 Feb 2025 22:32:07 -0300 Subject: [PATCH 5/5] lint --- .../src/pages/settings/aparence/settings-appearance.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx index 047cf299..2cc5bec1 100644 --- a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx +++ b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx @@ -48,7 +48,12 @@ export function SettingsAppearance({ }, [loadThemes]); useEffect(() => { - if (appearance.theme && appearance.authorId && appearance.authorName && !hasShownModal) { + if ( + appearance.theme && + appearance.authorId && + appearance.authorName && + !hasShownModal + ) { setIsImportThemeModalVisible(true); setImportTheme({ theme: appearance.theme,