external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: improve theme import modal flow and navigation

Browse source
This commit is contained in:
Hachi-R 2025-02-17 22:29:42 -03:00
parent 75a44bed3f
commit 0724a40cb7
1 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/renderer/src/pages/settings/aparence/settings-appearance.tsx
View file

@ -4,6 +4,7 @@ import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index";
import type { Theme } from "@types"; import type { Theme } from "@types";
import { ImportThemeModal } from "./modals/import-theme-modal"; import { ImportThemeModal } from "./modals/import-theme-modal";
import { settingsContext } from "@renderer/context"; import { settingsContext } from "@renderer/context";
import { useNavigate } from "react-router-dom";
interface SettingsAppearanceProps { interface SettingsAppearanceProps {
appearance: { appearance: {
@ -24,8 +25,10 @@ export function SettingsAppearance({
authorId: string; authorId: string;
authorName: string; authorName: string;
} | null>(null); } | null>(null);
const [hasShownModal, setHasShownModal] = useState(false);
const { clearTheme } = useContext(settingsContext); const { clearTheme } = useContext(settingsContext);
const navigate = useNavigate();
const loadThemes = useCallback(async () => { const loadThemes = useCallback(async () => {
const themesList = await window.electron.getAllCustomThemes(); const themesList = await window.electron.getAllCustomThemes();
@ -45,20 +48,32 @@ export function SettingsAppearance({
}, [loadThemes]); }, [loadThemes]);
useEffect(() => { useEffect(() => {
if (appearance.theme && appearance.authorId && appearance.authorName) { if (appearance.theme && appearance.authorId && appearance.authorName && !hasShownModal) {
setIsImportThemeModalVisible(true); setIsImportThemeModalVisible(true);
setImportTheme({ setImportTheme({
theme: appearance.theme, theme: appearance.theme,
authorId: appearance.authorId, authorId: appearance.authorId,
authorName: appearance.authorName, 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(() => { const onThemeImported = useCallback(() => {
setIsImportThemeModalVisible(false); setIsImportThemeModalVisible(false);
setImportTheme(null);
loadThemes(); loadThemes();
}, [clearTheme, loadThemes]); }, [loadThemes]);
return ( return (
<div className="settings-appearance"> <div className="settings-appearance">