feat: dev progess with icons

src/svelte-interface/pages/themeCreator.svelte

@@ -14,6 +14,12 @@
   import ColourPicker from '../components/ColourPicker.svelte'
   import CodeEditor from '../components/CodeEditor.svelte'
 
+  import {
+    handleImageUpload,
+    handleRemoveImage,
+    handleImageVariableChange,
+    handleCoverImageUpload
+  } from '../utils/themeImageHandlers';
 
   const { themeID } = $props<{ themeID: string }>()
   let theme = $state<CustomTheme>({
@@ -38,8 +44,24 @@
     }
   });
 
+  async function onImageUpload(event: Event) {
+    theme = await handleImageUpload(event, theme);
+  }
+
+  function onRemoveImage(imageId: string) {
+    theme = handleRemoveImage(imageId, theme);
+  }
+
+  function onImageVariableChange(imageId: string, variableName: string) {
+    theme = handleImageVariableChange(imageId, variableName, theme);
+  }
+
+  async function onCoverImageUpload(event: Event) {
+    theme = await handleCoverImageUpload(event, theme);
+  }
+
   $effect(() => {
-    console.log(theme)
+
   })
 
   type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor';
@@ -157,5 +179,44 @@
     ] as SettingItem[] as setting}
       {@render settingItem(setting)}
     {/each}
+
+    <div class="relative flex justify-center w-full gap-1 overflow-hidden transition rounded-lg aspect-theme group place-items-center bg-zinc-100 dark:bg-zinc-900">
+      <div class={`transition pointer-events-none z-30 ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>
+        \ueb44
+      </div>
+      <span class={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
+      <input type="file" accept='image/*' onchange={onCoverImageUpload} class="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer" />
+      {#if !theme.hideThemeName && theme.coverImage}
+        <div class="absolute z-30 transition-opacity opacity-100 pointer-events-none group-hover:opacity-0">{theme.name}</div>
+      {/if}
+      {#if theme.coverImage}
+        <div class="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
+        <img src={URL.createObjectURL(theme.coverImage)} alt='Cover' class="absolute z-0 object-cover w-full h-full rounded" />
+      {/if}
+    </div>
+
+    {#each theme.CustomImages as image (image.id)}
+      <div class="flex items-center h-16 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-900">
+        <div class="flex-1 h-full ">
+          <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
+        </div>
+        <input
+          type="text"
+          bind:value={image.variableName}
+          oninput={(e) => onImageVariableChange(image.id, e.currentTarget.value)}
+          placeholder="CSS Variable Name"
+          class="flex-grow flex-[3] w-full p-2 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-800/50 dark:text-white"
+        />
+        <button onclick={() => onRemoveImage(image.id)} class="p-2 ml-1 transition dark:text-white">
+          <!-- <Duocolor.XcloseIcon height={20} width={20} /> -->
+        </button>
+      </div>
+    {/each}
+
+    <div class="relative flex justify-center w-full h-8 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-100 dark:bg-zinc-900">
+      <!-- <Duocolor.PlusIcon height={18} width={18} /> -->
+      <span class='dark:text-white'>Add image</span>
+      <input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+    </div>
   </div>
 </div>

src/svelte-interface/utils/themeImageHandlers.ts

@@ -0,0 +1,60 @@
+import type { CustomTheme } from '@/types/CustomThemes';
+
+export function generateImageId(): string {
+  return Math.random().toString(36).substr(2, 9);
+}
+
+export function handleImageUpload(event: Event, theme: CustomTheme): Promise<CustomTheme> | CustomTheme {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+        const imageId = generateImageId();
+        const variableName = `custom-image-${theme.CustomImages.length}`;
+        resolve({
+          ...theme,
+          CustomImages: [...theme.CustomImages, { id: imageId, blob: imageBlob, variableName }],
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  return theme;
+}
+
+export function handleRemoveImage(imageId: string, theme: CustomTheme): CustomTheme {
+  return {
+    ...theme,
+    CustomImages: theme.CustomImages.filter((image) => image.id !== imageId),
+  };
+}
+
+export function handleImageVariableChange(imageId: string, variableName: string, theme: CustomTheme): CustomTheme {
+  return {
+    ...theme,
+    CustomImages: theme.CustomImages.map((image) =>
+      image.id === imageId ? { ...image, variableName } : image
+    ),
+  };
+}
+
+export function handleCoverImageUpload(event: Event, theme: CustomTheme): Promise<CustomTheme> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const imageBlob = await fetch(reader.result as string).then(res => res.blob());
+        resolve({ ...theme, coverImage: imageBlob });
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  return Promise.resolve(theme);
+}