Refactor Docker-related code and add conditional rendering

app/Livewire/Destination/New/Docker.php

@@ -49,8 +49,10 @@ class Docker extends Component
         } else {
             $this->network = new Cuid2(7);
         }
+        if ($this->servers->count() > 0) {
             $this->name = str("{$this->servers->first()->name}-{$this->network}")->kebab();
         }
+    }
 
     public function generate_name()
     {

resources/views/destination/all.blade.php

@@ -1,11 +1,13 @@
 <x-layout>
     <div class="flex items-start gap-2">
         <h1>Destinations</h1>
+        @if ($servers->count() > 0)
             <x-modal-input buttonTitle="+ Add" title="New Destination">
                 <livewire:destination.new.docker :server_id="$server_id" />
             </x-modal-input>
+        @endif
     </div>
-    <div class="subtitle">Endpoints to deploy your resources.</div>
+    <div class="subtitle">Network endpoints to deploy your resources.</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($destinations as $destination)
             @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
@@ -27,7 +29,11 @@
             @endif
         @empty
             <div>
+                @if ($servers->count() === 0)
+                    <div> No servers found. Please add one first.</div>
+                @else
                     <div>No destinations found.</div>
+                @endif
             </div>
         @endforelse
     </div>

resources/views/livewire/server/create.blade.php

@@ -1,3 +1,3 @@
-<div>
+<div class="w-full">
     <livewire:server.new.by-ip :private_keys="$private_keys" :limit_reached="$limit_reached" />
 </div>

resources/views/livewire/server/new/by-ip.blade.php

@@ -1,10 +1,10 @@
-<div>
+<div class="w-full">
     @if ($limit_reached)
         <x-limit-reached name="servers" />
     @else
-        <form class="flex flex-col gap-2" wire:submit='submit'>
-            <div class="flex gap-2">
-                <x-forms.input id="name" label="Name" required />
+        <form class="flex flex-col w-full gap-2" wire:submit='submit'>
+            <div class="flex w-full gap-2">
+                <x-forms.input autofocus id="name" label="Name" required />
                 <x-forms.input id="description" label="Description" />
             </div>
             <div class="flex gap-2">
@@ -23,10 +23,10 @@
                     @endif
                 @endforeach
             </x-forms.select>
-            <div class="w-96">
+            <div class="">
                 <x-forms.checkbox instantSave type="checkbox" id="is_build_server" label="Use it as a build server?" />
             </div>
-            <div class="w-96">
+            <div class="">
                 <h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
                 <div class="pb-4">Read the docs <a class='dark:text-white'
                         href='https://coolify.io/docs/docker/swarm#deploy-with-persistent-storage'