From 31dc2b25488fc69e88872d13760275e0de0c790f Mon Sep 17 00:00:00 2001 From: neoapps-dev Date: Mon, 8 Jun 2026 16:30:02 +0300 Subject: [PATCH] fix: ui issues --- src/components/common/CinematicIntro.tsx | 2 +- src/components/views/SettingsView.tsx | 31 ++++++++++++++++++------ src/context/LauncherContext.tsx | 9 ++++--- src/css/index.css | 19 +++++++++++++++ src/hooks/useAppConfig.ts | 7 +++++- src/pages/App.tsx | 9 +++++-- src/services/TauriService.ts | 1 + 7 files changed, 63 insertions(+), 15 deletions(-) diff --git a/src/components/common/CinematicIntro.tsx b/src/components/common/CinematicIntro.tsx index 7933eef..ccceaeb 100644 --- a/src/components/common/CinematicIntro.tsx +++ b/src/components/common/CinematicIntro.tsx @@ -77,7 +77,7 @@ export function CinematicIntro({ onComplete, startMusic }: CinematicIntroProps) { + playPressSound(); + setSkipIntro(!skipIntro); + }; + const handleRunnerToggle = () => { playPressSound(); if (runners.length === 0) return; @@ -415,6 +422,12 @@ const SettingsView = memo(function SettingsView() { type: "button", onClick: handleRpcToggle, }); + items.push({ + id: "skip_intro", + label: `Skip Intro: ${skipIntro ? "ON" : "OFF"}`, + type: "button", + onClick: handleSkipIntroToggle, + }); items.push({ id: "legacy", label: `Legacy Mode: ${legacyMode ? "ON" : "OFF"}`, @@ -540,6 +553,7 @@ const SettingsView = memo(function SettingsView() { handleRunnerToggle, handlePerfToggle, handleMangohudToggle, + handleSkipIntroToggle, handleResetSetup, stopGame, downloadRunner, @@ -550,6 +564,7 @@ const SettingsView = memo(function SettingsView() { extraLaunchArgs, launchPrefix, launchEnvVars, + skipIntro, ]); useEffect(() => { @@ -652,7 +667,7 @@ const SettingsView = memo(function SettingsView() { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: animationsEnabled ? 0.3 : 0 }} - className="flex flex-col items-center w-full max-w-3xl outline-none" + className="flex flex-col items-center w-full max-w-5xl outline-none" >

{currentSubMenu === "main" @@ -669,7 +684,7 @@ const SettingsView = memo(function SettingsView() {

{currentSubMenu === "main" ? ( -
+
{settingsItems.map((item, index) => { if (item.id === "back") return null; @@ -680,7 +695,7 @@ const SettingsView = memo(function SettingsView() { data-index={index} tabIndex={0} onMouseEnter={() => setFocusIndex(index)} - className="relative w-[360px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#ffff00] shrink-0" + className="relative w-[480px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#ffff00] shrink-0" style={getSliderStyle(index)} > setFocusIndex(index)} onClick={item.onClick} - className={`w-[360px] h-10 flex items-center justify-center px-4 relative z-30 transition-colors outline-none border-none shrink-0 ${ + className={`w-[480px] h-10 flex items-center justify-center px-4 relative z-30 transition-colors outline-none border-none shrink-0 ${ isRed ? focusIndex === index ? "text-red-400" @@ -736,8 +751,8 @@ const SettingsView = memo(function SettingsView() { })}
) : ( -
-
+
+
{settingsItems.map((item, index) => { if (item.id === "back") return null; @@ -748,7 +763,7 @@ const SettingsView = memo(function SettingsView() { data-index={index} tabIndex={0} onMouseEnter={() => setFocusIndex(index)} - className="relative w-[360px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#ffff00] shrink-0" + className="relative w-[600px] h-10 flex items-center justify-center cursor-pointer transition-all outline-none border-none hover:text-[#ffff00] shrink-0" style={getSliderStyle(index)} > setFocusIndex(index)} onClick={item.onClick} - className={`w-[360px] h-10 flex items-center pl-1.5 pr-4 relative z-30 outline-none border-none shrink-0 rounded ${focusIndex === index ? "text-[#ffff00]" : isRed ? "text-red-600" : "text-[#333333]"}`} + className={`w-[600px] h-10 flex items-center pl-1.5 pr-4 relative z-30 outline-none border-none shrink-0 rounded ${focusIndex === index ? "text-[#ffff00]" : isRed ? "text-red-600" : "text-[#333333]"}`} > {isToggle && (
diff --git a/src/context/LauncherContext.tsx b/src/context/LauncherContext.tsx index 27c6d85..e85202e 100644 --- a/src/context/LauncherContext.tsx +++ b/src/context/LauncherContext.tsx @@ -65,7 +65,8 @@ export function LauncherProvider({ children }: { children: React.ReactNode }) { configRaw.rpcEnabled, configRaw.musicVol, configRaw.sfxVol, configRaw.isDayTime, configRaw.profile, configRaw.linuxRunner, configRaw.perfBoost, configRaw.customEditions, configRaw.legacyMode, configRaw.animationsEnabled, configRaw.mangohudEnabled, - configRaw.extraLaunchArgs, configRaw.launchPrefix, configRaw.launchEnvVars, configRaw.startFullscreen + configRaw.extraLaunchArgs, configRaw.launchPrefix, configRaw.launchEnvVars, configRaw.startFullscreen, + configRaw.skipIntro, ]); const game = useMemo(() => gameRaw, [ @@ -134,7 +135,8 @@ export function LauncherProvider({ children }: { children: React.ReactNode }) { extraLaunchArgs: config.extraLaunchArgs, launchPrefix: config.launchPrefix, launchEnvVars: config.launchEnvVars, - startFullscreen: config.startFullscreen + startFullscreen: config.startFullscreen, + skipIntro: config.skipIntro, }).catch(console.error); } }, [ @@ -143,7 +145,8 @@ export function LauncherProvider({ children }: { children: React.ReactNode }) { config.vfxEnabled, config.animationsEnabled, config.rpcEnabled, config.musicVol, config.sfxVol, config.legacyMode, config.mangohudEnabled, config.extraLaunchArgs, config.launchPrefix, - config.launchEnvVars, config.isLoaded, config.startFullscreen + config.launchEnvVars, config.isLoaded, config.startFullscreen, + config.skipIntro, ]); useEffect(() => { diff --git a/src/css/index.css b/src/css/index.css index 1a27bf8..e2c28c8 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -207,6 +207,25 @@ body { min-height: 44px; } +.settings-scrollbar::-webkit-scrollbar { + width: 6px; +} + +.settings-scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +.settings-scrollbar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.15); + border-radius: 3px; + min-height: 44px; +} + +.settings-scrollbar { + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, 0.15) transparent; +} + .no-animations * { transition: none !important; animation: none !important; diff --git a/src/hooks/useAppConfig.ts b/src/hooks/useAppConfig.ts index a78f1b0..20b6195 100644 --- a/src/hooks/useAppConfig.ts +++ b/src/hooks/useAppConfig.ts @@ -24,6 +24,7 @@ export function useAppConfig() { const [extraLaunchArgs, setExtraLaunchArgs] = useState(); const [launchPrefix, setLaunchPrefix] = useState(); const [launchEnvVars, setLaunchEnvVars] = useState | undefined>(); + const [skipIntro, setSkipIntro] = useLocalStorage("lce-skip-intro", false); useEffect(() => { TauriService.loadConfig().then((config) => { if (config.username) setUsername(config.username); @@ -45,6 +46,7 @@ export function useAppConfig() { if (config.extraLaunchArgs) setExtraLaunchArgs(config.extraLaunchArgs); if (config.launchPrefix) setLaunchPrefix(config.launchPrefix); if (config.launchEnvVars) setLaunchEnvVars(config.launchEnvVars); + if (config.skipIntro !== undefined) setSkipIntro(config.skipIntro); setIsLoaded(true); }); }, []); @@ -70,9 +72,10 @@ export function useAppConfig() { extraLaunchArgs, launchPrefix, launchEnvVars, + skipIntro, }).catch(console.error); } - }, [username, theme, linuxRunner, perfBoost, profile, customEditions, customizations, animationsEnabled, vfxEnabled, rpcEnabled, startFullscreen, musicVol, sfxVol, legacyMode, mangohudEnabled, extraLaunchArgs, launchPrefix, launchEnvVars, isLoaded]); + }, [username, theme, linuxRunner, perfBoost, profile, customEditions, customizations, animationsEnabled, vfxEnabled, rpcEnabled, startFullscreen, musicVol, sfxVol, legacyMode, mangohudEnabled, extraLaunchArgs, launchPrefix, launchEnvVars, skipIntro, isLoaded]); return { username, @@ -118,5 +121,7 @@ export function useAppConfig() { setLaunchPrefix, launchEnvVars, setLaunchEnvVars, + skipIntro, + setSkipIntro, }; } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index d6eb9d4..9815deb 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -70,7 +70,12 @@ export default function App() { const clearError = useCallback(() => game.setError(null), [game]); const clearGameUpdate = useCallback(() => game.setGameUpdateMessage(null), [game]); const clearSteamSuccess = useCallback(() => game.setSteamSuccessMessage(null), [game]); - + + useEffect(() => { + if (showIntro && config.skipIntro) { + setShowIntro(false); + } + }, [showIntro, config.skipIntro, setShowIntro]); useEffect(() => { if (config.isLoaded) { @@ -126,7 +131,7 @@ export default function App() { ); } - if (showIntro) { + if (showIntro && !config.skipIntro) { return (
; customizations?: Record; + skipIntro?: boolean; } export interface ThemePalette {