feat: Follow logs

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	export let buildId;
-	export let followingBuild;
 
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
@@ -16,11 +15,25 @@
 	let loading = true;
 	let currentStatus;
 	let streamInterval;
+	let followingBuild;
+	let followingInterval;
+	let logsEl;
 
 	const { id } = $page.params;
 
 	const cleanAnsiCodes = (str: string) => str.replace(/\x1B\[(\d+)m/g, '');
 
+	function followBuild() {
+		followingBuild = !followingBuild;
+		if (followingBuild) {
+			followingInterval = setInterval(() => {
+				logsEl.scrollTop = logsEl.scrollHeight;
+				window.scrollTo(0, document.body.scrollHeight);
+			}, 100);
+		} else {
+			window.clearInterval(followingInterval);
+		}
+	}
 	async function streamLogs(sequence = 0) {
 		try {
 			let { logs: responseLogs, status } = await get(
@@ -57,7 +70,8 @@
 		}
 	}
 	onDestroy(() => {
-		clearInterval(streamInterval);
+		window.clearInterval(streamInterval);
+		window.clearInterval(followingInterval);
 	});
 	onMount(async () => {
 		window.scrollTo(0, 0);
@@ -72,9 +86,33 @@
 		{#if currentStatus === 'running'}
 			<LoadingLogs />
 		{/if}
+		<div class="flex justify-end sticky top-0 p-2">
+			<button
+				on:click={followBuild}
+				data-tooltip="Follow logs"
+				class:text-green-500={followingBuild}
+			>
+				<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" />
+					<circle cx="12" cy="12" r="9" />
+					<line x1="8" y1="12" x2="12" y2="16" />
+					<line x1="12" y1="8" x2="12" y2="16" />
+					<line x1="16" y1="12" x2="12" y2="16" />
+				</svg>
+			</button>
+		</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]"
-			id="logs"
+			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"
+			bind:this={logsEl}
 		>
 			{#each logs as log}
 				<div>{log.line + '\n'}</div>