Merge pull request #16 from pxlrbt/feature/filament-v4

Upgrade to Filament v4

Author: pxlrbt

composer.json

@@ -15,7 +15,7 @@
     ],
     "require": {
         "php": "^8.0",
-        "filament/filament": "^3.0-stable"
+        "filament/filament": "^3.0|^4.0"
     },
     "require-dev": {
         "laravel/pint": "^1.10"

readme.md

@@ -15,9 +15,10 @@ Never confuse your tabs with different Filament environments again.
 ## Installation via Composer
 
 | Plugin Version | Filament Version | PHP Version |
-|----------------|-----------------|-------------|
-| 1.x            | ^2.9.15   | \> 8.0      |
-| 2.x            | 3.x             | \> 8.1      |
+|----------------|------------------|-------------|
+| 1.x            | ^2.9.15          | \> 8.0      |
+| 2.x            | 3.x              | \> 8.1      |
+| 3.x            | 4.x              | \> 8.1      |
 
 ```bash
 composer require pxlrbt/filament-environment-indicator

resources/css/styles.css

@@ -0,0 +1,14 @@
+.environment-indicator {
+    display: none;
+    height: 2.25rem;
+
+    @media (width > 40rem) {
+        display: flex;
+    }
+
+    code {
+        margin-block-start: 1px;
+        margin-inline-start: 0.25rem;
+        font-size: var(--text-xs);
+    }
+}

resources/views/badge.blade.php

@@ -1,20 +1,20 @@
+@php use Filament\Facades\Filament; @endphp
 <div
     class="
-        environment-indicator hidden sm:flex items-center h-9 px-3 text-sm font-medium
-        rounded-lg shadow-sm ring-1
-        ring-custom-600/20 bg-custom-50 text-custom-600
-        dark:ring-custom-400/30 dark:bg-custom-400/10 dark:text-custom-400
+        environment-indicator
+        fi-badge fi-color fi-text-color-600
+        dark:fi-text-color-400
     "
     style="
-        --c-50: {{ $color[50] }};
-        --c-300: {{ $color[300] }};
-        --c-400: {{ $color[400] }};
-        --c-600: {{ $color[600] }};
+        --color-50: {{ $color[50] }};
+        --color-300: {{ $color[300] }};
+        --color-400: {{ $color[400] }};
+        --color-600: {{ $color[600] }};
     "
 >
     {{ $environment }}
 
     @isset($branch)
-        <code class="text-xs ml-1" style="margin-top: 1px">({{ $branch }})</code>
+        <code>({{ $branch }})</code>
     @endisset
 </div>

src/FilamentEnvironmentIndicatorServiceProvider.php

@@ -2,6 +2,8 @@
 
 namespace pxlrbt\FilamentEnvironmentIndicator;
 
+use Filament\Support\Assets\Css;
+use Filament\Support\Facades\FilamentAsset;
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
 
@@ -11,6 +13,10 @@ class FilamentEnvironmentIndicatorServiceProvider extends PackageServiceProvider
 
     public function configurePackage(Package $package): void
     {
+        FilamentAsset::register([
+            Css::make('styles', __DIR__.'/../resources/css/styles.css'),
+        ], static::$name);
+
         $package
             ->name(static::$name)
             ->hasViews();