From da80f2582a3097c955884c813216a01e76ec7ed2 Mon Sep 17 00:00:00 2001
From: Alexander Petric <petric.al@gmail.com>
Date: Fri, 24 Jan 2025 09:42:15 -0500
Subject: [PATCH] feat: tabs component accordion

---
 .../apps/components/layout/AppTabs.svelte     | 92 ++++++++++++++-----
 .../apps/editor/component/components.ts       |  2 +-
 2 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 4d702c5eef..4811dc8e5b 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -48,6 +48,8 @@
 		selectedTabIndex: 0
 	})
 
+	const titleBarHeight = 40; // Example height of a single accordion title bar in pixels
+
 	function handleTabSelection() {
 		selectedIndex = tabs?.indexOf(selected)
 		outputs?.selectedTabIndex.set(selectedIndex)
@@ -170,28 +172,74 @@
 				</button>
 			{/each}
 		</div>
+	{:else if resolvedConfig.tabsKind == 'accordion'}
+		<div class="flex flex-col w-full">
+			{#each tabs ?? [] as res, index}
+				<div class="mb-2">
+					<button
+						on:pointerdown|stopPropagation
+						on:click={() => (selected = res)}
+						class={twMerge(
+							'w-full text-left p-2 cursor-pointer flex items-center text-secondary',
+							css?.allTabs?.class,
+							'wm-tabs-alltabs',
+							selected == res
+								? twMerge(
+										'bg-surface text-primary',
+										css?.selectedTab?.class,
+										'wm-tabs-selectedTab'
+								  )
+								: ''
+						)}
+					>
+						<span class="mr-2">{selected == res ? '-' : '+'}</span>
+						{res}
+					</button>
+					{#if selected == res}
+						<div class="p-2 border-t">
+							<SubGridEditor
+								{id}
+								visible={render && index === selectedIndex}
+								subGridId={`${id}-${index}`}
+								class={twMerge(css?.container?.class, 'wm-tabs-container')}
+								style={css?.container?.style}
+								containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
+								on:focus={() => {
+									if (!$connectingInput.opened) {
+										$selectedComponent = [id]
+										handleTabSelection()
+									}
+								}}
+							/>
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
 	{/if}
 
-	<div class="w-full">
-		{#if $app.subgrids}
-			{#each tabs ?? [] as _res, i}
-				<SubGridEditor
-					{id}
-					visible={render && i === selectedIndex}
-					subGridId={`${id}-${i}`}
-					class={twMerge(css?.container?.class, 'wm-tabs-container')}
-					style={css?.container?.style}
-					containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
-						? componentContainerHeight - tabHeight
-						: componentContainerHeight}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
-							handleTabSelection()
-						}
-					}}
-				/>
-			{/each}
-		{/if}
-	</div>
+	{#if resolvedConfig.tabsKind !== 'accordion'}
+		<div class="w-full">
+			{#if $app.subgrids}
+				{#each tabs ?? [] as _res, i}
+					<SubGridEditor
+						{id}
+						visible={render && i === selectedIndex}
+						subGridId={`${id}-${i}`}
+						class={twMerge(css?.container?.class, 'wm-tabs-container')}
+						style={css?.container?.style}
+						containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
+							? componentContainerHeight - tabHeight
+							: componentContainerHeight}
+						on:focus={() => {
+							if (!$connectingInput.opened) {
+								$selectedComponent = [id]
+								handleTabSelection()
+							}
+						}}
+					/>
+				{/each}
+			{/if}
+		</div>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index df833f1528..69d77160e3 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -446,7 +446,7 @@ const buttonColorOptions = [...BUTTON_COLORS]
 
 export const selectOptions = {
 	buttonColorOptions,
-	tabsKindOptions: ['tabs', 'sidebar', 'invisibleOnView'],
+	tabsKindOptions: ['tabs', 'sidebar', 'accordion', 'invisibleOnView'],
 	buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
 	tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
 	chartThemeOptions: ['theme1', 'theme2', 'theme3'],