From ee843b723029c39fd2a19b45e592a407741fa891 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 18 Aug 2026 14:51:40 +0200
Subject: [PATCH] fix(ui): show server warnings with alert icons

---
 resources/views/livewire/dashboard.blade.php  | 22 +++++++-----
 .../views/livewire/server/index.blade.php     | 34 ++++++++++++-------
 .../ServerStatusIndicatorDesignTest.php       | 18 +++++-----
 3 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index e9f8b3273..175fdb39a 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -196,14 +196,9 @@ class="group relative flex min-h-28 min-w-0 flex-col rounded-xl border border-ne
                                     :key="'dashboard-server-metrics-'.$server->uuid" />
                             @endif
 
-                            <div class="pointer-events-none relative z-10 flex min-w-0 items-start gap-3">
-                                <div title="{{ $serverStatus }}" aria-label="Server status: {{ $serverStatus }}"
-                                    @class([
-                                        'flex size-8 shrink-0 items-center justify-center rounded-lg border bg-neutral-50 text-neutral-500 dark:bg-white/[0.04] dark:text-fg-dim',
-                                        'border-emerald-500/70' => $serverStatusType === 'success',
-                                        'border-amber-500/70' => $serverStatusType === 'warning',
-                                        'border-red-500/70' => $serverStatusType === 'error',
-                                    ])>
+                            <div class="relative z-10 flex min-w-0 items-start gap-3">
+                                <div
+                                    class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
                                     <x-reicon name="servers" class="size-4" />
                                 </div>
                                 <div class="min-w-0 flex-1">
@@ -215,6 +210,17 @@ class="truncate text-[13px]! leading-4! font-semibold! text-black dark:text-fg">
                                         {{ $server->description ?: 'No description' }}
                                     </p>
                                 </div>
+                                @if ($serverStatusType !== 'success')
+                                    <span data-tooltip="{{ $serverStatus }}"
+                                        aria-label="Server status: {{ $serverStatus }}"
+                                        @class([
+                                            'flex size-6 shrink-0 items-center justify-center rounded-md',
+                                            'text-orange-500 dark:text-warning' => $serverStatusType === 'warning',
+                                            'text-red-500 dark:text-red-400' => $serverStatusType === 'error',
+                                        ])>
+                                        <x-reicon name="alert-triangle" class="size-4" />
+                                    </span>
+                                @endif
                             </div>
                         </a>
                     @endforeach
diff --git a/resources/views/livewire/server/index.blade.php b/resources/views/livewire/server/index.blade.php
index 2aa93aa7f..d89e8b891 100644
--- a/resources/views/livewire/server/index.blade.php
+++ b/resources/views/livewire/server/index.blade.php
@@ -139,15 +139,9 @@ class="group relative flex min-h-28 flex-col rounded-xl border border-neutral-20
                                 :key="'server-index-metrics-'.$server->uuid" />
                         @endif
 
-                        <div class="pointer-events-none relative z-10 flex items-start gap-3">
-                            <div title="{{ $serverRow['status'] }}"
-                                aria-label="Server status: {{ $serverRow['status'] }}"
-                                @class([
-                                    'flex size-8 shrink-0 items-center justify-center rounded-lg border bg-neutral-50 text-neutral-500 dark:bg-white/[0.04] dark:text-fg-dim',
-                                    'border-emerald-500/70' => $serverRow['statusType'] === 'success',
-                                    'border-amber-500/70' => $serverRow['statusType'] === 'warning',
-                                    'border-red-500/70' => $serverRow['statusType'] === 'error',
-                                ])>
+                        <div class="relative z-10 flex items-start gap-3">
+                            <div
+                                class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.04] dark:text-fg-dim">
                                 <x-reicon name="servers" class="size-4" />
                             </div>
                             <div class="min-w-0 flex-1">
@@ -158,6 +152,17 @@ class="group relative flex min-h-28 flex-col rounded-xl border border-neutral-20
                                     {{ $serverRow['description'] }}
                                 </p>
                             </div>
+                            @if ($serverRow['statusType'] !== 'success')
+                                <span data-tooltip="{{ $serverRow['status'] }}"
+                                    aria-label="Server status: {{ $serverRow['status'] }}"
+                                    @class([
+                                        'ml-auto flex size-6 shrink-0 items-center justify-center rounded-md',
+                                        'text-orange-500 dark:text-warning' => $serverRow['statusType'] === 'warning',
+                                        'text-red-500 dark:text-red-400' => $serverRow['statusType'] === 'error',
+                                    ])>
+                                    <x-reicon name="alert-triangle" class="size-4" />
+                                </span>
+                            @endif
                         </div>
                     </a>
                 @endforeach
