From d976bf5965eda10e3ecb71821c23e93e5d712a02 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 27 Jun 2025 22:38:21 +0200
Subject: [PATCH] fix: improve accent color picker disabled state

---
 .../forms/accent-color-picker.svelte          | 19 ++++++++++---------
 .../forms/app-config-general-form.svelte      |  1 +
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/accent-color-picker.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/accent-color-picker.svelte
index 3e3c1839..d5dfffda 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/accent-color-picker.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/forms/accent-color-picker.svelte
@@ -7,8 +7,9 @@
 
 	let {
 		selectedColor = $bindable(),
-		previousColor
-	}: { selectedColor: string; previousColor: string } = $props();
+		previousColor,
+		disabled = false
+	}: { selectedColor: string; previousColor: string; disabled?: boolean } = $props();
 	let showCustomColorDialog = $state(false);
 
 	const accentColors = [
@@ -30,10 +31,6 @@
 		selectedColor = accentValue;
 		applyAccentColor(accentValue);
 	}
-
-	function handleCustomColorApply(color: string) {
-		handleAccentColorChange(color);
-	}
 </script>
 
 <RadioGroup.Root
@@ -54,7 +51,7 @@
 	{@render colorOption('Custom', 'custom', false, true)}
 </RadioGroup.Root>
 
-<CustomColorDialog bind:open={showCustomColorDialog} onApply={handleCustomColorApply} />
+<CustomColorDialog bind:open={showCustomColorDialog} onApply={handleAccentColorChange} />
 
 {#snippet colorOption(
 	label: string,
@@ -66,9 +63,13 @@
 		<RadioGroup.Item id={color} value={color} class="sr-only" />
 		<Label
 			for={color}
-			class="cursor-pointer {isCustomColorSelection ? 'group' : ''}"
+			class={{
+				'cursor-pointer': !disabled,
+				'cursor-not-allowed': disabled,
+				group: isCustomColorSelection
+			}}
 			onclick={() => {
-				if (isCustomColorSelection) {
+				if (isCustomColorSelection && !disabled) {
 					showCustomColorDialog = true;
 				}
 			}}
diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
index 55e77ffb..7faa5bb3 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
@@ -161,6 +161,7 @@
 				<AccentColorPicker
 					previousColor={appConfig.accentColor}
 					bind:selectedColor={$inputs.accentColor.value}
+					disabled={$appConfigStore.uiConfigDisabled}
 				/>
 			</div>
 		</div>