From 800813759d1bb7e1260f594d38db2ef0dcf1dac7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 12 Apr 2024 09:51:54 +0200
Subject: [PATCH] fix: improve app icon renderer and app html renderer

---
 .../apps/components/buttons/AppButton.svelte  | 12 +++--
 .../components/display/AppDownload.svelte     | 32 +++++++++---
 .../apps/components/display/AppHtml.svelte    | 29 +++--------
 .../apps/components/display/AppMenu.svelte    | 37 ++++++++++----
 .../components/display/AppStatCard.svelte     | 16 ++++--
 .../lib/components/apps/components/icon.ts    |  1 -
 .../components/inputs/AppTextInput.svelte     | 50 +++++++++++++++----
 7 files changed, 116 insertions(+), 61 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 55f3debec1..9e741e7b35 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -67,14 +67,14 @@
 
 	let runnableComponent: RunnableComponent
 
+	let confirmedCallback: (() => void) | undefined = undefined
+
 	let beforeIconComponent: any
 	let afterIconComponent: any
 
 	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
 	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
 
-	let confirmedCallback: (() => void) | undefined = undefined
-
 	async function handleBeforeIcon() {
 		if (resolvedConfig.beforeIcon) {
 			beforeIconComponent = await loadIcon(
@@ -225,13 +225,17 @@
 				{loading}
 			>
 				{#if resolvedConfig.beforeIcon}
-					<div class="min-w-4" bind:this={beforeIconComponent} />
+					{#key resolvedConfig.beforeIcon}
+						<div class="min-w-4" bind:this={beforeIconComponent} />
+					{/key}
 				{/if}
 				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
 					<div>{resolvedConfig.label.toString()}</div>
 				{/if}
 				{#if resolvedConfig.afterIcon}
-					<div class="min-w-4" bind:this={afterIconComponent} />
+					{#key resolvedConfig.afterIcon}
+						<div class="min-w-4" bind:this={afterIconComponent} />
+					{/key}
 				{/if}
 			</Button>
 		{/key}
diff --git a/frontend/src/lib/components/apps/components/display/AppDownload.svelte b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
index 133f3fdfa9..8b06d11130 100644
--- a/frontend/src/lib/components/apps/components/display/AppDownload.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
@@ -34,18 +34,30 @@
 	let beforeIconComponent: any
 	let afterIconComponent: any
 
-	$: resolvedConfig.beforeIcon && handleBeforeIcon()
-	$: resolvedConfig.afterIcon && handleAfterIcon()
+	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
+	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
 
 	async function handleBeforeIcon() {
 		if (resolvedConfig.beforeIcon) {
-			beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
+			beforeIconComponent = await loadIcon(
+				resolvedConfig.beforeIcon,
+				beforeIconComponent,
+				14,
+				undefined,
+				undefined
+			)
 		}
 	}
 
 	async function handleAfterIcon() {
 		if (resolvedConfig.afterIcon) {
-			afterIconComponent = await loadIcon(resolvedConfig.afterIcon)
+			afterIconComponent = await loadIcon(
+				resolvedConfig.afterIcon,
+				afterIconComponent,
+				14,
+				undefined,
+				undefined
+			)
 		}
 	}
 
@@ -101,14 +113,18 @@
 				nonCaptureEvent
 			>
 				<span class="truncate inline-flex gap-2 items-center">
-					{#if resolvedConfig.beforeIcon && beforeIconComponent}
-						<svelte:component this={beforeIconComponent} size={14} />
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div class="min-w-4" bind:this={beforeIconComponent} />
+						{/key}
 					{/if}
 					{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
 						<div>{resolvedConfig.label}</div>
 					{/if}
-					{#if resolvedConfig.afterIcon && afterIconComponent}
-						<svelte:component this={afterIconComponent} size={14} />
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div class="min-w-4" bind:this={afterIconComponent} />
+						{/key}
 					{/if}
 				</span>
 			</Button>
diff --git a/frontend/src/lib/components/apps/components/display/AppHtml.svelte b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
index 701d95243e..7d0b4e873c 100644
--- a/frontend/src/lib/components/apps/components/display/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
@@ -5,7 +5,6 @@
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { initCss } from '../../utils'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
-	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
 
 	export let id: string
@@ -14,7 +13,7 @@
 	export let customCss: ComponentCustomCSS<'htmlcomponent'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore, mode } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	const outputs = initOutput($worldStore, id, {
 		result: undefined,
@@ -22,8 +21,6 @@
 	})
 
 	let result: string | undefined = undefined
-	let h: number | undefined = undefined
-	let w: number | undefined = undefined
 
 	let css = initCss($app.css?.htmlcomponent, customCss)
 </script>
@@ -43,8 +40,6 @@
 		e?.preventDefault()
 	}}
 	class="h-full w-full"
-	bind:clientHeight={h}
-	bind:clientWidth={w}
 >
 	<RunnableWrapper
 		{outputs}
@@ -55,22 +50,10 @@
 		bind:initializing
 		bind:result
 	>
-		{#key result}
-			<iframe
-				frameborder="0"
-				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
-				class={twMerge('p-0', css?.container?.class, 'wm-html')}
-				title="sandbox"
-				srcdoc={result
-					? '<base target="_parent" /><scr' +
-					  `ipt type="application/javascript" src="/tailwind.js"></script>` +
-					  result
-					: ''}
-			/>
-		{/key}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		{#if $mode == 'dnd'}
-			<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
-		{/if}
+		<div class="w-full h-full overflow-auto">
+			{#key result}
+				{@html result}
+			{/key}
+		</div>
 	</RunnableWrapper>
 </div>
diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index eb4d83cfee..16105afcc8 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -40,22 +40,35 @@
 		configuration
 	)
 
-	let beforeIconComponent: any
-	let afterIconComponent: any
 	let css = initCss($app.css?.menucomponent, customCss)
 
-	$: resolvedConfig.beforeIcon && handleBeforeIcon()
-	$: resolvedConfig.afterIcon && handleAfterIcon()
+	let beforeIconComponent: any
+	let afterIconComponent: any
+
+	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
+	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
 
 	async function handleBeforeIcon() {
 		if (resolvedConfig.beforeIcon) {
-			beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
+			beforeIconComponent = await loadIcon(
+				resolvedConfig.beforeIcon,
+				beforeIconComponent,
+				14,
+				undefined,
+				undefined
+			)
 		}
 	}
 
 	async function handleAfterIcon() {
 		if (resolvedConfig.afterIcon) {
-			afterIconComponent = await loadIcon(resolvedConfig.afterIcon)
+			afterIconComponent = await loadIcon(
+				resolvedConfig.afterIcon,
+				afterIconComponent,
+				14,
+				undefined,
+				undefined
+			)
 		}
 	}
 </script>
@@ -104,14 +117,18 @@
 					nonCaptureEvent
 				>
 					<span class="truncate inline-flex gap-2 items-center">
-						{#if resolvedConfig.beforeIcon && beforeIconComponent}
-							<svelte:component this={beforeIconComponent} size={14} />
+						{#if resolvedConfig.beforeIcon}
+							{#key resolvedConfig.beforeIcon}
+								<div class="min-w-4" bind:this={beforeIconComponent} />
+							{/key}
 						{/if}
 						{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
 							<div>{resolvedConfig.label}</div>
 						{/if}
-						{#if resolvedConfig.afterIcon && afterIconComponent}
-							<svelte:component this={afterIconComponent} size={14} />
+						{#if resolvedConfig.afterIcon}
+							{#key resolvedConfig.afterIcon}
+								<div class="min-w-4" bind:this={afterIconComponent} />
+							{/key}
 						{/if}
 					</span>
 				</Button>
diff --git a/frontend/src/lib/components/apps/components/display/AppStatCard.svelte b/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
index 494bfd8fc4..8773601053 100644
--- a/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
@@ -30,11 +30,17 @@
 
 	let iconComponent: any
 
-	$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && handleIcon()
+	$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && iconComponent && handleIcon()
 
 	async function handleIcon() {
 		if (resolvedConfig?.media?.configuration?.icon?.icon) {
-			iconComponent = await loadIcon(resolvedConfig.media.configuration.icon.icon)
+			iconComponent = await loadIcon(
+				resolvedConfig?.media?.configuration?.icon?.icon,
+				iconComponent,
+				34,
+				undefined,
+				undefined
+			)
 		}
 	}
 
@@ -80,8 +86,10 @@
 			style={css?.media?.style}
 		>
 			{#if isIcon}
-				{#if resolvedConfig?.media && iconComponent}
-					<svelte:component this={iconComponent} size={24} />
+				{#if resolvedConfig?.media}
+					{#key resolvedConfig.media}
+						<div class="min-w-4 text-primary" bind:this={iconComponent} />
+					{/key}
 				{/if}
 			{:else}
 				<Loader loading={resolvedConfig?.media?.configuration?.image?.source == undefined}>
diff --git a/frontend/src/lib/components/apps/components/icon.ts b/frontend/src/lib/components/apps/components/icon.ts
index 80763727b1..9029516dd5 100644
--- a/frontend/src/lib/components/apps/components/icon.ts
+++ b/frontend/src/lib/components/apps/components/icon.ts
@@ -31,7 +31,6 @@ export async function loadIcon(
 					elem.setAttribute('stroke', color)
 				}
 			}
-		} else {
 		}
 	} catch (error) {
 		console.error(error)
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
index bfeb5f38ce..0bddcc4480 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -82,18 +82,30 @@
 	let beforeIconComponent: any
 	let afterIconComponent: any
 
-	$: resolvedConfig.beforeIcon && handleBeforeIcon()
-	$: resolvedConfig.afterIcon && handleAfterIcon()
+	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
+	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
 
 	async function handleBeforeIcon() {
 		if (resolvedConfig.beforeIcon) {
-			beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon)
+			beforeIconComponent = await loadIcon(
+				resolvedConfig.beforeIcon,
+				beforeIconComponent,
+				14,
+				undefined,
+				undefined
+			)
 		}
 	}
 
 	async function handleAfterIcon() {
 		if (resolvedConfig.afterIcon) {
-			afterIconComponent = await loadIcon(resolvedConfig.afterIcon)
+			afterIconComponent = await loadIcon(
+				resolvedConfig.afterIcon,
+				afterIconComponent,
+				14,
+				undefined,
+				undefined
+			)
 		}
 	}
 </script>
@@ -141,14 +153,20 @@
 		<AlignWrapper {render} {verticalAlignment}>
 			<div class="relative w-full">
 				<div class="absolute top-1/2 -translate-y-1/2 left-2">
-					{#if resolvedConfig.beforeIcon && beforeIconComponent}
-						<svelte:component this={beforeIconComponent} size={14} />
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div class="min-w-4" bind:this={beforeIconComponent} />
+						{/key}
 					{/if}
 				</div>
 
 				{#if inputType === 'password'}
 					<input
-						class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
+						class={twMerge(
+							classInput,
+							resolvedConfig.beforeIcon ? '!pl-8' : '',
+							resolvedConfig.afterIcon ? '!pr-8' : ''
+						)}
 						style={css?.input?.style ?? ''}
 						on:pointerdown|stopPropagation={(e) =>
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -160,7 +178,11 @@
 					/>
 				{:else if inputType === 'text'}
 					<input
-						class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
+						class={twMerge(
+							classInput,
+							resolvedConfig.beforeIcon ? '!pl-8' : '',
+							resolvedConfig.afterIcon ? '!pr-8' : ''
+						)}
 						style={css?.input?.style ?? ''}
 						on:pointerdown|stopPropagation={(e) =>
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -172,7 +194,11 @@
 					/>
 				{:else if inputType === 'email'}
 					<input
-						class={twMerge(classInput, beforeIconComponent && 'pl-8', afterIconComponent && 'pr-8')}
+						class={twMerge(
+							classInput,
+							resolvedConfig.beforeIcon != undefined ? '!pl-8' : '',
+							resolvedConfig.afterIcon ? '!pr-8' : ''
+						)}
 						style={css?.input?.style ?? ''}
 						on:pointerdown|stopPropagation={(e) =>
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
@@ -185,8 +211,10 @@
 				{/if}
 
 				<div class="absolute top-1/2 -translate-y-1/2 right-2">
-					{#if resolvedConfig.afterIcon && afterIconComponent}
-						<svelte:component this={afterIconComponent} size={14} />
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div class="min-w-4" bind:this={afterIconComponent} />
+						{/key}
 					{/if}
 				</div>
 			</div>