From 1838502b8b91e3927a2f3bdeaa6aca8465b4027f Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 7 Dec 2025 01:59:55 +0000
Subject: [PATCH] fix: prevent hydration error in NotificationPrompt

Add mounted state to prevent SSR rendering.
Component now only renders after client-side mount.
Fixes login blocking hydration error.
---
 components/NotificationPrompt.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/NotificationPrompt.tsx b/components/NotificationPrompt.tsx
index fd25b61..e86b34e 100644
--- a/components/NotificationPrompt.tsx
+++ b/components/NotificationPrompt.tsx
@@ -8,8 +8,15 @@ export default function NotificationPrompt() {
   const { permission, isSubscribed, subscribe } = usePushNotifications();
   const [showPrompt, setShowPrompt] = useState(false);
   const [dismissed, setDismissed] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
     // Check if we should show the prompt
     const shouldShow = 
       'Notification' in window &&
@@ -27,7 +34,7 @@ export default function NotificationPrompt() {
 
       return () => clearTimeout(timer);
     }
-  }, [permission, isSubscribed, dismissed]);
+  }, [mounted, permission, isSubscribed, dismissed]);
 
   const handleEnable = async () => {
     const success = await subscribe();
@@ -42,12 +49,14 @@ export default function NotificationPrompt() {
   };
 
   const handleDismissForever = () => {
-    localStorage.setItem('notification-prompt-dismissed', 'true');
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('notification-prompt-dismissed', 'true');
+    }
     setShowPrompt(false);
     setDismissed(true);
   };
 
-  if (!showPrompt) {
+  if (!mounted || !showPrompt) {
     return null;
   }