refactor: simplify theme import handling and remove redundant code

src/main/events/index.ts

@@ -87,7 +87,6 @@ import "./themes/get-custom-theme-by-id";
 import "./themes/get-active-custom-theme";
 import "./themes/css-injector";
 import "./themes/close-editor-window";
-import "./themes/import-theme";
 import "./themes/toggle-custom-theme";
 import { isPortableVersion } from "@main/helpers";
 

src/main/events/themes/import-theme.ts

@@ -1,12 +0,0 @@
-import { registerEvent } from "../register-event";
-import { WindowManager } from "@main/services";
-
-const importTheme = async (
-  _event: Electron.IpcMainInvokeEvent,
-  theme: string,
-  author: string
-) => {
-  WindowManager.mainWindow?.webContents.send("import-theme", theme, author);
-};
-
-registerEvent("importTheme", importTheme);

src/main/index.ts

@@ -10,7 +10,6 @@ import { PythonRPC } from "./services/python-rpc";
 import { Aria2 } from "./services/aria2";
 import { db, levelKeys } from "./level";
 import { loadState } from "./main";
-import { sleep } from "./helpers";
 
 const { autoUpdater } = updater;
 
@@ -93,15 +92,7 @@ const handleDeepLinkPath = (uri?: string) => {
       const authorCode = url.searchParams.get("author");
 
       if (themeName && authorCode) {
-        WindowManager.redirect(`settings?theme=true`);
+        WindowManager.redirect(`settings?theme=${themeName}&author=${authorCode}`);
-
-        sleep(1000).then(() => {
-          WindowManager.mainWindow?.webContents.send(
-            "import-theme",
-            themeName,
-            authorCode
-          );
-        });
       }
     }
   } catch (error) {

src/preload/index.ts

@@ -362,15 +362,6 @@ contextBridge.exposeInMainWorld("electron", {
   getActiveCustomTheme: () => ipcRenderer.invoke("getActiveCustomTheme"),
   toggleCustomTheme: (themeId: string, isActive: boolean) =>
     ipcRenderer.invoke("toggleCustomTheme", themeId, isActive),
-  onImportTheme: (cb: (theme: string, author: string) => void) => {
-    const listener = (
-      _event: Electron.IpcRendererEvent,
-      theme: string,
-      author: string
-    ) => cb(theme, author);
-    ipcRenderer.on("import-theme", listener);
-    return () => ipcRenderer.removeListener("import-theme", listener);
-  },
 
   /* Editor */
   openEditorWindow: (themeId: string) =>

src/renderer/src/app.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import achievementSound from "@renderer/assets/audio/achievement.wav";
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
 
@@ -30,7 +30,6 @@ import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-m
 
 import { injectCustomCss } from "./helpers";
 import "./app.scss";
-import { ImportThemeModal } from "./pages/settings/aparence/modals/import-theme-modal";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -39,12 +38,6 @@ export interface AppProps {
 export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary, library } = useLibrary();
-  const [isImportThemeModalVisible, setIsImportThemeModalVisible] =
-    useState(false);
-  const [importTheme, setImportTheme] = useState<{
-    theme: string;
-    author: string;
-  } | null>(null);
 
   const { t } = useTranslation("app");
 
@@ -278,15 +271,6 @@ export function App() {
     return () => unsubscribe();
   }, []);
 
-  useEffect(() => {
-    const unsubscribe = window.electron.onImportTheme((theme, author) => {
-      setImportTheme({ theme, author });
-      setIsImportThemeModalVisible(true);
-    });
-
-    return () => unsubscribe();
-  }, []);
-
   const handleToastClose = useCallback(() => {
     dispatch(closeToast());
   }, [dispatch]);
@@ -328,16 +312,6 @@ export function App() {
         />
       )}
 
-      {importTheme && (
-        <ImportThemeModal
-          visible={isImportThemeModalVisible}
-          onClose={() => setIsImportThemeModalVisible(false)}
-          onThemeImported={() => setIsImportThemeModalVisible(false)}
-          themeName={importTheme.theme}
-          authorCode={importTheme.author}
-        />
-      )}
-
       <main>
         <Sidebar />
 

src/renderer/src/context/settings/settings.context.tsx

@@ -13,16 +13,20 @@ export interface SettingsContext {
   currentCategoryIndex: number;
   blockedUsers: UserBlocks["blocks"];
   fetchBlockedUsers: () => Promise<void>;
+  appearanceTheme: string | null;
+  appearanceAuthor: string | null;
 }
 
 export const settingsContext = createContext<SettingsContext>({
-  updateUserPreferences: async () => {},
+  updateUserPreferences: async () => { },
-  setCurrentCategoryIndex: () => {},
+  setCurrentCategoryIndex: () => { },
-  clearSourceUrl: () => {},
+  clearSourceUrl: () => { },
   sourceUrl: null,
   currentCategoryIndex: 0,
   blockedUsers: [],
-  fetchBlockedUsers: async () => {},
+  fetchBlockedUsers: async () => { },
+  appearanceTheme: null,
+  appearanceAuthor: null,
 });
 
 const { Provider } = settingsContext;
@@ -37,33 +41,39 @@ export function SettingsContextProvider({
 }: Readonly<SettingsContextProviderProps>) {
   const dispatch = useAppDispatch();
   const [sourceUrl, setSourceUrl] = useState<string | null>(null);
-  const [appearanceUrl, setAppearanceUrl] = useState<string | null>(null);
+  const [appearanceTheme, setAppearanceTheme] = useState<string | null>(null);
+  const [appearanceAuthor, setAppearanceAuthor] = useState<string | null>(
+    null
+  );
   const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0);
 
   const [blockedUsers, setBlockedUsers] = useState<UserBlocks["blocks"]>([]);
 
   const [searchParams] = useSearchParams();
   const defaultSourceUrl = searchParams.get("urls");
-  const defaultAppearanceUrl = searchParams.get("theme");
+  const defaultAppearanceTheme = searchParams.get("theme");
+  const defaultAppearanceAuthor = searchParams.get("author");
+
   useEffect(() => {
     if (sourceUrl) setCurrentCategoryIndex(2);
   }, [sourceUrl]);
-  
+
   useEffect(() => {
     if (defaultSourceUrl) {
       setSourceUrl(defaultSourceUrl);
     }
   }, [defaultSourceUrl]);
-  
+
   useEffect(() => {
-    if (appearanceUrl) setCurrentCategoryIndex(3);
+    if (appearanceTheme) setCurrentCategoryIndex(3);
-  }, [appearanceUrl]);
+  }, [appearanceTheme]);
-  
+
   useEffect(() => {
-    if (defaultAppearanceUrl) {
+    if (defaultAppearanceTheme && defaultAppearanceAuthor) {
-      setAppearanceUrl(defaultAppearanceUrl);
+      setAppearanceTheme(defaultAppearanceTheme);
+      setAppearanceAuthor(defaultAppearanceAuthor);
     }
-  }, [defaultAppearanceUrl]);
+  }, [defaultAppearanceTheme, defaultAppearanceAuthor]);
 
   const fetchBlockedUsers = useCallback(async () => {
     const blockedUsers = await window.electron.getBlockedUsers(12, 0);
@@ -93,6 +103,8 @@ export function SettingsContextProvider({
         currentCategoryIndex,
         sourceUrl,
         blockedUsers,
+        appearanceTheme,
+        appearanceAuthor,
       }}
     >
       {children}

src/renderer/src/declaration.d.ts

@@ -290,9 +290,6 @@ declare global {
     getCustomThemeById: (themeId: string) => Promise<Theme | null>;
     getActiveCustomTheme: () => Promise<Theme | null>;
     toggleCustomTheme: (themeId: string, isActive: boolean) => Promise<void>;
-    onImportTheme: (
-      cb: (theme: string, author: string) => void
-    ) => () => Electron.IpcRenderer;
 
     /* Editor */
     openEditorWindow: (themeId: string) => Promise<void>;

src/renderer/src/pages/settings/aparence/settings-appearance.tsx

@@ -4,7 +4,12 @@ import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index";
 import type { Theme } from "@types";
 import { ImportThemeModal } from "./modals/import-theme-modal";
 
-export const SettingsAppearance = () => {
+interface SettingsAppearanceProps {
+  appearanceTheme: string | null;
+  appearanceAuthor: string | null;
+}
+
+export const SettingsAppearance = ({ appearanceTheme, appearanceAuthor }: SettingsAppearanceProps) => {
   const [themes, setThemes] = useState<Theme[]>([]);
   const [isImportThemeModalVisible, setIsImportThemeModalVisible] =
     useState(false);
@@ -31,13 +36,14 @@ export const SettingsAppearance = () => {
   }, []);
 
   useEffect(() => {
-    const unsubscribe = window.electron.onImportTheme((theme, author) => {
+    if (appearanceTheme && appearanceAuthor) {
       setIsImportThemeModalVisible(true);
-      setImportTheme({ theme, author });
+      setImportTheme({
-    });
+        theme: appearanceTheme,
-
+        author: appearanceAuthor
-    return () => unsubscribe();
+      });
-  }, []);
+    }
+  }, [appearanceTheme, appearanceAuthor]);
 
   return (
     <div className="settings-appearance">

src/renderer/src/pages/settings/settings.tsx

@@ -61,7 +61,12 @@ export default function Settings() {
   return (
     <SettingsContextProvider>
       <SettingsContextConsumer>
-        {({ currentCategoryIndex, setCurrentCategoryIndex }) => {
+        {({
+          currentCategoryIndex,
+          setCurrentCategoryIndex,
+          appearanceTheme,
+          appearanceAuthor,
+        }) => {
           const renderCategory = () => {
             if (currentCategoryIndex === 0) {
               return <SettingsGeneral />;
@@ -76,7 +81,12 @@ export default function Settings() {
             }
 
             if (currentCategoryIndex === 3) {
-              return <SettingsAppearance />;
+              return (
+                <SettingsAppearance
+                  appearanceTheme={appearanceTheme}
+                  appearanceAuthor={appearanceAuthor}
+                />
+              );
             }
 
             if (currentCategoryIndex === 4) {