Merge pull request #4796 from peaklabs-dev/fix-navigation

Feat: Improve navigation performance

resources/views/components/navbar.blade.php

@@ -123,7 +123,7 @@
             <ul role="list" class="flex flex-col h-full space-y-1.5">
                 @if (isSubscribed() || !isCloud())
                     <li>
-                        <a title="Dashboard" href="/"
+                        <a title="Dashboard" href="/" wire:navigate
                             class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
@@ -134,7 +134,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Projects"
+                        <a title="Projects" wire:navigate
                             class="{{ request()->is('project/*') || request()->is('projects') ? 'menu-item menu-item-active' : 'menu-item' }}"
                             href="/projects">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
@@ -149,7 +149,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Servers"
+                        <a title="Servers" wire:navigate
                             class="{{ request()->is('server/*') || request()->is('servers') ? 'menu-item menu-item-active' : 'menu-item' }}"
                             href="/servers">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
@@ -168,7 +168,7 @@
                     </li>
 
                     <li>
-                        <a title="Sources"
+                        <a title="Sources" wire:navigate
                             class="{{ request()->is('source*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('source.all') }}">
                             <svg class="icon" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
@@ -179,7 +179,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Destinations"
+                        <a title="Destinations" wire:navigate
                             class="{{ request()->is('destination*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('destination.index') }}">
 
@@ -192,7 +192,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="S3 Storages"
+                        <a title="S3 Storages" wire:navigate
                             class="{{ request()->is('storages*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('storage.index') }}">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
@@ -207,7 +207,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Shared variables"
+                        <a title="Shared variables" wire:navigate
                             class="{{ request()->is('shared-variables*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('shared-variables.index') }}">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
@@ -222,7 +222,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Notifications"
+                        <a title="Notifications" wire:navigate
                             class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('notifications.email') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -234,7 +234,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Keys & Tokens"
+                        <a title="Keys & Tokens" wire:navigate
                             class="{{ request()->is('security*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('security.private-key.index') }}">
                             <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -246,7 +246,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Tags"
+                        <a title="Tags" wire:navigate
                             class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('tags.show') }}">
                             <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -261,7 +261,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Terminal"
+                        <a title="Terminal" wire:navigate
                             class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('terminal') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -275,7 +275,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Profile"
+                        <a title="Profile" wire:navigate
                             class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('profile') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -290,7 +290,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Teams"
+                        <a title="Teams" wire:navigate
                             class="{{ request()->is('team*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('team.index') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -309,7 +309,7 @@
                     </li>
                     @if (isCloud())
                         <li>
-                            <a title="Subscription"
+                            <a title="Subscription" wire:navigate
                                 class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                                 href="{{ route('subscription.show') }}">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -324,7 +324,7 @@
                     @if (isInstanceAdmin())
                         <li>
 
-                            <a title="Settings"
+                            <a title="Settings" wire:navigate
                                 class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                                 href="/settings">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -343,7 +343,7 @@
                     @if (isCloud() || isDev())
                         @if (isInstanceAdmin() || session('impersonating'))
                             <li>
-                                <a title="Admin" class="menu-item" href="/admin">
+                                <a wire:navigate title="Admin" class="menu-item" href="/admin">
                                     <svg class="text-pink-600 icon" viewBox="0 0 256 256"
                                         xmlns="http://www.w3.org/2000/svg">
                                         <path fill="currentColor"
@@ -363,7 +363,7 @@
                         @endpersist
                     @endif
                     <li>
-                        <a title="Onboarding"
+                        <a title="Onboarding" wire:navigate
                             class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('onboarding') }}">
                             <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">

resources/views/components/notification/navbar.blade.php

@@ -4,22 +4,27 @@
     <div class="navbar-main">
         <nav class="flex items-center gap-6 min-h-10">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>
             </a>
             <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.discord') }}">
                 <button>Discord</button>
             </a>
              <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.telegram') }}">
                 <button>Telegram</button>
             </a>
             <a class="{{ request()->routeIs('notifications.slack') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.slack') }}">
                 <button>Slack</button>
             </a>
             <a class="{{ request()->routeIs('notifications.pushover') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.pushover') }}">
                 <button>Pushover</button>
             </a>

resources/views/components/resources/breadcrumbs.blade.php

@@ -8,6 +8,7 @@
         <li class="inline-flex items-center">
             <div class="flex items-center">
                 <a class="text-xs truncate lg:text-sm"
+                    wire:navigate
                     href="{{ route('project.show', ['project_uuid' => data_get($resource, 'environment.project.uuid')]) }}">
                     {{ data_get($resource, 'environment.project.name', 'Undefined Name') }}</a>
                 <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
