Database Notifications - Customizable "Mark All as Read" Action

packages/notifications/resources/views/components/database/modal/actions.blade.php

@@ -1,18 +1,12 @@
 @props([
     'notifications',
     'unreadNotificationsCount',
+    'markAllNotificationsAsReadAction',
 ])
 
 <div {{ $attributes->class('mt-2 flex gap-x-3') }}>
-    @if ($unreadNotificationsCount)
-        <x-filament::link
-            color="primary"
-            tabindex="-1"
-            tag="button"
-            wire:click="markAllNotificationsAsRead"
-        >
-            {{ __('filament-notifications::database.modal.actions.mark_all_as_read.label') }}
-        </x-filament::link>
+    @if ($unreadNotificationsCount && $markAllNotificationsAsReadAction)
+        {{ ($markAllNotificationsAsReadAction)->isVisible() ? $markAllNotificationsAsReadAction : '' }}
     @endif
 
     <x-filament::link

packages/notifications/resources/views/components/database/modal/index.blade.php

@@ -1,6 +1,7 @@
 @props([
     'notifications',
     'unreadNotificationsCount',
+    'markAllNotificationsAsReadAction',
 ])
 
 @php
@@ -33,6 +34,7 @@
                 <x-filament-notifications::database.modal.actions
                     :notifications="$notifications"
                     :unread-notifications-count="$unreadNotificationsCount"
+                    :mark-all-notifications-as-read-action="$markAllNotificationsAsReadAction"
                 />
             </div>
         </x-slot>

packages/notifications/resources/views/database-notifications.blade.php

@@ -1,6 +1,7 @@
 @php
     $notifications = $this->getNotifications();
     $unreadNotificationsCount = $this->getUnreadNotificationsCount();
+    $markAllNotificationsAsReadAction = $this->getMarkAllNotificationsAsReadAction();
 @endphp
 
 <div
@@ -18,6 +19,7 @@ class="flex"
     <x-filament-notifications::database.modal
         :notifications="$notifications"
         :unread-notifications-count="$unreadNotificationsCount"
+        :mark-all-notifications-as-read-action="$markAllNotificationsAsReadAction"
     />
 
     @if ($broadcastChannel = $this->getBroadcastChannel())

packages/notifications/src/Livewire/DatabaseNotifications.php

@@ -3,6 +3,7 @@
 namespace Filament\Notifications\Livewire;
 
 use Carbon\CarbonInterface;
+use Filament\Actions\Action;
 use Filament\Notifications\Notification;
 use Illuminate\Contracts\Auth\Authenticatable;
 use Illuminate\Contracts\Pagination\Paginator;
@@ -28,6 +29,8 @@ class DatabaseNotifications extends Component
 
     public static ?string $authGuard = null;
 
+    public static ?Action $markAllNotificationsAsReadAction = null;
+
     #[On('databaseNotificationsSent')]
     public function refresh(): void {}
 
@@ -113,6 +116,19 @@ public function getTrigger(): ?View
         return view($viewPath);
     }
 
