feat: Cancel builds!

src/routes/applications/[id]/logs/build/_BuildLog.svelte

@@ -8,7 +8,7 @@
 
 	import Loading from '$lib/components/Loading.svelte';
 	import LoadingLogs from '../_Loading.svelte';
-	import { get } from '$lib/api';
+	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
 	import { t } from '$lib/translations';
 
@@ -67,6 +67,12 @@
 			return errorNotification(error);
 		}
 	}
+	async function cancelBuild() {
+		return await post(`/applications/${id}/cancel.json`, {
+			buildId,
+			applicationId: id
+		});
+	}
 	onDestroy(() => {
 		clearInterval(streamInterval);
 		clearInterval(followingInterval);
@@ -111,7 +117,26 @@
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</button>
+				{#if currentStatus === 'running'}
+					<button on:click={cancelBuild} class="bg-transparent" data-tooltip="Cancel build">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="w-6 h-6"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<line x1="18" y1="6" x2="6" y2="18" />
+							<line x1="6" y1="6" x2="18" y2="18" />
+						</svg>
+					</button>
+				{/if}
 			</div>
+
 			<div
 				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
 				bind:this={logsEl}