@@ -21,6 +22,7 @@
         <li>
             <div class="flex items-center">
                 <a class="text-xs truncate lg:text-sm"
+                    wire:navigate
                     href="{{ route('project.resource.index', [
                         'environment_uuid' => data_get($resource, 'environment.uuid'),
                         'project_uuid' => data_get($resource, 'environment.project.uuid'),

resources/views/components/security/navbar.blade.php

@@ -3,10 +3,10 @@
     <div class="subtitle">Security related settings.</div>
     <div class="navbar-main">
         <nav class="flex items-center gap-6 scrollbar min-h-10">
-            <a href="{{ route('security.private-key.index') }}">
+            <a wire:navigate href="{{ route('security.private-key.index') }}">
                 <button>Private Keys</button>
             </a>
-            <a href="{{ route('security.api-tokens') }}">
+            <a wire:navigate href="{{ route('security.api-tokens') }}">
                 <button>API tokens</button>
             </a>
         </nav>

resources/views/components/server/navbar.blade.php

@@ -18,7 +18,7 @@
     <div class="subtitle">{{ data_get($server, 'name') }}</div>
     <div class="navbar-main">
         <nav class="flex items-center gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
-            <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.show', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
@@ -26,20 +26,20 @@
             </a>
 
             @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
-                <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
+                <a wire:navigate class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
                     href="{{ route('server.proxy', [
                         'server_uuid' => data_get($server, 'uuid'),
                     ]) }}">
                     <button>Proxy</button>
                 </a>
             @endif
-            <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.resources', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
                 <button>Resources</button>
             </a>
-            <a class="{{ request()->routeIs('server.command') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('server.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.command', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">

resources/views/components/server/sidebar-proxy.blade.php

@@ -1,14 +1,14 @@
 @if ($server->proxySet())
     <div class="flex flex-col items-start gap-2 min-w-fit">
-        <a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        <a wire:navigate class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
             href="{{ route('server.proxy', $parameters) }}">
             <button>Configuration</button>
         </a>
-        <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        <a wire:navigate class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
             href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
             <button>Dynamic Configurations</button>
         </a>
-        <a class="{{ request()->routeIs('server.proxy.logs') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        <a wire:navigate class="{{ request()->routeIs('server.proxy.logs') ? 'menu-item menu-item-active' : 'menu-item' }}"
             href="{{ route('server.proxy.logs', $parameters) }}">
             <button>Logs</button>
         </a>

resources/views/components/server/sidebar.blade.php

@@ -1,31 +1,31 @@
 <div class="flex flex-col items-start gap-2 min-w-fit">
-    <a class="menu-item {{ $activeMenu === 'general' ? 'menu-item-active' : '' }}"
+    <a wire:navigate class="menu-item {{ $activeMenu === 'general' ? 'menu-item-active' : '' }}"
         href="{{ route('server.show', ['server_uuid' => $server->uuid]) }}">General</a>
     @if ($server->isFunctional())
-        <a class="menu-item {{ $activeMenu === 'advanced' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'advanced' ? 'menu-item-active' : '' }}"
             href="{{ route('server.advanced', ['server_uuid' => $server->uuid]) }}">Advanced
         </a>
     @endif
-    <a class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
+    <a wire:navigate class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
         href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">Private Key
     </a>
     @if (!$server->isLocalhost())
-        <a class="menu-item {{ $activeMenu === 'cloudflare-tunnels' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'cloudflare-tunnels' ? 'menu-item-active' : '' }}"
             href="{{ route('server.cloudflare-tunnels', ['server_uuid' => $server->uuid]) }}">Cloudflare
             Tunnels</a>
     @endif
     @if ($server->isFunctional())
-        <a class="menu-item {{ $activeMenu === 'destinations' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'destinations' ? 'menu-item-active' : '' }}"
             href="{{ route('server.destinations', ['server_uuid' => $server->uuid]) }}">Destinations
         </a>
-        <a class="menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}"
             href="{{ route('server.log-drains', ['server_uuid' => $server->uuid]) }}">Log
             Drains</a>
-        <a class="menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}"
             href="{{ route('server.charts', ['server_uuid' => $server->uuid]) }}">Metrics</a>
     @endif
     @if (!$server->isLocalhost())
-        <a class="menu-item {{ $activeMenu === 'danger' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'danger' ? 'menu-item-active' : '' }}"
             href="{{ route('server.delete', ['server_uuid' => $server->uuid]) }}">Danger</a>
     @endif
 </div>

resources/views/components/settings/navbar.blade.php

@@ -4,18 +4,20 @@
     <div class="navbar-main">
         <nav class="flex items-center gap-6 min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('settings.index') }}">
                 <button>Configuration</button>
             </a>
             <a class="{{ request()->routeIs('settings.backup') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('settings.backup') }}">
                 <button>Backup</button>
             </a>
