feat(frontend): ImproveApp Editor UI (#3514)

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -1212,54 +1212,67 @@
 <div
 	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto"
 >
-	<div class="min-w-64 w-64">
-		<input
-			type="text"
-			placeholder="App summary"
-			class="text-sm w-full font-semibold"
-			bind:value={$summary}
-			on:keydown|stopPropagation
-		/>
-	</div>
-	<div class="flex gap-4 items-center justify-center">
-		<UndoRedo
-			undoProps={{ disabled: $history?.index === 0 }}
-			redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
-			on:undo={() => {
-				$app = undo(history, $app)
-			}}
-			on:redo={() => {
-				$app = redo(history)
-			}}
-		/>
-
-		<div>
-			<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
-				<ToggleButton tooltip="Mobile View" icon={Smartphone} value="sm" />
-				<ToggleButton tooltip="Computer View" icon={Laptop2} value="lg" />
-			</ToggleButtonGroup>
+	<div class="flex flex-row gap-2 items-center">
+		<div class="min-w-64 w-64">
+			<input
+				type="text"
+				placeholder="App summary"
+				class="text-sm w-full font-semibold"
+				bind:value={$summary}
+				on:keydown|stopPropagation
+			/>
+		</div>
+		<div class="flex gap-2">
+			<UndoRedo
+				undoProps={{ disabled: $history?.index === 0 }}
+				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
+				on:undo={() => {
+					$app = undo(history, $app)
+				}}
+				on:redo={() => {
+					$app = redo(history)
+				}}
+			/>
+
+			{#if $app}
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$app.fullscreen}>
+					<ToggleButton
+						icon={AlignHorizontalSpaceAround}
+						value={false}
+						tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
+						iconProps={{ size: 16 }}
+					/>
+					<ToggleButton
+						tooltip="The width is of the app if the full width of its container"
+						icon={Expand}
+						value={true}
+						iconProps={{ size: 16 }}
+					/>
+				</ToggleButtonGroup>
+			{/if}
+			<div>
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+					<ToggleButton
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value="sm"
+						iconProps={{ size: 16 }}
+					/>
+					<ToggleButton
+						tooltip="Computer View"
+						icon={Laptop2}
+						value="lg"
+						iconProps={{ size: 16 }}
+					/>
+				</ToggleButtonGroup>
+			</div>
 		</div>
-		{#if $app}
-			<ToggleButtonGroup class="h-[30px]" bind:selected={$app.fullscreen}>
-				<ToggleButton
-					icon={AlignHorizontalSpaceAround}
-					value={false}
-					tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
-				/>
-				<ToggleButton
-					tooltip="The width is of the app if the full width of its container"
-					icon={Expand}
-					value={true}
-				/>
-			</ToggleButtonGroup>
-		{/if}
 	</div>
 
 	{#if $enterpriseLicense && appPath != ''}
 		<Awareness />
 	{/if}
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
-		<AppEditorTutorial bind:this={appEditorTutorial} />
 		<ButtonDropdown hasPadding={false}>
 			<svelte:fragment slot="buttonReplacement">
 				<Button nonCaptureEvent size="xs" color="light">
@@ -1287,6 +1300,8 @@
 				{/each}
 			</svelte:fragment>
 		</ButtonDropdown>
+		<AppEditorTutorial bind:this={appEditorTutorial} />
+
 		<div class="hidden md:inline relative overflow-visible">
 			{#if hasErrors}
 				<span

frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte

@@ -49,12 +49,16 @@
 
 <ButtonDropdown hasPadding={false}>
 	<svelte:fragment slot="buttonReplacement">
-		<Button nonCaptureEvent size="xs" color="light" variant="border">
-			<div class="flex flex-row items-center gap-2">
-				<BookOpen size={16} />
-				Tutorials
-			</div>
-		</Button>
+		<Button
+			nonCaptureEvent
+			size="xs"
+			color="light"
+			variant="border"
+			iconOnly
+			startIcon={{
+				icon: BookOpen
+			}}
+		/>
 	</svelte:fragment>
 	<svelte:fragment slot="items">
 		<TutorialItem

frontend/src/lib/components/apps/editor/PreviewToggle.svelte

@@ -19,7 +19,14 @@
 		jobs.set([])
 	}}
 >
-	<ToggleButton label="Editor" value="dnd" icon={Pen} disabled={loading} />
+	<ToggleButton
+		label="Editor"
+		value="dnd"
+		icon={Pen}
+		disabled={loading}
+		iconProps={{ size: 16 }}
+		class="gap-2"
+	/>
 	<ToggleButton
 		label="Preview"
 		value="preview"
@@ -27,5 +34,7 @@
 		tooltip="Preview mode"
 		disabled={loading}
 		id="app-editor-preview-toggle"
+		iconProps={{ size: 16 }}
+		class="gap-2"
 	/>
 </ToggleButtonGroup>

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

@@ -2,6 +2,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { Button, Popup, SecondsInput } from '$lib/components/common'
 	import { autoPlacement } from '@floating-ui/core'
+	import { Database } from 'lucide-svelte'
 
 	export let cache_ttl: number | undefined
 </script>
@@ -22,11 +23,11 @@
 				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
 				: 'bg-surface text-primay hover:bg-hover'}
 			color="light"
-			variant="border"
+			variant="contained"
 			size="xs2"
-		>
-			Cache
-		</Button>
+			iconOnly
+			startIcon={{ icon: Database }}
+		/>
 	</svelte:fragment>
 	<div class="block text-primary">
 		<Toggle

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

@@ -172,25 +172,27 @@
 		<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
 			{#if name !== undefined}
 				{#if !transformer}
-					<input
-						on:keydown|stopPropagation
-						bind:value={name}
-						placeholder="Inline script name"
-						class="!text-xs !rounded-xs"
-						on:keyup={() => {
-							$app = $app
-							$stateId++
-						}}
-					/>
+					<div class="flex flex-row gap-2 w-full items-center">
+						<input
+							on:keydown|stopPropagation
+							bind:value={name}
+							placeholder="Inline script name"
+							class="!text-xs !rounded-sm !shadow-none"
+							on:keyup={() => {
+								$app = $app
+								$stateId++
+							}}
+						/>
+						<div
+							title={validCode ? 'Main function parsable' : 'Main function not parsable'}
+							class="rounded-full !w-2 !h-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
+						/>
+					</div>
 				{:else}
 					<span class="text-xs font-semibold truncate w-full">{name} of {id}</span>
 				{/if}
 			{/if}
-			<div class="flex w-full flex-row gap-2 items-center justify-end">
-				<div
-					title={validCode ? 'Main function parsable' : 'Main function not parsable'}
-					class="rounded-full w-2 h-2 {validCode ? 'bg-green-300' : 'bg-red-300'}"
-				/>
+			<div class="flex w-full flex-row gap-1 items-center justify-end">
 				{#if inlineScript}
 					<CacheTtlPopup bind:cache_ttl={inlineScript.cache_ttl} />
 				{/if}
@@ -209,8 +211,8 @@
 				<Button
 					title="Delete"
 					size="xs2"
-					color="red"
-					variant="border"
+					color="light"
+					variant="contained"
 					aria-label="Delete"
 					on:click={() => dispatch('delete')}
 					endIcon={{ icon: Trash2 }}
@@ -221,7 +223,7 @@
 						size="xs2"
 						color="light"
 						title="Full Editor"
-						variant="border"
+						variant="contained"
 						on:click={() => {
 							inlineScriptEditorDrawer?.openDrawer()
 						}}

frontend/src/lib/components/copilot/ScriptGen.svelte

@@ -319,7 +319,7 @@
 						  }}
 					bind:element={button}
 					iconOnly
-					title="Generate code from Prompt"
+					title="Generate code from prompt"
 					startIcon={genLoading
 						? { icon: Ban }
 						: { icon: Wand2, classes: 'text-violet-800 dark:text-violet-400' }}