From e44ebc45fb1f51f66ae3d9f007248cb2afde4aec Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 30 Nov 2023 22:09:57 +0100
Subject: [PATCH] fix: improve stat card

---
 .../apps/components/display/AppStatCard.svelte    | 15 +++++++++------
 .../editor/contextPanel/ComponentOutput.svelte    |  2 +-
 .../editor/settingsPanel/ComponentPanel.svelte    | 12 ++++++------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppStatCard.svelte b/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
index 54425d6fd3..494bfd8fc4 100644
--- a/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
@@ -10,6 +10,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import { loadIcon } from '../icon'
 	import Loader from '../helpers/Loader.svelte'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -29,10 +30,10 @@
 
 	let iconComponent: any
 
-	$: isIcon && resolvedConfig?.media?.configuration?.icon.icon && handleIcon()
+	$: isIcon && resolvedConfig?.media?.configuration?.icon?.icon && handleIcon()
 
 	async function handleIcon() {
-		if (resolvedConfig?.media?.configuration?.icon.icon) {
+		if (resolvedConfig?.media?.configuration?.icon?.icon) {
 			iconComponent = await loadIcon(resolvedConfig.media.configuration.icon.icon)
 		}
 	}
@@ -59,6 +60,8 @@
 	/>
 {/each}
 
+<InitializeComponent {id} />
+
 {#if render}
 	<div
 		class={twMerge(
@@ -77,18 +80,18 @@
 			style={css?.media?.style}
 		>
 			{#if isIcon}
-				{#if resolvedConfig.media && iconComponent}
+				{#if resolvedConfig?.media && iconComponent}
 					<svelte:component this={iconComponent} size={24} />
 				{/if}
 			{:else}
-				<Loader loading={resolvedConfig.media.configuration.image.source == undefined}>
+				<Loader loading={resolvedConfig?.media?.configuration?.image?.source == undefined}>
 					<img
 						on:pointerdown|preventDefault
 						src={getImageDataURL(
 							resolvedConfig?.media?.configuration?.image?.sourceKind,
 							resolvedConfig?.media?.configuration?.image?.source
 						)}
-						alt={resolvedConfig.title}
+						alt={resolvedConfig?.title}
 					/>
 				</Loader>
 			{/if}
@@ -103,7 +106,7 @@
 				)}
 				style={css?.title?.style}
 			>
-				{resolvedConfig.title}
+				{resolvedConfig?.title}
 			</div>
 			<div class="mt-1 flex items-baseline justify-between">
 				<div
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
index 91e5424340..0ecf20adfe 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
@@ -21,7 +21,7 @@
 
 	function getComponentNameById(componentId: string) {
 		if (gridItem?.data?.type) {
-			return components[gridItem?.data.type].name
+			return components?.[gridItem?.data.type]?.name ?? 'Unknown'
 		} else if (componentId == 'ctx') {
 			return 'Context'
 		} else if (componentId.startsWith(BG_PREFIX)) {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index c7a5c11c94..1fcecc1c59 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -121,11 +121,11 @@
 	}
 
 	const initialConfiguration = componentSettings?.item?.data?.type
-		? ccomponents[componentSettings.item.data.type].initialData.configuration
+		? ccomponents[componentSettings.item.data.type]?.initialData?.configuration
 		: {}
 
 	const componentInput: RichConfiguration | undefined = componentSettings?.item?.data?.type
-		? ccomponents[componentSettings?.item?.data?.type].initialData.componentInput
+		? ccomponents[componentSettings?.item?.data?.type]?.initialData?.componentInput
 		: undefined
 
 	$: componentSettings?.item?.data && ($app = $app)
@@ -170,10 +170,10 @@
 	{@const component = componentSettings.item.data}
 	<div class="flex justify-between items-center px-3 py-2 bg-surface-selected">
 		<div class="text-xs text-primary font-semibold"
-			>{components[componentSettings.item.data.type].name}</div
+			>{components[componentSettings.item.data.type]?.name ?? 'Unknown'}</div
 		>
 		<a
-			href={components[componentSettings.item.data.type].documentationLink}
+			href={components[componentSettings.item.data.type]?.documentationLink}
 			target="_blank"
 			class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
 		>
@@ -371,7 +371,7 @@
 
 		<div class="grow shrink" />
 
-		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
+		{#if Object.keys(ccomponents[component.type]?.customCss ?? {}).length > 0}
 			<PanelSection title="Styling">
 				<div slot="action" class="flex justify-end flex-wrap gap-1">
 					<Button
@@ -387,7 +387,7 @@
 				<AlignmentEditor bind:component={componentSettings.item.data} />
 				{#if viewCssOptions}
 					<div transition:slide|local class="w-full">
-						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+						{#each Object.keys(ccomponents[component.type]?.customCss ?? {}) as name}
 							{#if componentSettings.item.data?.customCss != undefined}
 								<div class="w-full mb-2">
 									<CssProperty