-            <a class="{{ request()->routeIs('settings.email') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('settings.email') ? 'dark:text-white' : '' }}" wire:navigate
                 href="{{ route('settings.email') }}">
                 <button>Transactional Email</button>
             </a>
-            <a class="{{ request()->routeIs('settings.oauth') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('settings.oauth') ? 'dark:text-white' : '' }}" wire:navigate
                 href="{{ route('settings.oauth') }}">
                 <button>OAuth</button>
             </a>

resources/views/components/team/navbar.blade.php

@@ -8,15 +8,16 @@
     <div class="subtitle">Team wide configurations.</div>
     <div class="navbar-main">
         <nav class="flex items-center gap-6 min-h-10">
-            <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
+            <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" wire:navigate
+                href="{{ route('team.index') }}">
                 <button>General</button>
             </a>
-            <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}" wire:navigate
                 href="{{ route('team.member.index') }}">
                 <button>Members</button>
             </a>
             @if (isInstanceAdmin())
-                <a class="{{ request()->routeIs('team.admin-view') ? 'dark:text-white' : '' }}"
+                <a class="{{ request()->routeIs('team.admin-view') ? 'dark:text-white' : '' }}" wire:navigate
                     href="{{ route('team.admin-view') }}">
                     <button>Admin View</button>
                 </a>

resources/views/livewire/dashboard.blade.php

@@ -35,7 +35,7 @@
                             </div>
                             <div class="flex items-center justify-center gap-2 text-xs font-bold">
                                 @if ($project->environments->first())
-                                    <a class="hover:underline" wire:click.stop
+                                    <a class="hover:underline" wire:navigate wire:click.stop
                                         href="{{ route('project.resource.create', [
                                             'project_uuid' => $project->uuid,
                                             'environment_uuid' => $project->environments->first()->uuid,
@@ -43,7 +43,7 @@
                                         <span class="p-2 font-bold">+ Add Resource</span>
                                     </a>
                                 @endif
-                                <a class="hover:underline" wire:click.stop
+                                <a class="hover:underline" wire:navigate wire:click.stop
                                     href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
                                     Settings
                                 </a>
@@ -59,7 +59,7 @@
                     <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.
+                    go to the <a class="underline dark:text-white" wire:navigate href="{{ route('onboarding') }}">onboarding</a> page.
                 </div>
             </div>
         @endif
@@ -70,7 +70,8 @@
         @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')]) }}"
+                    <a wire:navigate
+                        href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
                         @class([
                             'gap-2 border cursor-pointer box group',
                             'border-transparent' => $server->settings->is_reachable,
@@ -107,7 +108,7 @@
                             <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>
+                        go to the <a class="underline dark:text-white" wire:navigate href="{{ route('onboarding') }}">onboarding</a>
                         page.
                     </div>
                 </div>
@@ -119,7 +120,7 @@
                             <livewire:server.create />
                         </x-modal-input> your first server
                         or
-                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}">onboarding</a>
+                        go to the <a class="underline dark:text-white" wire:navigate href="{{ route('onboarding') }}">onboarding</a>
                         page.
                     </div>
                 </div>
@@ -144,7 +145,7 @@
                     <h4 class="pb-2">{{ $serverName }}</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([
+                            <a wire:navigate 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',

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

@@ -15,7 +15,7 @@
         @forelse ($servers as $server)
             @forelse ($server->destinations() as $destination)
                 @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                    <a class="box group"
+                    <a class="box group" wire:navigate
                         href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
                         <div class="flex flex-col mx-6">
                             <div class="box-title">{{ $destination->name }}</div>
@@ -24,7 +24,7 @@
                     </a>
                 @endif
                 @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
-                    <a class="box group"
+                    <a class="box group" wire:navigate
                         href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
                         <div class="flex flex-col mx-6">
                             <div class="box-title">{{ $destination->name }}</div>

resources/views/livewire/project/application/configuration.blade.php

@@ -16,10 +16,9 @@
                 wire:navigate>Advanced</a>
             @if ($application->destination->server->isSwarm())
                 <a class="menu-item"
-                    wire:current.exact="menu-item-active
+                    wire:current.exact="menu-item-active"
                     href="{{ route('project.application.swarm', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"
-                    wire:navigate>Swarm
-                    Configuration</a>
+                    wire:navigate>Swarm Configuration</a>
             @endif
             <a class='menu-item' wire:current.exact="menu-item-active"
                 href="{{ route('project.application.environment-variables', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"

resources/views/livewire/project/application/deployment/index.blade.php

@@ -39,7 +39,7 @@
                     data_get($deployment, 'status') === 'failed',
                 'border-success' => data_get($deployment, 'status') === 'finished',
             ])
-                x-on:click.stop="goto('{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}')">
+                wire:navigate href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}">
                 <div class="flex flex-col justify-start">
                     <div class="flex gap-1">
                         {{ $deployment->created_at }} UTC
