From 278a0852862fad7d7dbcf8c7ed78f1da6cbf6955 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Wed, 2 Oct 2024 09:39:06 +1000
Subject: [PATCH] feat(theme): implement custom state for theme creator colour
 picker

---
 .../components/ColourPicker.svelte                | 10 ++++++----
 src/svelte-interface/components/ColourPicker.tsx  |  1 +
 src/svelte-interface/pages/themeCreator.svelte    | 15 +++++++++------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/svelte-interface/components/ColourPicker.svelte b/src/svelte-interface/components/ColourPicker.svelte
index 38e0cd4d..02db3683 100644
--- a/src/svelte-interface/components/ColourPicker.svelte
+++ b/src/svelte-interface/components/ColourPicker.svelte
@@ -5,10 +5,12 @@
   import { animate, spring } from 'motion';
   import { delay } from '@/seqta/utils/delay.ts'
 
-  const { hidePicker, standalone = false, savePresets = true } = $props<{
+  const { hidePicker, standalone = false, savePresets = true, customOnChange = null, customState = null } = $props<{
     hidePicker?: () => void,
     standalone?: boolean,
-    savePresets?: boolean
+    savePresets?: boolean,
+    customOnChange?: (color: string) => void,
+    customState?: string
   }>();
 
   let background = $state<HTMLDivElement | null>(null);
@@ -72,7 +74,7 @@
 
 {#if standalone}
   <div class="h-auto rounded-xl overflow-clip">
-    <ReactAdapter savePresets={savePresets} el={ColourPicker} />
+    <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
   </div>
 {:else}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -86,7 +88,7 @@
       bind:this={content}
       class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
     >
-      <ReactAdapter savePresets={savePresets} el={ColourPicker} />
+      <ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
     </div>
   </div>
 {/if}
diff --git a/src/svelte-interface/components/ColourPicker.tsx b/src/svelte-interface/components/ColourPicker.tsx
index 6761cf44..687db217 100644
--- a/src/svelte-interface/components/ColourPicker.tsx
+++ b/src/svelte-interface/components/ColourPicker.tsx
@@ -41,6 +41,7 @@ export default function Picker({
   const latestValuesRef = useRef({ customThemeColor, customOnChange, savePresets, presets });
 
   useEffect(() => {
+    console.log(customState)
     if (customState !== undefined) {
       setCustomThemeColor(customState)
     } else {
diff --git a/src/svelte-interface/pages/themeCreator.svelte b/src/svelte-interface/pages/themeCreator.svelte
index 7bcd063b..8e34c041 100644
--- a/src/svelte-interface/pages/themeCreator.svelte
+++ b/src/svelte-interface/pages/themeCreator.svelte
@@ -32,13 +32,16 @@
   })
 
   onMount(async () => {
-
     if (themeID) {
       const tempTheme = await getTheme(themeID)
       if (tempTheme) theme = tempTheme
     }
   });
 
+  $effect(() => {
+    console.log(theme)
+  })
+
   type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor';
 
   type SwitchProps = { state: boolean; onChange: (value: boolean) => void };
@@ -119,7 +122,7 @@
         description: 'Useful when your cover image contains text',
         props: {
           state: theme.hideThemeName,
-          onChange: (value) => theme.hideThemeName = value
+          onChange: (value: boolean) => theme = { ...theme, hideThemeName: value }
         }
       },
       {
@@ -128,7 +131,7 @@
         description: 'Force users to use either dark or light mode',
         props: {
           state: theme.forceDark !== undefined,
-          onChange: (value) => theme.forceDark = value ? false : undefined
+          onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
         }
       },
       {
@@ -137,8 +140,8 @@
         description: 'Set the default color for your theme',
         direction: 'vertical',
         props: {
-          color: theme.defaultColour,
-          onChange: (color) => theme.defaultColour = color
+          customState: theme.defaultColour,
+          customOnChange: (color: string) => theme = { ...theme, defaultColour: color }
         }
       },
       {
@@ -148,7 +151,7 @@
         direction: 'vertical',
         props: {
           value: theme.CustomCSS,
-          onChange: (value) => { theme.CustomCSS = value; console.log(theme.CustomCSS) }
+          onChange: (value: string) => { theme = { ...theme, CustomCSS: value } }
         }
       }
     ] as SettingItem[] as setting}