lar:[137] change notification count and indicator to volt component

resources/views/livewire/notification-count.blade.php

@@ -1,3 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Support\Facades\Auth;
+
+use function Livewire\Volt\{on};
+use function Livewire\Volt\{state};
+
+state(['count' => Auth::user()->unreadNotifications()->count()]);
+
+on(['NotificationMarkedAsRead' => fn (int $count) => $count ]);
+
+?>
+
 <span class="rounded-full bg-green-100 px-3 text-base text-green-500">
     {{ $count }}
 </span>

resources/views/livewire/notification-indicator.blade.php

@@ -1,3 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Support\Facades\Auth;
+
+use function Livewire\Volt\{on};
+use function Livewire\Volt\{state};
+
+state(['hasNotification' => Auth::user()->unreadNotifications()->count() > 0 ]);
+
+on(['NotificationMarkedAsRead' => fn (int $count) => $count > 0 ]);
+
+?>
+
 <span
-    class="{{ $hasNotification ? 'shadow-solid absolute right-0 top-0 block size-2 rounded-full bg-primary-600 text-white' : 'hidden' }}"
+    @class([
+        'shadow-solid absolute right-0 top-0 block size-2 rounded-full bg-primary-600 text-white',
+        'hidden' => ! $hasNotification,
+        'block' => $hasNotification,
+    ])
 ></span>

tests/Feature/Livewire/Components/NotificationCountTest.php

@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+use Livewire\Volt\Volt;
+
+beforeEach(function (): void {
+    $this->user = $this->login();
+});
+
+it('renders successfully', function (): void {
+    Volt::test('notification-count')
+        ->assertStatus(200);
+});
+
+it('can display user count notification', function (): void {
+    Volt::test('notification-count')
+        ->assertSee($this->user->unreadNotifications()->count());
+});

tests/Feature/Livewire/Components/NotificationIndicatorTest.php

@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+use Livewire\Volt\Volt;
+
+beforeEach(function (): void {
+    $this->user = $this->login();
+});
+
+it('renders successfully', function (): void {
+    Volt::test('notification-indicator')
+        ->assertStatus(200);
+});
+
+it('mask indicator if user can have unread notification', function (): void {
+    Volt::test('notification-indicator')
+        ->assertSet('hasNotification', false);
+});