feat(frontend): adapt style (#1488)

frontend/src/lib/components/Toggle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
@@ -20,14 +21,14 @@
 <span class="{$$props.class} z-auto">
 	<label
 		for={id}
-		class="inline-flex items-center mt-2 duration-200 {disabled
+		class="inline-flex items-center mt-2 duration-50 {disabled
 			? 'grayscale opacity-50'
 			: 'cursor-pointer'}"
 	>
 		{#if Boolean(options?.left)}
 			<span
 				class={twMerge(
-					'mr-2 font-medium duration-200',
+					'mr-2 font-medium duration-50',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
@@ -53,18 +54,19 @@
 				}}
 			/>
 			<div
-				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300
-				peer-checked:after:translate-x-full peer-checked:after:border-white after:content-['']
-				after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300
-				after:border after:rounded-full after:h-5 after:w-5 after:transition-all {color == 'red'
-					? 'peer-checked:bg-red-600'
-					: 'peer-checked:bg-blue-600'}"
+				class={classNames(
+					"transition-all bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
+					color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
+					size === 'sm'
+						? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
+						: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
+				)}
 			/>
 		</div>
 		{#if Boolean(options?.right)}
 			<span
 				class={twMerge(
-					'ml-2 font-medium duration-200',
+					'ml-2 font-medium duration-50',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass

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

@@ -68,6 +68,8 @@
 			hiddenInlineScript.script.doNotRecomputeOnInputChanged = undefined
 		}
 	}
+
+	$: hasScript = hiddenInlineScript?.script?.inlineScript != undefined
 </script>
 
 {#if componentSettings}
@@ -99,6 +101,7 @@
 	<BackgroundScriptSettings
 		bind:script={hiddenInlineScript.script}
 		id={`bg_${hiddenInlineScript.index}`}
+		{hasScript}
 	/>
 
 	<div>
@@ -114,13 +117,6 @@
 				{/key}
 			</PanelSection>
 		{/if}
-
-		{#if hiddenInlineScript.script.inlineScript?.language === 'frontend'}
-			<PanelSection title={`Inputs`}>
-				<div class="text-xs"> Frontend cannot have inputs </div>
-			</PanelSection>
-		{/if}
-
 		<div class="grow shrink" />
 	</div>
 {/if}

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

@@ -43,15 +43,8 @@
 					/>
 				{/if}
 
+				<ToggleButton value="connected" icon={Plug2} iconOnly={clientWidth < 250} label="Connect" />
 				<ToggleButton
-					tooltip="Connect to an output"
-					value="connected"
-					icon={Plug2}
-					iconOnly={clientWidth < 250}
-					label="Connect"
-				/>
-				<ToggleButton
-					tooltip="Compute it with a script/flow"
 					value="runnable"
 					icon={FunctionSquare}
 					iconOnly={clientWidth < 250}

frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte

@@ -4,28 +4,40 @@
 	import ScriptRunConfiguration from './shared/ScriptRunConfiguration.svelte'
 	import BackgroundScriptTriggerBy from './shared/BackgroundScriptTriggerBy.svelte'
 	import { getContext } from 'svelte'
+	import ScriptSettingsSection from './shared/ScriptSettingsSection.svelte'
 
 	export let script: HiddenInlineScript
 	export let id: string
+	export let hasScript: boolean
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 </script>
 
 <div class={'border-y border-gray-200 divide-y'}>
 	<ScriptSettingHeader name={script.name} />
-	<ScriptRunConfiguration
-		bind:autoRefresh={script.autoRefresh}
-		bind:recomputeOnInputChanged={script.recomputeOnInputChanged}
-		canConfigureRecomputeOnInputChanged={script.inlineScript?.language !== 'frontend'}
-		on:updateAutoRefresh={() => {
-			const autoRefresh = !script.autoRefresh
-			if ($runnableComponents?.[id]?.autoRefresh !== autoRefresh && autoRefresh !== undefined) {
-				$runnableComponents[id] = {
-					...$runnableComponents[id],
-					autoRefresh
+
+	{#if hasScript}
+		<ScriptRunConfiguration
+			bind:autoRefresh={script.autoRefresh}
+			bind:recomputeOnInputChanged={script.recomputeOnInputChanged}
+			canConfigureRecomputeOnInputChanged={script.inlineScript?.language !== 'frontend'}
+			on:updateAutoRefresh={() => {
+				const autoRefresh = !script.autoRefresh
+				if ($runnableComponents?.[id]?.autoRefresh !== autoRefresh && autoRefresh !== undefined) {
+					$runnableComponents[id] = {
+						...$runnableComponents[id],
+						autoRefresh
+					}
 				}
-			}
-		}}
-	/>
-	<BackgroundScriptTriggerBy bind:script recomputeOnInputChanged={script.recomputeOnInputChanged} />
+			}}
+		/>
+		<BackgroundScriptTriggerBy
+			bind:script
+			recomputeOnInputChanged={script.recomputeOnInputChanged}
+		/>
+	{:else}
+		<ScriptSettingsSection title="Language selection">
+			<div class="text-xs"> Please configure the language in the inline script panel </div>
+		</ScriptSettingsSection>
+	{/if}
 </div>

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

@@ -2,6 +2,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import ScriptSettingsSection from './ScriptSettingsSection.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 
 	export let autoRefresh: boolean | undefined = false
 	export let recomputeOnInputChanged: boolean | undefined = false
@@ -13,22 +14,21 @@
 
 {#if canConfigureRecomputeOnInputChanged || canConfigureRunOnStart}
 	<ScriptSettingsSection title="Run configuration">
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-1">
 			{#if autoRefresh !== undefined && canConfigureRunOnStart}
 				<div class="flex items-center justify-between w-full">
 					<div class="flex flex-row items-center gap-2 text-xs">
 						Run on start and app refresh
-						<Tooltip>
+						<Tooltip wrapperClass="flex">
 							You may want to disable this so that the background script is only triggered by
 							changes to other values or triggered by another computation on a button (See
 							'Recompute Others')
 						</Tooltip>
 					</div>
-					<input
-						type="checkbox"
+					<Toggle
 						bind:checked={autoRefresh}
-						class="!w-4 !h-4 !rounded-sm"
-						on:click={() => {
+						size="xs"
+						on:change={() => {
 							dispatch('updateAutoRefresh')
 						}}
 					/>
@@ -39,10 +39,13 @@
 					<div class="flex flex-row items-center gap-2 text-xs">
 						Recompute on any input changes
 					</div>
-					<input
-						type="checkbox"
+
+					<Toggle
 						bind:checked={recomputeOnInputChanged}
-						class="!w-4 !h-4 !rounded-sm"
+						size="xs"
+						on:change={() => {
+							dispatch('updateAutoRefresh')
+						}}
 					/>
 				</div>
 			{/if}

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

@@ -2,9 +2,10 @@
 	import type { ResultAppInput } from '$lib/components/apps/inputType'
 	import type { AppEditorContext } from '$lib/components/apps/types'
 	import { getContext } from 'svelte'
-	import ScriptSettingsSection from './ScriptSettingsSection.svelte'
 	import type { AppComponent } from '../../../component'
 	import { Button } from '$lib/components/common'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { Plus, X } from 'lucide-svelte'
 
 	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
 
@@ -14,11 +15,15 @@
 	$: checked = Boolean(appInput.transformer)
 </script>
 
-<ScriptSettingsSection
-	title="Transformer"
-	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`"}
->
-	<div class="flex gap-1 justify-between items-center">
+<div class="p-2">
+	<div class="text-sm font-semibold justify-between flex flex-row items-center">
+		<div class="flex flex-row items-center gap-2">
+			Transformer
+
+			<Tooltip wrapperClass="flex">
+				{"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>
 		<Button
 			size="xs"
 			color={checked ? 'red' : 'light'}
@@ -35,7 +40,15 @@
 				}
 			}}
 		>
-			{checked ? 'Remove' : 'Add a transformer'}
+			<div class="flex flex-row gap-1 items-center">
+				{#if checked}
+					<X size={16} />
+					Remove
+				{:else}
+					<Plus size={16} />
+					Add
+				{/if}
+			</div>
 		</Button>
 	</div>
-</ScriptSettingsSection>
+</div>