+    public function getMarkAllNotificationsAsReadAction(): Action
+    {
+        if ($action = static::$markAllNotificationsAsReadAction) {
+            return $action;
+        }
+
+        return Action::make('markAllNotificationsAsRead')
+            ->link()
+            ->label(__('filament-notifications::database.modal.actions.mark_all_as_read.label'))
+            ->extraAttributes(['tabindex' => '-1'])
+            ->action('markAllNotificationsAsRead');
+    }
+
     public function getUser(): Model | Authenticatable | null
     {
         return auth(static::$authGuard)->user();

packages/panels/docs/06-notifications.md

@@ -33,6 +33,27 @@ public function panel(Panel $panel): Panel
 }
 ```
 
+## Customizing the "Mark All as Read" Action
+
+To customize the "Mark All as Read" button, you can use the `databaseNotificationsMarkAllAsReadAction()` method, passing a closure that returns an action. All methods that are available to [customize action trigger buttons](../../actions/trigger-button) can be used:
+
+```php
+use Filament\Actions\Action;
+use Filament\Panel;
+
+public function panel(Panel $panel): Panel
+{
+    return $panel
+        // ...
+        ->databaseNotifications()
+        ->databaseNotificationsMarkAllAsReadAction(fn (Action $action) => $action
+            ->button()
+            ->color('success')
+            ->label('Read All')
+        );
+}
+```
+
 ## Setting up websockets in a panel
 
 The Panel Builder comes with a level of inbuilt support for real-time broadcast and database notifications. However there are a number of areas you will need to install and configure to wire everything up and get it working.

packages/panels/src/Facades/Filament.php

@@ -105,6 +105,7 @@
  * @method static string | null getUrl(Model | null $tenant = null)
  * @method static string getVerifyEmailUrl(MustVerifyEmail | Model | Authenticatable $user, array $parameters = [])
  * @method static array getWidgets()
+ * @method static Action getDatabaseNotificationsMarkAllAsReadAction()
  * @method static bool hasBreadcrumbs()
  * @method static bool hasCollapsibleNavigationGroups()
  * @method static bool hasDarkMode()

packages/panels/src/FilamentManager.php

@@ -589,6 +589,11 @@ public function getWidgets(): array
         return $this->getCurrentPanel()->getWidgets();
     }
 
+    public function getDatabaseNotificationsMarkAllAsReadAction(): Action
+    {
+        return $this->currentPanel->getDatabaseNotificationsMarkAllAsReadAction();
+    }
+
     public function hasBreadcrumbs(): bool
     {
         return $this->getCurrentPanel()->hasBreadcrumbs();

packages/panels/src/Livewire/DatabaseNotifications.php

@@ -2,6 +2,7 @@
 
 namespace Filament\Livewire;
 
+use Filament\Actions\Action;
 use Filament\Facades\Filament;
 use Filament\Notifications\Livewire\DatabaseNotifications as BaseComponent;
 use Illuminate\Contracts\Auth\Authenticatable;
@@ -24,4 +25,9 @@ public function getTrigger(): View
     {
         return view('filament-panels::components.topbar.database-notifications-trigger');
     }
+
+    public function getMarkAllNotificationsAsReadAction(): Action
+    {
+        return Filament::getDatabaseNotificationsMarkAllAsReadAction();
+    }
 }

packages/panels/src/Panel/Concerns/HasNotifications.php

@@ -3,13 +3,16 @@
 namespace Filament\Panel\Concerns;
 
 use Closure;
+use Filament\Actions\Action;
 
 trait HasNotifications
 {
     protected bool | Closure $hasDatabaseNotifications = false;
 
     protected string | Closure | null $databaseNotificationsPolling = '30s';
 
+    protected ?Closure $modifyDatabaseNotificationsMarkAllAsReadUsing = null;
+
     public function databaseNotifications(bool | Closure $condition = true): static
     {
         $this->hasDatabaseNotifications = $condition;
@@ -24,6 +27,13 @@ public function databaseNotificationsPolling(string | Closure | null $interval):
         return $this;
     }
 
+    public function databaseNotificationsMarkAllAsReadAction(?Closure $callback): static
+    {
+        $this->modifyDatabaseNotificationsMarkAllAsReadUsing = $callback;
+
+        return $this;
+    }
+
     public function hasDatabaseNotifications(): bool
     {
         return (bool) $this->evaluate($this->hasDatabaseNotifications);
@@ -33,4 +43,21 @@ public function getDatabaseNotificationsPollingInterval(): ?string
     {
         return $this->evaluate($this->databaseNotificationsPolling);
     }
+
+    public function getDatabaseNotificationsMarkAllAsReadAction(): Action
+    {
+        $action = Action::make('markAllNotificationsAsRead')
+            ->link()
+            ->label(__('filament-notifications::database.modal.actions.mark_all_as_read.label'))
+            ->extraAttributes(['tabindex' => '-1'])
+            ->action('markAllNotificationsAsRead');
+
+        if ($this->modifyDatabaseNotificationsMarkAllAsReadUsing) {
+            $action = $this->evaluate($this->modifyDatabaseNotificationsMarkAllAsReadUsing, [
+                'action' => $action,
+            ]) ?? $action;
+        }
+
+        return $action;
+    }
 }