From 23211c3d142453c431379048ed63a6c778f22a77 Mon Sep 17 00:00:00 2001
From: Tim Koch <me@timkoch.dev>
Date: Wed, 30 Oct 2024 08:39:47 +0100
Subject: [PATCH] Utilize <section> on dashboard page

---
 resources/views/livewire/dashboard.blade.php | 280 ++++++++++---------
 1 file changed, 144 insertions(+), 136 deletions(-)

diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 2e4f8fc99..2b9620e30 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -18,155 +18,163 @@
             subscription is activated.<br> Please be patient.
         </div>
     @endif
-    <h3 class="pb-4">Projects</h3>
-    @if ($projects->count() > 0)
-        <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
-            @foreach ($projects as $project)
-                <div class="gap-2 border border-transparent cursor-pointer box group"
-                    onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
-                    <div class="flex flex-1 mx-6">
-                        <div class="flex flex-col justify-center flex-1">
-                            <div class="box-title">{{ $project->name }}</div>
-                            <div class="box-description">
-                                {{ $project->description }}
+
+    <section>
+        <h3 class="pb-2">Projects</h3>
+        @if ($projects->count() > 0)
+            <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+                @foreach ($projects as $project)
+                    <div class="gap-2 border border-transparent cursor-pointer box group"
+                        onclick="gotoProject('{{ $project->uuid }}','{{ $project->default_environment }}')">
+                        <div class="flex flex-1 mx-6">
+                            <div class="flex flex-col justify-center flex-1">
+                                <div class="box-title">{{ $project->name }}</div>
+                                <div class="box-description">
+                                    {{ $project->description }}
+                                </div>
+                            </div>
+                            <div class="flex items-center justify-center gap-2 text-xs font-bold">
+                                <a class="hover:underline"
+                                    href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_name' => data_get($project, 'default_environment', 'production')]) }}">
+                                    <span class="p-2 font-bold">+ Add Resource</span>
+                                </a>
+                                <a class="hover:underline"
+                                    href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
+                                    Settings
+                                </a>
                             </div>
                         </div>
-                        <div class="flex items-center justify-center gap-2 text-xs font-bold">
-                            <a class="hover:underline"
-                                href="{{ route('project.resource.create', ['project_uuid' => $project->uuid, 'environment_name' => data_get($project, 'default_environment', 'production')]) }}">
-                                <span class="p-2 font-bold">+ Add Resource</span>
-                            </a>
-                            <a class="hover:underline"
-                                href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
-                                Settings
-                            </a>
-                        </div>
                     </div>
-                </div>
-            @endforeach
-        </div>
-    @else
-        <div class="flex flex-col gap-1">
-            <div class='font-bold dark:text-warning'>No projects found.</div>
-            <div class="flex items-center gap-1">
-                <x-modal-input buttonTitle="Add" title="New Project">
-                    <livewire:project.add-empty />
-                </x-modal-input> your first project or
-                go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a> page.
-            </div>
-        </div>
-    @endif
-
-    <h3 class="py-4">Servers</h3>
-    @if ($servers->count() > 0)
-        <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
-            @foreach ($servers as $server)
-                <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,
-                        'border-red-500' => !$server->settings->is_reachable,
-                    ])>
-                    <div class="flex flex-col justify-center mx-6">
-                        <div class="box-title">
-                            {{ $server->name }}
-                        </div>
-                        <div class="box-description">
-                            {{ $server->description }}</div>
-                        <div class="flex gap-1 text-xs text-error">
-                            @if (!$server->settings->is_reachable)
-                                Not reachable
-                            @endif
-                            @if (!$server->settings->is_reachable && !$server->settings->is_usable)
-                                &
-                            @endif
-                            @if (!$server->settings->is_usable)
-                                Not usable by Coolify
-                            @endif
-                        </div>
-                    </div>
-                    <div class="flex-1"></div>
-                </a>
-            @endforeach
-        </div>
-    @else
-        @if ($private_keys->count() === 0)
-            <div class="flex flex-col gap-1">
-                <div class='font-bold dark:text-warning'>No private keys found.</div>
-                <div class="flex items-center gap-1">Before you can add your server, first <x-modal-input
-                        buttonTitle="add" title="New Private Key">
-                        <livewire:security.private-key.create from="server" />
-                    </x-modal-input> a private key
-                    or
-                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
-                    page.
-                </div>
+                @endforeach
             </div>
         @else
             <div class="flex flex-col gap-1">
-                <div class='font-bold dark:text-warning'>No servers found.</div>
+                <div class='font-bold dark:text-warning'>No projects found.</div>
                 <div class="flex items-center gap-1">
-                    <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
-                        <livewire:server.create />
-                    </x-modal-input> your first server
-                    or
-                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
-                    page.
+                    <x-modal-input buttonTitle="Add" title="New Project">
+                        <livewire:project.add-empty />
+                    </x-modal-input> your first project or
+                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a> page.
                 </div>
             </div>
         @endif
