feat(ThemeCreator): add image uploading

src/svelte-interface/components/Switch.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div
-  class="flex w-14 p-1 cursor-pointer transition-all duration-500 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
   data-ison={state}
   onclick={() => onChange(!state)}
   onkeydown={(e) => e.key === "Enter" && onChange(!state)}

src/svelte-interface/pages/themeCreator.svelte

@@ -64,7 +64,7 @@
 
   })
 
-  type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor';
+  type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload';
 
   type SwitchProps = { state: boolean; onChange: (value: boolean) => void };
   type ButtonProps = { onClick: () => void; text: string };
@@ -100,6 +100,30 @@
       <ColourPicker savePresets={false} standalone={true} {...(item.props)} />
     {:else if item.type === 'codeEditor'}
       <CodeEditor {...(item.props as CodeEditorProps)} />
+    {:else if item.type === 'imageUpload'}
+      {#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">
+            <span class='font-IconFamily'>{'\ued8c'}</span>
+          </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">
+        <span class='font-IconFamily'>{'\uec60'}</span>
+        <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>
     {/if}
   </div>
 {/snippet}
@@ -137,6 +161,23 @@
 
     <Divider />
 
+    <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 font-IconFamily ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>
+        {'\uec60'}
+      </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>
+
+    <Divider />
+
     {#each [
       {
         type: 'switch',
@@ -166,6 +207,12 @@
           customOnChange: (color: string) => theme = { ...theme, defaultColour: color }
         }
       },
+      {
+        type: 'imageUpload',
+        title: 'Custom Images',
+        description: 'Add custom images to your theme',
+        direction: 'vertical',
+      },
       {
         type: 'codeEditor',
         title: 'Custom CSS',
@@ -179,44 +226,5 @@
     ] 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 font-IconFamily ${ 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>