Add support for Filament 4 (#31)

* Add support for Filament 4

* Update README to be more clear

* Remove extraneous modal buttons

* Make light mode borders consistent

* Partially fix comment delete not working in comment modals

* Style fix

Author: nathanheffley

README.md

@@ -50,21 +50,12 @@ class Project extends Model implements Commentable
 
 ### Usage with Filament
 
-You can register the plugin in your Panel(s) like so:
-
-```php
-use Kirschbaum\Commentions\CommentionsPlugin;
-
-return $panel
-    ->plugins([
-        CommentionsPlugin::make(),
-    ])
-```
-
 There are a couple of ways to use Commentions with Filament.
 
 1. Register the component in your Filament Infolists:
 
+> This works for Filament 3 and 4.
+
 ```php
 Infolists\Components\Section::make('Comments')
     ->schema([
@@ -75,6 +66,8 @@ Infolists\Components\Section::make('Comments')
 
 2. Or in your table actions:
 
+If you are using Filament 3, you must use `CommentsTableAction` in your table's `actions` array:
+
 ```php
 use Kirschbaum\Commentions\Filament\Actions\CommentsTableAction;
 
@@ -84,8 +77,21 @@ use Kirschbaum\Commentions\Filament\Actions\CommentsTableAction;
 ])
 ```
 
+If you are using Filament 4, you should use `CommentsAction` in `recordActions` instead:
+
+```php
+use Kirschbaum\Commentions\Filament\Actions\CommentsAction;
+
+->recordActions([
+    CommentsAction::make()
+        ->mentionables(User::all())
+])
+````
+
 3. Or as a header action:
 
+> This works for Filament 3 and 4.
+
 ```php
 use Kirschbaum\Commentions\Filament\Actions\CommentsAction;
 
@@ -99,7 +105,15 @@ protected function getHeaderActions(): array
 
 ***
 
-### Configuring the User model and the mentionables
+### Configuration
+
+You can publish the configuration file to make changes.
+
+```bash
+php artisan vendor:publish --tag="commentions-config"
+```
+
+#### Configuring the User model and the mentionables
 
 If your `User` model lives in a different namespace than `App\Models\User`, you can configure it in `config/commentions.php`:
 
@@ -109,7 +123,7 @@ If your `User` model lives in a different namespace than `App\Models\User`, you
     ],
 ```
 
-### Configuring the Comment model
+#### Configuring the Comment model
 
 If you need to customize the Comment model, you can extend the `\Kirschbaum\Commentions\Comment` class and then update the `comment.model` option in your `config/commentions.php` file:
 
@@ -120,20 +134,20 @@ If you need to customize the Comment model, you can extend the `\Kirschbaum\Comm
     ],
 ```
 
-### Configuring Comment permissions
+#### Configuring Comment permissions
 
 By default, users can create comments, as well as edit and delete their own comments. You can adjust these permissions by implementing your own policy:
 
-#### 1) Create a custom policy
+##### 1) Create a custom policy
 
 ```php
 namespace App\Policies;
 
 use Kirschbaum\Commentions\Comment;
 use Kirschbaum\Commentions\Contracts\Commenter;
-use Kirschbaum\Commentions\Policies\CommentPolicy;
+use Kirschbaum\Commentions\Policies\CommentPolicy as CommentionsPolicy;
 
-class CommentPolicy extends CommentPolicy
+class CommentPolicy extends CommentionsPolicy
 {
     public function create(Commenter $user): bool
     {
@@ -152,7 +166,7 @@ class CommentPolicy extends CommentPolicy
 }
 ```
 
-#### 2) Register your policy in the configuration file
+##### 2) Register your policy in the configuration file
 
 Update the `comment.policy` option in your `config/commentions.php` file:
 
