From a74c680cf19b4ad7c68d54ba57c85f90c8c8e67e Mon Sep 17 00:00:00 2001
From: tristantr <tristan.use@gmail.com>
Date: Thu, 23 Oct 2025 14:35:37 +0200
Subject: [PATCH] Add tooltip to Modal button and align mondalcomponent
 configuration names with other components

---
 .../apps/components/layout/AppModal.svelte    | 19 +++++++++++++------
 .../apps/editor/component/components.ts       | 16 +++++++++++-----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index a5f3113105..00e69f6c04 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -138,10 +138,16 @@
 {#if everRender}
 	<div class="h-full w-full">
 		<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+			<div
+				class="inline-flex"
+				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0
+					? String(resolvedConfig.tooltip)
+					: undefined}
+			>
 			<Button
 				btnClasses={twMerge(css?.button?.class, 'wm-button', 'wm-modal-button')}
 				wrapperClasses={twMerge(
-					resolvedConfig?.buttonFillContainer ? 'w-full h-full' : '',
+					resolvedConfig?.fillContainer ? 'w-full h-full' : '',
 					css?.buttonContainer?.class,
 					'wm-button-container',
 					'wm-modal-button-container',
@@ -151,7 +157,7 @@
 				)}
 				style={css?.button?.style}
 				wrapperStyle={css?.buttonContainer?.style}
-				disabled={resolvedConfig.buttonDisabled}
+				disabled={resolvedConfig.disabled}
 				on:pointerdown={(e) => {
 					e?.stopPropagation()
 				}}
@@ -162,12 +168,13 @@
 					}
 					disposable?.openDrawer()
 				}}
-				extendedSize={resolvedConfig.buttonSize}
-				color={resolvedConfig.buttonColor}
+				extendedSize={resolvedConfig.size}
+				color={resolvedConfig.color}
 				variant="contained"
 			>
-				<div>{resolvedConfig.buttonLabel}</div>
-			</Button>
+					<div>{resolvedConfig.label}</div>
+				</Button>
+			</div>
 		</AlignWrapper>
 	</div>
 	<Portal target="#app-editor-top-level-drawer" name="app-modal">
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index ab9ca96c19..97642aa239 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -3609,12 +3609,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					value: false,
 					tooltip: 'Make button invisible when app is used outside of the edit mode'
 				},
-				buttonLabel: {
+				label: {
 					type: 'static',
 					fieldType: 'text',
 					value: 'Press me'
 				},
-				buttonColor: {
+				color: {
 					fieldType: 'select',
 					type: 'static',
 
@@ -3622,14 +3622,14 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					value: 'blue',
 					tooltip: 'These presets can be overwritten with custom styles.'
 				},
-				buttonSize: {
+				size: {
 					fieldType: 'select',
 					type: 'static',
 
 					selectOptions: selectOptions.buttonSizeOptions,
 					value: 'xs'
 				},
-				buttonFillContainer: {
+				fillContainer: {
 					fieldType: 'boolean',
 					type: 'static',
 
@@ -3637,10 +3637,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					tooltip:
 						'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
 				},
-				buttonDisabled: {
+				disabled: {
 					fieldType: 'boolean',
 					type: 'static',
 					value: false
+				},
+				tooltip: {
+					type: 'static',
+					fieldType: 'text',
+					value: '',
+					tooltip: 'Tooltip text to show on hover'
 				}
 			},
 			componentInput: undefined,