-    @endif
-    @if ($servers->count() > 0 && $projects->count() > 0)
-        <div class="flex items-center gap-2">
-            <h3 class="py-4">Deployments</h3>
-            @if (count($deployments_per_server) > 0)
-                <x-loading />
-            @endif
-            <x-modal-confirmation
-                title="Confirm Cleanup Queues?"
-                buttonTitle="Cleanup Queues"
-                isErrorButton
-                submitAction="cleanup_queue"
-                :actions="['All running Deployment Queues will be cleaned up.']"
-                :confirmWithText="false"
-                :confirmWithPassword="false"
-                step2ButtonText="Permanently Cleanup Deployment Queues"
-                :dispatchEvent="true"
-                dispatchEventType="success"
-                dispatchEventMessage="Deployment Queues cleanup started."
-            />
-        </div>
-        <div wire:poll.3000ms="get_deployments" class="grid grid-cols-1">
-            @forelse ($deployments_per_server as $server_name => $deployments)
-                <h4 class="py-4">{{ $server_name }}</h4>
-                <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
-                    @foreach ($deployments as $deployment)
-                        <a href="{{ data_get($deployment, 'deployment_url') }}" @class([
-                            'gap-2 cursor-pointer box group border-l-2 border-dotted',
-                            'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
-                            'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
+    </section>
+
+    <section>
+        <h3 class="pb-2">Servers</h3>
+        @if ($servers->count() > 0)
+            <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+                @foreach ($servers as $server)
+                    <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,
+                            'border-red-500' => !$server->settings->is_reachable,
                         ])>
-                            <div class="flex flex-col justify-center mx-6">
-                                <div class="box-title">
-                                    {{ data_get($deployment, 'application_name') }}
-                                </div>
-                                @if (data_get($deployment, 'pull_request_id') !== 0)
-                                    <div class="box-description">
-                                        PR #{{ data_get($deployment, 'pull_request_id') }}
-                                    </div>
-                                @endif
-                                <div class="box-description">
-                                    {{ str(data_get($deployment, 'status'))->headline() }}
-                                </div>
+                        <div class="flex flex-col justify-center mx-6">
+                            <div class="box-title">
+                                {{ $server->name }}
                             </div>
-                            <div class="flex-1"></div>
-                        </a>
-                    @endforeach
+                            <div class="box-description">
+                                {{ $server->description }}</div>
+                            <div class="flex gap-1 text-xs text-error">
+                                @if (!$server->settings->is_reachable)
+                                    Not reachable
+                                @endif
+                                @if (!$server->settings->is_reachable && !$server->settings->is_usable)
+                                    &
+                                @endif
+                                @if (!$server->settings->is_usable)
+                                    Not usable by Coolify
+                                @endif
+                            </div>
+                        </div>
+                        <div class="flex-1"></div>
+                    </a>
+                @endforeach
+            </div>
+        @else
+            @if ($private_keys->count() === 0)
+                <div class="flex flex-col gap-1">
+                    <div class='font-bold dark:text-warning'>No private keys found.</div>
+                    <div class="flex items-center gap-1">Before you can add your server, first <x-modal-input
+                            buttonTitle="add" title="New Private Key">
+                            <livewire:security.private-key.create from="server" />
+                        </x-modal-input> a private key
+                        or
+                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
+                        page.
+                    </div>
                 </div>
-            @empty
-                <div>No deployments running.</div>
-            @endforelse
-        </div>
+            @else
+                <div class="flex flex-col gap-1">
+                    <div class='font-bold dark:text-warning'>No servers found.</div>
+                    <div class="flex items-center gap-1">
+                        <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
+                            <livewire:server.create />
+                        </x-modal-input> your first server
+                        or
+                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
+                        page.
+                    </div>
+                </div>
+            @endif
+        @endif
+    </section>
+
+    @if ($servers->count() > 0 && $projects->count() > 0)
+        <section>
+            <div class="flex items-center gap-2">
+                <h3 class="pb-2">Deployments</h3>
+                @if (count($deployments_per_server) > 0)
+                    <x-loading />
+                @endif
+                <x-modal-confirmation
+                    title="Confirm Cleanup Queues?"
+                    buttonTitle="Cleanup Queues"
+                    isErrorButton
+                    submitAction="cleanup_queue"
+                    :actions="['All running Deployment Queues will be cleaned up.']"
+                    :confirmWithText="false"
+                    :confirmWithPassword="false"
+                    step2ButtonText="Permanently Cleanup Deployment Queues"
+                    :dispatchEvent="true"
+                    dispatchEventType="success"
+                    dispatchEventMessage="Deployment Queues cleanup started."
+                />
+            </div>
+            <div wire:poll.3000ms="get_deployments" class="grid grid-cols-1">
+                @forelse ($deployments_per_server as $server_name => $deployments)
+                    <h4 class="pb-2">{{ $server_name }}</h4>
+                    <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
+                        @foreach ($deployments as $deployment)
+                            <a href="{{ data_get($deployment, 'deployment_url') }}" @class([
+                                'gap-2 cursor-pointer box group border-l-2 border-dotted',
+                                'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
+                                'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
+                            ])>
+                                <div class="flex flex-col justify-center mx-6">
+                                    <div class="box-title">
+                                        {{ data_get($deployment, 'application_name') }}
+                                    </div>
+                                    @if (data_get($deployment, 'pull_request_id') !== 0)
+                                        <div class="box-description">
+                                            PR #{{ data_get($deployment, 'pull_request_id') }}
+                                        </div>
+                                    @endif
+                                    <div class="box-description">
+                                        {{ str(data_get($deployment, 'status'))->headline() }}
+                                    </div>
+                                </div>
+                                <div class="flex-1"></div>
+                            </a>
+                        @endforeach
+                    </div>
+                @empty
+                    <div>No deployments running.</div>
+                @endforelse
+            </div>
+        </section>
     @endif