From 41cc2111d9ee6e2e75e5d9ff5e374561aa540c49 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 14 Oct 2026 00:11:57 +0200
Subject: [PATCH] replace the runnable editor's Format button with an icon
 button (#11748)

* feat: replace the runnable editor's Format button with an icon button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* fix: show the format shortcut in the raw app editor's tooltip too

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../inlineScriptsPanel/InlineScriptEditor.svelte | 16 ++++++++--------
 .../raw_apps/RawAppInlineScriptEditor.svelte     | 13 ++++++++-----
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index b1af1c20f7..0f62f0b4cd 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -6,7 +6,8 @@
 	import type { Preview } from '$lib/gen'
 	import { createEventDispatcher, getContext, onMount, untrack } from 'svelte'
 	import type { AppViewerContext } from '../../types'
-	import { Maximize2, Trash2 } from 'lucide-svelte'
+	import { Maximize2, Paintbrush, Trash2 } from 'lucide-svelte'
+	import { getModifierKey } from '$lib/utils'
 	import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte'
 	import { inferArgs, parseOutputs } from '$lib/infer'
 	import type { Schema } from '$lib/common'
@@ -305,18 +306,17 @@
 				{/if}
 
 				<Button
-					variant="default"
+					title={`Format (${getModifierKey()}S)`}
+					aria-label="Format"
+					variant="subtle"
 					unifiedSize="sm"
 					on:click={async () => {
 						editor?.format()
 						simpleEditor?.format()
 					}}
-					shortCut={{
-						key: 'S'
-					}}
-				>
-					Format
-				</Button>
+					endIcon={{ icon: Paintbrush }}
+					iconOnly
+				/>
 				<RunButton bind:runLoading {id} inlineScript={!transformer ? inlineScript : undefined} />
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
index 170c3a1b5b..844a447d51 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
@@ -5,7 +5,8 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview, ScriptLang } from '$lib/gen'
 	import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte'
-	import { Trash2, Bug, Terminal } from 'lucide-svelte'
+	import { Trash2, Bug, Terminal, Paintbrush } from 'lucide-svelte'
+	import { getModifierKey } from '$lib/utils'
 	import { inferArgs, inferAssets } from '$lib/infer'
 	import type { Schema } from '$lib/common'
 	import Editor from '$lib/components/Editor.svelte'
@@ -640,14 +641,16 @@
 				<DeleteAfterUsePopup bind:delete_after_secs />
 
 				<Button
-					variant="default"
+					title={`Format (${getModifierKey()}S)`}
+					aria-label="Format"
+					variant="subtle"
 					unifiedSize="sm"
 					on:click={async () => {
 						editor?.format()
 					}}
-				>
-					Format
-				</Button>
+					endIcon={{ icon: Paintbrush }}
+					iconOnly
+				/>
 			</div>
 		</div>