ux ux ux ux ui ui ui ui

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

@@ -1,9 +1,3 @@
 <div>
-    @if ($private_keys->count() === 0)
-        <h1>Create Private Key</h1>
-        <div class="subtitle">You need to create a private key before you can create a server.</div>
-        <livewire:security.private-key.create from="server" />
-    @else
-        <livewire:server.new.by-ip :private_keys="$private_keys" :limit_reached="$limit_reached" />
-    @endif
+    <livewire:server.new.by-ip :private_keys="$private_keys" :limit_reached="$limit_reached" />
 </div>

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

@@ -1,9 +1,14 @@
 <div>
     <div class="flex items-start gap-2">
         <h1>Servers</h1>
-        <a class="text-white hover:no-underline" href="{{ route('server.create') }}">
-            <x-forms.button >+ Add</x-forms.button>
-        </a>
+        <x-slide-over fullScreen closeWithX>
+            <x-slot:title>New Server</x-slot:title>
+            <x-slot:content>
+                <livewire:server.create />
+            </x-slot:content>
+            <button @click="slideOverOpen=true" class="button">+
+                Add</button>
+        </x-slide-over>
     </div>
     <div class="subtitle">All your servers are here.</div>
 
@@ -12,8 +17,12 @@
             <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
                 @class([
                     'gap-2 border cursor-pointer box group',
-                    'border-transparent' => $server->settings->is_reachable && $server->settings->is_usable && !$server->settings->force_disabled,
-                    'border-red-500' => !$server->settings->is_reachable || $server->settings->force_disabled,
+                    'border-transparent' =>
+                        $server->settings->is_reachable &&
+                        $server->settings->is_usable &&
+                        !$server->settings->force_disabled,
+                    'border-red-500' =>
+                        !$server->settings->is_reachable || $server->settings->force_disabled,
                 ])>
                 <div class="flex flex-col mx-6">
                     <div class="font-bold text-white">
@@ -41,7 +50,6 @@
         @empty
             <div>
                 <div>No servers found. Without a server, you won't be able to do much.</div>
-                <x-use-magic-bar link="/server/new" />
             </div>
         @endforelse
         @isset($error)

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

@@ -2,7 +2,6 @@
     @if ($limit_reached)
         <x-limit-reached name="servers" />
     @else
-        <h1 class="title">New Server</h1>
         <form class="flex flex-col gap-2" wire:submit='submit'>
             <div class="flex gap-2">
                 <x-forms.input id="name" label="Name" required />

resources/views/livewire/server/show-private-key.blade.php

@@ -1,9 +1,14 @@
 <div>
     <div class="flex items-end gap-2 pb-6 ">
         <h2>Private Key</h2>
-        <a href="{{ route('security.private-key.create') }}">
-            <x-forms.button>Add a new Private Key</x-forms.button>
-        </a>
+        <x-slide-over fullScreen closeWithX>
+            <x-slot:title>New Team</x-slot:title>
+            <x-slot:content>
+                <livewire:security.private-key.create />
+            </x-slot:content>
+            <button @click="slideOverOpen=true" class="button">+
+                Add</button>
+        </x-slide-over>
         <x-forms.button wire:click.prevent='checkConnection'>
             Check connection
         </x-forms.button>
@@ -31,9 +36,7 @@
                 <div class="text-xs">{{ $private_key->description }}</div>
             </x-forms.button>
         @empty
-            <div>No private keys found.
-                <x-use-magic-bar link="/security/private-key/new" />
-            </div>
+            <div>No private keys found. </div>
         @endforelse
     </div>
 </div>