From 601d6ba8093b92a91b91c1cc970d5e0dc5968282 Mon Sep 17 00:00:00 2001
From: Caleb Owens <hello@calebowens.com>
Date: Fri, 3 May 2024 19:41:45 +0100
Subject: [PATCH] Grey out commit buttons when title isnt present

---
 app/src/lib/components/CommitCard.svelte         | 11 +++++++++--
 app/src/lib/components/CommitDialog.svelte       | 10 ++++++++--
 app/src/lib/components/CommitMessageInput.svelte |  2 ++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/src/lib/components/CommitCard.svelte b/app/src/lib/components/CommitCard.svelte
index 8a1fbd45a..715dba219 100644
--- a/app/src/lib/components/CommitCard.svelte
+++ b/app/src/lib/components/CommitCard.svelte
@@ -90,6 +90,7 @@
 	const hasCommitUrl = !commit.isLocal && commitUrl;
 
 	let commitMessageModal: Modal;
+	let commitMessageValid = false;
 	let description = '';
 
 	function openCommitMessageModal(e: Event) {
@@ -112,10 +113,16 @@
 </script>
 
 <Modal bind:this={commitMessageModal}>
-	<CommitMessageInput bind:commitMessage={description} />
+	<CommitMessageInput bind:commitMessage={description} bind:valid={commitMessageValid} />
 	<svelte:fragment slot="controls">
 		<Button style="ghost" kind="solid" on:click={() => commitMessageModal.close()}>Cancel</Button>
-		<Button style="pop" kind="solid" grow on:click={submitCommitMessageModal}>Submit</Button>
+		<Button
+			style="pop"
+			kind="solid"
+			grow
+			disabled={!commitMessageValid}
+			on:click={submitCommitMessageModal}>Submit</Button
+		>
 	</svelte:fragment>
 </Modal>
 
diff --git a/app/src/lib/components/CommitDialog.svelte b/app/src/lib/components/CommitDialog.svelte
index 50d31ab8c..4e7176c3b 100644
--- a/app/src/lib/components/CommitDialog.svelte
+++ b/app/src/lib/components/CommitDialog.svelte
@@ -22,6 +22,8 @@
 
 	let isCommitting = false;
 
+	let commitMessageValid = false;
+
 	async function commit() {
 		const message = $commitMessage;
 		isCommitting = true;
@@ -42,7 +44,11 @@
 <div class="commit-box" class:commit-box__expanded={$expanded}>
 	{#if $expanded}
 		<div class="commit-box__expander" transition:slide={{ duration: 150, easing: quintOut }}>
-			<CommitMessageInput bind:commitMessage={$commitMessage} {commit} />
+			<CommitMessageInput
+				bind:commitMessage={$commitMessage}
+				bind:valid={commitMessageValid}
+				{commit}
+			/>
 		</div>
 	{/if}
 	<div class="actions">
@@ -63,7 +69,7 @@
 			kind="solid"
 			grow
 			loading={isCommitting}
-			disabled={(isCommitting || !$commitMessage || $selectedOwnership.isEmpty()) && $expanded}
+			disabled={(isCommitting || !commitMessageValid || $selectedOwnership.isEmpty()) && $expanded}
 			id="commit-to-branch"
 			on:click={() => {
 				if ($expanded) {
diff --git a/app/src/lib/components/CommitMessageInput.svelte b/app/src/lib/components/CommitMessageInput.svelte
index 3b8e7db8c..1d3335882 100644
--- a/app/src/lib/components/CommitMessageInput.svelte
+++ b/app/src/lib/components/CommitMessageInput.svelte
@@ -25,6 +25,7 @@
 	import { fly } from 'svelte/transition';
 
 	export let commitMessage: string;
+	export let valid: boolean = false;
 	export let commit: (() => void) | undefined = undefined;
 
 	const user = getContextStore(User);
@@ -51,6 +52,7 @@
 
 	$: ({ title, description } = splitMessage(commitMessage));
 	$: if (commitMessage) updateHeights();
+	$: valid = !!title;
 
 	function concatMessage(title: string, description: string) {
 		return `${title}\n\n${description}`;