From 9cecef0abe25a69b8a5e346fd3312aebbb21e2aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 9 Mar 2023 09:42:51 +0100
Subject: [PATCH] fix(frontend): Minor changes (#1272)

* fix(frontend): Output seach fixed on top

* fix(frontend): Use undo-redo component in flows
---
 .../src/lib/components/FlowBuilder.svelte     | 40 ++++++------------
 .../apps/editor/AppEditorHeader.svelte        | 41 ++++++-------------
 .../editor/contextPanel/ContextPanel.svelte   | 35 ++++++++--------
 .../components/common/button/UndoRedo.svelte  | 34 +++++++++++++++
 frontend/src/lib/components/common/index.ts   |  1 +
 5 files changed, 78 insertions(+), 73 deletions(-)
 create mode 100644 frontend/src/lib/components/common/button/UndoRedo.svelte

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 441a4f6af2..482a4452d3 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -9,7 +9,7 @@
 	import { setContext } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
-	import { Button, ButtonPopup, ButtonPopupItem } from './common'
+	import { Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common'
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { OFFSET } from './CronInput.svelte'
@@ -259,33 +259,17 @@
 		>
 			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />
-				<div class="flex gap-1">
-					<Button
-						title="Undo (Ctrl + z)"
-						disabled={$history.index == 0}
-						variant="border"
-						color="dark"
-						size="xs"
-						on:click={async () => {
-							$flowStore = undo(history, $flowStore)
-							$selectedIdStore = 'Input'
-						}}
-					>
-						<Undo size={14} />
-					</Button>
-					<Button
-						title="Redo (Ctrl + Shift + z)"
-						disabled={$history.index == $history.history.length - 1}
-						variant="border"
-						color="dark"
-						size="xs"
-						on:click={async () => {
-							$flowStore = redo(history)
-						}}
-					>
-						<Redo size={14} />
-					</Button>
-				</div>
+				<UndoRedo
+					undoProps={{ disabled: $history.index === 0 }}
+					redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+					on:undo={() => {
+						$flowStore = undo(history, $flowStore)
+						$selectedIdStore = 'Input'
+					}}
+					on:redo={() => {
+						$flowStore = redo(history)
+					}}
+				/>
 			</div>
 
 			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 569475067e..336f3eeff8 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -7,7 +7,8 @@
 		ButtonPopup,
 		ButtonPopupItem,
 		Drawer,
-		DrawerContent
+		DrawerContent,
+		UndoRedo
 	} from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
@@ -475,34 +476,16 @@
 	<div class="min-w-64 w-64">
 		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
 	</div>
-	<div class="flex">
-		<Button
-			title="Undo"
-			disabled={$history.index == 0}
-			variant="border"
-			color="light"
-			size="xs"
-			btnClasses="!min-h-[30px] !rounded-r-none"
-			on:click={async () => {
-				$app = undo(history, $app)
-			}}
-		>
-			<Undo size={14} />
-		</Button>
-		<Button
-			title="Redo"
-			disabled={$history.index == $history.history.length - 1}
-			variant="border"
-			color="light"
-			size="xs"
-			btnClasses="!min-h-[30px] !rounded-l-none !border-r-0"
-			on:click={async () => {
-				$app = redo(history)
-			}}
-		>
-			<Redo size={14} />
-		</Button>
-	</div>
+	<UndoRedo
+		undoProps={{ disabled: $history.index === 0 }}
+		redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+		on:undo={() => {
+			$app = undo(history, $app)
+		}}
+		on:redo={() => {
+			$app = redo(history)
+		}}
+	/>
 	<div class="flex gap-4 items-center grow justify-center">
 		<div>
 			<ToggleButtonGroup bind:selected={$mode}>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 0a041d09ef..4943b4de09 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -60,28 +60,31 @@
 </script>
 
 <PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
-	<div class="overflow-auto h-full min-w-[150px] w-full relative flex flex-col gap-4 p-2">
-		<div class="relative {$connectingInput?.opened ? 'bg-white z-50' : ''}">
-			<input
-				bind:value={search}
-				class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
-				placeholder="Search outputs..."
-			/>
-			{#if search}
-				<button
-					class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
-					on:click|stopPropagation|preventDefault={() => (search = '')}
-				>
-					<X size="14" />
-				</button>
-			{/if}
+	<div class="overflow-auto h-full min-w-[150px] w-full relative flex flex-col">
+		<div class="sticky z-50 top-0 left-0 w-full bg-white px-2 pb-2">
+			<div class="relative">
+				<input
+					bind:value={search}
+					class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+					placeholder="Search outputs..."
+				/>
+				{#if search}
+					<button
+						class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+						on:click|stopPropagation|preventDefault={() => (search = '')}
+					>
+						<X size="14" />
+					</button>
+				{/if}
+			</div>
 		</div>
-		<div class="relative">
+		<div class="relative p-2">
 			{#each filteredPanels as [componentId, outputs] (componentId)}
 				<div
 					animate:flip={{ duration: 300 }}
 					in:fade|local={{ duration: 100, delay: 50 }}
 					out:fade|local={{ duration: 100 }}
+					class="pb-2"
 				>
 					{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
 						{@const name = getComponentNameById(componentId)}
diff --git a/frontend/src/lib/components/common/button/UndoRedo.svelte b/frontend/src/lib/components/common/button/UndoRedo.svelte
new file mode 100644
index 0000000000..583e6246e1
--- /dev/null
+++ b/frontend/src/lib/components/common/button/UndoRedo.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Redo, Undo } from 'lucide-svelte'
+	import { createEventDispatcher } from 'svelte'
+	import { Button } from '..'
+
+	export let undoProps: Record<string, any> = {}
+	export let redoProps: Record<string, any> = {}
+	const dispatch = createEventDispatcher()
+</script>
+
+<div class="flex">
+	<Button
+		title="Undo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-r-none"
+		on:click={() => dispatch('undo')}
+		{...undoProps}
+	>
+		<Undo size={14} />
+	</Button>
+	<Button
+		title="Redo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
+		on:click={() => dispatch('redo')}
+		{...redoProps}
+	>
+		<Redo size={14} />
+	</Button>
+</div>
diff --git a/frontend/src/lib/components/common/index.ts b/frontend/src/lib/components/common/index.ts
index c5656dcff4..3a0cbc2255 100644
--- a/frontend/src/lib/components/common/index.ts
+++ b/frontend/src/lib/components/common/index.ts
@@ -4,6 +4,7 @@ export { default as Badge } from './badge/Badge.svelte'
 export { default as Button } from './button/Button.svelte'
 export { default as ButtonPopup } from './button/ButtonPopup.svelte'
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte'
+export { default as UndoRedo } from './button/UndoRedo.svelte'
 export { default as Drawer } from './drawer/Drawer.svelte'
 export { default as DrawerContent } from './drawer/DrawerContent.svelte'
 export { default as Kbd } from './kbd/Kbd.svelte'