add editing functionality

src/interface/components/CodeEditor.tsx

@@ -5,8 +5,17 @@ import { less } from '@codemirror/lang-less'
 import { useCallback, useEffect, useState } from 'react';
 import './CodeEditor.css'
 
-export default function CodeEditor({ callback, initialState, height, className }: { callback: (value: string) => void, initialState: string, height: string, className?: string}) {
-  const [value, setValue] = useState(initialState)
+export default function CodeEditor({ 
+  className = '', 
+  height = '100%', 
+  value,
+  setValue
+}: {
+  className?: string;
+  height?: string;
+  value: string;
+  setValue: (value: string) => void;
+}) {
   const [darkMode, setDarkMode] = useState(false)
 
   useEffect(() => {
@@ -17,7 +26,6 @@ export default function CodeEditor({ callback, initialState, height, className }
 
   const onChange = useCallback((value: string, _: ViewUpdate) => {
     setValue(value)
-    callback(value)
   }, [])
 
   return(

src/interface/components/ThemeCover.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { CustomTheme } from '../types/CustomThemes';
+import browser from 'webextension-polyfill';
+import { PencilIcon } from '@heroicons/react/24/outline';
 
 type ThemeCoverProps = {
   theme: Omit<CustomTheme, 'CustomImages'>;
@@ -40,6 +42,14 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
           <div className="w-4 h-0.5 bg-white"></div>
         </div>
       )}
+      {/* edit button */}
+      <div
+        className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-blue-600 rounded-full place-items-center"
+        onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator', body: { themeID: theme.id } })}
+      >
+        <PencilIcon className="w-4 h-4" />
+      </div>
+
       <div className="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900">
         {/* Render theme cover image or placeholder */}
         {/* {theme.CustomImages.length > 0 ? (