From 740d3ffaaca05953f20fb8c598bbe9c9eb34248b Mon Sep 17 00:00:00 2001
From: Hachi-R <drive8hachi@gmail.com>
Date: Sat, 15 Feb 2025 22:18:42 -0300
Subject: [PATCH] feat: add deep link theme installation support

---
 src/main/events/themes/deeplink.ts            | 38 +++++++++++++++++++
 src/main/index.ts                             | 10 +++++
 src/renderer/src/helpers.ts                   | 21 ++++++----
 .../aparence/components/theme-card.scss       |  4 ++
 .../aparence/components/theme-card.tsx        |  1 +
 5 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 src/main/events/themes/deeplink.ts

diff --git a/src/main/events/themes/deeplink.ts b/src/main/events/themes/deeplink.ts
new file mode 100644
index 00000000..ca561701
--- /dev/null
+++ b/src/main/events/themes/deeplink.ts
@@ -0,0 +1,38 @@
+import { themes } from "@main/level/sublevels/themes";
+import { WindowManager } from "@main/services";
+import { Theme } from "@types";
+
+export const handleDeepLinkTheme = async (
+  themeName: string,
+  authorCode: string
+) => {
+  const theme: Theme = {
+    id: crypto.randomUUID(),
+    name: themeName,
+    isActive: false,
+    author: authorCode,
+    authorName: "spectre",
+    code: `https://hydrathemes.shop/themes/${themeName}.css`,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  };
+
+  await themes.put(theme.id, theme);
+
+  const allThemes = await themes.values().all();
+  const activeTheme = allThemes.find((theme: Theme) => theme.isActive);
+
+  if (activeTheme) {
+    await themes.put(activeTheme.id, {
+      ...activeTheme,
+      isActive: false,
+    });
+  }
+
+  WindowManager.mainWindow?.webContents.send("css-injected", theme.code);
+
+  await themes.put(theme.id, {
+    ...theme,
+    isActive: true,
+  });
+};
diff --git a/src/main/index.ts b/src/main/index.ts
index 2a18fa31..18423ee8 100644
--- a/src/main/index.ts
+++ b/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 { handleDeepLinkTheme } from "./events/themes/deeplink";
 
 const { autoUpdater } = updater;
 
@@ -86,6 +87,15 @@ const handleDeepLinkPath = (uri?: string) => {
     if (url.host === "install-source") {
       WindowManager.redirect(`settings${url.search}`);
     }
+
+    if (url.host === "install-theme") {
+      const themeName = url.searchParams.get("theme");
+      const authorCode = url.searchParams.get("author");
+
+      if (themeName && authorCode) {
+        handleDeepLinkTheme(themeName, authorCode);
+      }
+    }
   } catch (error) {
     logger.error("Error handling deep link", uri, error);
   }
diff --git a/src/renderer/src/helpers.ts b/src/renderer/src/helpers.ts
index 38f07c04..e7f7ce96 100644
--- a/src/renderer/src/helpers.ts
+++ b/src/renderer/src/helpers.ts
@@ -61,13 +61,20 @@ export const injectCustomCss = (css: string) => {
       currentCustomCss.remove();
     }
 
-    const style = document.createElement("style");
-
-    style.id = "custom-css";
-    style.textContent = `
-      ${css}
-    `;
-    document.head.appendChild(style);
+    if (css.startsWith("https://hydrathemes.shop/")) {
+      const link = document.createElement("link");
+      link.id = "custom-css";
+      link.rel = "stylesheet";
+      link.href = css;
+      document.head.appendChild(link);
+    } else {
+      const style = document.createElement("style");
+      style.id = "custom-css";
+      style.textContent = `
+        ${css}
+      `;
+      document.head.appendChild(style);
+    }
   } catch (error) {
     console.error("failed to inject custom css:", error);
   }
diff --git a/src/renderer/src/pages/settings/aparence/components/theme-card.scss b/src/renderer/src/pages/settings/aparence/components/theme-card.scss
index fd43893e..8499078b 100644
--- a/src/renderer/src/pages/settings/aparence/components/theme-card.scss
+++ b/src/renderer/src/pages/settings/aparence/components/theme-card.scss
@@ -85,6 +85,10 @@
       flex-direction: row;
       gap: 8px;
 
+      &--external {
+        display: none;
+      }
+
       Button {
         padding: 8px 11px;
       }
diff --git a/src/renderer/src/pages/settings/aparence/components/theme-card.tsx b/src/renderer/src/pages/settings/aparence/components/theme-card.tsx
index 4bc9698f..301f8c59 100644
--- a/src/renderer/src/pages/settings/aparence/components/theme-card.tsx
+++ b/src/renderer/src/pages/settings/aparence/components/theme-card.tsx
@@ -111,6 +111,7 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
 
           <div className="theme-card__actions__right">
             <Button
+              className={theme.code.startsWith("https://hydrathemes.shop/") ? "theme-card__actions__right--external" : ""}
               onClick={() => window.electron.openEditorWindow(theme.id)}
               title={t("edit_theme")}
               theme="outline"