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>

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>

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>