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 (