UI stuffs

resources/views/livewire/project/application/danger.blade.php

@@ -1,11 +1,16 @@
-<div x-data="{ deleteApplication: false }">
-    <x-naked-modal show="deleteApplication" title="Delete Application"
-        message='This application will be deleted. It is not reversible. <br>Please think again.' />
+<div>
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Application">
+        <x-slot:modalBody>
+            <p>This application will be deleted. It is not reversible. <br>Please think again.</p>
+        </x-slot:modalBody>
+    </x-modal>
     <h3>Danger Zone</h3>
     <div class="">Woah. I hope you know what are you doing.</div>
     <h4 class="pt-4">Delete Application</h4>
     <div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming
         back!
     </div>
-    <x-forms.button isWarning x-on:click.prevent="deleteApplication = true">Delete</x-forms.button>
+    <x-forms.button isError isModal modalId="{{ $modalId }}">
+        Delete
+    </x-forms.button>
 </div>

resources/views/livewire/project/application/environment-variable/add.blade.php

@@ -1,8 +1,14 @@
-<form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row"">
-    <x-forms.input placeholder="NODE_ENV" noDirty id="key" label="Name" required />
-    <x-forms.input placeholder="production" noDirty id="value" label="Value" required />
-    <x-forms.checkbox class="w-96" noDirty id="is_build_time" label="Build Variable?" />
-    <x-forms.button type="submit">
-        Add New Variable
-    </x-forms.button>
-</form>
+<dialog id="newVariable" class="modal">
+    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
+        <h3 class="text-lg font-bold">Add Environment Variable</h3>
+        <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
+        <x-forms.input placeholder="production" id="value" label="Value" required />
+        <x-forms.checkbox id="is_build_time" label="Build Variable?" />
+        <x-forms.button onclick="newVariable.close()" type="submit">
+            Save
+        </x-forms.button>
+    </form>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>

resources/views/livewire/project/application/environment-variable/all.blade.php

@@ -1,24 +1,26 @@
 <div class="flex flex-col gap-2">
     <div>
-        <h2>Environment Variables</h2>
+        <div class="flex items-center gap-2">
+            <h2>Environment Variables</h2>
+            <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
+            <livewire:project.application.environment-variable.add />
+        </div>
         <div class="">Environment (secrets) variables for normal deployments.</div>
     </div>
-    @foreach ($application->environment_variables as $env)
+    @forelse ($application->environment_variables as $env)
         <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
             :env="$env" />
-    @endforeach
-    <div class="pt-2 pb-8">
-        <livewire:project.application.environment-variable.add />
-    </div>
-    <div>
-        <h3>Preview Deployments</h3>
-        <div class="">Environment (secrets) variables for Preview Deployments.</div>
-    </div>
-    @foreach ($application->environment_variables_preview as $env)
-        <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
-            :env="$env" />
-    @endforeach
-    <div class="pt-2 pb-8">
-        <livewire:project.application.environment-variable.add is_preview="true" />
-    </div>
+    @empty
+        <div class="text-neutral-500">No environment variables found.</div>
+    @endforelse
+    @if ($application->environment_variables_preview->count() > 0)
+        <div>
+            <h3>Preview Deployments</h3>
+            <div class="">Environment (secrets) variables for Preview Deployments.</div>
+        </div>
+        @foreach ($application->environment_variables_preview as $env)
+            <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
+                :env="$env" />
+        @endforeach
+    @endif
 </div>

resources/views/livewire/project/application/environment-variable/show.blade.php

@@ -1,15 +1,19 @@
-<div x-data="{ deleteEnvironment: false }">
-    <x-naked-modal show="deleteEnvironment" title="Delete Environment"
-        message='This environment will be deleted. It is not reversible. <br>Please think again.' />
-    <form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
-        <x-forms.input id="env.key" label="Name" />
-        <x-forms.input type="password" id="env.value" label="Value" />
-        <x-forms.checkbox class="w-96" disabled id="env.is_build_time" label="Build Variable?" />
+<div>
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Environment Variable">
+        <x-slot:modalBody>
+            <p>Are you sure you want to delete this environment variable <span
+                    class="font-bold text-warning">({{ $env->key }})</span>?</p>
+        </x-slot:modalBody>
+    </x-modal>
+    <form wire:submit.prevent='submit' class="flex flex-col items-center gap-2 xl:flex-row">
+        <x-forms.input id="env.key" />
+        <x-forms.input type="password" id="env.value" />
+        <x-forms.checkbox disabled id="env.is_build_time" label="Build Variable?" />
         <div class="flex gap-2">
             <x-forms.button type="submit">
                 Update
             </x-forms.button>
