Use RunButton in app editor

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -294,7 +294,13 @@
 				>
 					Format
 				</Button>
-				<RunButton bind:runLoading {id} inlineScript={!transformer ? inlineScript : undefined} />
+				<RunButton
+					bind:runLoading
+					{id}
+					inlineScript={!transformer ? inlineScript : undefined}
+					size="xs2"
+					btnClasses="w-24 h-[28px]"
+				/>
 			</div>
 		</div>
 

frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte

@@ -6,13 +6,14 @@
 		CancelablePromise,
 		InlineScript
 	} from '../../types'
-	import { Button } from '$lib/components/common'
-	import { CornerDownLeft, Loader2 } from 'lucide-svelte'
+	import { RunButton } from '$lib/components/common'
 
 	export let id: string
 	export let inlineScript: InlineScript | undefined = undefined
 	export let runLoading = false
 	export let hideShortcut = false
+	export let size: 'xs' | 'xs2' = 'xs'
+	export let btnClasses = ''
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 	const { runnableJobEditorPanel } = getContext<AppEditorContext>('AppEditorContext')
@@ -20,38 +21,23 @@
 </script>
 
 {#if $runnableComponents[id] != undefined}
-	{#if !runLoading}
-		<Button
-			loading={runLoading}
-			size="xs"
-			color="dark"
-			btnClasses="!px-2 !py-1"
-			on:click={async () => {
-				runLoading = true
-				$runnableJobEditorPanel.focused = true
-				try {
-					cancelable = $runnableComponents[id]?.cb?.map((f) => f(inlineScript, true))
-					await Promise.all(cancelable)
-				} catch {}
-				runLoading = false
-			}}
-			shortCut={{ Icon: CornerDownLeft, hide: hideShortcut }}
-		>
-			Run
-		</Button>
-	{:else}
-		<Button
-			size="xs"
-			color="red"
-			variant="border"
-			btnClasses="!px-2 !py-1 !ml-[3px]"
-			on:click={async () => {
-				cancelable?.forEach((f) => f.cancel())
-				runLoading = false
-			}}
-		>
-			<Loader2 size={12} class="animate-spin mr-2" />
-			Cancel
-		</Button>
-	{/if}
+	<RunButton
+		{btnClasses}
+		testIsLoading={runLoading}
+		{hideShortcut}
+		on:cancel={async () => {
+			cancelable?.forEach((f) => f.cancel())
+			runLoading = false
+		}}
+		on:run={async () => {
+			runLoading = true
+			$runnableJobEditorPanel.focused = true
+			try {
+				cancelable = $runnableComponents[id]?.cb?.map((f) => f(inlineScript, true))
+				await Promise.all(cancelable)
+			} catch {}
+			runLoading = false
+		}}
+		{size}
+	/>
 {/if}