fix: move debug log settings to build logs

apps/api/src/lib/buildPacks/common.ts

@@ -589,7 +589,7 @@ export async function buildImage({
 	}
 	if (!debug) {
 		await saveBuildLog({
-			line: `Debug turned off. To see more details, allow it in the features tab.`,
+			line: `Debug logging is disabled. Enable it above if necessary!`,
 			buildId,
 			applicationId
 		});

apps/ui/src/routes/applications/[id]/features.svelte

@@ -44,7 +44,6 @@
 
 	const { id } = $page.params;
 
-	let debug = application.settings.debug;
 	let previews = application.settings.previews;
 	let dualCerts = application.settings.dualCerts;
 	let autodeploy = application.settings.autodeploy;
@@ -52,9 +51,6 @@
 	let isDBBranching = application.settings.isDBBranching;
 
 	async function changeSettings(name: any) {
-		if (name === 'debug') {
-			debug = !debug;
-		}
 		if (name === 'previews') {
 			previews = !previews;
 		}
@@ -77,7 +73,6 @@
 		try {
 			await post(`/applications/${id}/settings`, {
 				previews,
-				debug,
 				dualCerts,
 				isBot,
 				autodeploy,
@@ -90,9 +85,6 @@
 				type: 'success'
 			});
 		} catch (error) {
-			if (name === 'debug') {
-				debug = !debug;
-			}
 			if (name === 'previews') {
 				previews = !previews;
 			}
@@ -132,8 +124,7 @@
 						description={$t('application.enable_auto_deploy_webhooks')}
 					/>
 				</div>
-			{/if}
-			{#if !application.settings.isBot && !application.settings.isPublicRepository}
+				{#if !application.settings.isBot}
 				<div class="grid grid-cols-2 items-center">
 					<Setting
 						id="previews"
@@ -145,16 +136,9 @@
 					/>
 				</div>
 				{/if}
-			<div class="grid grid-cols-2 items-center w-full">
-				<Setting
-					id="debug"
-					isCenter={false}
-					bind:setting={debug}
-					on:click={() => changeSettings('debug')}
-					title={$t('application.debug_logs')}
-					description={$t('application.enable_debug_log_during_build')}
-				/>
-			</div>
+				{:else} 
+				No features available for this application
+			{/if}
 		</div>
 	</div>
 </div>

apps/ui/src/routes/applications/[id]/logs/build.svelte

@@ -32,7 +32,7 @@
 	import { day } from '$lib/dayjs';
 	import { onDestroy, onMount } from 'svelte';
 	const { id } = $page.params;
-
+	let debug = application.settings.debug;
 	let loadBuildLogsInterval: any = null;
 
 	let skip = 0;
@@ -104,29 +104,60 @@
 			return 'text-white';
 		}
 	}
+	async function changeSettings(name: any) {
+		if (name === 'debug') {
+			debug = !debug;
+		}
+		try {
+			await post(`/applications/${id}/settings`, {
+				debug,
+				branch: application.branch,
+				projectId: application.projectId
+			});
+			return addToast({
+				message: $t('application.settings_saved'),
+				type: 'success'
+			});
+		} catch (error) {
+			if (name === 'debug') {
+				debug = !debug;
+			}
+
+			return errorNotification(error);
+		}
+	}
 </script>
 
-<div class="mx-auto w-full">
-	<div class="flex flex-row border-b border-coolgray-500 mb-6 space-x-2">
+<div class="mx-auto w-full lg:px-0 px-1">
+	<div class="flex lg:flex-row flex-col border-b border-coolgray-500 mb-6 space-x-2">
 		<div class="flex flex-row">
 			<div class="title font-bold pb-3 pr-3">Build Logs</div>
 			<button class="btn btn-sm bg-error" on:click={resetQueue}>Reset Build Queue</button>
 		</div>
+		<div class=" flex-1" />
+		<div class="form-control">
+			<label class="label cursor-pointer">
+				<span class="label-text text-white pr-4 font-bold">Enable Debug Logs</span>
+				<input
+					type="checkbox"
+					checked={debug}
+					class="checkbox checkbox-success"
+					on:click={() => changeSettings('debug')}
+				/>
+			</label>
+		</div>
 	</div>
 </div>
-<div class="block flex-col justify-start space-x-5 flex flex-col-reverse lg:flex-row">
+<div class="justify-start space-x-5 flex flex-col-reverse lg:flex-row">
 	<div class="flex-1 md:w-96">
 		{#if $selectedBuildId}
 			{#key $selectedBuildId}
 				<svelte:component this={BuildLog} />
 			{/key}
-		{:else}
-		{#if buildCount === 0}
+		{:else if buildCount === 0}
 			Not build logs found.
 		{:else}
 			Select a build to see the logs.
-
-			{/if}
 		{/if}
 	</div>
 	<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
@@ -140,6 +171,7 @@
 				>
 			</div>
 			{#each builds as build, index (build.id)}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
 					id={`building-${build.id}`}
 					on:click={() => loadBuild(build.id)}