fix(ui): align deployment indicator with collapsed sidebar

Move the deployments indicator inside the app layout state scope so it can react to the sidebar collapsed state, and add a layout test covering the responsive positioning.

resources/views/components/navbar.blade.php

@@ -92,7 +92,7 @@
                 }
             }
     }">
-    <div class="flex pt-4 pb-4 pl-2 items-start gap-2"
+    <div class="flex pt-4 pb-4 pl-2 items-start gap-2 motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none"
         :class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:gap-3 lg:pt-8' : 'lg:pt-6'">
         <div class="flex flex-col w-full" :class="collapsed && 'lg:hidden'">
             <a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-tight dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
@@ -124,7 +124,7 @@ class="px-1 py-0.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400
             <livewire:settings-dropdown />
         </div>
     </div>
-    <div class="px-2 pt-2 pb-7" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-4 lg:flex lg:justify-center'">
+    <div class="px-2 pt-2 pb-7 overflow-hidden motion-safe:transition-all motion-safe:duration-200 motion-safe:ease-out motion-reduce:transition-none" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-0 lg:min-h-[4.5rem] lg:flex lg:justify-center'">
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">

resources/views/layouts/app.blade.php

@@ -7,7 +7,6 @@
     <!-- Global search component - included once to prevent keyboard shortcut duplication -->
     <livewire:global-search />
     @auth
-        <livewire:deployments-indicator />
         <div x-data="{
             open: false,
             collapsed: false,
@@ -26,6 +25,7 @@
             }
         }" x-cloak class="mx-auto dark:text-inherit text-black"
             :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
+            <livewire:deployments-indicator />
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
                 <div class="fixed inset-y-0 right-0 h-full flex">

resources/views/livewire/deployments-indicator.blade.php

@@ -1,7 +1,8 @@
 <div wire:poll.3000ms x-data="{
     expanded: @entangle('expanded'),
     reduceOpacity: @js($this->shouldReduceOpacity)
-}" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
+}" class="fixed bottom-0 left-0 z-60 mb-4 ml-4 transition-[left] duration-200"
+    :class="collapsed ? 'lg:left-16' : 'lg:left-56'">
     @if ($this->deploymentCount > 0)
         <div class="relative transition-opacity duration-200"
             :class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">

tests/Feature/DeploymentsIndicatorLayoutTest.php

@@ -0,0 +1,18 @@
+<?php
+
+it('positions the deployments indicator from the sidebar collapsed state', function () {
+    $indicatorView = file_get_contents(resource_path('views/livewire/deployments-indicator.blade.php'));
+    $layoutView = file_get_contents(resource_path('views/layouts/app.blade.php'));
+
+    expect($indicatorView)
+        ->toContain('transition-[left] duration-200')
+        ->toContain(":class=\"collapsed ? 'lg:left-16' : 'lg:left-56'\"")
+        ->not->toContain('fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4');
+
+    expect($layoutView)
+        ->toContain('<div x-data="{')
+        ->toContain('<livewire:deployments-indicator />');
+
+    expect(strpos($layoutView, '<div x-data="{'))
+        ->toBeLessThan(strpos($layoutView, '<livewire:deployments-indicator />'));
+});