add more script builer exit options

frontend/src/lib/components/FlowBuilder.svelte

@@ -20,6 +20,7 @@
 	import type { FlowEditorContext } from './flows/types'
 	import { cleanInputs } from './flows/utils'
 	import { Pen } from 'lucide-svelte'
+	import Kbd from './common/kbd/Kbd.svelte'
 
 	export let initialPath: string = ''
 	export let selectedId: string | undefined
@@ -362,6 +363,7 @@
 				<FlowPreviewButtons />
 				<div class="center-center">
 					<Button
+						title="Ctrl/Cmd + S"
 						loading={loadingSave}
 						size="xs"
 						startIcon={{ icon: faSave }}

frontend/src/lib/components/MoveDrawer.svelte

@@ -85,14 +85,12 @@
 
 <Drawer bind:this={drawer}>
 	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
-		<h1 class="mb-2">Move/Rename {initialPath}</h1>
-
 		{#if !own}
 			<Alert type="warning" title="Not owner"
 				>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
 			>
 		{/if}
-		<h2 class="border-b pb-1 mt-8 mb-4">Summary</h2>
+		<h2 class="border-b pb-1 mt-2 mb-4">Summary</h2>
 		<input
 			type="text"
 			bind:value={summary}
@@ -100,9 +98,10 @@
 			disabled={!own}
 		/>
 
-		<h2 class="border-b pb-1 mt-8 mb-4">Path</h2>
+		<h2 class="border-b pb-1 mt-10 mb-4">Path</h2>
 		<div class="flex flex-col mb-2 gap-6">
 			<Path disabled={!own} {kind} {initialPath} bind:path />
+			<div class="mt-4" />
 			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
 			<div />
 		</div>

frontend/src/lib/components/ScriptBuilder.svelte

@@ -83,6 +83,17 @@
 		scriptEditor?.inferSchema(script.content, language)
 	}
 
+	async function leaveF(leave: boolean, newHash: string) {
+		if (leave) {
+			history.replaceState(history.state, '', `/scripts/edit/${newHash}`)
+			goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
+		} else {
+			await goto(`/scripts/edit/${newHash}`)
+			script.hash = newHash
+			topHash = undefined
+		}
+	}
+
 	async function editScript(leave: boolean): Promise<void> {
 		loadingSave = true
 		try {
@@ -112,34 +123,37 @@
 					kind: script.kind
 				}
 			})
-			if (leave) {
-				history.replaceState(history.state, '', `/scripts/edit/${newHash}`)
-				goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
-			} else {
-				await goto(`/scripts/edit/${newHash}`)
-				script.hash = newHash
-				topHash = undefined
-			}
+			leaveF(leave, newHash)
 		} catch (error) {
 			sendUserToast(`Error while saving the script: ${error.body || error.message}`, true)
 		}
 		loadingSave = false
 	}
 
-	const dropdownItems: Array<{ label: string; onClick: () => void }> = [
-		{
-			label: 'Save and leave',
-			onClick: () => editScript(true)
-		}
-	]
+	function computeDropdownItems() {
+		let dropdownItems: { label: string; onClick: () => void }[] = []
+
+		if ($dirtyStore) {
+			dropdownItems.push({
+				label: 'Save and see details',
+				onClick: () => editScript(true)
+			})
+		}
 
-	if (initialPath != '') {
 		dropdownItems.push({
-			label: 'Fork',
-			onClick: () => {
-				window.open(`/scripts/add?template=${initialPath}`)
-			}
+			label: 'See details',
+			onClick: () => leaveF(true, script.hash)
 		})
+
+		if (initialPath != '') {
+			dropdownItems.push({
+				label: 'Fork',
+				onClick: () => {
+					window.open(`/scripts/add?template=${initialPath}`)
+				}
+			})
+		}
+		return dropdownItems
 	}
 </script>
 
@@ -286,12 +300,13 @@
 						Customise
 					</Button>
 					<Button
+						disabled={!$dirtyStore}
 						color="dark"
 						loading={loadingSave}
 						size="sm"
 						startIcon={{ icon: faSave }}
 						on:click={() => editScript(false)}
-						{dropdownItems}
+						dropdownItems={computeDropdownItems}
 					>
 						Save
 					</Button>

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

@@ -77,6 +77,7 @@
 			}
 		}
 	}
+
 	$: if (
 		componentInput &&
 		componentInput.type == 'runnable' &&

frontend/src/lib/components/common/button/Button.svelte

@@ -33,7 +33,15 @@
 		onClick?: () => void
 		href?: string
 	}
-	export let dropdownItems: MenuItem[] | undefined = undefined
+	export let dropdownItems: MenuItem[] | (() => MenuItem[]) | undefined = undefined
+
+	function computeDropdowns(): MenuItem[] | undefined {
+		if (typeof dropdownItems === 'function') {
+			return dropdownItems()
+		} else {
+			return dropdownItems
+		}
+	}
 
 	const dispatch = createEventDispatcher()
 	// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
@@ -80,19 +88,6 @@
 
 	$: buttonProps = {
 		id,
-		class: twMerge(
-			'w-full',
-			colorVariants?.[color]?.[variant],
-			variant === 'border' ? 'border' : '',
-			ButtonType.FontSizeClasses[size],
-			ButtonType.SpacingClasses[spacingSize][variant],
-			'focus:ring-2 font-semibold',
-			dropdownItems ? 'rounded-l-md h-full' : 'rounded-md',
-			'justify-center items-center text-center whitespace-nowrap inline-flex',
-			btnClasses,
-			disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '',
-			'transition-all '
-		),
 		href,
 		target,
 		tabindex: disabled ? -1 : 0,
@@ -121,6 +116,21 @@
 	$: isSmall = size === 'xs' || size === 'sm'
 	$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes)
 	$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes)
+
+	function computeClass() {
+		return twMerge(
+			'w-full',
+			colorVariants?.[color]?.[variant],
+			variant === 'border' ? 'border' : '',
+			ButtonType.FontSizeClasses[size],
+			ButtonType.SpacingClasses[spacingSize][variant],
+			'focus:ring-2 font-semibold',
+			dropdownItems ? 'rounded-l-md h-full' : 'rounded-md',
+			'justify-center items-center text-center whitespace-nowrap inline-flex',
+			btnClasses,
+			'transition-all '
+		)
+	}
 </script>
 
 <div class="{dropdownItems ? ' divide-x divide-frost-600' : ''} {wrapperClasses} flex flex-row">
@@ -131,6 +141,10 @@
 		on:click={onClick}
 		on:focus
 		on:blur
+		class={twMerge(
+			computeClass(),
+			disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+		)}
 		{...buttonProps}
 		disabled={disabled || loading}
 		type="submit"
@@ -151,12 +165,14 @@
 	</svelte:element>
 
 	{#if dropdownItems}
-		<div class={twMerge(buttonProps.class, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
+		<div class={twMerge(computeClass(), 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
 			<ButtonDropdown>
 				<svelte:fragment slot="items">
-					{#each dropdownItems as item}
+					{#each computeDropdowns() ?? [] as item}
 						<MenuItem on:click={item.onClick} href={item.href}>
-							<div class="!text-gray-700 px-4 py-2 my-1 cursor-pointer hover:bg-gray-100 !text-sm">
+							<div
+								class="!text-gray-700 text-left px-4 py-2 my-1 cursor-pointer hover:bg-gray-100 !text-sm"
+							>
 								{item.label}
 							</div>
 						</MenuItem>