@@ -174,9 +179,8 @@ class="grid min-w-[480px] grid-cols-[minmax(0,1fr)_9.5rem] border-b border-neutr
                     <a :href="server.href" {{ wireNavigate() }}
                         class="grid min-h-14 min-w-[480px] grid-cols-[minmax(0,1fr)_9.5rem] items-center border-b border-neutral-200 px-4 py-2.5 text-[12px] transition-colors last:border-b-0 hover:bg-neutral-50 hover:no-underline dark:border-white/[0.07] dark:hover:bg-white/[0.025]">
                         <div class="flex min-w-0 items-center gap-3">
-                            <div :title="server.status" :aria-label="`Server status: ${server.status}`"
-                                class="flex size-8 shrink-0 items-center justify-center rounded-lg border bg-neutral-50 text-neutral-500 dark:bg-white/[0.035] dark:text-fg-dim"
-                                :class="server.statusType === 'success' ? 'border-emerald-500/70' : server.statusType === 'warning' ? 'border-amber-500/70' : 'border-red-500/70'">
+                            <div
+                                class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-neutral-200 bg-neutral-50 text-neutral-500 dark:border-white/[0.1] dark:bg-white/[0.035] dark:text-fg-dim">
                                 <x-reicon name="servers" class="size-4" />
                             </div>
                             <div class="min-w-0">
@@ -185,6 +189,12 @@ class="flex size-8 shrink-0 items-center justify-center rounded-lg border bg-neu
                                 <p class="truncate text-[11px] text-neutral-500 dark:text-fg-faint"
                                     x-text="server.description"></p>
                             </div>
+                            <span x-show="server.statusType !== 'success'" :data-tooltip="server.status"
+                                :aria-label="`Server status: ${server.status}`"
+                                class="ml-auto flex size-6 shrink-0 items-center justify-center rounded-md"
+                                :class="server.statusType === 'warning' ? 'text-orange-500 dark:text-warning' : 'text-red-500 dark:text-red-400'">
+                                <x-reicon name="alert-triangle" class="size-4" />
+                            </span>
                         </div>
                         <div class="text-[11px] font-medium text-neutral-600 dark:text-fg-dim">
                             <span x-text="server.status"></span>
diff --git a/tests/Feature/ServerStatusIndicatorDesignTest.php b/tests/Feature/ServerStatusIndicatorDesignTest.php
index 34e0f4cbd..090d6d816 100644
--- a/tests/Feature/ServerStatusIndicatorDesignTest.php
+++ b/tests/Feature/ServerStatusIndicatorDesignTest.php
@@ -1,16 +1,15 @@
 <?php
 
-test('server cards use icon borders instead of ready badges', function () {
+test('server cards use warning icons instead of colored icon borders', function () {
     $dashboard = file_get_contents(resource_path('views/livewire/dashboard.blade.php'));
     $serverIndex = file_get_contents(resource_path('views/livewire/server/index.blade.php'));
 
     expect($dashboard)
         ->not->toContain('<x-status-badge :status="$serverStatus"')
-        ->toContain("'border-emerald-500/70' => \$serverStatusType === 'success'")
-        ->toContain("'border-amber-500/70' => \$serverStatusType === 'warning'")
-        ->toContain("'border-red-500/70' => \$serverStatusType === 'error'")
-        ->toContain('title="{{ $serverStatus }}"')
-        ->toContain('aria-label="Server status: {{ $serverStatus }}"');
+        ->not->toContain("'border-amber-500/70' => \$serverStatusType === 'warning'")
+        ->toContain('@if ($serverStatusType !== \'success\')')
+        ->toContain('data-tooltip="{{ $serverStatus }}"')
+        ->toContain('<x-reicon name="alert-triangle"');
 
     expect(substr_count($serverIndex, '<x-status-badge'))->toBe(1)
         ->and($serverIndex)
@@ -20,10 +19,9 @@
         ->toContain("\$isReady => 'success'")
         ->toContain("\$isTransferredAway || \$server->settings->force_disabled => 'error'")
         ->toContain("default => 'error'")
-        ->toContain("server.statusType === 'success' ? 'border-emerald-500/70'")
-        ->toContain("server.statusType === 'warning' ? 'border-amber-500/70'")
-        ->toContain("'border-red-500/70'")
-        ->toContain(':title="server.status"')
+        ->not->toContain("server.statusType === 'warning' ? 'border-amber-500/70'")
+        ->toContain('x-show="server.statusType !== \'success\'"')
+        ->toContain(':data-tooltip="server.status"')
         ->toContain(':aria-label="`Server status: ${server.status}`"');
 });