tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-15 00:17:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): unify resource nav sidebars and polish project layouts

Browse Source 
Extract application/database/service configuration sidebars and
unified headings; improve clone-to-environment, embedded deployments,
storage actions, OAuth icons, terminal, and shared form components.
This commit is contained in:
Andras Bacsai committed 2026-08-05 17:56:59 +02:00
1 parent 2291c3fa1c
commit 5de6f97256
85 files changed
+2087 -981
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/components/application/configuration-sidebar.blade.php
+286
View File
@@ -0,0 +1,286 @@
@props(['application', 'currentRoute', 'flush' => false])
@php
$applicationRouteParameters = [
'project_uuid' => $application->environment->project->uuid,
'environment_uuid' => $application->environment->uuid,
'application_uuid' => $application->uuid,
];
$configurationMenuItems = [
[
'label' => 'General',
'route' => 'project.application.configuration',
'active' => $currentRoute === 'project.application.configuration',
],
[
'label' => 'Domains',
'route' => 'project.application.domains',
'active' => $currentRoute === 'project.application.domains',
],
[
'label' => 'Advanced',
'route' => 'project.application.advanced',
'active' => $currentRoute === 'project.application.advanced',
],
[
'label' => 'Swarm',
'route' => 'project.application.swarm',
'active' => $currentRoute === 'project.application.swarm',
'visible' => $application->destination->server->isSwarm(),
],
[
'label' => 'Environment Variables',
'route' => 'project.application.environment-variables',
'active' => $currentRoute === 'project.application.environment-variables',
],
[
'label' => 'Persistent Storage',
'route' => 'project.application.persistent-storage',
'active' => $currentRoute === 'project.application.persistent-storage',
],
[
'label' => 'Backups',
'route' => 'project.application.backup.index',
'active' => str($currentRoute)->startsWith('project.application.backup'),
],
[
'label' => 'Terminal',
'route' => 'project.application.command',
'active' => $currentRoute === 'project.application.command',
'navigate' => false,
'visible' => ! $application->destination->server->isSwarm() && auth()->user()?->can('canAccessTerminal'),
],
[
'label' => 'Deployment',
'route' => 'project.application.deployment.index',
'active' => str($currentRoute)->startsWith('project.application.deployment'),
],
[
'label' => 'Runtime',
'route' => 'project.application.logs',
'active' => $currentRoute === 'project.application.logs',
],
[
'label' => 'Git Source',
'route' => 'project.application.source',
'active' => $currentRoute === 'project.application.source',
'visible' => $application->git_based(),
],
[
'label' => 'Servers',
'route' => 'project.application.servers',
'active' => $currentRoute === 'project.application.servers',
'badge' => true,
],
[
'label' => 'Scheduled Tasks',
'route' => 'project.application.scheduled-tasks.show',
'active' => str($currentRoute)->startsWith('project.application.scheduled-tasks'),
],
[
'label' => 'Webhooks',
'route' => 'project.application.webhooks',
'active' => $currentRoute === 'project.application.webhooks',
],
[
'label' => 'Preview Deployments',
'route' => 'project.application.preview-deployments',
'active' => $currentRoute === 'project.application.preview-deployments',
'visible' => $application->git_based() || $application->build_pack === 'dockerimage',
],
[
'label' => 'Healthcheck',
'route' => 'project.application.healthcheck',
'active' => $currentRoute === 'project.application.healthcheck',
'visible' => $application->build_pack !== 'dockercompose',
],
[
'label' => 'Rollback',
'route' => 'project.application.rollback',
'active' => $currentRoute === 'project.application.rollback',
],
[
'label' => 'Resource Limits',
'route' => 'project.application.resource-limits',
'active' => $currentRoute === 'project.application.resource-limits',
],
[
'label' => 'Resource Operations',
'route' => 'project.application.resource-operations',
'active' => $currentRoute === 'project.application.resource-operations',
],
[
'label' => 'Metrics',
'route' => 'project.application.metrics',
'active' => $currentRoute === 'project.application.metrics',
],
[
'label' => 'Tags',
'route' => 'project.application.tags',
'active' => $currentRoute === 'project.application.tags',
],
[
'label' => 'Danger Zone',
'route' => 'project.application.danger',
'active' => $currentRoute === 'project.application.danger',
],
];
$configurationMenuItems = array_values(array_filter(
$configurationMenuItems,
fn (array $item): bool => $item['visible'] ?? true,
));
// Icons follow the main sidebar's reicon set
$menuIcons = [
'General' => 'settings',
'Domains' => 'globe',
'Advanced' => 'grid',
'Swarm' => 'destinations',
'Environment Variables' => 'variables',
'Persistent Storage' => 'storages',
'Backups' => 'database',
'Terminal' => 'browser-terminal',
'Deployment' => 'time-back',
'Runtime' => 'unordered-list',
'Git Source' => 'sources',
'Servers' => 'servers',
'Scheduled Tasks' => 'calendar',
'Webhooks' => 'notifications',
'Preview Deployments' => 'eye',
'Healthcheck' => 'feedback',
'Rollback' => 'time-back',
'Resource Limits' => 'cpu',
'Resource Operations' => 'server-update',
'Metrics' => 'graph',
'Tags' => 'tags',
'Danger Zone' => 'shield-alert',
];
// Discord-style groups for the settings sidebar
$menuGroups = [
'Settings' => ['General', 'Domains', 'Advanced', 'Swarm', 'Environment Variables', 'Persistent Storage', 'Backups'],
'Build & deploy' => ['Git Source', 'Servers', 'Healthcheck'],
'Automation' => ['Scheduled Tasks', 'Webhooks', 'Preview Deployments'],
'Logs' => ['Deployment', 'Runtime'],
'Operations' => ['Terminal', 'Rollback', 'Resource Limits', 'Resource Operations', 'Metrics', 'Tags', 'Danger Zone'],
];
$groupedMenuItems = collect($menuGroups)
->map(fn (array $labels) => collect($configurationMenuItems)->whereIn('label', $labels)->values())
->filter(fn ($items) => $items->isNotEmpty());
// In-page sections (cards) shown as sub-items under the active page
$isComposeApp = $application->build_pack === 'dockercompose';
$pageSections = [
'project.application.configuration' => array_values(array_filter([
['id' => 'application-details-section', 'label' => 'Application details'],
['id' => 'public-access-section', 'label' => 'Public access'],
['id' => 'build-pipeline-section', 'label' => 'Build pipeline'],
$isComposeApp ? null : ['id' => 'container-image-section', 'label' => 'Container image'],
$isComposeApp ? null : ['id' => 'networking-section', 'label' => 'Networking'],
$isComposeApp ? null : ['id' => 'runtime-section', 'label' => 'Runtime'],
$isComposeApp ? null : ['id' => 'security-section', 'label' => 'Security'],
['id' => 'deployment-lifecycle-section', 'label' => 'Deployment lifecycle'],
$isComposeApp ? null : ['id' => 'container-labels-section', 'label' => 'Container labels'],
])),
'project.application.advanced' => array_values(array_filter([
['id' => 'advanced-build-section', 'label' => 'Build'],
['id' => 'advanced-container-section', 'label' => 'Container'],
$application->git_based() ? ['id' => 'advanced-deployment-section', 'label' => 'Deployment'] : null,
$application->git_based() ? ['id' => 'advanced-git-section', 'label' => 'Git'] : null,
$isComposeApp ? ['id' => 'advanced-compose-section', 'label' => 'Docker compose'] : null,
['id' => 'advanced-proxy-section', 'label' => 'Proxy'],
['id' => 'advanced-operations-section', 'label' => 'Operations'],
['id' => 'advanced-logs-section', 'label' => 'Logs'],
$isComposeApp ? null : ['id' => 'advanced-gpu-section', 'label' => 'GPU'],
])),
'project.application.webhooks' => [
['id' => 'deploy-webhook-section', 'label' => 'Deploy webhook'],
['id' => 'manual-git-webhooks-section', 'label' => 'Manual Git webhooks'],
],
'project.application.preview-deployments' => array_values(array_filter([
['id' => 'preview-template-section', 'label' => 'URL template'],
$application->is_github_based()
? ['id' => 'preview-pull-requests-section', 'label' => 'Pull requests']
: null,
$application->build_pack === 'dockerimage'
? ['id' => 'manual-preview-section', 'label' => 'Manual preview']
: null,
['id' => 'preview-deployments-section', 'label' => 'Deployments'],
])),
'project.application.healthcheck' => [
['id' => 'healthcheck-configuration-section', 'label' => 'Configuration'],
[
'id' => $application->health_check_type === 'cmd'
? 'healthcheck-command-section'
: 'healthcheck-request-section',
'label' => $application->health_check_type === 'cmd' ? 'Command' : 'HTTP request',
],
['id' => 'healthcheck-timing-section', 'label' => 'Timing and retries'],
],
'project.application.rollback' => [
['id' => 'rollback-retention-section', 'label' => 'Image retention'],
['id' => 'rollback-images-section', 'label' => 'Available images'],
],
'project.application.resource-limits' => [
['id' => 'cpu-limits-section', 'label' => 'CPU'],
['id' => 'memory-limits-section', 'label' => 'Memory'],
],
'project.application.resource-operations' => [
['id' => 'clone-destination-section', 'label' => 'Clone destination'],
['id' => 'clone-environment-section', 'label' => 'Clone environment'],
['id' => 'move-resource-section', 'label' => 'Move resource'],
],
];
@endphp
<aside @class([
'application-settings-navigation min-w-0 xl:self-start',
'is-flush' => $flush,
])>
<nav aria-label="Configuration sections"
class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
@foreach ($groupedMenuItems as $groupLabel => $groupItems)
@unless ($loop->first)
<div class="hidden xl:block my-2 border-t border-neutral-200 dark:border-white/[0.06]" aria-hidden="true"></div>
@endunless
<div class="nav-section hidden xl:block">{{ $groupLabel }}</div>
@foreach ($groupItems as $menuItem)
<a wire:key="application-settings-link-{{ str($menuItem['label'])->slug() }}"
@class([
'menu-item',
'menu-item-active' => $menuItem['active'],
])
@if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
href="{{ route($menuItem['route'], $applicationRouteParameters) }}">
<x-reicon :name="$menuIcons[$menuItem['label']] ?? 'settings'" class="menu-item-icon" />
<span class="menu-item-label">{{ $menuItem['label'] }}</span>
@if ($menuItem['badge'] ?? false)
<span class="shrink-0">
<livewire:project.application.server-status-badge :application="$application" />
</span>
@endif
</a>
@if ($menuItem['active'] && count($pageSections[$menuItem['route']] ?? []) >= 4)
<div class="nav-children hidden flex-col gap-0.5 py-1 xl:flex"
x-data="{
activeSection: '',
scrollToSection(id) {
this.activeSection = id;
window.scrollToSettingsSection?.(id);
},
}">
@foreach ($pageSections[$menuItem['route']] as $section)
<button type="button" class="menu-subitem"
:class="activeSection === '{{ $section['id'] }}' && 'menu-subitem-active'"
@click="scrollToSection('{{ $section['id'] }}')">
<span class="menu-item-label text-left">{{ $section['label'] }}</span>
</button>
@endforeach
</div>
@endif
@endforeach
@endforeach
</nav>
</aside>
resources/views/components/application/settings-section.blade.php
+4 -9
View File
@@ -6,17 +6,12 @@
])
<section {{ $attributes->merge(['class' => 'application-settings-section']) }}>
<header @class(['items-start!' => filled($description)])>
<header @class(['items-start!' => filled($description ?? $helper)])>
<div class="min-w-0 py-0.5">
<div class="flex items-center gap-2">
<h3>{{ $title }}</h3>
@if ($helper)
<x-helper :helper="$helper" />
@endif
</div>
@if (filled($description))
<h3>{{ $title }}</h3>
@if (filled($description ?? $helper))
<p class="mt-0.5 text-xs leading-4 text-neutral-500 dark:text-[var(--coollabs-subtle)]">
{{ $description }}
{!! $description ?? $helper !!}
</p>
@endif
</div>
resources/views/components/applications/links.blade.php
+18 -19
View File
@@ -1,3 +1,5 @@
@props(['application', 'fullWidth' => false])
@php
$hasLinks =
(data_get($application, 'fqdn') ||
@@ -8,21 +10,25 @@
data_get($application, 'ports_mappings_array')) &&
data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true;
$linkItemClasses =
'flex items-center gap-2 px-3 h-8 text-[13px] transition-colors text-neutral-600 dark:text-fg-dim hover:bg-neutral-100 dark:hover:bg-white/[0.06] hover:text-black dark:hover:text-fg';
$linkItemClasses = 'listbox-option justify-start! gap-2.5!';
@endphp
<div class="relative" x-data="{ open: false }" @keydown.escape.window="open = false">
<div @class(['relative', 'w-full' => $fullWidth]) x-data="{ open: false }" @keydown.escape.window="open = false">
<button type="button" @click="open = !open" @click.outside="open = false" title="Open application links"
class="app-tab shrink-0 gap-1">
Links
<svg class="size-3.5 shrink-0 opacity-60" viewBox="0 0 24 24" fill="none">
<path d="M8 9l4-4 4 4M8 15l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
@class([
'app-tab shrink-0 gap-1' => !$fullWidth,
'button w-full justify-between' => $fullWidth,
])>
<span class="inline-flex items-center gap-2">
<x-reicon name="external-link" class="size-3.5 shrink-0 opacity-70" />
Links
</span>
<span class="inline-flex transition-transform" :class="open && 'rotate-180'">
<x-reicon name="chevron-down" class="size-3 opacity-55" />
</span>
</button>
<div x-show="open" x-cloak x-transition.opacity.duration.120ms
class="absolute right-0 z-[90] mt-2 min-w-60 max-w-96 max-h-80 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1.5 shadow-modal scrollbar dark:border-white/10 dark:bg-raised md:left-0 md:right-auto">
<div x-show="open" x-cloak x-transition.origin.top.right
class="listbox-panel top-full! right-0! left-auto! mt-1! min-w-60! max-w-96!" role="menu">
@if ($hasLinks)
@if (data_get($application, 'gitBrancLocation'))
<a target="_blank" class="{{ $linkItemClasses }}" href="{{ $application->gitBranchLocation }}">
@@ -35,7 +41,6 @@
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="{{ $linkItemClasses }}" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">{{ getFqdnWithoutPort($domain) }}</span>
</a>
@endforeach
@@ -45,7 +50,6 @@
@if (data_get($application, 'fqdn'))
@foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
<a class="{{ $linkItemClasses }}" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">{{ getFqdnWithoutPort($fqdn) }}</span>
</a>
@endforeach
@@ -58,7 +62,6 @@
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="{{ $linkItemClasses }}" target="_blank"
href="{{ getFqdnWithoutPort($domain) }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">PR{{ data_get($preview, 'pull_request_id') }} | {{ getFqdnWithoutPort($domain) }}</span>
</a>
@endforeach
@@ -70,7 +73,6 @@
@if (data_get($preview, 'fqdn'))
<a class="{{ $linkItemClasses }}" target="_blank"
href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">PR{{ data_get($preview, 'pull_request_id') }} | {{ data_get($preview, 'fqdn') }}</span>
</a>
@endif
@@ -82,20 +84,17 @@
@if ($application->destination->server->id === 0)
<a class="{{ $linkItemClasses }}" target="_blank"
href="http://localhost:{{ explode(':', $port)[0] }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">Port {{ $port }}</span>
</a>
@else
<a class="{{ $linkItemClasses }}" target="_blank"
href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}</span>
</a>
@if (count($application->additional_servers) > 0)
@foreach ($application->additional_servers as $server)
<a class="{{ $linkItemClasses }}" target="_blank"
href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">{{ $server->ip }}:{{ explode(':', $port)[0] }}</span>
</a>
@endforeach
@@ -104,7 +103,7 @@
@endforeach
@endif
@else
<div class="px-3 py-1.5 text-[13px] text-neutral-500 dark:text-fg-dim">No links available</div>
<div class="listbox-option justify-start! cursor-default!">No links available</div>
@endif
</div>
</div>
resources/views/components/backup-sidebar.blade.php
+7 -3
View File
@@ -31,7 +31,7 @@
'danger' => 'project.service.volume-backups.danger',
],
default => [
'back' => 'project.database.backup.index',
'back' => 'project.database.configuration',
'general' => 'project.database.backup.execution',
's3' => 'project.database.backup.s3',
'retention' => 'project.database.backup.retention',
@@ -47,15 +47,19 @@
['key' => 'executions', 'label' => 'Executions', 'icon' => 'browser-terminal'],
['key' => 'danger', 'label' => 'Danger Zone', 'icon' => 'shield-alert'],
];
$backLabel = $context === 'database' ? 'Back to database' : 'Back to backups';
$backParameters = $context === 'database'
? collect($parameters)->except('backup_uuid')->all()
: $parameters;
@endphp
<aside class="application-settings-navigation min-w-0 xl:self-start">
<nav aria-label="Backup settings"
class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
<div class="nav-section hidden xl:block">Backup</div>
<a class="menu-item" {{ wireNavigate() }} href="{{ route($routes['back'], $parameters) }}">
<a class="menu-item" {{ wireNavigate() }} href="{{ route($routes['back'], $backParameters) }}">
<x-reicon name="logout" class="menu-item-icon rotate-180" />
<span class="menu-item-label">Back to backups</span>
<span class="menu-item-label">{{ $backLabel }}</span>
</a>
@foreach ($items as $item)
resources/views/components/database/configuration-sidebar.blade.php
+64
View File
@@ -0,0 +1,64 @@
@props(['database', 'currentRoute'])
@php
$databaseRouteParameters = [
'project_uuid' => $database->environment->project->uuid,
'environment_uuid' => $database->environment->uuid,
'database_uuid' => $database->uuid,
];
$configurationItems = collect([
['label' => 'General', 'route' => 'project.database.configuration', 'icon' => 'settings'],
['label' => 'Environment Variables', 'route' => 'project.database.environment-variables', 'icon' => 'variables'],
['label' => 'Persistent Storage', 'route' => 'project.database.persistent-storage', 'icon' => 'storages'],
['label' => 'Backups', 'route' => 'project.database.backup.index', 'icon' => 'database', 'visible' => $database->isBackupSolutionAvailable()],
['label' => 'Servers', 'route' => 'project.database.servers', 'icon' => 'servers'],
['label' => 'Runtime', 'route' => 'project.database.logs', 'icon' => 'unordered-list', 'navigate' => false],
['label' => 'Terminal', 'route' => 'project.database.command', 'icon' => 'browser-terminal', 'navigate' => false, 'visible' => auth()->user()?->can('canAccessTerminal')],
['label' => 'Import Backup', 'route' => 'project.database.import-backup', 'icon' => 'upload', 'visible' => auth()->user()?->can('update', $database)],
['label' => 'Webhooks', 'route' => 'project.database.webhooks', 'icon' => 'notifications'],
['label' => 'Healthcheck', 'route' => 'project.database.healthcheck', 'icon' => 'feedback'],
['label' => 'Resource Limits', 'route' => 'project.database.resource-limits', 'icon' => 'cpu'],
['label' => 'Resource Operations', 'route' => 'project.database.resource-operations', 'icon' => 'server-update'],
['label' => 'Metrics', 'route' => 'project.database.metrics', 'icon' => 'graph'],
['label' => 'Tags', 'route' => 'project.database.tags', 'icon' => 'tags'],
['label' => 'Danger Zone', 'route' => 'project.database.danger', 'icon' => 'shield-alert'],
])->filter(fn (array $item): bool => $item['visible'] ?? true)
->map(fn (array $item): array => [
...$item,
'active' => $currentRoute === $item['route']
|| ($item['route'] === 'project.database.backup.index'
&& str($currentRoute)->startsWith('project.database.backup')),
]);
$menuGroups = [
'Settings' => ['General', 'Environment Variables', 'Persistent Storage', 'Backups', 'Servers', 'Import Backup'],
'Automation' => ['Webhooks', 'Healthcheck'],
'Logs' => ['Runtime'],
'Operations' => ['Terminal', 'Resource Limits', 'Resource Operations', 'Metrics', 'Tags', 'Danger Zone'],
];
$groupedItems = collect($menuGroups)
->map(fn (array $labels) => $configurationItems->whereIn('label', $labels)->values())
->filter(fn ($items) => $items->isNotEmpty());
@endphp
<aside class="application-settings-navigation min-w-0 xl:self-start">
<nav aria-label="Database settings"
class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
@foreach ($groupedItems as $groupLabel => $groupItems)
@unless ($loop->first)
<div class="my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
@endunless
<div class="nav-section hidden xl:block">{{ $groupLabel }}</div>
@foreach ($groupItems as $menuItem)
<a @class(['menu-item', 'menu-item-active' => $menuItem['active']])
@if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
href="{{ route($menuItem['route'], $databaseRouteParameters) }}">
<x-reicon :name="$menuItem['icon']" class="menu-item-icon" />
<span class="menu-item-label">{{ $menuItem['label'] }}</span>
</a>
@endforeach
@endforeach
</nav>
</aside>
resources/views/components/empty.blade.php
+1 -1
View File
@@ -51,7 +51,7 @@
{{-- Empty state: dashed card, icon badge, title, description, optional actions. --}}
<div
{{ $attributes->merge([
'class' => "empty-state flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-6 py-10 text-center dark:border-white/[0.1] dark:bg-white/[0.02] {$minHeight}",
'class' => "empty-state flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 px-6 py-10 text-center dark:border-white/[0.1] {$minHeight}",
]) }}>
@if ($hasIcon)
<div
resources/views/components/forms/button.blade.php
+2 -1
View File
@@ -45,7 +45,8 @@
}, 300)"
@mouseleave="clearTimeout(_t); visible = false">
@endif
<button @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass, 'type' => 'button'])->merge($loadingAttributes) }}
<button @disabled($disabled) @if ($isHighlighted) isHighlighted @endif
{{ $attributes->merge(['class' => $defaultClass, 'type' => 'button'])->merge($loadingAttributes) }}
@isset($confirm)
x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
@endisset
resources/views/components/forms/env-var-input.blade.php
+11 -11
View File
@@ -233,15 +233,14 @@
@endif
{{-- Dropdown for suggestions --}}
<div x-show="showDropdown"
x-transition
class="absolute z-[60] w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg">
<div x-show="showDropdown" x-cloak x-transition.origin.top
class="listbox-panel top-full! z-[60]! mt-1! w-full! min-w-0! max-w-full!" role="listbox">
<template x-if="suggestions.length === 0 && currentScope">
<div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
<div class="px-2 py-2 text-sm text-neutral-500 dark:text-fg-dim">
<div>No shared variables found in <span class="font-semibold" x-text="currentScope"></span> scope.</div>
<a :href="getScopeUrl(currentScope)"
class="text-coollabs dark:text-warning hover:underline text-xs mt-1 inline-block"
class="mt-1 inline-block text-xs text-coollabs hover:underline dark:text-warning"
target="_blank">
Add <span x-text="currentScope"></span> variables →
</a>
@@ -250,24 +249,25 @@
<div x-show="suggestions.length > 0"
x-ref="dropdownList"
class="max-h-48 overflow-y-scroll"
class="max-h-48 overflow-y-auto"
style="scrollbar-width: thin;">
<template x-for="(suggestion, index) in suggestions" :key="index">
<div :id="'suggestion-' + index"
@click="selectSuggestion(suggestion)"
class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200 flex items-center gap-2"
:class="{ 'bg-neutral-50 dark:bg-coolgray-300': index === selectedIndex }">
class="listbox-option justify-start! gap-2.5!"
:class="{ 'bg-neutral-100 dark:bg-white/[0.08]': index === selectedIndex }"
role="option" :aria-selected="index === selectedIndex">
<template x-if="suggestion.type === 'scope'">
<span class="text-xs px-2 py-0.5 bg-coollabs/10 dark:bg-warning/10 text-coollabs dark:text-warning rounded">
<span class="rounded-md border border-warning/25 bg-warning/10 px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-warning">
SCOPE
</span>
</template>
<template x-if="suggestion.type === 'variable'">
<span class="text-xs px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded">
<span class="rounded-md border border-emerald-500/25 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-emerald-600 dark:text-emerald-400">
VAR
</span>
</template>
<span class="text-sm font-mono" x-text="suggestion.display"></span>
<span class="min-w-0 truncate font-mono text-sm" x-text="suggestion.display"></span>
</div>
</template>
</div>
resources/views/components/loading.blade.php
+11 -10
View File
@@ -1,13 +1,14 @@
@props(['text' => null])
<div class="inline-flex items-center justify-center" {{ $attributes }}>
@if (isset($text))
<div>{{ $text }}</div>
@endif
<svg class="w-4 h-4 mx-1 ml-3 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
<div {{ $attributes->merge(['class' => 'inline-flex items-center justify-center gap-2 text-[13px] text-neutral-500 dark:text-fg-dim']) }}
role="status" aria-live="polite">
<svg class="size-4 shrink-0 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle class="opacity-20" cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
<path class="opacity-80" d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2"
stroke-linecap="round" />
</svg>
@if (isset($text))
<span>{{ $text }}</span>
@endif
</div>
resources/views/components/notification/channel-actions.blade.php
+1 -1
View File
@@ -13,7 +13,7 @@
toggleMethod: @js($toggleMethod),
testMethod: @js($testMethod),
}">
<x-forms.button type="button" :disabled="!$canUpdate"
<x-forms.button type="button" :disabled="!$canUpdate" :isHighlighted="!$enabled"
x-on:click="
if (!enabled && !$el.closest('form').reportValidity()) return;
$wire.$set(enabledProperty, !enabled).then(() => $wire.$call(toggleMethod));
resources/views/components/service/configuration-sidebar.blade.php
+64
View File
@@ -0,0 +1,64 @@
@props(['service', 'currentRoute'])
@php
$serviceRouteParameters = [
'project_uuid' => $service->environment->project->uuid,
'environment_uuid' => $service->environment->uuid,
'service_uuid' => $service->uuid,
];
$configurationItems = collect([
['label' => 'General', 'route' => 'project.service.configuration', 'icon' => 'settings'],
['label' => 'Domains', 'route' => 'project.service.domains', 'icon' => 'globe'],
['label' => 'Environment Variables', 'route' => 'project.service.environment-variables', 'icon' => 'variables'],
['label' => 'Persistent Storage', 'route' => 'project.service.storages', 'icon' => 'storages'],
['label' => 'Backups', 'route' => 'project.service.volume-backups.index', 'icon' => 'database'],
['label' => 'Runtime', 'route' => 'project.service.logs', 'icon' => 'unordered-list', 'navigate' => false],
['label' => 'Terminal', 'route' => 'project.service.command', 'icon' => 'browser-terminal', 'navigate' => false, 'visible' => auth()->user()?->can('canAccessTerminal')],
['label' => 'Scheduled Tasks', 'route' => 'project.service.scheduled-tasks.show', 'icon' => 'calendar'],
['label' => 'Webhooks', 'route' => 'project.service.webhooks', 'icon' => 'notifications'],
['label' => 'Resource Operations', 'route' => 'project.service.resource-operations', 'icon' => 'server-update'],
['label' => 'Tags', 'route' => 'project.service.tags', 'icon' => 'tags'],
['label' => 'Danger Zone', 'route' => 'project.service.danger', 'icon' => 'shield-alert'],
])->filter(fn (array $item): bool => $item['visible'] ?? true)
->map(fn (array $item): array => [
...$item,
'active' => $currentRoute === $item['route']
|| ($item['route'] === 'project.service.scheduled-tasks.show'
&& str($currentRoute)->startsWith('project.service.scheduled-tasks'))
|| ($item['route'] === 'project.service.volume-backups.index'
&& str($currentRoute)->startsWith('project.service.volume-backups')),
]);
$menuGroups = [
'Settings' => ['General', 'Domains', 'Environment Variables', 'Persistent Storage', 'Backups'],
'Automation' => ['Scheduled Tasks', 'Webhooks'],
'Logs' => ['Runtime'],
'Operations' => ['Terminal', 'Resource Operations', 'Tags', 'Danger Zone'],
];
$groupedItems = collect($menuGroups)
->map(fn (array $labels) => $configurationItems->whereIn('label', $labels)->values())
->filter(fn ($items) => $items->isNotEmpty());
@endphp
<aside class="application-settings-navigation min-w-0 xl:self-start">
<nav aria-label="Service settings"
class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
@foreach ($groupedItems as $groupLabel => $groupItems)
@unless ($loop->first)
<div class="my-2 hidden border-t border-neutral-200 xl:block dark:border-white/[0.06]" aria-hidden="true"></div>
@endunless
<div class="nav-section hidden xl:block">{{ $groupLabel }}</div>
@foreach ($groupItems as $menuItem)
<a @class(['menu-item', 'menu-item-active' => $menuItem['active']])
@if ($menuItem['navigate'] ?? true) {{ wireNavigate() }} @endif
href="{{ route($menuItem['route'], $serviceRouteParameters) }}">
<x-reicon :name="$menuItem['icon']" class="menu-item-icon" />
<span class="menu-item-label">{{ $menuItem['label'] }}</span>
</a>
@endforeach
@endforeach
</nav>
</aside>
resources/views/components/services/links.blade.php
+1 -1
View File
@@ -7,6 +7,7 @@
<div class="relative" x-data="{ open: false }" @keydown.escape.window="open = false">
<button type="button" @click="open = !open" @click.outside="open = false" title="Open service links"
class="app-tab shrink-0 gap-1">
<x-reicon name="external-link" class="size-3.5 shrink-0 opacity-70" />
Links
<svg class="size-3.5 shrink-0 opacity-60" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M8 9l4-4 4 4M8 15l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
@@ -17,7 +18,6 @@
class="absolute right-0 z-[90] mt-2 min-w-60 max-w-96 max-h-80 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1.5 shadow-modal scrollbar dark:border-white/10 dark:bg-raised md:left-0 md:right-auto">
@foreach ($links as $link)
<a class="{{ $linkItemClasses }}" target="_blank" href="{{ $link }}">
<x-external-link class="size-3.5 shrink-0" />
<span class="min-w-0 truncate">{{ $link }}</span>
</a>
@endforeach
resources/views/components/status/stopped.blade.php
+1 -10
View File
@@ -2,13 +2,4 @@
'status' => 'Stopped',
'noLoading' => false,
])
@php
if (str($status)->contains('(')) {
$displayStatus = str($status)->before('(')->trim()->headline()->value();
} elseif (str($status)->contains(':')) {
$displayStatus = str(explode(':', $status)[0])->headline()->value();
} else {
$displayStatus = str($status)->headline()->value();
}
@endphp
<x-status-badge status="{{ $displayStatus }}" type="error" />
<x-status-badge status="Stopped" type="neutral" />
resources/views/components/top-user-menu.blade.php
+42 -4
View File
@@ -4,8 +4,23 @@
$userEmail = $user?->email ?? '';
$userInitial = strtoupper(mb_substr($user?->name ?: ($user?->email ?: 'A'), 0, 1));
@endphp
<div class="relative" x-data="{ open: false }" @keydown.escape.window="open = false">
<button type="button" @click="open = !open" @click.outside="open = false"
<div class="relative" x-data="{
open: false,
appearanceOpen: false,
theme: localStorage.getItem('theme') || 'dark',
setTheme(type) {
this.theme = type;
localStorage.setItem('theme', type);
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = type === 'dark' || (type === 'system' && prefersDark);
document.documentElement.classList.toggle('dark', isDark);
document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
},
}" @keydown.escape.window="open = false; appearanceOpen = false"
@click.outside="open = false; appearanceOpen = false">
<button type="button" @click="open = !open"
title="{{ $userName }}" aria-label="Account menu for {{ $userName }}"
class="flex h-8 items-center gap-1.5 rounded-full border border-neutral-200 bg-neutral-100 px-2 shadow-sm transition-colors hover:bg-neutral-200 dark:border-white/[0.08] dark:bg-white/[0.06] dark:hover:bg-white/[0.1]">
<span
@@ -32,12 +47,35 @@
Profile
</span>
</a>
<a href="{{ route('profile.appearance') }}" {{ wireNavigate() }} class="listbox-option">
<button type="button" class="listbox-option w-full" @click="appearanceOpen = !appearanceOpen"
:aria-expanded="appearanceOpen">
<span class="flex items-center gap-2">
<x-reicon name="settings" class="size-4 opacity-80" />
Appearance
</span>
</a>
<svg class="size-3.5 text-neutral-400 transition-transform dark:text-fg-faint"
:class="appearanceOpen && 'rotate-180'" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
<div x-show="appearanceOpen" x-collapse class="mx-1 grid gap-0.5 pb-1 pl-6">
@foreach ([
['value' => 'light', 'label' => 'Light'],
['value' => 'system', 'label' => 'System'],
['value' => 'dark', 'label' => 'Dark'],
] as $option)
<button type="button" @click="setTheme('{{ $option['value'] }}')"
class="flex h-8 w-full items-center justify-between rounded-md px-2 text-left text-xs text-neutral-600 transition-colors hover:bg-neutral-200 hover:text-neutral-950 dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg">
<span>{{ $option['label'] }}</span>
<svg x-show="theme === '{{ $option['value'] }}'" class="size-3.5 text-coollabs dark:text-warning"
viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="m2.5 6.25 2.1 2.1 4.9-5" stroke="currentColor" stroke-width="1.4"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
@endforeach
</div>
<div class="my-1 h-px bg-neutral-200 dark:bg-white/[0.07]"></div>