From 42afefb3e39666ff014c961ea0f276a1ba52eb06 Mon Sep 17 00:00:00 2001
From: llama <gh@siid.sh>
Date: Thu, 18 Sep 2025 17:41:35 +0800
Subject: [PATCH] show saved custom colours as possible options in colour
 picker

this is primarily for mobile clients, as qt currently ignores this
---
 ts/routes/image-occlusion/Toolbar.svelte | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/ts/routes/image-occlusion/Toolbar.svelte b/ts/routes/image-occlusion/Toolbar.svelte
index 8775de936..8fa9d5215 100644
--- a/ts/routes/image-occlusion/Toolbar.svelte
+++ b/ts/routes/image-occlusion/Toolbar.svelte
@@ -55,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         onWheelDragX,
     } from "./tools/tool-zoom";
     import { fillMask } from "./tools/tool-fill";
+    import { getCustomColours } from "@generated/backend";
 
     export let canvas;
     export let iconSize;
@@ -76,6 +77,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let colourRef: HTMLInputElement | undefined;
     const colour = writable(SHAPE_MASK_COLOR);
 
+    const customColorPickerPalette = writable<string[]>([]);
+
+    async function loadCustomColours() {
+        customColorPickerPalette.set(
+            (await getCustomColours({})).colours.filter(
+                (hex) => !hex.startsWith("#ffffff"),
+            ),
+        );
+    }
+
     function onClick(event: MouseEvent) {
         const upperCanvas = document.querySelector(".upper-canvas");
         if (event.target == upperCanvas) {
@@ -233,6 +244,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             on(document, "touchstart", onTouchstart),
             on(document, "mousemove", onMousemoveDocument),
         );
+        loadCustomColours();
     });
 
     onDestroy(() => {
@@ -241,7 +253,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <datalist id="colour-palette">
-    <option value={SHAPE_MASK_COLOR}></option>
+    <option>{SHAPE_MASK_COLOR}</option>
+    {#each $customColorPickerPalette as colour}
+        <option>{colour}</option>
+    {/each}
 </datalist>
 
 <input