@@ -59,7 +59,7 @@
                             @endif
                             @if (data_get($deployment, 'commit'))
                                 <div class="dark:hover:text-white"
-                                    x-on:click.stop="goto('{{ $application->gitCommitLink(data_get($deployment, 'commit')) }}')">
+                                    wire:navigate.prevent href="{{ $application->gitCommitLink(data_get($deployment, 'commit')) }}">
                                     <div class="text-xs underline">
                                         @if ($deployment->commitMessage())
                                             ({{ data_get_str($deployment, 'commit')->limit(7) }} -
@@ -84,7 +84,7 @@
                             @endif
                             @if (data_get($deployment, 'commit'))
                                 <div class="dark:hover:text-white"
-                                    x-on:click.stop="goto('{{ $application->gitCommitLink(data_get($deployment, 'commit')) }}')">
+                                    wire:navigate.prevent href="{{ $application->gitCommitLink(data_get($deployment, 'commit')) }}">
                                     <div class="text-xs underline">
                                         @if ($deployment->commitMessage())
                                             ({{ data_get_str($deployment, 'commit')->limit(7) }} -
@@ -125,9 +125,6 @@
             <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
             <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
             <script>
-                function goto(url) {
-                    window.location.href = url;
-                };
                 let timers = {};
 
                 dayjs.extend(window.dayjs_plugin_utc);

resources/views/livewire/project/application/heading.blade.php

@@ -3,20 +3,20 @@
     <div class="navbar-main">
         <nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
             <a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}"
-                href="{{ route('project.application.configuration', $parameters) }}">
+                wire:navigate href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
             <a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}"
-                href="{{ route('project.application.deployment.index', $parameters) }}">
+                wire:navigate href="{{ route('project.application.deployment.index', $parameters) }}">
                 <button>Deployments</button>
             </a>
             <a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
-                href="{{ route('project.application.logs', $parameters) }}">
+                wire:navigate href="{{ route('project.application.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
             @if (!$application->destination->server->isSwarm())
                 <a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
-                    href="{{ route('project.application.command', $parameters) }}">
+                    wire:navigate href="{{ route('project.application.command', $parameters) }}">
                     <button>Terminal</button>
                 </a>
             @endif

resources/views/livewire/project/database/configuration.blade.php

@@ -20,8 +20,8 @@
                 href="{{ route('project.database.persistent-storage', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"
                 wire:navigate>Persistent Storage</a>
             <a class='menu-item' wire:current.exact="menu-item-active"
-                href="{{ route('project.database.import-backups', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}">Import
-                Backups</a>
+                href="{{ route('project.database.import-backups', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"
+                wire:navigate>Import Backups</a>
             <a class='menu-item' wire:current.exact="menu-item-active"
                 href="{{ route('project.database.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"
                 wire:navigate>Webhooks</a>

resources/views/livewire/project/database/heading.blade.php

@@ -9,16 +9,16 @@
     <div class="navbar-main">
         <nav
             class="flex overflow-x-scroll flex-shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
 
-            <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
-            <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.command', $parameters) }}">
                 <button>Terminal</button>
             </a>
@@ -27,7 +27,7 @@
                     $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMariadb')
-                <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
+                <a wire:navigate class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.database.backup.index', $parameters) }}">
                     <button>Backups</button>
                 </a>

resources/views/livewire/project/database/scheduled-backups.blade.php

@@ -3,6 +3,7 @@
         @forelse($database->scheduledBackups as $backup)
             @if ($type == 'database')
                 <a class="box"
+                    wire:navigate
                     href="{{ route('project.database.backup.execution', [...$parameters, 'backup_uuid' => $backup->uuid]) }}">
                     <div class="flex flex-col">
                         <div>Frequency: {{ $backup->frequency }}
@@ -12,7 +13,7 @@
                     </div>
                 </a>
             @else
