feat(ui): dock resource actions in top bar, user menu in sidebar

Teleport application/database/service heading actions into a fixed
#resource-action-hud-slot so they no longer overlay page content.
Render the account menu in the sidebar footer (with collapse-aware
layout) instead of the header, and drop the project card hover arrow.
This commit is contained in:
Andras Bacsai committed 2026-08-05 20:17:21 +02:00
1 parent 85613b01ba
commit ec165412c3
12 files changed
+115 -34

No files matched your search

@@ -1,6 +1,6 @@
<?php
it('shows the shared hover arrow on project and server cards', function () {
it('uses card hover animation without a right arrow on project and server cards', function () {
$views = [
resource_path('views/livewire/project/index.blade.php'),
resource_path('views/livewire/server/index.blade.php'),
@@ -10,8 +10,9 @@ it('shows the shared hover arrow on project and server cards', function () {
$contents = file_get_contents($view);
expect($contents)
->toContain('<x-reicon name="arrow-right"')
->toContain('group-hover:translate-x-0.5 group-hover:opacity-100')
->toContain('pointer-events-none absolute top-1/2 right-3');
->toContain('hover:-translate-y-px')
->toContain('hover:shadow-md')
->not->toContain('group-hover:translate-x-0.5 group-hover:opacity-100')
->not->toContain('pointer-events-none absolute top-1/2 right-3');
}
});
@@ -22,9 +22,9 @@ it('uses a single unified navbar for application, service, database, and server
->toContain('justify-start')
->toContain('xl:justify-end')
->toContain('xl:w-auto')
->toContain('xl:bg-transparent')
->toContain('xl:fixed')
->toContain('xl:top-14')
->toContain("@teleport('#resource-action-hud-slot')")
->not->toContain('xl:fixed')
->not->toContain('xl:top-14')
->toContain('xl:hidden')
->not->toContain('application-primary-tabs')
->not->toContain("typeof collapsed !== 'undefined'")
@@ -33,6 +33,55 @@ it('uses a single unified navbar for application, service, database, and server
->not->toContain('border-l border-neutral-200 pl-1');
});
it('docks desktop resource actions in the top bar instead of floating over content', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
$files = [
resource_path('views/livewire/project/application/heading.blade.php'),
resource_path('views/livewire/project/service/heading.blade.php'),
resource_path('views/livewire/project/database/heading.blade.php'),
resource_path('views/livewire/server/navbar.blade.php'),
];
expect($layout)->toContain('id="resource-action-hud-slot"');
foreach ($files as $path) {
$contents = file_get_contents($path);
expect($contents)
->toContain("@teleport('#resource-action-hud-slot')")
->not->toContain('xl:fixed xl:top-14 xl:right-4');
$desktopHud = str($contents)->after("@teleport('#resource-action-hud-slot')")->before('@endteleport')->toString();
expect($desktopHud)
->not->toContain('rounded-[10px]')
->not->toContain('border-neutral-200')
->not->toContain('bg-neutral-100')
->not->toContain('dark:bg-white/[0.035]');
}
});
it('places the account menu beside the desktop sidebar toggle while retaining it on mobile', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
$navbar = file_get_contents(resource_path('views/components/navbar.blade.php'));
$accountMenu = file_get_contents(resource_path('views/components/top-user-menu.blade.php'));
expect($layout)
->not->toContain("{{-- Right cluster --}}\n <x-top-user-menu />")
->toContain('<x-top-user-menu />')
->toContain('flex grow min-w-0 flex-col overflow-visible');
expect(substr_count($layout, '<x-top-user-menu />'))->toBe(1);
expect($navbar)
->toContain('<x-top-user-menu sidebar />')
->toContain('Toggle sidebar');
expect($accountMenu)
->toContain("'sidebar' => false")
->toContain("'bottom-full! left-0! right-auto! top-auto! mb-1!' => \$sidebar");
});
it('keeps application links next to advanced actions on the right', function () {
$application = file_get_contents(resource_path('views/livewire/project/application/heading.blade.php'));
$links = file_get_contents(resource_path('views/components/applications/links.blade.php'));
@@ -168,6 +217,17 @@ it('keeps the deployment log sidebar fixed in the layout without a top gap', fun
->and($css)->toContain('overflow: visible;');
});
it('uses the same mobile heading gap on deployment pages as application settings', function () {
$configuration = file_get_contents(resource_path('views/livewire/project/application/configuration.blade.php'));
$deploymentIndex = file_get_contents(resource_path('views/livewire/project/application/deployment/index.blade.php'));
$deploymentShow = file_get_contents(resource_path('views/livewire/project/application/deployment/show.blade.php'));
expect($configuration)->toContain('application-settings-workspace mt-4')
->and($deploymentIndex)->toContain("'mt-4 max-w-[1180px] lg:mt-0' => ! \$embedded")
->and($deploymentShow)->toContain('application-settings-workspace mt-4')
->toContain('lg:mt-0');
});
it('removes desktop top spacing from the deployment log viewer', function () {
$deployment = file_get_contents(resource_path('views/livewire/project/application/deployment/show.blade.php'));