feat: Add settings popup close trigger to improve user experience

src/svelte-interface/components/ColourPicker.svelte

@@ -60,13 +60,13 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   bind:this={background}
-  class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full bg-black/20"
+  class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
   onclick={handleBackgroundClick}
   onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
 >
   <div
     bind:this={content}
-    class="h-auto p-4 bg-white border shadow-lg rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+    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 el={ColourPicker} />
   </div>

src/svelte-interface/hooks/SettingsPopup.ts

@@ -0,0 +1,37 @@
+type SettingsPopupCallback = () => void;
+
+/** 
+ * This is a singleton that triggers an update when the settings popup is closed.
+ * This is used to close the colour picker.
+ * Usage:
+ *  settingsPopup.addListener(() => {
+ *    console.log('Settings popup closed');
+ *  });
+*/ 
+class SettingsPopup {
+  private static instance: SettingsPopup;
+  private listeners: Set<SettingsPopupCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): SettingsPopup {
+    if (!SettingsPopup.instance) {
+      SettingsPopup.instance = new SettingsPopup();
+    }
+    return SettingsPopup.instance;
+  }
+
+  public addListener(callback: SettingsPopupCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: SettingsPopupCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerClose(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const settingsPopup = SettingsPopup.getInstance();

src/svelte-interface/pages/settings.svelte

@@ -11,6 +11,7 @@
 
   import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
   import ColourPicker from '../components/ColourPicker.svelte'
+  import { settingsPopup } from '../hooks/SettingsPopup'
 
 
   const openColourPicker = () => {
@@ -31,10 +32,15 @@
   let showColourPicker = $state<boolean>(false);
 
   onMount(() => {
+    settingsPopup.addListener(() => {
+      showColourPicker = false;
+    });
+    
     if (!standalone) return;
     // @ts-ignore
     let globalStandalone = createStandalone();
     globalStandalone = standalone;
+
   });
 </script>