-                <div class="box" wire:click="setSelectedBackup('{{ data_get($backup, 'id') }}')">
+                <div class="box" wire:navigate wire:click="setSelectedBackup('{{ data_get($backup, 'id') }}')">
                     <div @class([
                         'border-coollabs' =>
                             data_get($backup, 'id') === data_get($selectedBackup, 'id'),

resources/views/livewire/project/environment-edit.blade.php

@@ -12,7 +12,7 @@
             <ol class="flex flex-wrap items-center gap-y-1">
                 <li class="inline-flex items-center">
                     <div class="flex items-center">
-                        <a class="text-xs truncate lg:text-sm"
+                        <a class="text-xs truncate lg:text-sm" wire:navigate
                             href="{{ route('project.show', ['project_uuid' => $project->uuid]) }}">
                             {{ $project->name }}</a>
                         <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
@@ -25,7 +25,7 @@
                 </li>
                 <li>
                     <div class="flex items-center">
-                        <a class="text-xs truncate lg:text-sm"
+                        <a class="text-xs truncate lg:text-sm" wire:navigate
                             href="{{ route('project.resource.index', ['environment_uuid' => $environment->uuid, 'project_uuid' => $project->uuid]) }}">
                             {{ $environment->name }}
                         </a>

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

@@ -25,8 +25,10 @@
                         </div>
                     </div>
                     <div class="flex items-center justify-center gap-2 pt-4 pb-2 mr-4 text-xs lg:py-0 lg:justify-normal">
-                        <a class="mx-4 font-bold hover:underline"
-                           :href="project.settingsRoute">
+                        <a class="mx-4 font-bold hover:underline" 
+                           wire:navigate 
+                           wire:click.stop
+                           :href="`/project/${project.uuid}/edit`">
                             Settings
                         </a>
                     </div>

resources/views/livewire/project/resource/index.blade.php

@@ -6,15 +6,15 @@
         <div class="flex items-center gap-2">
             <h1>Resources</h1>
             @if ($environment->isEmpty())
-                <a class="button"
+                <a class="button" wire:navigate
                     href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_uuid' => data_get($environment, 'uuid')]) }}">
                     Clone
                 </a>
             @else
                 <a href="{{ route('project.resource.create', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => data_get($environment, 'uuid')]) }}"
-                    class="button">+
+                    wire:navigate class="button">+
                     New</a>
-                <a class="button"
+                <a class="button" wire:navigate
                     href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_uuid' => data_get($environment, 'uuid')]) }}">
                     Clone
                 </a>
@@ -24,7 +24,7 @@
         <nav class="flex pt-2 pb-6">
             <ol class="flex items-center">
                 <li class="inline-flex items-center">
-                    <a class="text-xs truncate lg:text-sm"
+                    <a class="text-xs truncate lg:text-sm" wire:navigate
                         href="{{ route('project.show', ['project_uuid' => data_get($parameters, 'project_uuid')]) }}">
                         {{ $project->name }}</a>
                 </li>
@@ -44,7 +44,7 @@
         </nav>
     </div>
     @if ($environment->isEmpty())
-        <a href="{{ route('project.resource.create', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => data_get($environment, 'uuid')]) }}"
+        <a wire:navigate href="{{ route('project.resource.create', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => data_get($environment, 'uuid')]) }}"
             class="items-center justify-center box">+ Add New Resource</a>
     @else
         <div x-data="searchComponent()">
@@ -61,7 +61,7 @@
                 class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
                 <template x-for="item in filteredApplications" :key="item.uuid">
                     <span>
-                        <a class="h-24 box group" :href="item.hrefLink">
+                        <a class="h-24 box group" wire:navigate :href="item.hrefLink">
                             <div class="flex flex-col w-full">
                                 <div class="flex gap-2 px-4">
                                     <div class="pb-2 truncate box-title" x-text="item.name"></div>
@@ -90,9 +90,17 @@
                         <div
                             class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
+                                <a :href="`/tags/${tag.name}`" 
+                                   wire:navigate 
+                                   class="tag" 
+                                   x-text="tag.name">
+                                </a>
                             </template>
-                            <div class="add-tag" @click.prevent="goto(item)">Add tag</div>
+                            <a :href="`${item.hrefLink}/tags`" 
+                               wire:navigate 
+                               class="add-tag">
+                                Add tag
+                            </a>
                         </div>
                     </span>
                 </template>
@@ -104,7 +112,7 @@
                 class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
                 <template x-for="item in filteredDatabases" :key="item.uuid">
                     <span>
-                        <a class="h-24 box group" :href="item.hrefLink">
+                        <a class="h-24 box group" wire:navigate :href="item.hrefLink">
                             <div class="flex flex-col w-full">
                                 <div class="flex gap-2 px-4">
                                     <div class="pb-2 truncate box-title" x-text="item.name"></div>
@@ -133,9 +141,17 @@
                         <div
                             class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
+                                <a :href="`/tags/${tag.name}`" 
+                                   wire:navigate 
+                                   class="tag" 
+                                   x-text="tag.name">
+                                </a>
                             </template>
-                            <div class="add-tag" @click.prevent="goto(item)">Add tag</div>
+                            <a :href="`${item.hrefLink}/tags`" 
+                               wire:navigate 
+                               class="add-tag">
+                                Add tag
+                            </a>
                         </div>
                     </span>
                 </template>
@@ -147,7 +163,7 @@
                 class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
                 <template x-for="item in filteredServices" :key="item.uuid">
                     <span>
-                        <a class="h-24 box group" :href="item.hrefLink">
+                        <a class="h-24 box group" wire:navigate :href="item.hrefLink">
                             <div class="flex flex-col w-full">
                                 <div class="flex gap-2 px-4">
                                     <div class="pb-2 truncate box-title" x-text="item.name"></div>
@@ -176,9 +192,17 @@
                         <div
                             class="flex flex-wrap gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
                             <template x-for="tag in item.tags">
-                                <div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
+                                <a :href="`/tags/${tag.name}`" 
+                                   wire:navigate 
+                                   class="tag" 
+                                   x-text="tag.name">
+                                </a>
                             </template>
-                            <div class="add-tag" @click.prevent="goto(item)">Add tag</div>
+                            <a :href="`${item.hrefLink}/tags`" 
+                               wire:navigate 
+                               class="add-tag">
+                                Add tag
+                            </a>
                         </div>
                     </span>
                 </template>
@@ -206,13 +230,6 @@
             dragonflies: @js($dragonflies),
             clickhouses: @js($clickhouses),
             services: @js($services),
-            gotoTag(tag) {
-                window.location.href = '/tags/' + tag;
-            },
-            goto(item) {
-                const hrefLink = item.hrefLink;
-                window.location.href = `${hrefLink}/tags`;
-            },
             filterAndSort(items) {
                 if (this.search === '') {
                     return Object.values(items).sort(sortFn);

resources/views/livewire/project/service/configuration.blade.php

@@ -95,7 +95,8 @@
                                 </div>
                                 <div class="flex items-center px-4">
                                     <a class="mx-4 text-xs font-bold hover:underline"
-                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $application->uuid]) }}">
+                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $application->uuid]) }}"
+                                        wire:navigate>
                                         Settings
                                     </a>
                                     @if (str($application->status)->contains('running'))
