add theme resize bar

src/css/injected.scss

@@ -35,6 +35,23 @@ html {
   height: 100%;
   z-index: 100;
 }
+
+.resizeBar {
+  background-color: rgb(228 228 231);
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  cursor: col-resize;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .connectedNotificationsWrapper > div > button > svg > g {
   fill: var(--theme-primary) !important;
 }

src/interface/pages/ThemeCreator.tsx

@@ -1,6 +1,7 @@
 import CodeEditor from '../components/CodeEditor';
 import Accordion from '../components/Accordian';
 import { useState } from 'react';
+import ColorPicker from 'react-best-gradient-color-picker';
 
 export default function ThemeCreator() {
   const [theme, setTheme] = useState<CustomTheme>({
@@ -18,7 +19,7 @@ export default function ThemeCreator() {
   }
 
   return (
-    <div className='w-full h-[100vh] bg-zinc-100 dark:bg-zinc-800 dark:text-white transition duration-30'>
+    <div className='w-full min-h-[100vh] bg-zinc-100 dark:bg-zinc-800 dark:text-white transition duration-30'>
       <div className='flex flex-col gap-2 p-2'>
         <h1 className='text-xl font-semibold pb-0.5'>Theme Creator</h1>
 
@@ -32,16 +33,22 @@ export default function ThemeCreator() {
           <textarea id='themeDescription' placeholder='' value={theme.description} onChange={e => setTheme({ ...theme, description: e.target.value })} className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
         </div>
 
-        <div>
+        <div className=''>
           <label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
-          <input id='defaultColour' type='color' value={theme.defaultColour} onChange={e => setTheme({ ...theme, defaultColour: e.target.value })} className='w-full h-12 p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
+          <div className=''>
+            <ColorPicker
+              disableDarkMode={true}
+              hideInputs={true}
+              value={theme.defaultColour}
+              onChange={(color: string) => setTheme({ ...theme, defaultColour: color })} />
+          </div>
         </div>
       
         
-
-        <Accordion>
+        <div>
+          <label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
           <CodeEditor height='100px' initialState={''} callback={handleSave} />
-        </Accordion>
+        </div>
 
         <button className='w-full px-4 py-2 mb-4 text-white transition bg-blue-500 rounded dark:text-white'>
           Save Theme

src/seqta/ui/ThemeCreator.ts

@@ -5,18 +5,72 @@ import browser from "webextension-polyfill";
  * @returns void
  */
 export function OpenThemeCreator() {
-    const width = '300px'
+  const width = '310px';
 
-    const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe')
-    themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#themeCreator`
-    themeCreatorIframe.id = 'themeCreatorIframe'
-    themeCreatorIframe.setAttribute('allowTransparency', 'true')
-    themeCreatorIframe.setAttribute('excludeDarkCheck', 'true')
-    themeCreatorIframe.style.width = width
-    themeCreatorIframe.style.border = 'none'
+  const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe');
+  themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#themeCreator`;
+  themeCreatorIframe.id = 'themeCreatorIframe';
+  themeCreatorIframe.setAttribute('allowTransparency', 'true');
+  themeCreatorIframe.setAttribute('excludeDarkCheck', 'true');
+  themeCreatorIframe.style.border = 'none';
+  themeCreatorIframe.style.width = width;
 
-    const mainContent = document.querySelector('#container') as HTMLDivElement
-    if (mainContent) mainContent.style.width = `calc(100% - ${width})`
+  const mainContent = document.querySelector('#container') as HTMLDivElement;
+  if (mainContent) mainContent.style.width = `calc(100% - ${width})`;
 
-    document.body.appendChild(themeCreatorIframe)
+  const resizeBar = document.createElement('div');
+  resizeBar.classList.add('resizeBar');
+  resizeBar.style.right = '307.5px';
+
+  let isDragging = false;
+  let currentX: number;
+
+  const mouseDownHandler = (e: MouseEvent) => {
+    isDragging = true;
+    currentX = e.clientX;
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+    document.body.style.userSelect = 'none';
+    themeCreatorIframe.style.pointerEvents = 'none'; // Disable pointer events on iframe during resize
+  };
+
+  const mouseMoveHandler = (e: MouseEvent) => {
+    if (!isDragging) return;
+    const dx = e.clientX - currentX;
+    currentX = e.clientX;
+    const newWidth = Math.min(Math.max(310, themeCreatorIframe.offsetWidth - dx), 600);
+    themeCreatorIframe.style.width = `${newWidth}px`;
+    mainContent.style.width = `calc(100% - ${newWidth}px)`;
+    resizeBar.style.right = `${newWidth - 2.5}px`;
+  };
+
+  const mouseUpHandler = () => {
+    isDragging = false;
+    document.removeEventListener('mousemove', mouseMoveHandler);
+    document.removeEventListener('mouseup', mouseUpHandler);
+    document.body.style.userSelect = '';
+    themeCreatorIframe.style.pointerEvents = 'auto';
+  };
+
+  resizeBar.addEventListener('mousedown', mouseDownHandler);
+  resizeBar.addEventListener('mouseover', () => resizeBar.style.opacity = '1');
+  resizeBar.addEventListener('mouseout', () => resizeBar.style.opacity = '0');
+
+  document.body.appendChild(themeCreatorIframe);
+  document.body.appendChild(resizeBar);
+}
+
+/**
+ * Close the Theme Creator sidebar
+ * @returns void
+ */
+export function CloseThemeCreator() {
+  const themeCreatorIframe = document.getElementById('themeCreatorIframe');
+  if (themeCreatorIframe) themeCreatorIframe.remove();
+
+  const mainContent = document.querySelector('#container') as HTMLDivElement;
+  if (mainContent) mainContent.style.width = '100%';
+
+  const resizeBar = document.querySelector('.resizeBar') as HTMLDivElement;
+  if (resizeBar) resizeBar.remove();
 }