From a1d8538c64beb4d7e8559934985772fba27623ca Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Sun, 7 Sep 2025 19:49:07 +0200
Subject: [PATCH] feat: add info box to app settings if UI config is disabled

---
 frontend/messages/en.json                     |  4 +++-
 .../src/lib/components/ui/alert/alert.svelte  |  7 ++++---
 .../application-configuration/+page.svelte    | 19 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index ab5dd571..a9646258 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -443,5 +443,7 @@
 	"custom_client_id_description": "Set a custom client ID if this is required by your application. Otherwise, leave it blank to generate a random one.",
 	"generated": "Generated",
 	"administration": "Administration",
-	"group_rdn_attribute_description": "The attribute used in the groups distinguished name (DN). Recommended value: `cn`"
+	"group_rdn_attribute_description": "The attribute used in the groups distinguished name (DN). Recommended value: `cn`",
+	"ui_config_disabled_info_title": "UI Configuration Disabled",
+	"ui_config_disabled_info_description": "The UI configuration is disabled because the application configuration settings are managed through environment variables. Some settings may not be editable."
 }
diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte
index eafe6b5f..32a5fbf5 100644
--- a/frontend/src/lib/components/ui/alert/alert.svelte
+++ b/frontend/src/lib/components/ui/alert/alert.svelte
@@ -1,11 +1,12 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const alertVariants = tv({
 		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
+				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-100',
 				destructive:
 					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
 				warning:
@@ -21,10 +22,10 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
-	import { onMount } from 'svelte';
 	import { LucideX } from '@lucide/svelte';
+	import { onMount } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
diff --git a/frontend/src/routes/settings/admin/application-configuration/+page.svelte b/frontend/src/routes/settings/admin/application-configuration/+page.svelte
index 33059711..ad03d6e4 100644
--- a/frontend/src/routes/settings/admin/application-configuration/+page.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/+page.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
 	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
+	import * as Alert from '$lib/components/ui/alert';
 	import { m } from '$lib/paraglide/messages';
 	import AppConfigService from '$lib/services/app-config-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { LucideImage, Mail, SlidersHorizontal, UserSearch, Users } from '@lucide/svelte';
+	import {
+		LucideImage,
+		LucideInfo,
+		Mail,
+		SlidersHorizontal,
+		UserSearch,
+		Users
+	} from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';
 	import AppConfigEmailForm from './forms/app-config-email-form.svelte';
 	import AppConfigGeneralForm from './forms/app-config-general-form.svelte';
@@ -58,6 +66,15 @@
 	<title>{m.application_configuration()}</title>
 </svelte:head>
 
+{#if $appConfigStore.uiConfigDisabled}
+	<Alert.Root variant="info">
+		<LucideInfo class="size-4" />
+		<Alert.Title>{m.ui_config_disabled_info_title()}</Alert.Title>
+		<Alert.Description>
+			{m.ui_config_disabled_info_description()}
+		</Alert.Description>
+	</Alert.Root>
+{/if}
 <div>
 	<CollapsibleCard
 		id="application-configuration-general"