mirror of
https://github.com/tiennm99/coolify.git
synced 2026-04-18 15:20:40 +00:00
Add toggleable wire:navigate SPA navigation with prefetching
Implement instance-wide SPA navigation toggle that enables smooth page transitions with prefetching on hover. Excludes terminal links which require full page lifecycle for WebSocket connections. Adds defensive checks to global-search component for SPA navigation compatibility. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -8,27 +8,27 @@
|
||||
|
||||
<div class="flex flex-col h-full gap-8 sm:flex-row">
|
||||
<div class="flex flex-col items-start gap-2 min-w-fit">
|
||||
<a class='menu-item' wire:current.exact="menu-item-active"
|
||||
<a class='menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.configuration', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">General</a>
|
||||
<a class='menu-item' wire:current.exact="menu-item-active"
|
||||
<a class='menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.advanced', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Advanced</a>
|
||||
@if ($application->destination->server->isSwarm())
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.swarm', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Swarm
|
||||
Configuration</a>
|
||||
@endif
|
||||
<a class='menu-item' wire:current.exact="menu-item-active"
|
||||
<a class='menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.environment-variables', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Environment
|
||||
Variables</a>
|
||||
<a class='menu-item' wire:current.exact="menu-item-active"
|
||||
<a class='menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.persistent-storage', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Persistent
|
||||
Storage</a>
|
||||
@if ($application->git_based())
|
||||
<a class='menu-item' wire:current.exact="menu-item-active"
|
||||
<a class='menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.source', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Git
|
||||
Source</a>
|
||||
@endif
|
||||
<a class="menu-item flex items-center gap-2" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item flex items-center gap-2" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.servers', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Servers
|
||||
@if ($application->server_status == false)
|
||||
<span title="One or more servers are unreachable or misconfigured.">
|
||||
@@ -46,33 +46,33 @@
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Scheduled
|
||||
Tasks</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Webhooks</a>
|
||||
@if ($application->deploymentType() !== 'deploy_key')
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.preview-deployments', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Preview
|
||||
Deployments</a>
|
||||
@endif
|
||||
@if ($application->build_pack !== 'dockercompose')
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.healthcheck', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Healthcheck</a>
|
||||
@endif
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.rollback', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Rollback</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.resource-limits', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Resource
|
||||
Limits</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.resource-operations', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Resource
|
||||
Operations</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.metrics', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Metrics</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.tags', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Tags</a>
|
||||
<a class="menu-item" wire:current.exact="menu-item-active"
|
||||
<a class="menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
|
||||
href="{{ route('project.application.danger', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Danger
|
||||
Zone</a>
|
||||
</div>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
'border-error' => data_get($deployment, 'status') === 'failed',
|
||||
'border-success' => data_get($deployment, 'status') === 'finished',
|
||||
])>
|
||||
<a href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}" class="block">
|
||||
<a href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}" {{ wireNavigate() }} class="block">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span @class([
|
||||
|
||||
@@ -236,11 +236,7 @@
|
||||
@endif
|
||||
<div class="flex flex-col gap-2 pt-6 pb-10">
|
||||
@if ($application->build_pack === 'dockercompose')
|
||||
@can('update', $application)
|
||||
<div class="flex flex-col gap-2" x-init="$wire.dispatch('loadCompose', true)">
|
||||
@else
|
||||
<div class="flex flex-col gap-2">
|
||||
@endcan
|
||||
<div class="flex flex-col gap-2" @can('update', $application) x-init="$wire.dispatch('loadCompose', true)" @endcan>
|
||||
<div x-data="{
|
||||
baseDir: '{{ $application->base_directory }}',
|
||||
composeLocation: '{{ $application->docker_compose_location }}',
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
|
||||
<div class="navbar-main">
|
||||
<nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
|
||||
<a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}"
|
||||
<a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
|
||||
href="{{ route('project.application.configuration', $parameters) }}">
|
||||
Configuration
|
||||
</a>
|
||||
<a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}"
|
||||
<a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
|
||||
href="{{ route('project.application.deployment.index', $parameters) }}">
|
||||
Deployments
|
||||
</a>
|
||||
<a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
|
||||
<a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
|
||||
href="{{ route('project.application.logs', $parameters) }}">
|
||||
<div class="flex items-center gap-1">
|
||||
Logs
|
||||
|
||||
@@ -94,12 +94,12 @@
|
||||
</a>
|
||||
@if (count($parameters) > 0)
|
||||
|
|
||||
<a
|
||||
<a {{ wireNavigate() }}
|
||||
href="{{ route('project.application.deployment.index', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
|
||||
Deployment Logs
|
||||
</a>
|
||||
|
|
||||
<a
|
||||
<a {{ wireNavigate() }}
|
||||
href="{{ route('project.application.logs', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
|
||||
Application Logs
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user