From 6b125d67099d7b0cbe1d1f7e1a17372506af9342 Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Fri, 5 Dec 2025 02:46:39 -0500
Subject: [PATCH] feat: Defer Drawer rendering until client-side mount to
 prevent hydration mismatches and adjust discovery panel state.

---
 src/app/page.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7354875..721f4ca 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,10 +10,12 @@ import { WelcomeModal } from "~/components/WelcomeModal";
 
 export default function HomePage() {
   const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
-  const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
+  const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true); // Default to true for SSR
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    // Hide discovery panel on mobile initially
+    setMounted(true);
+    // Set based on viewport after mount
     const isMobile = window.innerWidth < 640; // sm breakpoint
     setIsDiscoveryOpen(!isMobile);
   }, []);
@@ -29,21 +31,22 @@ export default function HomePage() {
           shops={COFFEE_SHOPS}
           onShopSelect={(shop: typeof COFFEE_SHOPS[0]) => {
             setSelectedShop(shop);
-            setIsDiscoveryOpen(true);
           }}
           selectedShop={selectedShop}
         />
       </div>
 
-      {/* Right Drawer */}
-      <Drawer
-        shop={selectedShop}
-        shops={COFFEE_SHOPS}
-        onSelect={setSelectedShop}
-        onClose={() => setSelectedShop(null)}
-        isOpen={isDiscoveryOpen}
-        onToggleOpen={() => setIsDiscoveryOpen(false)}
-      />
+      {/* Right Drawer - only render after mount to prevent hydration mismatch */}
+      {mounted && (
+        <Drawer
+          shop={selectedShop}
+          shops={COFFEE_SHOPS}
+          onSelect={setSelectedShop}
+          onClose={() => setSelectedShop(null)}
+          isOpen={isDiscoveryOpen}
+          onToggleOpen={() => setIsDiscoveryOpen(false)}
+        />
+      )}
       <WelcomeModal />
     </main>
   );