From e4fc89cb999a93402572a23d787c5d1a857679ef Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 28 Oct 2024 15:40:16 +0100
Subject: [PATCH] Add shadow en transition when selecting input

---
 frontend/src/lib/components/ArgInput.svelte   |  4 ++--
 .../lib/components/InputTransformForm.svelte  | 19 ++++++++-------
 .../InputTransformSchemaForm.svelte           |  4 ++--
 .../flows/content/FlowModuleComponent.svelte  |  3 ++-
 .../flows/propPicker/PropPickerWrapper.svelte | 23 +++++++++++++------
 .../propertyPicker/ObjectViewer.svelte        |  2 --
 .../propertyPicker/PropPicker.svelte          |  2 +-
 7 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 80537e4d44..c4c9e72e6a 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -870,9 +870,9 @@
 										'w-full',
 										valid
 											? ''
-											: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
+											: 'border  border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
 									)}
-									placeholder={placeholder ?? defaultValue ?? ''}
+									placeholder="blabla"
 									bind:value
 								/>
 							{/key}
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 64530dd3ba..048c240a09 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -23,7 +23,7 @@
 	import type { FlowCopilotContext } from './copilot/flow'
 	import StepInputGen from './copilot/StepInputGen.svelte'
 	import type { PickableProperties } from './flows/previousResults'
-
+	import { twMerge } from 'tailwind-merge'
 	export let schema: Schema | { properties?: Record<string, any>; required?: string[] }
 	export let arg: InputTransform | any
 	export let argName: string
@@ -189,7 +189,15 @@
 </script>
 
 {#if arg != undefined}
-	<div class={$$props.class}>
+	<div
+		class={twMerge(
+			'p-2 ml-2 relative hover:bg-surface hover:shadow-[0_0_10px_5px_rgba(0,0,0,0.1)] transition-all duration-200',
+			$propPickerConfig?.propName == argName
+				? 'bg-surface rounded-l-md shadow-[0_0_10px_5px_rgba(0,0,0,0.1)] z-2000'
+				: 'hover:rounded-md',
+			$$props.class
+		)}
+	>
 		<div class="flex flex-row justify-between gap-1 pb-1">
 			<div class="flex flex-wrap grow">
 				<FieldHeader
@@ -344,12 +352,7 @@
 
 		<div class="max-w-xs" />
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class="relative {$propPickerConfig?.propName == argName
-				? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
-				: ''}"
-			on:keyup={stepInputGen?.onKeyUp}
-		>
+		<div class="relative p-2" on:keyup={stepInputGen?.onKeyUp}>
 			{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
 				<span
 					class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index 488797c6db..4b1dd080ec 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -84,7 +84,7 @@
 	{#if keys.length > 0}
 		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="z-10 pt-4">
+				<div class="z-10 pt-2 relative">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -128,7 +128,7 @@
 >
 	<div
 		slot="submission"
-		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		class="flex flex-row-reverse w-full border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 	>
 		<Button
 			variant="border"
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 61a1d4fad4..12df94be76 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -374,10 +374,11 @@
 							class={advancedSelected === 'runtime' ? 'h-[calc(100%-68px)]' : 'h-[calc(100%-34px)]'}
 						>
 							{#if selected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow')}
-								<div class="h-full overflow-auto px-2" id="flow-editor-step-input">
+								<div class="h-full overflow-auto px-2 bg-surface" id="flow-editor-step-input">
 									<PropPickerWrapper
 										pickableProperties={stepPropPicker.pickableProperties}
 										error={failureModule}
+										noPadding
 									>
 										<InputTransformSchemaForm
 											bind:this={inputTransformSchemaForm}
diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
index 8dbfa8e524..f50a1e3623 100644
--- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
+++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -58,18 +58,16 @@
 	use:clickOutside
 	on:click_outside={() => propPickerConfig.set(undefined)}
 >
-	<Splitpanes>
-		<Pane
-			minSize={20}
-			size={60}
-			class={twMerge('relative !transition-none', noPadding ? '' : 'p-2')}
-		>
+	<Splitpanes class="splitpanes-remove-splitter">
+		<Pane class={twMerge('relative !transition-none ', noPadding ? '' : 'p-2')}>
 			<slot />
 		</Pane>
 		<Pane
 			minSize={20}
 			size={40}
-			class="pt-2 relative !transition-none {$propPickerConfig ? 'border-2 border-blue-500' : ''}"
+			class="pt-2 relative ml-[-1px] !transition-none z-1000 {$propPickerConfig
+				? 'shadow-[0_0_10px_5px_rgba(0,0,0,0.1)]'
+				: ''}"
 		>
 			{#if result}
 				<PropPickerResult
@@ -102,3 +100,14 @@
 		</Pane>
 	</Splitpanes>
 </div>
+
+<style>
+	:global(.splitpanes-remove-splitter > .splitpanes__pane) {
+		background-color: inherit !important;
+	}
+	:global(.splitpanes-remove-splitter > .splitpanes__splitter) {
+		background-color: transparent !important;
+		width: 0 !important;
+		border: none !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 142ce9d36c..231904d969 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -69,8 +69,6 @@
 	$: keyLimit = isArray ? 1 : 100
 
 	$: fullyCollapsed = keys.length > 1 && collapsed
-
-	$: console.log('dbg current path : ', currentPath)
 </script>
 
 <Portal name="object-viewer">
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 2f5ec0302b..951d295d04 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -63,7 +63,7 @@
 	}
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full !bg-surface">
 	<div class="px-2">
 		{#if !notSelectable}
 			<div class="flex flex-row space-x-1">