feat: add NotificationPermissionPrompt component for handling push notification permissions

app/Http/Middleware/HandleInertiaRequests.php

@@ -54,6 +54,7 @@ public function share(Request $request): array
                 'image' => url('/assets/logo.png'),
                 'url' => $request->url(),
             ],
+            'vapidPublicKey' => config('webpush.vapid.public_key'),
         ];
     }
 }

resources/js/components/notifications/index.ts

@@ -1,4 +1,5 @@
 export { default as AlertError } from './alert-error';
 export { FlashToast } from './flash-toast';
 export { NotificationBell } from './notification-bell';
+export { NotificationPermissionPrompt } from './notification-permission-prompt';
 export { PWAUpdateToast } from './pwa-update-toast';

resources/js/components/notifications/notification-permission-prompt.tsx

@@ -0,0 +1,31 @@
+import { usePage } from '@inertiajs/react';
+import { useEffect, useRef } from 'react';
+import { usePushNotification } from '@/hooks/use-push-notification';
+
+export function NotificationPermissionPrompt() {
+    const { vapidPublicKey } = usePage().props as { vapidPublicKey?: string };
+    const hasRequested = useRef(false);
+
+    const { isSupported, requestPermission, subscribe } =
+        usePushNotification();
+
+    useEffect(() => {
+        if (!isSupported || hasRequested.current) {
+            return;
+        }
+
+        if (Notification.permission !== 'default') {
+            return;
+        }
+
+        hasRequested.current = true;
+
+        void requestPermission().then(async (result) => {
+            if (result === 'granted' && vapidPublicKey) {
+                await subscribe(vapidPublicKey);
+            }
+        });
+    }, [isSupported, requestPermission, subscribe, vapidPublicKey]);
+
+    return null;
+}

resources/js/layouts/app-layout.tsx

@@ -1,3 +1,4 @@
+import { NotificationPermissionPrompt } from '@/components/notifications/notification-permission-prompt';
 import { Toaster } from '@/components/ui/sonner';
 import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
 import type { BreadcrumbItem } from '@/types';
@@ -13,6 +14,7 @@ export default function AppLayout({
         <AppLayoutTemplate breadcrumbs={breadcrumbs}>
             {children}
             <Toaster />
+            <NotificationPermissionPrompt />
         </AppLayoutTemplate>
     );
 }