@@ -143,12 +144,14 @@
                                 <div class="flex items-center px-4">
                                     @if ($database->isBackupSolutionAvailable())
                                         <a class="mx-4 text-xs font-bold hover:underline"
-                                            href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}#backups">
+                                            href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}#backups"
+                                            wire:navigate>
                                             Backups
                                         </a>
                                     @endif
                                     <a class="mx-4 text-xs font-bold hover:underline"
-                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}">
+                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}"
+                                        wire:navigate>
                                         Settings
                                     </a>
                                     @if (str($database->status)->contains('running'))

resources/views/livewire/project/service/index.blade.php

@@ -4,15 +4,16 @@
         <div class="flex flex-col items-start gap-2 min-w-fit">
             <a class="menu-item"
                 class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}"
-                href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
+                wire:navigate href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                 <button><- Back</button>
             </a>
             <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'; if(window.location.search) window.location.search = ''"
-                href="#">General</a>
+                wire:navigate href="#">General</a>
             @if ($serviceDatabase?->isBackupSolutionAvailable())
                 <a :class="activeTab === 'backups' && 'menu-item-active'" class="menu-item"
-                    @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
+                    @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'"
+                    wire:navigate href="#">Backups</a>
             @endif
         </div>
         <div class="w-full">

resources/views/livewire/project/service/navbar.blade.php

@@ -10,15 +10,15 @@
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data">
         <nav class="flex flex-shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
-            <a class="{{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
-            <a class="{{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.command', $parameters) }}">
                 <button>Terminal</button>
             </a>

resources/views/livewire/project/shared/scheduled-task/all.blade.php

@@ -12,7 +12,7 @@
     <div class="flex flex-col flex-wrap gap-2 pt-4">
         @forelse($resource->scheduled_tasks as $task)
             @if ($resource->type() == 'application')
-                <a class="box"
+                <a class="box" wire:navigate
                     href="{{ route('project.application.scheduled-tasks', [...$parameters, 'task_uuid' => $task->uuid]) }}">
                     <span class="flex flex-col">
                         <span class="text-lg font-bold">{{ $task->name }}
@@ -27,7 +27,7 @@
                     </span>
                 </a>
             @elseif ($resource->type() == 'service')
-                <a class="box"
+                <a class="box" wire:navigate
                     href="{{ route('project.service.scheduled-tasks', [...$parameters, 'task_uuid' => $task->uuid]) }}">
                     <span class="flex flex-col">
                         <span class="text-lg font-bold">{{ $task->name }}

