From b85b3fb2d340e509d3a0d0edc6fda0a34e58a69a Mon Sep 17 00:00:00 2001
From: Alexander Petric <alpetric@users.noreply.github.com>
Date: Mon, 27 Jan 2025 12:24:22 -0500
Subject: [PATCH] some reactivity improvements and missing dims for
 tabcomponents (#5146)

---
 .../apps/components/display/AppAccordionList.svelte          | 5 +++--
 .../src/lib/components/apps/editor/component/components.ts   | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
index 5aa12072de..9697a1f651 100644
--- a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
@@ -23,7 +23,8 @@
 	type InternalAccordionListInput = AppInput & {
 		value: AccordionListValue[];
 	};
-	const accordionInput = componentInput as InternalAccordionListInput
+
+	$: accordionInput = componentInput as InternalAccordionListInput;
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -101,7 +102,7 @@
 							)}
 						>
 							<span class="mr-2 w-8 font-mono">{activeIndex === index ? '-' : '+'}</span>
-							{accordionInput?.value[index].header || `Header ${index}`}
+							{accordionInput?.value[index]?.header || `Header ${index}`}
 						</button>
 						{#if activeIndex === index}
 							<div class="p-2 overflow-auto w-full">
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index bebb3de1bd..144d3a916c 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -4167,6 +4167,7 @@ export const presetComponents = {
 	sidebartabscomponent: {
 		name: 'Sidebar Tabs',
 		icon: PanelLeft,
+		dims: '3:8-12:8' as AppComponentDimensions,
 		targetComponent: 'tabscomponent' as const,
 		configuration: {
 			tabsKind: {
@@ -4178,6 +4179,7 @@ export const presetComponents = {
 	accordiontabcomponent: {
 		name: 'Accordion Tabs',
 		icon: ListCollapse,
+		dims: '3:8-12:8' as AppComponentDimensions,
 		targetComponent: 'tabscomponent' as const,
 		configuration: {
 			tabsKind: {
@@ -4189,6 +4191,7 @@ export const presetComponents = {
 	invisibletabscomponent: {
 		name: 'Invisible Tabs',
 		icon: PanelTopInactive,
+		dims: '3:8-12:8' as AppComponentDimensions,
 		targetComponent: 'tabscomponent' as const,
 		configuration: {
 			tabsKind: {