feat(ThemePreview): update to follow blob format

src/seqta/ui/ThemeCreator.ts

@@ -1,6 +1,7 @@
 import renderSvelte from "@/svelte-interface/main"
 import themeCreator from "@/svelte-interface/pages/themeCreator.svelte"
 import { unmount } from "svelte"
+import { ClearThemePreview } from "./themes/UpdateThemePreview"
 
 let themeCreatorSvelteApp: any = null
 
@@ -30,7 +31,11 @@ export function OpenThemeCreator(themeID: string = "") {
   const closeButton = document.createElement("button")
   closeButton.classList.add("themeCloseButton")
   closeButton.textContent = "×"
-  closeButton.addEventListener("click", CloseThemeCreator)
+  closeButton.addEventListener("click", () => {
+    CloseThemeCreator()
+    ClearThemePreview()
+  })
+
   document.body.appendChild(closeButton)
 
   const resizeBar = document.createElement("div")

src/seqta/ui/themes/Themes.ts

@@ -1,17 +1,5 @@
-import { base64toblobURL } from '@/seqta/utils/imageConversions';
-
 export const imageData: Record<string, { url: string; variableName: string }> = {};
 
-export const UpdateImageData = (image: { id: string; base64: string }) => {
-  const { id, base64 } = image;
-
-  if (imageData[id]) {
-    imageData[id].url = base64toblobURL(base64);
-    const { variableName } = imageData[id];
-    document.documentElement.style.setProperty('--' + variableName, `url(${imageData[id].url})`);
-  }
-};
-
 export function applyCustomCSS(customCSS: string) {
   let styleElement = document.getElementById('custom-theme');
   if (!styleElement) {

src/seqta/ui/themes/UpdateThemePreview.ts

@@ -1,65 +1,75 @@
-import type { CustomThemeBase64 } from '@/types/CustomThemes';
-import { applyCustomCSS, imageData, removeImageFromDocument, UpdateImageData } from './Themes';
+import type { LoadedCustomTheme } from '@/types/CustomThemes';
+import { applyCustomCSS, removeImageFromDocument } from './Themes';
 import { settingsState } from '@/seqta/utils/listeners/SettingsState';
 
+let previousImageVariableNames: string[] = [];
+let originalColor: string | null = null;
+let originalTheme: boolean | null = null;
 
-export const UpdateThemePreview = async (updatedTheme: CustomThemeBase64 /* Omit<CustomTheme, 'CustomImages'> & { CustomImages: Omit<CustomImage, 'blob'>[] } */) => {
-  const { CustomCSS, CustomImages, defaultColour } = updatedTheme;
+export const UpdateThemePreview = async (updatedTheme: LoadedCustomTheme) => {
+  const { CustomCSS, CustomImages, defaultColour, forceDark } = updatedTheme;
 
-  if (updatedTheme.forceDark != undefined) {
-    if (updatedTheme.forceDark) {
-      settingsState.DarkMode = true;
-    } else {
-      settingsState.DarkMode = false;
+  // Update dark mode setting
+  if (forceDark !== undefined) {
+    // Store the original theme if it hasn't been stored yet
+    if (originalTheme === null) {
+      originalTheme = settingsState.DarkMode;
     }
+    settingsState.DarkMode = forceDark;
   }
 
-  // Update image data
-  const currentImageIds = Object.keys(imageData);
-  const updatedImageIds = CustomImages.map((image) => image.id);
+  // Get the new image variable names
+  const newImageVariableNames = CustomImages.map(image => image.variableName);
 
-  // Remove unused images from imageData and document
-  currentImageIds.forEach((imageId) => {
-    if (!updatedImageIds.includes(imageId)) {
-      const { variableName } = imageData[imageId];
+  // Remove images that are no longer present
+  previousImageVariableNames.forEach(variableName => {
+    if (!newImageVariableNames.includes(variableName)) {
       removeImageFromDocument(variableName);
-      delete imageData[imageId];
     }
   });
 
-  // Update or add new images to imageData
-  CustomImages.forEach((image) => {
-    const existingImage = imageData[image.id];
-
-    if (existingImage && existingImage.variableName !== image.variableName) {
-      // Remove the previous variableName from the document
-      removeImageFromDocument(existingImage.variableName);
-
-      // Update the variableName in imageData
-      imageData[image.id].variableName = image.variableName;
-
-      // Update the variableName in the document
-      document.documentElement.style.setProperty('--' + image.variableName, `url(${existingImage.url})`);
-    }
-
-    if (image.url) {
-      UpdateImageData({
-        id: image.id,
-        base64: image.url
-      });
-    }
-
-    imageData[image.id] = {
-      url: imageData[image.id]?.url || '',
-      variableName: image.variableName,
-    };
+  // Update or add new images
+  CustomImages.forEach((image: any) => {
+    document.documentElement.style.setProperty(`--${image.variableName}`, `url(${image.url})`);
   });
 
+  // Update the previousImageVariableNames for the next run
+  previousImageVariableNames = newImageVariableNames;
+
   // Apply custom CSS
   applyCustomCSS(CustomCSS);
 
   // Apply default color
-  if (defaultColour !== '') {
-    settingsState.selectedColor = defaultColour
+  if (defaultColour) {
+    // Store the original color if it hasn't been stored yet
+    if (originalColor === null) {
+      originalColor = settingsState.selectedColor;
+    }
+    settingsState.selectedColor = defaultColour;
   }
 };
+
+export const ClearThemePreview = () => {
+  previousImageVariableNames.forEach(variableName => {
+    removeImageFromDocument(variableName);
+  });
+
+  previousImageVariableNames = [];
+
+  let styleElement = document.getElementById('custom-theme');
+  if (styleElement) {
+    styleElement.remove();
+  }
+
+  // Reset the color to the original value
+  if (originalColor !== null) {
+    settingsState.selectedColor = originalColor;
+    originalColor = null;
+  }
+
+  // Reset the theme (dark/light mode) to the original value
+  if (originalTheme !== null) {
+    settingsState.DarkMode = originalTheme;
+    originalTheme = null;
+  }
+}

src/seqta/ui/themes/saveTheme.ts

@@ -1,27 +1,18 @@
 import localforage from 'localforage';
-import type { CustomTheme, CustomThemeBase64 } from '@/types/CustomThemes';
+import type { LoadedCustomTheme } from '@/types/CustomThemes';
 import { disableTheme } from './disableTheme';
 
 
-export const saveTheme = async (theme: CustomThemeBase64) => {
+export const saveTheme = async (theme: LoadedCustomTheme) => {
   try {
-    const updatedTheme: CustomTheme = {
-      ...theme,
-      coverImage: theme.coverImage ? await fetch(theme.coverImage).then((res) => res.blob()) : null,
-      CustomImages: await Promise.all(
-        theme.CustomImages.map(async (image) => ({
-          id: image.id,
-          blob: await fetch(image.url).then((res) => res.blob()),
-          variableName: image.variableName,
-        }))
-      ),
-    };
-
     disableTheme();
 
-    console.debug('Theme to save:', updatedTheme);
+    console.debug('Theme to save:', theme);
 
-    await localforage.setItem(updatedTheme.id, updatedTheme);
+    /* remove blob urls from theme */
+    const updatedTheme = { ...theme, CustomImages: theme.CustomImages.map((image) => ({ ...image, blob: null })) }
+   
+    await localforage.setItem(theme.id, updatedTheme);
     await localforage.getItem('customThemes').then((themes: unknown) => {
       const themeList = themes as string[] | null;
       if (themeList) {