From 41357847197307905bec960a64a08dcf9eed39ee Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 12 Feb 2025 11:15:53 +0000
Subject: [PATCH] use melt popover in EditableSchemaForm

---
 .../lib/components/EditableSchemaForm.svelte  | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index a5e991393a..a7c6542369 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -18,7 +18,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import Toggle from './Toggle.svelte'
 	import { emptyString } from '$lib/utils'
-	import Popup from './common/popup/Popup.svelte'
+	import Popover from './meltComponents/Popover.svelte'
 	import SchemaFormDnd from './schema/SchemaFormDND.svelte'
 	import { deepEqual } from 'fast-equals'
 	import { tweened } from 'svelte/motion'
@@ -371,12 +371,11 @@
 												{argName}
 												{#if !uiOnly}
 													<div on:click|stopPropagation|preventDefault>
-														<Popup
-															floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+														<Popover
+															placement="bottom-end"
 															containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-															let:close
 														>
-															<svelte:fragment slot="button">
+															<svelte:fragment slot="trigger">
 																<Button
 																	color="light"
 																	size="xs2"
@@ -385,34 +384,36 @@
 																	iconOnly
 																/>
 															</svelte:fragment>
-															<Label label="Name">
-																<div class="flex flex-col gap-2">
-																	<input
-																		type="text"
-																		class="w-full !bg-surface"
-																		value={argName}
-																		id={argName + i}
-																		on:keydown={(event) => {
-																			if (event.key === 'Enter') {
+															<svelte:fragment slot="content" let:close>
+																<Label label="Name" class="p-4">
+																	<div class="flex flex-col gap-2">
+																		<input
+																			type="text"
+																			class="w-full !bg-surface"
+																			value={argName}
+																			id={argName + i}
+																			on:keydown={(event) => {
+																				if (event.key === 'Enter') {
+																					renameProperty(argName, argName + i)
+																					close()
+																				}
+																			}}
+																		/>
+																		<Button
+																			variant="border"
+																			color="light"
+																			size="xs"
+																			on:click={() => {
 																				renameProperty(argName, argName + i)
-																				close(null)
-																			}
-																		}}
-																	/>
-																	<Button
-																		variant="border"
-																		color="light"
-																		size="xs"
-																		on:click={() => {
-																			renameProperty(argName, argName + i)
-																			close(null)
-																		}}
-																	>
-																		Rename
-																	</Button>
-																</div>
-															</Label>
-														</Popup>
+																				close()
+																			}}
+																		>
+																			Rename
+																		</Button>
+																	</div>
+																</Label>
+															</svelte:fragment>
+														</Popover>
 													</div>
 												{/if}
 											</div>