feat: integrate Firebase Cloud Messaging for push notifications

app/components/NotificationHandler.js

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { requestNotificationPermission, onForegroundMessage } from "../utils/firebase";
+
+export default function NotificationHandler() {
+  const [notification, setNotification] = useState(null);
+
+  useEffect(() => {
+    // Request permission and get token
+    requestNotificationPermission().then((token) => {
+      if (token) {
+        console.log("[Notifications] FCM token obtained");
+        // TODO: Send token to your backend to register the device
+        // e.g. apiFetch('/Notifications/RegisterDevice', { method: 'POST', body: { token } })
+      }
+    });
+
+    // Listen for foreground messages
+    const unsubscribe = onForegroundMessage((payload) => {
+      const title = payload.notification?.title || payload.data?.title || "Sweet Home";
+      const body = payload.notification?.body || payload.data?.body || "";
+      setNotification({ title, body });
+
+      // Auto-dismiss after 5 seconds
+      setTimeout(() => setNotification(null), 5000);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  if (!notification) return null;
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999] animate-slide-up">
+      <div className="flex items-start gap-3">
+        <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
+          <span className="text-xl">🏠</span>
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="font-bold text-gray-900 text-sm">{notification.title}</p>
+          <p className="text-gray-600 text-sm mt-0.5">{notification.body}</p>
+        </div>
+        <button
+          onClick={() => setNotification(null)}
+          className="text-gray-400 hover:text-gray-600 flex-shrink-0"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}