feat: enhance theme import flow with redirect and modal

src/main/index.ts

@@ -10,6 +10,7 @@ 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;
 
@@ -92,11 +93,15 @@ const handleDeepLinkPath = (uri?: string) => {
       const authorCode = url.searchParams.get("author");
 
       if (themeName && authorCode) {
-        WindowManager.mainWindow?.webContents.send(
-          "import-theme",
-          themeName,
-          authorCode
-        );
+        WindowManager.redirect(`settings?theme=true`);
+
+        sleep(1000).then(() => {
+          WindowManager.mainWindow?.webContents.send(
+            "import-theme",
+            themeName,
+            authorCode
+          );
+        });
       }
     }
   } catch (error) {

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

@@ -37,22 +37,33 @@ export function SettingsContextProvider({
 }: Readonly<SettingsContextProviderProps>) {
   const dispatch = useAppDispatch();
   const [sourceUrl, setSourceUrl] = useState<string | null>(null);
+  const [appearanceUrl, setAppearanceUrl] = 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");
   useEffect(() => {
     if (sourceUrl) setCurrentCategoryIndex(2);
   }, [sourceUrl]);
-
+  
   useEffect(() => {
     if (defaultSourceUrl) {
       setSourceUrl(defaultSourceUrl);
     }
   }, [defaultSourceUrl]);
+  
+  useEffect(() => {
+    if (appearanceUrl) setCurrentCategoryIndex(3);
+  }, [appearanceUrl]);
+  
+  useEffect(() => {
+    if (defaultAppearanceUrl) {
+      setAppearanceUrl(defaultAppearanceUrl);
+    }
+  }, [defaultAppearanceUrl]);
 
   const fetchBlockedUsers = useCallback(async () => {
     const blockedUsers = await window.electron.getBlockedUsers(12, 0);

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

@@ -2,9 +2,16 @@ import { useEffect, useState } from "react";
 import "./settings-appearance.scss";
 import { ThemeActions, ThemeCard, ThemePlaceholder } from "./index";
 import type { Theme } from "@types";
+import { ImportThemeModal } from "./modals/import-theme-modal";
 
 export const SettingsAppearance = () => {
   const [themes, setThemes] = useState<Theme[]>([]);
+  const [isImportThemeModalVisible, setIsImportThemeModalVisible] =
+    useState(false);
+  const [importTheme, setImportTheme] = useState<{
+    theme: string;
+    author: string;
+  } | null>(null);
 
   const loadThemes = async () => {
     const themesList = await window.electron.getAllCustomThemes();
@@ -23,6 +30,15 @@ export const SettingsAppearance = () => {
     return () => unsubscribe();
   }, []);
 
+  useEffect(() => {
+    const unsubscribe = window.electron.onImportTheme((theme, author) => {
+      setIsImportThemeModalVisible(true);
+      setImportTheme({ theme, author });
+    });
+
+    return () => unsubscribe();
+  }, []);
+
   return (
     <div className="settings-appearance">
       <ThemeActions onListUpdated={loadThemes} themesCount={themes.length} />
@@ -46,6 +62,19 @@ export const SettingsAppearance = () => {
             ))
         )}
       </div>
+
+      {importTheme && (
+        <ImportThemeModal
+          visible={isImportThemeModalVisible}
+          onClose={() => setIsImportThemeModalVisible(false)}
+          onThemeImported={() => {
+            setIsImportThemeModalVisible(false);
+            loadThemes();
+          }}
+          themeName={importTheme.theme}
+          authorCode={importTheme.author}
+        />
+      )}
     </div>
   );
 };