From 5caa9a7c0d9891e695c6bdd321477753834a8214 Mon Sep 17 00:00:00 2001
From: thePeras <jtopereira@gmail.com>
Date: Thu, 7 Nov 2024 17:59:52 +0000
Subject: [PATCH] More tsx and components

---
 .../modules/icons/{index.ts => index.tsx}     | 26 +++++++++++--------
 .../options/{addStyle.ts => addStyle.tsx}     | 11 ++++----
 content-scripts/modules/options/options.ts    |  1 +
 3 files changed, 21 insertions(+), 17 deletions(-)
 rename content-scripts/modules/icons/{index.ts => index.tsx} (90%)
 rename content-scripts/modules/options/{addStyle.ts => addStyle.tsx} (62%)

diff --git a/content-scripts/modules/icons/index.ts b/content-scripts/modules/icons/index.tsx
similarity index 90%
rename from content-scripts/modules/icons/index.ts
rename to content-scripts/modules/icons/index.tsx
index 7c162b5..c7b81ce 100644
--- a/content-scripts/modules/icons/index.ts
+++ b/content-scripts/modules/icons/index.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+
 import {
     BANNER_ICON_MAP,
     BG_IMAGE_ICON_MAP,
@@ -160,13 +163,12 @@ const replaceBgImages = (): void => {
         document.querySelectorAll(selector).forEach((i) => {
             if (icon === "") return i.classList.add("se-hidden-icon");
 
-            const span = document.createElement("span");
-            span.classList.add("se-icon");
-            span.classList.add(`ri-${icon}-line`);
+            const span = <span className={`se-icon ri-${icon}-line`} />;
 
             i.classList.add("se-remove-icon");
 
-            if (i.tagName === "img") replaceWithAttrs(i as HTMLElement, span);
+            if (i.tagName === "img")
+                replaceWithAttrs(i as HTMLElement, span as HTMLElement);
             else i.insertBefore(span, i.firstChild);
         });
     });
@@ -178,13 +180,15 @@ const replaceBgImages = (): void => {
 const replaceBanners = (): void => {
     Object.entries(BANNER_ICON_MAP).forEach(([k, v]) => {
         document.querySelectorAll(`.${k}`).forEach((i) => {
-            const span = document.createElement("span");
-            span.innerHTML = i.innerHTML;
-
-            const icon = document.createElement("span");
-            icon.classList.add("se-icon", `ri-${v}-fill`);
-            icon.style.fontSize = "1.5em";
-
+            const span = <span>{i.innerHTML}</span>;
+
+            // TODO (thePeras): Use <Icon />, but you need to expand the Icon component to support fill and style
+            const icon = (
+                <span
+                    className={`se-icon ri-${v}-fill`}
+                    style={{ fontSize: "1.5em" }}
+                />
+            );
             i.replaceChildren(icon, span);
         });
     });
diff --git a/content-scripts/modules/options/addStyle.ts b/content-scripts/modules/options/addStyle.tsx
similarity index 62%
rename from content-scripts/modules/options/addStyle.ts
rename to content-scripts/modules/options/addStyle.tsx
index 18aa36c..6d0fb1a 100644
--- a/content-scripts/modules/options/addStyle.ts
+++ b/content-scripts/modules/options/addStyle.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+
 import removeElement from "../utilities/removeElement";
 
 // Utility function to inject CSS into the page
@@ -5,11 +8,7 @@ export default function addStyles(id: string, css: string): void {
     // If the element already exists, remove it
     removeElement(id);
 
+    const style = <style id={id}>{css}</style>;
     const head = document.querySelector("head");
-    if (head) {
-        const style = document.createElement("style");
-        style.id = id;
-        style.textContent = css;
-        head.appendChild(style);
-    }
+    if (head) head.appendChild(style);
 }
diff --git a/content-scripts/modules/options/options.ts b/content-scripts/modules/options/options.ts
index 0caba78..d2e71d9 100644
--- a/content-scripts/modules/options/options.ts
+++ b/content-scripts/modules/options/options.ts
@@ -1,6 +1,7 @@
 import addStyles from "./addStyle";
 import removeElement from "../utilities/removeElement";
 
+// TODO(thePeras & toni): These functions can be extracted singles files
 export const hideShortcuts = async (shortcuts: string): Promise<void> => {
     switch (shortcuts) {
         case "on":