feat: enabled announcement banners

app/Livewire/BannerComponent.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Livewire;
+
+use Kenepa\Banner\Facades\BannerManager;
+use Livewire\Component;
+
+class BannerComponent extends Component
+{
+    public $banners = [];
+
+    public function mount()
+    {
+        $this->banners = BannerManager::getActiveBanners();
+    }
+
+    public function render()
+    {
+        return view('livewire.banner-component', ['banners' => $this->banners]);
+    }
+}

app/Providers/Filament/AdminPanelProvider.php

@@ -19,6 +19,7 @@
 use Illuminate\Session\Middleware\AuthenticateSession;
 use Illuminate\Session\Middleware\StartSession;
 use Illuminate\View\Middleware\ShareErrorsFromSession;
+use Kenepa\Banner\BannerPlugin;
 use pxlrbt\FilamentSpotlight\SpotlightPlugin;
 use Stephenjude\FilamentDebugger\DebuggerPlugin;
 
@@ -47,6 +48,7 @@ public function panel(Panel $panel): Panel
                 DebuggerPlugin::make(),
                 SpotlightPlugin::make(),
                 AdvancedTablesPlugin::make(),
+                BannerPlugin::make(),
             ])
             ->middleware([
                 EncryptCookies::class,

composer.json

@@ -19,6 +19,7 @@
         "filament/spatie-laravel-media-library-plugin": "^3.2",
         "filament/spatie-laravel-tags-plugin": "^3.2",
         "guzzlehttp/guzzle": "^7.2",
+        "kenepa/banner": "^0.0.9",
         "laravel/framework": "^11.34.2",
         "laravel/horizon": "*",
         "laravel/jetstream": "^5.0",

docker-compose.prod.yml

@@ -86,7 +86,7 @@ services:
         environment:
             HOMEPAGE_URL:  "https://docs.api.naturalproducts.net"
         ports:
-            - '${APP_PORT:-8001}:80'
+            - '${API_PORT:-8001}:80'
         healthcheck:
             test: ["CMD", "curl", "-f", "http://cm:80/latest/chem/health"]
             interval: 1m30s

resources/css/filament/dashboard/tailwind.config.js

@@ -7,5 +7,6 @@ export default {
         './resources/views/filament/dashboard/**/*.blade.php',
         './vendor/filament/**/*.blade.php',
         './vendor/archilex/filament-filter-sets/**/*.php',
+        './vendor/kenepa/banner/resources/**/*.php',
     ],
 }

resources/css/filament/dashboard/theme.css

@@ -1,4 +1,5 @@
 @import '/vendor/filament/filament/resources/css/theme.css';
 @import '/vendor/archilex/filament-filter-sets/resources/css/plugin.css';
+@import '/vendor/kenepa/banner/resources/css/index.css';
 
 @config 'tailwind.config.js';

resources/views/livewire/banner-component.blade.php

@@ -0,0 +1,55 @@
+<div style="position: relative" class="z-10">
+    @foreach ($banners as $banner)
+        @if ($banner->isVisible())
+            @php
+                $startColor = $banner->start_color;
+                $endColor = $banner->background_type === 'gradient' ? $banner->end_color : $startColor;
+            @endphp
+
+            <div x-title="banner-component-{{ $banner->id }}" x-cloak x-show="show{{ $banner->id }}"
+                x-data="{
+                    show{{ $banner->id }}: true,
+                    storageKey: 'kenepa-banners::closed',
+                    init() {
+                        this.checkIfClosed();
+                    },
+                    close() {
+                        this.show{{ $banner->id }} = false;
+                        let storedBanners = JSON.parse(localStorage.getItem(this.storageKey) || '[]');
+                        if (!storedBanners.includes('{{ $banner->id }}')) {
+                            storedBanners.push('{{ $banner->id }}');
+                            localStorage.setItem(this.storageKey, JSON.stringify(storedBanners));
+                        }
+                    },
+                    checkIfClosed() {
+                        let storedBanners = JSON.parse(localStorage.getItem(this.storageKey) || '[]');
+                        if (storedBanners.includes('{{ $banner->id }}')) {
+                            this.show{{ $banner->id }} = false;
+                        }
+                    },
+                }"
+                style="z-index:1; background-color: {{ $startColor }}; background-image: linear-gradient(to right, {{ $startColor }}, {{ $endColor }}); color: {{ $banner->text_color ?? '#FFFFFF' }};"
+                id="banner-{{ $banner->id }}" @class([
+                    'grid grid-cols-12 pl-6 py-2 pr-8',
+                    'rounded-lg' =>
+                        $banner->render_location !==
+                        \Filament\View\PanelsRenderHook::BODY_START,
+                ])>
+                <div class="col-span-12 flex items-center text-sm w-full">
+                    @if ($banner->icon)
+                        <x-filament::icon alias="banner::icon" :icon="$banner->icon"
+                            style="color: {{ $banner->icon_color ?? '#FFFFFF' }}" class="h-6 w-6 mr-2 text-white" />
+                    @endif
+                    <div class="flex-grow">
+                        {!! $banner->content !!}
+                    </div>
+                    @if ($banner->can_be_closed_by_user)
+                        <x-filament::icon class="cursor-pointer" x-on:click="close" alias="banner::close" icon="heroicon-m-x-circle"
+                            style="color: {{ $banner->icon_color ?? '#FFFFFF' }}"
+                            class="ml-4 h-6 w-6 text-white cursor-pointer hover:opacity-75" />
+                    @endif
+                </div>
+            </div>
+        @endif
+    @endforeach
+</div>

resources/views/livewire/header.blade.php

@@ -153,4 +153,5 @@ class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text
                 </div>
             </div>
         </div>
+        <livewire:banner-component />
     </header>