feat(frontend): wip

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -78,63 +78,58 @@
 {/if}
 
 {#if selected && !connecting}
-	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
+	<div
+		class="top-[-10px] right-[-6px] flex flex-row absolute gap-0.5 z-50 border bg-surface p-1 rounded-md shadow-sm"
+	>
 		{#if hasInlineEditor}
-			<button
+			<Button
 				title="Edit"
-				class={classNames(
-					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-				)}
+				variant="contained"
+				color="light"
+				size="xs2"
 				on:click={() => dispatch('triggerInlineEditor')}
-				on:pointerdown|stopPropagation
 			>
 				{#if inlineEditorOpened}
 					<Pen aria-label="Unlock position" size={14} class="text-orange-500" />
 				{:else}
 					<Pen aria-label="Lock position" size={14} />
 				{/if}
-			</button>
+			</Button>
 		{/if}
 		{#if component.type === 'conditionalwrapper'}
 			<TabsDebug id={component.id} tabs={component.conditions ?? []} isConditionalDebugMode />
 		{:else if component.type === 'steppercomponent' || (component.type === 'tabscomponent' && component.configuration.tabsKind.type === 'static' && component.configuration.tabsKind.value === 'invisibleOnView')}
 			<TabsDebug id={component.id} tabs={component.tabs ?? []} />
 		{/if}
-		<button
+		<Button
 			title="Expand"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
 			on:click={() => dispatch('expand')}
-			on:pointerdown|stopPropagation
+			variant="contained"
+			color="light"
+			size="xs2"
 		>
 			<Expand aria-label="Expand position" size={14} />
-		</button>
-		<button
+		</Button>
+		<Button
 			title="Lock Position"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
 			on:click={() => dispatch('lock')}
-			on:pointerdown|stopPropagation
+			variant="contained"
+			color="light"
+			size="xs2"
 		>
 			{#if locked}
 				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
 			{:else}
 				<Anchor aria-label="Lock position" size={14} />
 			{/if}
-		</button>
+		</Button>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			draggable="false"
 			title="Move"
 			on:mousedown|stopPropagation|capture
 			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800',
+				'text-2xs px-1.5 py-1 font-bold w-fit cursor-move rounded-md hover:bg-surface-hover',
 				'flex items-center justify-center'
 			)}
 		>

frontend/src/lib/components/apps/editor/TabsDebug.svelte

@@ -2,8 +2,10 @@
 	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
 	import { classNames } from '$lib/utils'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '../types'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { ChevronDown } from 'lucide-svelte'
 
 	export let tabs: any[] = []
 	export let id: string
@@ -13,57 +15,55 @@
 	const { componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	let isManuallySelected: boolean = false
-
-	const dispatch = createEventDispatcher()
+	let renderCount = 0
 </script>
 
-<button
-	title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
-	class={classNames(
-		'text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-		isManuallySelected
-			? 'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
-			: 'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-	)}
-	on:click={() => dispatch('triggerInlineEditor')}
-	on:pointerdown|stopPropagation
->
-	<ButtonDropdown hasPadding={false}>
-		<svelte:fragment slot="items">
-			{#each tabs ?? [] as { }, index}
-				<MenuItem
-					on:click={() => {
-						$componentControl?.[id]?.setTab?.(index)
-						isManuallySelected = true
-					}}
-				>
-					<div
-						class={classNames(
-							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-						)}
-					>
-						{#if index === tabs.length - 1}
-							{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`}
-						{:else}
-							{`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`}
-						{/if}
-					</div>
-				</MenuItem>
-			{/each}
+<ButtonDropdown hasPadding={false}>
+	<svelte:fragment slot="buttonReplacement">
+		<Button
+			title={isConditionalDebugMode ? 'Debug conditions' : 'Debug tabs'}
+			variant="contained"
+			color={isManuallySelected ? 'red' : 'light'}
+			size="xs2"
+			nonCaptureEvent
+		>
+			<ChevronDown size={16} />
+		</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="items">
+		{#each tabs ?? [] as { }, index}
 			<MenuItem
 				on:click={() => {
-					$componentControl?.[id]?.setTab?.(-1)
-					isManuallySelected = false
+					$componentControl?.[id]?.setTab?.(index)
+					isManuallySelected = true
 				}}
 			>
 				<div
 					class={classNames(
-						'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+						'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 					)}
 				>
-					{`Reset debug mode`}
+					{#if index === tabs.length - 1}
+						{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${index + 1}`}
+					{:else}
+						{`Debug ${isConditionalDebugMode ? 'condition' : 'tab'} ${index + 1}`}
+					{/if}
 				</div>
 			</MenuItem>
-		</svelte:fragment>
-	</ButtonDropdown>
-</button>
+		{/each}
+		<MenuItem
+			on:click={() => {
+				$componentControl?.[id]?.setTab?.(-1)
+				isManuallySelected = false
+			}}
+		>
+			<div
+				class={classNames(
+					'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+				)}
+			>
+				{`Reset debug mode`}
+			</div>
+		</MenuItem>
+	</svelte:fragment>
+</ButtonDropdown>

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -278,10 +278,10 @@
 					{#if componentSettings.item.data.componentInput?.type === 'runnable'}
 						{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
 							<div class="w-full">
-								<div class="flex flex-row items-center gap-2 text-sm font-semibold">
+								<div class="flex flex-row items-center gap-1 text-sm font-semibold">
 									Runnable Inputs
 
-									<Tooltip wrapperClass="flex">
+									<Tooltip>
 										The runnable inputs are inferred from the inputs of the flow or script
 										parameters this component is attached to.
 									</Tooltip>

frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte

@@ -17,7 +17,7 @@
 	<div class="flex flex-row items-center gap-2">
 		Transformer
 
-		<Tooltip wrapperClass="flex">
+		<Tooltip>
 			{"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
 		</Tooltip>
 	</div>

frontend/src/lib/components/common/button/ButtonDropdown.svelte

@@ -7,7 +7,9 @@
 
 	export let hasPadding: boolean = true
 
-	const [popperRef, popperContent] = createPopperActions({ placement: 'auto' })
+	const [popperRef, popperContent] = createPopperActions({
+		placement: 'auto'
+	})
 
 	const popperOptions: PopperOptions<{}> = {
 		placement: 'bottom-end',