From 2cf1dc9ed2dce2e30e369d4ad52f273fd91e03b9 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 01:10:43 +0000
Subject: [PATCH] Fix hydration error in ListDetailView permission section

- Add mounted state to prevent SSR/client mismatch
- Permission badge and share button only render after mount
- Resolves hydration error on list detail page
---
 components/ListDetailView.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/ListDetailView.tsx b/components/ListDetailView.tsx
index c373268..f9ed84f 100644
--- a/components/ListDetailView.tsx
+++ b/components/ListDetailView.tsx
@@ -66,11 +66,16 @@ export default function ListDetailView({
   ownerEmail = '',
   collaborators = []
 }: ListDetailViewProps) {
+  const [mounted, setMounted] = useState(false)
   const [searchResults, setSearchResults] = useState<ItemWithList[]>([])
   const [isSearching, setIsSearching] = useState(false)
   const [filteredItems, setFilteredItems] = useState<Item[]>(initialItems)
   const [isShareModalOpen, setIsShareModalOpen] = useState(false)
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   // Use scroll position preservation hook
   useScrollPosition({ key: `list-${listId}` })
 
@@ -157,7 +162,7 @@ export default function ListDetailView({
   return (
     <div className="space-y-6">
       {/* Permission Badge and Share Button */}
-      {(permission || canShare) && (
+      {mounted && (permission || canShare) && (
         <div className="flex items-center gap-2">
           {permission && <PermissionBadge permission={permission} />}
           {canShare && (