resources/views/livewire/project/show.blade.php

@@ -17,10 +17,10 @@
     <div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($project->environments->sortBy('created_at') as $environment)
-            <div class="gap-2 border border-transparent cursor-pointer box group"
-                wire:click="navigateToEnvironment('{{ $project->uuid }}', '{{ $environment->uuid }}')">
+            <div class="gap-2 border border-transparent box group">
                 <div class="flex flex-1 mx-6">
                     <a class="flex flex-col justify-center flex-1"
+                        wire:navigate
                         href="{{ route('project.resource.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid]) }}">
                         <div class="font-bold dark:text-white"> {{ $environment->name }}</div>
                         <div class="description">
@@ -28,6 +28,7 @@
                     </a>
                     <div class="flex items-center justify-center gap-2 text-xs">
                         <a class="font-bold hover:underline"
+                            wire:navigate
                             href="{{ route('project.environment.edit', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid]) }}">
                             Settings
                         </a>

resources/views/livewire/security/private-key/index.blade.php

@@ -19,6 +19,7 @@
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($privateKeys as $key)
             <a class="box group"
+                wire:navigate
                 href="{{ route('security.private-key.show', ['private_key_uuid' => data_get($key, 'uuid')]) }}">
                 <div class="flex flex-col mx-6">
                     <div class="box-title">

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

@@ -11,7 +11,7 @@
     <div class="subtitle">All your servers are here.</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($servers as $server)