-            <x-forms.button x-on:click.prevent="deleteEnvironment = true">
+            <x-forms.button isError isModal modalId="{{ $modalId }}">
                 Delete
             </x-forms.button>
         </div>

resources/views/livewire/project/application/previews.blade.php

@@ -3,7 +3,7 @@
     <div>
         <div class="flex items-center gap-2">
             <h3>Pull Requests on Git</h3>
-            <x-forms.button wire:click="load_prs">Load Pull Requests (Open)
+            <x-forms.button wire:click="load_prs">Load Pull Requests
             </x-forms.button>
         </div>
         @isset($rate_limit_remaining)

resources/views/livewire/project/application/source.blade.php

@@ -17,25 +17,24 @@
                     </x-forms.button>
                 </a>
             @endif
-        </div>
-        <div class="">Code source of your application.</div>
-        <x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository" label="Repository" />
-        <x-forms.input placeholder="main" id="application.git_branch" label="Branch" />
-        <div class="flex items-end gap-2 w-96">
-            <x-forms.input placeholder="HEAD" id="application.git_commit_sha" placeholder="HEAD" label="Commit SHA" />
             <a target="_blank" class="flex hover:no-underline" href="{{ $application?->gitCommits }}">
-                <x-forms.button><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" />
-                        <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-                        <path d="M12 3l0 6" />
-                        <path d="M12 15l0 6" />
-                    </svg>Open Commits on Git
+                <x-forms.button>Open Commits on Git
                     <x-external-link />
                 </x-forms.button>
             </a>
         </div>
+        <div class="pb-4">Code source of your application.</div>
+
+        <div class="flex gap-2">
+            <x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository"
+                label="Repository" />
+            <x-forms.input placeholder="main" id="application.git_branch" label="Branch" />
+        </div>
+        <div class="flex items-end gap-2">
+            <x-forms.input placeholder="HEAD" id="application.git_commit_sha" placeholder="HEAD" label="Commit SHA" />
+
+        </div>
+
         @if ($application->private_key_id)
             <h4 class="py-2 pt-4">Current Deploy Key: <span
                     class="text-warning">{{ $application->private_key->name }}</span></h4>

resources/views/livewire/project/application/storages/add.blade.php

@@ -1,8 +1,14 @@
-<form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
-    <x-forms.input placeholder="pv-name" noDirty id="name" label="Name" required />
-    <x-forms.input placeholder="/root" noDirty id="host_path" label="Source Path" />
-    <x-forms.input placeholder="/tmp/root" noDirty id="mount_path" label="Destination Path" required />
-    <x-forms.button type="submit">
-        Add New Volume
-    </x-forms.button>
-</form>
+<dialog id="newStorage" class="modal">
+    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
+        <h3 class="text-lg font-bold">Add Environment Variable</h3>
+        <x-forms.input placeholder="pv-name" id="name" label="Name" required />
+        <x-forms.input placeholder="/root" id="host_path" label="Source Path" />
+        <x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required />
+        <x-forms.button onclick="newStorage.close()" type="submit">
+            Save
+        </x-forms.button>
+    </form>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>

resources/views/livewire/project/application/storages/all.blade.php

@@ -6,13 +6,16 @@
                 helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
             volume
             name, example: <span class='text-helper'>-pr-1</span>" />
+            <x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
+            <livewire:project.application.storages.add />
         </div>
         <div class="">Persistent storage to preserve data between deployments.</div>
     </div>
     <div class="flex flex-col gap-2 py-4">
-        @foreach ($application->persistentStorages as $storage)
+        @forelse ($application->persistentStorages as $storage)
             <livewire:project.application.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
-        @endforeach
+        @empty
+            <div class="text-neutral-500">No storages found.</div>
+        @endforelse
     </div>
-    <livewire:project.application.storages.add />
 </div>

resources/views/livewire/project/application/storages/show.blade.php

@@ -1,6 +1,10 @@
-<div x-data="{ deleteStorage: false }">
-    <x-naked-modal show="deleteStorage" title="Delete Storage"
-        message='This storage will be deleted. It is not reversible. <br>Please think again.' />
+<div>
+    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Storage">
+        <x-slot:modalBody>
+            <p>This storage will be deleted <span class="font-bold text-warning">({{ $storage->name }})</span>. It is not
+                reversible. <br>Please think again.</p>
+        </x-slot:modalBody>
+    </x-modal>
     <form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
         <x-forms.input id="storage.name" label="Name" required />
         <x-forms.input id="storage.host_path" label="Source Path" />
@@ -9,7 +13,7 @@
             <x-forms.button type="submit">
                 Update
             </x-forms.button>
-            <x-forms.button x-on:click.prevent="deleteStorage = true">
+            <x-forms.button isError isModal modalId="{{ $modalId }}">
                 Delete
             </x-forms.button>
         </div>