@@ -266,13 +280,13 @@ $comment->getMentioned()->each(function (Commenter $commenter) {
 
 ### Polling for new comments
 
-Commentions supports polling for new comments. You can enable it on any component by calling the `pollingInterval` method and passing the number of seconds.
+Commentions supports polling for new comments. You can enable it on any component by calling the `poll` method and passing the desired interval.
 
 ```php
 Infolists\Components\Section::make('Comments')
     ->schema([
         CommentsEntry::make('comments')
-            ->pollingInterval(10)
+            ->poll('10s')
     ]),
 ```
 

composer.json

@@ -26,9 +26,9 @@
         "illuminate/support": "^11.0|^12.0",
         "illuminate/database": "^11.0|^12.0",
         "livewire/livewire": "^3.5",
-        "filament/support": "^3.2",
-        "filament/notifications": "^3.2",
-        "filament/filament": "^3.2"
+        "filament/support": "^3.2|^4.0",
+        "filament/notifications": "^3.2|^4.0",
+        "filament/filament": "^3.2|^4.0"
     },
     "extra": {
         "laravel": {

resources/css/commentions.css

@@ -1,5 +1,6 @@
 @import "tailwindcss" source(none) prefix(comm) important;
 
+@source "../js/";
 @source "../views/";
 @source "../../src";
 

resources/dist/commentions.css

@@ -30,7 +30,7 @@ document.addEventListener('alpine:init', () => {
                     ],
                     editorProps: {
                         attributes: {
-                            class: `prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-2xl focus:outline-none p-4 min-w-full w-full rounded-lg border border-gray-300 dark:border-gray-700`,
+                            class: `comm:prose comm:dark:prose-invert comm:prose-sm comm:sm:prose-base comm:lg:prose-lg comm:xl:prose-2xl comm:focus:outline-none comm:p-4 comm:min-w-full comm:w-full comm:rounded-lg comm:border comm:border-gray-300 comm:dark:border-gray-700`,
                         },
                     },
                     placeholder: 'Type something...',

resources/dist/commentions.js

@@ -1,4 +1,4 @@
-<div @if ($pollingInterval) wire:poll.{{ $pollingInterval }}s @endif>
+<div @if ($pollingInterval) wire:poll.{{ $pollingInterval }} @endif>
     @if ($this->comments->isEmpty())
         <div class="comm:flex comm:items-center comm:justify-center comm:p-6 comm:text-center comm:rounded-lg comm:border comm:border-dashed comm:border-gray-300 comm:dark:border-gray-700">
             <div class="comm:flex comm:flex-col comm:items-center comm:gap-y-2">

resources/js/commentions.js

@@ -1,6 +1,6 @@
 @use('\Kirschbaum\Commentions\Config')
 
-<div class="comm:flex comm:items-start comm:gap-x-4 comm:border comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2" id="filament-comment-{{ $comment->getId() }}">
+<div class="comm:flex comm:items-start comm:gap-x-4 comm:border comm:border-gray-300 comm:dark:border-gray-700 comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2" id="filament-comment-{{ $comment->getId() }}">
     @if ($avatar = $comment->getAuthorAvatar())
         <img
             src="{{ $comment->getAuthorAvatar() }}"
@@ -46,12 +46,44 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
                     @endif
 
                     @if (Config::resolveAuthenticatedUser()?->can('delete', $comment))
-                        <x-filament::icon-button
-                            icon="heroicon-s-trash"
-                            wire:click="$dispatch('open-modal', { id: 'delete-comment-modal-{{ $comment->getId() }}' })"
-                            size="xs"
-                            color="gray"
-                        />
+                        <x-filament::modal
+                            id="delete-comment-modal-{{ $comment->getId() }}"
+                            width="sm"
+                        >
+                            <x-slot name="trigger">
+                                <x-filament::icon-button
+                                    icon="heroicon-s-trash"
+                                    size="xs"
+                                    color="gray"
+                                />
+                            </x-slot>
+
+                            <x-slot name="heading">
+                                Delete Comment
+                            </x-slot>
+
+                            <div class="comm:py-4">
+                                Are you sure you want to delete this comment? This action cannot be undone.
+                            </div>
+
+                            <x-slot name="footer">
+                                <div class="comm:flex comm:justify-end comm:gap-x-4">
+                                    <x-filament::button
+                                        wire:click="$dispatch('close-modal', { id: 'delete-comment-modal-{{ $comment->getId() }}' })"
+                                        color="gray"
+                                    >
+                                        Cancel
+                                    </x-filament::button>
+
+                                    <x-filament::button
+                                        wire:click="delete"
+                                        color="danger"
+                                    >
+                                        Delete
+                                    </x-filament::button>
+                                </div>
+                            </x-slot>
+                        </x-filament::modal>
                     @endif
                 </div>
             @endif
@@ -93,38 +125,4 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
             @endif
         @endif
     </div>
-
-    @if ($comment->isComment() && \Kirschbaum\Commentions\Config::resolveAuthenticatedUser()?->can('delete', $comment))
-        <x-filament::modal
-            id="delete-comment-modal-{{ $comment->getId() }}"
-            wire:model="showDeleteModal"
-            width="sm"
-        >
-            <x-slot name="heading">
-                Delete Comment
-            </x-slot>
-
-            <div class="comm:py-4">
-                Are you sure you want to delete this comment? This action cannot be undone.
-            </div>
-
-            <x-slot name="footer">
-                <div class="comm:flex comm:justify-end comm:gap-x-4">
-                    <x-filament::button
-                        wire:click="$dispatch('close-modal', { id: 'delete-comment-modal-{{ $comment->getId() }}' })"
-                        color="gray"
-                    >
-                        Cancel
-                    </x-filament::button>
-
-                    <x-filament::button
-                        wire:click="delete"
-                        color="danger"
-                    >
-                        Delete
-                    </x-filament::button>
-                </div>
-            </x-slot>
-        </x-filament::modal>
-    @endif
 </div>

resources/views/comment-list.blade.php

@@ -6,7 +6,6 @@
 use Closure;
 use DateTime;
 use Filament\Models\Contracts\HasAvatar;
-use Filament\Support\Facades\FilamentColor;
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -20,7 +19,6 @@
 use Kirschbaum\Commentions\Contracts\Commenter;
 use Kirschbaum\Commentions\Contracts\RenderableComment;
 use Kirschbaum\Commentions\Database\Factories\CommentFactory;
-use Spatie\Color\Rgb;
 
 /**
  * @property int $id
@@ -133,9 +131,7 @@ public function getAuthorAvatar(): string
             ->map(fn (string $segment): string => filled($segment) ? mb_substr($segment, 0, 1) : '')
             ->join(' ');
 
-        $backgroundColor = Rgb::fromString('rgb(' . FilamentColor::getColors()['gray'][950] . ')')->toHex();
-
-        return 'https://ui-avatars.com/api/?name=' . urlencode($name) . '&color=FFFFFF&background=' . str($backgroundColor)->after('#');
+        return 'https://ui-avatars.com/api/?name=' . urlencode($name) . '&color=FFFFFF&background=71717b';
     }
 
     public function getBody(): string

resources/views/comment.blade.php

@@ -25,6 +25,8 @@ protected function setUp(): void
             ]))
             ->modalWidth('xl')
             ->label('Comments')
+            ->modalSubmitAction(false)
+            ->modalCancelAction(false)
             ->modalAutofocus(false);
     }