Alert banner improvements: auto-refresh, fixes & "closeable"

app/Filament/Server/Widgets/ServerConsole.php

@@ -3,6 +3,7 @@
 namespace App\Filament\Server\Widgets;
 
 use App\Exceptions\Http\HttpForbiddenException;
+use App\Livewire\AlertBanner;
 use App\Models\Permission;
 use App\Models\Server;
 use App\Models\User;
@@ -113,4 +114,14 @@ public function storeStats(string $data): void
             cache()->put($cacheKey, $data, now()->addMinute());
         }
     }
+
+    #[On('websocket-error')]
+    public function websocketError(): void
+    {
+        AlertBanner::make()
+            ->title('Could not connect to websocket!')
+            ->body('Check your browser console for more details.')
+            ->danger()
+            ->send();
+    }
 }

app/Livewire/AlertBanner.php

@@ -5,36 +5,52 @@
 use Filament\Notifications\Concerns;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Illuminate\Contracts\Support\Arrayable;
+use Illuminate\Support\Str;
 
 final class AlertBanner implements Arrayable
 {
     use Concerns\HasBody;
     use Concerns\HasIcon;
+    use Concerns\HasId;
     use Concerns\HasStatus;
     use Concerns\HasTitle;
     use EvaluatesClosures;
 
-    public static function make(): static
+    public static function make(?string $id = null): static
     {
-        return new self();
+        $static = new self();
+        $static->id($id ?? Str::orderedUuid());
+
+        return $static;
     }
 
     public function toArray(): array
     {
         return [
+            'id' => $this->getId(),
             'title' => $this->getTitle(),
             'body' => $this->getBody(),
             'status' => $this->getStatus(),
             'icon' => $this->getIcon(),
         ];
     }
 
-    public function send(): static
+    public static function fromArray(array $data): static
     {
-        $alerts = session()->get('alert-banners', []);
-        $alerts[] = $this->toArray();
+        $static = static::make();
 
-        session()->flash('alert-banners', $alerts);
+        $static->id($data['id']);
+        $static->title($data['title']);
+        $static->body($data['body']);
+        $static->status($data['status']);
+        $static->icon($data['icon']);
+
+        return $static;
+    }
+
+    public function send(): static
+    {
+        session()->push('alert-banners', $this->toArray());
 
         return $this;
     }

app/Livewire/AlertBannerContainer.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Livewire;
+
+use Illuminate\Contracts\View\View;
+use Livewire\Component;
+
+class AlertBannerContainer extends Component
+{
+    public array $alertBanners;
+
+    public function mount(): void
+    {
+        $this->alertBanners = [];
+        $this->pullFromSession();
+    }
+
+    public function pullFromSession(): void
+    {
+        foreach (session()->pull('alert-banners', []) as $alertBanner) {
+            $this->alertBanners[$alertBanner['id']] = $alertBanner;
+        }
+    }
+
+    public function remove(string $id): void
+    {
+        unset($this->alertBanners[$id]);
+    }
+
+    public function render(): View
+    {
+        return view('livewire.alerts.alert-banner-container');
+    }
+}

app/Providers/AppServiceProvider.php

@@ -118,8 +118,8 @@ public function boot(Application $app, SoftwareVersionService $versionService):
         );
 
         FilamentView::registerRenderHook(
-            PanelsRenderHook::CONTENT_START,
-            fn () => view('filament.alerts.alert-banner-container'),
+            PanelsRenderHook::PAGE_START,
+            fn () => Blade::render('@livewire(\App\Livewire\AlertBannerContainer::class)'),
         );
 
         FilamentView::registerRenderHook(

resources/views/filament/components/server-console.blade.php

@@ -113,17 +113,8 @@ class="w-full focus:outline-none focus:ring-0 border-none dark:bg-gray-900"
         const socket = new WebSocket("{{ $this->getSocket() }}");
         let token = '{{ $this->getToken() }}';
 
-        socket.onerror = function(websocketErrorEvent) {
-            @php
-                $alerts = session()->get('alert-banners', []);
-                $alerts[] = [
-                    'title' => 'Could not connect to websocket!',
-                    'body' => 'Check your browser console for more details.',
-                    'status' => 'danger',
-                ];
-
-                session()->flash('alert-banners', $alerts);
-            @endphp
+        socket.onerror = (event) => {
+            $wire.dispatchSelf('websocket-error');
         };
 
         socket.onmessage = function(websocketMessageEvent) {

resources/views/livewire/alerts/alert-banner-container.blade.php

@@ -0,0 +1,5 @@
+<div wire:poll.1s="pullFromSession" id="alert-banner-container" class="flex flex-col gap-4">
+    @foreach (array_values($alertBanners) as $alertBanner)
+        @include('livewire.alerts.alert-banner', ['alertBanner' => $alertBanner])
+    @endforeach
+</div>

resources/views/filament/alerts/alert-banner.blade.php → resources/views/livewire/alerts/alert-banner.blade.php

@@ -22,7 +22,7 @@
         };
     @endphp
 
-    <div class="{{$colorClasses}} flex p-4 rounded-xl shadow-lg bg-white dark:bg-gray-900 ring-1 ring-gray-950/5 dark:ring-white/10">
+    <div class="{{$colorClasses}} flex p-4 mt-3 rounded-xl shadow-lg bg-white dark:bg-gray-900 ring-1 ring-gray-950/5 dark:ring-white/10">
         @if (filled($icon))
             <x-filament::icon :icon="$icon" class="h-8 w-8 mr-2" color="{{$status}}" />
         @endif