feat(frontend): add a way to automatically resize (wip) + add automatic resizable component

frontend/src/lib/components/apps/components/display/AppMap.svelte

@@ -147,7 +147,6 @@
 	})
 
 	$: css = concatCustomCss($app.css?.mapcomponent, customCss)
-	$: gridItem = findGridItem($app, id)
 
 	function updateRegionOutput() {
 		if (map) {
@@ -164,6 +163,7 @@
 	}
 
 	function handleSyncRegion() {
+		const gridItem = findGridItem($app, id)
 		if (!map || !gridItem) {
 			return
 		}

frontend/src/lib/components/apps/components/display/AppText.svelte

@@ -10,6 +10,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
+	import ResizeWrapper from '../helpers/ResizeWrapper.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -65,34 +66,36 @@
 <InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
 
 <RunnableWrapper flexWrap {componentInput} {id} bind:initializing bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		{#if !result || result === ''}
-			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
-				No text
-			</div>
-		{:else}
-			<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
-				<svelte:element
-					this={component}
-					class={twMerge(
-						'whitespace-pre-wrap',
-						$app.css?.['textcomponent']?.['text']?.class,
-						customCss?.text?.class,
-						classes
-					)}
-					style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
-				>
-					{String(result)}
-				</svelte:element>
-				{#if copyButton && result}
-					<Popover notClickable>
-						<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
-							<Clipboard size={14} strokeWidth={2} />
-						</Button>
-						<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
-					</Popover>
-				{/if}
-			</div>
-		{/if}
-	</AlignWrapper>
+	<ResizeWrapper {id}>
+		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+			{#if !result || result === ''}
+				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
+					No text
+				</div>
+			{:else}
+				<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
+					<svelte:element
+						this={component}
+						class={twMerge(
+							'whitespace-pre-wrap',
+							$app.css?.['textcomponent']?.['text']?.class,
+							customCss?.text?.class,
+							classes
+						)}
+						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
+					>
+						{String(result)}
+					</svelte:element>
+					{#if copyButton && result}
+						<Popover notClickable>
+							<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
+								<Clipboard size={14} strokeWidth={2} />
+							</Button>
+							<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
+						</Popover>
+					{/if}
+				</div>
+			{/if}
+		</AlignWrapper>
+	</ResizeWrapper>
 </RunnableWrapper>

frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { findGridItem } from '../../editor/appUtils'
+	import type { AppEditorContext } from '../../types'
+	import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
+
+	export let id: string
+
+	const { app } = getContext<AppEditorContext>('AppEditorContext')
+
+	$: gridItem = findGridItem($app, id)
+
+	let wrapper: HTMLElement
+
+	$: {
+		if (wrapper && gridItem) {
+			const wrapperHeight = wrapper.getBoundingClientRect().height
+			const parentHeight = wrapper.parentElement?.getBoundingClientRect().height
+
+			console.log(wrapperHeight, parentHeight)
+
+			if (parentHeight && wrapperHeight > parentHeight) {
+				gridItem[12].h = Math.ceil(wrapperHeight / 36)
+
+				gridItem = gridItem
+			}
+
+			if (parentHeight && wrapperHeight < parentHeight) {
+				gridItem[12].h = Math.floor(parentHeight / 36)
+
+				gridItem = gridItem
+			}
+		}
+	}
+</script>
+
+<div bind:this={wrapper}>
+	<slot />
+</div>

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -2,10 +2,12 @@
 	import { goto } from '$app/navigation'
 	import type { Schema } from '$lib/common'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import Popover from '$lib/components/Popover.svelte'
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import { AppService, type CompletedJob } from '$lib/gen'
-	import { defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
+	import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
+	import { Bug } from 'lucide-svelte'
 	import { getContext, onMount } from 'svelte'
 	import type { AppInputs, Runnable } from '../../inputType'
 	import type { Output } from '../../rx'
@@ -276,16 +278,28 @@
 			Please select a runnable
 		</Alert>
 	{:else if result?.error && $mode === 'preview'}
-		<div class="p-2">
-			<Alert type="error" title="Error during execution">
-				<div class="flex flex-col gap-2">
-					An error occured, please contact the app author.
-					<span class="font-semibold">Job id: {testJob?.id}</span>
-					<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
-						>{JSON.stringify(result.error, null, 4)}
-				</pre>
-				</div>
-			</Alert>
+		<div
+			title="Error"
+			class={classNames(
+				'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-2  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+				'bg-red-100/80'
+			)}
+		>
+			<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+				<Bug size={14} />
+				<span slot="text">
+					<div class="bg-white">
+						<Alert type="error" title="Error during execution">
+							<div class="flex flex-col gap-2">
+								An error occured, please contact the app author.
+								<span class="font-semibold">Job id: {testJob?.id}</span>
+							</div>
+						</Alert>
+					</div>
+				</span>
+			</Popover>
+		</div>
+		<div class="block grow w-full max-h-full">
 			<slot />
 		</div>
 	{:else}

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

@@ -15,8 +15,7 @@
 
 	const dispatch = createEventDispatcher()
 
-	const { errorByComponent, openDebugRun, focusedGrid, worldStore } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { errorByComponent, openDebugRun } = getContext<AppEditorContext>('AppEditorContext')
 
 	$: error = Object.values($errorByComponent).find((e) => e.componentId === component.id)
 

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -131,9 +131,8 @@
 				<div class="flex flex-row gap-1 items-center">
 					Format
 
-					<div class="flex flex-row items-center">
+					<div class="flex flex-row items-center gap-1">
 						<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
-						<Plus size={12} />
 						<Kbd>S</Kbd>
 					</div>
 				</div>
@@ -154,9 +153,8 @@
 					<div class="flex flex-row gap-1 items-center">
 						Run
 
-						<div class="flex flex-row items-center">
+						<div class="flex flex-row items-center gap-1">
 							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
-							<Plus size={12} />
 							<Kbd>
 								<div class="h-4 flex items-center justify-center">
 									<CornerDownLeft size={10} />