fix(frontend): Fix mac shortcuts (#1381)

* fix(frontend): fix app init issue

* fix(frontend): Fix mac shortcuts

* Update NonRunnableComponent.svelte

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

frontend/src/lib/components/EditorBar.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 	import { ResourceService, VariableService } from '$lib/gen'
-	import { getScriptByPath, sendUserToast } from '$lib/utils'
+	import { getModifierKey, getScriptByPath, sendUserToast } from '$lib/utils'
 
 	import {
 		faBroom,
@@ -365,10 +365,12 @@
 					{iconOnly}
 					startIcon={{ icon: faBroom }}
 				>
-					Format (Ctrl+S)
+					Format ({getModifierKey()}+S)
 				</Button>
 				<svelte:fragment slot="text">
-					Format <Kbd class="!text-gray-800">Ctrl</Kbd> + <Kbd class="!text-gray-800">S</Kbd>
+					Format <Kbd class="!text-gray-800">{getModifierKey()}</Kbd> + <Kbd class="!text-gray-800">
+						S
+					</Kbd>
 				</svelte:fragment>
 			</Popover>
 		</div>

frontend/src/lib/components/FlowBuilder.svelte

@@ -217,20 +217,20 @@
 
 		switch (event.key) {
 			case 'Z':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					$flowStore = redo(history)
 					event.preventDefault()
 				}
 				break
 			case 'z':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					$flowStore = undo(history, $flowStore)
 					$selectedIdStore = 'Input'
 					event.preventDefault()
 				}
 				break
 			case 's':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					saveFlow(false)
 					event.preventDefault()
 				}

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -13,6 +13,7 @@
 	import FlowProgressBar from './flows/FlowProgressBar.svelte'
 	import CapturePayload from './flows/content/CapturePayload.svelte'
 	import { Loader2 } from 'lucide-svelte'
+	import { getModifierKey } from '$lib/utils'
 
 	let capturePayload: CapturePayload
 	export let previewMode: 'upTo' | 'whole'
@@ -75,7 +76,7 @@
 		if (open) {
 			switch (event.key) {
 				case 'Enter':
-					if (event.ctrlKey) {
+					if (event.ctrlKey || event.metaKey) {
 						event.preventDefault()
 						runPreview($previewArgs)
 					}
@@ -134,7 +135,7 @@
 				btnClasses="w-full max-w-lg"
 				on:click={() => runPreview($previewArgs)}
 			>
-				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
+				Test flow <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd>
 			</Button>
 		{/if}
 		<Button

frontend/src/lib/components/ModulePreview.svelte

@@ -2,7 +2,7 @@
 	import type { Schema } from '$lib/common'
 	import { ScriptService, type FlowModule, type InputTransform, type Job } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { getScriptByPath } from '$lib/utils'
+	import { getModifierKey, getScriptByPath } from '$lib/utils'
 	import { Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -86,7 +86,7 @@
 			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
 			runAction={(_, args) => runTest(args)}
 			schedulable={false}
-			buttonText="Test (Ctrl+Enter)"
+			buttonText={`Test (${getModifierKey()}+Enter)`}
 			detailed={false}
 			topButton
 			bind:args={stepArgs}

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

@@ -257,20 +257,20 @@
 
 		switch (event.key) {
 			case 'Z':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					$app = redo(history)
 					event.preventDefault()
 				}
 				break
 			case 'z':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					$app = undo(history, $app)
 
 					event.preventDefault()
 				}
 				break
 			case 's':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					save()
 					event.preventDefault()
 				}

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

@@ -9,7 +9,7 @@
 	import type { Schema } from '$lib/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Editor from '$lib/components/Editor.svelte'
-	import { emptySchema, isMac, scriptLangToEditorLang } from '$lib/utils'
+	import { emptySchema, getModifierKey, scriptLangToEditorLang } from '$lib/utils'
 	import Popover from '../../../Popover.svelte'
 	import { computeFields } from './utils'
 	import { deepEqual } from 'fast-equals'
@@ -176,7 +176,7 @@
 						Format
 
 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{getModifierKey()}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -198,7 +198,7 @@
 							Run
 
 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{getModifierKey()}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />

frontend/src/lib/script_helpers.ts

@@ -12,7 +12,7 @@ export {
 	PYTHON_FAILURE_MODULE_CODE
 }
 
-export const DENO_INIT_CODE = `// Ctrl+. to cache dependencies on imports hover, Ctrl+S to format.
+export const DENO_INIT_CODE = `// Ctrl/CMD+. to cache dependencies on imports hover, Ctrl/CMD+S to format.
 
 // import { toWords } from "npm:number-to-words@1"
 // import * as wmill from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts"

frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte

@@ -5,6 +5,7 @@
 		defaultIfEmptyString,
 		displayDaysAgo,
 		emptyString,
+		getModifierKey,
 		sendUserToast
 	} from '$lib/utils'
 	import { FlowService, type Flow, JobService } from '$lib/gen'
@@ -64,7 +65,7 @@
 	function onKeyDown(event: KeyboardEvent) {
 		switch (event.key) {
 			case 'Enter':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					if (isValid) {
 						event.preventDefault()
 						runForm?.run()
@@ -113,7 +114,8 @@
 								<Button
 									startIcon={{ icon: faPlay }}
 									disabled={runForm == undefined || !isValid}
-									on:click={() => runForm?.run()}>Run <Kbd class="ml-2">Ctrl+Enter</Kbd></Button
+									on:click={() => runForm?.run()}
+									>Run <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd></Button
 								>
 							</div>
 						</div>

frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte

@@ -14,6 +14,7 @@
 		displayDaysAgo,
 		emptySchema,
 		emptyString,
+		getModifierKey,
 		sendUserToast,
 		truncateHash
 	} from '$lib/utils'
@@ -83,7 +84,7 @@
 	function onKeyDown(event: KeyboardEvent) {
 		switch (event.key) {
 			case 'Enter':
-				if (event.ctrlKey) {
+				if (event.ctrlKey || event.metaKey) {
 					if (isValid) {
 						event.preventDefault()
 						runForm?.run()
@@ -137,8 +138,10 @@
 								<Button
 									startIcon={{ icon: faPlay }}
 									disabled={runForm == undefined || !isValid}
-									on:click={() => runForm?.run()}>Run <Kbd class="ml-2">Ctrl+Enter</Kbd></Button
+									on:click={() => runForm?.run()}
 								>
+									Run <Kbd class="ml-2">{getModifierKey()}+Enter</Kbd>
+								</Button>
 							</div>
 						</div>
 						<div class="flex flex-col grow">