Commit Input: Close on 'Escape'

Pressing 'Escape' will close the commit input file

apps/desktop/src/lib/commit/CommitCard.svelte

@@ -155,11 +155,14 @@
 </script>
 
 <Modal bind:this={commitMessageModal} width="small" onSubmit={submitCommitMessageModal}>
-	<CommitMessageInput
-		bind:commitMessage={description}
-		bind:valid={commitMessageValid}
-		isExpanded={true}
-	/>
+	{#snippet children(_, close)}
+		<CommitMessageInput
+			bind:commitMessage={description}
+			bind:valid={commitMessageValid}
+			isExpanded={true}
+			cancel={close}
+		/>
+	{/snippet}
 	{#snippet controls(close)}
 		<Button style="ghost" outline onclick={close}>Cancel</Button>
 		<Button style="neutral" type="submit" kind="solid" grow disabled={!commitMessageValid}>
@@ -240,7 +243,7 @@
 					const mouseY = e.clientY;
 
 					const isTop = mouseY < targetTop + targetHeight / 2;
-					
+
 					dragDirection = isTop ? 'up' : 'down';
 				}}
 				use:draggableCommit={commit instanceof DetailedCommit &&

apps/desktop/src/lib/commit/CommitDialog.svelte

@@ -40,6 +40,10 @@
 			isCommitting = false;
 		}
 	}
+
+	function close() {
+		$expanded = false;
+	}
 </script>
 
 <div
@@ -65,6 +69,7 @@
 		bind:commitMessage={$commitMessage}
 		bind:valid={commitMessageValid}
 		isExpanded={$expanded}
+		cancel={close}
 		{commit}
 	/>
 	<div class="actions" class:commit-box__actions-expanded={$expanded}>
@@ -74,9 +79,7 @@
 					style="ghost"
 					outline
 					id="commit-to-branch"
-					onclick={() => {
-						$expanded = false;
-					}}
+					onclick={close}
 				>
 					Cancel
 				</Button>

apps/desktop/src/lib/commit/CommitMessageInput.svelte

@@ -31,6 +31,7 @@
 	export let commitMessage: string;
 	export let valid: boolean = false;
 	export let commit: (() => void) | undefined = undefined;
+	export let cancel: () => void;
 
 	const user = getContextStore(User);
 	const selectedOwnership = getContextStore(Ownership);
@@ -125,6 +126,12 @@
 	function handleDescriptionKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
 		const value = e.currentTarget.value;
 
+		if (e.key === KeyName.Escape) {
+			e.preventDefault();
+			cancel();
+			return;
+		}
+
 		if (e.key === KeyName.Delete && value.length === 0) {
 			e.preventDefault();
 			if (titleTextArea) {
@@ -144,6 +151,12 @@
 	}
 
 	function handleSummaryKeyDown(e: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
+		if (e.key === KeyName.Escape) {
+			e.preventDefault();
+			cancel();
+			return;
+		}
+
 		if (commit && (e.ctrlKey || e.metaKey) && e.key === KeyName.Enter) commit();
 		if (e.key === KeyName.Enter) {
 			e.preventDefault();

packages/ui/src/lib/Modal.svelte

@@ -10,7 +10,7 @@
 		icon?: keyof typeof iconsJson;
 		onClose?: () => void;
 		onSubmit?: (close: () => void) => void;
-		children: Snippet<[item?: any]>;
+		children: Snippet<[item: any, close: () => void]>;
 		controls?: Snippet<[close: () => void, item: any]>;
 	}
 
@@ -64,7 +64,7 @@
 			{/if}
 
 			<div class="modal__body custom-scrollbar text-13 text-body">
-				{@render children(item)}
+				{@render children(item, close)}
 			</div>
 
 			{#if controls}