43 lines
2.6 KiB
PHP
43 lines
2.6 KiB
PHP
{{-- Poll so the active + fleet status dots reflect a server going up/down live (Livewire morph keeps
|
|
the Alpine `open` dropdown state across re-renders). --}}
|
|
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false" class="relative" wire:poll.10s>
|
|
<button type="button" @click="open = ! open"
|
|
class="flex min-h-11 w-full items-center gap-2.5 rounded-md border border-line bg-inset px-3 py-2 text-left transition-colors hover:border-line-strong"
|
|
:aria-expanded="open" aria-haspopup="listbox">
|
|
@if ($active)
|
|
<x-status-dot :status="$active->status" :ping="$active->status === 'online'" />
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate font-mono text-sm text-ink">{{ $active->name }}</span>
|
|
<span class="block truncate font-mono text-[11px] text-ink-3">{{ $active->ip }}</span>
|
|
</span>
|
|
@else
|
|
<span class="min-w-0 flex-1 text-sm text-ink-3">{{ __('servers.switcher_no_server') }}</span>
|
|
@endif
|
|
<x-icon name="switcher" class="h-4 w-4 shrink-0 text-ink-3" />
|
|
</button>
|
|
|
|
<div x-show="open" x-cloak x-transition.origin.top
|
|
class="absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-md border border-line bg-raised shadow-pop"
|
|
role="listbox">
|
|
<div class="max-h-72 overflow-y-auto p-1">
|
|
@foreach ($servers as $server)
|
|
<button type="button" wire:click="select('{{ $server->uuid }}')" @click="open = false"
|
|
@class([
|
|
'flex min-h-11 w-full items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-left transition-colors hover:bg-surface',
|
|
'bg-accent/10' => $active && $server->id === $active->id,
|
|
])
|
|
role="option" :aria-selected="{{ $active && $server->id === $active->id ? 'true' : 'false' }}">
|
|
<x-status-dot :status="$server->status" :ping="$server->status === 'online'" />
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block truncate font-mono text-sm text-ink">{{ $server->name }}</span>
|
|
<span class="block truncate font-mono text-[11px] text-ink-3">{{ $server->ip }} · {{ $server->os }}</span>
|
|
</span>
|
|
@if ($active && $server->id === $active->id)
|
|
<x-icon name="activity" class="h-3.5 w-3.5 shrink-0 text-accent" />
|
|
@endif
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|