feat: Add Option+Command sync without opening file (#586)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

docs/diff.md

@@ -29,6 +29,15 @@ The `/diff` route renders raw git patch output with `@pierre/diffs` (see
 https://diffs.com) so we can use the same diff rendering primitives in the app
 and keep the UI behavior consistent with the diffs.com component model.
 
+## Sync shortcuts
+
+Hold <kbd>Option</kbd> to reveal the left/right sync arrows in each diffed file
+header.
+
+- Click an arrow to sync and open the destination file.
+- Click while holding <kbd>Option</kbd> + <kbd>Command</kbd> to sync without
+  opening the destination file.
+
 ## Cache
 
 Because the diffs are pretty expensive, we load them asynchronously (streamed to

packages/workshop-app/app/components/diff.tsx

@@ -203,15 +203,21 @@ function DiffFileActions({
 					syncTo={{ appFile: app2Path, appName: app2Name }}
 					className={arrowButtonClassName}
 				>
-					<Icon name="ArrowLeft" title="Copy app 2 file to app 1" />
+					<Icon
+						name="ArrowLeft"
+						title="Copy app 2 file to app 1 (Option+Command to sync without opening)"
+					/>
 				</LaunchEditor>
 				<LaunchEditor
 					appFile={app2Path}
 					appName={app2Name}
 					syncTo={{ appFile: app1Path, appName: app1Name }}
 					className={arrowButtonClassName}
 				>
-					<Icon name="ArrowRight" title="Copy app 1 file to app 2" />
+					<Icon
+						name="ArrowRight"
+						title="Copy app 1 file to app 2 (Option+Command to sync without opening)"
+					/>
 				</LaunchEditor>
 			</div>
 			<LaunchEditor

packages/workshop-app/app/routes/launch-editor.tsx

@@ -3,7 +3,7 @@ import path from 'path'
 import { getAppByName } from '@epic-web/workshop-utils/apps.server'
 import { launchEditor } from '@epic-web/workshop-utils/launch-editor.server'
 import fsExtra from 'fs-extra'
-import { useEffect } from 'react'
+import { type MouseEvent, useEffect } from 'react'
 import { Link, useFetcher } from 'react-router'
 import { z, type ZodTypeAny } from 'zod'
 import { showProgressBarField } from '#app/components/progress-bar.tsx'
@@ -38,6 +38,7 @@ const LaunchSchema = z.intersection(
 export async function action({ request }: Route.ActionArgs) {
 	ensureUndeployed()
 	const formData = await request.formData()
+	const skipOpenAfterSync = formData.get('skipOpenAfterSync') === 'true'
 	const appFileValues = formData
 		.getAll('appFile')
 		.filter((value): value is string => typeof value === 'string')
@@ -134,7 +135,8 @@ export async function action({ request }: Route.ActionArgs) {
 	}
 
 	const filesToOpen = await getFiles(form)
-	if ('syncTo' in form && form.syncTo) {
+	const hasSyncTarget = 'syncTo' in form && Boolean(form.syncTo)
+	if (hasSyncTarget && form.syncTo) {
 		const originFiles = await getFiles(form.syncTo)
 		for (let index = 0; index < originFiles.length; index++) {
 			const originFile = originFiles[index]
@@ -149,6 +151,9 @@ export async function action({ request }: Route.ActionArgs) {
 			await fsExtra.promises.copyFile(originFile.filepath, destFile.filepath)
 		}
 	}
+	if (hasSyncTarget && skipOpenAfterSync) {
+		return dataWithPE(request, formData, { status: 'success' } as const)
+	}
 	const results: Array<
 		{ status: 'success' } | { status: 'error'; message: string }
 	> = []
@@ -231,6 +236,15 @@ function LaunchEditorImpl({
 }: LaunchEditorProps) {
 	const fetcher = useLaunchFetcher(onUpdate)
 	const peRedirectInput = usePERedirectInput()
+	const handleSubmitButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
+		if (!syncTo || !event.altKey || !event.metaKey) return
+		event.preventDefault()
+		const form = event.currentTarget.form
+		if (!form) return
+		const formData = new FormData(form)
+		formData.set('skipOpenAfterSync', 'true')
+		void fetcher.submit(formData, { method: 'POST', action: '/launch-editor' })
+	}
 
 	if (!file && !appFile) {
 		console.error('LaunchEditor: requires either "file" or "appFile" prop.')
@@ -270,6 +284,7 @@ function LaunchEditorImpl({
 			) : null}
 			<button
 				type="submit"
+				onClick={handleSubmitButtonClick}
 				className={cn(
 					'launch_button',
 					fetcher.state === 'idle' ? null : 'cursor-progress',