From df1fe5739b9672964be7258ecbd236a2df1984c4 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 25 Sep 2025 17:31:26 +0200
Subject: [PATCH] feat(github): enhance Docker Compose input fields for better
 user experience

---
 ...ub-private-repository-deploy-key.blade.php | 20 ++++++++++++------
 .../new/github-private-repository.blade.php   | 21 ++++++++++++-------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php b/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
index d61891869..8190c89db 100644
--- a/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository-deploy-key.blade.php
@@ -61,13 +61,21 @@ class="loading loading-xs dark:text-warning loading-spinner"></span>
                     @endif
                 </div>
                 @if ($build_pack === 'dockercompose')
-                    <x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
+                    <div x-data="{ baseDir: '{{ $base_directory }}', composeLocation: '{{ $docker_compose_location }}' }" class="gap-2 flex flex-col">
+                        <x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
+                            helper="Directory to use as root. Useful for monorepos." x-model="baseDir" />
+                        <x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location"
+                            label="Docker Compose Location" helper="It is calculated together with the Base Directory."
+                            x-model="composeLocation" />
+                        <div class="pt-2">
+                            <span>
+                                Compose file location in your repository: </span><span class='dark:text-warning'
+                                x-text='(baseDir === "/" ? "" : baseDir) + (composeLocation.startsWith("/") ? composeLocation : "/" + composeLocation)'></span>
+                        </div>
+                    </div>
+                @else
+                    <x-forms.input wire:model="base_directory" label="Base Directory"
                         helper="Directory to use as root. Useful for monorepos." />
-                    <x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
-                        label="Docker Compose Location"
-                        helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" />
-                    Compose file location in your repository:<span
-                        class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>
                 @endif
                 @if ($show_is_static)
                     <x-forms.input type="number" required id="port" label="Port" :readonly="$is_static || $build_pack === 'static'" />
diff --git a/resources/views/livewire/project/new/github-private-repository.blade.php b/resources/views/livewire/project/new/github-private-repository.blade.php
index 07379be39..2c2bb4f0c 100644
--- a/resources/views/livewire/project/new/github-private-repository.blade.php
+++ b/resources/views/livewire/project/new/github-private-repository.blade.php
@@ -95,14 +95,21 @@
                                     @endif
                                 </div>
                                 @if ($build_pack === 'dockercompose')
-                                    <x-forms.input placeholder="/" wire:model.blur-sm="base_directory"
-                                        label="Base Directory"
+                                    <div x-data="{ baseDir: '{{ $base_directory }}', composeLocation: '{{ $docker_compose_location }}' }" class="gap-2 flex flex-col">
+                                        <x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
+                                            helper="Directory to use as root. Useful for monorepos." x-model="baseDir" />
+                                        <x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location"
+                                            label="Docker Compose Location" helper="It is calculated together with the Base Directory."
+                                            x-model="composeLocation" />
+                                        <div class="pt-2">
+                                            <span>
+                                                Compose file location in your repository: </span><span class='dark:text-warning'
+                                                x-text='(baseDir === "/" ? "" : baseDir) + (composeLocation.startsWith("/") ? composeLocation : "/" + composeLocation)'></span>
+                                        </div>
+                                    </div>
+                                @else
+                                    <x-forms.input wire:model="base_directory" label="Base Directory"
                                         helper="Directory to use as root. Useful for monorepos." />
-                                    <x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
-                                        label="Docker Compose Location"
-                                        helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" />
-                                    Compose file location in your repository:<span
-                                        class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>
                                 @endif
                                 @if ($show_is_static)
                                     <x-forms.input type="number" id="port" label="Port" :readonly="$is_static || $build_pack === 'static'"