-            <a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
+            <a wire:navigate href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
                 @class([
                     'gap-2 border cursor-pointer box group',
                     'border-transparent' =>
@@ -54,10 +54,5 @@
                 <span>{{ $error }}</span>
             </div>
         @endisset
-        <script>
-            function goto(uuid) {
-                window.location.href = '/server/' + uuid;
-            }
-        </script>
     </div>
 </div>

resources/views/livewire/server/proxy/deploy.blade.php

@@ -14,7 +14,7 @@
                         $traefikDashboardAvailable &&
                         $server->proxyType() === ProxyTypes::TRAEFIK->value)
                     <button>
-                        <a target="_blank" href="http://{{ $serverIp }}:8080">
+                        <a wire:navigate target="_blank" href="http://{{ $serverIp }}:8080">
                             Traefik Dashboard
                             <x-external-link />
                         </a>

resources/views/livewire/shared-variables/environment/index.blade.php

@@ -11,7 +11,7 @@
             <h2>{{ data_get($project, 'name') }}</h2>
             <div class="pt-0 pb-3">{{ data_get($project, 'description') }}</div>
             @forelse ($project->environments as $environment)
-                <a class="box group"
+                <a class="box group"  wire:navigate
                     href="{{ route('shared-variables.environment.show', [
                         'project_uuid' => $project->uuid, 
                         'environment_uuid' => $environment->uuid

resources/views/livewire/shared-variables/index.blade.php

@@ -8,19 +8,19 @@
     <div class="subtitle">Set Team / Project / Environment wide variables.</div>
 
     <div class="flex flex-col gap-2">
-        <a class="box group" href="{{ route('shared-variables.team.index') }}">
+        <a wire:navigate class="box group" href="{{ route('shared-variables.team.index') }}">
             <div class="flex flex-col justify-center mx-6">
                 <div class="box-title">Team wide</div>
                 <div class="box-description">Usable for all resources in a team.</div>
             </div>
         </a>
-        <a class="box group" href="{{ route('shared-variables.project.index') }}">
+        <a wire:navigate class="box group" href="{{ route('shared-variables.project.index') }}">
             <div class="flex flex-col justify-center mx-6">
                 <div class="box-title">Project wide</div>
                 <div class="box-description">Usable for all resources in a project.</div>
             </div>
         </a>
-        <a class="box group" href="{{ route('shared-variables.environment.index') }}">
+        <a wire:navigate class="box group" href="{{ route('shared-variables.environment.index') }}">
             <div class="flex flex-col justify-center mx-6">
                 <div class="box-title">Environment wide</div>
                 <div class="box-description">Usable for all resources in an environment.</div>

resources/views/livewire/shared-variables/project/index.blade.php

@@ -9,6 +9,7 @@
     <div class="flex flex-col gap-2">
         @forelse ($projects as $project)
             <a class="box group"
+                wire:navigate
                 href="{{ route('shared-variables.project.show', ['project_uuid' => data_get($project, 'uuid')]) }}">
                 <div class="flex flex-col justify-center mx-6 ">
                     <div class="box-title">{{ $project->name }}</div>

resources/views/livewire/source/github/change.blade.php

@@ -167,6 +167,7 @@
                                                         </td>
                                                         <td class="px-5 py-4 text-sm whitespace-nowrap"><a
                                                                 class=""
+                                                                wire:navigate
                                                                 href="{{ $resource->link() }}">{{ $resource->name }}
                                                                 <x-internal-link /></a>
                                                         </td>

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

@@ -11,7 +11,7 @@
     <div class="subtitle">S3 storages for backups.</div>
     <div class="grid gap-2 lg:grid-cols-2">
         @forelse ($s3 as $storage)
-            <div x-data x-on:click="goto('{{ $storage->uuid }}')" @class(['gap-2 border cursor-pointer box group border-transparent'])>
+            <a href="/storages/{{ $storage->uuid }}" wire:navigate @class(['gap-2 border cursor-pointer box group border-transparent'])>
                 <div class="flex flex-col mx-6">
                     <div class="box-title">
                         {{ $storage->name }}
@@ -23,16 +23,11 @@
                         <div class="text-red-500">Not Usable</div>
                     @endif
                 </div>
-            </div>
+            </a>
         @empty
             <div>
                 <div>No storage found.</div>
             </div>
         @endforelse
     </div>
-    <script>
-        function goto(uuid) {
-            window.location.href = '/storages/' + uuid;
-        }
-    </script>
 </div>

resources/views/livewire/tags/deployments.blade.php

@@ -3,7 +3,7 @@
          <h4 class="py-4">{{ $server_name }}</h4>
          <div class="grid grid-cols-1 gap-2">
              @foreach ($deployments as $deployment)
-                 <a href="{{ data_get($deployment, 'deployment_url') }}" @class([
+                 <a wire:navigate href="{{ data_get($deployment, 'deployment_url') }}" @class([
                      'box-without-bg-without-border dark:bg-coolgray-100 bg-white gap-2 cursor-pointer group border-l-2',
                      'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
                      'dark:border-yellow-500' =>

resources/views/livewire/tags/show.blade.php

@@ -7,7 +7,7 @@
     </div>
     <div class="flex flex-wrap gap-2 ">
         @forelse ($tags as $oneTag)
-            <a :class="{{ $tag?->id == $oneTag->id }} && 'dark:bg-coollabs hover:bg-coollabs-100'"
+            <a wire:navigate :class="{{ $tag?->id == $oneTag->id }} && 'dark:bg-coollabs hover:bg-coollabs-100'"
                 class="w-64 box-without-bg dark:bg-coolgray-100 dark:text-white font-bold"
                 href="{{ route('tags.show', ['tagName' => $oneTag->name]) }}">{{ $oneTag->name }}</a>
         @empty
@@ -34,7 +34,7 @@
             <div class="grid grid-cols-1 gap-2 pt-4 lg:grid-cols-2 xl:grid-cols-3">
                 @if (isset($applications) && count($applications) > 0)
                     @foreach ($applications as $application)
-                        <a href="{{ $application->link() }}" class="box group">
+                        <a wire:navigate href="{{ $application->link() }}" class="box group">
                             <div class="flex flex-col">
                                 <div class="box-title">
                                     {{ $application->project()->name }}/{{ $application->environment->name }}
@@ -47,7 +47,7 @@
                 @endif
                 @if (isset($services) && count($services) > 0)
                     @foreach ($services as $service)
-                        <a href="{{ $service->link() }}" class="flex flex-col box group">
+                        <a wire:navigate href="{{ $service->link() }}" class="flex flex-col box group">
                             <div class="flex flex-col">
                                 <div class="box-title">
                                     {{ $service->project()->name }}/{{ $service->environment->name }}
@@ -70,7 +70,7 @@
                     <h4 class="py-4">{{ $serverName }}</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([
+                            <a wire:navigate 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',

resources/views/source/all.blade.php

@@ -13,6 +13,7 @@
         @forelse ($sources as $source)
             @if ($source->getMorphClass() === 'App\Models\GithubApp')
                 <a class="flex gap-4 text-center hover:no-underline box group"
+                    wire:navigate
                     href="{{ route('source.github.show', ['github_app_uuid' => data_get($source, 'uuid')]) }}">
                     <x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
                     <div class="text-left group-hover:dark:text-white">
@@ -25,6 +26,7 @@
             @endif
             @if ($source->getMorphClass() === 'App\Models\GitlabApp')
                 <a class="flex gap-4 text-center hover:no-underline box group"
+                    wire:navigate
                     href="{{ route('source.gitlab.show', ['gitlab_app_uuid' => data_get($source, 'uuid')]) }}">
                     <x-git-icon class="dark:text-white w-9 h-9" git="{{ $source->getMorphClass() }}" />
                     <div class="text-left group-hover:dark:text-white">