From dc8398ada813c42427edb386d01a45431c4a3fb3 Mon Sep 17 00:00:00 2001
From: ShadowArcanist <projectshadowmoon@gmail.com>
Date: Mon, 22 Sep 2025 23:56:08 +0530
Subject: [PATCH] Cleaned up docker cleanup page

---
 .../livewire/server/docker-cleanup.blade.php  | 81 ++++++++++---------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/resources/views/livewire/server/docker-cleanup.blade.php b/resources/views/livewire/server/docker-cleanup.blade.php
index 04d133181..4d440b23b 100644
--- a/resources/views/livewire/server/docker-cleanup.blade.php
+++ b/resources/views/livewire/server/docker-cleanup.blade.php
@@ -11,13 +11,6 @@
                     <div class="flex items-center gap-2">
                         <h2>Docker Cleanup</h2>
                         <x-forms.button type="submit" canGate="update" :canResource="$server">Save</x-forms.button>
-                    </div>
-                    <div class="mt-3 mb-4">Configure Docker cleanup settings for your server.</div>
-                </div>
-
-                <div class="flex flex-col gap-2">
-                    <div class="flex gap-4">
-                        <h3>Docker Cleanup</h3>
                         @can('update', $server)
                             <x-modal-confirmation title="Confirm Docker Cleanup?" buttonTitle="Trigger Manual Cleanup"
                                 isHighlightedButton submitAction="manualCleanup" :actions="[
@@ -31,7 +24,14 @@
                                 :confirmWithPassword="false" step2ButtonText="Trigger Docker Cleanup" />
                         @endcan
                     </div>
-                    <div class="flex flex-wrap items-center gap-4">
+                    <div class="mt-1 mb-6">Configure Docker cleanup settings for your server.</div>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <div class="flex gap-4">
+                        <h3>Cleanup Configuration</h3>
+                    </div>
+                    <div class="flex items-center gap-4">
                         <x-forms.input canGate="update" :canResource="$server" placeholder="*/10 * * * *"
                             id="dockerCleanupFrequency" label="Docker cleanup frequency" required
                             helper="Cron expression for Docker Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at midnight." />
@@ -40,43 +40,48 @@
                                 label="Docker cleanup threshold (%)" required
                                 helper="The Docker cleanup tasks will run when the disk usage exceeds this threshold." />
                         @endif
-                        <div class="w-96">
-                            <x-forms.checkbox canGate="update" :canResource="$server"
-                                helper="Enabling Force Docker Cleanup or manually triggering a cleanup will perform the following actions:
-                        <ul class='list-disc pl-4 mt-2'>
-                            <li>Removes stopped containers managed by Coolify (as containers are none persistent, no data will be lost).</li>
-                            <li>Deletes unused images.</li>
-                            <li>Clears build cache.</li>
-                            <li>Removes old versions of the Coolify helper image.</li>
-                            <li>Optionally delete unused volumes (if enabled in advanced options).</li>
-                            <li>Optionally remove unused networks (if enabled in advanced options).</li>
-                        </ul>"
-                                instantSave id="forceDockerCleanup" label="Force Docker Cleanup" />
-                        </div>
                     </div>
-                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
-                        <span class="dark:text-warning font-bold">Warning: Enable these
-                            options only if you fully understand their implications and
-                            consequences!</span><br>Improper use will result in data loss and could cause
-                        functional issues.
-                    </p>
+                    <div class="w-96">
+                        <x-forms.checkbox canGate="update" :canResource="$server"
+                            helper="Enabling Force Docker Cleanup or manually triggering a cleanup will perform the following actions:
+                            <ul class='list-disc pl-4 mt-2'>
+                                <li>Removes stopped containers managed by Coolify (as containers are none persistent, no data will be lost).</li>
+                                <li>Deletes unused images.</li>
+                                <li>Clears build cache.</li>
+                                <li>Removes old versions of the Coolify helper image.</li>
+                                <li>Optionally delete unused volumes (if enabled in advanced options).</li>
+                                <li>Optionally remove unused networks (if enabled in advanced options).</li>
+                            </ul>"
+                            instantSave id="forceDockerCleanup" label="Force Docker Cleanup" 
+                        />
+                    </div>
+
+                </div>
+
+                <div class="flex flex-col gap-2 mt-6">
+                    <h3>Advanced</h3>
+                    <x-callout type="warning" title="Caution">
+                        <p>These options can cause permanent data loss and functional issues. Only enable if you fully understand the consequences</p>
+                    </x-callout>
                     <div class="w-96">
                         <x-forms.checkbox canGate="update" :canResource="$server" instantSave id="deleteUnusedVolumes"
                             label="Delete Unused Volumes"
-                            helper="This option will remove all unused Docker volumes during cleanup.<br><br><strong>Warning: Data form stopped containers will be lost!</strong><br><br>Consequences include:<br>
-                    <ul class='list-disc pl-4 mt-2'>
-                    <li>Volumes not attached to running containers will be deleted and data will be permanently lost (stopped containers are affected).</li>
-                    <li>Data from stopped containers volumes will be permanently lost.</li>
-                    <li>No way to recover deleted volume data.</li>
-                    </ul>" />
+                            helper="This option will remove all unused Docker volumes during cleanup.<br><br><strong>Warning: Data from stopped containers will be lost!</strong><br><br>Consequences include:<br>
+                            <ul class='list-disc pl-4 mt-2'>
+                                <li>Volumes not attached to running containers will be deleted and data will be permanently lost (stopped containers are affected).</li>
+                                <li>Data from stopped containers volumes will be permanently lost.</li>
+                                <li>No way to recover deleted volume data.</li>
+                            </ul>" 
+                        />
                         <x-forms.checkbox canGate="update" :canResource="$server" instantSave id="deleteUnusedNetworks"
                             label="Delete Unused Networks"
                             helper="This option will remove all unused Docker networks during cleanup.<br><br><strong>Warning: Functionality may be lost and containers may not be able to communicate with each other!</strong><br><br>Consequences include:<br>
-                    <ul class='list-disc pl-4 mt-2'>
-                    <li>Networks not attached to running containers will be permanently deleted (stopped containers are affected).</li>
-                    <li>Custom networks for stopped containers will be permanently deleted.</li>
-                    <li>Functionality may be lost and containers may not be able to communicate with each other.</li>
-                    </ul>" />
+                            <ul class='list-disc pl-4 mt-2'>
+                                <li>Networks not attached to running containers will be permanently deleted (stopped containers are affected).</li>
+                                <li>Custom networks for stopped containers will be permanently deleted.</li>
+                                <li>Functionality may be lost and containers may not be able to communicate with each other.</li>
+                            </ul>" 
+                        />
                     </div>
                 </div>
             </form>