add theme creator iframe

src/css/injected.scss

@@ -29,6 +29,12 @@ html {
     background-color 200ms ease-in-out,
     backdrop-filter 200ms ease-in-out;
 }
+#themeCreatorIframe {
+  position: fixed;
+  right: 0;
+  height: 100%;
+  width: 200px;
+}
 .connectedNotificationsWrapper > div > button > svg > g {
   fill: var(--theme-primary) !important;
 }

src/interface/components/ThemeSelector.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useState } from "react";
 import themesList from '../assets/themes';
 import { listThemes, disableTheme, downloadTheme, setTheme, deleteTheme } from "../hooks/ThemeManagment";
+import Browser from "webextension-polyfill";
 
 interface Theme {
   name: string;
@@ -133,7 +134,8 @@ const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelec
   return (
     <div className="my-2">
       {(isEditMode ? themes.some(theme => theme.isDownloaded) : themes.length > 0) && (
-        <h2 className="pb-2 text-lg font-bold">Themes</h2>)}
+        <h2 className="pb-2 text-lg font-bold">Themes</h2>
+      )}
       <div className="flex flex-col gap-4">
         {themes
           .filter(theme => !isEditMode || theme.isDownloaded) // Only show downloaded themes in edit mode
@@ -166,6 +168,13 @@ const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelec
               </div>
             </button>
         ))}
+
+        <button
+          onClick={() => Browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}
+          className="flex items-center justify-center w-full h-16 transition rounded-lg bg-zinc-700">
+          <span className="text-xl font-IconFamily">{'\uec60'}</span>
+          <span className="ml-2">Create Theme</span>
+        </button>
       </div>
     </div>
   );

src/seqta/ui/ThemeCreator.ts

@@ -0,0 +1,16 @@
+import browser from "webextension-polyfill";
+import popup from '../../interface/index.html?url'
+
+/**
+ * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
+ */
+export function OpenThemeCreator() {
+    const container = document.querySelector('#container')
+    const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe')
+    themeCreatorIframe.src = `${browser.runtime.getURL(popup)}#themeCreator`
+    themeCreatorIframe.id = 'themeCreatorIframe'
+    themeCreatorIframe.setAttribute('allowTransparency', 'true')
+    themeCreatorIframe.setAttribute('excludeDarkCheck', 'true')
+    themeCreatorIframe.style.border = 'none'
+    container!.appendChild(themeCreatorIframe)
+}

src/seqta/utils/listeners/MessageListener.ts

@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup, closeSettings } from '../../../SEQTA';
 import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from '../../ui/Themes';
+import { OpenThemeCreator } from '../../ui/ThemeCreator';
 
 export class MessageHandler {
   constructor() {
@@ -45,6 +46,9 @@ export class MessageHandler {
     case 'OpenChangelog':
       OpenWhatsNewPopup();
       break;
+    case 'OpenThemeCreator':
+      OpenThemeCreator();
+      break;
     
     default:
       console.log('Unknown request info:', request.info);