From 1c5e623c7b73b9edf1101d37ac6b2406e680c257 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 7 Dec 2025 01:53:52 +0000
Subject: [PATCH] fix: prevent hydration error in NotificationDebug component

Add mounted state to prevent rendering during SSR.
Component now only renders after client-side mount.
---
 components/NotificationDebug.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/NotificationDebug.tsx b/components/NotificationDebug.tsx
index 788ef06..d8d9e85 100644
--- a/components/NotificationDebug.tsx
+++ b/components/NotificationDebug.tsx
@@ -3,9 +3,11 @@
 import { useEffect, useState } from 'react';
 
 export default function NotificationDebug() {
+  const [mounted, setMounted] = useState(false);
   const [debug, setDebug] = useState<any>({});
 
   useEffect(() => {
+    setMounted(true);
     const info = {
       notificationSupported: 'Notification' in window,
       serviceWorkerSupported: 'serviceWorker' in navigator,
@@ -16,6 +18,10 @@ export default function NotificationDebug() {
     setDebug(info);
   }, []);
 
+  if (!mounted) {
+    return null;
+  }
+
   return (
     <div className="fixed bottom-4 left-4 bg-black text-white text-xs p-3 rounded-lg max-w-xs z-50 font-mono">
       <div className="font-bold mb-2">Push Debug:</div>