From faba9281497259fd67acf60fc181d3efadd41729 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Fri, 21 Feb 2025 21:22:12 +0100
Subject: [PATCH] fix: fix app component header buttons

---
 .../apps/editor/ComponentHeader.svelte        | 24 +++++++++++++++++--
 .../components/apps/editor/GridEditor.svelte  |  6 +++++
 .../apps/editor/component/Component.svelte    |  3 +++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 4c26a56818..7386417435 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import type { AppViewerContext } from '../types'
-	import { Anchor, ArrowDownFromLine, Bug, Network, Pen, Plug } from 'lucide-svelte'
+	import { Anchor, ArrowDownFromLine, Bug, Expand, Network, Pen, Plug } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { Button, Popup } from '$lib/components/common'
@@ -61,9 +61,13 @@
 
 	let connectingPopupHover = false
 	$: connectingPopupHover && dispatch('mouseover')
+
+	let hoverHeader = false
 </script>
 
 {#if connecting}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 	<div
 		class="absolute z-50 overflow-auto -top-[18px]"
 		style="left: {id_width}px;"
@@ -105,8 +109,12 @@
 	<div class="-top-[18px] -left-[8px] flex flex-row flex-nowrap w-fit h-fit absolute gap-0.5">
 		<div
 			on:mouseover|stopPropagation={() => {
+				hoverHeader = true
 				dispatch('mouseover')
 			}}
+			on:mouseleave|stopPropagation={() => {
+				hoverHeader = false
+			}}
 			on:mousedown|stopPropagation|capture
 			draggable="false"
 			title={`Id: ${component.id}`}
@@ -139,7 +147,7 @@
 						on:click={() => dispatch('fillHeight')}
 						on:pointerdown|stopPropagation
 					>
-						<ArrowDownFromLine aria-label="Expand position" size={11} />
+						<ArrowDownFromLine aria-label="Full height" size={11} />
 					</button>
 
 					<button
@@ -157,6 +165,18 @@
 							<Anchor aria-label="Lock position" size={11} />
 						{/if}
 					</button>
+					{#if hoverHeader}
+						<button
+							title="Expand"
+							class={twMerge(
+								'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full text-white hover:bg-blue-400 hover:text-white'
+							)}
+							on:click={() => dispatch('expand')}
+							on:pointerdown|stopPropagation
+						>
+							<Expand aria-label="Expand" size={11} />
+						</button>
+					{/if}
 				</div>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 9407e8714a..c2a3585475 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -261,6 +261,12 @@
 							on:fillHeight={() => {
 								handleFillHeight(dataItem.id)
 							}}
+							on:expand={() => {
+								push(history, $app)
+								$selectedComponent = [dataItem.id]
+								expandGriditem($app.grid, dataItem.id, $breakpoint)
+								$app = $app
+							}}
 							{overlapped}
 							{moveMode}
 							{componentDraggedId}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 51d1891cd1..748a04991b 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -19,6 +19,9 @@
 
 {#if everRender}
 	<ComponentRendered
+		on:expand
+		on:lock
+		on:fillHeight
 		{moveMode}
 		{componentDraggedId}
 		{overlapped}