refactor(application): extract status and internal access components

Move internal hostname loading and breadcrumb status into dedicated
Livewire components with live refresh. Merge public/internal access
into one Access section, bind Enter to save on the unsaved bar, and
drop x-teleport wrappers from popup and global search.

resources/views/components/application/configuration-sidebar.blade.php

@@ -175,8 +175,7 @@
         $pageSections = [
             'project.application.configuration' => array_values(array_filter([
                 ['id' => 'application-details-section', 'label' => 'Application details'],
-                ['id' => 'public-access-section', 'label' => 'Public access'],
-                $isComposeApp ? null : ['id' => 'internal-access-section', 'label' => 'Internal access'],
+                ['id' => 'access-section', 'label' => 'Access'],
                 ['id' => 'build-pipeline-section', 'label' => 'Build pipeline'],
                 $isComposeApp ? null : ['id' => 'container-image-section', 'label' => 'Container image'],
                 $isComposeApp ? null : ['id' => 'networking-section', 'label' => 'Networking'],

resources/views/components/popup-small.blade.php

@@ -6,7 +6,6 @@
     'compactStoragePrefix' => null,
 ])
 
-<template x-teleport="body">
 <div x-data="{
         bannerVisible: true,
         compact: false,
@@ -79,4 +78,3 @@
         </button>
     </div>
 </div>
-</template>

resources/views/components/top-breadcrumb.blade.php

@@ -244,24 +244,11 @@
     @endif
 
     @if ($currentApplication)
-        @php
-            $applicationStatus = str($currentApplication->status ?? 'exited');
-            [$statusDotClass, $statusLabel] = match (true) {
-                $applicationStatus->startsWith('running') => ['bg-[#3fb950]', 'Running'],
-                $applicationStatus->startsWith('degraded') => ['bg-orange-400', 'Degraded'],
-                $applicationStatus->startsWith('restarting'),
-                $applicationStatus->startsWith('starting') => ['bg-warning', 'Restarting'],
-                default => ['bg-neutral-400 dark:bg-fg-faint', 'Stopped'],
-            };
-        @endphp
         <span class="shrink-0 text-neutral-300 dark:text-fg-faint px-0.5">/</span>
         <span class="flex min-w-0 shrink items-center gap-2 h-8 px-2">
             <span class="min-w-0 truncate font-semibold text-black dark:text-fg">{{ $currentApplication->name }}</span>
-            <span class="inline-flex h-[22px] shrink-0 items-center gap-1.5 rounded-full border border-neutral-200 bg-neutral-100 px-2.5 text-xs font-medium text-black dark:border-white/[0.12] dark:bg-white/[0.08] dark:text-fg"
-                title="{{ $currentApplication->status }}">
-                <span class="size-1.5 rounded-full {{ $statusDotClass }}"></span>
-                {{ $statusLabel }}
-            </span>
+            <livewire:project.application.status :application="$currentApplication"
+                :wire:key="'application-status-'.$currentApplication->uuid" />
         </span>
     @endif
 </div>

resources/views/components/unsaved-bar.blade.php

@@ -21,6 +21,19 @@
      Desktop: compact single-row centered pill. --}}
 <div wire:dirty.class="is-dirty"
     wire:loading.class="!opacity-0 !translate-y-6 !pointer-events-none"
+    @keydown.enter.window="
+        if ($el.classList.contains('is-dirty') &&
+            !$event.repeat &&
+            !$event.isComposing &&
+            !$event.shiftKey &&
+            !$event.ctrlKey &&
+            !$event.altKey &&
+            !$event.metaKey &&
+            !$event.target.closest('textarea, button, a, select, [contenteditable=true]')) {
+            $event.preventDefault();
+            $wire.{{ $action }}();
+        }
+    "
     @if ($targets) wire:target="{{ $targets }}" @endif
     class="pointer-events-none fixed inset-x-3 bottom-[max(1.5rem,env(safe-area-inset-bottom,0px)+0.75rem)] z-[1000] flex max-w-full translate-y-6 flex-col items-stretch gap-2 rounded-2xl border border-white/10 bg-surface py-2.5 pr-2.5 pl-4 opacity-0 shadow-modal transition-[opacity,transform] duration-200 ease-out delay-0 [&.is-dirty]:pointer-events-auto [&.is-dirty]:translate-y-0 [&.is-dirty]:opacity-100 [&.is-dirty]:delay-300 sm:inset-x-auto sm:left-1/2 sm:bottom-6 sm:w-max sm:max-w-none sm:-translate-x-1/2 sm:flex-row sm:items-center sm:gap-8 sm:py-2 sm:pl-5 sm:pr-2">
     <span class="text-[13px] font-semibold leading-snug text-fg sm:whitespace-nowrap">{{ $label }}</span>
@@ -30,8 +43,10 @@
             Reset
         </button>
         <button type="button" wire:click="{{ $action }}" wire:loading.attr="disabled"
-            class="button-highlighted h-8 rounded-lg px-4 text-[13px] font-semibold transition-[transform,background-color] active:scale-[0.98]">
-            Save changes
+            class="button-highlighted flex h-8 items-center gap-2 rounded-lg px-4 text-[13px] font-semibold transition-[transform,background-color] active:scale-[0.98]">
+            <span>Save changes</span>
+            <kbd
+                class="rounded border border-white/20 bg-white/10 px-1.5 py-0.5 text-[10px] leading-none font-medium text-white/75">Enter</kbd>
         </button>
     </div>
 </div>