feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)

Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>

resources/views/livewire/project/shared/resource-limits.blade.php

@@ -1,37 +1,46 @@
-<div>
-    <form wire:submit='submit' class="flex flex-col">
-        <div class="flex items-center gap-2 ">
-            <h2>Resource Limits</h2>
-            <x-forms.button canGate="update" :canResource="$resource" type='submit'>Save</x-forms.button>
-        </div>
-        <div class="">Limit your container resources by CPU & memory.</div>
-        <h3 class="pt-4">Limit CPUs</h3>
-        <div class="flex gap-2">
+<form wire:submit="submit" class="application-settings-form flex flex-col gap-6">
+    <x-unsaved-bar action="submit" />
+
+    <x-application.settings-section id="cpu-limits-section" title="CPU"
+        helper="Limit CPU capacity, affinity, and scheduling priority for this container.">
+        <div class="grid gap-4 md:grid-cols-3">
             <x-forms.input canGate="update" :canResource="$resource" placeholder="1.5"
-                helper="0 means use all CPUs. Floating point number, like 0.002 or 1.5. More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
-                label="Number of CPUs" id="limitsCpus" />
+                helper="Set to 0 to use all available CPUs. Decimal values such as 0.5 are supported."
+                label="CPU limit" id="limitsCpus" />
             <x-forms.input canGate="update" :canResource="$resource" placeholder="0-2"
-                helper="Empty means, use all CPU sets. 0-2 will use CPU 0, CPU 1 and CPU 2. More info <a class='underline dark:text-white'  target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
-                label="CPU sets to use" id="limitsCpuset" />
+                helper="Restrict execution to specific cores, for example 0-2 or 0,1,3. Leave empty for all cores."
+                label="CPU set" id="limitsCpuset" />
             <x-forms.input canGate="update" :canResource="$resource" placeholder="1024"
-                helper="More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/engine/reference/run/#cpu-share-constraint'>here</a>."
-                label="CPU Weight" id="limitsCpuShares" />
+                helper="Relative CPU scheduling weight. Docker uses 1024 by default."
+                label="CPU weight" id="limitsCpuShares" />
         </div>
-        <h3 class="pt-4">Limit Memory</h3>
-        <div class="flex gap-2">
+        <a class="mt-4 inline-flex items-center gap-1 text-xs text-neutral-500 hover:text-coollabs dark:text-fg-dim dark:hover:text-warning"
+            target="_blank" rel="noopener noreferrer"
+            href="https://docs.docker.com/engine/containers/resource_constraints/#cpu">
+            Docker CPU constraints
+            <x-external-link />
+        </a>
+    </x-application.settings-section>
+
+    <x-application.settings-section id="memory-limits-section" title="Memory"
+        helper="Set hard and soft memory limits, swap allowance, and swappiness.">
+        <div class="grid gap-4 sm:grid-cols-2">
             <x-forms.input canGate="update" :canResource="$resource"
-                helper="<span class='text-helper'>Examples</span><br>• 69b (byte)<br>• 420k (kilobyte)<br>• 1337m (megabyte)<br>• 1g (gigabyte)<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_reservation'>here</a>."
-                label="Soft Memory Limit" id="limitsMemoryReservation" />
+                helper="Soft reservation used when the host is under memory pressure. Use values such as 256m or 1g."
+                label="Memory reservation" id="limitsMemoryReservation" />
             <x-forms.input canGate="update" :canResource="$resource"
-                helper="Value between 0-100.<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_swappiness'>here</a>."
-                type="number" min="0" max="100" label="Swappiness"
-                id="limitsMemorySwappiness" />
+                helper="Maximum memory available to the container. Set to 0 for unlimited."
+                label="Memory limit" id="limitsMemory" />
             <x-forms.input canGate="update" :canResource="$resource"
-                helper="<span class='text-helper'>Examples</span><br>• 69b (byte)<br>• 420k (kilobyte)<br>• 1337m (megabyte)<br>• 1g (gigabyte)<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_limit'>here</a>."
-                label="Maximum Memory Limit" id="limitsMemory" />
+                helper="Combined memory and swap allowance. Use values such as 512m or 2g."
+                label="Memory and swap limit" id="limitsMemorySwap" />
             <x-forms.input canGate="update" :canResource="$resource"
-                helper="<span class='text-helper'>Examples</span><br>• 69b (byte)<br>• 420k (kilobyte)<br>• 1337m (megabyte)<br>• 1g (gigabyte)<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#memswap_limit'>here</a>."
-                label="Maximum Swap Limit" id="limitsMemorySwap" />
+                helper="Controls how aggressively anonymous memory is swapped. Enter a value from 0 to 100."
+                type="number" min="0" max="100" label="Swappiness" id="limitsMemorySwappiness" />
         </div>
-    </form>
-</div>
+        <p class="mt-4 text-xs leading-5 text-neutral-500 dark:text-fg-dim">
+            Accepted units are <code class="font-mono">b</code>, <code class="font-mono">k</code>,
+            <code class="font-mono">m</code>, and <code class="font-mono">g</code>.
+        </p>
+    </x-application.settings-section>
+</form>