ui: fixes

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

@@ -348,7 +348,6 @@ export function setDefaultBaseImage(buildPack: string | null, deploymentType: st
 	if (buildPack === 'heroku') {
 		payload.baseImage = 'heroku/buildpacks:20';
 		payload.baseImages = herokuVersions;
-
 	}
 	return payload;
 }

apps/ui/src/lib/templates.ts

@@ -195,6 +195,7 @@ export function findBuildPack(pack: string, packageManager = 'npm') {
 export const buildPacks = [
 	{
 		name: 'node',
+		type: 'base',
 		fancyName: 'Node.js',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -202,6 +203,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'static',
+		type: 'base',
 		fancyName: 'Static',
 		hoverColor: 'hover:bg-orange-700',
 		color: 'bg-orange-700',
@@ -210,6 +212,7 @@ export const buildPacks = [
 
 	{
 		name: 'php',
+		type: 'base',
 		fancyName: 'PHP',
 		hoverColor: 'hover:bg-indigo-700',
 		color: 'bg-indigo-700',
@@ -217,6 +220,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'laravel',
+		type: 'specific',
+		base: 'php',
 		fancyName: 'Laravel',
 		hoverColor: 'hover:bg-indigo-700',
 		color: 'bg-indigo-700',
@@ -224,6 +229,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'docker',
+		type: 'base',
 		fancyName: 'Docker',
 		hoverColor: 'hover:bg-sky-700',
 		color: 'bg-sky-700',
@@ -231,6 +237,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'svelte',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Svelte',
 		hoverColor: 'hover:bg-orange-700',
 		color: 'bg-orange-700',
@@ -238,6 +246,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'vuejs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'VueJS',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -245,6 +255,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'nuxtjs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'NuxtJS',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -252,6 +264,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'gatsby',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Gatsby',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -259,6 +273,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'astro',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Astro',
 		hoverColor: 'hover:bg-pink-700',
 		color: 'bg-pink-700',
@@ -266,14 +282,17 @@ export const buildPacks = [
 	},
 	{
 		name: 'eleventy',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Eleventy',
 		hoverColor: 'hover:bg-red-700',
 		color: 'bg-red-700',
 		isCoolifyBuildPack: true,
 	},
-
 	{
 		name: 'react',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'React',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -281,6 +300,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'preact',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'Preact',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -288,6 +309,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'nextjs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'NextJS',
 		hoverColor: 'hover:bg-blue-700',
 		color: 'bg-blue-700',
@@ -295,6 +318,8 @@ export const buildPacks = [
 	},
 	{
 		name: 'nestjs',
+		type: 'specific',
+		base: 'node',
 		fancyName: 'NestJS',
 		hoverColor: 'hover:bg-red-700',
 		color: 'bg-red-700',
@@ -302,6 +327,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'rust',
+		type: 'base',
 		fancyName: 'Rust',
 		hoverColor: 'hover:bg-pink-700',
 		color: 'bg-pink-700',
@@ -309,6 +335,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'python',
+		type: 'base',
 		fancyName: 'Python',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -316,6 +343,7 @@ export const buildPacks = [
 	},
 	{
 		name: 'deno',
+		type: 'base',
 		fancyName: 'Deno',
 		hoverColor: 'hover:bg-green-700',
 		color: 'bg-green-700',
@@ -323,6 +351,7 @@ export const buildPacks = [
 	},
     {
         name: 'heroku',
+		type: 'base',
 		fancyName: 'Heroku',
 		hoverColor: 'hover:bg-purple-700',
 		color: 'bg-purple-700',

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

@@ -218,9 +218,10 @@
 	</li>
 	<li
 		class="rounded"
+		class:text-stone-600={!$status.application.isRunning}
 		class:bg-coollabs={$page.url.pathname === `/applications/${$page.params.id}/usage`}
 	>
-		<a href={`/applications/${$page.params.id}/usage`} class="no-underline w-full"
+		<a href={$status.application.isRunning ? `/applications/${$page.params.id}/usage` : ''} class="no-underline w-full"
 			><svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="w-6 h-6"

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

@@ -175,9 +175,11 @@
 	<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4">
 		<div class="title lg:pb-10">
 			{#if $page.url.pathname === `/applications/${id}/configuration/source`}
-				Select a Git Source
+				Select a Source
 			{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
 				Select a Destination
+				{:else if $page.url.pathname === `/applications/${id}/configuration/repository`}
+				Select a Repository
 			{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
 				Select a Build Pack
 			{:else}
@@ -319,14 +321,15 @@
 			</button>
 			<Tooltip triggeredBy="#forceredeploy">Force Redeploy (without cache)</Tooltip>
 		{:else}
+		{#if $isDeploymentEnabled}
 			<button
-				class="icons bg-applications hover:bg-green-500 flex items-center font-bold"
+				class="icons flex items-center font-bold"
 				disabled={!$isDeploymentEnabled}
 				on:click={() => handleDeploySubmit(false)}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6 mr-2"
+					class="w-6 h-6 mr-2 text-green-500"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
@@ -337,8 +340,9 @@
 					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 					<path d="M7 4v16l13 -8z" />
 				</svg>
-				Build & Deploy
+				Deploy
 			</button>
+			{/if}
 		{/if}
 
 		{#if $location && $status.application.isRunning}
@@ -363,10 +367,15 @@
 		{/if}
 	</div>
 </div>
-<div class="mx-auto max-w-screen-2xl px-0 lg:px-2 grid grid-cols-1 lg:grid-cols-4">
+<div
-	<nav class="header flex flex-col lg:pt-0 ">
+	class="mx-auto max-w-screen-2xl px-0 lg:px-2 grid grid-cols-1"
-		<Menu {application} />
+	class:lg:grid-cols-4={!$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
-	</nav>
+>
+	{#if !$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
+		<nav class="header flex flex-col lg:pt-0 ">
+			<Menu {application} />
+		</nav>
+	{/if}
 	<div class="pt-0 col-span-0 lg:col-span-3 pb-24">
 		<slot />
 	</div>

apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte

@@ -40,9 +40,13 @@
 <form on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
 	<button
 		type="submit"
-		class="box-selection relative flex text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
+		class="box-selection relative flex flex-col items-center text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
 			buildPack.name && buildPack.color}"
-		><span>{buildPack.fancyName}</span>
+	>
+		<div>{buildPack.fancyName}</div>
+		{#if buildPack.base}
+			<div class="text-xs font-mono">{buildPack.base}</div>
+		{/if}
 		{#if !scanning && foundConfig?.name === buildPack.name}
 			<span class="absolute bottom-0 pb-2 text-xs"
 				>{$t('application.configuration.buildpack.choose_this_one')}</span

apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte

@@ -143,7 +143,6 @@
 		}
 	}
 </script>
-
 {#if repositories.length === 0 && loading.repositories === false}
 	<div class="flex-col text-center">
 		<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
@@ -152,10 +151,9 @@
 		>
 	</div>
 {:else}
-	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
+	<form on:submit|preventDefault={handleSubmit} class="px-10">
-		<div class="flex-col space-y-3 md:space-y-0 space-x-1">
+		<div class="flex lg:flex-row flex-col lg:space-y-0 space-y-2 space-x-0 lg:space-x-2 items-center">
-			<div class="flex-row md:flex gap-4">
+				<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Repository</label>
-				<div class="custom-select-wrapper">
 					<Select
 						placeholder={loading.repositories
 							? $t('application.configuration.loading_repositories')
@@ -170,7 +168,7 @@
 					/>
 				</div>
 				<input class="hidden" bind:value={selected.projectId} name="projectId" />
-				<div class="custom-select-wrapper">
+				<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Branch</label>
 					<Select
 						placeholder={loading.branches
 							? $t('application.configuration.loading_branches')
@@ -185,9 +183,7 @@
 						isDisabled={loading.branches || !selected.repository}
 						isClearable={false}
 					/>
-				</div>
+				</div></div>
-			</div>
-		</div>
 		<div class="pt-5 flex-col flex justify-center items-center space-y-4">
 			<button
 				class="btn btn-wide"

apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte

@@ -21,6 +21,7 @@
 	};
 	async function loadBranches() {
 		try {
+			if (!publicRepositoryLink) return
 			loading.branches = true;
 			publicRepositoryLink = publicRepositoryLink.trim();
 			const protocol = publicRepositoryLink.split(':')[0];
@@ -156,40 +157,36 @@
 	}
 </script>
 
-<div class="mx-auto max-w-6xl">
+<div class="mx-auto max-w-screen-2xl">
-	<form
+	<form class="flex flex-col" on:submit|preventDefault={loadBranches}>
-		class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 justify-start"
+		<div class="flex flex-col space-y-2 w-full">
-		on:submit|preventDefault={loadBranches}
+			<div class="flex flex-row space-x-2"><input
-	>
-		<div class="space-y-2 w-full">
-			<input
 				class="w-full"
 				placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
 				bind:value={publicRepositoryLink}
 			/>
-			{#if branchSelectOptions.length > 0}
+				<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
-				<div class="custom-select-wrapper">
+					Load Repository
-					<Select
+				</button>
-					class="w-full"
+			</div>
-						placeholder={loading.branches
-							? $t('application.configuration.loading_branches')
-							: !publicRepositoryLink
-							? $t('application.configuration.select_a_repository_first')
-							: $t('application.configuration.select_a_branch')}
-						isWaiting={loading.branches}
-						showIndicator={!!publicRepositoryLink && !loading.branches}
-						id="branches"
-						on:select={saveRepository}
-						items={branchSelectOptions}
-						isDisabled={loading.branches || !!!publicRepositoryLink}
-						isClearable={false}
-					/>
-				</div>
-			{/if}
-		</div>
 			
-		<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
+			<div class="custom-select-wrapper">
-			Load Repository
+				<Select
-		</button>
+					class="w-full"
+					placeholder={loading.branches
+						? $t('application.configuration.loading_branches')
+						: branchSelectOptions.length ===0
+						? 'Please type a repository link first.'
+						: $t('application.configuration.select_a_branch')}
+					isWaiting={loading.branches}
+					showIndicator={!!publicRepositoryLink && !loading.branches}
+					id="branches"
+					on:select={saveRepository}
+					items={branchSelectOptions}
+					isDisabled={loading.branches || !ownerName}
+					isClearable={false}
+				/>
+			</div>
+		</div>
 	</form>
 </div>

apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte

@@ -261,7 +261,7 @@
 		</div>
 	</div>
 {:else}
-	<div class="max-w-6xl mx-auto  px-5">
+	<div class="max-w-screen-2xl mx-auto px-10">
 		<div class="title pb-2">Other</div>
 		<div class="flex flex-wrap justify-center">
 			{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
@@ -271,10 +271,20 @@
 			{/each}
 		</div>
 	</div>
-	<div class="max-w-6xl mx-auto px-5">
+	<div class="max-w-screen-2xl mx-auto px-10">
-		<div class="title pb-2">Coolify Custom</div>
+		<div class="title pb-2">Coolify Base</div>
 		<div class="flex flex-wrap justify-center">
-			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
+			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true && bp.type ==='base') as buildPack}
+				<div class="p-2">
+					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
+				</div>
+			{/each}
+		</div>
+	</div>
+	<div class="max-w-screen-2xl mx-auto px-10">
+		<div class="title pb-2">Coolify Specific</div>
+		<div class="flex flex-wrap justify-center">
+			{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true && bp.type ==='specific') as buildPack}
 				<div class="p-2">
 					<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
 				</div>

apps/ui/src/routes/applications/[id]/configuration/repository.svelte

@@ -36,16 +36,8 @@
 	import GitlabRepositories from './_GitlabRepositories.svelte';
 </script>
 
-<div class="flex space-x-1 p-6 font-bold">
+{#if application.gitSource.type === 'github'}
-	<div class="mr-4 text-2xl tracking-tight">
+	<GithubRepositories {application} />
-		{$t('application.configuration.select_a_repository_project')}
+{:else if application.gitSource.type === 'gitlab'}
-	</div>
+	<GitlabRepositories {application} {appId} {settings} />
-</div>
+{/if}
-<div class="flex flex-wrap justify-center">
-	{#if application.gitSource.type === 'github'}
-		<GithubRepositories {application} />
-	{:else if application.gitSource.type === 'gitlab'}
-		<GitlabRepositories {application} {appId} {settings} />
-	{/if}
-</div>
-

apps/ui/src/routes/applications/[id]/configuration/source.svelte

@@ -68,7 +68,7 @@
 	}
 </script>
 
-<div class="max-w-6xl mx-auto px-5">
+<div class="max-w-screen-2xl mx-auto px-9">
 	<div class="title pb-8">Git App</div>
 	<div class="flex flex-wrap justify-center">
 		{#if !filteredSources || ownSources.length === 0}
@@ -98,7 +98,7 @@
 				</div>
 			</div>
 		{:else}
-			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row ">
+			<div class="flex flex-col justify-center">
 				{#each ownSources as source}
 					<div class="p-2 relative">
 						<div class="absolute -m-4">

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

@@ -21,12 +21,11 @@
 <script lang="ts">
 	export let application: any;
 	import { page } from '$app/stores';
-	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { del, get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { appSession, status } from '$lib/store';
-	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
+	import { errorNotification } from '$lib/common';
-	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { goto } from '$app/navigation';
 	const { id } = $page.params;
 
 	let forceDelete = false;
@@ -36,7 +35,7 @@
 			$status.application.initialLoading = true;
 			try {
 				await del(`/applications/${id}`, { id, force });
-				return await window.location.assign(`/`);
+				return await goto('/')
 			} catch (error) {
 				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
 					forceDelete = true;

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

@@ -56,7 +56,7 @@
 		!$appSession.isAdmin || $status.application.isRunning || $status.application.initialLoading;
 
 	let loading = false;
-
+	let fqdnEl: any = null;
 	let forceSave = false;
 	let debug = application.settings.debug;
 	let previews = application.settings.previews;
@@ -96,6 +96,7 @@
 			await handleSubmit();
 		}
 		await getBaseBuildImages();
+		if (!application.fqdn && fqdnEl) fqdnEl.focus()
 	});
 	async function getBaseBuildImages() {
 		const data = await post(`/applications/images`, {
@@ -383,6 +384,90 @@
 						disabled={$status.application.isRunning}
 					/>
 				</div>
+				{#if !isBot}
+					<div class="grid grid-cols-2 items-center">
+						<label for="fqdn"
+							>{$t('application.url_fqdn')}
+							<Explainer
+								explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
+							/>
+						</label>
+						<div>
+							<input
+								bind:this={fqdnEl}
+								class="w-full"
+								required={!application.settings.isBot}
+								readonly={isDisabled}
+								disabled={isDisabled}
+								name="fqdn"
+								id="fqdn"
+								class:border={!application.settings.isBot&& !application.fqdn}
+								class:border-red-500={!application.settings.isBot && !application.fqdn}
+								bind:value={application.fqdn}
+								pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
+								placeholder="eg: https://coollabs.io"
+							/>
+							{#if forceSave}
+								<div class="flex-col space-y-2 pt-4 text-center">
+									{#if isNonWWWDomainOK}
+										<button
+											class="btn btn-sm bg-green-600 hover:bg-green-500"
+											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+											>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
+										>
+									{:else}
+										<button
+											class="btn btn-sm bg-red-600 hover:bg-red-500"
+											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
+											>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
+										>
+									{/if}
+									{#if dualCerts}
+										{#if isWWWDomainOK}
+											<button
+												class="btn btn-sm bg-green-600 hover:bg-green-500"
+												on:click|preventDefault={() =>
+													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+												>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
+											>
+										{:else}
+											<button
+												class="btn btn-sm bg-red-600 hover:bg-red-500"
+												on:click|preventDefault={() =>
+													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
+												>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
+											>
+										{/if}
+									{/if}
+								</div>
+							{/if}
+						</div>
+					</div>
+					<div class="grid grid-cols-2 items-center pb-4">
+						<Setting
+							id="dualCerts"
+							dataTooltip={$t('forms.must_be_stopped_to_modify')}
+							disabled={$status.application.isRunning}
+							isCenter={false}
+							bind:setting={dualCerts}
+							title={$t('application.ssl_www_and_non_www')}
+							description="Generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+							on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
+						/>
+					</div>
+					{#if isHttps}
+						<div class="grid grid-cols-2 items-center pb-4">
+							<Setting
+								id="isCustomSSL"
+								isCenter={false}
+								bind:setting={isCustomSSL}
+								title="Use Custom SSL Certificate"
+								description="Use Custom SSL Certificated added in the Settings/SSL Certificates section. <br><br>By default, the SSL certificate is generated automatically through Let's Encrypt"
+								on:click={() => changeSettings('isCustomSSL')}
+							/>
+						</div>
+					{/if}
+				{/if}
 			</div>
 
 			<div class="title font-bold pb-3 pt-10 border-b border-coolgray-500 mb-6">Build & Deploy</div>
@@ -494,87 +579,7 @@
 					{/if}
 				{/if}
 
-				{#if !isBot}
+				
-					<div class="grid grid-cols-2 items-center pt-8">
-						<label for="fqdn"
-							>{$t('application.url_fqdn')}
-							<Explainer
-								explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
-							/>
-						</label>
-						<div>
-							<input
-								class="w-full"
-								required={!application.settings.isBot}
-								readonly={isDisabled}
-								disabled={isDisabled}
-								name="fqdn"
-								id="fqdn"
-								bind:value={application.fqdn}
-								pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
-								placeholder="eg: https://coollabs.io"
-							/>
-							{#if forceSave}
-								<div class="flex-col space-y-2 pt-4 text-center">
-									{#if isNonWWWDomainOK}
-										<button
-											class="btn btn-sm bg-green-600 hover:bg-green-500"
-											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-											>DNS settings for {nonWWWDomain} is OK, click to recheck.</button
-										>
-									{:else}
-										<button
-											class="btn btn-sm bg-red-600 hover:bg-red-500"
-											on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
-											>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
-										>
-									{/if}
-									{#if dualCerts}
-										{#if isWWWDomainOK}
-											<button
-												class="btn btn-sm bg-green-600 hover:bg-green-500"
-												on:click|preventDefault={() =>
-													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-												>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
-											>
-										{:else}
-											<button
-												class="btn btn-sm bg-red-600 hover:bg-red-500"
-												on:click|preventDefault={() =>
-													isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
-												>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button
-											>
-										{/if}
-									{/if}
-								</div>
-							{/if}
-						</div>
-					</div>
-					<div class="grid grid-cols-2 items-center pb-4">
-						<Setting
-							id="dualCerts"
-							dataTooltip={$t('forms.must_be_stopped_to_modify')}
-							disabled={$status.application.isRunning}
-							isCenter={false}
-							bind:setting={dualCerts}
-							title={$t('application.ssl_www_and_non_www')}
-							description="Generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
-							on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
-						/>
-					</div>
-					{#if isHttps}
-						<div class="grid grid-cols-2 items-center pb-4">
-							<Setting
-								id="isCustomSSL"
-								isCenter={false}
-								bind:setting={isCustomSSL}
-								title="Use Custom SSL Certificate"
-								description="Use Custom SSL Certificated added in the Settings/SSL Certificates section. <br><br>By default, the SSL certificate is generated automatically through Let's Encrypt"
-								on:click={() => changeSettings('isCustomSSL')}
-							/>
-						</div>
-					{/if}
-				{/if}
 				{#if application.buildPack === 'python'}
 					<div class="grid grid-cols-2 items-center">
 						<label for="pythonModule">WSGI / ASGI</label>

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

@@ -121,22 +121,24 @@
 				<svelte:component this={BuildLog} />
 			{/key}
 		{: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 ">
 		<div class="top-4 md:sticky">
-			{#if !noMoreBuilds}
-				{#if buildCount > 5}
 					<div class="flex space-x-2 pb-2">
 						<button
 							disabled={noMoreBuilds}
-							class=" btn btn-sm w-full btn-primary"
+							class:btn-primary={!noMoreBuilds}
+							class=" btn btn-sm w-full"
 							on:click={loadMoreBuilds}>{$t('application.build.load_more')}</button
 						>
 					</div>
-				{/if}
-			{/if}
 			{#each builds as build, index (build.id)}
 				<div
 					id={`building-${build.id}`}
@@ -186,6 +188,3 @@
 		</div>
 	</div>
 </div>
-{#if buildCount === 0}
-	<div class="text-center text-xl font-bold">{$t('application.build.no_logs')}</div>
-{/if}