feat(ui): add "Initialisierung" (pending) server status

New `pending` status renders cyan (dot + pill, soft ping) instead of red, for
freshly created servers that have not been contacted yet. Wired into the
status-pill/dot components, the fleet list, and server-item, with a bilingual
`servers.status_pending` label.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat/v1-foundation
boban 2026-06-14 10:20:32 +02:00
parent e26921f33a
commit 615f440515
7 changed files with 32 additions and 7 deletions

View File

@ -10,6 +10,7 @@ return [
'status_online' => 'Online',
'status_warning' => 'Warnung',
'status_offline' => 'Offline',
'status_pending' => 'Initialisierung',
// ── Index: header ─────────────────────────────────────────────────────
'fleet_eyebrow' => 'Flotte',

View File

@ -10,6 +10,7 @@ return [
'status_online' => 'Online',
'status_warning' => 'Warning',
'status_offline' => 'Offline',
'status_pending' => 'Initializing',
// ── Index: header ─────────────────────────────────────────────────────
'fleet_eyebrow' => 'Fleet',

View File

@ -1,9 +1,9 @@
@props(['name', 'ip', 'status' => 'online', 'cpu' => 0, 'mem' => 0, 'os' => null])
@php
$label = ['online' => __('common.online'), 'warning' => __('common.warning'), 'offline' => __('common.offline')][$status] ?? ucfirst($status);
$label = ['online' => __('common.online'), 'warning' => __('common.warning'), 'offline' => __('common.offline'), 'pending' => __('servers.status_pending')][$status] ?? ucfirst($status);
@endphp
<a href="#" class="flex items-center gap-3 rounded-md border border-line bg-inset px-3 py-2.5 transition-colors hover:border-line-strong">
<x-status-dot :status="$status" :ping="$status === 'online'" />
<x-status-dot :status="$status" :ping="in_array($status, ['online', 'pending'], true)" />
<div class="min-w-0 flex-1">
<p class="truncate text-sm text-ink">{{ $name }}</p>
<p class="truncate font-mono text-[11px] text-ink-3">{{ $ip }}@if ($os) · {{ $os }}@endif</p>

View File

@ -1,7 +1,7 @@
@props(['status' => 'offline', 'ping' => false])
@php
$c = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline'][$status] ?? 'bg-ink-4';
$glow = ['online' => 'shadow-[0_0_6px_var(--color-online)]', 'warning' => 'shadow-[0_0_5px_var(--color-warning)]'][$status] ?? '';
$c = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline', 'pending' => 'bg-cyan'][$status] ?? 'bg-ink-4';
$glow = ['online' => 'shadow-[0_0_6px_var(--color-online)]', 'warning' => 'shadow-[0_0_5px_var(--color-warning)]', 'pending' => 'shadow-[0_0_5px_var(--color-cyan)]'][$status] ?? '';
@endphp
<span {{ $attributes->merge(['class' => 'relative inline-flex h-2 w-2 shrink-0']) }}>
@if ($ping)

View File

@ -4,9 +4,10 @@
'online' => 'text-online border-online/20 bg-online/10',
'warning' => 'text-warning border-warning/20 bg-warning/10',
'offline' => 'text-offline border-offline/20 bg-offline/10',
'pending' => 'text-cyan border-cyan/20 bg-cyan/10',
][$status] ?? 'text-ink-3 border-line bg-line';
@endphp
<span {{ $attributes->merge(['class' => "inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 font-mono text-xs $c"]) }}>
<x-status-dot :status="$status" :ping="$status === 'online'" />
<x-status-dot :status="$status" :ping="in_array($status, ['online', 'pending'], true)" />
{{ $slot }}
</span>

View File

@ -1,5 +1,5 @@
@php
$label = ['online' => __('servers.status_online'), 'warning' => __('servers.status_warning'), 'offline' => __('servers.status_offline')];
$label = ['online' => __('servers.status_online'), 'warning' => __('servers.status_warning'), 'offline' => __('servers.status_offline'), 'pending' => __('servers.status_pending')];
@endphp
<div class="space-y-4">
@ -56,7 +56,7 @@
wire:navigate
class="flex min-h-11 items-center gap-3 px-4 py-3 transition-colors hover:bg-raised sm:px-5"
>
<x-status-dot :status="$server->status" :ping="$server->status === 'online'" />
<x-status-dot :status="$server->status" :ping="in_array($server->status, ['online', 'pending'], true)" />
<div class="min-w-0 flex-1">
<p class="truncate text-sm text-ink">{{ $server->name }}</p>

View File

@ -0,0 +1,22 @@
<?php
namespace Tests\Feature;
use Illuminate\Support\Facades\Blade;
use Tests\TestCase;
class StatusComponentTest extends TestCase
{
public function test_pending_pill_uses_cyan_tone(): void
{
$html = Blade::render('<x-status-pill status="pending">Init</x-status-pill>');
$this->assertStringContainsString('text-cyan', $html);
$this->assertStringContainsString('bg-cyan/10', $html);
}
public function test_pending_dot_uses_cyan(): void
{
$html = Blade::render('<x-status-dot status="pending" :ping="true" />');
$this->assertStringContainsString('bg-cyan', $html);
}
}