From f5fbf1f33869a00d2d664e0b321ca23b4177c3a7 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 07:16:23 +0100
Subject: [PATCH] Add hydration safety to AccountMenu

- Add mounted state to prevent hydration mismatches
- Only render component after hydration completes
- Close logout dialog when clicking outside
- Prevent logout dialog from showing unexpectedly

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/AccountMenu.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/AccountMenu.tsx b/src/components/AccountMenu.tsx
index a792f60..daaafd1 100644
--- a/src/components/AccountMenu.tsx
+++ b/src/components/AccountMenu.tsx
@@ -9,13 +9,21 @@ type AccountMenuProps = {
 };
 
 export default function AccountMenu({ customer }: AccountMenuProps) {
+  const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     const onClickOutside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+        setShowLogoutConfirm(false);
+      }
     };
     document.addEventListener('mousedown', onClickOutside);
     return () => document.removeEventListener('mousedown', onClickOutside);
@@ -29,6 +37,8 @@ export default function AccountMenu({ customer }: AccountMenuProps) {
     );
   }
 
+  if (!mounted) return null;
+
   return (
     <div ref={ref} className="relative">
       <button
@@ -54,7 +64,7 @@ export default function AccountMenu({ customer }: AccountMenuProps) {
         </div>
       )}
 
-      {showLogoutConfirm && (
+      {mounted && showLogoutConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
           <div className="w-96 border border-line bg-paper p-6 shadow-lg">
             <h2 className="font-display text-lg">Log out?</h2>